@charset "utf-8";



/*@import url("masterclass.css");*/



/* Simple fluid media



   Note: Fluid media requires that you remove the media's height and width attributes from the HTML



   http://www.alistapart.com/articles/fluid-images/ 



*/



img, object, embed, video {

	max-width: 100%;

}



/* IE 6 does not support max-width so default to width 100% */



.ie6 img {

	width:100%;

}



html.loading #hideonload {

		opacity: 0;

		   -moz-transition: opacity 0.3s ease-out;

		     -o-transition: opacity 0.3s ease-out;

		-webkit-transition: opacity 0.3s ease-out;

		    -ms-transition: opacity 0.3s ease-out;

		transition: opacity 0.3s ease-out;

	}



	html.loading:after {

		content: 'Loading...';

		display: initial;

		line-height: 1em;

		margin-top: -.5em;

		position: absolute;

		text-align: center;

		top: 50%;

		width: 100%;

	}


/* Mobile Layout: 480px and below. */



.gridContainer {

	margin-left: auto;

	margin-right: auto;

	padding-top: 1.1375%;	

}



#LayoutDiv1 {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#main-container {

	height: 100%;

}



#comercial-container {
    float: left;
    margin-left: 0;
    width: 20%;
    box-sizing: block;
    text-align: center;
    height: 95vh;
    overflow-y: auto;
    overflow-x: hidden;
}



#comercial-content {

	width: 100%;

	display: block;

	text-align: center;

    visibility: visible;	

}


#comercial-content h3{

	margin-top: 0;	
	
	margin-bottom: 10px;

	font-size: 14px;
}



#project-content {

	float: none;

	margin-left: 0;

	width: 100%;

	display: block;

	text-align: center;	

}

.pagespan {
    margin-top: 0;
}

#sub-home-front {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	color: #FFF;

	text-align: center;	

}






#nav-container {	

    clear: both;	

    display: block;	

    float: left;	

    margin-left: 0;

    width: 100%;

}



#nav-container-content {	

    height: 160px;	

    overflow: auto;	

    position: relative;	

    width: 100%;

}





#nav-content {	

    height: auto;	

    width: 2100px;

}



#home-projects {

	width: 100%;

	display: block;

}



#home-footer {

	clear: both;

	float: left;

	margin-left: 1%;

	width: 98%;

	display: block;

	text-align: center;			      

    padding: 10px 0;

}



#home-footer img {

    margin-left: 10%;

    margin-top: 3.5%;

    width: 70%;

}



#header {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	color: #FFF;

	text-align: center;

	padding: 3% 0;

}



#header img{

	width: 100%;

}



#initial-image {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#initial-image img {

        width: 100%;

        margin-left: 0;

}



#initial-image a {

        opacity: 0.5;

}





#initial-image a:hover {

        opacity: 0.7;

}



#sub-header {

	clear: both;

	float: left;

	margin-left: 1%;	

	width: 98%;

	display: block;

	line-height: 1.5em;

	text-align: center;

}



#sub-header-page {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	text-align: center;

	letter-spacing: 0.2em;

	line-height: 1.5em;

}



#sub-sub-header-home {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	background-color: #333;

	color: #FFF;

	text-align: center;

}



#sub-sub-header {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	background-color: #333;

	color: #FFF;

	text-align: center;	

}



#sub-sub-sub-header {

    clear: both;

    color: #000000;

    display: block;

    float: left;

    font-size: 24px;

    line-height: 24px;

    padding-bottom: 14px;

    text-align: center;

    width: 100%;

}



#sub-sub-sub-sub-header {

    clear: both;

    color: #000000;

    display: block;

    float: left;

    font-size: 16px;

    line-height: 24px;

    text-align: center;

    width: 100%;

}



#sub-home-home {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	text-align: center;

	color: white;

	background-color: #03ADC4;

	line-height: 1.5em;

	padding-top: 0.5%;

}



#home-cont {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	text-align: center;

	padding: 20% 0;

  background: red; /* For browsers that do not support gradients */

  background: -webkit-radial-gradient(closest-side, #00D1FF, white, #00D1FF); /* Safari */

  background: -o-radial-gradient(closest-side, #00D1FF, white, #00D1FF); /* Opera 11.6 to 12.0 */

  background: -moz-radial-gradient(closest-side, #00D1FF, white, #00D1FF); /* Firefox 3.6 to 15 */

  background: radial-gradient(closest-side, #00D1FF, white, #00D1FF); /* Standard syntax */

}



#home-but {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#home-but a:hover{

	opacity:0.5;

}



#home-but img {

	width: 50%;

}



#project {

	width: 90%;

	padding: 3% 5% 10% 5%;

	display: block;

}



#home-img {

	float: left;

	width: 50%;

	margin: 0 0 5%;

}



#home-proj-title {

	float: right;

	width: 50%;

	display: block;

}



