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

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
	.column-grid { display:none;}
	.column-small { float:none;}
	.column-large { width:90%; padding:5%; font-size:12px;}
	.column-large p, #values .column-small p { font-size:12px;} { font-size:12px;}
	.column-large h1, #values .column-small h1, #value-section h1{ font-size:18px;}
	
	#whyus-image { display:none;}
	#copyright p, #copyright a{ color:#FFF; -webkit-margin-before: 0px; -webkit-margin-after: 0px; text-align:justify; font-size:10px;}
	#values-list { display:none;}
    #logo { width: 120px; margin-top: 5px;}
    .project img { width:100%;}
	.title { font-size:60px; font-weight:700; top:30%; left:50%; transform: translate(-50%, -50%);}
    .subtitle { font-size:10px; letter-spacing:20px; }

}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
	#logo { display:none;}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {

	.column-large { width:90%; padding:5%; font-size:12px;}
	.column-grid { display:none;}
	
	.section {padding:0;}
	
	#copyright .section { margin:0px;}
	#copyright p, #copyright a{ color:#FFF; -webkit-margin-before: 0px; -webkit-margin-after: 0px; text-align:justify; font-size:10px;}
	#whyus-image { display:none;}
	
	#development-section { max-width:892px; margin:0 auto;}
	.subtitle { top:50%; }
	
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-width : 1024px) 
and (max-width : 1024px) {
}

/* iPads (portrait) */
@media only screen 
and (min-width : 768px) 
and (max-width : 901px) {

    .project { display: table; float:none!important;  margin: 10px auto!important; }
    .column-small { float:left; max-width:90%;}
    #values { width:100%;}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1100px)
and (max-width : 1450px) {
	#development-section { max-width:1000px; margin:0 auto;}
	.subtitle { top:50%; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
.ri-grid, .ri-grid2{
	margin: none;
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
