body{
    padding: 0px !important;
    margin: 0px !important;
}
.row{
    margin: 0px;
}

nav{
    margin-bottom: 100px;
    z-index: 100;
}

.container-fluid{
    padding: 0px;
    margin: 0px;
}

.header{
    height: auto;
    width: 100%;
    background: #fff;
    padding-top: 20px;
    display: block;
    z-index: 999;
    float: left;
    box-shadow: 0px 0px 5px -2px #000000c2;
}

nav .logo img {
    max-height: 32px;
    width: auto;
    float: left;
    cursor: pointer;
}

nav .logoSideBar {
	float: left;
	padding: 0px 15px;
	font-size: 40px;
	margin-top: -20px;
	color: #80808054;
	font-weight: 100;
}

.navs{
    display: flex;
    float: left;
    width:971px;
}

nav .navs ul{
    margin-left: -40px;
}

nav .navs ul li{
    display: inline-block;
    list-style: none;
    font-weight: bold;
    margin: 0px 1px;
    position: relative;
}

nav .navs ul li:hover > button{
    background: #009AC3 !important;
    color: #fff !important;
    transition: .2s linear !important;
}

nav .navs ul li button {
    font-weight: bold;
    background: none;
    border: 1px solid #DBDBDB;
    border-radius: 4px;
    transition: .2s linear;
    float: left;
    padding: 10px 8px;
}

nav .navs ul li button:hover {
    transition: .2s linear;
    background: #009ac3 !important;
    color: #fff !important;
}

nav .account{
    float: right;
}

#nav1{
    width: 100%;
    position: absolute;
    top: 0;
}

nav .account ul li{
    display: inline-block;
    list-style: none;
    font-weight: bold;
    margin: 0px 5px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: relative;
    transition: .2s linear;
    cursor: pointer;
    float: left;
}

nav .account ul li:hover{
    background: #009AC3;
    color: #fff;
    transition: .2s linear;
}

nav .account ul li i{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

nav .account ul li:nth-child(2){
    height: auto;
    width: auto;
    background: none;
    float: left;
}

nav .account ul li:nth-child(2):hover{
    color: #80808054 !important;
}

nav .account .logoSideBar {
	float: unset;
	padding: 0px;
	font-size: 40px;
	margin-top: -20px;
	color: #80808054;
	font-weight: lighter;
}


/*nav .expertBtn{
    background: #009AC3 !important;
    color: #fff !important;
    display: none;
}*/

.overlayer {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
    background: #EEE6E6B3;
    visibility: hidden;
}

nav .navs ul li button:hover  .overlayer {
    background: red !important;
}




/* hover box css */

.hoverDone{
    top: 60px !important;
    transition: .2s linear;
    visibility: visible !important;
    opacity: 1 !important;
}

#AboutButton:hover + .HoverBox , .HoverBox:hover{
    top: 60px !important;
    transition: .2s linear;
    visibility: visible;
    opacity: 1;
} 


.HoverBox {
	background: #fff;
	position: absolute;
	top: 80px;
	left: -0;
	width: 800px;
	box-shadow: 0px 0px 15px 0px #5752524f;
	padding: 30px;
	border-radius: 15px;
    transition: .2s linear;
    visibility: hidden;
    opacity: 0;
    z-index:1;
}

.HoverBox h3{
    font-size: 25px;
    font-weight: bold;
}

.triangle {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #fff;
	position: absolute;
	top: -10px;
	left: 145px;
}

.aboutHoverBox{
    left: -120px;
}


.aboutHoverBox a {
    width: calc(33% - 10px) !important;
    text-align: left;
    border: none !important;
    padding: 15px;
    margin: 5px;
    float: left;
    background: none !important;
    font-weight: bold !important;
}
.aboutHoverBox .btn-light:hover{
    background: #F4F3F0 !important;
    color: #000 !important;
    border-radius: 10px;
}

.HoverBox a img{
    height: 24px;
    margin-right: 10px;
    width:24px;
}

.mediaCenter{
    margin-top: 25px !important;
    margin-left: calc(-33% - -13px) !important;
}

.footContent {
    display: block;
    width: 100%;
    float: left;
    margin-top: 20px;
    padding: 30px;
    background: #F4F6F8;
    box-sizing: content-box;
    margin-left: -30px;
    margin-bottom: -30px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.footContent a {
    float: left;
    width: calc(50% - 10px) !important;
    color: #9b8080 !important;
}

.footContent a:hover{
    background: #F4F3F0 !important;
    color: #000 !important;
    border-radius: 10px;
}


.HoverBox a:hover{
    background: #F4F3F0 !important;
    color: #000 !important;
    border-radius: 10px;
}


#ProductBtn:hover + .productHoverBox , .productHoverBox:hover{
    top: 60px !important;
    transition: .2s linear;
    visibility: visible;
    opacity: 1;
}