#home-img img{

	width: 100%;

}



#home-img a:hover{

	opacity: 0.5;

}



#arh {

	clear: both;

	float: left;

	margin-left: 0;

	width: 84%;

	display: block;

	padding: 3% 8%;



  /* Safari 5.1 to 6.0 */



  background: -webkit-radial-gradient(1% 1%, farthest-corner, #E8E8E8 30%, #c2c2c2 100%); 



  /* For Opera 11.6 to 12.0 */

  

  background: -o-radial-gradient(1% 1%, farthest-corner, #E8E8E8 30%, #c2c2c2 100%);



  /* For Firefox 3.6 to 15 */



  background: -moz-radial-gradient(1% 1%, farthest-corner, #E8E8E8 30%, #c2c2c2 100%);



  /* Standard syntax */



  background: radial-gradient(farthest-corner at 1% 1%, #E8E8E8 30%, #c2c2c2 100%);



}



#arh-but {

	clear: both;

	float: left;

	margin-left: 0;

	width: 30%;

	display: block;

}







#arh-but img{

	width: 100%;

}



#arh-but a:hover{

	opacity:0.5;

}



#bord {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#footer {

	clear: both;

	float: left;

	margin-left: 0;

	margin-top: 1.8%;

	width: 100%;

	display: block;

	background-color: #333;

	color: #FFF;

	text-align: center;	

	border-top: 10px solid #03bbd6;

}



#footer a:hover{

	color: #9c2a2a;

}



/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */



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





#header {

	clear: both;

	float: left;

	margin-left: 0;

	display: block;

    padding: 1.5% 1%;

}



#home-cont {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#home-but {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#home-img {

	width: 40%;

	margin: 0 0 5% 5%;

}



#footer {

	margin-top: 1.3%;

}



}


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


/* Desktop Layout: 769px to a max of 1599px.  Inherits styles from: Mobile Layout and Tablet Layout. */



@media only screen and (min-width: 769px) and (max-width: 1599px) {



#comercial-content h3{

	margin-top: 10vh;

	margin-bottom: 10px;

	font-size: 20px;	

}



#sub-home-front {

	margin-left: 30%;

	width: 40%;

	font-size: 1em;

	float: left;

	clear: both;

}



#header {

	clear: both;

	float: left;

	margin-left: 30%;

	width: 40%;

	display: block;

	padding: 1.5% 0;

}



#initial-image {

	clear: both;

	float: left;

	margin-left: 30%;

	width: 40%;

	display: block;

}



#sub-header {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	line-height: 1.8em;

	text-align: center;

}



#sub-header-page {

	clear: both;

	float: left;

	margin-left: 30%;

	width: 40%;

	display: block;

	text-align: center;

	letter-spacing: 0.2em;

	line-height: 1.8em;

	padding-top:0.05%;

}



#sub-sub-header-home {

	clear: both;

	float: left;

	margin-left: 30%;

	width: 40%;

	display: block;

}



#sub-sub-header {

	clear: both;

	float: left;

	margin-left: 30%;

	width: 40%;

	display: block;

}



#sub-sub-sub-header {

    clear: both;

    color: #a000000;

    display: block;

    float: left;

    font-size: 24px;

    line-height: 24px;

    margin-left: 0;

    padding-bottom: 14px;

    text-align: center;

    width: 100%;

}



#sub-sub-sub-sub-header {

    clear: both;

    color: #000000;

    display: block;

    float: left;

    font-size: 16px;

    line-height: 24px;

    text-align: center;

    width: 100%;

}



#sub-home-home {

	clear: both;

	float: left;

	margin-left: 30%;

	width: 40%;

	display: block;

	text-align: center;

	letter-spacing: 0.3em;

	line-height: 1.8em;

	padding-top:0.05%;

}



#home-projects {

	width: 99.6%;

	display: block;

	padding:0.2%

}



#home-cont {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}







#home-but {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#home-img {

	width: 40%;

	margin: 0 0 5% 5%;

}



#home-proj-title {

	float: right;

	width: 50%;

	display: block;

	margin: 0;

	padding: 0;

}



#arh {

	clear: both;

	float: left;

	margin-left: 30%;

	width: 30%;

	display: block;

	padding: 1% 5%;

}



#bord {

	clear: both;

	float: left;

	margin-left: 30%;

	width: 40%;

	display: block;

}



#home-footer {

	margin-left: 0;

	width: 100%;

}



#footer {

	margin-left: 30%;

	width: 40%;

	margin-top: 0.4%

}



}







/* Desktop Layout: from 1600px.  Inherits styles from: Mobile Layout and Tablet Layout. */



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



#comercial-content h3{

	margin-top: 10vh;

	margin-bottom: 10px;

	font-size: 20px;	

}





#sub-header {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	line-height: 1.8em;

	text-align: center;

}




#home-footer {

	margin-left: 0;

	width: 100%;

}



}