*, *:before, *:after {
    box-sizing: border-box;
    margin-left: 0;
    margin-right:0;
}

h1, h2{
    text-align: center;
    font-family: "Ubuntu", sans-serif;
}

h3, p, span, textarea, li{
    font-family: "Roboto", sans-serif;
}


#navbar{
    width: 100%;
    background-color: slategray;
    height: 3rem;
    position: sticky;
    top: 0;
}

#navbar ul{
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
    list-style-type: none;
}

#navbar a{
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 2rem;
    width: 10rem;
}


#navbar a:link{
    text-decoration: none;
    color: black;
}

#navbar a:visited{
    text-decoration: none;
    color: black;
}

#navbar a:hover{
    font-size: 1.1rem;
    background-color: rgba(255,255,255,0.5);
}

#navbar a:active{
    font-size: 1.1rem;
    background-color: rgba(255,255,255,0.5);
}

.section{
    width: 100%;
    min-height: calc(100vh + 3rem);
    margin-top: -3rem;
    padding-top:3rem;
    margin-bottom: 0px;
    padding-left: 1rem;
    padding-right: 1rem;
    background: rgba(149,170,189,1);
    background: -moz-linear-gradient(top, rgba(149,170,189,1) 0%, rgba(247,248,250,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(149,170,189,1)), color-stop(100%, rgba(247,248,250,1)));
    background: -webkit-linear-gradient(top, rgba(149,170,189,1) 0%, rgba(247,248,250,1) 100%);
    background: -o-linear-gradient(top, rgba(149,170,189,1) 0%, rgba(247,248,250,1) 100%);
    background: -ms-linear-gradient(top, rgba(149,170,189,1) 0%, rgba(247,248,250,1) 100%);
    background: linear-gradient(to bottom, rgba(149,170,189,1) 0%, rgba(247,248,250,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95aabd', endColorstr='#f7f8fa', GradientType=0 );

}

#contactForm{
    margin-left: auto;
    margin-right: auto;
    width: 45%;
    display: flex;
    flex-flow: column;
}

#contactForm input{
    height: 3rem;
    font-size: 1.5rem;
    background-color: #ced8e1;
    width: 100%;
    padding-left: 1rem;
    box-sizing: border-box;
}

#contactForm textarea{
    height: 15rem;
    font-size: 1.5rem;
    background-color: #ced8e1;
    width: 100%;
    padding-left: 1rem;
    box-sizing: border-box;
}

.itemContainer{
    width: 45%;
    padding: 2rem;
    
}

.item{
    height: 20rem;
    background-size: cover;
}

#modal{
    display:none;
    flex-flow:column;
    width: 70vw;
    height: 70vh;
    z-index: 5;
    margin-left: auto;
    margin-right: auto;
    top: 15vh;
    left: 15vw;
    position: fixed;
}

#modalBg{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.7);
    z-index: 4;
}

#modalTitle{
    display:none;
    justify-content: space-between;
    height: 1.5rem;
    background: rgba(52,72,247,1);
    background: -moz-linear-gradient(left, rgba(52,72,247,1) 0%, rgba(67,210,217,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(52,72,247,1)), color-stop(100%, rgba(67,210,217,1)));
    background: -webkit-linear-gradient(left, rgba(52,72,247,1) 0%, rgba(67,210,217,1) 100%);
    background: -o-linear-gradient(left, rgba(52,72,247,1) 0%, rgba(67,210,217,1) 100%);
    background: -ms-linear-gradient(left, rgba(52,72,247,1) 0%, rgba(67,210,217,1) 100%);
    background: linear-gradient(to right, rgba(52,72,247,1) 0%, rgba(67,210,217,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3448f7', endColorstr='#43d2d9', GradientType=1 );
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0;
}

#modalBody{
    display: none;
    height: 100%;
    width: 100%;
}

#modalFooter{
    display:none;
    height: 1rem;
    background: rgba(52,72,247,1);
    background: -moz-linear-gradient(left, rgba(52,72,247,1) 0%, rgba(67,210,217,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(52,72,247,1)), color-stop(100%, rgba(67,210,217,1)));
    background: -webkit-linear-gradient(left, rgba(52,72,247,1) 0%, rgba(67,210,217,1) 100%);
    background: -o-linear-gradient(left, rgba(52,72,247,1) 0%, rgba(67,210,217,1) 100%);
    background: -ms-linear-gradient(left, rgba(52,72,247,1) 0%, rgba(67,210,217,1) 100%);
    background: linear-gradient(to right, rgba(52,72,247,1) 0%, rgba(67,210,217,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3448f7', endColorstr='#43d2d9', GradientType=1 );
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    padding-left: 1rem;
    margin: 0;
}

iframe{
    margin: 0;
    width: 100%;
    height: 100%;
}

.websiteOverlay{
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
}

.overlayButton{
    color: white;
    background-color: rgba(52,72,247,.8);
    padding: .4rem;
    margin: .2rem;
    cursor: pointer;
}