.productHoverBox {
    left: -100px;
    width: 700px !important;
}

.productHoverBox .triangle{
    left: 170px !important;
}


.productHoverBox a{
    width: calc(50% - 10px);
    text-align: left;
    border: none !important;
    padding: 15px;
    margin: 5px;
    float: left;
    background: none !important;
    font-weight: bold !important;
}


#entp:hover + .entpHoverBox , .entpHoverBox:hover{
    top: 60px !important;
    transition: .2s linear;
    visibility: visible;
    opacity: 1;
}

.entpHoverBox {
    left: -100px;
    width: 700px !important;
}

.entpHoverBox a{
    width: calc(50% - 10px);
    text-align: left;
    border: none !important;
    padding: 15px;
    margin: 5px;
    float: left;
    background: none !important;
    font-weight: bold !important;
}

#partner:hover + .entpHoverBox , .entpHoverBox:hover{
    top: 60px !important;
    transition: .2s linear;
    visibility: visible;
    opacity: 1;
}

#think:hover + .thinkHoverBox , .thinkHoverBox:hover{
    top: 60px !important;
    transition: .2s linear;
    visibility: visible;
    opacity: 1;
}

.thinkHoverBox {
    width: 700px !important;
}

.thinkHoverBox .triangle{
    left: 50px;
}

.thinkHoverBox a{
    width: calc(50% - 10px);
    text-align: left;
    border: none !important;
    padding: 15px;
    margin: 5px;
    float: left;
    background: none !important;
    font-weight: bold !important;
}


#callBtn:hover .callHoverBox , .callHoverBox:hover{
    top: 60px !important;
    transition: .2s linear;
    visibility: visible;
    opacity: 1;
}


.callHoverBox {
    width: 500px !important;
    left: -440px;
    color: #000 !important;
}

.callHoverBox .triangle{
    left: unset;
    right: 30px !important;
}

.callHoverBox h6{
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
}

.callHoverBox .col-4{
    float: left;
}

.callHoverBox .col-12 {
    border: 1px solid;
    height: 45px;
    float: left;
    margin-bottom: 11px;
    overflow: hidden;
}

.callHoverBox .col-4 select{
    width: 100%;
    height: 40px;
    border: none;
}

.callHoverBox .col-8{
    float: left;
}

.callHoverBox .col-8 input{
    width: 100%;
    height: 40px;
    border: none !important;
}

.callHoverBox .col-8 input:active{
    border: none !important;
}
.callHoverBox input:focus{
    outline: none;
}

.callHoverBox select:focus{
    outline: none;
}

.callHoverBox p{
    font-weight: lighter;
}

.callHoverBox a{
    text-decoration: none;
    font-size: 22px;
    line-height: 32px;
    font-weight: 400;
    color: #009AC3;
}

.callHoverBox a:hover{
    background: none !important;
    color: #009AC3 !important;
}

.callHoverBox #phone{
    width: 100%;
    padding: 12px 45px;
}

.callHoverBox p {
    font-weight: lighter;
}

.callHoverBox .col-6:last-child button{
    text-transform: uppercase;
    width: 100%;
    margin-top: 10px;
    border-radius: 5px;
    background: #009AC3;
    color: #fff !important;
    padding: 12px;
}

#AccountLogin:hover .callHoverBox , .callHoverBox:hover{
    top: 60px !important;
    transition: .2s linear;
    visibility: visible;
    opacity: 1;
}

#AccountLogin .callHoverBox {
    width: 250px !important;
    left: -190px;
    color: #000 !important;
    text-align: right;
}

#AccountLogin button{
    background: #009AC3 !important;
    width: 100%;
    padding: 12px;
    color: #fff;
    font-weight: bold;
    position: relative;
}

#AccountLogin button i{
    transform: translate(-42px, -10px) !important;
}



.fixnav{
    position: fixed;
    top: 0;
}

.fixnav .account ul{
    display: none;
}

.fixnav .expertBtn{
    display: block;
    padding: 10px 30px;
}



/* nav responsive */


@media only screen and (max-width: 1580px) {
    .HoverBox {
        left: -400px;
    }

    .thinkHoverBox .triangle {
        left: unset !important;
        right: 220px !important;
    }
    .entpHoverBox .triangle {
        left: unset !important;
        right: 220px !important;
    }
    .productHoverBox .triangle {
        left: unset !important;
        right: 373px !important;
    }

    .productHoverBox{
        left: -225px;
    }
    .aboutHoverBox {
        left: -120px;
    }
    .callHoverBox{
        left: -440px;
    } 
}


@media only screen and (max-width: 1200px) {
    .header .container{
        min-width: 100%;
        padding: 0px 25px;
    }
}


