* {
  box-sizing: border-box;
}
html,
body {
    display:block;
    background-color: #f0feff;
    color: #171717;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    line-height:1.2em;
    margin:0;
    padding:0;
    }

p{
    font-family: 'Nunito Sans', sans-serif;
    font-size:18px;
    font-weight: 400;
    color:#000000;
    text-align:justify;
    line-height: 18px;
}

h1, h2, h3, h4, h5{
    font-family:'oswald', sans-serif;
}
.error{
    color:red;
    
}

#container{
    width:100%;
    margin-right: auto;
    margin-left: auto;
    //top:70px;
    left:0px;
    right:0px;
    position:relative;
}

#header{
    position:fixed;
    z-index:5;
    width:100%; 
    height:auto;
    //background-color: #e9f4f5;
    //background-color: #e9eaf5;
    background-color: #1a1a1a;
    padding-top:20px;
    padding-bottom:20px;
    top:0px;
    left:0px;
    //right:5px;
}

#logoframe{
    //display:inline-block;
    position: relative;
    width:40px;
    float:left;
    //background-color:#daf0f2;
    height:30px;
     margin-left:1%;
}

#logonameframe{
    //display:inline-block;
    position: relative;
    width:auto;
    float:left;
    //background-color:#daf2e1;
    height:30px;
     margin-left:1%;
}

.shadow {
    filter: drop-shadow(5px 5px 5px #222);
}
           
.logoname{
    font-weight:300;
    color:#54d8f0;
    float:left;
    margin-top:0px;
    font-size:30px;
    padding-right:5px;
    padding-left:5px;
}

.about{
    color:#024196;
    color:black;
    font-size:18px;
    font-weight:400;
    line-height: 1.8em;
    margin:0px 5%;
    padding:20px 0px;
}
.indent1{
    color:#024196;
    color:black;
    font-size:18px;
    //font-weight:100;
    line-height: 1.8em;
    margin:0px 10%;
    padding:10px 0px;
    }
.indent2{
    color:#024196;
    color:black;
    font-size:18px;
    //font-weight:100;
    line-height: 1.8em;
    margin:0px 15%;
    padding:10px 0px;
    }
.top{
    text-align:left;
    color:#064b90;
    font-size:36px;
    //background-color:#064b90;
    padding:0px;
    //border-radius:50%;
}
.labeltoggle{
    display:none;
    font-size:20px; 
    color:#54d8f0;  
    float:right; 
    margin-right:10px;
    cursor:pointer"
    }
.inputtoggle{
    position:absolute; 
    left:-9999px;
    display:none;
}
/*#toggle{
   display:none;
    
    }*/

ul{
    margin-top:-5px;
    //margin-right:.1em;
    padding: 0;
    list-style: none;
    //background: #f2f2f2;
    display:inline-flex;
    
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
        }
    ul li a{
        display: block;
        padding: 8px .4em;
        text-decoration: none;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        font-size: 1em;
        color: #e8e8e8;
        transition: .3s; //background-color;
        }
    ul li a:hover{
        background-color: rgba(141, 139, 139, 0.22);
        transition: .3s linear; //background-color;
        }
    ul.dropdown{
        width: 152px; /* Set width of the dropdown */
        background-color:#313131;
        display: none;
        position: absolute;
        top:auto;
        z-index: 10;
        left: 0;
        }
    ul.dropdown li{
        //background-color:#313131;
        //padding:1px auto;
        //border-bottom:.2px solid #747474;
        }
    /*ul.dropdown li a{
    color: #e8e8e8;
    }*/
    ul li:hover ul.dropdown{
        display: block;	/* Display the dropdown */
        transition: .3s linear;
    }
    
    /*ul.dropdown li a:hover{
        color:#86caf5;
    }*/
    .dropdown li:hover{
        width:100%;
    }
    li a.active {
    background-color: rgba(253, 253, 253, 0);
    //color: #3994b5;
    color: #6fd3ff;  
    cursor: default;
    }
.li a.nothing {
   cursor: default;
   background-color:rgba(255, 255, 255, 0);
}
        /*ul li ul.dropdown a{
        width:auto;
    }*/
.login{
    color:orange;
    margin-left:.8em;
}
.menubar{
    display:flex;
    flex-wrap:wrap;
    position:relative;
    float:right;
    height:30px;
    margin-right:10px;
    //background-color: #444;
    line-height: 30px;
}
/*.menu{
    margin:0px 20px;
    display:inline-flex;
}
.menu a {
    font-family: 'Oswald', sans-serif;
    font-weight:300;
    font-size: .8em;
    text-decoration: none;
    //color: #b1b1b1;
    color: #e8e8e8;
    display: block;
    transition: .3s //background-color;
    padding:0px 2em;
}
 
.menu a:hover, submenu.a:hover {
    //background-color: #e0e0e0;
    background-color: #8d8b8b;
    transition:.4s linear;
}
 
.menu a.active {
    background-color: rgba(253, 253, 253, 0);
    //color: #3994b5;
    color: #6fd3ff;  
    cursor: default;
}

.menu .submenu{
    width:auto;
    display:none;
    margin-top:30px;
    margin-left:112px;
    //background-color:lightgray;
    position: absolute;
    height:auto;
    z-index:1;
}
.submenu a{
    color:#83dff5;
}

.menu a:hover .menu.submenu{
    display:block;
   }
*/



#mainbox{
    position:relative;
    width:100%;
    height:auto;
    //background-color:#7fb8c3;
}

