/* 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: 'Open Sans', Arial, Helvetica, san-serif; margin: 0 0 25px; color: #fff; line-height: 100%; } #content H1{ font-size: 40px; } #content H2{ font-size: 38px; } #content H3{ font-size: 36px; } #content H4{ font-size: 34px; } #content H5{ font-size: 32px; } #content H6{ font-size: 230px; } #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 20px; font: 18px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #fff; } #content TH, #content TD { padding: 10px; } #content A { font: 18px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #fff; } #content .alignleft { float: left; margin: 0 10px 10px 0 ; } #content .alignright { float: right; margin: 0 0 10px 10px; } #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:before, .clearfix:after { display: table; content: " "; } .clearfix:after { clear: both; } .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; outline: none;} * { -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 */ html { height: 100%; } BODY { background: #fff; margin: 0; padding: 0; text-align: left; font: 18px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #fff; height: 100%; min-width: 1100px; } .wrapper, .slick-list, .slick-track { height: 100%; } .main-content { height: 100%; display: table; width: 100%; table-layout: fixed; } .align-box { display: table-cell; vertical-align: middle; } .home-page { background: url("../images/bg/bg-1.jpg") no-repeat; } .about-page { background: url("../images/bg/bg-2.jpg") no-repeat; } .portfolio-page { background: url("../images/bg/bg-3.jpg") no-repeat; } .blog-page { background: url("../images/bg/bg-4.jpg") no-repeat; } .contact-page { background: url("../images/bg/bg-5.jpg") no-repeat; } .slick-slide { height: 100%; background-size: cover; position: relative; } .slick-slide:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .home-page:before { background: rgba(126,117,181,0.61); } .about-page:before { background: rgba(65,86,151,0.7); } .portfolio-page:before { background: rgba(136,80,56,0.77); } .blog-page:before { background: rgba(198,70,61,0.71); } .contact-page:before { background: rgba(255,168,0,0.64); } .container { width: 1100px; margin: auto; position: relative; z-index: 100; /* padding: 40px 15px 230px; */ } /* slick-dots */ .slick-dots { position: absolute; bottom: 5px; left: 0; width: 100%; text-align: center; font-size: 0; } .slick-dots LI{ display: inline-block; vertical-align: top; margin: 0 5px 5px; } .slick-dots BUTTON{ display: block; width: 20px; height: 20px; border: 1px solid #fff; background: none; text-indent: -999em; } .slick-dots BUTTON:hover, .slick-dots .slick-active BUTTON{ border: none; background: #fff; } /* arrows */ .slick-disabled { display: none !important; } .slick-prev { position: absolute; left: 78px; top: 50%; width: 142px; height: 142px; margin: -71px 0 0; border: none; background: none; text-indent: -999em; border-radius: 50%; } .slick-prev:hover{ background: rgba(255,255,255,0.15); } .slick-prev:before { content: ""; position: absolute; left: 50%; top: 50%; width: 55px; height: 38px; margin: -19px 0 0 -27.5px; background: url("../images/icons/prev-next.png") no-repeat; } .slick-next { position: absolute; right: 78px; top: 50%; width: 142px; height: 142px; margin: -71px 0 0; border: none; background: none; text-indent: -999em; border-radius: 50%; } .slick-next:hover{ background: rgba(255,255,255,0.15); } .slick-next:before { content: ""; position: absolute; left: 50%; top: 50%; width: 55px; height: 38px; margin: -19px 0 0 -27.5px; background: url("../images/icons/prev-next.png") 0 -38px no-repeat; } /* home-page */ .logo{ text-align: center; margin: 0 0 120px; } .logo A{ display: inline-block; vertical-align: top; } .home-page H3 { font: bold 52px/100% 'Open Sans', Arial, Helvetica, san-serif; text-align: center; margin: 0 0 20px; text-transform: uppercase; } .home-page H4 { font: 36px/100% 'Open Sans', Arial, Helvetica, san-serif; font-weight: 300; text-align: center; text-transform: uppercase; margin: 0 0 85px; } .list-box { font-size: 0; text-align: center; position: relative; z-index: 20; margin: 0 0 -35px; } .list-box LI{ display: inline-block; vertical-align: top; width: 150px; height: 150px; overflow: hidden; background: #fff; border-radius: 50%; position: relative; margin: 0 10px; } .list-box LI:nth-child(1):before{ content: ""; position: absolute; left: 50%; top: 50%; width: 53px; height: 43px; margin: -22.5px 0 0 -26.5px; background: url("../images/icons/icon-1.png") no-repeat; } .list-box LI:nth-child(2):before{ content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 39px; margin: -19.5px 0 0 -23px; background: url("../images/icons/icon-2.png") no-repeat; } .list-box LI:nth-child(3):before{ content: ""; position: absolute; left: 50%; top: 50%; width: 45px; height: 37px; margin: -18.5px 0 0 -22.5px; background: url("../images/icons/icon-3.png") no-repeat; } .home-page .text-box { background: rgba(44,33,64,0.66); padding: 80px 10px; position: relative; } .home-page .text-box H5{ font: bold 24px/100% 'Open Sans', Arial, Helvetica, san-serif; text-align: center; margin: 0 0 10px; } .home-page .text-box P{ font: 18px/100% 'Open Sans', Arial, Helvetica, san-serif; text-align: center; margin: 0; } .sign-up-now-btn { position: absolute; left: 50%; margin: 0 0 0 -118px; bottom: -34px; width: 236px; background: #fff; text-align: center; padding: 24px 5px; font: bold 18px/100% 'Open Sans', Arial, Helvetica, san-serif; text-transform: uppercase; color: #5e537a; text-align: center; } .sign-up-now-btn:hover { text-decoration: none; -webkit-animation-name: zoomIn; animation-name: zoomIn; -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 1s; animation-duration: 1s; } /* about-page */ .border-title { font: bold 38px/100% 'Open Sans', Arial, Helvetica, san-serif; text-transform: uppercase; text-align: center; overflow: hidden; margin: 0 130px 97px; } .border-title SPAN{ display: inline-block; vertical-align: top; position: relative; } .border-title SPAN:before{ content: ""; position: absolute; right: 100%; top: 50%; width: 999em; height: 1px; background: #fff; margin: 0 30px 0 0; } .border-title SPAN:after{ content: ""; position: absolute; left: 100%; top: 50%; width: 999em; height: 1px; background: #fff; margin: 0 0 0 30px; } .about-box .wrap-img { float: left; width: 509px; margin: 0 0 120px; } .about-box .text-box { float: right; width: 506px; margin: 0 0 120px; } .about-box .text-box H3{ font: bold 24px/125% 'Open Sans', Arial, Helvetica, san-serif; margin: 0 0 30px; } .about-box .text-box P{ font: 18px/165% 'Open Sans', Arial, Helvetica, san-serif; margin: 0; } .group-links { text-align: justify; font-size: 0; line-height: 0; width: 100%; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; } .group-links:after { content: ''; display: inline-block; width: 100%; height: 0; font-size:0; line-height:0; } .group-links DIV{ display: inline-block; vertical-align: top; width: 336px; } .group-links A{ display: inline-block; vertical-align: top; width: 336px; border: 3px solid rgba(255,255,255,0.2); background: rgba(39,47,90,0.37); text-align: center; padding: 26px 5px; text-transform: uppercase; font: 18px/100% 'Open Sans', Arial, Helvetica, san-serif; font-weight: 300; color: rgba(255,255,255,0.7); } .group-links A:hover{ text-decoration: none; border: none; background: #fff; -webkit-animation-name: zoomIn; animation-name: zoomIn; -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 1s; animation-duration: 1s; } .group-links A STRONG{ display: block; font: bold 24px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #fff; margin: 0 0 8px; } .group-links A:hover STRONG{ color: #425691; } .group-links A SPAN{ display: block; font: 18px/100% 'Open Sans', Arial, Helvetica, san-serif; font-weight: 300; color: rgba(255,255,255,0.7); } .group-links A:hover SPAN{ color: rgba(66,86,145,0.7); } /* portfolio-page */ .portfolio-page P{ text-align: center; font: 18px/170% 'Open Sans', Arial, Helvetica, san-serif; } .portfolio-slider { padding: 70px 0 83px; } .portfolio-slider .wrap-box{ overflow: hidden; position: relative; z-index: 100; } .portfolio-slider .box{ margin: 0 -5px 0 0; font-size: 0; } .portfolio-slider .box div{ margin: 0 5px 5px 0; display: inline-block; vertical-align: top; width: 210px; } .portfolio-slider .box A{ display: block; width: 210px; overflow: hidden; } .portfolio-slider .box A:hover IMG{ -webkit-animation-name: zoomIn; animation-name: zoomIn; -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 1s; animation-duration: 1s; } .portfolio-slider .slick-dots { bottom: 0; } .portfolio-slider .slick-dots LI { margin: 0 1.5px 3px; } .portfolio-slider .slick-dots BUTTON { background: rgba(255,255,255,0.25); border: none; display: block; height: 39px; text-indent: 0; min-width: 39px; padding: 0 3px; border-radius: 50%; font: 18px/100% 'Open Sans', Arial, Helvetica, san-serif; font-weight: 600; color: #fff; } .portfolio-slider .slick-dots BUTTON:hover, .portfolio-slider .slick-dots .slick-active BUTTON { color: #744936; background: rgba(255,255,255,1); } /* blog-page */ .blog-slider { padding: 0 0 45px; } .blog-slider .box { position: relative; z-index: 100; margin: 0 0 45px; } .blog-slider .wrap-img { float: left; width: 462px; overflow: hidden; } .blog-slider .wrap-img:hover IMG{ -webkit-animation-name: zoomIn; animation-name: zoomIn; -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 1s; animation-duration: 1s; } .blog-slider .text-box{ float: right; width: 577px; } .blog-slider .text-box H3{ font: bold 30px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #fff; margin: 0 0 15px; } .blog-slider .text-box H3 A{ font: bold 30px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #fff; } .blog-slider .text-box H4{ font: 18px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #fff; margin: 0 0 42px; } .blog-slider .read-more-btn A { display: inline-block; vertical-align: top; position: relative; padding: 8px 0 0 40px; font: bold 18px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #fff; text-decoration: underline; } .blog-slider .read-more-btn A:hover { text-decoration: none; } .blog-slider .read-more-btn A:before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 32px; background: url("../images/icons/marker.png") no-repeat; } .blog-slider .slick-dots { bottom: 0; text-align: left; } .blog-slider .slick-dots LI { margin: 0 3px 3px 0; } .blog-slider .slick-dots BUTTON { background: rgba(255,255,255,0.25); border: none; display: block; height: 39px; text-indent: 0; min-width: 39px; padding: 0 3px; border-radius: 50%; font: 18px/100% 'Open Sans', Arial, Helvetica, san-serif; font-weight: 600; color: #fff; } .blog-slider .slick-dots BUTTON:hover, .blog-slider .slick-dots .slick-active BUTTON { color: #744936; background: rgba(255,255,255,1); } /* contact-page */ .contact-page P { text-align: center; font: 18px/170% 'Open Sans', Arial, Helvetica, san-serif; } .map-area { padding: 50px 0 81px; } .map-area IFRAME { display: block; height: 237px; width: 100%; } .contact-box { text-align: justify; font-size: 0; line-height: 0; width: 100%; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; } .contact-box:after { content: ''; display: inline-block; width: 100%; height: 0; font-size:0; line-height:0; } .contact-box .box{ display: inline-block; vertical-align: top; padding: 30px 35px; width: 336px; background: rgba(58,37,17,0.85); font: 18px/130% 'Open Sans', Arial, Helvetica, san-serif; text-transform: uppercase; margin: 0 0 75px; } .contact-box .box A{ color: #fff; } .write-letter-btn { text-align: center; } .write-letter-btn A{ font: bold 30px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #573b1a; text-transform: uppercase; text-decoration: underline; } .write-letter-btn A:hover{ text-decoration: none; } /* animated */ .animation-box { opacity: 0; } .animation-box.animated { opacity: 1; } /* home-page */ .logo { -webkit-animation-duration: 1s; -webkit-animation-delay: 0s; animation-duration: 1s; animation-delay: 0s; } .title-group { -webkit-animation-duration: 1s; -webkit-animation-delay: 0.3s; animation-duration: 1s; animation-delay: 0.3s; } .list-box LI:nth-child(1) { -webkit-animation-duration: 1.1s; -webkit-animation-delay: 0.6s; animation-duration: 1s; animation-delay: 0.6s; } .list-box LI:nth-child(2) { -webkit-animation-duration: 1.5s; -webkit-animation-delay: 0.9s; animation-duration: 1.5s; animation-delay: 0.9s; } .list-box LI:nth-child(3) { -webkit-animation-duration: 1.5s; -webkit-animation-delay: 1.2s; animation-duration: 1.5s; animation-delay: 1.2s; } .home.text-box { -webkit-animation-duration: 1.5s; -webkit-animation-delay: 1.2s; animation-duration: 1.5s; animation-delay: 1.2s; } /* about-page */ .border-title { -webkit-animation-duration: 1.5s; -webkit-animation-delay: 0s; animation-duration: 1.5s; animation-delay: 0s; } .about-box { -webkit-animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-duration: 1.5s; animation-delay: 0.3s; } .group-links DIV:nth-child(1) { -webkit-animation-duration: 2s; -webkit-animation-delay: 0.6s; animation-duration: 2s; animation-delay: 0.6s; } .group-links DIV:nth-child(2) { -webkit-animation-duration: 2s; -webkit-animation-delay: 0.9s; animation-duration: 2s; animation-delay: 0.9s; } .group-links DIV:nth-child(3) { -webkit-animation-duration: 2s; -webkit-animation-delay: 1.2s; animation-duration: 2s; animation-delay: 1.2s; } /* portfolio-page */ .portfolio-par { -webkit-animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-duration: 1.5s; animation-delay: 0.3s; } .portfolio-slider .box div:nth-child(1) { -webkit-animation-duration: 1.7s; -webkit-animation-delay: 0.6s; animation-duration: 1.7s; animation-delay: 0.6s; } .portfolio-slider .box div:nth-child(2) { -webkit-animation-duration: 1.7s; -webkit-animation-delay: 0.7s; animation-duration: 1.7s; animation-delay: 0.7s; } .portfolio-slider .box div:nth-child(3) { -webkit-animation-duration: 1.7s; -webkit-animation-delay: 0.8s; animation-duration: 1.7s; animation-delay: 0.8s; } .portfolio-slider .box div:nth-child(4) { -webkit-animation-duration: 1.7s; -webkit-animation-delay: 0.9s; animation-duration: 1.7s; animation-delay: 0.9s; } .portfolio-slider .box div:nth-child(5) { -webkit-animation-duration: 1.7s; -webkit-animation-delay: 1s; animation-duration: 1.7s; animation-delay: 1s; } .portfolio-slider .box div:nth-child(6) { -webkit-animation-duration:1.7s; -webkit-animation-delay: 1.1s; animation-duration: 1.7s; animation-delay: 1.1s; } .portfolio-slider .box div:nth-child(7) { -webkit-animation-duration: 1.7s; -webkit-animation-delay: 1.2s; animation-duration: 1.7s; animation-delay: 1.2s; } .portfolio-slider .box div:nth-child(8) { -webkit-animation-duration: 1.7s; -webkit-animation-delay: 1.3s; animation-duration: 1.7s; animation-delay: 1.3s; } .portfolio-slider .box div:nth-child(9) { -webkit-animation-duration: 1.7s; -webkit-animation-delay: 1.4s; animation-duration: 1.7s; animation-delay: 1.4s; } .portfolio-slider .box div:nth-child(10) { -webkit-animation-duration: 1.7s; -webkit-animation-delay: 1.5s; animation-duration: 1.7s; animation-delay: 1.5s; } /* blog-page */ .blog-slider .box:nth-child(1) { -webkit-animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-duration: 1.5s; animation-delay: 0.3s; } .blog-slider .box:nth-child(2) { -webkit-animation-duration: 1.7s; -webkit-animation-delay: 0.6s; animation-duration: 1.7s; animation-delay: 0.6s; } .blog-slider .box:nth-child(3) { -webkit-animation-duration: 1.7s; -webkit-animation-delay: 0.9s; animation-duration: 1.7s; animation-delay: 0.9s; } /* contact-page */ .contact-par { -webkit-animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-duration: 1.5s; animation-delay: 0.3s; } .map-area { -webkit-animation-duration: 2s; -webkit-animation-delay: 0.6s; animation-duration: 2s; animation-delay: 0.6s; } .contact-box .box:nth-child(1) { -webkit-animation-duration: 1.5s; -webkit-animation-delay: 0.9s; animation-duration: 1.5s; animation-delay: 0.9s; } .contact-box .box:nth-child(2) { -webkit-animation-duration: 1.5s; -webkit-animation-delay: 1.2s; animation-duration: 1.5s; animation-delay: 1.2s; } .contact-box .box:nth-child(3) { -webkit-animation-duration: 1.5s; -webkit-animation-delay: 1.5s; animation-duration: 1.5s; animation-delay: 1.5s; } .write-letter-btn { -webkit-animation-duration: 1.5s; -webkit-animation-delay: 1.7s; animation-duration: 1.5s; animation-delay: 1.7s; } /* dots */ .portfolio-slider .slick-dots LI { opacity: 0; } .portfolio-slider .slick-dots LI.animated { opacity: 1; } .portfolio-slider .slick-dots LI:nth-child(1) { -webkit-animation-duration: 1s; -webkit-animation-delay: 1.8s; animation-duration: 1s; animation-delay: 1.8s; } .portfolio-slider .slick-dots LI:nth-child(2) { -webkit-animation-duration: 1s; -webkit-animation-delay: 2.1s; animation-duration: 1s; animation-delay: 2.1s; } .blog-slider .slick-dots LI { opacity: 0; } .blog-slider .slick-dots LI.animated { opacity: 1; } .blog-slider .slick-dots LI:nth-child(1) { -webkit-animation-duration: 1s; -webkit-animation-delay: 1.3s; animation-duration: 1s; animation-delay: 1.3s; } .blog-slider .slick-dots LI:nth-child(2) { -webkit-animation-duration: 1s; -webkit-animation-delay: 1.6s; animation-duration: 1s; animation-delay: 1.6s; } @media screen and (max-height: 860px) { .logo { margin: 0 0 60px; } .portfolio-page .border-title { margin-bottom: 50px; } .blog-page .border-title { margin-bottom: 50px; } .contact-page .border-title { margin-bottom: 50px; } .portfolio-slider { padding: 40px 0 50px; } .map-area { padding: 30px 0 50px; } }