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


.row-flex {

	display: flex;
	flex-wrap: wrap;
	}
	
	
.row-flex:before, .row-flex:after	{
	display: table;
   content: " ";}


.col-flex {
	
	
    min-height: 1px;
	float: left;
	display: flex;
	flex-wrap: wrap;
	
	}


  
.cell-flex {
    position: relative;
    overflow: hidden;
	display: flex;
	flex-direction: column;
    
	}


.hero-title {
	
	text-align: left;
	font-size: 70px;
}

.hero-text {
	
	text-align: left;
	font-size: 20px;
}

@media only screen and (max-width: 1200px) {
	
	

 .col-flex {display: block; width:100%;}
 
 .row-flex {display: block;}
	
	.hero-title {
	
	text-align: left;
	font-size: 65px;
}

.hero-text {
	
	text-align: left;
	font-size: 20px;
}
	
	
	
}


@media only screen and (max-width: 900px) { 
	 .col-flex {display: block; width:100%;}
 
 .row-flex {display: block;}
	
	.hero-title {
	
	text-align: left;
	font-size: 50px;
}

.hero-text {
	
	text-align: left;
	font-size: 15px;
}
	
}


@media only screen and (max-width: 760px) {
	
		 .col-flex {display: block; width:100%;}
 
 .row-flex {display: block;}
	
	.hero-title {
	
	text-align: center;
	font-size: 40px;
}

.hero-text {
	
	text-align: center;
	font-size: 15px;
}
	
}


@media only screen and (max-width: 560px) {
	 .col-flex {display: block; width:100%;}
 
 .row-flex {display: block;}
	
	.hero-title {
	
	text-align: center;
	font-size: 40px;
}

.hero-text {
	
	text-align: center;
	font-size: 14px;
}
	
}