.mainimage{
    filter:brightness(30%);
}
.mainimagemedium{
    display:none;
    filter:brightness(30%);
}
.mainimagesmall{
    display:none;
    filter:brightness(30%);
}
.maintextbox{
    //display:inline-block;
    position:absolute;
    width:100%;
    height:auto;
    top:0px;
    margin-top:2%;
}
.maintextbox2{
    position:absolute;
    width:100%;
    height:auto;
    top:0px;
    margin-top:2%;
}

.maintext{
    font-family:'barlow semi condensed', sans-serif;
    color:white;
    font-size:4vw;
    padding-left:12%;
    line-height: 1.0vw;
    font-weight:700;
}
.maintext2{
    font-family:'barlow semi condensed', sans-serif;
    color:white;
    font-size:4vw;
    padding-left:12%;
    line-height: 1.0vw;
    font-weight:700;
    margin-top:12%
}
.maintextcolor{
    color:#5bd8fd;
    //color:orange;
}
.subtext{
    font-family:'barlow semi condensed', sans-serif;
    color:white;
    font-size:2.5vw;
    padding-left:12%;
    //padding-right:20px;
    line-height: 1.0vw;
    font-weight:600;
}
.subtextcolor{
    color:#5bd8fd;
    //color:orange;
}

/*.center{
    text-align:center;
}
.black{
    color:black;
}
.orange{
    color:#d99908;
}
.bluegreen{
    color:#4289af;
}
#sign-up{
    position: absolute;
    margin-top:35%;
    Margin-left:12%;
    
}*/
.sign-up{
    display:inline;
    //background-color: #00ffd8;
    background-color: #fcb94e;
    padding: .6vw 1.4vw;
    //border-radius: 5px;
    color:black;
    text-decoration: none;
    margin-left:0%;
    font-size: 2.5vw;
    //line-height:2vw;
    //box-shadow:.05vw .05vw .1vw .1vw #d6d6d6;
    font-weight:600;
    border-radius:10px;
}
#pageheadingbox{
    width:86%;
    background-color:orange;
    height:auto;
    margin:0px auto;
    position:relative;
    
}
.pageheading{
    color:black;
    font-family:'barlow semi condensed', sans-serif;
    text-align:center;
    font-size:2.6vw;
    padding:2vw 10%;
    font-weight:600;
    line-height:2.5vw;
    text-decoration:none;
    //margin-top:20px;
}
.row1 {
    position:relative;
    display: flex;
    //-ms-flex-wrap: wrap;
    flex-wrap: wrap;
    //background-color: #efa679;
    background-color: #cff6ff;
    //margin-top:5px;
    justify-content: space-between;
    margin:0px 7% 0px 7%;
    
}

.row3 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    //background-color: #f46913;
    
    //margin-top:5px;
    justify-content: space-between;
    //margin:0px 7% 0px 7%;
}

.row2 {
    position:relative;
    display: flex;
    //-ms-flex-wrap: wrap;
    flex-wrap:wrap;
    //background-color: #faf8ec;
    //background-color: #cff6ff;
    background-color:#fdddab;
    //margin-top:5px;
    justify-content: center;
    //margin:0px 7% 0px 7%;
    //align-content: center;
}
#servicebox {
    position:relative;
    width: 32%;
    display:flex;
    justify-content:center;
    //flex-wrap:wrap;
    background-color:#33a1b5;
    //background-color:#50c4e6;
    height:15vw;
    margin-top:-3vw;
    //padding-left:10%
    //min-width:350px;
    //align-content:center;
    border: 2px solid white;
    }

#servicecircle{
    //display:flex;
    position:absolute;
    text-align:center;
    width:12vw;
    height:6vw;
    border-radius:6vw 6vw 0% 0%;
    background-color:#33a1b5;
    //background-color:#50c4e6;
    margin-top:-5vw;
    border: 2px solid white;
    border-bottom:none;
}

.servicetext{
    font-family:'barlow semi condensed', sans-serif;
    text-align:center;
    font-size:2.6vw;
    color:white;
    padding:2vw 10%;
    font-weight:600;
    line-height:2.5vw;
    text-decoration:none;
    margin-top:35px;
}

.serviceimg{
    padding-top:1.3vw;
    width:5vw;
}

.servicepara{
    font-family:'barlow semi condensed', sans-serif;
    font-weight:400;
    text-align:center; 
    margin-top:-15px;
    color:white;
    font-size:22px;
    line-height:1.3em;
    }

.emptybox{
    width:100%;
    height:8vw;
    //border:1px solid gray;
    background-color:rgba(240, 248, 255, 0);
}
.emptysmall{
    width:100%;
    height:4vw;
   // border:1px solid gray;
    background-color:rgba(240, 248, 255, 0);
}

.headingbox{
    display:box;
    width:65%;
    margin:0 auto;
    height:auto;
    //background-color:blue;
}
.companyname{
    font-family:'barlow semi condensed', sans-serif;
    font-size:3.2vw;
    color:#4289af;
    padding:2%;
    font-weight:700;
    margin:2% auto;
    text-align:center;
    line-height: 2vw;
}
.companytext{
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    padding-top:10px;
    text-align: justify;
    font-size: 18px;
    line-height: 1.3em;
}


.companybox{
    text-align:center;
    position:relative;
    width:100%;
    height:auto;
    //background-color:green;
    z-index:1;
}
.companyimage{
    min-width:200px;
    max-width:300px;
    z-index:2;
    }

.colorlessbox{
    position:relative;
    width:100%;
    height:235px;
    background-color:rgba(240, 248, 255, 0);
}
.colorbox{
    //position:absolute;
    width:100%;
    height:160px;
    //background-color:#eab96b;
    background-color:#fdddab;
    margin-top:0px;
}

#need{
    display:flex;
    width:25vw;
    min-width:200px;
    height:auto;
    //background-color:#2b899a;
    background-color:#fdba3e;
    //background-color: #09708e;
    margin:0px auto;
    box-shadow:-3px -3px 3px #504e4e; 
    align-content: center;
    justify-content: center;
}

.need{
    font-family:'barlow semi condensed', sans-serif;
    text-align:center;
    font-size:2vw;
    color:black;
    padding:1.2vw 8%;
    font-weight:600;
    text-decoration:none;
    }


