/* ============================================================================= HTML5 Boilerplate CSS: h5bp.com/css ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; color: #222; } body { margin: 0; font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } ::selection { background: #fe57a1; color: #fff; text-shadow: none; } a { color: #00e; } a:visited { color: #551a8b; } a:hover { color: #06e; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } label { cursor: pointer; } legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } /* ===== Primary Styles ======================================================== Author: Paul Mañgaser ========================================================================== */ ul, ol { padding: 0; margin: 0; list-style: none; } a { text-decoration: none; } * { margin: 0; padding: 0; } body { width: 100%; height: 100%; background-color: #fff; background-position: center top; } .roboto { font-family: 'Roboto', sans-serif; } .oswald { font-family: 'Oswald', sans-serif; } #wrapper { margin: 0 auto; padding: 0; text-align: center; width: 100%; background-position: center center; /*background-color: #fff;*/ } .default-width { max-width: 1000px; margin: 0 auto; } .res-width { width: 100%; } .abs-div { width: 100%; height: 100%; position: fixed; _position: absolute; display: inline-block; top: 0; bottomL 0; left: 0; right: 0; background-color: rgba(0,0,0,0.9); z-index: 1100; } #menuHolder { width: 100%; /*height: 190px;*/ position: absolute /*fixed*/; top: 0; left: 0; /*background-color: rgba(255,255,255,0.5);*/ z-index: 1000; } #menuHolder .menu { margin-top: 30px; height: 42px; line-height: 42px; } #menuHolder .menus { display: block;} #menuHolder .menus a { display: inline-block; font-size: 14px; font-weight: 400; color: #fff; text-transform: uppercase; margin: 0px 25px; cursor: pointer; } #menuHolder .menus a.circ-bar { font-size: 20px; color: #000; } #menuHolder .red .logo { display: inline-block; background: url(../images/logo.png) no-repeat; width: 146px; height: 167px; border: none; } #menuHolder .white .logo { display: inline-block; background: url(../images/eastman-logo-white.png) no-repeat; width: 199px; height: 42px; border: none; } #menuHolder .red .menus a:hover { color: #b4b4b4; } #menuHolder .menu a.circ-bar-mobile { display: none } /* home */ #home { position: relative; } #home .sliders { width: 100% !important; position: relative; } #home .sliders img { width: 100%; /*height: 100vh;*/ } #slideshow { position: relative; } #slideshow .pager { position: absolute; bottom: 0; margin-bottom: 65px; width: 100%; text-align: center; z-index: 1000; } #slideshow .pager span { display: inline-block; text-indent: -999999px; background: url(../images/pager-default.png) no-repeat; width: 27px; height: 27px; border: none; margin: 0 5px; cursor: pointer; } #slideshow .pager .cycle-pager-active { background: url(../images/pager-active.png) no-repeat; width: 27px; height: 27px; border: none; } .slides .desc { position: absolute; top: 0; margin-top: 255px; } .slides .desc .desc-holder .context { width: 360px; padding: 20px 30px; text-align: left; color: #fff; background-color: rgba(255,51,51,0.8); } .slides .desc .desc-holder .context p { font-size: 16px; font-weight: normal; } .slides .desc .desc-holder .context .emp { font-size: 30px; font-weight: 300; margin-bottom: 10px; } .blocks { padding: 130px 0px 100px; } .blocksVid { padding: 20px 0px; } /* about */ #about { background-color: #ebebea;} #about .about-content .top-content { text-align: center; margin-top:80px; } #about .about-content .top-content h4 { font-size: 28px; color: #282528; font-weight: 100; margin-bottom: 40px; } #about .about-content .top-content span { display: inline-block; width: 30px; border-top: 1px solid #282528; vertical-align: middle; margin: 0px 30px; } #about .about-content .top-content p { font-size: 16px; font-weight: normal; color: #282528; margin-bottom: 30px; } #about .about-content .pops { margin: 0 auto; text-align: center; margin-bottom: 30px; } #about .about-content .pops a { display: inline-block; padding: 10px 30px; font-size: 16px; color: #282528; font-weight: normal; cursor: pointer; text-align: center; width: 435px; vertical-align: top; } #about .about-content .pops a p.title { font-size: 20px; color: #ee594d; text-transform: uppercase; } #about .about-content .pops a p.view { font-size: 16px; color: #ee594d; } #about .about-content .pops .tp { margin: 25px 0px; } #about .about-content .top-content p.tcon {margin: 30px;} /* about pop up */ .content-pop { position: fixed; top: 0; margin-top: 1%; z-index: 2000; } .content-pop .popup { max-width: 770px; margin: 0 auto; display: none; } .content-pop .popup .contents { max-width: 630px; margin: 0 auto; padding: 45px 70px; background-color: #fff; } .content-pop .popup .contents p { margin-bottom: 30px; } .content-pop .popup .title { text-align: center; position: relative; padding-bottom: 30px; } .content-pop .popup .title h4 { font-size: 28px; color: #fff; font-weight: normal; } .content-pop .popup .title .close { position: absolute; right: 0; top: 0; font-size: 16px; color: #fff; cursor: pointer; } /* services */ #services { background-color: #ff3333; padding: 130px 0 150px; } #services .services-content { width: 1050px; margin: 0 auto; text-align: center; } #services .services-content h4 { font-size: 28px; color: #fff; font-weight: 100; margin-bottom: 40px; } #services .services-content h4 span { display: inline-block; width: 30px; border-top: 1px solid #fff; vertical-align: middle; margin: 0px 30px; } #services .services-content .contents { font-weight: 300; } #services .services-content .contents p { font-size: 18px; color: #fff; margin-bottom: 20px; } #services .services-content p.tcon { width: 970px; margin: 30px auto 70px; font-size: 18px; color: #fff; } #services .services-content p.txt-bottom { font-size: 16px; margin-top: 10px; } #services .services-content .tab-icons .tabs { display: inline-block; cursor: pointer; vertical-align: middle; } #services .services-content .tab-icons span { display: inline-block; width: 10px; border-bottom: 1px solid #ff9696; margin: 40px 5px; } #services .services-content .tab-icons span.use-mobile, #services .services-content .tab-icons span.use-mobile2 { display: none; width: 0px; } /*#services .services-content .tab-icons p { font-family: 'oswald', sans-serif; font-size: 12px; color: #fff; margin: 0; position: absolute; bottom: 0; left: 0; }*/ #services .services-content .tab-icons .img1 { background: url(../images/icons1.png) no-repeat; background-size: 139px 139px; } #services .services-content .tab-icons .img2 { background: url(../images/icons2.png) no-repeat; background-size: 139px 139px; } #services .services-content .tab-icons .img3 { background: url(../images/icons3.png) no-repeat; background-size: 139px 139px; } #services .services-content .tab-icons .img4 { background: url(../images/icons4.png) no-repeat; background-size: 139px 139px; } #services .services-content .tab-icons .img5 { background: url(../images/icons5.png) no-repeat; background-size: 139px 139px; } #services .services-content .tab-icons .img6 { background: url(../images/icons6.png) no-repeat; background-size: 139px 139px; } #services .services-content .tab-icons .tabs .img1:before { content: url(../images/icons1-active.png); width:0; height:0; visibility:hidden; } #services .services-content .tab-icons .tabs .img2:before { content: url(../images/icons2-active.png); width:0; height:0; visibility:hidden; } #services .services-content .tab-icons .tabs .img3:before { content: url(../images/icons3-active.png); width:0; height:0; visibility:hidden; } #services .services-content .tab-icons .tabs .img4:before { content: url(../images/icons4-active.png); width:0; height:0; visibility:hidden; } #services .services-content .tab-icons .tabs .img5:before { content: url(../images/icons5-active.png); width:0; height:0; visibility:hidden; } #services .services-content .tab-icons .tabs .img6:before { content: url(../images/icons6-active.png); width:0; height:0; visibility:hidden; } /*#services .services-content .tab-icons .tabs:hover .img1 { background: url(../images/icons1-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .tabs:hover .img2 { background: url(../images/icons2-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .tabs:hover .img3 { background: url(../images/icons3-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .tabs:hover .img4 { background: url(../images/icons4-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .tabs:hover .img5 { background: url(../images/icons5-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .tabs:hover .img6 { background: url(../images/icons6-active.png) no-repeat; background-size: 139px 139px; border: none; }*/ #services .services-content .tab-icons .img1:hover { background: url(../images/icons1-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .img2:hover { background: url(../images/icons2-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .img3:hover { background: url(../images/icons3-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .img4:hover { background: url(../images/icons4-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .img5:hover { background: url(../images/icons5-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .img6:hover { background: url(../images/icons6-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .active .img1 { background: url(../images/icons1-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .active .img2 { background: url(../images/icons2-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .active .img3 { background: url(../images/icons3-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .active .img4 { background: url(../images/icons4-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .active .img5 { background: url(../images/icons5-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .tab-icons .active .img6 { background: url(../images/icons6-active.png) no-repeat; background-size: 139px 139px; border: none; } #services .services-content .titles { margin-top: 20px; display: none; } #services .services-content .titles a { display: inline-block; color: #fafafa; text-transform: capitalize; font-size: 20px; font-weight: 200; vertical-align: top; text-align: center; cursor: pointer; } #services .services-content .titles a.active { color: #d6d5d2; } /*#services .services-content .titles a.first { margin-left: 0px !important; } #services .services-content .titles a.last { margin-right: 0px !important; }*/ #services .services-content .titles .tabs { width: 139px; margin: 0 13px; } #services .services-content .tab-icons .title { color: #fafafa; width: 120px; min-height: 65px; margin: 15px 10px 0px; font-weight: 200; font-size: 20px; text-transform: capitalize; vertical-align: top; } #services .services-content .tab-icons .tabs div.active { color: #d6d5d2; } #services .services-content .slider { position: relative; height: 10px; margin-top: 30px; display: block; overflow: hidden; } #services .services-content .slider .slide-line { display: block; height: 6px; width: 1050px; background-color: #ff9696; position: absolute; z-index: 0; } #services .services-content .slider a.bar { display: inline-block; height: 6px; width: 139px; background-color: #d9483c; margin-right: 25px; margin-left: 0px; padding: 0; z-index: 20; position: absolute; left: 35px; top: 0; } #services .services-content .slider a { cursor: pointer; display: inline-block; height: 17px; margin: 0 11px; padding: 0; width: 139px; z-index: 22; } #services .services-content .slider a.first { margin-left: 0px !important; } #services .services-content .slider a.last { margin-right: 0px !important; } #services .services-content #contents .contents { display: none; margin-top: 30px; } #services .services-content #contents .active { display: block; } /* portfolio */ #portfolio { background-color: #b8b8b8; } #portfolio .portfolio-content h4 { font-size: 28px; color: #fff; font-weight: 100; margin-bottom: 40px; } #portfolio .portfolio-content span { display: inline-block; width: 30px; border-top: 1px solid #fff; vertical-align: middle; margin: 0px 30px; } .gallery .galleries .gallery-images { display: none; } .gallery .galleries { display: inline-block; margin-right: 22px; margin-bottom: 50px; } .gallery .first { margin-left: 0px; } .gallery .last { margin-right: 0px; } .gallery .plist { display: inline-block; width: 229px; height: 229px; position: relative; overflow: hidden; text-align: center; cursor: pointer; } .gallery .plist img { position: absolute; top: 0; left: 0; width: 259px; -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */ transition: width 1s; } .gallery .plist .plus { position: absolute; display: inline-block; background: url(../images/plus.png) no-repeat; top: 50px; left: 50%; margin-left: -14px; width: 28px; height: 28px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .gallery .plist .hov-title { position: absolute; bottom: -20px; right: 0; left: 0; background-color: rgba(0,0,0,0.7); width: 209px; height: 0px; -webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */ transition: height 1s; font-size: 20px; color: #f7f7f8; font-weight: 200; padding: 10px 10px; } .gallery .plist:hover .hov-title { height: 120px; } .gallery .plist:hover img { width: 229px; } .gallery .plist:hover .plus { opacity: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } /* portfolio pop gallery */ .portfolioSlide { position: fixed; top: 0; margin-top: 3%; z-index: 2000; } .portfolioSlide .slideshow { max-width: 650px; margin: 0 auto; } .portfolioSlide .slideshow .details { text-align: center; position: relative; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 2px solid #ff3333; } .portfolioSlide .slideshow .details h4 { font-size: 28px; color: #fff; font-weight: normal; } .portfolioSlide .slideshow .details .close { position: absolute; right: 0; margin-right: 10px; top: 0; font-size: 16px; color: #fff; cursor: pointer; } .portfolioSlide .slideshow .thumbs { width: 700px; margin: 20px 0px } .portfolioSlide .slideshow .thumbs a { display: inline-block; margin-right: 15px; } /* clients */ #clients { background-color: #fff; } #clients .clients-content { max-width: 1100px; margin: 0 auto; } #clients .clients-content h4 {text-align: center; font-size: 28px; color: #333333; font-weight: 100; margin-bottom: 80px; } #clients .clients-content span { display: inline-block; width: 30px; border-top: 1px solid #333; vertical-align: middle; margin: 0px 30px; } #clients .clients-content .client-list { margin: 50px 0px;} #clients .clients-content .client-list a { display: inline-block; margin: 0px 2px 30px; vertical-align: middle; } /* videos */ #videos { background-color: #fff; } #videos .videos-content { max-width: 1100px; margin: 0 auto; } #videos .videos-content h4 {text-align: center; font-size: 28px; color: #333333; font-weight: 100; margin-bottom: 80px; } #videos .videos-content span { display: inline-block; width: 30px; border-top: 1px solid #333; vertical-align: middle; margin: 0px 30px; } #videos .videos-content .videos-list { margin: 50px 0px;} #videos .videos-content .videos-list a { display: inline-block; margin: 0px 2px 30px; vertical-align: middle; } /* projects */ #projects { background-color: #ececec; } #projects .projects-content { max-width: 1100px; margin: 0 auto; } #projects .projects-content h4 {text-align: center; font-size: 28px; color: #333333; font-weight: 100; margin-bottom: 80px; } #projects .projects-content span { display: inline-block; width: 30px; border-top: 1px solid #333; vertical-align: middle; margin: 0px 30px; } #projects .projects-content .projects-list { margin: 50px 0px; } #projects .projects-content .projects-list a { display: inline-block; margin: 0px 2px 30px; vertical-align: middle; } /* video */ #video { background-color: #ffffff; } #video .video-content { max-width: 1100px; margin: 0 auto; } /* contact */ #contact { background-color: #f7f7f8; } #contact .contact-content{ max-width: 1000px; margin: 0 auto; } #contact .contact-content h4 { font-size: 28px; color: #333333; font-weight: 100; margin-bottom: 40px; } #contact .contact-content p { font-size: 18px; color: #333333; font-weight: normal; margin: 90px 0px; } #contact .contact-content span { display: inline-block; width: 30px; border-top: 1px solid #333; vertical-align: middle; margin: 0px 30px; } #contact .contact-content .client-list { margin: 50px 0px; } #contact .contact-content .form .forn-input { text-align: left; } #contact .contact-content .form .forn-input .hello { font-family: 'Open Sans', sans-serif; font-size: 24px; color: #282528; margin-bottom: 30px; } #contact .contact-content .form .forn-input .input-holder { width: 400px; border-bottom: 1px solid #c8c8c8; margin-bottom: 30px; } #contact .contact-content .form .forn-input .inputs { display: block; border: none; background: none; padding: 10px; } #contact .contact-content .form .forn-input .button { background: url(../images/send-button.jpg) no-repeat; width: 168px; height: 40px; border: none; } #contact .contact-content .form .socials { margin-top: 70px; } #contact .contact-content .form .socials-list { display: block; color: #cccccc; margin-bottom: 10px; cursor: pointer; } #contact .contact-content .mob { display: none; } #contact .contact-content .desk { display: block; } .footer { height: 95px; background-color: #fff; line-height: 95px; border-top: 5px solid #34aa69; } .footer .icons-details a { font-size: 13px; color: #282528; margin-left: 20px; } .footer .icons-details a i { color: #34aa69; display: inline-block; margin-right: 5px; } #arrow-up { display: none; position: fixed; border: none; top: 80%; right: 5%; cursor: pointer; z-index: 100; } #arrow-up img { width: 77px; height: auto; } .response { color: #ff0000 !important; } /* * spacers, float, borders */ .fleft { float: left; } .fright { float: right; } .ta-left { text-align: left; } .ta-right { text-align: right; } .ta-center { text-align: center; } /* ============================================================================= Media Queries ========================================================================== */ @media only screen and (max-width: 1024px) { } @media only screen and (max-width: 400px) { #wrapper { min-width: 320px; } .default-width { max-width: 320px; min-width: 320px; } .res-width { width: 100%; } .blocks { padding: 50px 0px 50px; } p { font-size: 12px !important; } #about .about-content .top-content p.tcon, #services .services-content p.tcon { width: 300px; } #menuHolder .menus { display: none; background-color: rgba(51,51,51,0.8); padding: 20px 0px; position: absolute; top: 65px; right: 0; } #menuHolder .ml { display: block; margin: 10px; display: block; width: 300px; text-align: right; } #menuHolder .menus a { display: block; width: 100px; font-size: 18px; font-weight: 300; } #menuHolder .menu { margin-top: 0px; } #menuHolder .red .logo, #menuHolder .white .logo { margin: 10px; } #menuHolder .menus a.circ-bar { display: none; } #menuHolder .menu a.circ-bar-mobile { display: block; margin: 10px; position: absolute; top: 0; right: 0; color: #000; font-size: 20px; } /* slides */ .slides .desc .desc-holder .context { width: 100px; padding: 0; display: none; } #slideshow .pager { margin-bottom: 10px; } /* about us */ #about .about-content .pops { } #about .about-content .pops a { width: 300px; padding: 0; margin: 10px 0 20px; } #about .about-content .top-content p { margin-bottom: 10px; } .content-pop { width: 280px; left: 50%; margin-left: -140px;/*position: absolute;*/ } .content-pop .popup { margin: 10px auto; } .content-pop .popup .contents { max-width: 300px; max-height: 300px; overflow-y: scroll; padding: 20px; } .content-pop .popup .contents img { width: 100%; } .content-pop .title { padding-bottom: 10px !important; } .content-pop .popup .title h4 { font-size: 20px; } .content-pop .popup .title .close { margin-right: 10px; } /* services */ #services { background-color: #ff3333; padding: 40px 0 40px; } #services .services-content { width: 100%; } #services .services-content .slider { display: none; } #services .services-content #contents { display: none; } #services .services-content h4 { font-size: 20px; } #services .services-content .tab-icons span { display: none; } #services .services-content .tab-icons span.use-mobile, #services .services-content .tab-icons span.use-mobile2 { display: block; width: 92%; font-weight: 300; border-bottom: none !important; margin: 15px 0px; height: 0; -webkit-transition: height 0.5s; -moz-transition: height 0.5s; -o-transition: height 0.5s; transition: height 0.5s; } #services .services-content .titles { display: none; } #services .services-content .tab-icons .tabs { width: 30% /*100px*/; height: auto; text-align: center; } #services .services-content .tab-icons .tabs div { display: inline-block; width: 95px; height: 100px; } #services .services-content .tab-icons .title { font-size: 16px; margin: 5px 0 5px; height: 40px !important; } #services .services-content .tab-icons .tabs div.mactive { border-bottom: 4px solid #d9483c; color: #d6d5d2 !important; } #services .services-content .tab-icons .tabs div.active { color: #fafafa; } #services .services-content .tab-icons .img1 { background-size: 100% 100%; } #services .services-content .tab-icons .img2 { background-size: 100% 100%; } #services .services-content .tab-icons .img3 { background-size: 100% 100%; } #services .services-content .tab-icons .img4 { background-size: 100% 100%; } #services .services-content .tab-icons .img5 { background-size: 100% 100%; } #services .services-content .tab-icons .img6 { background-size: 100% 100%; } #services .services-content .tab-icons .tabs .img1:before { display: none; } #services .services-content .tab-icons .tabs .img2:before { display: none; } #services .services-content .tab-icons .tabs .img3:before { display: none; } #services .services-content .tab-icons .tabs .img4:before { display: none; } #services .services-content .tab-icons .tabs .img5:before { display: none; } #services .services-content .tab-icons .tabs .img6:before { display: none; } #services .services-content .tab-icons .active .img1 { background: url(../images/icons1.png); background-size: 100% 100%; border: none; } #services .services-content .tab-icons .tabs:hover .img1, #services .services-content .tab-icons .mactive .img1 { background: url(../images/icons1-active.png); background-size: 100% 100%; border: none; } #services .services-content .tab-icons .tabs:hover .img2, #services .services-content .tab-icons .mactive .img2 { background-size: 100% 100%; border: none; } #services .services-content .tab-icons .tabs:hover .img3, #services .services-content .tab-icons .mactive .img3 { background-size: 100% 100%; border: none; } #services .services-content .tab-icons .tabs:hover .img4, #services .services-content .tab-icons .mactive .img4 { background-size: 100% 100%; border: none; } #services .services-content .tab-icons .tabs:hover .img5, #services .services-content .tab-icons .mactive .img5 { background-size: 100% 100%; border: none; } #services .services-content .tab-icons .tabs:hover .img6, #services .services-content .tab-icons .mactive .img6 { background-size: 100% 100%; border: none; } #services .services-content h4 span { display: block; width: 30px; border-top: 1px solid #fff; vertical-align: middle; margin: 20px auto; } /* portfolio */ #portfolio .portfolio-content .list { width: 320px; padding-left: 0px; } #portfolio .portfolio-content .img { width: 320px; } #portfolio .portfolio-content .plist img { width: 100%; } .portfolioSlide .slideshow { width: 320px; } .thumbs a { display: inline-block; width: 70px; height: auto; } .thumbs a img { width: 100%; } .slide-holder img { width: 100%; } .portfolioSlide .slideshow .details h4 { font-size: 20px; } /* clients */ #clients .clients-content h4 { margin-bottom: 30px; } #clients .clients-content .client-list { margin: 20px 0px; text-align: left; } #clients .clients-content .client-list a { width: 48%; } #clients .clients-content .client-list a img { width: 100%; } .gallery .plist { /*margin: 0px 0px 20px 0px !important; */ margin: 0px 5px!important; /*width: 140px; height: 140px;*/ width: 90px; height: 90px; } .gallery .plist .hov-title, .gallery .plist .plus { display: none; } .gallery .galleries { margin-right: 0 !important; } /* contact us */ #contact .contact-content .form .forn-input { width: 100%; margin-top: 20px; } #contact .contact-content .form .forn-input .input-holder { width: 100%; } #contact .contact-content .form .forn-input .inputs { width: 300px; } #contact .fright, #contact .fleft { float: none !important; } #contact .contact-content .form .img { width: 170px; margin: 0 auto; } #contact .contact-content .form .img img { width: 100%; } #contact .contact-content h4 { font-size: 20px; } #contact .contact-content .form .socials { margin-top: 20px; } #contact .contact-content .form .forn-input .hello { margin-left: 10px; } #contact .contact-content .form .forn-input .input-holder { width: 400px; border-bottom: 1px solid #c8c8c8; margin-bottom: 30px; } #contact .contact-content .form .socials-list { display: inline-block; } #contact .contact-content .mob { display: block; text-align: center; } #contact .contact-content .desk { display: none; } .footer { line-height: 40px; } .footer .fright, .footer .fleft { float: none !important; } .footer .icons-details a { margin-left: 0px; display: inline-block; font-size: 9px; } .footer .icons-details { width: 300px; padding: 0 10px; } #services .contents, #contact p.roboto { width: 92%; padding: 0 10px; } #contact p.roboto { margin: 20px 0px; } .form .button { margin-left:10px; } #about .about-content .top-content { width: 300px; padding: 0 10px; } #arrow-up img { width: 40px; height: auto; } } @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } /* ============================================================================= Non-Semantic Helper Classes ========================================================================== */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } .ir br { display: none; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ============================================================================= Print Styles ========================================================================== */ @media print { * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }