/* Name: Phase Type: Under Construction Template Author: Kmmrafi Version: 1.0 */ /*==================================================== Table of Contents 01. Generel Styles +Generate Google Fonts +Essential Styles +Buttons +Floats +Overlays +Borders 02. Responsive Grid +Columns +Box Sizes 03. Section Titles 04. Font Styles +Font Classes +Font Positions +Font Weight +Font Transformation +Font Colors +Font Sizes 05. Loading Screen +Loader Container +Loader Logo +Loader Logo +After Loading +JavaScript Off 06. Backgrounds +Solid Backgrounds +Gradient Backgrounds +Image Backgrounds +Animated Backgrounds +Other Backgrounds 07. Navigations 08. Homepage +Splitted Halfs +Contents Over Background +Logo Styles +Homepage Titles +Homepage Social Links +Separators +Countdown Styles 09. Sliders 10. About 11. Skills 12. Subscribe 13. Quotes 14. Services 15. Works 16. Team 17. Contact 18. Clients 19. Map 20. Footer +Extra Footer 21. Responsive +Resolution Under 1275px +Resolution Under 1125px +Resolution Under 1000px +Resolution Under 900px +Resolution Under 650px +Resolution Under 530px +Resolution Under 400px +Resolution Under 320px * This is the compressed version. Purchase the template to get the uncompressed and organized file. * ====================================================*/ @import "https://fonts.googleapis.com/css?family=Raleway:800,700,600,400,300,200,100";@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:900,800,700,600,400,300,200,100";@import "https://fonts.googleapis.com/css?family=Roboto:400,900";*{margin:0;padding:0}::selection{background-color:#ececec}html,body{width:100%;height:100%;padding:0;margin-left:0;margin-right:0;font-family:'Source Sans Pro',sans-serif;-webkit-font-smoothing:antialiased;text-align:center;font-size:1em}body{overflow-x:hidden}.container{margin:0 auto;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow:hidden;width:100%;height:auto;text-align:center;float:none}img{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}a{color:#e5e5e5;text-decoration:none;outline:none}a:hover,a:active,a:focus{text-decoration:none;outline:none;color:#505050}a i:hover,a i:active,a i:focus{text-decoration:none;outline:none;color:#FFD700}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:'Raleway',sans-serif;font-weight:100}p{margin:0 0 5px;font-family:'Source Sans Pro',sans-serif}.clear{clear:both}ol,ul{list-style:none;padding:0}.no-padding{padding:0!important}.no-margin{margin:0!important}.button{position:relative;z-index:5;background:transparent;cursor:pointer;width:150px;height:50px}.button:hover{border:1px solid #FFD700;background:#FFD700;color:#8c8c8c}.float-l{float:left!important}.float-r{float:right!important}.pattern-black:after,.pattern-white:after{content:'';width:100%;height:100%;top:0;left:0;position:absolute;z-index:2}.pattern-black:after{background:url(../img/pattern-1.png) repeat}.pattern-white:after{background:url(../img/pattern-2.png) repeat}.over-dark{background:url(../img/pattern-1.png) repeat}.over-white{background:url(../img/pattern-2.png) repeat}.over-img{background:url(../img/bg-01.jpg) repeat}.over-img-2{background:url(../img/bg-02.jpg) repeat}.over-img-3{background:url(../img/bg-03.jpg) repeat}.over-solid{background:#353535}.box-overlay{background-size:cover;background-position:50% 50%;background-attachment:fixed!important;background-repeat:repeat;position:absolute;top:0;left:0;width:100%;height:100%;line-height:300px;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s}.gray-border{border:1px solid #505050}.white-border{border:1px solid #e5e5e5}.colored-border{border:1px solid #FFD700}.gray-border-left{border-left:1px solid #505050;margin:10px}.gray-border-right{border-right:1px solid #505050;padding-right:10px;margin-right:10px}.col-container{width:100%;box-sizing:border-box;float:left}.row:before,.row:after{content:"";display:table;clear:both}.col-1{max-width:8.333%;width:8.333%!important;height:auto}.col-2{max-width:16.666%;width:16.666%!important;height:auto}.col-3{max-width:25%;width:25%!important;height:auto}.col-4{max-width:33.333%;width:33.333%!important;height:auto}.col-5{max-width:41.666%;width:41.666%!important;height:auto}.col-6{max-width:50%;width:50%!important;height:auto}.col-7{max-width:58.333%;width:58.333%!important;height:auto}.col-8{max-width:66.666%;width:66.666%!important;height:auto}.col-9{max-width:75%;width:75%!important;height:auto}.col-10{max-width:83.333%;width:83.333%!important;height:auto}.col-11{max-width:91.666%;width:91.666%!important;height:auto}.col-12{max-width:100%;width:100%!important;height:auto}.box-small{height:150px}.box{height:300px}.box-auto{min-height:100%}.box-small,.box,.box-big,.box-auto{z-index:99;position:relative;text-align:center;width:100%;overflow:hidden}.section-title{position:relative;padding:0 0 50px 12%;color:#212121;font-weight:400;word-spacing:5px;font-size:18px;letter-spacing:.34em}.section-content{padding:0 12%}.box-over-title{position:relative;letter-spacing:3px;word-spacing:3px;z-index:99}.raleway{font-family:'Raleway',sans-serif}.source-sans{font-family:'Source Sans Pro',sans-serif}.numbers{font-family:'Roboto',sans-serif}.t-left{text-align:left!important}.t-center{text-align:center!important}.t-right{text-align:right!important}.ultrabold{font-weight:900}.extrabold{font-weight:800}.bold{font-weight:700}.semibold{font-weight:600}.normal{font-weight:400}.light{font-weight:300}.lighter{font-weight:100}.italic{font-style:italic}.uppercase{text-transform:uppercase}.dark{color:#353535}.white{color:#e5e5e5}.gray1{color:#a8a7a7}.gray2{color:#505050}.colored{color:#FFD700}.f-small{font-size:14px}.f-normal{font-size:1em}.f-semi-expanded{font-size:1.5em}.f-medium{font-size:28px}.f-expanded{font-size:2.5em}.f-big{font-size:3em}.f-large{font-size:3.5em}.f-extra-expanded{font-size:4em}#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;overflow:hidden}#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:100%;border:1px solid transparent;border-top-color:#FFD700;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001;overflow:hidden}.loader-img img{display:block;position:absolute;left:46%;bottom:45%;width:80px;height:auto;z-index:1002}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:100%;border:1px solid transparent;border-top-color:#e5e5e5;overflow:hidden;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:100%;border:1px solid transparent;border-top-color:#a8a7a7;overflow:hidden;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}#loader-wrapper .loader-section{position:fixed;top:0;width:50%;height:100%;overflow:hidden;background-color:rgba(0,0,0,0.9);background:rgba(0,0,0,0.9);color:rgba(0,0,0,0.9);z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#loader-wrapper .loader-section.section-left{left:0}#loader-wrapper .loader-section.section-right{right:0}.loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)}.loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)}.loaded #loader{opacity:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all .3s 1s ease-out;transition:all .3s 1s ease-out}.white-bg{background-color:#e5e5e5!important}.gray-bg{background-color:#505050!important}.dark-bg{background-color:#353535!important}.colored-bg{background-color:#FFD700}.gradient-bg{background:-moz-linear-gradient(17% 81% 67deg,#E4A4B8,#86FFF4 90%);background:-webkit-gradient(linear,91% 91%,20% 0%,from(#B869A4),to(#6DC7A5))}.image-bg{background:url(../img/bg-01.jpg)}.image-bg-2{background:url(../img/bg-04.jpg)}.image-bg-3{background:url(../img/bg-05.png)}.image-bg,.image-bg-2,.image-bg-3{width:100%;height:100vh;background-size:cover;display:block;position:relative;overflow:hidden;background-repeat:no-repeat;background-attachment:fixed;background-position:center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;z-index:1}.transparent{background:transparent!important}.pattern-bg{background:url(../img/pattern.jpg)}.panel{position:fixed;left:-100%;width:100%}#menu{background:rgba(0,0,0,0.8);z-index:998}#menu ul{position:absolute;top:50%;left:43%;-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}#menu li{text-align:center;transition:all .4s ease;margin:25% 0}#menu li a{color:#fff;font-size:25px;text-decoration:none;font-weight:400;text-transform:uppercase;letter-spacing:5px;padding:5px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}#menu li a:hover{background:#FFD700;color:#353535}.menu-link{transform:scale(0.5);z-index:999;display:block;position:fixed;top:0;left:0;overflow:hidden;margin:0;padding:0;width:80px;height:80px;font-size:0;text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border-radius:none;border:none;cursor:pointer;-webkit-transition:background .3s;transition:background .3s;background-color:transparent}.menu-link:focus{outline:none}.menu-link span{display:block;position:absolute;top:36px;left:18px;right:18px;height:6px;border-radius:2px;background:#fff;-webkit-transition:background 0 .3s;transition:background 0 .3s}.menu-link span::before,.menu-link span::after{position:absolute;display:block;left:0;width:100%;height:6px;border-radius:2px;background-color:#fff;content:"";-webkit-transition-duration:0.3s,.3s;transition-duration:0.3s,.3s;-webkit-transition-delay:0.3s,0;transition-delay:0.3s,0}.menu-link span::before{top:-15px;-webkit-transition-property:top,-webkit-transform;transition-property:top,transform}.menu-link span::after{bottom:-15px;-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,transform}.menu-open{background-color:transparent}.menu-open span{background:none}.menu-open span::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.menu-open span::after{bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.menu-open span::before,.menu-open span::after{-webkit-transition-delay:0,.3s;transition-delay:0,.3s}.left-half{width:50%;position:fixed;left:0;top:0;height:100vh;z-index:1}.right-half{width:50%;position:absolute;right:0;top:0;height:100%;z-index:1}.content{position:absolute;top:50%;left:10%;-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);z-index:99}.logo img{display:block;max-width:80px;height:auto;padding:10px;margin-top:10%;margin-bottom:5%}.title{display:block;padding:10px;float:left;letter-spacing:3px;word-spacing:3px}.semi-title{margin-left:15px;margin-bottom:15px;line-height:22px;word-spacing:2.5px}.social-links{margin-left:15px}.social-links a i{margin-right:20px;margin-top:10px}.separator{height:1.5px;background:#FFD700 none repeat;margin:22% 15px}.separator-small{height:1px;background:#505050 none repeat;margin-top:30px}.styled{margin-left:15px}.styled div{display:inline-block;margin-right:35px;font-size:2em}.styled div span{display:block;font-size:14px;font-weight:400;text-align:center;text-transform:uppercase;font-family:Raleway;color:#A8A7A7}.rslides{position:relative;list-style:none;overflow:hidden;width:100%;height:100vh;padding:0;margin:0}.rslides li{-webkit-backface-visibility:hidden;position:absolute;display:none;width:100%;height:100%;left:0;top:0}.rslides li:first-child{position:relative;display:block;float:left}.rslides img{display:block;float:left;width:100%;height:100vh;border:0}#about{position:relative;padding-top:100px;padding-bottom:100px;background:#fff}#about .quote{line-height:50px;margin-top:38px;font-weight:400}#about .section-content p{line-height:25px;margin-top:25px}#skills{position:relative;padding-top:100px;padding-bottom:100px;background:#f5f5f5}#skills .section-content{margin-top:50px}.skillbar{position:relative;display:block;margin-bottom:90px;width:100%;height:1px;-webkit-transition:.4s linear;-moz-transition:.4s linear;-ms-transition:.4s linear;-o-transition:.4s linear;transition:.4s linear}.skillbar-title{position:absolute;bottom:10px;left:8px;width:auto}.skillbar-title span{letter-spacing:1px;word-spacing:3px;width:100%:}.skillbar-bar{height:1px;width:0}.skill-bar-percent{position:absolute;right:10px;top:0;font-size:11px;height:1px;line-height:1px}#subscribe{z-index:-1;overflow:hidden;width:100%;height:300px;line-height:300px}#subscribe:hover .box-overlay,#subscribe:hover .box-overlay-white{opacity:0;transform:rotate(0deg) scale(1) translate(100%);-webkit-transform:rotate(0deg) scale(1) translate(100%);-moz-transform:rotate(0deg) scale(1) translate(100%);-o-transform:rotate(0deg) scale(1) translate(100%);-ms-transform:rotate(0deg) scale(1) translate(100%)}.subscribe-form{position:relative;z-index:3}.form-control{padding-bottom:7px;transition:none;background:transparent;border:none;border-bottom:1px solid #353535;color:#A8A7A7;font-size:.8em;font-weight:400;text-align:left;width:240px;margin-right:20px}#the-quote,.rslides-quotes{width:100%;height:350px;line-height:350px;z-index:100;overflow:hidden;z-index:95}.quote{word-spacing:3px;z-index:999}.quote i{transform:scale(7);opacity:.1}#services{position:relative;padding-top:100px;padding-bottom:100px;background:#fff}#services .section-content{margin-top:30px}.focus{margin-top:85px;line-height:25px}.focus:hover i{background:transparent;transform:scale(1.2)}.focus i{margin-bottom:15px;background:#FFD700;width:50px;height:50px;line-height:50px;text-align:center;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}.focus span{letter-spacing:4px;word-spacing:6px}#works{position:relative;padding-top:100px;padding-bottom:100px;background:#f5f5f5}#works .section-content{margin-top:30px}.work li{display:inline-block;opacity:.8;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s}.work li:hover{opacity:1}.work img{background:transparent;width:150px;display:inline-block}#team{position:relative;height:auto;padding-top:100px;background:#fff}#team .section-title{margin-bottom:30px}.member img{width:100%;height:auto}.member .member-links{opacity:0;z-index:5;position:absolute;top:-100%;left:0;width:100%;transform:scale(2);-webkit-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2)}.member:hover .member-links{opacity:1;position:absolute;top:30px;transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1)}.member-links a i{margin-left:20px}.member .name{width:100%;position:absolute;bottom:30px;left:0}.member .separator-small{background:#ccc none repeat;position:absolute;top:50%;left:46%;width:100%;height:1px}#team .member-links{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.member:hover .box-overlay{opacity:0;transform:rotate(0deg) scale(1) translate(100%);-webkit-transform:rotate(0deg) scale(1) translate(100%);-moz-transform:rotate(0deg) scale(1) translate(100%);-o-transform:rotate(0deg) scale(1) translate(100%);-ms-transform:rotate(0deg) scale(1) translate(100%);-webkit-transition-delay:0;-moz-transition-delay:0;-o-transition-delay:0;transition-delay:0}#contact{position:relative;padding-top:100px;padding-bottom:100px;background:#fff}#contact .section-content{margin-top:30px}#contact form input,form textarea{-moz-box-sizing:border-box;box-sizing:border-box;padding-bottom:10px;margin-bottom:50px;transition:none;background:transparent;width:100%;border:none;border-bottom:1px solid #E9E9E9;font-size:1em;font-weight:400;word-spacing:2.5px;text-align:left;word-spacing:2.5px;color:#353535}#message{font-family:'Source Sans Pro',sans-serif;height:100px}#contact-form{text-align:left}#contact-form p span{display:block;letter-spacing:2px;text-transform:uppercase}::-webkit-input-placeholder{color:#999}#contact-form label{cursor:text;display:block;margin:0;position:relative;top:0;width:100%}:-moz-placeholder{color:#999}::-moz-placeholder{color:#999}:-ms-input-placeholder{color:#999}#contact-form .error{bottom:12px;font-family:inherit;font-size:12px;font-weight:400;left:auto;font-style:italic;letter-spacing:0;position:absolute;right:20px;text-transform:capitalize;width:auto}.response h3{letter-spacing:2px;margin:10px 0 25px;text-transform:uppercase}#clients{position:relative;z-index:4;padding-top:100px;padding-bottom:100px;background:#f5f5f5}#clients-carousel .item img{display:block;width:150px;height:auto;margin:0 auto;opacity:.8;z-index:9;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}#clients-carousel .item img:hover{opacity:1;transform:scale(1.05);-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);-ms-transform:scale(1.05)}#map{background:transparent}.map{letter-spacing:5px;margin-bottom:10px}#map_canvas{height:300px;width:100%;opacity:.9;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s}#map_canvas:hover{opacity:1}#footer-content{position:relative;z-index:4}#footer-content .main{width:100%;height:150px;line-height:150px;position:absolute;top:0;left:100%;letter-spacing:1px;opacity:0;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s}#footer-content:hover .main{opacity:1;position:absolute;left:0}.foot .box-overlay{line-height:150px;position:absolute;top:0;left:0;width:100%}.foot:hover .box-overlay{opacity:1;width:10%}.love p{background:transparent;width:100%;height:150px;line-height:150px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}.love:hover p{opacity:0;transform:scale(0.1);-webkit-transform:scale(0.1);-moz-transform:scale(0.1);-o-transform:scale(0.1);-ms-transform:scale(0.1)}.love:hover .love-big{opacity:1;transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1)}.love-big{background:transparent;width:100%;height:150px;line-height:150px;position:absolute;top:0;left:0;transform:scale(0.1);-webkit-transform:scale(0.1);-moz-transform:scale(0.1);-o-transform:scale(0.1);-ms-transform:scale(0.1);opacity:0;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}@media all and (max-width: 1275px){.col-4{max-width:50%;width:50%!important}}@media all and (max-width: 1125px){.col-5,.col-6,.col-7,.col-8{max-width:100%;width:100%!important;overflow:hidden}.rslides{height:auto}}@media all and (max-width: 1000px){.col-4{max-width:100%;width:100%!important}}@media all and (max-width: 900px){.left-half{width:100%;height:100vh;position:absolute;display:block;z-index:2;overflow:hidden}.right-half{width:100%;position:absolute;top:100%;left:0;height:auto;display:block;overflow:hidden}.col-1 .col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8{max-width:50%;width:50%!important;overflow:hidden}#menu ul{left:38%}.rslides img{height:auto}.menu-link{background:url(../img/pattern-1.png) repeat}}@media all and (max-width: 650px){.col-1 .col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8{max-width:100%;width:100%!important}#menu ul{left:34%}#home .rslides img{width:auto}}@media all and (max-width: 530px){#menu ul{left:30%}.form-inline .button{position:absolute;top:60%;left:40%}.loader-img img{left:40%}}@media all and (max-width: 400px){.content{left:2%}.f-medium{font-size:1.8em}.f-expanded{font-size:2em}.f-big{font-size:2.5em}#menu ul{left:25%}.styled div{margin-right:25px;font-size:1.7em}.styled div span{font-size:11px}}@media all and (max-width: 320px){.content{left:0}.f-medium{font-size:1.6em}.loader-img img{left:35%}} #bg{ width: 200%; } #preview-img:hover .box-overlay{ display: none; } .prev img{ transform: scale(0.8); -moz-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); } .prev span{ border: 2px solid #FFD700; padding: 15px; }