@import 'common.scss'; @import 'mixin.scss'; body{ font-size: 16px; color: $(color-4); font-family: $(font-1); padding: 0px; margin: 0px; background: #ffffff; } .container{ max-width: 1200px; width: 100%; } .hide-from-desktop{ display: none; } .header-top-icons{ display: none; } .no-gutters{ padding-left: 0; padding-right: 0; } /******* variables ******/ @set{ fa: 'FontAwesome'; /**** top icons *****/ menu-bg-color: #0F024A; menu-icons-color: #fff; menu-icons-bg-color: #7ccd40; menu-icon-hover-color: #fff; menu-icon-border-color: #dcddde; menu-text-font: 'Myriad Pro', Helvetica, sans-serif; /***slider menu *******/ mm-menu-bg-color: #fff; mm-menu-border-color: rgba(0,0,0,0.8); mm-menu-color: #444; mm-menu-item-font: 'Myriad Pro', Helvetica, sans-serif; mm-menu-nav-bar-bg: #073797; mm-menu-nav-bar-color: rgba(255, 255, 255, 0.7); /**** mobile search *****/ search-icon-color: #000; search-input-bg: #FFFFFF; search-text-color: #000; /******* blog ********/ post-meta-color: #000; post-title-color: #000; post-title-font: Helvetica, sans-serif; more-link-bg: #000; more-link-color: #fff; nav-bg: #000; nav-border: #fff; nav-color: #000; } .videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } h1 { margin: 30px 0px 20px 0px; } h2 { margin: 0px 0px 25px 0px; } h3 { margin: 28px 0px 27px 0px; } h4 { margin: 20px 0px 14px 0px; } .main-menu ul, .footer .footer-menu ul, .get-social ul, .bucket-menu ul{ list-style-type: none; } .main-menu { position: relative; } header{ position: relative; } header.isStuck { z-index: 500; } .header-menu-block.isStuck .search-app-outer{ display: none; } .header-menu-block.isStuck{ z-index: 1; } .header-sub-block.isStuck .top-main-menu{ margin: 20px 0px 0px 0px; } header { z-index: 999; width: 100%; z-index: 10000; } .hide-from-desktop{ display: none; } /* Layout - Bootstrap custom styels or modify/edit predefine styels */ .holder:after, .main-menu ul:after, .address:after, .socialmedia:after, .bucket-menu ul:after, .get-social ul:after, .content-wrapper:after, .search-area form:after, .contact-form form:after, .contact-hours-sub:after, .appoinment-form form:after, .footer .footer-menu ul:after, .footer-wrapper .footer:after, .contact-info:after, .address-area:after, .header-top:after, .header-mobile:after, .top-menu:after, .doc-bio:after, .gallery-nav-wrapper:after, .header-contact:after, .socialmedia-wrapper:after, .address-wrapper:after, .floated-items:after{ content: '.'; display: block; height: 0; clear: both; visibility: hidden; } img { border: 0px; } .no-paddings{ padding-left: 0; padding-right: 0; } .reset-col-paddings{ padding-left: 0; padding-right: 0; } .container{ width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } body, body.modal { padding-right: 0 !important; } .scrollup { bottom: 20px; display: block; height: 40px; position: fixed; right: 20px; width: 40px; font-size: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #fff; background: #555555; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); text-align: center; line-height: 40px; z-index: 10000; } label { font-weight: normal; margin-bottom: 0; } .header-mobile-block { display: none; } .header-menu-block { background: url(../images/header-bg.png) center top no-repeat; } .logo{ margin: 9px 0px 0px 0px; } .header-contact-info{ position: relative; .box-icon { display: inline-block; /* position: absolute; */ width: 38px; height: 38px; border: 1px solid #0b3354; border-radius: 50%; text-align: center; line-height: 38px; font-size: 18px; } } .telephone{ float: right; width: 34%; text-align: right; letter-spacing: 0.7px; line-height: 0.8; padding: 13px 0px 10px 0px; .box-icon { top: 14px; position: relative; margin: 0px 39px 0px 0px; } } .telephone a:hover, .address a:hover .fa-map-marker{ color: $(color-5); } .address{ float: right; width: 28.5%; text-align: right; letter-spacing: 0.4px; line-height: 1.4; padding: 25px 0px 10px 0px; margin: 0px 0px 0px 20px; background: url(../images/hcontact-bg.png) left center no-repeat; .box-icon { top: -9px; position: relative; } .haddress{ display: inline-block; margin: 0px 10px 0px 0px; } } .top-main-menu{ position: relative; z-index: 200; margin: 0px 0px 0px 0px; padding: 12px 0px 0px 0px; } nav.main-menu { position: relative; z-index: 2000; width: 97%; ul { margin: 0px 0px 0px 51px; padding: 0px; text-align: center; li.active ul li a { color: $(color-1); } li#menu-item-353 { margin: 0px 7px 0px 0px; } li { &#menu-item-352 { margin: 0px; background: #0b3354; a{ color: $(color-4); padding: 10px 17px 12px 18px; &:hover{ color: $(color-4); background: #94c8ca; } } } float: left; position: relative; margin: 0px 1% 0px 0px; ul { display: none; width: 300px; position: absolute; top: 37px; left: -69px; padding: 0px; margin-top: 0px; z-index: 10000; background: #0b3354; li { display: block; float: none; padding: 0px; margin: 0px 0px 0px 0px; border: 0px; a { display: block; width: 100%; color: $(color-4); text-align: left; letter-spacing: 0.2px; background: none; padding: 13px 14px 11px 16px; @include trans(); &:hover{ color: $(color-1); background: #ffffff; } } a.menu-item-has-children { color: $(color-1); background: #ffffff; } } li#menu-item-372 a{ padding: 27px 2px 11px 16px; } li.active ul li a{ color: $(color-1)!important; } } &:hover > ul { display: block; @include fadeinup(); } &.current_page_item { a{ color: $(color-5); } } a { color: $(color-1); display: block; line-height: 1; letter-spacing: 0.1px; padding: 9px 7px 13px 0px; transition: all 0.3s ease 0s; &:hover{ color: $(color-5); } } } } } .search-app-outer{ position: absolute; right: 1px; top: -15px; z-index: 100; } .search-app-block{ margin: 40px 0px 0px 6px; } .search-icon{ color: $(color-1); cursor: pointer; position: relative; top: -6px; i.fa-search{ font-size: 15px; } } .search-wrapper { display: none; position: fixed; top: 0; right: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.8); z-index: 7000; span.closebtn { width: 40px; height: 40px; position: absolute; top: 0; right: 15px; background: $(color-2); text-align: center; z-index: 7500; color: #ffffff; line-height: 40px; display: block; &:hover { cursor: pointer; } } .search_form { width: 90%; max-width: 1000px; height: 60px; position: relative; top: 50%; margin-top: -30px; right: 0; left: 0; margin-left: auto; margin-right: auto; background: #ffffff; z-index: 80; border: 0px; &:before { content: "SEARCH"; display: block; width: 200px; height: 60px; position: absolute; top: 0; right: 0; text-align: center; line-height: 60px; font-size: 20px; background: $(color-2); color: $(white-color); font-weight: bold; } input[type="search"] { height: 60px; margin-top: 2px; width: 100%; margin-left: 10px; border: none; background: none; font-size: 20px; text-transform: uppercase; } input[type="submit"] { display: block; top: 0; right: 0; height: 60px; width: 200px; position: absolute; border: none; background: none; &:hover { cursor: pointer; } } } } .banner-wrapper{ width: 100%; top: 0px; position: relative; z-index: 1; overflow: hidden; } #carousel-home { width: 100%; height: 605px; .carousel-indicators .active { background: #0b3354; } .carousel-indicators li { border: 1px solid #0b3354; } /* .carousel-indicators{ bottom: 4px; } */ .banner-text-area{ top: -472px; position: relative; } .slider-image{ height: 605px; } .slider-image a{ display: block; width: 100%; height: 100%; } .slider-image-1{ background: url(../images/slider/header-banner1.jpg) center top no-repeat; } .slider-image-2{ background: url(../images/slider/header-banner2.jpg) center top no-repeat; } .slider-image-3{ background: url(../images/slider/header-banner3.jpg) center top no-repeat; } .slider-image-4{ background: url(../images/slider/header-banner4.jpg) center top no-repeat; } } .services-wrapper{ padding-top: 31px; padding-bottom: 30px; text-align: center; .service-box{ background: #0b3354; padding-bottom: 27px; min-height: 583px; height: 100%; color: $(color-4); position: relative; &:hover{ background: #fff; color: $(color-1); border: 1px solid #0b3354; } /* .fa-plus{ display: inline-block; width: 80px; height: 80px; background: #0b3354; border: 0px; border-radius: 50%; text-align: center; line-height: 80px; font-size: 20px; } */ a.link-plus { color: $(color-4); display: inline-block; left: 39.2%; top: 53.2%; position: absolute; transition: all 0.3s ease 0s; width: 80px; height: 80px; background: #0b3354; border: 0px; border-radius: 50%; text-align: center; line-height: 72px; font-size: 34px; &:hover{ color: $(color-5); } } h2{ margin: 50px 0px 18px 0px; padding: 0px 15px 0px 15px; } img{ width: 100%; } p{ font-size: 16px; letter-spacing: 0.8px; padding: 0px 22px 0px 22px; } } } #middle-block-outer { margin: 0px 0px 30px 0px; } .review-home { background: #0b3354; padding: 19px 43px 37px 43px; } .review-slider{ color: $(color-4); .stars{ margin: 9px 0px 14px 0px; } .review-text{ letter-spacing: 0.8px; line-height: 1.5; display: block; margin: 7px 1px 18px; } .review-quote{ font-size: 48px; } .review-name{ color: $(color-6); font-size: 21px; line-height: 1.4; letter-spacing: 0.8px; display: block; margin: 12px 0px 0px -2px; } .review-city{ line-height: 1.3; letter-spacing: 0.8px; display: block; margin: -2px 0px 0px 0px; } .gallery-link{ margin: 0px 0px 20px 0px; } } .gallery-home { background: #0b3354; padding: 37px 0px 45px 0px; text-align: center; h2.gallery-title{ color: $(color-4); margin: 0px 0px 28px -5px; letter-spacing: 0.2px; } img { margin: 0px 0px 0px -1px; } .proc-name { margin: 26px 0px 0px 0px; letter-spacing: 0.8px; } .gallery-link{ margin: 7px 0px 20px 0px; } } .gallery-link{ padding: 16px 0px 0px 0px; } .gallery-link a{ color: $(color-4); display: inline-block; padding: 4px 27px 4px 27px; border-radius: 20px; border: 1px solid #ffffff; } .gallery-link a:hover{ color: $(color-1); background: #ffffff; } .para{ line-height: 1.5; letter-spacing: 0.8px; padding: 0px 10px 41px 0px; ol li{ margin: 0px 0px 15px 0px; } ul { padding: 5px 0px 0px 0px; margin: 0px 0px 24px 30px; } ul li{ margin: 0px 0px 0px 20px; padding: 0px 0px 0px 7px; } } .content-home{ margin-top: 30px; color: #fff; background: url(../images/content-home-bg.jpg) center top no-repeat; -webkit-background-size: cover; background-size: cover; padding-top: 70px; padding-bottom: 70px; position: relative; .content-home-inner { &:before{ content: ""; display: block; height: calc(100% - 100px); position: absolute; top: 0; left: 0; width: 64.2%; background: rgba(11, 51, 84, 0.9 ); margin: 62px 0px 62px 0px; } } h1{ margin: 49px 0px 17px 0px; font-size: 42px; letter-spacing: 0px; } p{ margin: 0px 0px 22px 0px; } .row { position: relative; } .bottom-logos { position: absolute; bottom: 0px; right: 0px; } .blogos { position: static; } } /* .bottom-logos{ position: relative; bottom: 1px; img { max-width: 100%; position: absolute; bottom: 1px; } } */ .map{ height: 205px; background: url(../images/map-bg.jpg) top center no-repeat; margin-top: 30px; } .footer-wrapper { margin: 0px; overflow: hidden; background: #0b3354; padding: 0px 0px 35px 0px; font-size: 15px; color: $(color-4); a { color: $(color-4); &:hover{ color: $(color-5); } } .footer-menu ul{ margin: 0px; padding: 0px; text-align: left; li { padding: 0px; margin: 0px 0px 10px 0px; line-height: 1.3; display: block; } a{ display: block; letter-spacing: 0.3px; transition: all 0.3s ease 0s; } li#menu-item-378 { margin: 41px 0px 10px 0px; } li#menu-item-380 { margin: 18px 0px 44px 0px; a{ display: inline-block; padding: 5px 20px 5px 20px; border-radius: 20px; border: 1px solid #ffffff; &:hover{ color: $(color-1); background: #ffffff; } } } } .footer-menu ul li.current-menu-item a, .footer-menu ul li a:hover{ color: $(color-5); } .footer-logo { text-align: center; margin: 44px 0px 18px 0px; } .footer-contact { text-align: right; letter-spacing: 0.7px; line-height: 1.6; padding: 23px 0px 10px 0px; h3 { font-size: 21px; letter-spacing: 0px; margin: 18px 0px 14px 0px; } } .copyright{ margin: 0px 0px 0px 0px; line-height: 2.15; text-align: center; letter-spacing: 0.5px; color: $(color-1); background: #ffffff; a{ color: $(color-1); text-decoration: underline; &:hover{ color: $(color-5); } } } } .get-social { position: relative; padding: 0px; margin: 0px; text-align: center; } .get-social .sm-icons a { display: inline-block; height: 30px; width: 30px; margin: 0px 5px 5px 0px; line-height: 34px!important; text-align: center; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; } .get-social .sm-icons a .fa{ font-size: 19px; } /****** media queries ******/ @media screen and (max-width: 767px) { .header-mobile-block { display: block; } .hide-from-desktop{ display: block; } .content-home-inner::before{ width: 100%!important; /* height: 93%!important; */ } .logo { text-align: center; margin: 35px 0px 12px 0px; } .logo img{ max-width: 96%; } .telephone{ float: none; width: auto; text-align: center; line-height: 1.4; padding: 0px; margin: 20px 0px 10px 0px; a{ color: $(color-3); &:hover{ color: $(color-1); } } } .address { text-align: center; line-height: 1.4; float: none; width: auto; margin: 5px 0px 10px 0px; a:hover { color: #000000; } } .search_mobile { display: block; width: 91%; margin-bottom: 15px; margin-left: 4%; position: relative; } .search_mobile:before { content: "\f002"; display: block; width: 40px; height: 40px; position: absolute; top: -2px; right: 0; font-family: 'FontAwesome'; text-align: center; line-height: 40px; font-size: 20px; color: #000; } .search_mobile input[type="text"] { height: 36px; width: 100%; border: none; background: #fff; color: #000; padding-left: 10px; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; } .search_mobile input[type="text"]:focus { box-shadow: 0 0 5px black; padding: 3px 0px 3px 3px; border: 1px solid black; } .search_mobile input[type="submit"] { display: block; top: 0; right: 0; height: 38px; width: 38px; position: absolute; border: none; background: none; } a[name]{ padding-top: 50px; } .para{ padding: 20px 10px 20px 10px; } .footer-wrapper { text-align: center; line-height: 1.5; margin: 0px; padding: 0px; } .footer-wrapper .footer-contact { padding: 20px 0px 25px 0px; text-align: center; } .footer-wrapper .copyright { line-height: 1.4; padding: 10px; } header.isStuck , .header-desktop-block, .footer-menu, .footer-info, .footer-outer-top, .get-social .sm-icons a.addthis{ display: none; } .header-mobile .col-sm-12, #middle-block-outer .col-sm-6{ padding: 0px; } .mobile-banner img{ max-width: 100%; } .banner-wrapper { top: 0px; } #menu{ z-index: 10000!important; background: #fff!important; } } @media screen and (max-width: 1100px) { .row-margin { margin: 0px; } .banner-sub img, .gallery-home img{ max-width: 100%; } } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ .carousel .item { height: 100%; width: 100%; text-align: center; } /* .carousel .carousel-inner .item .container { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; top: 0; left: 0; right: 0; } */ /* Caption */ .carousel .item .caption-icon { animation-delay: 1s; max-width: 200px; } .carousel .item h1 { animation-delay: .8s; font-family:'helvlightregular'; font-size:60px; color:#0b3354; line-height: 1.1; margin: 30px 0px 8px 0px; } .carousel .item h2 { animation-delay: 1.2s; color: #0b3354; margin-top: 0; font-family:'helveticabold'; font-size:30px; line-height: 1.1; margin: 0px 0px 12px 0px; } .carousel .item h3 { animation-delay: 1.2s; color: #fff; font-family:""; font-size:18px; text-align:left; } .carousel .item p .btn-primary { animation-delay: 2s; background-color:transparent; border-radius:25px; border-color:#0b3354; font-family:'helveticabold'; padding: 5px 21px; font-size:16px; margin-top: 10px; color:#0b3354; font-weight:lighter; } .carousel .item p .btn-success { animation-delay: 2s; background-color:transparent; border-radius:25px; border-color:#fff; font-family: ""; padding: 5px 21px; font-size:14px; margin-top: 10px; text-transform:uppercase; color:fff; } /* Fade-in and Fade-out animation */ .fade { opacity: 1; } .fade .item { top: 0; z-index: 1; opacity: 0; width: 100%; position: absolute; left: 0 !important; display: block !important; -webkit-transition: opacity ease-in-out 2s; -moz-transition: opacity ease-in-out 2s; -ms-transition: opacity ease-in-out 2s; -o-transition: opacity ease-in-out 2s; transition: opacity ease-in-out 2s; } .fade .item:first-child { top: auto; position: relative;; } .fade .item.active { opacity: 1; z-index: 2; -webkit-transition: opacity ease-in-out 2s; -moz-transition: opacity ease-in-out 2s; -ms-transition: opacity ease-in-out 2s; -o-transition: opacity ease-in-out 2s; transition: opacity ease-in-out 2s; } /* Images centering */ .carousel .item .img-center { display: block; margin-left: auto; margin-right: auto; } /* Controllers background image remove and font size reduce */ .carousel-control.right { background: none !important; filter: progid: none !important; outline: 0; transition: all 0.3s ease 0s; margin-right: -50px; margin-bottom: 0px; color: #fff } .carousel-control.left { background: none !important; filter: progid: none !important; outline: 0; transition: all 0.3s ease 0s; margin-left: -50px; margin-bottom: 0px; color: #fff } .carousel .carousel-control { opacity: 0; } .carousel:hover .carousel-control { opacity: 1; text-shadow: 0 1px 1px rgba(0,0,0,.3); } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { font-size: 20px; } /* SLIDES BACKGROUNDS -------------------------------------------------- */ /* .carousel .slide1 { background-image: url(images/banner1.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; width: 100%; height: 605px } .carousel .slide2 { background-image: url(images/banner2.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; width: 100%; height: 605px } .carousel .slide3 { background-image: url(images/banner3.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; width: 100%; height: 605px } .carousel .slide4 { background-image: url(images/banner4.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; width: 100%; height: 605px } */ /* RESPONSIVE CSS -------------------------------------------------- */ @media (max-width: 991px) { .carousel .carousel-indicators { display: none; } .carousel .item .caption-icon { max-width: 150px; } .carousel .item h1 { font-size: 30px; margin-top: 0;; color: #36b0ae; } .carousel .item h2 { font-size: 24px; } .carousel .item .btn-lg { padding: 5px 50px; font-size: 12px; line-height: 1.5; border-radius: 3px; } } @media (max-width: 767px) { .carousel .carousel-inner .item .container { display: none; } }