/** * navigation.css * * All the changes for the new navigation update will be goes here, this will reponsible * for styling update for ga-institute site main header. */ #header .container { width: 100%; max-width: 1330px; padding: 0 15px; } #header .quck-link { border-bottom: none; padding: 10px 0; text-align: right; background: #E5E5E5; } #header .quck-link .social-media { display: inline-block; vertical-align: top; } #header .quck-link .social-media ul { padding: 0; margin: 0; } #header .quck-link .social-media ul li { list-style: none; padding: 0 15px; margin: 0; display: inline-block; position: relative; line-height: 30px;font-family: 'Open Sans'; } #header .quck-link .social-media ul li:after { position: absolute; right: -5px; top: -1px; content: '|'; } #header .quck-link .social-media ul li:last-child:after { display: none; } #header .quck-link .social-media ul li a { background: none; padding: 0; font-size: 14px; text-decoration: none; } #header .quck-link .top-links { display: inline-block; vertical-align: top; margin-left: 10px; } #header .quck-link .top-links ul { padding: 0; margin: 0; } #header .quck-link .top-links ul li { list-style: none; padding: 0 3px; margin: 0; display: inline-block; line-height: 30px; } #header .quck-link .top-links ul li a { background: none; padding: 0; font-size: 14px; } #header .navbar-brand { height: auto; padding: 0; } #header .header-top { padding: 0;} #header .header-top .header-toprow { position: relative; } #header .container .navbar-header { padding: 18px 0; } #header .navbar-nav > li { padding: 0 20px; font-size: 20px; position: static; font-family: 'Open Sans'; } #header .navbar-nav > li > a { padding: 26px 0 27px 0; text-transform: none; position: relative; color: #00417E; transition: all 0.5s ease; font-weight: 700; } #header .navbar-nav > li > a:after { opacity: 0; position: absolute; left: 0; bottom: 0; width: 100%; height: 7px; background: #0081FB; content: ''; transition: all 0.5s ease; } #header .navbar-nav > li:hover > a:after { opacity: 1; } #header .navbar-nav > li.active > a { color: #0081FB; } #header .navbar-nav > li.active > a:after { opacity: 1; } #header .nav > li > a:hover, #header .nav > li > a:focus { background-color: transparent; color: #0081FB; } #header .navbar-nav .dropdown-menu { box-shadow: none; border: none; border-radius: 0; width: 100%; padding: 0; background: #00417E; } #header .navbar-nav .dropdown-menu .sub-categories { margin: 0; padding: 22px 0; background: #0081FB; } #header .navbar-nav .dropdown-menu .sub-categories .container { max-width: 1040px; width: 100%; } #header .navbar-nav .dropdown-menu .sub-categories ul { display: inline-block; width: 100%; vertical-align: top; padding: 0; } #header .navbar-nav .dropdown-menu .sub-categories ul li { list-style: none; width: 25%; float: left; font-size: 16px; line-height: 26px; font-weight: 700; } #header .navbar-nav .dropdown-menu .sub-categories ul li a { color: #fff; text-decoration: none; } #header .navbar-nav .dropdown-menu .second-levelblock { padding: 10px 0; min-height: 320px; position: relative; } #header .navbar-nav .dropdown-menu .second-levelblock:after { padding: 10px 0; min-height: 320px; background-image: url(../images/menu-bgimage.png); background-position: right bottom; background-repeat: no-repeat; position: absolute; right: 0; bottom: 0; opacity: 0.05; content: ''; width: 610px;height: 326px; } #header .navbar-nav .dropdown-menu .second-levelblock .four-cols { float: left; width: 25%; margin: 0; position: relative; } #header .navbar-nav .dropdown-menu .second-levelblock .second-levelmobile { display: none; font-size: 16px; line-height: 20px; color: #fff; text-decoration: none; padding: 10px 0; } #header .navbar-nav .dropdown-menu .second-levelblock .container { max-width: 1040px; width: 100%; z-index: 1; position: relative; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 { padding: 0 28px 0 0; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li { font-size: 16px; list-style: none; position: static; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li a { color: #fff; border-bottom: 1px solid #fff; line-height: 26px; padding: 7px 0; display: block; text-decoration: none; transition: all 0.5s ease; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li a:hover { color: #0081FB; border-bottom-color: #0081FB; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li .submenu-level3 { padding: 0 0 0 28px; width: 33.33%; left: 0; top: 0; position: relative; display: none; float: left; z-index: 1; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li .submenu-level3 li { list-style: none; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li .submenu-level3 li a { border-bottom-color: #0081FB; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li.active > a, #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li .submenu-level3 li.active > a { color: #0081FB; border-bottom-color: #0081FB; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li .three-cols { margin-left: -28px; width: 300%; left: 100%; top: 0; position: absolute; display: none; z-index: 1; } #header .navbar-nav .dropdown .arrow { position: absolute; right: 15px; top: 0; width: 30px; text-align: center; cursor: pointer; height: 40px; display: none; } #header .navbar-nav .dropdown .arrow:after { position: absolute; right: 0; top: 0; content:"\f107"; font-family:'FontAwesome'; width: 100%; line-height: 40px; font-size: 25px; } .search-block { float: right; width: 132px; position: relative; margin-top: 28px; margin-left: 40px; position: absolute; right: 0px; top: 0px; z-index: 1; } .search-block .form-control { height: 26px; box-shadow: none; border: 2px solid #00417E; padding: 0 10px 0 30px; outline: none; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } .search-block.focus-in .form-control { background-color: #00417E; color: #fff; } .search-block.focus-in .form-control::-webkit-input-placeholder { color: #fff; font-weight: 700;} .search-block.focus-in .form-control::-moz-placeholder { color: #fff; font-weight: 700;} .search-block.focus-in .form-control:-ms-input-placeholder { color: #fff; font-weight: 700;} .search-block.focus-in .form-control:-moz-placeholder { color: #fff; font-weight: 700;} .search-block .submit-btn { position: absolute; left: 0; top: 2px; background: none; border: none; padding: 0; height: 24px; width: 35px; text-align: center; color: #00417E; } .search-block.focus-in .submit-btn { color: #fff; } .search-block .close-search { position: absolute; right: 0; top: 0; width: 30px; line-height: 26px; text-align: center; color: #fff; opacity: 0; visibility: hidden; cursor: pointer; } .search-block.focus-in .close-search { opacity: 1; visibility: visible; } .search-block > form { position: relative; } .search-block-mobile { display: none; } .overlay { position: fixed; background: rgba(0,0,0,0.5); width: 100%; height: 100%; z-index: 11; opacity: 0; visibility: hidden; } body.show-overlay .overlay { opacity: 1; visibility: visible; } .navbar-collapse.collapse { margin-right: 162px; } @media (min-width: 992px) { #header .navbar-nav > li.dropdown:hover > .dropdown-menu { display: block !important; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li.submenu:hover .submenu-level3 { display: block !important; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li.submenu:hover .three-cols { display: block !important; } } @media (max-width: 1280px) { #header .navbar-nav > li { padding: 0 18px; } .search-block { margin-left: 20px; } .navbar-collapse.collapse { margin-right: 142px;} } @media (max-width: 1199px) { .search-block { margin-left: 10px; } #header .navbar-nav > li { padding: 0 8px; font-size: 16px; } } @media (max-width: 991px) { #header .navbar-nav .dropdown .arrow { display: block; } .search-block { margin-right: 55px;} #header .container .navbar-header { padding: 18px 0 18px 15px;} .navbar-collapse.collapse { margin-right: 0; } .m-menu { cursor: pointer; display: block; padding: 0; position: absolute; right: 15px; top: 26px; width: 25px; } .m-menu span{width:100%; display:block; margin:6px 0; height:2px; transition:all 0.3s ease-in-out 0s; background:#00417E; } .m-menu.open span:nth-child(2){ opacity:0;} .m-menu.open span:last-child {transform: translate(0px, -8px) rotate(-45deg); -webkit-transform: translate(0px, -8px) rotate(-45deg); -moz-transform: translate(0px, -8px) rotate(-45deg);} .m-menu.open span:first-child {transform: translate(0px, 8px) rotate(45deg); -webkit-transform: translate(0px, 8px) rotate(45deg); -moz-transform: translate(0px, 8px) rotate(45deg);} #header .header-toprow { display: inline-block; width: 100%; vertical-align: top; } #header .container { padding: 0; } #header .quck-link .container { padding: 0 15px; } .navbar-nav { float: none; display: inline-block; margin: 0; width: 100%; vertical-align: top; background: #E5E5E5; } #header .navbar-nav > li { width: 100%; padding: 0; position: relative; display: inline-block; } #header .navbar-nav > li > a { line-height: 20px; padding: 10px 15px; } #header .navbar-nav > li > a:after { display: none; } #header .navbar-nav > li.dropdown.is-open > .arrow { transform: rotate(180deg); } #header .navbar-nav .dropdown-menu .sub-categories { display: none; } #header .navbar-nav .dropdown-menu { position: relative; background: #0081FB; padding: 0 15px; } #header .navbar-nav .dropdown-menu .second-levelblock { min-height: 1px; padding: 0; } #header .navbar-nav .dropdown-menu .second-levelblock:after { display: none; } #header .navbar-nav .dropdown-menu .second-levelblock .four-cols { width: 100%; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 { width: auto; padding: 5px 15px 20px 15px; margin: 0 -15px; display: none; background: #00417E; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 .arrow { right: 0; color: #fff; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li { position: relative; border-bottom: 1px solid #F4F4F4; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li a { border-bottom: none; color: #F4F4F4; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li a:hover, #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li.active > a { color: #0081FB; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li.submenu.active > a { color: #00417E; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li .submenu-level3 { position: relative; margin: 0; padding: 0; width: 100%; display: block; float: none; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li .submenu-level3 li { border-top: 1px solid #F4F4F4; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li .submenu-level3 li > a:hover, #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li .submenu-level3 li.active > a { color: #0081FB; } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li.submenu.is-open > .arrow { transform: rotate(180deg); } #header .navbar-nav .dropdown-menu .second-levelblock .submenu-level2 > li .three-cols { position: relative; margin-left: 0; width: 100%; left: 0; } #header .navbar-nav .dropdown-menu .second-levelblock .second-levelmobile { display: block; } } @media (max-width: 767px) { .m-menu { left: 15px; right: auto; top: 23px; } #header .quck-link { display: none; } #header .container .navbar-header { display: inline-block; vertical-align: top; width: 100%; padding: 20px 0; text-align: center; } #header .navbar-brand { float: none; } #header .navbar-brand img { display: inline-block; height: 35px; width: auto; } #header .navbar-collapse { margin: 0;padding-bottom: 0;position: fixed;left: 0;top: 75px;height: 100%;right: 0; background: #E5E5E5;z-index: 1111111; overflow: auto;} .navbar-nav { padding-bottom: 75px; } .search-block { display: none;} .search-toggle { background-color:#fff; top: 0; right: -100%; z-index: 9999999; position: fixed; width: 100%; height: 100%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; } .search-toggle .search { max-width: 300px; margin: 0 auto; position: relative; top: 50px; /*-moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);*/ } .search-toggle .search .close-search { display: none; } .search-block-mobile { float: right; margin: 0; display: block; } .search-block-mobile .search-btn { color: #00417E; font-size: 20px; position: absolute; right: 15px; top: 21px; } .search-active .search-toggle { right: 0; } .search-toggle .search-close { position: absolute; right: 15px; top: 10px; width: 25px; height: 25px; } .search-toggle .search-close:before { width: 25px; height: 2px; position: absolute; left: 0; top: 12px; content: ''; background: #00417E; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } .search-toggle .search-close:after { width: 25px; height: 2px; position: absolute; left: 0; bottom: 11px; content: ''; background: #00417E; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .search-toggle .search .form-control { height: 40px; box-shadow: none; border: 2px solid #00417E; padding: 0 10px 0 40px; outline: none; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } .search-toggle .search .submit { position: absolute; left: 0; top: 0; background: none; border: none; padding: 0; height: 40px; width: 40px; text-align: center; color: #00417E; line-height: 40px; font-size: 18px; } body.nav-open { overflow: hidden; } } /* Sticky header: Added by - G on 23rd Oct */ .fixed{ position: fixed; top: 0px; z-index: 99999; background: #ffffff} .header-top.fixed {box-shadow: 0px 3px 7px -2px rgba(29,64,125,1);} /* Sticky header: Added by - G on 23rd Oct */