@charset "UTF-8";
/* CSS Document */


body{
	background-color:#fff;
		background-image:url(../imgs/HERO_particles.png);
		background-repeat:no-repeat;
		background-size:cover;
		
/*
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	color:#12161a;margin:0;
	padding:0;
	}



#hero{
	
	background-color:#000;
	background-repeat:no-repeat;
	background-position:center;
	height:570px;
	display:block;
	border-bottom:3px #FFFFFF solid;
	margin:0 0 0;
	padding:0 0;
	/*background-color:#000;
	background-image:url(../imgs/bg.png);
	background-repeat:no-repeat;
	background-size:contain;

	display:block;
	position:absolute;
	border-bottom:3px #FFFFFF solid;
	margin:0;
	padding:0;*/
	}

@media screen and (min-width:1025px){
			
			
			.heroPano .col3 img{
				padding:0;
				margin:0 0 -30px 100%;
				width:185px;
				display:block;
						
				}
				
			.heroVert{
				display:none !important;
				}	
		
			}
		
@media screen and (max-width:500px){
			.heroVert .contCol{
				padding:0;
			
				width:100%;
				
					
				}
			.heroVert .contCol .col1{
				padding:0;
				margin:20px 5% 0;
				width:40%;
                float: left;
				display:inline;
				}	
					.heroVert .contCol .col1 img{
				
				width:145px;
				margin:0 auto;
			
				}	
			.heroVert .contCol .col2{
				padding:0;
				margin:20px 5% 0;
				width:40%;
                float: right;
				display:inline;
						
				}	
				.heroVert .contCol .col2 img{
				
				width:145px;
				margin:0 auto;
			
				}	
				.heroVert .contCol .col3{
				padding:0;
				margin:180px 5% 0;
				width:40%;
                float: left;
				display:inline;
						
				}
				
				.heroVert .contCol .col3 img{
				
				width:150px;
				margin:0 auto;
			
				}
    
    	           .heroVert .contCol .col4{
				padding:0;
				margin:180px 5% 0;
				width:40%;
                float: right;
				display:inline;
						
				}
				
				.heroVert .contCol .col4 img{
				
				width:150px;
				margin:0 auto;
			
				}
			.heroPano{
				display:none !important;
								}	
			
			.heroVert{
			
				/*	display:block;
					height:200px;
					position:absolute;*/
					}
			}

@media screen and (min-width:501px) and (max-width:1024px){
			.heroVert .contCol div img{
				padding:0;
				margin:0 0 0 15%;
				width:22%;
				min-width:135px;
				display:block;
						
				}
				
			.heroPano{
				display:none !important;
								}	
			
			.heroVert{
			
					display:block;
					height:200px;
					position:absolute;
					}
			}

@media screen and (max-width:500px){
	#hero{	
		background-image:url(../imgs/HERO_bg_sq.jpg);
		background-size:cover;
	}
	}
	
@media screen and (min-width:501px) and (max-width:1024px){
	#hero{	
		background-image:url(../imgs/HERO_bg_rec.jpg);
		background-size:cover;
	}
		}
		
@media screen and (min-width:1025px){
	#hero{	
		background-image:url(../imgs/HERO_bg_pano.jpg);
		background-size:cover;}
		}


	
.contCol{
	/*background-image:url(../imgs/HERO_particles.png);
	height:500px;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	width:100%;
	margin:0;
	padding:0;
	z-index:10;*/
	
	}
	
@media screen and (min-width:501px){
	
	.col1, .col2, .col3, .col4 {
		width:25%;
		margin:0;
		padding:0;
		float:left;
		min-height:100px;
	}
	
	.col1 img{
	width:60%;
	margin:20%;
		min-width:110px;
	
	height:auto;
	}
	
		.col3 img{
	width:60%;
	margin:20%;
		min-width:110px;
	height:auto;
	}
	
	}	

