/* font-family: 'Roboto', sans-serif; */ /* Reset */ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* End Reset */ /* Style tag */ #content H1, #content H2, #content H3, #content H4, #content H5, #content H6 { font-family: 'Roboto', Arial, Helvetica, san-serif; font-weight: 100; margin: 0 0 15px; color: #000; line-height: 100%; } #content H1{ font-size: 30px; } #content H2{ font-size: 28px; } #content H3{ font-size: 26px; } #content H4{ font-size: 24px; } #content H5{ font-size: 22px; } #content H6{ font-size: 20px; } #content P , #content UL, #content PRE, #content OL, #content BLOCKQUOTE, #content FORM, #content INPUT, #content TEXTAREA, #content SELECT, #content BUTTON, #content TABLE, #content TR, #content TD, #content TH { margin: 0 0 10px; font: 14px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #a2a2a2; } #content TH, #content TD { padding: 10px; } #content A { line-height: 100%; font: 14px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 700; color: #b13f73; } #content .alignleft { float: left; margin: 0 15px 15px 0 ; } #content .alignright { float: right; margin: 0 0 15px 15px; } #content UL { list-style-type: disc; margin: 0 14px 10px; } #content OL { list-style-type: decimal ; margin: 0 18px 10px; } #content OL LI, #content UL LI { margin: 0 0 10px; } TEXTAREA { resize:none; overflow: auto; } A:focus { outline: 0; } .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix {display: inline-block;} * html .clearfix {height:1%;} .clearfix {display:block;} .clear { clear: both; height: 0; line-height: 0px; font-size: 1px; } A { text-decoration: none; } A:HOVER { text-decoration: underline; } IMG { border: none; display: block;} LABEL { cursor: pointer; } BUTTON SPAN {display: none;} BUTTON { cursor: pointer;} * { -moz-box-sizing: border-box; box-sizing: border-box; } button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; padding:0; margin:0; } input:focus{ border: none; outline: none; } /* End Style tag */ BODY { background: #fff; margin: 0; padding: 0; text-align: left; font: 14px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #a2a2a2; min-width: 1130px; -webkit-transform: translateZ(0px); } html, body { height: 100%; } .wrapper { display: table; width: 100%; table-layout: fixed; height: 100%; } HEADER { display:table-header-group; } #content { display:table-row-group; } FOOTER { display:table-footer-group; } HEADER .cell, FOOTER .cell { height: 1px; } .cell { display: table-cell; } .container{ width: 1130px; margin: auto; padding: 0 10px; } /* HEADER */ HEADER { background: #0d0d0d; } HEADER .cell{ padding: 27px 0; } .logo{ float: left; width: 66px; margin: 4px 75px 0 0; } .logo A{ display: inline-block; vertical-align: top; } NAV { float: left; margin: 10px 0 0; } NAV LI{ display:inline-block; vertical-align: top; margin: 0 40px 0 0; font: 18px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #707070; } NAV LI A{ display:block; font: 18px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #707070; } NAV LI.active A, NAV LI A:hover{ text-decoration: none; color: #b13f73; } HEADER .search-box { float: right; } HEADER .wrap-search{ border: 1px solid #3f3f3f; background: #202020; width: 255px; height: 34px; overflow: hidden; -webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px; } HEADER .wrap-search INPUT { display: block; float: left; width: 100%; height: 32px; border: none; background: none; padding: 0 45px 0 17px; font: 14px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #707070; cursor: text; margin: 0; } HEADER .wrap-search INPUT:-moz-placeholder { font: 14px/32px 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #707070; opacity: 1; } HEADER .wrap-search INPUT::-moz-placeholder { font: 14px/32px 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #707070; opacity: 1; } HEADER .wrap-search INPUT:-ms-input-placeholder { font: 14px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #707070; opacity: 1; } HEADER .wrap-search INPUT::-webkit-input-placeholder { font: 14px/140% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #707070; opacity: 1; } HEADER .wrap-search BUTTON { display: block; float: left; border: none; padding: 0; font: 14px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #707070; cursor: text; margin: 0 0 0 -30px; background: url("../images/icons/search.png") center no-repeat; width: 16px; height: 32px; cursor: pointer; } HEADER .wrap-search BUTTON:hover { opacity: 0.7; } /* content */ #content .wrap-slider-area { background: #b13f73; } #content .slider-area { max-width: 1600px; margin: auto; background: url("../images/bg/shadow.png") right top no-repeat; padding: 53px 0 0; } #content .flexslider UL, #content .flexslider LI { list-style: none; margin: 0; } #content .flexslider IMG{ width: auto; } #content .flexslider .wrap { display: table; width: 100%; max-width: 980px; margin: auto; } #content .flexslider .text-box{ display: table-cell; vertical-align: middle; width: 545px; padding: 0 0 0 110px; } #content .flexslider .text-box H3{ font: 72px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 100; color: #fff; margin: 0 0 24px; } #content .flexslider .text-box P{ font: 14px/180% 'Roboto', Arial, Helvetica, san-serif; color: rgba(255,255,255,0.48); margin: 0 0 15px; } #content .flexslider .wrap-img{ display: table-cell; vertical-align: top; text-align: center; } #content .flexslider .wrap-img .img-box{ display: inline-block; vertical-align: top; max-height: 417px; overflow: hidden; height: 100%; } /* */ #content .row-box { padding: 40px 0 80px; } #content .row-box.position-right { padding: 40px 0 24px; } #content .row-box.position-left.bg-box { padding: 40px 0 125px; } #content .row-box .wrap-img{ float: left; width: 570px; } #content .row-box .text-box{ float: right; width: 540px; padding: 75px 0 0; } #content .row-box H3{ font: 48px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 100; color: #000; margin: 0 0 40px; } #content .row-box H4{ font: 18px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 700; color: #000; margin: 0 0 18px; } #content .row-box P{ font: 14px/180% 'Roboto', Arial, Helvetica, san-serif; font-weight: 100; color: #a2a2a2; margin: 0 0 26px; } #content .wrap-link A { display: inline-block; vertical-align: top; position: relative; padding: 0 0 0 40px; font: 14px/30px 'Roboto', Arial, Helvetica, san-serif; font-weight: 700; color: #b13f73; text-decoration: underline; } #content .wrap-link A:hover{ text-decoration: none; } #content .wrap-link A SPAN{ display: block; } #content .wrap-link A SPAN:after{ content: ""; left: 14px; top: 6px; position: absolute; width: 0; height: 0; border-top: 9px solid transparent; border-left: 12px solid #fff; border-bottom: 9px solid transparent; z-index: 100; } #content .wrap-link A:after { content: ""; left: 0; top: 0; width: 30px; height: 30px; background: #b13f73; position: absolute; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } #content .wrap-link A:before { content: ""; left: 5px; top: 11px; width: 9px; height: 8px; background: #fff; position: absolute; z-index: 10; } #content .bg-box { background: #f2f2f2; } #content .row-box.position-right .wrap-img{ float: right; } #content .row-box.position-right .text-box{ float: left; } /* carousel */ #content .carousel-area { /* max-width: 1600px; */ margin: auto; } #content .carousel-area UL, #content .carousel-area UL LI { list-style: none; margin: 0; } #content .carousel-area LI{ } #content .carousel-area .cell-box { display: table; width: 100%; } #content .carousel-area .cell-box>:first-child { border-right: 2px solid #fff; } #content .carousel-area .cell-box A{ display: table-cell; vertical-align: middle; border-bottom: 0px solid #fff; width: 50%; text-align: center; font: 14px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; font-style: italic; color: #fff; } #content .carousel-area .cell-box A:hover{ text-decoration: none; opacity: 0.8; } #content .carousel-area .cell-box IMG{ width: 100%; } #content .carousel-area .bg-1{ background: #e75b9b; } #content .carousel-area .bg-2{ background: #b6d037; } #content .carousel-area .bg-3{ background: #28272c; } #content .carousel-area .bg-4{ background: #ff6633; } #content .carousel-area .bg-5{ background: #b01841; } #content .carousel-area .bg-6{ background: #b13f73; } #content .carousel-area .bg-7{ background: #3399ff; } #content .carousel-area .bg-8{ background: #6ab548; } #content .carousel-area .bg-9{ background: #3e52a3; } #content .carousel-area BLOCKQUOTE{ font: 14px/180% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; font-style: italic; color: #fff; width: 231px; margin: 0 auto 24px; } #content .carousel-area H6{ font: 16px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 700; color: #fff; width: 231px; margin: auto; } /* large-box */ #content .large-box { padding: 94px 0 160px; } #content .large-box H2 { font: 72px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 100; color: #000; text-align: center; margin: 0 0 25px; } #content .large-box P { font: 14px/180% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #a2a2a2; text-align: center; margin: 0 0 40px; } #content .large-box .wrap-img { text-align: center; margin: 0 0 94px; } #content .large-box .wrap-img IMG{ display: inline-block; vertical-align: top; } #content .steps-box, #content .steps-box LI{ list-style: none; margin: 0; } #content .steps-box LI { display: inline-block; vertical-align: top; width: 33.1%; margin: 0 0 20px; } #content .steps-box .wrap{ display: table; width: 100%; max-width: 350px; } #content .steps-box .cell-box{ display: table-cell; vertical-align: middle; background: #f2f2f2; width: 81%; padding: 40px 20px; } #content .steps-box .cell-box.step{ background: #b03f72; width: 19%; text-align: center; padding: 40px 0; } #content .steps-box .cell-box.step SPAN{ display: block; font: 72px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 100; color: #fff; } #content .steps-box .cell-box H5{ display: block; font: 14px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 700; color: #000; margin: 0 0 5px; } #content .steps-box .cell-box P{ display: block; font: 14px/160% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #a2a2a2; margin: 0; text-align: left; } /* footer */ .top-footer { background: #0d0d0d; padding: 55px 0 0; } .menu >LI { display: inline-block; vertical-align: top; width: 24.7%; padding: 0 30px 0 0; margin: 0 0 35px; } .menu H3 { font: 18px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 700; color: #b03f72; margin: 0 0 35px; } .menu LI LI { font: 14px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #4c4c4c; margin: 0 0 15px; } .menu LI LI A{ font: 14px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #4c4c4c; } .menu LI LI A:hover{ color: #fff; text-decoration: none; } .bottom-footer { background: #000; padding: 35px 0; } .copyright { float: left; font: 14px/100% 'Roboto', Arial, Helvetica, san-serif; font-weight: 300; color: #828282; margin: 17px 0 0; } .social { float: right; } .social LI{ display: inline-block; vertical-align: top; margin: 0 0 0 4px; } .social A{ display: block; } .bottom-footer .social A:hover{ text-decoration: none; background-position: 0 -42px; } .social .fb A{ width: 43px; height: 42px; background: url("../images/icons/fb.png") no-repeat; } .social .tw A{ width: 43px; height: 42px; background: url("../images/icons/tw.png") no-repeat; } .social .in A{ width: 43px; height: 42px; background: url("../images/icons/in.png") no-repeat; } .social .sk A{ width: 43px; height: 42px; background: url("../images/icons/sk.png") no-repeat; } .social .be A{ width: 43px; height: 42px; background: url("../images/icons/be.png") no-repeat; } .social .vm A{ width: 43px; height: 42px; background: url("../images/icons/vm.png") no-repeat; } .social .b A{ width: 43px; height: 42px; background: url("../images/icons/b.png") no-repeat; }