#level{
    position:relative;
    width: 32%;
    height:auto;
        //justify-content:center;
    background-color:#09708e;
    //background-color:#17697c;
    //background-color:#ff8900;
    //box-shadow: 3px 3px 4px #504e4e;
    align-content:center;
    padding-bottom:20px;
}

#level1{
    position:relative;
    width: 33.33%;
    height:250px;
    //display:flex;
    //justify-content:center;
    //background-color:#ff4320;
    background-color:#00ffff;
    //box-shadow: 3px 3px 4px #504e4e;
}

/*.leveltext{
    font-family:'barlow semi condensed', sans-serif;
    text-align:center;
    font-size:2.6vw;
    color:white;
    padding:0 10%;
    font-weight:600;
    line-height:2.5vw;
}*/
#otherservices{
    display:flex;
    position:relative;
    flex-basis: 30%;
    justify-content:center;
    //flex-wrap:wrap;
    flex-direction:column;
    background-color:#fff;
    height:225px;
    //border: 2px solid white;
    box-shadow: 3px 3px 8px #8e8e8e; 
    margin:15px 1%;
}
.otherservicestext{
    //padding:20px;
    font-family:'barlow semi condensed', sans-serif;
    font-size:24px;
    color: #171717;
    text-align:center;
    font-weight:600;
    text-decoration:none;
}
.imagebox{
    width:100%;
    background-color:#f7f3eb;
    height:auto;
    min-width:250px;
    //margin-top:5%;
    //margin-bottom:-5%;
    text-align: center;
    //padding-top:5%;
 }
.heading{
    font-family:'barlow semi condensed', sans-serif;
    font-weight: 400;
    font-size: 32px;
    color:#064b90;
}
.subheading{
    font-family:'barlow semi condensed', sans-serif;
    font-weight:400;
    font-size:22px;
}

.textbox{
    Display:flex;
    flex-direction: column;
    align-items: center;
    width:30%;
    background-color:#f7f3eb;
    height:auto;
    //min-width:250px;
    //margin-top:5%;
    //margin-bottom:5%;
    //flex:1;
}
.box3of12{
    width:20%;
    display:flex;
    background-color: #ffcb6d;
    //height:auto;
    align-content: center;
    position:relative;
    //margin-left:5%;
    flex-direction: column;
}
.box9of12{
    width:75%;
    display:block;
    //background-color: #c1e9fa;
    padding:2%;
    height:auto;
    
}
.box3of12 a{
    padding:10px 10px;
    background-color:#ffcb6d;
    text-align:center;
    font-family:'barlow semi condensed', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color:#064b90;
    border-bottom:1px solid #fad8aa;
    z-index:1;
    text-decoration:none;
    }
.box3of12 a:hover{
    background-color:#ffe0a6;
}
.more{
    display: none;
}
.flexcenter{
    display:flex; 
    justify-content: center; 
    width=100%; 
    height:auto
}
.contact{
    display:flex;
    flex-direction: column;
    width:100%;
    background-color:white;
    height:auto;
    border-radius:15px;
    justify-content: center;
    margin-top:3%;
    }

input:focus, textarea:focus, select:focus, button:focus{
        outline: none;
    }
.emaillablel{
    display:block;
    padding: 3%;
    padding-left: 5%;
    
}
.emailinput{
    display:block;
    margin-left: 5%;
    margin-bottom:3%;
   
    font-size:16px;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom-color:#d5d9d9;
    border-width:1px;
    width:90%
}
.emailmessage{
    display:block;
    margin-left: 5%;
    margin-bottom:3%;
    font-size:16px;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom-color:#d5d9d9;
    border-width:1px;
    width:90%;
    height:100px;
}
.contactinfo{
    width:80%;
    background-color:whitesmoke;
    margin:5% auto 0 auto;
    border-radius: 15px;
    height:auto;
    border:1px solid gray;
}

