/*
Template: Hallooou HTML5 Responsive template
Author: Mauritius D'Silva
Theme URI: http://www.mauritiusdsilva.com/themes/hallooou
Version: 1.0
*/
/* ----------------------------------------------
CSS TABLE OF CONTENTS
------------------------------------------------- */
/*
1: Pre-loader
2: Default styles
3: Common section styles
4: Navigation
5: Page sections (sections included in the navigation)
5.1: Hero Unit (Main slider)
5.2: About section ("About us")
5.3: Services section ("What we do")
5.4: Products section ("Why choose us")
5.5: Team section
5.6: Portfolio section
5.7: Clients section
5.8: Contact section
6: Our achievements section
7: Call to action section (one or two columns)
8: Call to action section (two columns)
9: Clients testimonial
10: Footer
11: CSS3 Animations
12: Buttons
13: Media queries
/*
----------------------------------------------------- */
/* 1: Pre-loader - Need more customizations? Visit-> http://github.hubspot.com/pace/docs/welcome/
/* ---------------------------------------------- */
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999999;
-webkit-transform: translate3d(0, -50px, 0);
-ms-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
-webkit-transition: -webkit-transform .5s ease-out;
-ms-transition: -webkit-transform .5s ease-out;
transition: transform .5s ease-out;
}
.pace.pace-active {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.pace .pace-progress {
display: block;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 10px;
background: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
pointer-events: none;
}
/* 2: Default styles
/* ---------------------------------------------- */
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
color: #999; /* Can be changed via colors.css */
background-color: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 20px 0;
text-transform: none;
color: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
letter-spacing: 1px;
line-height: 1.5;
}
p {
margin: 0 0 25px;
font-size: 18px;
line-height: 1.5;
}
/*Color of font in team image switch i.e. Facebook twitter */
a {
color: #fff;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
a:hover,
a:focus {
text-decoration: none;
color: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
}
.light {
font-weight: 100;
}
.white{
color:#fff;
}
.gray{
color: #a5a5a5;
}
.buffer-twenty{
margin:20px 0;
}
.buffer-twenty-top{
margin-top: 20px;
}
.buffer-twenty-bottom{
margin-bottom: 20px;
}
.buffer-forty{
margin:40px 0;
}
.buffer-forty-top{
margin-top: 40px;
}
.no-bottom-pad{
padding-bottom: 0 !important;
}
.no-top-pad{
padding-top: 0 !important;
}
.highlight{
font-weight: 700;
color: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
}
.list-ord{
list-style: none;
margin:0;
padding: 10px 0;
font-size: 16px;
line-height: 28px;
}
.no-bg{
background: none !important;
}
/* 3: Common section styles
/* ---------------------------------------------- */
.content-section {
padding: 100px 0;
}
.content-section.alt-bg{
background-color: #222;
}
.content-section.alt-bg-light{
background-color: #fafafa;
border-top:1px solid #f5f5f5;
border-bottom:1px solid #d2d2d2;
}
.caption{
font-weight: 100;
font-size: 20px;
}
.text-center{
text-align: center;
}
.align-middle{
margin:0 auto;
}
.sans-border{
border-radius: 0;
}
.sans-shadow{
box-shadow: none;
}
blockquote {
display: block;
font-size: 22px;
position: relative;
padding-left: 90px;
color: rgba(254,82,76, 1);
border-color: rgba(254,82,76, 1);
}
blockquote:before {
content: "\f10d";
font-size: 55px;
font-family: FontAwesome;
position: absolute;
top: -4px;
left: 20px;
}
blockquote span:before{
content:'--';
padding: 0 10px 0 0;
}
blockquote span{
padding: 10px 0;
display: block;
font-size: 16px;
color: #999;
}
/* 4: Navigation
/* ---------------------------------------------- */
.navbar-custom {
margin-bottom: 0;
text-transform: none;
font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
-webkit-transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
transition: background .5s ease-in-out;
}
.navbar-custom.top-nav-collapse{
background: rgba(254,82,76, .9); /* Primary color, can be changed via colors.css */
}
.navbar-custom .navbar-brand {
font-weight: 600;
font-size: 25px;
padding: 0;
margin: 0;
}
.navbar-custom .navbar-brand span.brand-logo{
display: inline-block;
/* padding: 14px 0; */
padding: 6px 0;
margin: 0 5px;
}
.navbar-custom .navbar-brand:focus {
outline: 0;
}
.navbar-custom .navbar-brand .navbar-toggle {
padding: 2px 6px;
color: #fff;
}
.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
outline: 0;
}
.navbar-custom a {
color: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover {
outline: 0;
color: rgba(255, 255, 255, .8);
background-color: transparent;
}
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
outline: 0;
background-color: transparent;
}
.navbar-custom .nav li.active {
outline: 0;
}
.navbar-custom .nav li.active a {
background-color: rgba(255, 255, 255, .3);
}
.navbar-custom .nav li.active a:hover {
color: #fff;
}
/* Custom overlay navigation
/* ---------------------------------------------- */
.button_container {
position: relative;
margin-top: 14px;
height: 58px;
width: 28px;
cursor: pointer;
z-index: 999;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
}
/* Animate the top hamburger bar */
.button_container.active .top {
-webkit-transform: translateY(8px) translateX(0) rotate(45deg);
-ms-transform: translateY(8px) translateX(0) rotate(45deg);
transform: translateY(8px) translateX(0) rotate(45deg);
background: #000;
}
/* Set the middle hamburger bar's opacity to 0 */
.button_container.active .middle {
opacity: 0;
background: #000;
}
/* Animate the bottom hamburger bar */
.button_container.active .bottom {
-webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
-ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
transform: translateY(-8px) translateX(0) rotate(-45deg);
background: #000;
}
.button_container span {
background: #fff;
border: none;
height: 4px;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all .35s ease;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 8px;
}
.button_container span:nth-of-type(3) {
top: 16px;
}
/* The overlay */
.overlay {
position: fixed;
display: block;
background: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
top: 0;
border: 0;
left: 0;
z-index: 100;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: auto;
}
.overlay.open {
opacity: .95;
visibility: visible;
height: 100%;
}
.overlay.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(1) {
-webkit-animation-delay: .40s;
animation-delay: .40s;
}
.overlay.open li:nth-of-type(2n) {
-webkit-animation-delay: .50s;
animation-delay: .50s;
}
.overlay nav {
position: relative;
height: 50%;
top: 42%;
font-size: 30px;
font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
text-transform: none;
font-weight: 600;
text-align: center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 15%;
height: calc(100% / 8);
min-height: 65px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
width: 50%;
}
/* Link underline on hover */
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
height: 2px;
background: #fff;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: .15s;
transition: .15s;
}
.overlay-submenu{
height: auto;
min-height: auto;
margin-top: -15px;
margin-bottom: 15px;
font-size: 18px;
text-align: right;
width: 300px;
line-height: 30px;
}
.overlay ul li.overlay-submenu a.sub-anchor:after {
content: '';
position: absolute;
bottom: 0;
left: 77%;
width: 0%;
height: 2px;
background: #fff;
-webkit-transform: translateX(-60%);
-ms-transform: translateX(-60%);
transform: translateX(-50%);
-webkit-transition: .15s;
transition: .15s;
}
/* 5: PAGE SECTIONS
/* ---------------------------------------------- */
/* 5.1: Hero unit (Main slider)
/* ---------------------------------------------- */
.intro-carousel {
width: 100%;
/*height: 100%;*/
color: #fff;
background:#222;
}
.carousel-caption{
text-shadow: none;
bottom: 25%;
}
.carousel-caption h1{
padding: 0;
margin: 10px 0;
color: #fff;
}
.carousel-caption .intro-text{
padding: 0;
}
.carousel-caption .btn{
margin:0;
}
.carousel-control{
top: 50%;
width:4%;
height:7%;
margin: 0;
text-shadow: none;
}
.carousel-control.left,
.carousel-control.right{
background: none;
z-index: 100;
}
.carousel-control.left:hover,
.carousel-control.right:hover{
background: rgba(254,82,76, 0.9); /* Primary color, can be changed via colors.css */
}
#parallax-slide{
background: url(../images/cover-three.jpg) 50% 0 no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.overlay-detail {
width: 100%;
height: 100%;
position: absolute;
background: #000; /* Set to black, can be changed via colors.css */
opacity: 0.5;
left: 0;
top: 0;
z-index: 1;
}
.mouse {
width: 25px;
height: 45px;
border: 2px solid #fff;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -12.5px;
border-radius: 12px;
}
.mouse:after {
content: "";
position: absolute;
height: 5px;
width: 5px;
background-color: #fff;
border-radius: 100%;
left: 50%;
margin-left: -2.5px;
top: 10px;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
/* Full Slider HTML Template via www.startbootstrap.com
/* ---------------------------------------------- */
/*!
* Start Bootstrap - Full Slider HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
/* Background images are set within the HTML using inline CSS, not here */
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
/* Hero unit background video
/* ---------------------------------------------- */
.video-section{
position: absolute;
width: 100%;
height: 100%;
background: url(../images/youtube-video-cover.jpg) no-repeat bottom center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
}
.video-section .bgndVideo{
width: 100%;
height: 100%;
}
.video-section .buttonBar{display:none;}
.player {font-size: 1px;}
.video-controls,
.html5-video-controls {
display: none;
font-size: 16px;
position: absolute;
bottom: 8%;
right: 5%;
z-index: 99;
opacity: .4;
}
.video-controls-visible {
display: inline;
}
.video-controls .fa,
.html5-video-controls .fa {
color: #fff;
padding: 5px;
width: 25px;
}
/* HTML 5 video
/* ---------------------------------------------- */
video#html5-video {
position: relative;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(../images/typing-on-mac.jpg) no-repeat bottom center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
}
/* fix for IE8 refer to conditional comment in the of the page*/
video {
display: block;
}
/* 5.2: About section
/* ---------------------------------------------- */
.about h2,.about h3{
margin: 0 0 10px 0;
padding: 0;
}
.about a{
color: #337ab7;
}
/* 5.3: Services section ("What we do")
/* ---------------------------------------------- */
.services-item:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 30px 30px 0;
border-style: solid;
border-color: #fff #fff rgba(254,82,76, 1) rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-transition: border-color .2s ease-in-out;
-moz-transition: border-color .2s ease-in-out;
transition: border-color .2s ease-in-out;
/* Firefox 3.0 damage limitation */
display: block;
width: 0;
}
.services-item{
background: #f9f9f9;
padding: 30px 20px 20px;
margin: 15px 0;
position: relative;
color: #fff;
overflow: hidden;
-webkit-transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
transition: background .5s ease-in-out;
}
.services-item h4{
margin: 0 0 10px 0;
padding: 0;
font-size: 20px;
font-weight: 600;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.services-item p{
padding: 0;
margin: 0;
color:#999;
font-size: 16px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.services-item i{
color: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
padding: 0;
margin: 0 0 10px 0;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.services-item:hover{
background:rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
-webkit-transition: background .2s ease-in-out;
-moz-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
}
.services-item:hover h4{
color:#fff;
transform: translate(0,-5px);
-webkit-transform: translate(0,-5px);
-o-transform: translate(0,-5px);
-moz-transform: translate(0,-5px);
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.services-item:hover p{
color:#fff;
transform: translate(0,-10px);
-webkit-transform: translate(0,-10px);
-o-transform: translate(0,-10px);
-moz-transform: translate(0,-10px);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.services-item:hover i{
color:#fff;
transform: translate(0,-5px);
-webkit-transform: translate(0,-5px);
-o-transform: translate(0,-5px);
-moz-transform: translate(0,-5px);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.services-item:hover:before{
border-color: #fff #fff #a5a5a5 #a5a5a5;
-webkit-transition: border-color .2s ease-in-out;
-moz-transition: border-color .2s ease-in-out;
transition: border-color .2s ease-in-out;
}
/* 5.4: Products section ("Why choose us")
/* ---------------------------------------------- */
.products{
width: 100%;
background: #222;
/* background: url(../images/process_bg.jpg) 50% 0 no-repeat scroll; */
background: url(../images/kind2.jpg) 50% 0 no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.products h2{
color:#fff;
}
.products-container p{
color:#fff;
}
.products-container span.icon{
display: inline-block;
padding: 18px;
margin: 0 0 22px 0;
min-width: 80px;
color: #fff;
background: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
text-align: center;
border-radius: 50px;
width: 80px;
height: 80px;
}
.product-item{
padding: 10px 0;
}
.product-item h3{
margin: 0;
padding: 0 10px;
font-size: 20px;
}
.product-item p{
font-size: 16px;
padding: 0 10px;
}
/* 5.5: Team section
/* ---------------------------------------------- */
.team-member {
margin: 15px 0;
padding:0;
}
.team-member figure{
position: relative;
overflow: hidden;
padding:0;
margin: 0;
}
.team-member figure img{
min-width: 100%;
}
.team-member figcaption p{
font-size: 13px;
}
.team-member figcaption ul{
list-style: none;
margin: 0;
padding:0;
}
.team-member figcaption ul{
visibility: visible;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.team-member figcaption ul li{
display: inline-block;
padding:10px;
}
.team-member h4{
margin: 10px 0 0;
padding: 0;
}
.team-member figcaption{
padding:20px;
color: transparent;
background-color: transparent;
position: absolute;
z-index: 996;
bottom:0;
left: 0;
width: 100%;
height: 0;
overflow: hidden;
visibility: hidden;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.team-member figure:hover figcaption{
visibility: visible;
color: #fff;
background: rgba(230,78,62,0.9); /* Primary color, can be changed via colors.css */
height: 100%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.team-member figure:hover figcaption ul li a:hover{
color: rgba(49, 49, 49, .97);
}
.team-member figure img{
-webkit-transform: scale(1) rotate(0) translateY(0);
-moz-transform: scale(1) rotate(0) translateY(0);
-o-transform: scale(1) rotate(0) translateY(0);
-ms-transform: scale(1) rotate(0) translateY(0);
transform: scale(1) rotate(0) translateY(0);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.team-member figure:hover img{
-webkit-transform: scale(1.1) rotate(1deg) translateY(12px);
-moz-transform: scale(1.1) rotate(1deg) translateY(12px);
-o-transform: scale(1.1) rotate(1deg) translateY(12px);
-ms-transform: scale(1.1) rotate(1deg) translateY(12px);
transform: scale(1.1) rotate(1deg) translateY(12px);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
/* 5.6: Portfolio section
/* ---------------------------------------------- */
#portfolio{
background: #222;
background: url(../images/portfolio_bg.jpg) 50% 0 no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.project-container {
margin-top: 50px;
position: relative;
}
.recent-project {
position: relative;
overflow: hidden;
margin: 5px;
}
.recent-project img {
width: 100%;
}
.project-info {
position: absolute;
left: 0;
top: 35%;
margin-top: -32px;
color: #fff;
width: 100%;
text-align: center;
}
.project-info h3 {
line-height: 18px;
}
ul.project-meta {
margin: 0;
padding: 0;
}
ul.project-meta li{
display: inline-block;
padding:5px 10px;
border: 1px solid #fff;
}
ul.project-meta li a{
display: inline-block;
color: #fff;
}
ul.project-meta li a:hover{
color: #f76758;
}
.full-project {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 16px 20px;
line-height: 18px;
font-size: 18px;
text-transform: capitalize;
background: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
}
.full-project:hover {
background: rgba(223,81,76, 1); /* Hover color, can be changed via colors.css */
}
.full-project a {
padding: 0px;
display: block;
color: #fff;
}
.full-project a:hover{
color:#fff;
}
.full-project a i{
font-size: 14px;
padding: 0 10px;
line-height: 20px;
}
.full-projectb {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 16px 20px;
line-height: 18px;
font-size: 18px;
text-transform: capitalize;
background: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
}
.full-projectb:hover {
background: rgba(223,81,76, 1); /* Hover color, can be changed via colors.css */
}
.full-projectb a {
padding: 0px;
display: block;
color: #fff;
}
.full-projectb a:hover{
color:#fff;
}
.full-projectb a i{
font-size: 14px;
padding: 0 10px;
line-height: 20px;
}
/* Overlay and hover effect
/* ---------------------------------------------- */
.recent-project::before {
content: "";
background: rgba(59,59,59,0.8);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.recent-project:hover::before {
opacity: 1;
}
.project-info h3,
ul.project-meta,
.full-project {
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
}
.project-info h3,
ul.project-meta{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.full-project {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.recent-project:hover .project-info h3,
.recent-project:hover ul.project-meta,
.recent-project:hover .full-project {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
/* Carousel navigation
/* ---------------------------------------------- */
.project-navigation .btn-next,
.project-navigation .btn-prev {
position: absolute;
width: 40px;
height: 70px;
top: 40%;
margin-top: -40px;
background: rgba(59,59,59,0.9);
color: #fff;
line-height: 80px;
text-align: center;
font-size: 18px;
opacity: 0;
z-index: 997;
cursor: pointer;
}
.project-navigation .btn-prev {
left: 0;
}
.project-navigation .btn-next {
right: 0;
}
.project-navigation a:hover {
width: 60px;
background: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
}
.project-container:hover .project-navigation .btn-prev,
.project-container:hover .project-navigation .btn-next {
opacity: 1;
}
/* 5.7: Clients section
/* ---------------------------------------------- */
.our-clients {
background-color: rgba(9,113,178, 1); /* Primary color, can be changed via colors.css */
}
.our-clients h2{
color: #fff;
}
.our-clients .i{
text-align:center;
line-height:120px;
}
.our-clients .i img{
display:inline-block;
margin:0;
padding: 0;
}
.client-slider{
margin: 0 auto;
}
.client-slider .item:before{
content: '';
display: inline-block;
text-align: center;
}
.client-slider .item{
display: inline-block;
margin:0 auto;
width: 100%;
height: 100%;
}
/* change client logo slider pagination color to white for readibility */
.client-slider.owl-theme .owl-controls .owl-page span{
background: rgba(255, 255, 255, .5) !important;
}
/* 5.8: Contact section
/* ---------------------------------------------- */
.contact-form,
.contact-address{
padding-top: 60px;
}
.contact-form .form-group{
padding: 5px 0;
min-height: 100%;
}
.contact-form .form-group label{
font-weight: 600;
}
.contact-form .form-group button{
display: inline-block;
min-height: 100%;
}
.contact-form .form-group input,
.contact-form .form-group textarea{
border-radius: 0;
padding: 20px 10px;
min-width: 100%;
font-size: 16px;
}
.contact-form .form-group textarea{
padding-top: 10px;
}
.contact-form .form-group .btn-default{
min-width: 100%;
}
.contact-form .form-group input[type="email"],
.contact-form .form-group input[type="phone"],
.contact-form .form-group input[type="text"]
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 42px; /* Increase height as required */
margin-bottom: 0px;
padding: 0 10px; /* Now only left & right padding */
}
.contact-address ul{
list-style: none;
padding: 0;
margin: 0;
}
.contact-address ul li{
font-size: 16px;
}
.contact-address ul li span{
font-weight: 600;
display: inline-block;
min-width: 80px;
}
.contact-form label.error,
.contact-form label.error.valid{
color:#f00;
padding-top: 10px;
}
.contact-form label.error.valid{
color:#018804;
}
.form-alerts .alert{
border-radius: 0;
border: 0;
}
.form-alerts .alert.alert-success,
.form-alerts .alert.alert-danger{
color: #fff;
background: #85ceab;
}
.form-alerts .alert.alert-danger{
background: #fe8080;
}
/* Google Map
/* ---------------------------------------------- */
#google-container {
position: relative;
min-width: 100%;
min-height: 400px;
background-color: #e7eaf0;
}
#cd-google-map {
position: relative;
padding: 20px 0;
}
#cd-zoom-in, #cd-zoom-out {
height: 32px;
width: 32px;
cursor: pointer;
margin-left: 10px;
background-color: rgba(254,82,76, 0.9); /* Primary color, can be changed via colors.css */
background-repeat: no-repeat;
background-size: 32px 64px;
background-image: url("../images/cd-icon-controller.svg");
}
.no-touch #cd-zoom-in:hover, .no-touch #cd-zoom-out:hover {
background-color: #d36868;
}
#cd-zoom-in {
background-position: 50% 0;
margin-top: 10px;
margin-bottom: 1px;
}
#cd-zoom-out {
background-position: 50% -32px;
}
/* 6: Our achievements section
/* ---------------------------------------------- */
.counter-section {
text-align: center;
background: url(../images/counter_bg.jpg) 50% 0 no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.counter-section strong {
display: block;
font-weight: 600;
font-size: 60px;
line-height: 48px;
color: #fff;
}
span.count-description {
display: block;
color: #fff;
font-size: 20px;
line-height: 40px;
text-transform: capitalize;
padding-top: 10px;
}
.counter-wrap{
padding:50px 0;
}
.counter-section .alternate{
background-color: rgba(254,82,76, .2);
}
/* 7. Call to action section (one or two columns)
/* ---------------------------------------------- */
/* 8. Call to action section (two columns)
/* ---------------------------------------------- */
.cta-two-section{
width: 100%;
margin:0;
padding: 50px 0;
background: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
-webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
}
.cta-two-section h3{
font-size: 25px;
line-height: 20px;
font-weight: 900;
color: #fff;
margin-bottom: 2px;
}
.cta-two-section p {
font-size: 18px;
line-height: 27px;
font-weight: 100;
margin: 0px;
color: #fff;
}
.cta-two-section .btn{
margin: 0;
}
/* 9: Client testimonials section
/* ---------------------------------------------- */
.testimonials h1{
margin: 0;
padding: 0;
}
.testimonials p.speech{
padding: 40px;
margin: 20px;
position: relative;
text-align: center;
line-height: 1.5;
background-color: #fff;
border: 2px solid rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.testimonials p.speech:before{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: 80px;
top: 100%;
border: 15px solid;
border-color: rgba(254,82,76, 1) transparent transparent rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
}
.testimonials p.speech:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: 83px;
top: 100%;
border: 12px solid;
border-color: #fff transparent transparent #fff;
}
.client-info{
padding: 10px;
}
.client-info h4{
color: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
margin: 10px 0 0 0;
padding: 0;
}
.client-info span{
display: block;
padding: 5px;
}
.client-info img{
border:2px solid #fff;
padding: 2px;
border-radius: 50px;
height:100px;
width: 100px;
-webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
}
/* 10. Footer
/* ---------------------------------------------- */
footer {
background:rgba(54,53,54,.96); /* Dark color/Footer color, can be changed via colors.css */
color:#fff;
padding: 80px 0 0 0;
}
footer h2{
display: inline-block;
color:#fff;
}
footer h4{
margin: 0 0 20px 0;
padding: 0;
color:#fff;
}
footer p {
margin: 10px 0;
font-size: 14px;
}
footer ul.blog-entries,
footer ul.twitter-entries{
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
footer ul.blog-entries li,
footer ul.twitter-entries li{
margin: 10px 0;
line-height: 1.5;
}
footer ul.blog-entries li span,
footer ul.twitter-entries li span{
display: block;
color: #6d7579;
}
footer .copynote{
padding: 20px 0;
margin-top: 40px;
background:rgba(54, 53, 54, 1); /* Dark color/Footer color, can be changed via colors.css */
}
footer .segment{
padding-bottom: 20px;
}
footer .social a{
display: inline-block;
padding: 6px;
}
.scroll-top {
display: none;
position: fixed;
bottom: 4%;
right: 1%;
z-index: 100;
}
.scroll-top a:link,
.scroll-top a:visited {
display: inline-block;
padding: 5px 15px;
color: #fff;
border: 1px solid rgba(254,82,76, 1);
background: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
font-size: 30px;
}
.scroll-top a:hover {
border: 1px solid #fff; /* Hover border color, can be changed via colors.css */
outline: 0;
color: #fff;
background: #df514c; /* Hover color, can be changed via colors.css */
}
/* 11. CSS3 Animations
/* ---------------------------------------------- */
/* Hero unit mouse animation */
@-webkit-keyframes rotateplane {
0% {
-webkit-transform: translateY(-2px)
}
100% {
-webkit-transform: translateY(7px)
}
}
@keyframes rotateplane {
0% {
transform: translateY(-2px);
-webkit-transform: translateY(-2px);
}
100% {
transform: translateY(7px);
-webkit-transform: translateY(7px);
}
}
/* Navigation link animation */
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
/* 12: Buttons
/* ---------------------------------------------- */
.btn {
border-radius: 0;
border: 0;
padding: 10px 30px;
text-transform: none;
font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 100;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.btn-default {
color: #fff;
border: 1px solid rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
background: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
}
.btn-default:hover,
.btn-default:focus,
.btn-overcolor:hover,
.btn-overcolor:focus {
border: 1px solid #fff; /* Hover border color, can be changed via colors.css */
outline: 0;
color: #fff;
background: #df514c; /* Hover color, can be changed via colors.css */
}
.btn-outlined {
border: 1px solid rgba(9,113,178, 1); /* Secondary color, can be changed via colors.cs */
color: #fff;
background-color: rgba(9,113,178, 1); /* Secondary color, can be changed via colors.cs */
}
.btn-outlined:hover,
.btn-outlined:focus{
border: 1px solid rgba(9,113,178, 1); /* Secondary color, can be changed via colors.cs */
color: rgba(9,113,178, 1); /* Secondary color, can be changed via colors.cs */
background: transparent;
}
.btn-overcolor{
border: 1px solid rgba(255, 255, 255, 1);
color: #fff;
background: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
}
.btn-lg{
margin: 15px 0;
}
.circle {
padding: 7px;
border: 2px solid #fff;
border-radius: 50%;
width: 60px;
height: 60px;
}
.squared {
padding: 10px;
width: 60px;
height: 60px;
}
/* 14: MEDIA QUERIES START
/* ---------------------------------------------- */
/* Media Queries [min-width:767px]
/* ---------------------------------------------- */
@media(min-width:767px) {
.btn {
font-size: 20px;
}
}
/* Media Queries [min-width:768px]
/* ---------------------------------------------- */
@media(min-width:768px) {
.about{
text-align: center;
}
p {
margin: 0 0 35px;
font-size: 18px;
line-height: 1.6;
}
.navbar-custom {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-custom.top-nav-collapse {
padding: 10px 0;
background: rgba(254,82,76, 1); /* Primary color, can be changed via colors.css */
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
-webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
}
.navbar-custom.top-nav-collapse .navbar-brand{
color: #fff;
}
.navbar-custom.top-nav-collapse .button_container span{
background: #fff;
}
.navbar-custom.top-nav-collapse .button_container.active span.top,
.navbar-custom.top-nav-collapse .button_container.active span.bottom{
background:#fff;
}
}
/* Media Queries [max-width:767px]
/* ---------------------------------------------- */
@media(max-width:767px) {
.about,
.cta-two-section{
text-align: center;
}
.carousel-caption {
top: 30%;
margin: 0;
}
.carousel-caption h1 {
font-size: 25px;
}
.carousel-caption .intro-text {
font-size: 20px;
padding: 0;
}
.mouse{
display: none;
}
.circle {
padding: 0px;
font-size: 18px;
border-radius: 50%;
width: 40px;
height: 40px;
}
.navbar-custom a{
color: rgba(254,82,76, 1);
color: #fff;
}
.video-section{
background: url(../images/youtube-video-cover.jpg) no-repeat bottom center scroll;
}
.button_container span,
.button_container span {
background: #fff !important;
}
.button_container.active span.top,
.button_container.active span.bottom{
background:#fff;
}
.cta-two-section .btn{
margin: 20px 0 0 0;
}
.scroll-top {
bottom: 4%;
right: 3%;
}
.scroll-top a:link,
.scroll-top a:visited {
padding:2px 6px;
font-size: 25px;
}
}
/* Media Queries [max-device-width:800px] - Fix for HTML5 videos on mobile devices
/* ---------------------------------------------- */
@media screen and (max-device-width: 800px) {
/*body {
background: url(../images/youtube-video-cover.jpg) #000 no-repeat center center fixed;
}*/
.html5-video-container{
background: url(../images/typing-on-mac.jpg) no-repeat bottom center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
}
#bgvid{
display: none;
}
}
/* Media Queries [min-width:992px]
/* ---------------------------------------------- */
@media screen and (min-width: 992px) {
.about{
text-align: left;
}
.video-controls,
.html5-video-controls{
display: block;
}
.carousel-control{
top: 48%;
margin:0%;
}
.products{
text-align: left;
}
}
/* Media Queries [max-width:1199px]
/* ---------------------------------------------- */
@media(max-width:1199px) {
.navbar-custom .button_container span {
background: #fff;
}
}
/* Selection and other generic styles
/* ---------------------------------------------- */
::-moz-selection {
text-shadow: none;
background: #fcfcfc;
color: #fff;
background: rgba(254,82,76, .8);
}
::selection {
text-shadow: none;
background: #fcfcfc;
color: #fff;
background: rgba(254,82,76, .8);
}
img::selection {
background: 0 0;
}
img::-moz-selection {
background: 0 0;
}
body {
webkit-tap-highlight-color: rgba(254,82,76, .8);
}
/* Debug styles (remove before exporting for production)
/* ---------------------------------------------- */
.debug{
border:1px solid #f00;
}