@media only screen and (max-width: 1040px) {
    nav .navs ul {
        margin-left: -14px;
        padding: 0;
        margin-right: -37px;
    }
}


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

    nav .navs ul {
        margin-left: -14px;
        padding: 0;
        margin-right: -37px;
    }
    nav .navs ul li {
        margin: 0px;
    }

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

    .fixnav .expertBtn {
        display: block;
        padding: 10px 20px;
    }
    
    .aboutHoverBox {
        left: -100px;
    }

    .aboutHoverBox .triangle{
        left: 125px !important;
    }

    #AccountLogin .callHoverBox {
        left: -200px !important;
    }
    .callHoverBox .triangle {
        right: 18px !important;
    }

    .productHoverBox {
        left: -160px;
    }

    .productHoverBox .triangle {
        right: 440px !important;
    }
   
    .entpHoverBox {
        left: -280px !important;
    }

    .entpHoverBox .triangle {
        right: 356px !important;
    }
}



@media only screen and (max-width: 950px) {
    .expertBtn{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        border: 10px solid #fff;
        border-radius: 0px;
    }
    #accountUl{
        display: block;
    }
}

@media only screen and (max-width: 900px) {
    .thinkHoverBox {
        left: -526px !important;
    }
    .thinkHoverBox .triangle {
        right: 100px !important;
    }
    .entpHoverBox {
        left: -365px !important;
    }
    .entpHoverBox .triangle {
        right: 250px !important;
    }

    #nav2{
        display: block;
        margin-bottom: 0px !important;
    }
    #nav1{
        display: none;
    }
    .account{
        padding: 0px !important;
    }
    .account ul{
        padding: 0px !important;
    }
    
}

@media only screen and (min-width: 900px) {
    #nav2{
        display: none;
    }
    #nav1{
        display: block;
    }
}





/* nav2 */


#nav2{
    background: #fff;
    height: 50px;
    position: fixed;
    width: 100%;
    top: 0px;
    box-shadow: 0px 0px 3px 0px #80808096;
}


#nav2 .navToggleBtn {
	margin: 10px;
	background: none;
	border: none;
	height: 30px;
	width: 30px;
	padding: 0;
	border-radius: 50%;
    position: relative;
}

#nav2 .navToggleBtn:hover{
    background: #009AC3;
}

#nav2 .navToggleBtn img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    height: 20px;
    width: 20px;
}

#nav2 .navContent {
    background: #fff;
    width: 300px;
    height: 400px;
    margin: 10px;
    position: relative;
    border-radius: 20px;
    border-top-left-radius: 0px;
    margin-left: -500px;
    transition: .3s linear;
    box-shadow: 0px 0px 3px 0px #80808096;
}

.navToggleBtnBgFix{
    background: #009AC3 !important;
}

#nav2 .navContent .triangle{
    left: 0px;
}

#nav2 .expertBtn{
    display: block;
}

.navContentScroller {
	overflow: hidden;
	overflow-y: scroll;
	height: 400px;
	padding: 15px;
}


.navContentScroller h5{
    font-size: 24px;
    font-weight: bold;
}

.navContentScroller ul {
    padding: 0px;
}

.navContentScroller ul a{
    text-decoration: none;
    color: #000;
}

.navContentScroller ul li{
    list-style: none;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
}

.navContentScroller ul li:hover{
    background: #F4F3F0;
}

.navContentScroller ul li img {
	max-height: 24px;
	max-width: 24px;
	margin-right: 10px;
}

.navContentScroller .footContent ul a{
    width: 100% !important;
}


#SiteLogo{
    height: 24px;
    width: auto;
    position: absolute;
    _left: 50%;
    left: 100px;
    top: 50%;
    transform: translate(-50%,-50%);
}
.rightBox{
    width: 100px;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translate(0%,-50%);
}

.rightBox ul{
    padding: 0px;
}

.rightBox ul a{
    padding: 0px;
    color: #000;
}

.rightBox ul li {
	list-style: none;
	float: left;
	margin: 0px 10px;
	height: 30px;
	width: 30px;
    position: relative;
    border-radius: 50%;
}

.rightBox ul li i{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% ,-50%);
}

.rightBox ul li:hover{
    background: #009ac3;
    color: #fff !important;
}












/* footer */

.footer {
	background-color: #000;
	float: left;
	width: 100%;
	padding: 50px;
    color:#fff;
}
.footer .col-3{
    float: left;
    _border-left: 1px solid #fff;
    padding-left: 15px;
    height: 420px;
}

.footer .footerTitle{
    font-size: 35px;
    font-weight: bold;
}

.footer ul {
    padding: 0px;
} 

.footer ul li{
    list-style: none;
}


.footer ul li a{
    color: #fff;
    text-decoration: none;
    transition: .5s ease-in-out;
    font-size: 20px;
}


.footer ul li a:hover{
    color: #009ac3;
    transition: .5s ease-in-out;
}

