/* Default style */

body{
    background: #fff; 
    font-family: 'Saira';
    font-size: 16px;
    color: #777;    
} 

.screen-main-container {
    margin: 0px;  
    margin-top: 65px;    
    padding: 0px;
    border-bottom:0px; 
}

.screen-main-content { 
    width: 100%;
	margin: 0;
    padding: 0;
}

.cover-container {
    margin: 0px;
    padding: 0px;
    color: #fff;
    background-color: transparent;
}  

.navbar {
    font-size: 16px;
    min-height: 65px;
    margin-bottom: 0px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.50), 0 1px 2px rgba(0,0,0,0.24);
}

.navbar-default{
    background-color: #fff; 
    border-color: #fff;   
}

.navbar-left {
  float: left;
  margin-left: 10px;
  border: #00a8bb solid;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
	color: #000;
	background-color: #1abc9c; /* Green */
    border-color: #1abc9c;   
	border-bottom: 3px solid #ff8c00; /* DarkOrange */
}

.icon-bar {
    background-color: #00a8bb;
}

.navbar-nav .navbar-collapse {
    max-height: 540px;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    /* color: #ff8c00; */ /* DarkOrange */
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.navbar-collapse > a:hover {
    background:#1abc9c;
}

.w3-main {
    margin-left:0px;
}

.w3-sidenav {
    width: 220px; 
    z-index: 1000; 
    padding-top: 0px;
}

.w3-collapse > a{
    border-bottom: 1px solid #ccc;
}

.w3-collapse > a:hover{
     background:#616161 !important;
     color: #ff8c00; /* DarkOrange */;
}

.w3-collapse > a:active, .w3-collapse > a:focus{
     background:#616161 !important;
    color: #ff8c00; 
}

.btn {
   border-radius:20px;  
   font-size: 12px;
   margin-bottom: 10px;
}

.btn-default {
    border-radius:20px;
}

.btn-success {
    border-radius:20px;
    background-color: #57C456 ; /* Secondary : Apple */
    border-color: #57C456; 
}

.btn-primary {
    border-radius:20px;
    background-color: #00a8bb; /* Primary : Pacific Blue */
    border-color: #00a8bb; 
}

.form-control {
    font-size: 16px; 
    /* max-width: 400px;  */
}

a {
    cursor: pointer;
}

.clickable  {
   cursor: pointer;
}

textarea {
  width: 450px;
  height: 150px;
}

#map {
    height: 420px;
    width: 100%;
}

/* Sections conf */

section {
	margin: 0px;
	padding: 0px;	
}

.section-title  {
	padding: 15px;
	padding-left: 15px;
	color: #00a8bb; 
}

.section-content{ 
	margin-left: 30px;	
}

#about{
	padding-top: 30px;
}

#overview{
	margin-bottom: 80px; 
}

#demo{
	margin-top: 20px; 
	margin-bottom: 0px;
	padding-bottom: 120px;  
	background-color: #F0F0F0;
}

#promo{
	padding-top: 20px; 
	padding-bottom: 50px;  
	background-color: #00a8bb;
	color: #fff;
}

#team {
	margin-bottom: 80px;
}

#contact{
	padding-bottom: 80px; 
	background-color: #F0F0F0;
}

@media screen and (min-width: 1025px) {
   
    .screen-title {
        padding: 0px;    
        margin-left: 5px;
        margin-right: 5px;
    }
    
    .cover-content-title{
        position: absolute; 
        top: 120px;
        left: 60px;
        width: 55%;
        font-size: 40px;
    }
	
	.section-title  {
		font-size: 25px; 
		padding-left: 30px;		
	}

	.section-content{
		font-size: 20px;   
	}
    
    .video-container {
        margin: 0 auto; 
        width: 640px;
        height: 360px;
    }
	
	.promo-text{
		margin-top: 50px;
		margin-left: 100px;
	}

}

