﻿/*================================
    GENERAL STYLES
==================================*/

@import url(http://fonts.googleapis.com/css?family=Roboto); /* GOOGLE FREE FONTS */
@import url(http://fonts.googleapis.com/css?family=Dosis); /* GOOGLE FREE FONTS */
@import url(http://fonts.googleapis.com/css?family=Nunito); /* GOOGLE FREE FONTS */

body {
    font-family: 'Nunito', sans-serif;
}

section {
    //padding-top: 80px;
    //padding-bottom: 120px;
}

.head-set {
    padding-top: 20px;
    padding-bottom: 20px;
}

.CTAPanel {
	color:#222;
}

.pad-bottom {
    padding-bottom: 60px;
}
/*================================
    NAVBAR STYLES
==================================*/
.navbar-default {
    background-color: rgb(35, 133, 161);
    border-color: transparent;
    color: #fff;
}

    .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover {
        color: #fff;
    }

.navbar-brand {
    padding: 0px;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color:#fff;
}


h1 {
	padding-top: 80px;
	font-weight: 900;
	font-size: 70px; 
	font-family: 'Dosis';
}
@media only screen and (max-width: 500px) {
    h1 {
		padding-top: 40px;
		font-size: 45px; 
	}
}

/*================================
    HOME SECTION STYLES
==================================*/


.video-responsive {
	padding-bottom: 56.25%;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.canvas,
.video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 
  
  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;
  
  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #000;
  z-index: -100;
}
@media only screen and (max-width: 500px) {
.video-responsive {
	padding-bottom: 10px;
}
	.canvas,
	.video {
	/*	height: 100%;
		width: auto;*/
		transform: translate(-60%,-50%);
	}
}

/*STYLE OF BACKGROUND IMAGE*/
#home, #home2 {
    /*Full Witdth background image*/
    padding: 0px;
    -webkit-background-size: cover;
    background-size: cover;
    -moz-background-size: cover;
    min-height: 400px;
}
    /*STYLE FOR OVERLAY CLASS - WHICH IS ABOVE IMAGE WITH OPACITY/TRANSPARENCY 0.75*/
    #home .overlay, #home2 .overlay {
        padding-top: 0px;
        background-color: rgba(35, 133, 161,0.50); /*.75 opacity of the color so that background image is visible*/
        min-height: 400px;
        color: #fff;
    }
	#home .overlay, #home2 .overlay {
        padding-top: 0px;
        background-color: rgba(35, 133, 161,0.50); /*.75 opacity of the color so that background image is visible*/
        min-height: 400px;
        color: #fff;
    }
	#home .overlay_gold, #home2 .overlay_gold {
        padding-top: 0px;
        background-color: rgba(184,134,11,0.70); /*.75 opacity of the color so that background image is visible*/
        min-height: 400px;
        color: #fff;
    }
/*SMPLE CLASS TO ADJUST SECTION PADDING & HEIGHT*/

/*CLASS TO FORMAT TEXT*/
.p-cls {
    padding-top: 30px;
    padding-bottom: 40px;
}

/* ================
   OVERVIEW SECTION
   ================ */
.overview {
   font-size: x-large;
   color: rgb(255, 255, 255);
   font-family: 'Nunito';
   line-height: 1.5;
   text-align: left;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
}

.overview .list-group-item {
	background:#fff;
	color:#222;
}

/*======================================
    PARALLAX LIKE / STATS SECTION STYLES
=========================================*/

.parallax-like {
    /* DEFINE IMAGE PATH CAREFULLY*/
	padding: 0px;
    -webkit-background-size: cover;
    background-size: cover;
    color: #fff;
    background-attachment: fixed;
}

    .parallax-like .overlay {
        min-height: 200px;
        background: rgba(35, 133, 161,0.6);
        font-size: 40px;
        padding-bottom: 60px;
        padding-top: 60px;
    }
	
	.parallax-like .overlay_white {
        min-height: 200px;
        background: rgba(255, 255, 255,0.7);
        //font-size: 40px;
        padding-bottom: 60px;
        padding-top: 60px;
    }
	
	
	.parallax-like .overlay_black {
        min-height: 200px;
        background: rgba(0,0,0,0.7);
        //font-size: 40px;
        padding-bottom: 60px;
        padding-top: 60px;
    }
	
	.parallax-like .overlay_gradient {
        min-height: 200px;
        background: #25b7bc; /* Old browsers */
		background: -moz-linear-gradient(45deg, #25b7bc 0%, #9d7be5 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(45deg, #25b7bc 0%,#9d7be5 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(45deg, #25b7bc 0%,#9d7be5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#25b7bc', endColorstr='#9d7be5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient *///font-size: 40px;
        padding-bottom: 60px;
        padding-top: 60px;
    }
	
/*================================
    PORTFOLIO / WORK SECTION STYLES
==================================*/
.portfolio-item img:hover { /* POSTFOLIO IMAGE BIG ON HOVER */
    cursor: pointer;
    -webkit-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s; /* Safari */
    z-index: 1;
}

/*================================
    VIDEO SECTION STYLES
==================================*/
#video-sec {
    color: #fff;
    text-align: center;
}

    #video-sec .overlay {
        background-color: rgba(0, 0, 0, 0.55);
        min-height: 300px;
        color: #fff;
    }

    
/*================================
    CLIENTS SECTION STYLES
==================================*/
#clients {
    background-color:#f4f4f4;
    padding-bottom:50px;
    padding-top:50px;
}
    #clients img {
        opacity:0.5;
        cursor:pointer;
    }
        #clients img:hover {
            opacity:1;
        }
/*================================
    FOOTER SECTION STYLES
==================================*/

footer {
    padding: 20px;
    font-size: 15px;
    text-align: center;
    font-weight: 900;
    background-color: rgb(35, 133, 161);
    color: #fff;
}

    footer a, footer a:hover {
        color: #fff;
        text-decoration: none;
    }
	
	
	
/* Global */
 

img { max-width:100%; }

a {
    -webkit-transition: all 150ms ease;
	-moz-transition: all 150ms ease;
	-ms-transition: all 150ms ease;
	-o-transition: all 150ms ease;
	transition: all 150ms ease; 
	}
    
a:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
    filter: alpha(opacity=50); /* IE7 */
    opacity: 0.6;
    text-decoration: none;
}




.thumbnails li> .fff .caption { 
    background:#fff !important; 
    padding:10px;
	padding-bottom:0px;
}


    
.page-header h3 {
    line-height: 0.88rem;
    color: #000;
}

ul.thumbnails { 
    margin-bottom: 0px;
}




/* Carousel Control */
.control-box {
    text-align: right;
    width: 100%;
}
.carousel-control{
    background: #666;
    border: 0px;
    border-radius: 0px;
    display: inline-block;
    font-size: 34px;
    font-weight: 200;
    line-height: 18px;
    opacity: 0.5;
    padding: 4px 10px 0px;
    position: static;
    height: 30px;
    width: 15px;
}





li { list-style-type:none; }

::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
::-moz-selection { background: #ff5e99; color: #FFFFFF; }