@media screen and (max-width:500px){
	/*.col1{
		width:30%;
		margin:370px 5% 0;
		padding:0;
		float:left;
		min-height:100px;
	}
	
	.col2 {
		width:30%;
		margin:370px 5% 0;
		padding:0;
		float:left;
		min-height:100px;
	}
	
	.col3 {
		width:30%;
		margin:370px 5% 0;
		padding:0;
		float:left;
		min-height:100px;
	}
    
    	.col4 {
		width:30%;
		margin:370px 5% 0;
		padding:0;
		float:left;
		min-height:100px;
	}
	.col1 img{
	width:40%;
	margin:0 5%;
	min-width:100px;
	height:auto;
	}
	.col3 img{
	width:40%;
	margin:0 5%;
	min-width:100px;
	height:auto;
	}
    */

	}	

	
		


.col2 img{
	width:100%;
	height:auto;
	}
	@media screen and (max-width:480px){
		
	#info{
	margin:50px 10% 0;

	/*font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	font-family: 'Lato', sans-serif;
	font-weight:400;
	font-size:1.1em;}
	}

	@media screen and (min-width:481px){
	#info{
	margin:50px 25% 0;
	
	/*font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	font-family: 'Lato', sans-serif;
	font-weight:400;
	font-size:1.1em;}
	}
	
	
	
	.latoBold{
		font-weight:900;
		}
		
	.latoBig{
		font-size:1.2em;
		
		}	
		
	.latoOne{
		font-size:1em;
		
		}		
		.latoOneSmall{
		font-size:.75em;
		
		}
	.underline{
		text-decoration:underline;
		}	
		
a:link{
	text-decoration:none;
	color:#12161a;
	}	
	
a:visited{
	text-decoration:none;
	color:#12161a;
	}			
	
.logoCredits{
			width:50%;
			margin:0 25%;text-align:center;
			}		
@media screen and (max-width:700px){
	.logoCredits img{
			width:100% !important;
			}
	}

@media screen and (min-width:701px){
	.logoCredits img{
			width:200px !important;
			}
	}			
			

			

.contDosCol{
	width:100%;
	margin:0;
	padding:0;
	display:block;}
	
	@media screen and (max-width:900px){
		
		.DosColUna{
	width:100%;
	margin:0;
	padding:0;
	float:left;
	}

.DosColDos{
width:100%;
margin:0;
	padding:0;
	float:left;
	}
}

	@media screen and (min-width:901px){

.DosColUna{
	width:45%;
	margin:0;
	padding:0;
	float:left;
	}

.DosColDos{
width:45%;
margin:0;
	padding:0;
	float:right;
	}
	
	}


	
.logoInk{
	width:100px;
	float:left;
	padding:8px 16px;
	}
	
	nav#socialsN{
	float:right;

	
	}
nav#socialsN i{
	font-size:18px;
	padding:5px;
	margin:25px 5px;
	}	
/*	
.w3-container{padding:0.01em 16px;}		


.w3-padding{padding:8px 16px!important;}
*/
header{
	/*display:block;*/background-color:#000;
	position:fixed;
	z-index:100;
	width:100%;
	top:0;/**/
	/*height:57px;*/}
	
	.clear{
		float:none;
		clear:both;
		}
		
#bottomSection{

	}

.subscribe{
	/*background-color:#000;*/
	width:100%;
	height:200px;
	margin:40px 0 0;
	padding:40px 0 20px;
	text-align:center;	}
	

		
		
	



@media screen and (max-width:500px){
   
    .quoteHeroInt{
        display: block;
        text-align: center;
        margin: 0 auto 80px;
        width: 250px;
        }
}


@media screen and (min-width:501px)and (max-width:1024px){

    .quoteHeroInt{
    /*background: red; */
    float: right;
    margin: 420px 20px 0;
        bottom: 0;
    width: 280px;
    }
}

@media screen and (min-width:1025px){

   /*  .quoteHeroInt{
   background: red; 
    float: left;
    margin: -20px 50px 0;
    width: 300px;
    }*/
    .quoteHeroInt{
    margin:-20px auto 0 42%;

    width: 30%;
        max-width: 300px;
    text-align: center;
        display:inline;
    }
}