/* Table of Contents: * 1 - Reset CSS * 2 - Form fields * 3 - Clear floats * 4 - Common Classes * 5 - Grid : 12 Coloum * 6 - Navigation * 7 - Index Slider * 8 - Tab * 9 - Back to Top * 10 - Accordion * 11 - Main CSS Theme Start */ /* ******** 1. Reset CSS ******** */ @font-face { font-family: 'corbertregular'; src: url('fonts/corbert-regular_0-webfont.eot'); src: url('fonts/corbert-regular_0-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/corbert-regular_0-webfont.woff2') format('woff2'), url('fonts/corbert-regular_0-webfont.woff') format('woff'), url('fonts/corbert-regular_0-webfont.ttf') format('truetype'), url('fonts/corbert-regular_0-webfont.svg#corbertregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'impactregular'; src: url('fonts/impact-webfont.eot'); src: url('fonts/impact-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/impact-webfont.woff2') format('woff2'), url('fonts/impact-webfont.woff') format('woff'), url('fonts/impact-webfont.ttf') format('truetype'), url('fonts/impact-webfont.svg#impactregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family:'FontAwesome'; src:url('fonts/fontawesome-webfont.eot?v=4.2.0'); src:url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); font-weight:normal; font-style:normal } *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;} article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary { display:block } audio, canvas, video { display:inline-block } audio:not([controls]) {display:none;height:0} html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} a {text-decoration:underline; transition: all 0.2s linear 0s;} a:focus {outline:thin dotted} a:hover,a:active {outline: 0;} a:hover {text-decoration:none;} h1,h2,h3,h4,h5,h6 {font-weight:normal;} b,strong,dt,th {font-weight: bold;} em, i { font-style:italic;} p,h1,h2,h3,h4,h5,h6, ul,ol,dd,table,fieldset,address {margin: 0 0 25px;} ul, ol {padding:0;} ul ul,ol ol { margin:10px 0} ul.bulletText { list-style:none; padding:0;} ul.bulletText li {background:url(../images/right-arrow.gif) no-repeat left 7px;padding:2px 0 2px 15px;} img {-ms-interpolation-mode: bicubic;border: 0;vertical-align: middle; max-width:100%; height:auto;} figure {margin:0;} legend {white-space:normal;} q { quotes:"\201C" "\201D" "\2018" "\2019" } small { font-size:80% } sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline } sup { top:-0.5em } sub { bottom:-0.25em } table{border-collapse: separate;border-spacing: 0;width: 100%; empty-cells:show; border:none;} table table { margin:0} th,td {border:none; padding:8px 10px} caption,th,td {font-weight: normal; background:#fff} /* ******** 2. Form fields ******** */ button,input,select,textarea {font-size:1em;margin: 0;vertical-align: baseline; background-color:transparent; border:none; -webkit-appearance: none;} button, html input[type="button"], input[type="reset"], input[type="submit"] {cursor:pointer} [hidden], template {display:none} textarea {overflow:auto;vertical-align: top; resize:vertical;} input[type="checkbox"], input[type="radio"] {box-sizing:border-box;padding:0;margin:0 5px 0 0;} input[type="submit"], input[type="button"],input[type="reset"],button,.button{line-height:20px;padding:4px 10px;display:inline-block; text-decoration:none;} fieldset {border:0;margin:0;padding:0} label {padding-bottom:5px; display:block; font-weight:bold;} /* ******** 3. Clear floats ******** */ .cf:before, .cf:after, .container:before, .container:after, .row:before, .row:after, ul:before, ul:after, .boxs:before, .boxs:after {content:" ";display:table} .cf:after, .container:after, .row:after, ul:after{clear:both} /* ******** 4. Common Classes ******** */ hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:20px 0;padding:0} .alignLeft { float:left} .alignRight { float:right;} .displayNone, .hasJS noscript{display:none!important;visibility:hidden} .rounded {-webkit-border-radius: 5px; border-radius: 5px;} .circle, .supply span {-webkit-border-radius:50% 50%;border-radius:50% 50%;} .left{text-align:left !important} .right{text-align:right !important} .center{text-align:center !important} .justify{text-align:justify !important} .imgBorder { border:1px solid #ccc; padding:5px} .cols50 {width:50%} .cols30 {width:30%} .cols33 {width:33%} .cols70{ width:70%} /* ******** 6. Navigation ******** */ .mainNavigation { margin:0; z-index:9999; position:relative; background:#062a4a; clear:both} .toggleMenu {display:none;padding:15px;text-decoration:none} .toggleMenu .mobileMenu { font-size:1.250em; color:#fff;} .toggleMenu .iconBar {background:#FFFFFF;display: block;height:3px;margin:2px auto; float:right; width:25px; clear:both} #nav {z-index:122} #nav, #nav ul { list-style:none; margin:0; padding:0; z-index:110 } #nav li{} #nav li { float:left; margin:0; padding:0; position:relative; z-index:122; display:inline } #nav a { display:inline-block; text-decoration:none } #nav a:hover, .noJS #nav a:focus, #nav ul .hover > a, #nav ul .focus > a { color:#fff; } #nav ul {left:0; position:absolute; top:39px; width:200px; padding-top:6px; z-index:9999; background:#072a4b} #nav ul li { float:left; height:auto; width:100%;z-index:123 } #nav ul a {display:block; background:0; font-weight:normal; padding:5px 15px 5px 15px; margin:0; text-align:left; line-height:18px; font-size:1em } #nav ul a:hover, #nav ul a.selected { color:#000; padding-bottom:10px; } #nav ul, #nav :hover ul ul, #nav .hover ul ul, #nav .focus ul ul { margin-left:-9999px } #nav li:hover > ul, #nav li.hover > ul, #nav li.focus > ul, #nav a:focus + ul, #nav ul ul, .noJS #nav .hover a:focus, .noJS #nav .focus a:focus { margin-left:0 } #nav li ul {z-index:124; width:200px;top:100%; padding:0; left:0} #nav li ul li { margin:0; padding:0;} #nav li ul ul { z-index:110; top:0; left:200px } #nav li a{ margin:5px 25px; line-height:36px; color:#8d8c8c; font-size:16px; text-transform:uppercase;/* -webkit-transition: color 400ms linear; transition: color 400ms linear;*/ position:relative; } #nav li a:before, #nav .active a:before{display:none;} #nav li a:after, #nav .active a:after { bottom:-10px; content: ""; display: block; height:1px; left: 0%; position: absolute; background: #f7941e; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; border:none; } #nav li a:hover:after, #nav .active a:after { width: 100%; left: 0; } #nav > li > a:hover, #nav > li.hover > a, #nav > li.focus > a, #nav li.active a { color:#000; /*border-bottom:#f7941e solid 1px; padding-bottom:9px;*/} #nav .menuIcon {display:block; position:absolute; right:5px; top:20px; width:9px; height:9px; z-index:1} #nav li .menuIcon { background:url(../images/down-arrow.gif) no-repeat right center;} #nav li li .menuIcon { background:url(../images/right-arrow.gif) no-repeat right center; top:13px; right:5px;} #nav li ul li a { background-color:#072a4b; font-size:1.083em; line-height:24px; color:#fff; border:none; border-top:1px dotted #144573} #nav li ul li a:hover, #nav li ul li > a.selected, #nav ul a:hover, .noJS #nav ul a:focus, #nav ul a.selected { background-color:#B8E8FF; color:#072a4b} #nav ul li.focus > a{background-color:#B8E8FF !important; color:#072A4B; display:block;} .noJS #nav ul a:focus { width:200px;} /*.rightArrowImg { position:absolute; right:10px; top:10px }*/ .noJS #nav ul a:focus, .noJS #nav ul a:focus + ul { margin-left:9999px } .noJS #nav ul a:active { margin-left:0} /* Example 1 */ #example1 .sp-thumbnail { width: 100%; padding: 8px; background-color: #F0F0F0; -moz-box-sizing: border-box; box-sizing: border-box; } #example1 .sp-thumbnail-title { margin-bottom: 5px; text-transform: uppercase; color: #333; } #example1 .sp-thumbnail-description { font-size: 14px; color: #333; } /* ******** 7. Index Slider ******** */ .indexBanner { position:relative} .indexBanner .sliderBanner .item{ height:300px;} .noJS .indexBanner {height:300px; overflow:hidden} /* Owl Carousel */ .owl-carousel .animated {-webkit-animation-duration: 1000ms;animation-duration: 1000ms;-webkit-animation-fill-mode: both;animation-fill-mode: both;} .owl-carousel .owl-animated-in {z-index: 0;} .owl-carousel .owl-animated-out {z-index: 1;} .owl-carousel .fadeOut {-webkit-animation-name: fadeOut;animation-name: fadeOut;} @-webkit-keyframes fadeOut {0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut {0% {opacity: 1;} 100% {opacity: 0;} } /* * Owl Carousel - Auto Height Plugin*/ .owl-height {-webkit-transition: height 500ms ease-in-out;-moz-transition: height 500ms ease-in-out;-ms-transition: height 500ms ease-in-out;-o-transition: height 500ms ease-in-out;transition: height 500ms ease-in-out;} /* * Core Owl Carousel CSS File*/ .owl-carousel {display: none;width: 100%;-webkit-tap-highlight-color: transparent;/* position relative and z-index fix webkit rendering fonts issue */position: relative;z-index: 1;} .owl-carousel .owl-stage {position: relative;-ms-touch-action: pan-Y;} .owl-carousel .owl-stage:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} .owl-carousel .owl-stage-outer {position: relative;overflow: hidden;/* fix for flashing background */-webkit-transform: translate3d(0px, 0px, 0px);} .owl-carousel .owl-controls .owl-nav .owl-prev,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-dot {cursor: pointer;cursor: hand;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .owl-carousel.owl-loaded {display: block;} .owl-carousel.owl-loading {opacity: 0;display: block;} .owl-carousel.owl-hidden {opacity: 0;} .owl-carousel .owl-refresh .owl-item {display: none;} .owl-carousel .owl-item {position: relative;min-height: 1px;float: left;-webkit-backface-visibility: hidden;-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .owl-carousel .owl-item img {display: block;width: 100%;-webkit-transform-style: preserve-3d;} .owl-carousel.owl-text-select-on .owl-item {-webkit-user-select: auto;-moz-user-select: auto;-ms-user-select: auto;user-select: auto;} .owl-carousel .owl-grab {cursor: move;cursor: -webkit-grab;cursor: -o-grab;cursor: -ms-grab;cursor: grab;} .owl-carousel.owl-rtl {direction: rtl;} .owl-carousel.owl-rtl .owl-item {float: right;} /* * Owl Carousel - Lazy Load Plugin*/ .owl-carousel .owl-item .owl-lazy {opacity: 0;-webkit-transition: opacity 400ms ease;-moz-transition: opacity 400ms ease;-ms-transition: opacity 400ms ease;-o-transition: opacity 400ms ease;transition: opacity 400ms ease;} .owl-carousel .owl-item img {transform-style: preserve-3d;} /* ******** 9. Back to Top ******** */ #backtotop{background:url(../images/backtotop.png) no-repeat center center;bottom:59px;cursor:pointer;display:none;height:17px;overflow:hidden;position:fixed;right:10px;text-indent:-99999px;width:34px;z-index:999; display:none} /*******************************************t***********************************************************************/ /***************************************** 11. Main CSS Theme Start ****************************************************************/ /******************************************************************************************************************/ /*Structure */ .container { margin:0 auto; width:100%; max-width:1100px;} /* CSS */ body,button,input,select,textarea {color: #393939; font-family:corbertregular, Arial, Helvetica, sans-serif; font-size:75%; line-height:1.5;} li{ list-style:none;} body {background-color:#fff;} h1 {font-size: 2.308em;} h2 {font-size: 2.000em;} h3 {font-size: 1.692em;} h4 {font-size: 1.538em;} h5 {font-size: 1.385em;} h6 {font-size: 1.231em;} a {color:#00377b; text-decoration:none;} a:hover {color:#00377b;} table {border-top:1px solid #E9E9EA;border-left:1px solid #E9E9EA;} th,td {border-bottom:1px solid #E9E9EA;border-right:1px solid #E9E9EA;} th{background:#f3f3f3} button, html input[type="button"], input[type="reset"], input[type="submit"],input[type="file"],input {font-size:100%;} textarea.formControl { height:134px;} input[type="submit"], button,.button, a.button{color:#fff;border:1px solid #f6921e;background-color:#f6921e; text-transform:uppercase; font-size:14px; font-weight:bold;} input[type="submit"]:hover, .button:hover, button:hover a.button:hover{color:#fff; background-color:#333; border-color:#111} .inlineBox label, .inlineBox input { display:inline-block ; padding:0} input[type="text"], textarea{ background-color:#efefef; padding:0 20px; line-height:63px; border:#cccccc solid 1px; width:100%; color:#6d6d6d; font-size:18px;} #topPanel{ background-color:#00377b; line-height:46px; padding:8px 0 0; min-height:46px; } #topPanel ul{ margin:0;} #topPanel a, footer a{ -webkit-transition: color 400ms linear; transition: color 400ms linear; } .callUs{ float:left; padding:5px 0 0;} .callUs li{ float:left; margin:0 15px 0 0; -webkit-transition: background 400ms linear; transition: background 200ms linear;} .callUs li a{ display:block; line-height:23px; color:#6b95ca; padding:0 0 0 30px;} .callUs li a:hover, footer a:hover{color:#FFFFFF;} .email{ background:url(../images/email-bg.png) 0 0 no-repeat; } .email:hover{ background:url(../images/email-bg.png) left -23px no-repeat; } .call{ background:url(../images/call-bg.png) 0 0 no-repeat; height:22px; } .call:hover{ background:url(../images/call-bg.png) left -22px no-repeat;} .socialMedia li, footer .socialMedia li{ float:left; margin:2px 0 0 12px; } #topPanel .socialMedia li a, footer .socialMedia li a{ display:block; width:27px; height:26px; -webkit-transition: background-color 400ms linear; transition: background-color 400ms linear; background-color:rgba(207, 206, 205, .5); line-height:26px; text-align:center; } #topPanel .socialMedia li a:hover, footer .socialMedia li a:hover{background-color:rgba(255, 255, 255, 1);} .socialMedia li i, footer .socialMedia li i{font-family:'FontAwesome'; font-size:14px; color:#00377b; font-style:normal;} .facebook:before {content:"\f09a"; } .twitter:before {content:"\f099"; } .linkedin:before {content:"\f0e1"; } #logo{ float:left; padding:30px 0 20px; margin:0;} #logoNavWrap nav{ float:right; margin:50px 0 0;} /*owlCarousel*/ .owlCarousel .item { /*height:450px; line-height:450px;*/} .owl-theme .owl-controls{margin-top:-30px;text-align:center;-webkit-tap-highlight-color:transparent; position:relative; } .owl-theme .owl-controls .owl-nav [class*=owl-]{color:#fff;font-size:14px;margin:5px;padding:4px 7px;background:#d6d6d6;display:inline-block;cursor:pointer;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} .owl-theme .owl-controls .owl-nav [class*=owl-]:hover{background:#869791;color:#fff;text-decoration:none} .owl-theme .owl-controls .owl-nav .disabled{opacity:.5;cursor:default} .owl-theme .owl-dots .owl-dot, .noJS .owl-dots .owl-dot{display:inline-block;zoom:1;*display:inline} .owl-theme .owl-dots .owl-dot span, .noJS .owl-dots .owl-dot a{width:10px;height:10px;margin:5px 7px;background:#d6d6d6;display:block;-webkit-backface-visibility:visible;-webkit-transition:opacity 200ms ease;-moz-transition:opacity 200ms ease;-ms-transition:opacity 200ms ease;-o-transition:opacity 200ms ease;transition:opacity 200ms ease;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px} .owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span,.noJS .owl-dots .owl-dot.active a{background:#869791} #services{ background-color:#f7941e; padding:40px 0 20px; color:#FFFFFF;} #services h2{ font-size:60px; margin-bottom:15px; border-bottom:#FFFFFF solid 1px; float:left; width:24%; line-height:70px;} #services .serviceWrp{ float:right; width:73%; margin:16px 0 0 10px;} .serviceWrp li{ float:left; width:49%; margin:0 8px 30px 0; font-family:Arial, Helvetica, sans-serif;} .serviceWrp li a{ color:#FFFFFF;} .serviceWrp li span{ float:left; width:100px; height:100px; border:#FFFFFF solid 1px; text-align:center; vertical-align:middle; line-height:94px; margin:0 15px 0 0; -webkit-transition: background-color 1s linear; transition: background-color 1s linear;} .serviceWrp li:hover span{ background-color:#f7941e;} .serviceWrp li h3{ margin-bottom:5px; text-transform:uppercase; font-size:16px; } .ourSupply { padding:25px 0 0;} .ourSupply h3{ float:left; color:#034ea0; font-size:43px; width:22%; } .ourSupply ul{ float:right; width:74%; margin-top:12px;} .ourSupply li{ float:left; /*width:20%;*/ text-align:center; } .owl-controls{ display:none;} footer{ background-color:#404041;font-family:Arial, Helvetica, sans-serif; padding:30px 0 0;} .globalAdmax{ float:left; width:340px; color:#999999;} .globalAdmax a{ color:#999999;} .globalAdmax img{ margin-bottom:10px;} .globalAdmax .contactInfo{ text-transform:uppercase; font-size:14px; display:block; padding-bottom:10px; margin-right:90px;} footer h4{ color:#FFFFFF; font-size:16px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; margin:10px 0 18px 0;} footer a{} footer li{ line-height:28px;} footer li a{ color:#999999; font-size:14px;} footer li a:hover{ color:#FFFFFF;} address{ font-size:14px;} .emailID span{ float:left; margin:0 5px 20px 0;} .services{ float:left; width:24%;} .customerSupply{ float:left; width:22%; } .inquery{ float:left; width:21%;} .inquery p{ color:#999999; font-size:14px;} .inqEmail .textBox{ float:left; background-color:#000000; line-height:33px; padding:0 10px; color:#999999; width:193px; border:none; font-size:14px;} .inqEmail .button{ background:url(../images/button.gif) left top no-repeat; width:34px; height:34px; float:left;} .emailWrp{ float:left;} .emailWrp label.error{ display:block; color:#fb7171; font-size:11px; } footer .socialMedia{ float:right; margin:8px 3px 0 0;} footer .socialMedia li i{ color:#404041;} .copyRight{ background-color:#000009; line-height:59px;} .copyRightTxt{ color:#858585; margin:0; text-align:right;} .copyRightTxt a{ padding:0 10px; color:#858585; } .copyRightTxt a:hover{ color:#FFFFFF;} #aboutBanner{background:url(../images/about-us-bg.png) left top repeat-x; min-height:210px; } #aboutBanner h2{background:url(../images/heading-wrap.png) left bottom no-repeat; float:left; text-align:center; padding:70px 0 0; color:#034ea0; display:block; width:262px; height:132px; margin:78px 0 0; font-size:40px; } #aboutBanner .container{background:url(../images/abous-us-new.jpg) right top no-repeat; } #aboutInfo{ background-color:#fff; padding:40px 0 10px;} .aboutInfo{ font-size:18px; line-height:30px; text-align:center; color:#034ea0; font-family:Arial, Helvetica, sans-serif; } .aboutUsWrap{ background-color:#00aced; padding:35px 0 0;} .aboutUsWrap .aboutUs{ padding:0 20px;} .aboutUs li{float:left; width:48%; margin:0 35px 0 0; color:#FFFFFF; font-size:14px; line-height:26px; font-family:Arial, Helvetica, sans-serif;} .aboutUs li:last-child{ margin-right:0;} #sandbag {padding: 40px 0 0; } .sandbag { font-size: 18px; line-height: 30px; color: #034ea0; text-align:justify; font-family: Arial, Helvetica, sans-serif; } .sandbag-subtitle { font-weight: bold; } #innerBanner{ background-color:#009ed9; min-height:155px;} #innerBanner .container{ background:url(../images/banner-style.png) right bottom no-repeat; min-height:155px; } #innerBanner h2{background:url(../images/heading-wrap.png) left top no-repeat; float:left; text-align:center; padding:70px 0 0; display:block; width:258px; height:130px; margin:29px 0 0; font-size:40px; color:#034ea0;} #inner{ padding:50px 0 0;} .supply li{ float:left; width:31%; margin:0 20px 0 0;} .supplyInfo ul{font-family:Arial, Helvetica, sans-serif; padding:0 15px; font-size:15px;} .supplyInfo h3{ text-align:center; padding:12px 0 9px; margin-bottom:10px;} .supply li h3{ border-bottom:#888888 solid 1px; font-size:24px; color:#034ea0;} .supply li ul li{ color:#7b7b7c; background:url(../images/bullet.gif) left 8px no-repeat; width:100%; line-height:24px; padding:0 0 5px 15px; } .supply span{background:url(../images/iconbg-hover.png) 4px 4px no-repeat; text-align:center; display:block; width:90px; height:90px; margin:0 auto; padding:13px 0 0;transition-duration: 1s; transition-property: transform; border:#928f8f solid 1px; } .supply li:hover span{ background:url(../images/iconbg-hover.png) 4px -80px no-repeat; transform: rotate(360deg);} .contactInfo{ float:left; width:65%; margin:0 76px 0 0;} .supply li.gym span{ padding-top:24px;} .supply li.tools span{ padding-top:21px;} .supply li.plumb span{ padding-top:21px;} .supply li.const span{ padding-top:18px;} .supply li.office span{ padding-top:29px;} .supply li.stationary span{ padding-top:17px;} .supply li.exhibition span{ padding-top:22px;} .supply li.vehicles span{ padding-top:15px;} .supply li.marines span{ padding-top:10px;} .supply li.photocopier span{ padding-top:16px;} .supply li.floodbags span{ padding-top:21px;} .contactInfo p{ margin-bottom:15px; font-size:18px;} .contactInfo h3{ color:#034ea0; font-size:38px;} .contactFrm .formGroup{ margin:0 15px 30px 0; float:left; width:48%;} .contactFrm label.error{ color:#FF0000; font-weight:normal; font-size:14px;} #subject, #textarea{ width:98%;} .formGrpWrp div:last-child{ margin-right:0;} .subjectWrp{ margin-bottom:30px;} .contactAddress{ float:left; width:28%;} .submitWrp{ float:right; margin-right:14px;} .contactAddress h3{font-size:24px; color:#034ea0; margin-bottom:5px;} .contactAddress p{ font-size:14px;} .offices{ margin-bottom:25px;} .offices p{ margin-bottom:0;} .servicesWrp{ margin-right:-45px;} .servicesWrp li{ float:left; width:226px; text-align:center; float:left; margin:0 60px 0 0; min-height:290px;} .servicesWrp h3, .clients h3{ font-size:21px; color:#034ea0; } .servicesWrp h3{ font-size:18px; line-height:24px;} .fixedTop .headerNav{position: fixed; top: 0; left: 0; width: 100%; z-index: 9; background-color:rgba(255, 255, 255, .97);} .fixedTop #logo img{ width:82%} .clients img{ max-width:90%;} .clients h3{ border-top:1px solid #ccc; margin:10px 10px 50px; padding-top:10px;} .servicesWrp li img{ border:#e7e7e7 solid 1px;} .clients li{ width:25%; float:left; text-align:center;} .gmap3 {border: 1px solid #cccccc;width: 100%;height: 300px;} .supplyBlue{ background-color:#00aced;} .supplyBlue .ourSupply ul{ width:100%;} .supplyBlue .owl-carousel .owl-item, .supplyBlue .ourSupply li{ text-align:center; display:inline-block; float:none;} @-webkit-keyframes bounceIn { 0%, 100%, 20%, 40%, 60%, 80% { -webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1); transition-timing-function:cubic-bezier(0.215, .61, .355, 1) } 0% { opacity:0; -webkit-transform:scale3d(.3, .3, .3); transform:scale3d(.3, .3, .3) } 20% { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform:scale3d(.9, .9, .9); transform:scale3d(.9, .9, .9) } 60% { opacity:1; -webkit-transform:scale3d(1.03, 1.03, 1.03); transform:scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform:scale3d(.97, .97, .97); transform:scale3d(.97, .97, .97) } 100% { opacity:1; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } } @keyframes bounceIn { 0%, 100%, 20%, 40%, 60%, 80% { -webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1); transition-timing-function:cubic-bezier(0.215, .61, .355, 1) } 0% { opacity:0; -webkit-transform:scale3d(.3, .3, .3); -ms-transform:scale3d(.3, .3, .3); transform:scale3d(.3, .3, .3) } 20% { -webkit-transform:scale3d(1.1, 1.1, 1.1); -ms-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform:scale3d(.9, .9, .9); -ms-transform:scale3d(.9, .9, .9); transform:scale3d(.9, .9, .9) } 60% { opacity:1; -webkit-transform:scale3d(1.03, 1.03, 1.03); -ms-transform:scale3d(1.03, 1.03, 1.03); transform:scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform:scale3d(.97, .97, .97); -ms-transform:scale3d(.97, .97, .97); transform:scale3d(.97, .97, .97) } 100% { opacity:1; -webkit-transform:scale3d(1, 1, 1); -ms-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } } .serviceWrp li:hover span{ -webkit-animation-name:bounceIn; animation-name:bounceIn; -webkit-animation-duration:.75s; animation-duration:.75s } .effect{-webkit-animation-name:bounceIn; animation-name:bounceIn; -webkit-animation-duration:.75s; animation-duration:.75s} .effectWrp{ background-color:rgba(255, 255, 255, .5); /*width:300px; height:300px;*/ padding:20px; position:absolute; left:50%; top:17%; margin-left:200px;} .effect{background-color:rgba(255, 255, 255, .8); width:250px; height:250px;}