.emailbutton{
    width:100%;
    //background-color:blue;
    height:auto;
    border:none;
    margin-top:3%;
    }

.emailsubmit{
    display:inline-block;
    width:auto;
    background-color:#48a6d0;
    height:auto;
    border-radius:5px;
    padding:8px 20px;
    font-size:16px;
    border:none;
    box-shadow:  0 3px 3px 0 rgba(0,0,0,0.2);
    margin-left:5%;
    color:white;
    }

.read{
    font-size:14px;
    font-weight:400;
    padding: 5px 7px;
    background-color: #064b90;
    align-content: right;
    color:white;
    border:none;
    float:right;
    margin-right: 5%;
}

footer {
    display:flex;
    flex-direction:column;
    background-color: #113641;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    //overflow-x: hidden;
    line-height:1.2em;
    height:auto;
    justify-content: center;
    bottom:0px;
    padding-bottom:20px;
}
.footerlogoname{
    font-weight:400;
    color:#54d8f0;
    margin-top:0px auto;
    font-size:24px;
    text-align:center;
    //padding-right:5px;
    //padding-left:5px;
}

.footertext{
    color:#a0a0a0;
    margin: 0px 30px;
    padding-top:20px;
    text-decoration:none;
    font-size:16px;
    text-align:center;
}


@media screen and (max-width: 1024px) {
    #servicebox {
    //margin-top:-2vw;
    }
}
@media screen and (max-width: 880px) {
    #servicebox {
    //margin-top:0vw;
    }
}

