/* ------------------------------------------------------------------------------ Typography
*/
@import url(http://fonts.googleapis.com/css?family=Open%20Sans:300,400,500,600,700); p { font-size: 14px; line-height: 22.4px; color: #6c7279; } h1 { font-size: 65px; color: #2d3033; } h2 { font-size: 40px; color: #2d3033; } h3 { font-size: 28px; color: #2d3033; font-weight: 300; } h4 { font-size: 22px; color: #2d3033; font-weight: 400;
} h5 { font-size: 14px; color: #2d3033;
font-weight: 700; } .btn { background-color: #3bc492; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 5px; border: 0; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; display: inline-block; text-transform: uppercase; } .btn:hover, .btn:focus { background-color: #3d3d3d; color: #fff; } .btn-large { padding: 15px 40px; } /* ------------------------------------------------------------------------------ Global Styles
*/
a { color: #e84545; } a:hover, a:focus { text-decoration: none; -moz-transition: background-color, color, 0.3s; -o-transition: background-color, color, 0.3s; -webkit-transition: background-color, color, 0.3s; transition: background-color, color, 0.3s; } body { font-family: "Open Sans"; font-weight: 400; color: #fff; } ul, ol { margin: 0; padding: 0; } ul li { list-style: none; } .section { padding: 50px 0; } .no-padding { padding: 0; } .no-gutter [class*=col-] { padding-right: 0; padding-left: 0; } .copyrights{ text-indent:-9999px; height:0; line-height:0; font-size:0; overflow:hidden; } /* ------------------------------------------------------------------------------ Header
*/
- header {
position: fixed; width: 100%; z-index: 999; }
- header .header-content {
margin: 0 auto; padding: 60px 10%; width: 100%; -moz-transition: padding 0.3s; -o-transition: padding 0.3s; -webkit-transition: padding 0.3s; transition: padding 0.3s; }
- header .logo {
float: left; }
- header.fixed {
background-color: rgba(255, 255, 255, 1); }
- header.fixed .header-content {
border-bottom: 0; padding: 25px 10%; }
- header.fixed .nav-toggle {
top: 18px; } .navigation.open { opacity: 0.9; visibility: visible; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .navigation { float: right; } .navigation li { display: inline-block; } .navigation a { color: rgba(0, 0, 0, 1); font-size: 19px; font-weight: 700; margin-left: 40px; letter-spacing: -1px;
} .navigation a:hover, .navigation a.active { color: #000; } .nav-toggle { display: none; height: 44px; overflow: hidden; position: fixed; right: 5%; text-indent: 100%; top: 32px; white-space: nowrap; width: 44px; z-index: 99999; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .nav-toggle:before, .nav-toggle:after { border-radius: 50%; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; -moz-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -webkit-transition-property: -webkit-transform; transition-property: transform; } .nav-toggle:before { background-color: #e84545; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .nav-toggle:after { background-color: #e84545; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transition-duration: 0s; -o-transition-duration: 0s; -webkit-transition-duration: 0s; transition-duration: 0s; } .nav-toggle span { background-color: #fff; bottom: auto; display: inline-block; height: 3px; left: 50%; position: absolute; right: auto; top: 50%; width: 18px; z-index: 10; -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .nav-toggle span:before, .nav-toggle span:after { background-color: #fff; content: ""; height: 100%; position: absolute; right: 0; top: 0; width: 100%; -moz-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transition: -moz-transform 0.3s; -o-transition: -o-transform 0.3s; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .nav-toggle span:before { -moz-transform: translateY(-6px) rotate(0deg); -ms-transform: translateY(-6px) rotate(0deg); -webkit-transform: translateY(-6px) rotate(0deg); transform: translateY(-6px) rotate(0deg); } .nav-toggle span:after { -moz-transform: translateY(6px) rotate(0deg); -ms-transform: translateY(6px) rotate(0deg); -webkit-transform: translateY(6px) rotate(0deg); transform: translateY(6px) rotate(0deg); } .nav-toggle.close-nav:before { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } .nav-toggle.close-nav:after { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .nav-toggle.close-nav span { background-color: rgba(255, 255, 255, 0); } .nav-toggle.close-nav span:before, .nav-toggle.close-nav span:after { background-color: #fff; } .nav-toggle.close-nav span:before { -moz-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); -webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); } .nav-toggle.close-nav span:after { -moz-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); -webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); }
/* ------------------------------------------------------------------------------ Banner Slider
*/
.banner { background-color: #fff; position: relative; text-align: left;
} .banner blockquote { border: 0; margin: 0; padding: 12% 10% 8% 10%;
} .banner h1 {
color: #ff2238; font: 36px "Open Sans"; font-weight: 300; } .banner p {
color: #000; display: block; font-size: 45px; font-style: normal; letter-spacing: -3px; font-weight: 700;
}
/* ------------------------------------------------------------------------------ Works
*/
.work {
-moz-box-shadow: 0 0 0 1px #fff; -webkit-box-shadow: 0 0 0 1px #fff; box-shadow: 0 0 0 1px #fff;
overflow: hidden; position: relative; } .work img {
width:100%; height:100%;
} .work .overlay { background: rgba(232, 83, 79, 0.9); height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; -moz-transition: opacity, 0.3s; -o-transition: opacity, 0.3s; -webkit-transition: opacity, 0.3s; transition: opacity, 0.3s; } .work .overlay-caption { position: absolute; text-align: center; top: 50%; width: 100%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .work h5, .work p, .work img { -moz-transition: all, 0.5s; -o-transition: all, 0.5s; -webkit-transition: all, 0.5s; transition: all, 0.5s; } .work h5, .work p { color: #fff; margin: 0; opacity: 0; } .work h5 { margin-bottom: 5px; -moz-transform: translate3d(0, -200%, 0); -ms-transform: translate3d(0, -200%, 0); -webkit-transform: translate3d(0, -200%, 0); transform: translate3d(0, -200%, 0); } .work p { -moz-transform: translate3d(0, 200%, 0); -ms-transform: translate3d(0, 200%, 0); -webkit-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); }
.work-box:hover img {
-moz-transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); }
.work-box:hover .overlay {
opacity: 1; } .work-box:hover .overlay h5, .work-box:hover .overlay p { opacity: 1; -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.flex-control-paging li a { background: rgba(255, 255, 255, 0) none repeat scroll 0 0; }
.flex-control-paging li a.flex-active { background: rgba(255, 255, 255, 0) none repeat scroll 0 0; }
/* ------------------------------------------------------------------------------ Work animation
*/
.work:nth-child(1) {
-moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.work:nth-child(2) {
-moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.work:nth-child(3) {
-moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.work:nth-child(4) {
-moz-animation-delay: 0.4s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.work:nth-child(5) {
-moz-animation-delay: 0.8s; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.work:nth-child(6) {
-moz-animation-delay: 0.7s; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.work:nth-child(7) {
-moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.work:nth-child(8) {
-moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.animated {
visibility: visible; }
/* ------------------------------------------------------------------------------
Footer
*/
.footer { text-align: center; } .footer p { font-family: "Open Sans"; font-size: 12px; color: #000; text-transform: uppercase; } .footer a { color: #7f7f7f; } .footer a:hover { color: #e84545; } .footer .footer-share { margin-top: 0; } .footer .footer-share li { background: #000 none repeat scroll 0 0; border-radius: 50%; color: #ffffff; width: 26px; height: 26px; border-radius: 50%; padding: 4px 0; margin: 0 5px; display: inline-block; float: none; } .footer .footer-share a { color: #fff; } .footer .fa-heart { color: #e84545; font-size: 11px; margin: 0 2px; }
/* ==========================================================================
$Bio
========================================================================== */
.bio h4 {
font-size:30px;
font-weight: 700; } .bio h5 { color: #e84545; font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.bio p { font-size:17px; font-weight:400; line-height:27px; }
/* ------------------------------------------------------------------------------ Contact form
*/
.conForm input { background:#fafafa; color:#797979; padding:15px 30px; border:none; margin-right:3%; margin-bottom:30px; outline:none; font-style:normal; border:#f4f3f3 1px solid; font-size:15px; } .conForm input.noMarr { margin-right:0px; } .conForm textarea { background:#fafafa; color:#797979; padding:15px 30px; margin-bottom:18px; outline:none; height:300px; font-style:normal; resize:none; font-size:15px; border:#f4f3f3 1px solid; }
.conForm .submitBnt {
background:#3bc492;
color: #fff;
padding: 15px 40px;
font-size: 13px;
font-weight: 600;
letter-spacing: 5px;
border: 0;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
display: inline-block;
text-transform: uppercase;
}
.conForm .submitBnt:hover {
background:#3d3d3d;
color:#fff;
}
.error_message {
color: #ff675f; font-weight: 500; padding-bottom: 15px;
}
- success_page h3 {
color: #5ed07b; font-size: 17px; font-weight: 700;
}