/* ===================================
clean - One Page Responsive Template
====================================== */
/* ===================================
PRELOADER
====================================== */
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fefefe;
z-index: 99999;
height: 100%;
width: 100%;
overflow: hidden !important;
}
.status {
width: 128px;
height: 128px;
position: absolute;
left: 50%;
top: 50%;
background-image: url(../images/preloader.gif);
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
margin: -70px 0 0 -70px;
}
/* ===================================
GENERAL
====================================== */
body {
position: relative;
}
html{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
textarea:focus,
input:focus{
outline: none;
}
img{
max-width: 100%;
}
ul{
padding: 0;
list-style: none;
margin-bottom: 0;
}
header.clean-page-header{
-webkit-background-size: cover;
height: 330px;
background-size: cover;
position: relative;
}
.clean-page-title{
position: relative;
z-index: 1;
}
/* ===================================
BACKGROUND COLOR
====================================== */
.background-one {
background-color: #ffffff;
}
.background-two {
background-color: #f1f1f1;
}
/* ===================================
TYPOGRAPHY
====================================== */
h1,h2,h3,h4,h5,h6{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
line-height: 1.2;
margin-top: 0;
margin-bottom: 15px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
h1{
font-size: 36px;
}
h2{
font-size: 30px;
}
h3{
font-size: 24px;
}
h4{
font-size: 18px;
}
h5{
font-size: 16px;
}
h5{
font-size: 14px;
}
a,p,li,input,textarea{
font-family: 'Raleway', sans-serif;
font-weight: 400;
color: #818181;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
a{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
a:hover,
a:focus,
a:active{
outline: 0;
text-decoration: none;
border: 0;
}
.clean-page-title h1{
font-size: 36px;
font-weight: 700;
color: #ffffff;
margin: 0;
padding: 70px 0 0;
text-align: center;
}
/* ===================================
BUTTONS
====================================== */
.clean-button-solid{
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 700;
color: #ffffff;
text-align: center;
padding: 15px 30px;
display: inline-block;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-ms-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.clean-button-solid:hover{
color: #ffffff;
background-color: #de5c39;
}
.clean-button-outline{
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 700;
color: #ffffff;
text-align: center;
padding: 15px 30px;
display: inline-block;
background-color: transparent;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-ms-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.clean-button-outline-light{
border: 1px solid #ffffff;
}
.clean-button-outline-light:hover{
color: #ffffff;
border: 1px solid transparent;
}
.clean-button-outline-dark{
color: #28292e;
border: 1px solid #28292e;
}
.clean-button-outline-dark:hover{
color: #ffffff;
border: 1px solid transparent;
}
.clean-btn-round{
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 700;
padding: 15px 30px;
color: #ffffff;
text-align: center;
display: inline-block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-ms-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.clean-btn-round:hover{
color: #ffffff;
}
/* ===================================
ICON
====================================== */
.clean-blurb-icon-only{
margin-bottom: 50px;
text-align: center;
border: 2px solid transparent;
padding: 20px;
}
.clean-blurb-icon-only:hover {
border-color: #333;
}
.clean-blurb-icon-only i{
width: 130px;
height: 130px;
margin: 0px auto 30px;
text-align: center;
line-height: 107px;
padding: 8px;
background: transparent url("../images/3.png") no-repeat scroll center center / 123px auto;
color: #F1F1F1 !important;
font-size: 45px;
}
.clean-blurb-icon-only i:hover{
background-color: #fff;
}
.clean-blurb-icon-only h3{
font-size: 16px;
margin-top: 25px;
margin-bottom: 15px;
}
.clean-blurb-icon-only p{
margin-bottom: 0;
}
.clean-blurb-round-icon .clean-icon{
width: 130px;
height: 130px;
margin: 0px auto 30px;
text-align: center;
line-height: 0;
padding: 8px;
background: transparent url("../images/3.png") no-repeat scroll center center / 123px auto;
}
.clean-blurb-round-icon .clean-icon i{
line-height: 100px;
font-size: 36px;
color: #dadada;
}
.clean-blurb-round-icon .clean-icon{
-webkit-transition: all .35s linear;
-moz-transition: all .35s linear;
-ms-transition: all .35s linear;
-o-transition: all .35s linear;
transition: all .35s linear;
}
.clean-blurb-round-icon:hover .clean-icon{
border: 1px solid rgba(0,0,0,0);
}
.clean-blurb-round-icon:hover .clean-icon i{
color: #ffffff;
}
.clean-blurb-round-icon h3{
text-align: center;
font-size: 18px;
color: #616161;
margin-top: 0;
margin-bottom: 15px;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.clean-blurb-round-icon p{
margin-bottom: 0;
text-align: center;
}
.clean-icones{
overflow: hidden;
padding: 20px;
}
.clean-icones:last-child{
border-bottom: none;
}
.clean-icones .clean-icon{
width: 70px;
height: 70px;
margin: 0 auto;
text-align: center;
float: left;
margin-right: 30px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #dadada;
}
.clean-icones.clean-square-dark .clean-icon{
background-color: rgba(0,0,0,0.25);
}
.clean-icones .clean-icon i{
line-height: 70px;
font-size: 36px;
}
.clean-icones .clean-blurb-text{
float: left;
width: 260px;
}
.clean-icones .clean-blurb-text h3{
font-size: 16px;
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 15px;
position: relative;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.clean-icones .clean-blurb-text h3:after{
content: '';
width: 30px;
height: 2px;
background-color: #ffffff;
position: absolute;
bottom: 0;
left: 0;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.clean-line{
width: 100px;
height: 1px;
margin: 20px auto;
}
section {
background: url(../images/top.png) bottom center no-repeat,
url(../images/bottom.png) top center no-repeat;
background-size: 60px;
border-bottom: 3px solid #33302d;
border-top: 3px solid #33302d;
}
/* ===================================
SECTIONS
====================================== */
.clean-section-wrapper{
padding: 120px 0;
overflow: hidden;
}
.clean-section-header{
text-align: center;
margin-bottom: 120px;
}
.clean-section-header h1{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 30px;
color: #313131;
}
.clean-section-header h2{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 30px;
color: #313131;
}
.clean-section-header h1 span{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 30px;
}
.clean-section-header p{
font-family: 'Raleway', sans-serif;
}
/* Parallax Section*/
.clean-parallax-overlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.clean-section-header-parallax h1{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 30px;
}
.clean-section-header-parallax h1 span{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 30px;
}
.clean-section-header-parallax p{
font-family: 'Raleway', sans-serif;
}
/* ===================================
MENUS
====================================== */
.clean-main-menu{
background-color: #28292e;
background-color: transparent;
border: 0 none;
border-radius: 0;
position: fixed;
width: 100%;
padding: 15px 0;
margin-bottom: 0;
z-index: 10;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-ms-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
header.clean-page-header .clean-main-menu{
position: relative;
}
.clean-main-menu .navbar-brand{
padding: 30px 0;
}
.clean-main-menu .navbar-nav{
float: right;
padding: 30px 0;
}
.clean-main-menu .navbar-nav li a{
color: #333333;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
padding-top: 0;
padding-bottom: 0;
line-height: 30px !important;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.clean-main-menu .navbar-nav li a:hover,
.clean-main-menu .navbar-nav li.active a{
background-color: transparent;
}
.clean-main-menu .navbar-nav li a:focus{
background-color: transparent;
}
/* Minified Menu */
.clean-main-menu.minified{
background-color: #ffffff;
padding: 0;
position: fixed;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0), 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
}
header.clean-page-header .clean-main-menu.minified{
position: fixed;
}
/* ===================================
SLIDERS
====================================== */
.clean-slider{
overflow: hidden;
background-color: #28292e;
}
.clean-main-slides .clean-img-overlay{
position: absolute;
background-color: rgba(218, 218, 234, 0.42);
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.clean-main-slides h1.clean-slider-text-big{
font-size: 48px;
color: #ffffff;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 25px;
}
.clean-main-slides .clean-slider-text h1 span{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
.clean-main-slides p{
font-family: 'Raleway', sans-serif;
font-weight: 400;
font-size: 30px !important;
color: #ffffff;
margin-bottom: 0;
}
.sp-arrow {
width: 10px;
height: 100px !important;
}
.clean-slider .sp-buttons {
padding-top: 10px;
position: absolute;
text-align: center;
bottom: 20px;
}
.clean-slider .sp-button {
border: medium none;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 40px;
margin: 4px;
width: 40px;
background: transparent url("../images/3.png") no-repeat scroll center center / 20px auto;
}
/* ===================================
FEATURES
====================================== */
.clean-features-section .container{
position: relative;
z-index: 1;
}
.features-details {
padding: 0 !important;
}
.clean-features-section{
background-attachment: fixed;
-webkit-background-size: cover;
background-size: cover;
position: relative;
padding-bottom: 120px;
overflow: hidden;
}
/* ===================================
FEATURED WORK
====================================== */
.clean-portfolio-work-item{
height: 2120px;
position: relative;
}
.clean-portfolio-work-item img{
height: 100%;
}
.clean-portfolio-work-item .clean-port-work-details{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
.clean-portfolio-work-item .clean-work-meta{
position: absolute;
right: 0;
padding-right: 38%;
padding-top: 30%;
}
.clean-portfolio-work-item .clean-work-meta li{
width: 120px;
height: 120px;
margin-bottom: 1px;
text-align: center;
opacity: 0;
transform: scale(0);
transition: all 0.4s ease 0s;
border-radius: 50%;
}
.clean-portfolio-work-item:hover .clean-port-work-details .clean-work-meta li{
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.clean-port-work-details .clean-work-meta li a{
display: block;
}
.clean-port-work-details .clean-work-meta li a i{
font-size: 30px;
color: #FFF;
line-height: 75px;
}
.clean-port-work-details .clean-port-work-desc{
width: 100%;
position: absolute;
bottom: 0;
padding: 15px 0;
background-color: rgba(40,41,46,0.8);
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.clean-portfolio-work-item:hover .clean-port-work-desc{
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.clean-port-work-details .clean-port-work-desc h3{
font-size: 18px;
margin-top: 0;
margin-bottom: 5px;
}
.clean-port-work-details .clean-port-work-desc p a{
font-size: 14px;
color: #ffffff;
margin-top: 0;
margin-bottom: 0;
}
.clean-port-work-details .clean-port-work-desc .clean-like-btn {
text-align: center;
padding: 10px 15px;
}
.clean-port-work-details .clean-port-work-desc .clean-like-btn a{
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 400;
color: #ffffff;
}
.clean-port-work-details .clean-port-work-desc .clean-like-btn a i{
font-size: 21px;
color: #ffffff;
margin-right: 5px;
}
/* ===================================
OFFERS
====================================== */
.clean-offer-section{
padding-bottom: 30px;
}
/* ===================================
CUSTOM SECTION
====================================== */
.clean-custom-sec-text p{
margin-bottom: 20px;
}
.clean-custom-sec-text h3{
font-size: 18px;
color: #616161;
margin-top: 0px;
margin-bottom: 20px;
}
.clean-custom-sec-text ul{
margin-left: 30px;
}
.clean-custom-sec-text ul li{
margin-bottom: 10px;
}
.clean-custom-sec-text ul li:last-child{
margin-bottom: 0;
}
.clean-custom-sec-text ul li i{
font-size: 14px;
margin-right: 10px;
}
/* ===================================
TESTIMONIALS
====================================== */
.clean-testimonial-section{
position: relative;
padding: 120px 0;
overflow: hidden;
}
.clean-member-img-wrapper img {
border-radius: 50%;
margin-bottom: 20px;
}
.clean-testimonial-wrapper{
text-align: center;
position: relative;
z-index: 5;
}
.clean-testimonial-wrapper .comment-icon{
font-size: 24px;
text-align: center;
}
.clean-testimonial{
overflow: hidden;
}
.clean-testimonial p{
font-size: 16px;
margin-bottom: 20px;
}
.clean-testimonial p.clean-client-info{
font-size: 14px;
font-weight: 700;
margin-bottom: 0
}
/* ===================================
PRICING
====================================== */
.clean-pricing-section{
padding: 120px 0;
}
.clean-pricing-plans{
text-align: center;
padding: 30px 0;
background-color: #ffffff;
}
.clean-recommended-pricing{
background-color: #ffffff;
}
.recommended-titles {
padding: 15px 0;
}
.recommended-titles h2 {
color: #ffffff !important;
}
.clean-pricing-plans .recommended-titles p{
color: #ffffff !important;
}
.clean-pricing-plans .recommended-titles p span{
color: #ffffff !important;
}
.clean-pricing-plans .clean-pricing-titles{
margin-bottom: 40px;
text-align: center;
}
.clean-pricing-plans .clean-pricing-titles h2{
font-size: 24px;
font-weight: 700;
margin-bottom: 5px;
}
.clean-pricing-plans .clean-pricing-titles p{
font-size: 16px;
}
.clean-pricing-plans .clean-pricing-titles p span{
font-size: 30px;
font-weight: 300;
}
.clean-pricing-plans .clean-pricing-service-name{
margin-bottom: 20px;
}
.clean-pricing-plans ul li{
text-align: center;
padding: 10px 0;
}
.clean-pricing-plans ul li:last-child{
border-bottom: 0px solid;
}
.clean-pricing-plans a.clean-signup-btn{
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 700;
color: #ffffff;
padding: 15px 30px;
text-align: center;
display: inline-block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-ms-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.clean-pricing-plans a.clean-signup-btn:hover{
color: #ffffff;
background-color: #ff653d;
}
/* ===================================
CONTACT
====================================== */
#contact-form {
margin: 0 15%;
}
.clean-contact-section{
background: none;
background-size: cover;
position: relative;
padding: 120px 0;
overflow: hidden;
}
.clean-contact-section .clean-contact-address p{
color: #ffffff;
}
.clean-contact-section .clean-contact-address ul li{
margin-bottom: 25px;
font-size: 14px;
position: relative;
padding: 15px;
}
.clean-contact-section .clean-contact-address ul li:last-child{
margin-bottom: 0;
}
.clean-contact-section .clean-contact-address ul li i{
font-size: 50px;
line-height: 55px;
color: #ffffff;
}
.clean-contact-section .clean-contact-form .clean-input-fields{
margin-bottom: 20px;
}
.clean-contact-section .clean-contact-form .clean-input-fields label{
display: block;
font-size: 14px;
font-family: 'Raleway',sans-serif;
font-weight: 400;
margin-bottom: 10px;
}
.clean-contact-section .clean-contact-form .clean-input-fields input{
width: 100%;
height: 40px;
background-color: transparent;
border: 1px solid #999999;
padding-left: 15px;
padding-right: 15px;
}
.clean-contact-section .clean-contact-form .clean-input-fields textarea{
width: 100%;
background-color: transparent;
border: 1px solid #999999;
padding: 15px;
}
.clean-contact-section .clean-contact-form input[type='submit']{
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 700;
color: #ffffff;
padding: 15px 30px;
text-align: center;
display: inline-block;
outline: 0;
border: 0px solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all .35s;
-moz-transition: all .35s;
-ms-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
width: 100%;
}
.clean-contact-section .clean-contact-form .clean-input-fields input[type='submit']:hover{
color: #ffffff;
background-color: #de5c39;
}
/* ===================================
OWL PAGINATIONS
====================================== */
.owl-theme .owl-controls {
margin-top: 30px;
text-align: center;
}
.owl-theme .owl-controls .owl-page span {
background-color: transparent;
border-radius: 0px;
display: block;
height: 10px;
margin: 5px 5px;
opacity: 1;
width: 10px;
border-radius: 50%;
}
.owl-theme .owl-controls .owl-page.active span {
border: 1px solid rgba(0,0,0,0);
}
/* ===================================
FOOTER
====================================== */
footer{
background-color: #28292e;
padding: 60px;
overflow: hidden;
}
footer .clean-footer-content{
text-align: center;
}
footer .clean-footer-logo{
text-align: center;
margin-bottom: 20px;
}
footer p{
text-align: center;
color: #818181;
font-size: 11px;
text-transform: uppercase;
margin-bottom: 15px;
}
footer ul {
display: inline-block;
}
footer ul li{
float: left;
margin-right: 15px;
padding: 8px 10px;
width: 50px;
background: url("../images/3.png") center no-repeat;
background-size: 45px;
height: 50px;
line-height: 40px
}
footer ul li:last-child{
margin-right: 0;
}
footer ul li a{
font-size: 21px;
}
footer ul li a i{
font-size: 21px;
color: #818181;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}