.footer .col-3:nth-child(2){
    _padding: 20px;
}

.icons ul{
    padding: 0px;
}

.icons ul li{
    float: left;
    margin:auto;
}

.icons ul li:nth-child(1) a img {
	padding: 10px;
	width: 85px;
}

.icons ul li:nth-child(2) a img {
	padding: 10px;
	width: 130px;
	margin-top: 10px;
}

.icons ul li:nth-child(4) a img {
	padding: 6px;
	width: 40px;
	margin-top: 11px;
}


.icons ul li:nth-child(4) a img {
	padding: 7px;
	width: 90px;
	margin-top: 13px;
}

.copyright {
	width: 100%;
	display: block;
	float: left;
	margin-top: 15px;
    text-align: center;
}

.policy {
	padding: 5px 0px;
	float: left;
}


.policy ul {
    padding: 10px 0px;
}

.policy ul li {
	padding: 0 10px;
	float: left;
	border-left: 1px solid #fff;
}

.policy ul li:first-child{
    border: none;
}

.policy ul li a {
	font-size: 15px !important;
}



.footer .col-3:nth-child(4){
    padding: 20px;
}


.footer .col-3:nth-child(4) h4 {
	font-size: 37px;
	line-height: 35px;
	margin-bottom: 25px;
	font-family: Recife Display;
}

.footer label{
    cursor: pointer;
}

#floatingInput {
	background: #000;
	border: none;
	border-bottom: 2px solid #fff;
	border-radius: 0;
	outline: none !important;
    color: #fff;
}

.form-control:focus{
    box-shadow: none;
}

footer .form-floating > label {
	color: #fff;
	margin-left: -12px;
}

.submitBtn {
	background: #0093b2;
	color: #fff;
	border: navajowhite;
	padding: 10px 20px;
	text-transform: uppercase;
	font-weight: bold;
	border-radius: 5px;
	margin: 10px;
}


.footer .col-3:nth-child(4) a{
    color: #fff;
}


.footerBottom {
	background: #404040;
	float: left;
	width: 100%;
	padding: 20px;
	color: #fff;
}


.footerBottom a{
    margin-right: 25px;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: .3s ease;
    line-height: 2.5;
}


.footerBottom a:hover{
    color: #fff;
    transition: .3s ease;
}





@media only screen and (max-width: 1000px) {
    .footer{
        padding: 20px 0;
    }
    /*.footer .col-3:nth-child(2) img{
        width: 100%;
    }*/
    .icons ul li {
        float: left;
        width: 50%;
    }
    .icons ul li a img {
        padding: 10px;
        width: 85px;
        width: 100px !important;
        height: 50px !important;
    }

    .footer .col-3:nth-child(4) h4 {
        font-size: 25px;
    }

    .form-check label {
        font-size: 15px;
    }

    .submitBtn {
        background: #0093b2;
        color: #fff;
        border: navajowhite;
        padding: 5px 20px;
        text-transform: uppercase;
        font-weight: bold;
        border-radius: 5px;
        margin: 10px;
        font-size: 15px;
    }

    .footer .col-3:nth-child(4) form{
        margin-top: -25px;
    }

    .footer .col-3:nth-child(4) h4 {
        line-height: 30px;
    }

    .footerBottom {
        margin-bottom: 60px;
    }

}


@media only screen and (max-width: 700px) {
    .footer {
        display:table;    
        padding: 50px;
     }
     
     .footer .col-3:nth-child(4) {
        float: none;
        display: table-header-group;
        height: 260px;
     }

     .footer ul li {
        list-style: none;
        width: 33%;
        float: left;
     }

     .footer .col-3:nth-child(2) {
        float: none;
        display:table-footer-group;
        height: 280px;
     }


     .footer .col-3:nth-child(1) {
        float: none;
        display: table-row-group;
        height: 200px;
    }
    .footer .col-3:nth-child(3) {
        float: none;
        display: table-row-group;
        height: 200px;
    }
    .footer .col-3:nth-child(2) img {
        width: 160px;
    }

    .icons img{
        width: 90px !important;
        max-width: auto !important;
    }

    .footer ul li{
        width: 25%;
    }

    .policy {
        width: 100%;
        text-align: center;
    }

    .policy ul li{
        width: 33.33%;
        margin: 0 auto;
    }

    .footer ul li a{
        font-size: 18px;
    }
}

#callBtn , .logoSideBar , #AccountLogin {
    display: none !important;
}


.getInTouch{
    background: #009ac3 !important;
    border: none;
}




@media only screen and (max-width: 900px) {
 .getInTouch {
        padding: 5px !important;
        width: 125px;
        position: absolute;
        top: 50%;
        right: 0%;
        transform: translate(0%,-50%);
        color: #fff !important;
    }

}