html {
    scroll-behavior: smooth;
}

body {
    margin:0;
}

html,body {
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
  }
  
.filled-background {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/*body {
    overscroll-behavior: none;
}*/

#header {
    display:block;
    position:relative;
    float:right;
    width:60%;
    height:25px;
    top:40px;
    color:#005f89;
    font-family: karbon;
    font-weight: bold;
    font-size:2.3vw;
    letter-spacing:0px;
    z-index:10;
}

/*@media only screen and (max-width: 1080px) {
    #header {
        width:75%;
    }
}

@media only screen and (max-width: 720px) {
    #header {
        font-size: 18px;
    }
}

@media only screen and (max-width: 550px) {
    #header {
        font-size: 11px;
    }
}*/

#header div {
    display:block;
    position:relative;
    float:left;
    text-align: center;
    width:25%;
}

#header div a {
    text-decoration: none;
}

#header div a:any-link {
    color:#005f89;
}

h1 {
    font-family: all-round-gothic;
    font-size:4vw;
    color:#005f89;
    margin:0px;
    /*overflow-x:visible;
    white-space: nowrap;*/
}

p {
    font-family: karbon;
    font-size:1.7vw;
    color:#005f89;
}

video {
    display:block;
    width:80%;
    position:relative;
    margin:auto;
}

input {
    height:70px;
    width:100%;
    margin: 5px 0px;
    font-family:karbon;
    font-weight:lighter;
    font-size: 30px;
    border-color:#005f89;
    border-width: 2px;
    border-radius: 15px;
    padding: 1px 2px 1px 10px;
    box-sizing: border-box;
}

#submit-btn{
    padding:0px;
    background-color: #005f89;
    color: white;
    font-weight: bold;
}

#logo {
    display:block;
    margin:auto;
    position:relative;
    width:700px;
    height:733px;
    /*left:15px;*/
    margin-top:-250px;
}

.animated-logo {
    background-image:url("../img/Acuity-v4-Sprite-700px.png");
    animation-name: moveInX;
    animation-duration: 1.5s;
    animation-direction: forwards;
    animation-iteration-count: 1;
    /*animation-delay: .5s;*/
    animation-fill-mode:forwards;
    animation-timing-function:steps(28, end);
}

.animated-logo-out {
    background-image:url("../img/Acuity-v3-Sprite-out.png");
    animation-name: moveOutX;
    animation-duration: 1s;
    animation-direction: forwards;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function:steps(16,end);
}

#demobtn {
    top:50px; width:292px;height:79px;
    margin:auto; 
    display: block;
    position:relative;
    cursor: pointer;
    border:none;
    background: url("../img/demo_btn.png") no-repeat;
    background-size:contain;
}

footer {
    background-image: url("../img/footer.png");
    background-size:cover;
    width:100%;
    height:150px;
    font-family:karbon;
    font-weight:bold;
    font-size:2vw;
}

#whoweare-text{
    display:block;
    width:75%;
    margin:auto;
}

#tpmbreak{
    display:none;
}

#whatwedo-text{
    display:block;
    width:35%;
    margin-left:12.5%;
    margin-top:200px;
    float:left;
}

#whatwedo-text h1{
    text-align:left;
}

#whatwedo-pic1 {
    display:block;
    position:absolute;
    z-index:-1;
    width:15%;
}

#whatwedo-pic2 {
    width:40%;
    float:right;
}

#ourphilosophy-text{
    display:block;
    float:left;
    width:40%;
    margin-top:100px;
    margin-left:5%;
}

#ourphilosophy-pic{
    display:block;
    width:45%;
    float:left;
}

#contact-info{
    width:50%;
    float:left;
    margin-top:50px;
    font-size:2.25vw
}

#contact-form{
    width:50%;
    float:right;
    margin-top:25px;
    margin-bottom:50px;
}

#form-email{
    width:60%;
    float:left;
}

#form-phone{
    width:37.5%;
    float:right;
}

#footer-logo{
    display: block;
    width: 30%;
    float: left;
    position: relative;
    height: 100%;
}

#footer-logo img{
    height:80%;
    margin: auto;
    position: absolute;
    top: 10%;
    left: 25%;
}

#footer-contact{
    display:block;
    height:100%;
    width:60%;
    float:right;
    color:white;
}

.footer-contact-line{
    display:block;
    height:40%;
    width:100%;
}

.footer-buffer {
    display:block;
    height:10%;
    width:100%;
}

#footer-contact-pin{
    margin-bottom:-10px;
    margin-right:10px;
    width:3%;
}

@media only screen and (max-width:800px){
    h1 {
        font-size:8vw;
    }
    p {
        font-size:4vw;
    }
    input {
        font-size:5vw;
    }
    video {
        width:95%;
    }
    footer{
        font-size:4vw;
        height:75px;
    }

    #whatwedo-text{
        width:75%;
        margin-left:12.5%;
        margin-top:0px;
    }

    #whatwedo-text h1{
        text-align:center;
    }

    #tpmbreak{
        display:inline;
    }

    #whatwedo-pic1{
        width:30%;
        display:none;
    }

    #whatwedo-pic2{
        width:80%;
    }

    #ourphilosophy-text{
        width:75%;
        margin-left: 12.5%;
        margin-top: 0px;
    }
    
    #ourphilosophy-text h1{
        text-align:center;
    }

    #ourphilosophy-pic{
        width:90%;
    }

    #contact-info{
        display:none;
    }

    #contact-form{
        width:100%;
    }

    /* #form-email{
        width:100%;
        float:none;
    }
    
    #form-phone{
        width:100%;
        margin:0px;
        float:none;
    } */

    #footer-logo{
        width:25%;
    }

    #footer-logo img{
        top: 10%;
        left: 20%;
    }

    /*#footer-logo img{
        width:104px;
    }*/

    #footer-contact{
        width:70%;
        font-size:3vw;
    }
    .footer-contact-line{
        height:45%;
    }

    .footer-buffer {
        display:block;
        height:5%;
        width:100%;
    }
    
    #footer-contact-pin{
        margin-bottom:-3px;
    }
}

@keyframes moveInX{
    from {background-position-x:0px;}
    to {background-position-x:-19600px;}
}

@keyframes moveOutX{
    from {background-position-x:0px;}
    to {background-position-x:-11200px;}
}

@font-face {
    font-family: karbon;
    font-weight:bold;
    src: url(fonts/Karbon/Karbon-Medium.otf);
}

@font-face {
    font-family: karbon;
    font-weight:normal;
    src: url(fonts/Karbon/Karbon-Regular.otf);
}

@font-face {
    font-family: karbon;
    font-weight: lighter;
    src: url(fonts/Karbon/Karbon-Light.otf)
}

@font-face {
    font-family: all-round-gothic;
    src: url(fonts/AllRoundGothic/AllRoundGothic-Medium.ttf);
}