@CHARSET "utf-8";

/*------------------------------------
			[RESPONSIVE CSS]
-------------------------------------*/
@media only screen and (max-width: 1024px) {
	
	.icon-menu{ display:inline-block; }
	
	#ulmenu{ display:none; }
	
	#content-menu, #wrapper,
	#content-about, #content-special,
	#content-year, #content-blog, 
	#content-bottom-footer, #form{ width:100%; }
	
	#wrapper{ min-width:100%; }
	
	#content-magazine{ width:65%; }
	
	.box-project{ width:28%; }
	
	.top-box {
    	height: 261px;
    	margin-bottom: -1px; }
    	
    .bottom-box{ height:265px; }
	
	#footer{ width:calc(100% - 30px); }
	
	#content-general {
	    float: left;
	    padding: 0px 15px 15px 15px;
	    left: 0;
	    margin-left: 0;
	    position: relative;
	    width: calc(100% - 30px); }
	    
	#left-content-blog{
		width: 590px; }
		
	h4{ font-size:30px; }
	
	.caption{ margin-top:-140px; }	
		
	.caption2{ margin-top:15px; }
	
	.ma-bottom{ font-size:14px; }
}  

@media only screen and (min-width: 600px) and (max-width: 800px) {
	
	h1{ font-size:24px; }
	
	#content-menu, #wrapper,
	#content-about, #content-special,
	#content-year, #content-blog, 
	#content-bottom-footer, #form{ width:100%; }
	
	#wrapper{ min-width:100%; }
	
	#content-magazine{ width:85%; }
	
	#about-left, #about-right {
	    float: left;
        font-size: 14px;
	    line-height: 25px;
	    padding: 5px;
	    width: calc(47% - 10px); }
	
	#about-left{ margin-left:3%; }
	
	.box-project{
		font-size:14px; 
		width:31%; }
		
	.marginserv { margin-right: 0px; }
	
	.top-box {
    	height: 147px;
    	margin-bottom: -1px; }
    	
    	.margin{ margin-right:10px; }
    	
    .bottom-box{ height:320px; }
	
	#footer{ width:calc(100% - 30px); }
	
	#content-general {
	    float: left;
	    padding: 0px 15px 15px 15px;
	    left: 0;
	    margin-left: 0;
	    position: relative;
	    width: calc(100% - 30px); }
	    
	#right-content, #left-content{ width: calc(100% - 30px); }
	    
	#left-content-blog, #right-content-blog{
		width: 100%; }
		
	h4{ font-size:30px; }
	
	.caption{ margin-top:-140px; }	
		
	.caption2{ margin-top:15px; }
	
	.caption-text{ font-size:15px; }
	
	.ma-bottom{ font-size:14px; }
	
	.box-year{ width:32%; }
	
	#adv-left, #adv-right {
	    width: calc(100% - 70px); }
	    
	#right-content-quienes-somos{ width: calc(100% - 30px); }
	
	.responsivewidth{ width:50%; }
	
	.marleftbox{ margin-left:0; }
	
}

@media only screen and (min-width: 300px) and (max-width: 568px) {

	h1{ font-size:24px; }
	
	#content-menu, #wrapper,
	#content-about, #content-special,
	#content-year, #content-blog, 
	#content-bottom-footer, #form{ width:100%; }
	
	#wrapper{ min-width:100%; }
	
	#content-magazine{ width:100%; }
	
	#magazine-left, #magazine-right {
    	width: 87%; }
	
	#about-left, #about-right {
	    float: left;
        font-size: 14px;
	    line-height: 25px;
	    padding: 5px;
	    width: calc(100% - 10px); }
	
	#about-left{ margin-left:3%; }
	
	.box-project{
		font-size:14px; 
		width:100%; }
		
	.margin{ margin-right:0; }
	
	.top-box {
    	height: 330px;
    	margin-bottom: 0px; }
    	
    	.margin{ margin-right:10px; }
    	
    .bottom-box{ height:220px; }
	
	#footer{ width:calc(100% - 30px); }
	
	#content-general {
	    float: left;
	    padding: 0px 15px 15px 15px;
	    left: 0;
	    margin-left: 0;
	    position: relative;
	    width: calc(100% - 30px); }
	    
	.bar-menus{ height: 68px; }
	    
	#right-content, #left-content{ width: calc(100% - 30px); }
	    
	#left-content-blog, #right-content-blog{
		width: 100%; }
		
	h4{ font-size:18px; }
	
	.caption{ margin-top:-52px; }	
		
	.caption2{ margin-top:15px; }
	
	.caption-text{ font-size:15px; }
	
	.ma-bottom{ font-size:14px; }
	
	.box-year{ width:100%; }
	
	#adv-left, #adv-right {
	    width: calc(100% - 70px); }
	    
	.responsivewidth{ width:48%; }
	
	.marginserv { margin-right: 0px; }
	
	#right-content-quienes-somos{ width: calc(100% - 30px); }
	
	footer{ height:650px; }
	
	.colleft, .colcenter{ width: calc(100% - 50px); }
	
	#left-content{ width:100%; }
	
	.box-special-left{ width:100%; }
	.box-special-right{ width: calc(100% - 20px); }
	
	.responsivewidth{ width:100%; }
	
	.marginserv { margin-right: 0px; }
	
	.marleftbox{ margin-left:0; }
}

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}