/* Style for medium screens */
@media screen and (max-width: 1024px) {
    
	.screen-title {
        padding: 0px;    
        margin-left: 3px;
        margin-right: 3px;
    }
	
    .cover-content-title{
        position: absolute; 
        top: 120px;
        left: 20px;
        width: 50%;
        font-size: 35px;
    }
	
	.section-title  {
		font-size: 20px;   	
	}
	
	.section-content  {
		font-size: 16px;   	
	}
	
     .video-container {
        margin: 0 auto; 
        width: 540px;
        height: 300px;
    } 
	
	/* Sections conf */
	section {
		margin-top: 0px;
		padding: 10px;	
	}

	#about{
		padding-top: 10px;
	}

	#overview{
		margin-bottom: 20px; 
	}

	#demo{
		margin-top: 10px; 
		padding-bottom: 20px;  
	}

	#promo{
		padding-top: 10px; 
		padding-bottom: 20px;  
	}

	#team {
		margin-bottom: 20px;
	}

	#contact{
		padding-bottom: 20px; 
	}
	
	.promo-text{
		margin-top: 25px;
		margin-left: 50px;
	}
 }
 
 
 @media screen and (min-width: 768px) {
	.row-large{
		display:block;
	}
	
	.row-small{
		display:none;
	}
	.section-content > li {
		margin-bottom:20px;
	}
 }
 
 @media screen and (max-width: 767px) {
	.row-large{
		display:none;
	}
	
	.row-small{
		display:block;
	}
	
	.section-content > li {
		margin-bottom:10px;
	}
	
	.section-title  {
		font-size: 18px;   	
	}
	
	.section-content  {
		font-size: 16px;   	
	}
 }
   

/* Style for small screens */  

@media screen and (max-width: 639px) {
     
    .cover-content-title{
        position: absolute; 
        top: 100px;
        left: 20px; 
        width: 60%; 
        font-size: 25px;
    }
   
    .video-container {
        margin: 0 auto; 
        width: 300px;
        height: 200px;
    }
	
	.promo-text{
		margin-top: 10px;
		margin-left: 25px;
    }
}


@media screen and (max-width: 400px) {
     
    .cover-content-title{
        position: absolute; 
        top: 75px;
        left: 20px; 
        width: 55%; 
        font-size: 20px;
    }
    
      .video-container {
        margin: 0 auto; 
        width: 300px;
        height: 200px;
    }
	
	.promo-text{
		margin-top: 0px;
		margin-left: 10px;
    }
}


/* Style for very big screens */

@media screen and (min-width: 1200px) {
   
    .screen-title {
        padding: 0px;    
        margin-left: 30px;
        margin-right: 50px;
    }
    
    .cover-content-title{
        position: absolute; 
        top: 220px;
        left: 60px;
        width: 50%;
        font-size: 40px;
    }
	
	.promo-text{
		margin-top: 100px;
		margin-left: 100px;
    }
 }

/* Increasing Bootstrap 3.3.2 Navbar breakpoint : break starting from 1020px or less */

@media screen and (max-width: 1020px) {
    
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .collapse.in{
        display:block !important;
    }
}

.carousel-full{
    width: 100%;
}

@media screen and (min-width: 1025px) {
     .fix-left-padding{
         padding-left: 30px;
     }
}
    
.capbox {
	display: table;
	background-color: rgba(221, 221, 221, 0.28);
    border: 1px solid rgba(204, 204, 204, 0.6);
    border-radius:18px;
	padding: 8px 8px 8px 8px;
	}

.capbox-inner {
	font: bold 11px arial, sans-serif;
	color: #000000;
	background-color:rgba(204, 204, 204, 0.28);
	margin: 5px auto 0px auto;
	padding: 3px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}

#CaptchaDiv {
	font: bold 17px verdana, arial, sans-serif;
	font-style: italic;
	color: #000000;
	background-color: #FFFFFF;
	padding: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	user-select: none;
	cursor: pointer;
}

#CaptchaInput { margin: 1px 0px 1px 0px; width: 135px; }


.send-button {
    margin-top: 46px;
    width: 150px;
}

@media (max-width: 992px) {
    .send-button {
        margin-top: 50px;
        width:initial;
    }
}