@font-face {
font-family: 'icomoon'; src: url("../fonts/icomoon/icomoon.eot?srf3rx"); src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg"); font-weight: normal; font-style: normal;
} /* =======================================================
- Template Style
- ======================================================= */
body {
font-family: "Open Sans", Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7; color: #828282; background: #fff;
}
- page {
position: relative; overflow-x: hidden; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
} .offcanvas #page {
overflow: hidden; position: absolute;
} .offcanvas #page:after {
-webkit-transition: 2s; -o-transition: 2s; transition: 2s; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 101; background: rgba(0, 0, 0, 0.7); content: "";
}
a {
color: #F73859; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
} a:hover, a:active, a:focus {
color: #F73859; outline: none; text-decoration: none;
}
p {
margin-bottom: 20px;
}
h1, h2, h3, h4, h5, h6, figure {
color: #000; font-family: "Open Sans", Arial, sans-serif; font-weight: 400; margin: 0 0 20px 0;
}
- -webkit-selection {
color: #fff; background: #F73859;
}
- -moz-selection {
color: #fff; background: #F73859;
}
- selection {
color: #fff; background: #F73859;
} .copyrights{ text-indent:-9999px; height:0; line-height:0; font-size:0; overflow:hidden; } .fh5co-nav {
position: fixed; top: 0; margin: 0; padding: 0; width: 100%; padding: 25px 0; z-index: 1001; background: transparent; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
} @media screen and (max-width: 768px) {
.fh5co-nav { padding: 25px 0; }
} .fh5co-nav #fh5co-logo {
font-size: 24px; padding: 0; margin: 0; text-transform: uppercase; font-weight: bold;
} @media screen and (max-width: 768px) {
.fh5co-nav #fh5co-logo { margin-bottom: 0; }
} .fh5co-nav #fh5co-logo a > span {
color: #F73859;
} .fh5co-nav a {
padding: 5px 10px; color: #fff;
} @media screen and (max-width: 768px) {
.fh5co-nav .menu-1 { display: none; }
} .fh5co-nav ul {
padding: 0; margin: 7px 0 0 0;
} .fh5co-nav ul li {
padding: 0; margin: 0; list-style: none; display: inline;
} .fh5co-nav ul li a {
font-size: 16px; padding: 30px 10px; color: rgba(255, 255, 255, 0.5); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
} .fh5co-nav ul li a:hover, .fh5co-nav ul li a:focus, .fh5co-nav ul li a:active {
color: white;
} .fh5co-nav ul li.has-dropdown {
position: relative;
} .fh5co-nav ul li.has-dropdown .dropdown {
width: 130px; -webkit-box-shadow: 0px 8px 13px -9px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 8px 13px -9px rgba(0, 0, 0, 0.75); box-shadow: 0px 8px 13px -9px rgba(0, 0, 0, 0.75); z-index: 1002; visibility: hidden; opacity: 0; position: absolute; top: 40px; left: 0; text-align: left; background: #fff; padding: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -webkit-transition: 0s; -o-transition: 0s; transition: 0s;
} .fh5co-nav ul li.has-dropdown .dropdown:before {
bottom: 100%; left: 40px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #fff; border-width: 8px; margin-left: -8px;
} .fh5co-nav ul li.has-dropdown .dropdown li {
display: block; margin-bottom: 7px;
} .fh5co-nav ul li.has-dropdown .dropdown li:last-child {
margin-bottom: 0;
} .fh5co-nav ul li.has-dropdown .dropdown li a {
padding: 2px 0; display: block; color: #999999; line-height: 1.2; text-transform: none; font-size: 15px;
} .fh5co-nav ul li.has-dropdown .dropdown li a:hover {
color: #000;
} .fh5co-nav ul li.has-dropdown:hover a, .fh5co-nav ul li.has-dropdown:focus a {
color: #fff;
} .fh5co-nav ul li.btn-cta a {
color: #F73859;
} .fh5co-nav ul li.btn-cta a span {
background: #f35f55; color: #fff; padding: 4px 20px; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px;
} .fh5co-nav ul li.btn-cta a:hover span {
background: #f14034 !important; -webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75); box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
} .fh5co-nav ul li.active > a {
color: #fff; position: relative;
} .scrolled .fh5co-nav {
background: #fff; padding: 10px 0; -webkit-box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.15); box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.15);
} .scrolled .fh5co-nav a {
color: #000;
} .scrolled .fh5co-nav ul li a:hover, .scrolled .fh5co-nav ul li a:focus, .scrolled .fh5co-nav ul li a:active {
color: #F73859 !important;
} .scrolled .fh5co-nav ul li.active a {
color: #F73859;
} .scrolled .fh5co-nav ul li.has-dropdown:hover > a, .scrolled .fh5co-nav ul li.has-dropdown:focus > a {
color: #F73859;
}
- fh5co-header,
- fh5co-counter,
.fh5co-bg {
background-size: cover; background-position: top center; background-repeat: no-repeat; position: relative;
}
.fh5co-bg {
background-size: cover; background-position: center center; position: relative; width: 100%; float: left; position: relative;
}
- fh5co-header a {
color: rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
- fh5co-header a:hover {
color: white; border-bottom: 1px solid white;
}
.fh5co-cover {
height: 900px; background-size: cover; background-repeat: no-repeat; position: relative; float: left; width: 100%;
} .fh5co-cover .overlay {
z-index: 0; position: absolute; bottom: 0; top: 0; left: 0; right: 0; background: rgba(42, 51, 86, 0.9);
} .fh5co-cover > .fh5co-container {
position: relative; z-index: 10;
} @media screen and (max-width: 768px) {
.fh5co-cover { height: 600px; }
} .fh5co-cover .display-t, .fh5co-cover .display-tc {
z-index: 9; height: 900px; display: table; width: 100%;
} @media screen and (max-width: 768px) {
.fh5co-cover .display-t, .fh5co-cover .display-tc { height: 600px; }
} .fh5co-cover.fh5co-cover-sm {
height: 600px;
} @media screen and (max-width: 768px) {
.fh5co-cover.fh5co-cover-sm { height: 400px; }
} .fh5co-cover.fh5co-cover-sm .display-t, .fh5co-cover.fh5co-cover-sm .display-tc {
height: 600px; display: table; width: 100%;
} @media screen and (max-width: 768px) {
.fh5co-cover.fh5co-cover-sm .display-t, .fh5co-cover.fh5co-cover-sm .display-tc { height: 400px; }
}
.fh5co-staff {
text-align: center; margin-bottom: 30px; background: #fff; padding: 30px; float: left; width: 100%;
} .fh5co-staff img {
width: 100px; margin-bottom: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%;
} .fh5co-staff h3 {
font-size: 24px; margin-bottom: 5px;
} .fh5co-staff p {
margin-bottom: 30px;
} .fh5co-staff .role {
color: #bfbfbf; margin-bottom: 30px; font-weight: normal; display: block;
}
.pagination a {
background: none; border: none !important; color: gray !important;
} .pagination a:hover, .pagination a:focus, .pagination a:active {
background: none !important;
} .pagination > li > a {
margin: 0 2px; font-size: 18px; padding: 0 !important; background: none; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; -ms-border-radius: 50% !important; -o-border-radius: 50% !important; border-radius: 50% !important; height: 50px; width: 50px; line-height: 50px; display: table-cell; vertical-align: middle;
} .pagination > li > a:hover {
color: #000; background: #e6e6e6 !important;
} .pagination > li.disabled > a {
background: none;
} .pagination > li.active > a {
background: #F73859 !important; -webkit-box-shadow: 4px 11px 35px -14px rgba(0, 0, 0, 0.5); -moz-box-shadow: 4px 11px 35px -14px rgba(0, 0, 0, 0.5); -ms-box-shadow: 4px 11px 35px -14px rgba(0, 0, 0, 0.5); -o-box-shadow: 4px 11px 35px -14px rgba(0, 0, 0, 0.5); box-shadow: 4px 11px 35px -14px rgba(0, 0, 0, 0.5); color: #fff !important;
} .pagination > li.active > a:hover {
cursor: pointer; background: #f96982 !important;
}
.fh5co-social-icons {
margin: 0; padding: 0;
} .fh5co-social-icons li {
margin: 0; padding: 0; list-style: none; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline;
} .fh5co-social-icons li a {
display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; color: #F73859; padding-left: 10px; padding-right: 10px;
} .fh5co-social-icons li a i {
font-size: 20px;
}
.fh5co-contact-info ul {
padding: 0; margin: 0;
} .fh5co-contact-info ul li {
padding: 0 0 0 70px; margin: 0 0 30px 0; list-style: none; position: relative;
} .fh5co-contact-info ul li:before {
color: #ccddea; position: absolute; left: 0; top: .05em; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
} .fh5co-contact-info ul li.address:before {
font-size: 30px; content: "\e9d1";
} .fh5co-contact-info ul li.phone:before {
font-size: 23px; content: "\e9f4";
} .fh5co-contact-info ul li.email:before {
font-size: 23px; content: "\e9da";
} .fh5co-contact-info ul li.url:before {
font-size: 23px; content: "\e9af";
}
- fh5co-header .display-tc,
- fh5co-counter .display-tc,
.fh5co-cover .display-tc {
display: table-cell !important; vertical-align: middle;
}
- fh5co-header .display-tc h1, #fh5co-header .display-tc h2,
- fh5co-counter .display-tc h1,
- fh5co-counter .display-tc h2,
.fh5co-cover .display-tc h1, .fh5co-cover .display-tc h2 {
margin: 0; padding: 0; color: white;
}
- fh5co-header .display-tc h1,
- fh5co-counter .display-tc h1,
.fh5co-cover .display-tc h1 {
margin-bottom: 0px; margin-top: 0; font-size: 60px; line-height: 1.3; font-family: "Open Sans", Arial, sans-serif; font-weight: 300;
} @media screen and (max-width: 768px) {
#fh5co-header .display-tc h1, #fh5co-counter .display-tc h1, .fh5co-cover .display-tc h1 { font-size: 40px; }
}
- fh5co-header .display-tc h2,
- fh5co-counter .display-tc h2,
.fh5co-cover .display-tc h2 {
font-size: 20px; line-height: 1.5; margin-bottom: 30px; text-transform: uppercase;
}
- fh5co-header .display-tc .btn,
- fh5co-counter .display-tc .btn,
.fh5co-cover .display-tc .btn {
padding: 15px 30px; background: #F73859; color: #fff; border: none !important; font-size: 18px; text-transform: uppercase; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px;
}
- fh5co-header .display-tc .btn:hover,
- fh5co-counter .display-tc .btn:hover,
.fh5co-cover .display-tc .btn:hover {
background: #f6163c !important; -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important; -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important; box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
}
- fh5co-header .display-tc .or,
- fh5co-counter .display-tc .or,
.fh5co-cover .display-tc .or {
color: rgba(255, 255, 255, 0.3); display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; padding: 0 20px;
}
- fh5co-header .display-tc .link-watch,
- fh5co-counter .display-tc .link-watch,
.fh5co-cover .display-tc .link-watch {
border-bottom: none;
}
- fh5co-header .display-tc .form-inline .form-group,
- fh5co-counter .display-tc .form-inline .form-group,
.fh5co-cover .display-tc .form-inline .form-group {
width: 100% !important; margin-bottom: 10px;
}
- fh5co-header .display-tc .form-inline .form-group .form-control,
- fh5co-counter .display-tc .form-inline .form-group .form-control,
.fh5co-cover .display-tc .form-inline .form-group .form-control {
width: 100%; background: #fff; border: none;
}
.fh5co-bg-section {
background: #F0F5F9;
}
- fh5co-services,
- fh5co-started,
- fh5co-testimonial,
- fh5co-blog,
- fh5co-project,
- fh5co-about,
- fh5co-team,
- fh5co-contact,
- fh5co-footer {
padding: 7em 0; clear: both;
} @media screen and (max-width: 768px) {
#fh5co-services, #fh5co-started, #fh5co-testimonial, #fh5co-blog, #fh5co-project, #fh5co-about, #fh5co-team, #fh5co-contact, #fh5co-footer { padding: 3em 0; }
}
- fh5co-testimonial {
background: #F0F5F9;
}
- fh5co-testimonial .testimonial {
background: #fff; padding: 30px; position: relative; margin-bottom: 4em; bottom: 0;
}
- fh5co-testimonial .testimonial blockquote {
border-left: none; padding: 0; margin: 0;
}
- fh5co-testimonial .testimonial p {
color: #666666; font-size: 18px; font-style: italic; line-height: 1.5;
}
- fh5co-testimonial .testimonial p.author {
color: #b3b3b3;
}
- fh5co-testimonial .testimonial p.author img {
width: 60px; margin-right: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%;
}
- fh5co-testimonial .testimonial p.author cite {
font-style: normal; font-size: 13px; font-family: "Open Sans", Arial, sans-serif;
}
- fh5co-testimonial .testimonial p:last-child {
margin-bottom: 0;
}
- fh5co-testimonial .testimonial:after {
position: absolute; left: 11%; bottom: -30px; display: block; width: 0; content: ""; border-width: 30px 30px 0 0; border-style: solid; border-color: #fff transparent;
}
- fh5co-testimonial .testimonial.fh5co-selected {
background: #F73859; bottom: 10px; -webkit-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75); box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
}
- fh5co-testimonial .testimonial.fh5co-selected p {
color: #fff;
}
- fh5co-testimonial .testimonial.fh5co-selected p.author cite {
color: rgba(255, 255, 255, 0.7);
}
- fh5co-testimonial .testimonial.fh5co-selected:after {
border-color: #F73859 transparent;
} @media screen and (max-width: 768px) {
#fh5co-testimonial .testimonial.fh5co-selected { bottom: 0; }
}
- fh5co-blog .fh5co-post {
background: #fff; float: left; width: 100%; margin-bottom: 30px; padding: 30px; -webkit-box-shadow: -2px 11px 24px -10px rgba(0, 0, 0, 0.09); -moz-box-shadow: -2px 11px 24px -10px rgba(0, 0, 0, 0.09); box-shadow: -2px 11px 24px -10px rgba(0, 0, 0, 0.09); position: relative; bottom: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;
}
- fh5co-blog .fh5co-post h3 {
margin-bottom: 20px;
}
- fh5co-blog .fh5co-post h3 a {
color: #F73859;
}
- fh5co-blog .fh5co-post h3 a:hover {
color: #f35f55;
}
- fh5co-blog .fh5co-post .fh5co-date {
display: block; margin-bottom: 10px; text-transform: uppercase; font-size: 12px; color: #cccccc; letter-spacing: .07em;
}
- fh5co-blog .fh5co-post p.author {
color: #b3b3b3;
}
- fh5co-blog .fh5co-post p.author img {
width: 50px; margin-right: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%;
}
- fh5co-blog .fh5co-post p.author cite {
font-style: normal; font-size: 13px;
}
- fh5co-blog .fh5co-post p:last-child {
margin-bottom: 0;
}
- fh5co-blog .fh5co-post:hover, #fh5co-blog .fh5co-post:focus {
bottom: 10px;
} @media screen and (max-width: 768px) {
#fh5co-blog .fh5co-post:hover, #fh5co-blog .fh5co-post:focus { bottom: 0; }
}
- fh5co-counter {
background: #fff; padding: 7em 0; text-align: center;
} @media screen and (max-width: 768px) {
#fh5co-counter { padding: 3em 0; }
}
- fh5co-counter .counter {
font-size: 50px; margin-bottom: 10px; color: #F73859; font-weight: 100; display: block;
}
- fh5co-counter .counter-label {
margin-bottom: 0; text-transform: uppercase; color: rgba(0, 0, 0, 0.5); letter-spacing: .1em;
}
- fh5co-counter .feature-center:hover .counter {
color: #fff;
} @media screen and (max-width: 768px) {
#fh5co-counter .feature-center { margin-bottom: 30px; }
}
- fh5co-counter .icon {
width: 70px; text-align: center; margin-bottom: 20px; background: none !important; border: none !important;
}
- fh5co-counter .icon i {
height: 70px;
}
- fh5co-counter .icon i:before {
color: #cccccc; display: block; text-align: center; margin-left: 3px;
}
- fh5co-project .fh5co-project {
margin-bottom: 30px;
}
- fh5co-project .fh5co-project > a {
display: block; color: #000; position: relative; bottom: 0; overflow: hidden; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
}
- fh5co-project .fh5co-project > a img {
position: relative; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
}
- fh5co-project .fh5co-project > a:after {
opacity: 0; visibility: hidden; content: ""; position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: rgba(0, 0, 0, 0.7); z-index: 8; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
}
- fh5co-project .fh5co-project > a .fh5co-copy {
z-index: 12; position: absolute; right: 20px; left: 20px; bottom: 0px; opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;
}
- fh5co-project .fh5co-project > a .fh5co-copy h3 {
margin: 0 0 5px 0; padding: 0; color: #fff; font-size: 20px; font-weight: 400;
}
- fh5co-project .fh5co-project > a .fh5co-copy p {
color: rgba(255, 255, 255, 0.5); font-size: 14px;
}
- fh5co-project .fh5co-project > a .fh5co-copy p:last-child {
margin-bottom: 0;
} @media screen and (max-width: 768px) {
#fh5co-project .fh5co-project > a .fh5co-copy { position: relative; visibility: visible; opacity: 1; bottom: 0; color: #000; padding: 20px; background: #fff; }
}
- fh5co-project .fh5co-project > a:hover {
-webkit-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75); box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
} @media screen and (max-width: 768px) {
#fh5co-project .fh5co-project > a:hover { bottom: 0; }
}
- fh5co-project .fh5co-project > a:hover:after {
opacity: 1; visibility: visible;
} @media screen and (max-width: 768px) {
#fh5co-project .fh5co-project > a:hover:after { opacity: 0; visibility: hidden; }
}
- fh5co-project .fh5co-project > a:hover .fh5co-copy {
opacity: 1; visibility: visible; bottom: 20px;
} @media screen and (max-width: 768px) {
#fh5co-project .fh5co-project > a:hover .fh5co-copy { bottom: 0; padding: 20px; background: #fff; }
}
- fh5co-project .fh5co-project > a:hover img {
-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);
} @media screen and (max-width: 768px) {
#fh5co-project .fh5co-project > a:hover img { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
}
- fh5co-services.border-bottom {
border-bottom: 1px solid #dae6ef; -webkit-box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.15); box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.15); position: relative; z-index: 10;
}
.feature-center {
padding: 30px; float: left; width: 100%; position: relative; bottom: 0; margin-bottom: 40px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;
} @media screen and (max-width: 768px) {
.feature-center { margin-bottom: 50px; }
} .feature-center .desc {
padding-left: 180px;
} .feature-center .icon {
margin-bottom: 20px; display: block;
} .feature-center .icon i {
font-size: 40px; color: rgba(42, 54, 59, 0.2);
} .feature-center .icon2 {
float: left;
} .feature-center .icon2 i {
font-size: 100px;
} .feature-center p:last-child {
margin-bottom: 0;
} .feature-center p, .feature-center h3 {
margin-bottom: 30px;
} .feature-center h3 {
font-size: 22px; color: #5d5d5d;
} .feature-center:hover, .feature-center:focus {
background: #F73859; bottom: 10px; -webkit-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75); box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
} .feature-center:hover p:last-child, .feature-center:focus p:last-child {
margin-bottom: 0;
} .feature-center:hover .icon i, .feature-center:focus .icon i {
color: rgba(255, 255, 255, 0.7);
} .feature-center:hover p, .feature-center:hover h3, .feature-center:focus p, .feature-center:focus h3 {
color: #fff !important;
} .feature-center:hover a, .feature-center:focus a {
color: rgba(255, 255, 255, 0.7);
} .feature-center:hover a:hover, .feature-center:focus a:hover {
color: #fff;
} @media screen and (max-width: 768px) {
.feature-center:hover, .feature-center:focus { bottom: 0; }
}
.project-grid {
background-size: cover; background-position: top center; background-repeat: no-repeat; position: relative; overflow: hidden; height: 350px; margin-bottom: 40px;
} .project-grid:before {
position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ; background: rgba(0, 0, 0, 0.3); opacity: 0; -webkit-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s;
} .project-grid .desc {
background: rgba(247, 56, 89, 0.9); padding: 10px 20px; position: absolute; bottom: -93px; left: 0; right: 0; -webkit-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s;
} .project-grid .desc h3 a {
color: white;
} .project-grid .desc span {
color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 1px; font-size: 12px;
} @media screen and (max-width: 768px) {
.project-grid .desc { bottom: 0; }
} .project-grid:hover:before, .project-grid:focus:before {
opacity: 1;
} .project-grid:hover .desc, .project-grid:focus .desc {
bottom: 0;
}
.project-content {
width: 100%; padding-left: 10px; padding-right: 10px; float: left; padding: 7em 0;
} @media screen and (max-width: 768px) {
.project-content { padding: 3em 0; }
} .project-content .col-half {
width: 50%; float: left; padding-left: 10px; padding-right: 10px;
} @media screen and (max-width: 480px) {
.project-content .col-half { width: 100%; }
} .project-content .col-half .project, .project-content .col-half .project-grid {
background-size: cover; background-position: top center; background-repeat: no-repeat; position: relative; overflow: hidden;
} .project-content .col-half .project:before, .project-content .col-half .project-grid:before {
position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ; background: rgba(0, 0, 0, 0.3); opacity: 0; -webkit-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s;
} .project-content .col-half .project:hover:before, .project-content .col-half .project:focus:before, .project-content .col-half .project-grid:hover:before, .project-content .col-half .project-grid:focus:before {
opacity: 1;
} .project-content .col-half .project:hover .desc, .project-content .col-half .project:focus .desc, .project-content .col-half .project-grid:hover .desc, .project-content .col-half .project-grid:focus .desc {
bottom: 0;
} @media screen and (max-width: 480px) {
.project-content .col-half .project, .project-content .col-half .project-grid { height: 340px !important; margin-bottom: 20px; }
} .project-content .col-half .project {
height: 800px;
} .project-content .col-half .project-grid {
height: 390px; margin-bottom: 20px;
} .project-content .col-half .project-grid:last-child {
margin-bottom: 0;
} .project-content .desc {
background: rgba(247, 56, 89, 0.9); padding: 10px 20px; position: absolute; bottom: -93px; left: 0; right: 0; -webkit-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s;
} .project-content .desc h3 {
color: white;
} .project-content .desc span {
color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 1px; font-size: 12px;
} @media screen and (max-width: 768px) {
.project-content .desc { bottom: 0; }
}
.fh5co-heading {
margin-bottom: 2em;
} .fh5co-heading.fh5co-heading-sm {
margin-bottom: 2em;
} .fh5co-heading h2 {
font-size: 55px; margin-bottom: 0px; line-height: 1.5; font-weight: 300; color: #000;
} .fh5co-heading p {
font-size: 18px; line-height: 1.5; color: #828282;
} .fh5co-heading span {
display: block; margin-bottom: 10px; text-transform: uppercase; font-size: 12px; letter-spacing: 2px; color: #cccccc;
}
- fh5co-started {
background: rgba(42, 51, 86, 0.9);
}
- fh5co-started .fh5co-heading h2 {
color: #fff; margin-bottom: 20px !important; font-weight: 300;
}
- fh5co-started .fh5co-heading p {
color: rgba(255, 255, 255, 0.5);
}
- fh5co-started .form-control {
background: rgba(255, 255, 255, 0.2); border: none !important; color: #fff; font-size: 16px !important; width: 100%; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
}
- fh5co-started .form-control::-webkit-input-placeholder {
color: #fff;
}
- fh5co-started .form-control:-moz-placeholder {
/* Firefox 18- */ color: #fff;
}
- fh5co-started .form-control::-moz-placeholder {
/* Firefox 19+ */ color: #fff;
}
- fh5co-started .form-control:-ms-input-placeholder {
color: #fff;
}
- fh5co-started .form-control:focus {
background: rgba(255, 255, 255, 0.3);
}
- fh5co-started .btn {
height: 54px; border: none !important; background: #F73859; color: #fff; font-size: 16px; text-transform: uppercase; font-weight: 400; padding-left: 30px; padding-right: 30px;
}
- fh5co-started .btn:hover {
background: #f6163c !important; -webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75) !important; -moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75) !important; box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75) !important;
}
- fh5co-started .form-inline .form-group {
width: 100% !important; margin-bottom: 10px;
}
- fh5co-started .form-inline .form-group .form-control {
width: 100%;
}
- fh5co-footer .fh5co-footer-links {
padding: 0; margin: 0;
}
- fh5co-footer .fh5co-footer-links li {
padding: 0; margin: 0; list-style: none;
}
- fh5co-footer .fh5co-footer-links li a {
color: #000; text-decoration: none;
}
- fh5co-footer .fh5co-footer-links li a:hover {
text-decoration: underline;
}
- fh5co-footer .fh5co-widget {
margin-bottom: 30px;
} @media screen and (max-width: 768px) {
#fh5co-footer .fh5co-widget { text-align: left; }
}
- fh5co-footer .fh5co-widget h3 {
margin-bottom: 15px; font-weight: bold; font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
}
- fh5co-footer .copyright .block {
display: block;
}
- fh5co-offcanvas {
position: fixed; z-index: 1901; width: 270px; background: black; top: 0; right: 0; top: 0; bottom: 0; padding: 45px 40px 40px 40px; overflow-y: auto; display: none; -moz-transform: translateX(270px); -webkit-transform: translateX(270px); -ms-transform: translateX(270px); -o-transform: translateX(270px); transform: translateX(270px); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
} @media screen and (max-width: 768px) {
#fh5co-offcanvas { display: block; }
} .offcanvas #fh5co-offcanvas {
-moz-transform: translateX(0px); -webkit-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px);
}
- fh5co-offcanvas a {
color: rgba(255, 255, 255, 0.5);
}
- fh5co-offcanvas a:hover {
color: rgba(255, 255, 255, 0.8);
}
- fh5co-offcanvas ul {
padding: 0; margin: 0;
}
- fh5co-offcanvas ul li {
padding: 0; margin: 0; list-style: none;
}
- fh5co-offcanvas ul li > ul {
padding-left: 20px; display: none;
}
- fh5co-offcanvas ul li.offcanvas-has-dropdown > a {
display: block; position: relative;
}
- fh5co-offcanvas ul li.offcanvas-has-dropdown > a:after {
position: absolute; right: 0px; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e921"; font-size: 20px; color: rgba(255, 255, 255, 0.2); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
}
- fh5co-offcanvas ul li.offcanvas-has-dropdown.active a:after {
-webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg);
}
.uppercase {
font-size: 14px; color: #000; margin-bottom: 10px; font-weight: 700; text-transform: uppercase;
}
.gototop {
position: fixed; bottom: 20px; right: 20px; z-index: 999; opacity: 0; visibility: hidden; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
} .gototop.active {
opacity: 1; visibility: visible;
} .gototop a {
width: 50px; height: 50px; display: table; background: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px;
} .gototop a i {
height: 50px; display: table-cell; vertical-align: middle;
} .gototop a:hover, .gototop a:active, .gototop a:focus {
text-decoration: none; outline: none;
}
.fh5co-nav-toggle {
width: 25px; height: 25px; cursor: pointer; text-decoration: none;
} .fh5co-nav-toggle.active i::before, .fh5co-nav-toggle.active i::after {
background: #444;
} .fh5co-nav-toggle:hover, .fh5co-nav-toggle:focus, .fh5co-nav-toggle:active {
outline: none; border-bottom: none !important;
} .fh5co-nav-toggle i {
position: relative; display: inline-block; width: 25px; height: 2px; color: #252525; font: bold 14px/.4 Helvetica; text-transform: uppercase; text-indent: -55px; background: #252525; transition: all .2s ease-out;
} .fh5co-nav-toggle i::before, .fh5co-nav-toggle i::after {
content: ; width: 25px; height: 2px; background: #252525; position: absolute; left: 0; transition: all .2s ease-out;
} .fh5co-nav-toggle.fh5co-nav-white > i {
color: #fff; background: #fff;
} .fh5co-nav-toggle.fh5co-nav-white > i::before, .fh5co-nav-toggle.fh5co-nav-white > i::after {
background: #fff;
}
.fh5co-nav-toggle i::before {
top: -7px;
}
.fh5co-nav-toggle i::after {
bottom: -7px;
}
.fh5co-nav-toggle:hover i::before {
top: -10px;
}
.fh5co-nav-toggle:hover i::after {
bottom: -10px;
}
.fh5co-nav-toggle.active i {
background: transparent;
}
.fh5co-nav-toggle.active i::before {
top: 0; -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); transform: rotateZ(45deg);
}
.fh5co-nav-toggle.active i::after {
bottom: 0; -webkit-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); transform: rotateZ(-45deg);
}
.fh5co-nav-toggle {
position: fixed; right: 0px; top: 18px; z-index: 21; padding: 6px 0 0 0; display: block; margin: 0 auto; display: none; height: 44px; width: 44px; z-index: 2001; border-bottom: none !important;
} .scrolled .fh5co-nav-toggle {
top: 5px;
} @media screen and (max-width: 768px) {
.fh5co-nav-toggle { display: block; }
}
.btn {
margin-right: 4px; margin-bottom: 4px; font-family: "Open Sans", Arial, sans-serif; font-size: 16px; font-weight: 400; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding: 8px 20px;
} .btn.btn-md {
padding: 8px 20px !important;
} .btn.btn-lg {
padding: 18px 36px !important;
} .btn:hover, .btn:active, .btn:focus {
box-shadow: none !important; outline: none !important;
}
.btn-primary {
background: #F73859; color: #fff; border: 2px solid #F73859;
} .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background: #f8516d !important; border-color: #f8516d !important;
} .btn-primary.btn-outline {
background: transparent; color: #F73859; border: 2px solid #F73859;
} .btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active {
background: #F73859; color: #fff;
}
.btn-success {
background: #5cb85c; color: #fff; border: 2px solid #5cb85c;
} .btn-success:hover, .btn-success:focus, .btn-success:active {
background: #4cae4c !important; border-color: #4cae4c !important;
} .btn-success.btn-outline {
background: transparent; color: #5cb85c; border: 2px solid #5cb85c;
} .btn-success.btn-outline:hover, .btn-success.btn-outline:focus, .btn-success.btn-outline:active {
background: #5cb85c; color: #fff;
}
.btn-info {
background: #5bc0de; color: #fff; border: 2px solid #5bc0de;
} .btn-info:hover, .btn-info:focus, .btn-info:active {
background: #46b8da !important; border-color: #46b8da !important;
} .btn-info.btn-outline {
background: transparent; color: #5bc0de; border: 2px solid #5bc0de;
} .btn-info.btn-outline:hover, .btn-info.btn-outline:focus, .btn-info.btn-outline:active {
background: #5bc0de; color: #fff;
}
.btn-warning {
background: #f0ad4e; color: #fff; border: 2px solid #f0ad4e;
} .btn-warning:hover, .btn-warning:focus, .btn-warning:active {
background: #eea236 !important; border-color: #eea236 !important;
} .btn-warning.btn-outline {
background: transparent; color: #f0ad4e; border: 2px solid #f0ad4e;
} .btn-warning.btn-outline:hover, .btn-warning.btn-outline:focus, .btn-warning.btn-outline:active {
background: #f0ad4e; color: #fff;
}
.btn-danger {
background: #d9534f; color: #fff; border: 2px solid #d9534f;
} .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
background: #d43f3a !important; border-color: #d43f3a !important;
} .btn-danger.btn-outline {
background: transparent; color: #d9534f; border: 2px solid #d9534f;
} .btn-danger.btn-outline:hover, .btn-danger.btn-outline:focus, .btn-danger.btn-outline:active {
background: #d9534f; color: #fff;
}
.btn-outline {
background: none; border: 2px solid gray; font-size: 16px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;
} .btn-outline:hover, .btn-outline:focus, .btn-outline:active {
box-shadow: none;
}
.btn.with-arrow {
position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;
} .btn.with-arrow i {
visibility: hidden; opacity: 0; position: absolute; right: 0px; top: 50%; margin-top: -8px; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;
} .btn.with-arrow:hover {
padding-right: 50px;
} .btn.with-arrow:hover i {
color: #fff; right: 18px; visibility: visible; opacity: 1;
}
.form-control {
box-shadow: none; background: transparent; border: 2px solid rgba(0, 0, 0, 0.1); height: 54px; font-size: 18px; font-weight: 300;
} .form-control:active, .form-control:focus {
outline: none; box-shadow: none; border-color: #F73859;
}
.mb30 {
margin-bottom: 30px !important;
}
.row-pb-md {
padding-bottom: 4em !important;
}
.row-pb-sm {
padding-bottom: 2em !important;
}
.fh5co-loader {
position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(../images/loader.gif) center no-repeat #fff;
}
.js .animate-box {
opacity: 0;
}
- fh5co-header-subscribe #email {
padding-right: 9em;
}
- fh5co-header-subscribe button {
position: absolute; top: 0; right: 10px; border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important;
}
/*# sourceMappingURL=style.css.map */