/*
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!important;
font-weight: 300;
color: #222; /* Can be changed via colors.css */
background-color: #fff; font-size:15px;
}
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;
}
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: 100;
}
.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: 0px 0;
margin: 0 16px;
}
.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: 28px;
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: #FFF;
}
/* Set the middle hamburger bar's opacity to 0 */
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
/* 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: #FFF;
}
.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;
top: 50%;
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;
}
/* 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; font-size:50px;text-shadow: 0 3px #000;
}
.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;
}
/* 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: #ecebeb;
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;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.products-container p{
color:#fff;
}
.products-container span.icon{
display: inline-block;
padding: 20px;
margin: 0 0 22px 0;
min-width: 70px;
color: #fff;
background: rgba(254,82,76, 1);
text-align: center;
border-radius: 50px;
width: 70px;
height: 70px;
}
.products-container .fa-3x {
font-size: 32px;
}
.product-item{
padding: 10px 0;
}
.product-item h3{
margin: 0;
padding: 0 10px;
font-size: 17px;
color: #fff;
}
.product-item p{
font-size: 15px;
padding: 0 50px 0 10px;
line-height: initial;
}
/* 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: 16px;
}
.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:50px;
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: 50%;
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;
}
/* 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: 26px;
line-height: 25px;
font-weight: 900;
color: #fff;
margin-bottom: 8px;
margin-top: 27px;
letter-spacing: 0;
}
.cta-two-section p {
font-size: 17px;
line-height: 27px;
font-weight: 100;
margin: 0px;
color: #fff;
letter-spacing: 0;
}
.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: 7px 20px;
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:hover{ background:#fff;}
.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 25px;
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; color:#fff !important;
}
.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;
}
.services .col-md-4{ width:20%; padding:0 8px;}
.services-item p{ line-height:inherit; font-size:14px;}
./*
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: #222; /* 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;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif!important;
}
p {
margin: 0 0 25px;
font-size: 18px;
line-height: 30px;
}
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: 500;
}
.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;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color:#000;
}
.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: 0px 0;
margin: 0 16px;
}
.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: 0;
height: 28px;
width: 28px;
cursor: pointer;
z-index: 999;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
padding: 0;
float: right;
margin-left: 30px;
}
/* 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: #FFF;
}
/* Set the middle hamburger bar's opacity to 0 */
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
/* 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: #FFF;
}
.button_container span {
background: rgb(254,82,76);
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: #3976cf; /* 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;
top: 50%;
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;
}
/* 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;color:#fff !important;
}
.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;
}
/* 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: #eee !important;
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;
min-height: 292px;
}
.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: #222;
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 20px 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) !important; /* 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;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.products-container p{
color:#fff;
}
.products-container span.icon{
display: inline-block;
padding: 20px;
margin: 0 0 22px 0;
min-width: 70px;
color: #fff;
background: rgba(254,82,76, 1);
text-align: center;
border-radius: 50px;
width: 70px;
height: 70px;
}
.products-container .fa-3x {
font-size: 32px;
}
.product-item{
padding: 10px 0;
}
.product-item h3{
margin: 0;
padding: 0 10px;
font-size: 17px;
color: #fff;
}
.product-item p{
font-size: 15px;
padding: 0 50px 0 10px;
line-height: initial;
}
/* 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: 16px; color: #fff;
}
.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:15px;
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: 50%;
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;
}
/* 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: #3976cf; /* 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: 32px; */
line-height: 25px;
font-weight: 900;
color: #fff;
margin-bottom: 8px;
margin-top: 27px;
letter-spacing: 2px;
}
.cta-two-section p {
/* font-size: 22px; */
line-height: 27px;
font-weight: 100;
margin: 0px;
color: #fff;
/* letter-spacing: 1px; */
}
.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: 7px 20px;
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:hover{ background:#fff;}
.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: 16px;
line-height: 1.6; color:#000;
}
.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(255,255,255,0.9); /* 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: rgb(254,82,76);
}
.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 !important;
}
.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;
}
.services .col-md-4{width: 25%;padding:0 8px;}
.services-item p{line-height:inherit;font-size: 15px;font-weight: 600;}
.products-container h2{ text-align:center; color: #fff; font-size:50px;}
.highlight {
font-weight: 500;
}
.products-container h3.caption{ text-align: center; color:#fff;
margin: 0 0 70px;}
.cta-two-section h4{
color: #fff;
margin: 0 0 20px;
text-align: left;
font-size: 20px;
letter-spacing: unset;
}
.carousel-caption .intro-text{ text-shadow:0 2px #000;}
.navbar-custom{ background:rgba(255,255,255,0.9);}
.cta-two-section .form-control{ height: 45px;
padding: 6px 25px; border:none; border-radius:30px;
}
.cta-two-section .btn{margin: 0;
background: #82ff40;
border: none;
border-radius: 30px;
margin-top: 56px;
display: block;
color: #577c43;
text-transform: uppercase;
font-weight: 800;}
.whatbg{ min-height:390px; text-align:right;}
.block_what{ width: 56%;
padding: 30px;
display: inline-block;
text-align: left;}
.block_what h4{
margin: 0 0 10px;
color: #fff;
font-size: 40px;
font-weight: 800;
text-shadow: 0 1px #000;
}
.block_what h4 span{ font-weight:100;}
.block_what p{ color:#fff; margin:0 0 10px;}
.block_what ul{ margin: 0 0 20px;
color: #fff;
font-size: 18px;
padding: 0 0 0 18px;}
.block_what ul li{ line-height:30px;}
.services .carousel-indicators {
top: -30px;
left: auto; right:0;
width: auto;
margin: 0;
bottom: auto;
}
.carousel-indicators li{ background:#fd4548;}
.services .carousel-indicators li {
background: #fff;
margin: 0 0 0 5px;
width: 15px;
height: 15px;
border-radius: 50%; border:1px solid #fd4548;
}
.services .carousel-indicators li.active {
background: #fd4548;}
.block_what p a{ display:inline-block; border:2px solid #fff; border-radius:30px; padding:5px 30px;}
.block_what p a:hover{ background:#fff;}
.services h2{margin: 40px 0 10px;text-align: center;color:#000;font-weight: 400;font-size: 40px;}
.team h2{ color:#015c95; font-size:50px; font-weight:800;}
.team h2 span{ font-weight:100;}
.team h3.caption{ margin:0 0 50px;}
.team-member h4{ color:#015c95;}
footer{ background:#00112a; padding:50px 0; color:#c4c8ce;}
.ftr_menu ul{ margin:0; padding:0; list-style-type:none; display:inline-block;}
.ftr_menu ul li{ display:inline-block; padding:0 15px; border-left:1px solid #008aa6; line-height:12px;}
.ftr_menu{ text-align:right;}
.ftr_menu ul li a{color:#c4c8ce;}
.ftr_menu ul li:nth-child(1){ border:none;}
.ftr_menu ul li a:hover{color:#fff;}
.products strong{ font-weight:800;font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;}
.testimonials{ padding:80px 0 120px;}
.test_text{ padding:30px 0;}
.test_text p{ color:#000; padding:0 30px;}
.carousel-indicators li{ background:#fd4548;}
.testimonials .carousel-indicators li {
background: #fff;
margin: 0 0 0 5px;
width: 15px;
height: 15px;
border-radius: 50%; border:1px solid #fd4548;
}
.testimonials .carousel-indicators li.active {
background: #fd4548;
}
.testimonials .carousel-indicators {
bottom: -30px;
}
.carousel-caption {
text-shadow: none;
bottom: 25%;
position: absolute;
width: 47%;
right: 54px;
left: auto;
text-align: left;
}
.nopad{ padding:0;}
.about{background: #3976cf; padding:80px 0;}
.about h2{ text-align:center; color:#fff; font-size:50px; margin:0 0 40px;}
.team h2{color: rgba(254,82,76, 1);}
.about p{color:#fff;text-align:center;padding: 0 30px;}
.morebtn{ text-align:center;}
.morebtn a {
display: inline-block;
border: 2px solid #fff;
border-radius: 30px;
padding: 5px 40px;
}
.morebtn a:hover{ background:#fff;color: rgba(254,82,76, 1);}
.inner_banner{ min-height:350px; background-size:cover; position:relative;}
.subtext{position:absolute;left: 0;bottom:20px;}
.subtext h2{ color:#fff; margin:0;}
.subtext p{ color:#fff;}
.innercont{ padding:60px 0 0;}
.innercont h2 {
color: rgba(254,82,76, 1); font-size:45px;
}
.pricetable{ border:1px solid #eee;}
.pricetable td{ padding:10px 15px !important;border-right:1px solid #eee;}
.pricetable th{ padding:10px 15px !important; background:#eee;border-right:1px solid #ddd;}
header .carousel-indicators{ width: auto;
left: 10%;
margin: 0;
text-align: right;
right: 10%;
}
header .carousel-indicators li{ width:35px; border:none; height:6px;margin:0;}
header .carousel-indicators li.active{ width:35px; border:none;height:6px; margin:0; background:#88221f;}
.h_row{ padding:0 50px 20px;}
.anchor a:hover{color: rgb(242, 254, 76);}
.pad_t50{ padding-top:50px;}
.services-item a{color: rgba(254,82,76, 1);}
.services-item a:hover{color:#fff;}
.services-item:hover a{color:#fff;}
.btn-danger:hover {
color: #fff;
background-color: #d9534f;}
.width100{ width:100%;}
.aboutpad{ padding:40px 0;}
.quotesimg{ margin-left:40px; margin-bottom:20px;}
@media(max-width:767px) {.services-item{ overflow:hidden;}
.subtext {
bottom: 0px;}
.aboutimg img{ margin-bottom:10px;}
.innercont {
padding: 30px 0 0;
}.team h3.caption {
margin: 0 0 20px;
}
.aboutpad {
padding: 40px 20px;
}.quotesimg {
margin-left: 0;
margin-bottom: 20px;
width: 40px;
}footer{ text-align:center;}.ftr_menu ul{ display:block; padding:20px 0 0;}
.ftr_menu ul li{ display:block; border:none; padding:0 0 15px;}
.ftr_menu {
text-align: center;
}
.inner_banner {
min-height: 220px;}
.mob_pad_b10{ padding-bottom:10px;}
.no_pull{ float:none !important; padding-bottom:10px;}
.carousel, .item, .active {
height: 400px;
}.carousel-caption {
text-shadow: none;
bottom: 0;
position: absolute;
width: auto;
right: 20px;
left: 20px;
text-align: center;
top: 20%;
}
.block_what {
width: auto;
padding: 30px;
display: block;
text-align: left;
}.block_what h4 {
font-size: 25px;
line-height: normal;
}.whatbg{ min-height:inherit;}
.services .col-md-4{ width:inherit; }
.products-container h2, .team h2 {
font-size: 33px;
}.about h2 {
font-size: 35px;}.caption{ font-size:16px;}
.cta-two-section h4 {
margin: 10px 0 20px;
text-align: center;
font-size: 17px;
}.nopad{ padding:10px 15px;}
#testimonials .text-right{ text-align:center;}
#testimonials.carousel{
height: auto;
}p {
font-size: 15px;
line-height: 25px;
}
.brand-logo img{ height:45px;}
.whatbg {
min-height: 400px;
background: #fe635e !important;
} .testimonials .item{
height: 450px;
}.content-section {
padding: 40px 0;
} header .carousel, header .item, .active {
height: 400px;
}
}
@media(min-width:768px) and (max-width:1024px) {
.whatbg {
min-height: 400px;
background: #fe635e !important;
}.block_what {
width: auto;}
.services .col-md-4 {
width: auto;}.cta-two-section h4{ font-size:20px;}.ftr_menu ul li{ padding:0 5px;}
.ftr_menu ul li a {
font-size: 12px;
}
}
.ul-list {
color: #fff;
font-size:18px;
list-style-type:none;
line-height:35px;
}
.caption {
font-weight: 100;
font-size: 20px;
}
.white {
color: #fff;
}
.footer-icons li{list-style-type:none; display:inline; font-size:10px; padding:0px 10px;}
#image-gallery .modal-dialog {
max-width: 60%;
margin-top: 20px;
}
#image-gallery .modal-body{ padding: 0;}
#image-gallery .modal-footer{position: absolute;
top: 45%;
left: 0;
right: 0;
border: none;}
#show-previous-image{position: absolute;
left: 20px;}
#image-gallery .close{position: absolute;
right: 20px;
top: 20px;
color: #fff;
font-weight: 200;
font-size: 40px;
opacity: 1;
z-index: 99;}
.menu-icons li{display:inline-block!important;}
.topmenu{text-align: right;padding: 25px 0 0;} .button_container{ display: inline-block;}
.topmenu .footer-icons{ display: inline-block;}
.about p br{ display: none;}
textarea.form-control {
height: 200px;
}
.carousel-caption h1{ font-size:40px;}
.ullist li{ padding: 0 0 10px;}
strong{font-weight: 900;}
.inner_banner{margin-top: 108px;}
.inner_banner .container{ position: relative;min-height: 350px;}
@media(min-width:320px) and (max-width:767px) {
.topmenu .footer-icons{ display: none;}
.button_container {
display: inline-block;
position: absolute;
top:20px;
right: 20px;
}.navbar-custom{ padding: 10px 0;}
.button_container span, .button_container span {
background: #6c6c6e !important;
}.carousel-caption h1 {
font-size: 25px;
}
.services .item{min-height: 750px;height: auto !important;}
.carousel, .item, .active {
height: auto;
}.row {
margin-right: 0;
margin-left: 0;
}.ul-list{ padding: 0;}
.top-nav-collapse .button_container span {
/* background: #fff !important; */
}
.inner_banner {
margin-top: 70px;
}.inner_banner .container {
min-height: 220px;
}.subtext{left: 30px;} .carousel-caption{ top: 33%;}
.our-clients .i {
text-align: center;
line-height: initial;
}
}
.img-wrapper {
position: relative;
margin-top: 15px;
img;
{
width: 100%;
}
}
.img-overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
i;
{
color: #fff;
font-size: 3em;
}
}
#overlays {
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
// Removes blue highlight -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
img;
{
margin: 0;
width: 80%;
height: auto;
object-fit: contain;
padding: 5%;
@media screen and (min-width:768px) {
width: 60%;
}
@media screen and (min-width:1200px) {
width: 50%;
}
}
}
#nextButton {
color: #fff;
font-size: 2em;
transition: opacity 0.8s;
&:hover;
{
opacity: 0.7;
}
@media screen and (min-width:768px) {
font-size: 3em;
}
}
#prevButton {
color: #fff;
font-size: 2em;
transition: opacity 0.8s;
&:hover;
{
opacity: 0.7;
}
@media screen and (min-width:768px) {
font-size: 3em;
}
#overlays img{ max-width:100%;}
}
#exitButton {
color: #fff;
font-size: 2em;
transition: opacity 0.8s;
position: absolute;
top: 15px;
right: 15px;
&:hover;
{
opacity: 0.7;
}
@media screen and (min-width:768px) {
font-size: 3em;
}
}
#gallery {
padding: 0 0 100px;
}
#gallery i {
color: #fff;
font-size: 3em;
}
.img-wrapper:hover {
cursor: pointer;
}
#overlays i {
font-size: 1em;
padding: 0 10px;
}
@media screen and (max-width:768px) {
#overlays img{ max-width:100%;}
#prevButton{ position: absolute;
left: 0;}
#nextButton{position: absolute;
right: 0;}
}