@media screen and (max-width: 767px) {
    ul{
        position: relative;
        top:0px;
        //padding: 10px;
        list-style: none;
        display:flex;
        //left:350px;
        right:-350px;
        flex-direction: column;
        width:150px;
        height:auto;
        background-color: #1a1a1a;
        z-index:2;
        justify-content:center;
    }
    ul li{
        display: block;
        line-height: 21px;
        text-align: center;
        }
    ul li a{
        display: block;
        padding: 8px 10px;
        text-decoration: none;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        font-size: 1em;
        color: #e8e8e8;
        transition: .3s; //background-color;
        }
    ul li a:hover{
        //color: #fff;
        background-color: #8d8b8b;
        transition: .3s; //background-color;
    }
    ul li ul.dropdown{
        position: absolute;
        width: 152px; 
        margin-left:0px;
        background: #8d8b8b;
        display: none;
        
        z-index: 10;
        left: -150px;
        //left: -452px;
    }
   ul.dropdown li{
        color: #6fd3ff;
        background-color:#313131;
        padding:2px 0px;
        }
    ul li:hover ul.dropdown{
        display: none;	
        background-color: #6fd3ff;
        }
    ul li ul.dropdown li{
        display: none;
    }
    ul.dropdown li a: hover{
        background-color: #6fd3ff;
        color:red;
    }*/
    
    .login{
        margin-left:0px;
    }
    .menubar{
    position:absolute;
    top:70px;
    width:450px;
    height:auto;
    background-color: whitesmoke;
    z-index:2;
    display:block;
    justify-content:center;
    margin-left:-650px;
    //transition:.5s linear;
    }
    .menu{
    margin:0px 20px;
    display:block;
    }
    .menu a {
    text-decoration: none;
    color: #9a9a9a;
    transition: .3s //background-color;
    padding:10px 95px;
    text-align:center;
    border-bottom:1px solid #eaeaea;
    }
 
    #toggle:checked + .menubar ul{
    margin-left:300px;
    //background-color: red;
    transition:.4s linear;
    }
    
    label{
     //margin-top:5px;
     display:block;
    }
    p{
    font-size:16px;
        line-height: 16px;
    }
    .maintext{
    //padding-top:20px;
    font-size:7vw;
    padding-left:10%;
    padding-bottom:10px;
    line-height: 5vw;
    }
    .maintextbox2{
    display:none;
    }
    .subtext{
    font-size:5vw;
    padding-left:10%;
    //padding-right:20px;
    line-height: 2.0vw;
    font-weight:600;
    }
    .mainimage{
    display:none;
    }
    .mainimagemedium{
    display:block;
    }
    .mainimagesmall{
    display:none;
    }
    .sign-up{
    font-size: 5vw;
    line-height:5vw;
    border-radius:5px;   
    }
    .row1 {
    margin:0px 3%;
    justify-content: center;
    flex-direction: column;
    }
    #servicebox {
    width:94%;
    margin-top:25%;
    height:250px;
    margin-left:auto;
    margin-right:auto;
    }
    
    #servicecircle {
    width:50vw;
    height:25vw;
    margin-top:-20vw;
    border-radius:25vw 25vw 0% 0%;
    }
    .servicetext{
    font-size:36px;
    padding:10% 10%;
    font-weight:600;
    line-height:45px;
    }
    .serviceimg{
    padding-top:7vw;
    width:20vw;
    }
    
    #need{
    width:60%;
    height:45px;
    }
    .need{
    font-size:20px;
    //padding:10px 4%;
    }
    .companyname{
    font-size:25px;
    line-height: 25px;
    }
    .companyimage{
    max-width:200px;
    }
    .companytext{
    //font-size: 14px;
    //line-height: 1.5em;
    }
    #level{
    width:94%;
    margin-top:5px;
    height:250px;
    margin-left:auto;
    margin-right:auto;
    }
    #level1{
    width:100%;
    margin-top:1px;
    height:250px;
    }
    #otherservices{
    flex-basis: 80%;
    margin-left:auto;
    margin-right:auto;
    }
    #footerdivbig{
    width: 100%;
    padding:15px 30px;
    }
    #footerdivsmall{
    width: 100%;
    }
    #pageheadingbox{
    width:94%;
    margin:70px auto;
    }
    .pageheading{
    font-size:22px;
    font-weight:600;
    padding:15px;
    }
    .box3of12{
    width:100%;
    margin-top:-65px;
    }
    .box9of12{
    width:100%;
    }
    .box3of12 a{
    font-weight: 400;
    font-size: 20px;
    }
    .box3of12 a:hover{
    background-color:#ffe0a6;
    }
    
    .about{
    font-size:16px;
    line-height: 1.4em;
    margin:0px 1%;
    padding:10px 0px;
    }
    .heading{
    font-size: 24px;
    }
    .subheading{
    font-size:20px;
    }
    .indent1{
    font-size:16px;
    margin:0px 5%;
    line-height: 1.4em;
    padding:5px 0px;
    }
    .indent2{
    font-size:16px;
    margin:0px 10%;
    line-height: 1.4em;
    padding:5px 0px;
    }
    .read{
    font-size:13px;
    padding: 4px;
    }
    .top{
    font-size:24px;
    }
    .colorbox{
    height:128px;
    margin-top:-100px;
    }
    
}
@media screen and (max-width: 475px) {
    #logoframe{
    display:none;
    }
    .mainimage{
    display:none;
    }
    .mainimagemedium{
    display:block;
    }
    .mainimagesmall{
    display:none;
    }
    #logonameframe{
    height:20px;
    }
    .about{
    font-size:16px;
    line-height: 1.3em;
    }
    .heading{
    font-size: 22px;
    }
    .subheading{
    font-size:19px;
    }
    .need{
    font-size:18px;
    padding:10px 4%;
    }
    .indent1{
    font-size:16px;
    margin:0px 5%;
    line-height: 1.3em;
    }
    .indent2{
    font-size:16px;
    margin:0px 10%;
    line-height: 1.3em;
    }
    .read{
    font-size:12px;
    padding: 3px;
    }
    .labeltoggle{
    display:block;
    }
}

@media screen and (max-width: 420px) {
    .logoname{
     font-size:7vw;
    }
    .need{
    //font-size:16px;
    padding:10px 4%;
    }
}