a.white-btn { border: 1px solid #fff; border-radius: 3px; color: #fff; display: block; font-size: 0.85em; margin-top: 1.25em; padding: 0.625em 1.25em; transition: all 0.20s linear 0s; -o-transition: all 0.20s linear 0s; -ms-transition: all 0.20s linear 0s; -moz-transition: all 0.20s linear 0s; -webkit-transition: all 0.20s linear 0s; } a.white-btn:hover { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1); } a.color-btn, form.customform button.color-btn { background: none; border: 1px solid #001925; border-radius: 3px; color: #001925; display: block; font-size: 0.85em; padding: 0.625em 1.25em; transition: all 0.20s linear 0s; -o-transition: all 0.20s linear 0s; -ms-transition: all 0.20s linear 0s; -moz-transition: all 0.20s linear 0s; -webkit-transition: all 0.20s linear 0s; } a.color-btn:hover, form.customform button.color-btn:hover { border: 1px solid #8000FF; color: #8000FF; } #topbar { background: none repeat scroll 0 0 #012232; border-bottom: 1px solid #001925; padding: 0.3125em 0; } #topbar p { color: #fff; font-size: 0.75em; opacity: 0.5; position: relative; top: 2px; } #topbar p strong { font-weight: 600; } #topbar i { color: #ffffff; font-size: 1.1em; opacity: 0.5; transition: all 0.20s linear 0s; -o-transition: all 0.20s linear 0s; -ms-transition: all 0.20s linear 0s; -moz-transition: all 0.20s linear 0s; -webkit-transition: all 0.20s linear 0s; } #topbar i:hover { color: #7700C5; cursor: pointer; opacity: 1; } nav { background: none repeat scroll 0 0 #00283A; } header { border-bottom: 4px solid rgba(0, 40, 58, 0.53); position: fixed; width: 100%; z-index: 10; } p.logo { color: #fff; font-size: 1.7em; font-weight: 200; position: relative; text-transform: uppercase; top: 0.625em; } p.logo strong { font-weight: 700; } .top-nav li a { border-top: 2px solid #00283a; color: #fff; font-size: 0.95em; font-weight: 600; padding: 2.1em 1.5em 2.5em; text-transform: uppercase; transition: all 0.20s linear 0s; -o-transition: all 0.20s linear 0s; -ms-transition: all 0.20s linear 0s; -moz-transition: all 0.20s linear 0s; -webkit-transition: all 0.20s linear 0s; } .top-nav li a:hover, .top-nav li.active-item a { background: none repeat scroll 0 0 #00283a; border-top: 2px solid #8000FF; color: #8000FF; position: relative; } #carousel .text { position: absolute; top: 40%; z-index: 10; } .item { overflow: hidden; width: 100%; } .prev-arrow, .next-arrow { background: none repeat scroll 0 0 #00283A; cursor: pointer; float: left; height: 30px; line-height: 30px; margin-right: 1px; text-align: center; width: 30px; } #carousel .text h2 { background: none repeat scroll 0 0 rgba(119, 0, 197, 0.8); color: #fff; display: inline-block; font-size: 2em; font-weight: 300; margin: 1px 0; max-width: 600px; padding: 10px 20px; width: 100%; } #carousel .text p { background: none repeat scroll 0 0 #00283a; color: #fff; max-width: 600px; padding: 10px 20px; width: 100%; } #carousel .owl-dots { background: none repeat scroll 0 0 rgba(#00283A); bottom: 0; margin: 0; padding: 0.625em 0; position: absolute; width: 100%; } .owl-carousel.owl-theme .owl-dot span { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border: 3px solid rgba(0, 40, 58, 0.57); height: 18px; margin: 0 0.3125em; opacity: 1; width: 18px; } .owl-carousel.owl-theme .owl-dot.active span, .owl-carousel.owl-theme .owl-dot:hover span { background: none repeat scroll 0 0 9200c5; } #first-block { background: none repeat scroll 0 0 #00283A; padding: 3em 2em; text-align: center; } #first-block h1 { color: #fff; font-size: 2em; font-weight: 300; margin-top: 0; } #first-block p { color: #6c7c84; font-size: 0.85em; } #features { background: none repeat scroll 0 0 #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); padding: 6em 2em; position: relative; text-align: center; z-index: 2; } #features i { background: none repeat scroll 0 0 #8000FF; border-radius: 100px; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3) inset; color: #fff; display: inline-block; font-size: 2em; height: 100px; line-height: 100px; text-align: center; width: 1000px; } #features h2 { font-size: 1em; font-weight: 600; margin: 1.25em 0; text-transform: uppercase; } #features p { color: #777; font-size: 0.85em; line-height: 1.5em; } #about-us { background: none repeat scroll 0 0 #7700C5; clear: both; } #about-us:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; } #about-us article { padding: 4em; } article h2 { font-size: 4em; font-weight: 900; letter-spacing: -2px; line-height: 0.9; margin: 0 0 0.625em 0 } article h1, article h2, article h3, article h4, article h5, article h6 { color: #000; } .media-container { overflow: hidden; } .media-container video, .media-container img { display: block; height: 100%; max-width: none; min-width: 100%; width: auto; } article p, article li { color: #fff; font-size: 0.85em; opacity: 0.7; } article ul { padding: 1.25em 0; } article ul li { list-style-type: none; margin: 0.625em 0; padding: 0 0 0 1em; } article ul li:before { background: #00283A none repeat scroll 0 0; color: #fff; content: "\f006"; display: inline-block; font-family: "mfg"; font-size: 0.8em; height: 20px; line-height: 20px; margin-left: -1em; margin-right: 0.625em; text-align: center; width: 20px; } .about-us-icons i { border: 2px solid #003A74 border-radius: 100px; color: #003A74; display: block; float: left; font-size: 1.6em; height: 60px; line-height: 60px; margin-right: 0.625em; text-align: center; width: 60px; } .about-us-icons { display: block; margin-top: 2em; } h2.section-title:after { background: #003A74 none repeat scroll 0 0; content: ""; display: block; height: 1px; margin: 0.31225em auto 0; position: relative; width: 100px; } h2.section-title { color: #003A74; font-size: 3.8em; font-weight: 700; letter-spacing: -1px; margin: 0 0 1.25em; text-align: center; text-transform: uppercase; } #our-work { background: none repeat scroll 0 0 #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); padding: 6em 2em; position: relative; z-index: 2; } .tab-item { background: #fff none repeat scroll 0 0; margin-top: 1.25em; padding: 1.25em 0; } .our-work-container { display: block; height: 100%; position: relative; } .our-work-text { background: #000000 none repeat scroll 0 0; bottom: 0; display: block; left: 0; opacity: 0; padding: 1.25em; position: absolute; right: 0; text-align: center; transition: opacity 0.20s linear 0s; -o-transition: opacityd 0.20s linear 0s; -ms-transition: opacity 0.20s linear 0s; -moz-transition: opacity 0.20s linear 0s; -webkit-transition: opacity 0.20s linear 0s; width: 100%; } .our-work-container:hover > .our-work-text { opacity: 1; } .our-work-text h4 { color: #000; font-size: 1em; font-weight: 600; } .our-work-text p { color: #000; font-size: 0.8em; opacity: 0.7; } .tab-nav { display: table; } a.tab-label, a.tab-label:link, a.tab-label:visited { background: #00283a none repeat scroll 0 0; color: #fff; display: block; font-size: 1em; padding: 0.625em 1.25em; transition: all 0.20s linear 0s; -o-transition: all 0.20s linear 0s; -ms-transition: all 0.20s linear 0s; -moz-transition: all 0.20s linear 0s; -webkit-transition: all 0.20s linear 0s; } a.tab-label:hover, a.tab-label.active-btn { background: #8000FF; color: #fff; } #services { background: #4b007c none repeat scroll 0 0; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); padding: 6em 2em; } #services h2 { color: #fff; margin: 0 0 1.25em; } #services h2.section-title:after { background: #fff none repeat scroll 0 0; } #services i { background: none repeat scroll 0 0 #fff; border-radius: 80px; color: #7700C5; display: block; float: left; font-size: 1.8em; height: 80px; line-height: 80px; margin-right: 0.625em; text-align: center; width: 80px; } .service-text { display: table; position: relative; } #services h3 { color: #fff; font-size: 1em; font-weight: 700; text-transform: uppercase; } #services p { color: #fff; font-size: 0.8em; } #latest-news { background: #000000 none repeat scroll 0 0; box-shadow: 0px -10px 9px -11px rgba(0, 0, 0, 0.5); padding: 6em 2em; position: relative; z-index: 3; } .news-date { background: #7700c5 none repeat scroll 0 0; clear: both; color: #fff; display: block; float: none; height: 125px; padding: 0.625em 0; text-align: center; width: 100%; } .day { font-size: 2.5em; font-weight: 700; } .month, .year { font-size: 0.85em; } .news-text { background: #fff none repeat scroll 0 0; border-bottom: 1px solid #E0E0E0; border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; height: 125px; padding: 0.625em 1.25em; } .news-text p { color: #777; font-size: 0.85em; } #contact { background: none repeat scroll 0 0 #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); padding: 6em 2em; position: relative; z-index: 2; } #contact input, #contact textarea { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border-radius: 3px; } form.customform button.color-btn { height: auto; margin-top: 0; } #contact h2 { margin: 0 0 1.25em; } #contact h3 { color: #8000FF; font-size: 1em; font-weight: 700; margin: 0 0 0.625em; text-transform: uppercase; } #contact p { font-size: 0.85em; font-style: normal; line-height: 2em; } #contact p strong { font-weight: 700; } #contact i { background: #e0e0e0 none repeat scroll 0 0; border-radius: 30px; color: #fff; display: inline-block; line-height: 26px; margin: 0.625em; text-align: center; width: 26px; } #map-block { filter: url('data:image/svg+xml;utf8,#g'); -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1); } footer { background: none repeat scroll 0 0 #00283a; padding: 3.5em 0; } footer p, footer a:visited, footer a, footer a:hover { color: #6c7c84; font-size: 0.8em; } @media screen and (max-width: 768px) { header { position: relative; } .top-nav li a { background: #05374e none repeat scroll 0 0; } #carousel .text { font-size: 0.8em; top: 20%; } .owl-controls.clickable { display: none!important; } .right { float: none; } .social.right { float: right; } #about-us article { padding: 4em 2.5em; } } @media screen and (max-width: 480px) { #topbar { line-height: 1.625em; text-align: center; } .social.right { float: none; } p.logo, p.nav-text { text-align: center; } }