#header{width: 100%; padding: 0 3%; height: 70px; background-color: var(--black); display: flex;  z-index: 9999; }
#header>div{display: flex; align-items: center;}
.navigation{width: 100%; display: flex; justify-content: flex-end; list-style: none;}
.navigation>li{padding:1% 1.5%; cursor: pointer;}
.navigation>li:last-child{background-color:var(--blue); border-radius: .4rem;}
.navigation>li:hover:last-child{background-color: var(--darkB);}
.navigation>li>a{font-family: var(--rob); font-weight: 400; color:var(--white); font-size: 1.1rem; text-decoration: none; width: 100%; }
.dropDown1>a{pointer-events: none;}
.dropDown2>a{pointer-events: none;}
.navigation>li>a>i{color: var(--lightgray); }
.navigation>li>a:hover, .navigation>li>a:active{color: var(--blue);}
 #checkbox_toggle{display:none;}
 .hideMenu{display: none!important;}
.menu-icon{display: none; float: right; cursor: pointer; color: var(--white); font-size: 1.6rem;}
.menu-icon:hover,.menu-icon:active{color: var(--blue);}

.dropDown{list-style: none; width: 100%; height: 90px; z-index: 999; display: flex;  position: absolute; left: 0; top: 70px;}
.dropDown>li{ width: 25%; padding: .5% 0; height: 100%; text-align: center;}
.dropDown>li:nth-child(1){background-color: #4285f4;}
.dropDown>li:nth-child(2){background-color: #ea4335;}
.dropDown>li:nth-child(3){background-color: #fbbc05;}
.dropDown>li:nth-child(4){background-color: #34a853;}
.dropDown>li:nth-child(5){background-color: #1d56b3;}
.dropDown>li:hover{cursor: pointer; }
.dropDown>li>i{font-size: 1.5rem; display: block; margin-top: 5%; color: var(--white); pointer-events: none;}
.dropDown>li>h5{font-weight: 400; font-size: 1.1rem; font-family: var(--rob); color:var(--white); width: 100%; pointer-events: none;}

.hidesubMenu{display: none!important;}
.subDropDown{list-style: none; left: 0; top: 90px; width: 100%; z-index: 999; position: absolute; padding: 3% 0; height:auto; display: flex; background-color:var(--black); border-bottom: 5px solid var(--blue);}
.subDropDown>li{flex: 1; margin: 0 3%; text-align: left;  }
.subDropDown>li>h5{font-weight: 400; padding-bottom: 3%; font-family: var(--rob); font-size: 1.1rem; color: var(--white); border-bottom: 1px solid var(--blue); pointer-events: none;}

.subSubMenu{height: auto; flex: 1; list-style: none;}
.subSubMenu>li{padding: 0; width: 100%; border-bottom: 1px solid var(--gray);}
.subSubMenu>li:hover a{color: var(--white);}
.subSubMenu>li>a{text-decoration: none; width: 100%; display: block; color: var(--lightgray); padding: 3% 0!important; font-weight: 300; font-family: var(--rob);}

#fixed-social{background-color: azure; border: 1px solid var(--blue); padding: 1.5% .7%; transition: all 200ms linear; box-shadow: 0 0 10px rgba(0,0,0,.7); border-radius: 25px; display: flex; flex-direction: column;  right: 2%; bottom: 5%; z-index: 99; position: fixed;}
#fixed-social:hover{transform: scale(1.09);}
#fixed-social>a>i{font-size: 2.5rem;}
#fixed-social>a:nth-child(1)>i{color:#00AAE5;}
#fixed-social>a:nth-child(2)>i{color:#00AF54;}

/* RESPONSIVE SECTION */
@media screen and (max-width: 991px) {
    /* start of large tablet styles */
    html{font-size: 13px;}
}
    
@media screen and (max-width: 767px) {
    /* start of medium tablet styles */
    html{font-size: 12px;}
    .menu-icon{display:block;} 
    .col-3{width: 50%!important;}   
    #header>div:nth-child(2){justify-content: flex-end;}
    .navigation>li{padding:2% 3%; width: 100%; float: left; border-bottom: 1px dotted var(--gray); height: auto;}
    .navigation>li:hover, .navigation>li:focus{background-color: var(--gray); cursor: pointer;}    
    .navigation>li>a{line-height: 40px;}
    .navigation{width: 100%; border-top: 1px solid var(--gray); z-index: 999; background-color: var(--black); display: none; position: absolute; top: 70px; left: 0; flex-direction: column;}
    #checkbox_toggle:checked ~ .navigation{display: block;}
    .navigation>li:last-child{border-radius:  0rem;}
    .dropDown{float: left; width: 100%; height: auto; padding:0%; position: inherit; flex-direction: column; }
    .dropDown>li{width: 100%; display: block; float: left; height: auto; padding: 0; }   
    .dropDown>li>i{display: none;}
    .dropDown>li>h5{margin-left: 5%; text-align: left; margin-top: 2%; font-family: var(--rob);}
    .subDropDown{position: relative; top: 0; display: block; float: left; width: 100%; height: auto!important; border-bottom: none;}
}
    
@media screen and (max-width: 479px) {
    /* start of phone styles */
    html{font-size: 11px;}
}