/*------------------  globals ------------------------*/
html{
    font-size:62.5%
}

body{
    margin:0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
    font-size:1.6rem;
}
h1 {
    display: block;
    font-size: 2em;
    margin: 2em 0 .5em;
    font-weight: bold;
}
h2 {
    display: block;
    font-size: 1.5em;
    margin: 0.5em 0;
    font-weight: bold;
}
h3{
    display: block;
    font-size: 1.17em;
    margin: 0.5em 0;
    font-weight: bold;
}
h4{
    display: block;
    font-size: 1em;
    margin: 0.5em 0;
    font-weight: bold;;
}

p{
    margin: 0.5em 0;
}
a{
    text-decoration: none;
}

.color-brand{
    color: #116d82;
}
.color-text{
    color: #333333
}
.color-text-muted{
    color: #6d6d6d;
}
.color-action{
    color: #f28f6f
}
.color-text-inverse-muted{
    color:gainsboro;
}
.color-text-inverse{
    color:white;
}
.bg-learn{
background-color:#F3F5F6;
}
.bg-brand{
    background-color: #116d82;
}

.bg-light{
    background-color: #f8f8f8
}
.bg-white{
    background-color: white;
}
.bg-black{
    background-color: #222
}
.bg-dark{
    background-color: #333
}
.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}


@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

.section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

}

.container:before,
.container:after,
.section:before,
.section:after{
    content: " ";
    display: table;
}

.clearfix:after,
.container:after,
.section:after {
    clear: both;
}

@media (max-height: 400px) {

    .hide-short {
        display: none !important;
    }
}

@media (max-width: 767px) {
    html{
        font-size:50%
    }
    .hide-mobile {
        display: none !important;
    }
}
@media (min-width: 768px) {
    .hide-not-mobile {
        display: none !important;
    }
}

.center{
    text-align:center;
}
.left{
    text-align:left;
}
.right{
    text-align:right!important;
}
.muted{
    color: #6d6d6d;
}
.muted:hover{
    color: #333333
}

.button  {
    border-radius: 5px;

    margin-right: 10px;
    padding: 5px 10px ;
    text-decoration: none ;

}
.mt20{
   margin-top:20px;
}

.button-o {
    border: solid 2px #d9534f;
    color: #d9534f;
}


.button-o:hover {
    background-color: #e6e6e6;

}

.button-inverse {
    border: solid 2px white;
    background-color: white;
    color:black;
}
.button-inverse:hover {
        background-color: #e6e6e6;
}
.button-inverse:active {
    background-color: #d9d9d9;
}


.button-action {
    border: solid 2px   #d26f4f;
    background-color:  #d26f4f;
    color: white;
}

.button-action:hover {
    color: #d9534f;
    background-color: #e6e6e6;
}
.button-action:active {
    background-color: #d9d9d9;
}


.grid{
    display:flex;
    justify-content:center;
    align-items: stretch;
    
    flex-wrap: wrap;

}





.card{

    display: flex;

    flex-direction:column;
    justify-content: space-between;
    margin: 2rem 5px;
    transition:   350ms;

    flex: 1 0 27%
}

.card-o{
    box-shadow: 0 0 5px #cccccc;
}

.card-button{
    box-shadow: 0 0 5px #cccccc;
}

.card-button:hover{
    box-shadow: 2px 2px 15px gray;
}




/*------------------ end globals ------------------------*/



/* -----navigation section -----------------*/
#navigation{
    padding: 10px 0 10px 0;
    box-shadow: 0 0 5px #cccccc;
    position:fixed;
    height:48px;
    z-index: 1000;
}


#navigation .nav{

    display:flex;
    align-items:center;
    justify-content: space-between;

    flex-direction: row;

}
#navigation .nav-item{
   padding-right: 5px;
}



/* -----top spacer -----------------*/

#top-spacer{
    padding-top:68px;


}

/* -----hero section -----------------*/

#hero .backdrop {
    width: 100%;
    height: 70vh;
    z-index: -1;
    background-image: url("hero.svg");

    text-shadow: none;
    background-size: cover;
    background-position: right 20% bottom;
    background-repeat: no-repeat;

}
.headline{
    display:flex;
    justify-items: center;
    flex-direction: column;
    width:70%;
    height:30vh;

}
.learn-more{
    margin-top:1em;
       }


@media only screen  and (max-width: 899px) {

    #hero   .headline { width:100%
    }
}


#benefits{

    padding-bottom: 5rem;
}

#benefits .card{
    justify-content: flex-start;
}





@media only screen and (max-width: 599px) {
    /* X Small screen*/
 .grid {
        flex-direction: column;

    }
}



#testamonials{
    background-color:#116d82;


}


 .image img{
    display: block;
    margin-bottom:2rem;
    margin-left: auto;
    margin-right: auto;
       z-index: 10;

}
#testamonials  .image img {


    width: 7em;
}
.quote {

 margin:0 2rem;

}

.grid2col{
    display:flex;
    justify-content:center;
    margin-top: 4rem;
    margin-bottom:4rem;
}
.text-column{
    margin-right:2rem;
    flex: 0 1 auto;
    align-self: flex-start;

}
.image-column{

    object-fit: contain;
    align-self: flex-start;
}
.image-column img {
    width: 100%;
    box-shadow: 0 0 5px #cccccc;
}


#features .grid{

    align-items: baseline;


}

#contact {
    padding: 5rem 0 8rem 0;
}

footer a{

    color:inherit;
}
footer a:hover{

    color:white;
}
footer .grid{
    justify-content: flex-start;
    align-items: flex-start;
}

#learn {
    background-color: #efefef;
}
#learn .grid1{
    padding-top:68px;
    display:flex;
    flex-direction: row;
    height: calc(100vh - 68px);
    justify-content: space-between;

}
#learn .grid-item{
    flex: 1 0 48%;
    padding-right: 2rem;
}
#learn img {
    width: 100%;
}

#learn iframe{
    width:100%;
    height: calc(100vh - 68px);
    border: none;

}
@media (max-width: 767px) {
    #learn .grid1{
        flex-direction: column;
        justify-content: flex-start;

    }
    #learn .grid-item{
        flex: 1;
    }
}