/*Tool tip*/
.info-icon{
    position: relative;
    color: white; 
    background-color: #009A8A; 
    padding: 3px 6px; border-radius: 15px;
    display: none;
}

.info-icon .tooltiptext{
    visibility: hidden;
    width: 250px;
    background-color: #009a8a;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 150%;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 11pt;
    line-height: 14pt;
}

.info-icon .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #009a8a transparent transparent;
}

.info-icon:hover .tooltiptext {
    visibility: visible;

}/*End of Tooltip*/


/*Input*/
input.flat { border-radius: 0; }

input::focus{background-color: white}

input.bg-gray{background-color: #F0F2F4}

/*Links*/
a{
    text-decoration: none;
}

/*Sections*/
section.gutter{
    padding: 3rem 0;
}

section.gutter-sm{
    padding: 1rem 0;
}
/*Formatting*/
.text-center{text-align: center}
.text-right{text-align: right}
.text-left{text-align: left}
.text-upper{text-transform: uppercase;}
.text-bold{font-weight: bold;}
.no-radius{border-radius: 0;}
/*Image magnification*/
    .mag{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: hidden;
        height:100%; width:100%;
    }

    .mag-obj::before {
      content: "";
      display: none;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.3);
    }

    .mag-obj{
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center; 
        /*height: 100%; 
        width: 100%;*/
        transition: all .5s;
    }
    .mag:hover .mag-obj::before,
    .mag:focus .mag-obj::before
    {
      display: block;
    }

    .mag:hover .mag-obj,
    .mag:focus .mag-obj,
    .mag-obj:hover
    {
      transform: scale(1.10);
    }

/*End of image magnification*/

/*Card*/
.card{overflow: hidden}
.card:hover{
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
}