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

@font-face {
    font-family: 'comexmedium_italic';
    src: url('../fonts/comex-medium-italic-webfont.eot');
    src: url('../fonts/comex-medium-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/comex-medium-italic-webfont.woff2') format('woff2'),
         url('../fonts/comex-medium-italic-webfont.woff') format('woff'),
         url('../fonts/comex-medium-italic-webfont.ttf') format('truetype'),
         url('../fonts/comex-medium-italic-webfont.svg#comexmedium_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'comex_mediummedium';
    src: url('../fonts/comex-medium-webfont.eot');
    src: url('../fonts/comex-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/comex-medium-webfont.woff2') format('woff2'),
         url('../fonts/comex-medium-webfont.woff') format('woff'),
         url('../fonts/comex-medium-webfont.ttf') format('truetype'),
         url('../fonts/comex-medium-webfont.svg#comex_mediummedium') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'comex_ultra_condensedultraCn';
    src: url('../fonts/comex-ultra-condensed-webfont.eot');
    src: url('../fonts/comex-ultra-condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/comex-ultra-condensed-webfont.woff2') format('woff2'),
         url('../fonts/comex-ultra-condensed-webfont.woff') format('woff'),
         url('../fonts/comex-ultra-condensed-webfont.ttf') format('truetype'),
         url('../fonts/comex-ultra-condensed-webfont.svg#comex_ultra_condensedultraCn') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'comex_light_condensedLtCn';
    src: url('../fonts/comex-light-condensed-webfont.eot');
    src: url('../fonts/comex-light-condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/comex-light-condensed-webfont.woff2') format('woff2'),
         url('../fonts/comex-light-condensed-webfont.woff') format('woff'),
         url('../fonts/comex-light-condensed-webfont.ttf') format('truetype'),
         url('../fonts/comex-light-condensed-webfont.svg#comex_light_condensedLtCn') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'comexlight_italic';
    src: url('../fonts/comex-light-italic-webfont.eot');
    src: url('../fonts/comex-light-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/comex-light-italic-webfont.woff2') format('woff2'),
         url('../fonts/comex-light-italic-webfont.woff') format('woff'),
         url('../fonts/comex-light-italic-webfont.ttf') format('truetype'),
         url('../fonts/comex-light-italic-webfont.svg#comexlight_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'comex_lightlight';
    src: url('../fonts/comex-light-webfont.eot');
    src: url('../fonts/comex-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/comex-light-webfont.woff2') format('woff2'),
         url('../fonts/comex-light-webfont.woff') format('woff'),
         url('../fonts/comex-light-webfont.ttf') format('truetype'),
         url('../fonts/comex-light-webfont.svg#comex_lightlight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'comex_medium_condensedMdCn';
    src: url('../fonts/comex-medium-condensed-webfont.eot');
    src: url('../fonts/comex-medium-condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/comex-medium-condensed-webfont.woff2') format('woff2'),
         url('../fonts/comex-medium-condensed-webfont.woff') format('woff'),
         url('../fonts/comex-medium-condensed-webfont.ttf') format('truetype'),
         url('../fonts/comex-medium-condensed-webfont.svg#comex_medium_condensedMdCn') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'comex_blackblack';
    src: url('../fonts/comex-black-webfont.eot');
    src: url('../fonts/comex-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/comex-black-webfont.woff2') format('woff2'),
         url('../fonts/comex-black-webfont.woff') format('woff'),
         url('../fonts/comex-black-webfont.ttf') format('truetype'),
         url('../fonts/comex-black-webfont.svg#comex_blackblack') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'comex_bold_condensedBdCn';
    src: url('../fonts/comex-bold-condensed-webfont.eot');
    src: url('../fonts/comex-bold-condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/comex-bold-condensed-webfont.woff2') format('woff2'),
         url('../fonts/comex-bold-condensed-webfont.woff') format('woff'),
         url('../fonts/comex-bold-condensed-webfont.ttf') format('truetype'),
         url('../fonts/comex-bold-condensed-webfont.svg#comex_bold_condensedBdCn') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'comexbold_italic';
    src: url('../fonts/comex-bold-italic-webfont.eot');
    src: url('../fonts/comex-bold-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/comex-bold-italic-webfont.woff2') format('woff2'),
         url('../fonts/comex-bold-italic-webfont.woff') format('woff'),
         url('../fonts/comex-bold-italic-webfont.ttf') format('truetype'),
         url('../fonts/comex-bold-italic-webfont.svg#comexbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'comex_boldbold';
    src: url('../fonts/comex-bold-webfont.eot');
    src: url('../fonts/comex-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/comex-bold-webfont.woff2') format('woff2'),
         url('../fonts/comex-bold-webfont.woff') format('woff'),
         url('../fonts/comex-bold-webfont.ttf') format('truetype'),
         url('../fonts/comex-bold-webfont.svg#comex_boldbold') format('svg');
    font-weight: normal;
    font-style: normal;

}


html, body{

	padding:0;
	margin:0;
	background:#000000;
	font-size:1em;
	height:100%;
	overflow-x:hidden;

}

svg{

	overflow:visible !important;

}


a { 
	cursor: pointer; /* SVG <a> elements don't get this by default, so you need to explicitly set it */
	outline: none;
	text-decoration:none;
	color:#FFFFFF;

}

footer a:hover{

	text-decoration:underline;

}

#close {
	display: block;
	padding: 10px;
}

.close{

	cursor:pointer;

}

.close svg{

	width:1.3em;
	height:1.3em;

}

.t_hidden{

	overflow:hidden;
	text-indent:-10000em;

}

/*ANIMATIONS*/

a, li, .item path, .map_window, .overlay, .video_window{

	-webkit-transition: 0.3s;
    -o-transition: 0.3s;
    -moz-transition: 0.3s;
    transition: 0.3s;

}

footer{

	-webkit-transition: .5s;
    -o-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;

}

.color_roll, .color_selector{

	-webkit-transition: .5s;
    -o-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;

}

.color_roll svg{

	-webkit-transition: .5s;
    -o-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;

}

.desp{

	-webkit-transition: all 700ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  	transition:         all 700ms cubic-bezier(0.785, 0.135, 0.15, 0.86);

}

/*END ANIMATIONS*/


.leover{

	position:absolute;
	z-index:1000;
	font-size:.7em;
	width:10em;
	height:auto;
	background:#FFFFFF;
	padding:.5em;
	text-align:center;
	font-family: 'comex_mediummedium';
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);

}

/*header*/

header{

	position:fixed;
	z-index:100;
	background:#FFFFFF;
	top:0;
	left:0;
	width:100%;
	height:6.5em;
	-webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	font-family: 'comex_mediummedium';
	
}

header ul{

	margin:0;
	width: 90%;
    padding: 1em 5%;

}

header li{

	padding:0;
	display:block;
	float:left;
	text-align:right;

}

.main{

	margin-top: -3.6em;

}

.logo{

	display: block;
    width: 10em;
    height: 3.5em;
    overflow: hidden;
	cursor:pointer;

}

.logo svg{

    width: 100%;
}

.color_selector{

	float:right;

}

.color_hide{

	margin-top:10em !important;

}


.finder{

	position:absolute;
	right:5%;
	top:6.5em;
	background:#FFFFFF;
	width: 16.6em;
	padding: 0 .3em .1em .2em;
    height: 1.5em;
	-webkit-box-shadow: 2px 3px 4px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 3px 4px 0px rgba(0,0,0,0.2);
	box-shadow: 2px 3px 4px 0px rgba(0,0,0,0.2);
	display:none;

}

.finder input[type="text"]{

	border:#000000 solid 1px;
	width:98%;
	padding: 0 1%;
	height:1.5em;
	font-family: 'comex_mediummedium';

}

.finder input:focus {
  outline: none;
}

.croma{

	float:right;
	overflow:hidden;
	height:5.4em;

}

.color_selector:hover li{

	text-decoration:underline;

}

.color_selector{

    width: 9em;
    height: 3em;
    font-size: .8em;
    text-align: right;
	cursor:pointer;
	margin-top:1.4em;

}

.color_selector ul{

	padding:0;
	margin:0;
	width:100%;

}

.color_selector li{

	padding:0;
	margin:0;
	display:block;
	float:left;
	width:5em;
	margin-right:.5em;
	padding-top:0.2em;

}

.color_selector .paint{

	width:3em;
	height:3em;
	padding-top:0;

}

.paint svg{

	width:auto;
	height:100%;

}


.menu{

	float:right;
	position:relative;

}

.men{

	cursor:pointer;
	margin-top:1.7em;
	margin-left:1em;
	margin-right:.5em;

}

.men:hover{

	text-decoration:underline;

}

.menu .desp{

	position: absolute;
    z-index: 110;
    right: -.7em;
    top: 3.5em;
    overflow: hidden;
    height: 8em;
    width: 10em;

}

.menu .hide{

	height:0;
	top:2.5em;

}

.menu ul{

	background:#00aeef;
	width:11em;
	height:8.4em;
	color:#FFFFFF;
	font-size:.8em;
	font-family: 'comex_mediummedium';
	text-align:right;
	padding:0;
	overflow:hidden;
	-webkit-box-shadow: 2px 3px 4px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 3px 4px 0px rgba(0,0,0,0.2);
	box-shadow: 2px 3px 4px 0px rgba(0,0,0,0.2);

}

.menu li{

	height: 2.8em;
    width: 11em;
    line-height: 3.2em;
    padding: 0;
	margin:0;
	cursor:pointer;

}

.menu li a{

	margin: 0 .5em 0 .5em;
	padding: 0 .6em 0 0;
	border-bottom: 1px solid rgba(255, 255, 255, .5);
	width:9.4em;
	height: 2.8em;
	display:block;

}

.menu li:hover{

	background:rgba(255, 255, 255, .3);

}

.menu li:hover a{

	padding: 0 1.2em 0 0;
	width:8.8em;
	border-bottom:none;

}

.arrow-up {
	width: 0; 
	height: 0; 
	margin-left:7em;
	border-left: .6em solid transparent;
	border-right: .6em solid transparent;
	border-bottom: .6em solid #00aeef;
}

/*end header*/


/*color roll*/

.color_roll{

	width: 15em;
    max-height: 12em;
	position: fixed;
    right: 5%;
	margin-right:1em;
    top: 10em;
	z-index:70;
	background:#FFFFFF;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);

}

#colors{

	border:0;
	padding:.5em;
	width:15em;
	margin:0;

}

.color{

	width:1.75em;
	height:1.5em;
	cursor:pointer;

}

.roll_hide{

	margin-top:-18em !important;

}

.color_roll .close{

	position:absolute;
	top: -1em;
    left: 13.7em;
    z-index: 50;

}



.roll_container {
	  
    max-height: 12em;
	overflow:scroll;
	
}
  


#menu {
	display: block;
	padding: 10px;
	/*overflow: visible;*/ /* uncomment this if you are using bouncing animations*/
}

.trigger {
	fill: #fff;
	pointer-events: auto; /* KEEP THIS to make sure it stays clickable even when SVG's pointer events is disabled */
}

symbol {
	overflow: visible; /* KEEP THIS so that text will not get cut off it it is wider than the icon width */
}

.item:hover path{

	/*opacity:.5;*/

}

/*end color roll*/


/*map_container*/

.map_change {
    position: relative;
    width: 100%;
    height: 100%;
}

.overlay{

	width:100%;
	height:100%;
	background:#000000;
	bottom: 2em;
	position:absolute;
	left:0;
	opacity:.3;
	z-index:10;

}


.map_container{

	width:100%;
	height:90%;
	background:#FFFFFF;
	bottom: 2.8em;
	position:absolute;
	left:0;

}

.video_window_cont{

	overflow:hidden;
	position:absolute;
	width:100%;
	height:100%;

}

.video_window{

	position:absolute;
	font-family: 'comex_mediummedium';
	font-size:.95em;
	text-align:justify;
	bottom: 8em;
    left: 50%;
	margin-left:-20em;
    padding: 1em 0;
    width: 40em;
    height: 20em;
	background:#FFFFFF;
	z-index:19;
	background:#FFFFFF;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	overflow:hidden;
	margin-bottom:-100em;
	
}

.video_window .vidi_close{

	position:absolute;
	z-index:2;
	margin:0;
	padding:0;
	width:2em;
	height:2em;
	text-align:center;
	color:#FFFFFF;
	line-height:2em;
	font-size:1.5em;
	top:0;
	right:0;
	cursor:pointer;
	border-left:solid 1px #FFFFFF;

}

.video_window .vidi_tit{

	position:absolute;
	z-index:1;
	margin:0;
	padding:0;
	width:100%;
	height:3em;
	text-align:center;
	color:#FFFFFF;
	line-height:3em;
	background:#00aeef;
	top:0;
	left:0;

}

.video_window .vid_cont{


	width:38em;
	height:17em;
	margin-top:3em;
	overflow:auto;
	padding: 0 1em;


}

.video_window .videos{

	display:block;
	margin:0;
	padding:0;
	width:100%;

}

.video_window .videos li{

	display:inline-block;
	margin:0;
	padding:0;
	width:100%;
	margin-top:1em;

}

.video_window .videos li .vidi{

	width:50%;
	float:left;

}

.video_window .videos li .vidi_text .mac{

	font-size:1.3em;
	font-weight:bold;

}

.video_window .videos li .vidi_text{

	width:45%;
	float:right;
	font-size:.8em;

}

.map_window{

	position:absolute;
	font-family: 'comex_mediummedium';
	font-size:.95em;
	text-align:justify;
	bottom: 8em;
    left: 0;
    padding: 3em 1em 1em 1em;
    width: auto;
    height: auto;
	background:#FFFFFF;
	z-index:30;
	background:#FFFFFF;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);

}

.map_window .left{
	
	width:25em;
	float:left;
	margin-right:2em;
	
}

.map_window .right{
	
	width:20em;
	float:right;
	margin-right:-2em;
	margin-top:1.5em;
	
}

.map_window .down{
	
	width:100%;
	float:right;
	background:url(../img/casas.png) no-repeat;
	background-size:100% auto;
	height:5em;
	
}

.map_window .open_close{
	
	width:2em;
	height:3em;
	background:#00aeef;
	position:absolute;
	top:1em;
	right:0;
	margin-right:-2em;
	z-index:-1;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	color:#FFFFFF;
	text-align:center;
	font-weight:bold;
	line-height:3em;
	cursor:pointer;
	-webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	
}

.map_window .s_cat{
	
	font-size:1.5em;
	
}

.map_window .cat{
	
	font-size:.85em;
	
}

.map_up{

	position:absolute;
	top:7em;
	left:50%;
	z-index:20;
	width:6em;
	height:3em;
	margin-left:-3em;
	overflow:hidden;
	cursor:pointer;

}

.map_down{

	position:absolute;
	bottom:2.5em;
	left:50%;
	z-index:20;
	width:6em;
	height:3em;
	margin-left:-3em;
	overflow:hidden;
	cursor:pointer;

}

/*end map_container*/


/*footer*/

footer{

	position:fixed;
	z-index:20;
	background:#00aeef;
	bottom:0;
	left:0;
	width:90%;
	height:2em;
	padding:1em 5%;
	color:#FFFFFF;
	line-height:2.2em;
	font-size:.7em;
	font-family: 'comex_mediummedium';
	text-align:center;
	-webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
	overflow:hidden;

}

footer ul{

	padding:0;
	margin:0;
	width:100%;

}

footer li{

	padding:0;
	display:block;
	float:left;
	margin:0;

}

.consorcio{

	width:37%;

}

.ppg{

	width:42%;

}

.ppg a{

	background:url(../img/PPG_Industries.png) no-repeat;
	background-size:9em auto;
	width:9em;
	height:1.7em;
	display:block;

}

.copy{

	/*width:25%;*/
	text-align:right;

}

.leg{

	width:36%;

}

.rs{

	width:17%;

}

.legales li{

	margin:0;
	float:left;

}

.legales .terminos{

	width:39%;

}

.legales .aviso{

	width:31%;

}

.legales .soporte{

	width:30%;

}

.comex{

	width:10%;

}

.comex a{

	display: block;
    width: 7em;
    height: 1.8em;
    background-image: url(../img/comex.png);
    background-repeat: no-repeat;
    background-size: 7em auto;
    background-position: 0 .2em;
	float: right;

}

.RRSS{

	display: block;
    margin: auto;
    width: 10em;

}

.RRSS li{

	margin:-.1em .1em;
	float:left;

}

.RRSS li a{

	display:block;
	width:2.2em;
	height:2.3em;
	background-image:url(../img/RRSS.png);
	background-repeat:no-repeat;
	background-size:9em auto;

}

.RRSS .facebook:hover a{

	background-position:0 -2.3em;

}

.RRSS .twitter a{

	background-position:-2.3em 0;

}

.RRSS .twitter:hover a{

	background-position:-2.3em -2.3em;

}

.RRSS .youtube a{

	background-position:-4.55em 0;

}

.RRSS .youtube:hover a{

	background-position:-4.55em -2.3em;

}

.RRSS .instagram a{

	background-position:-6.8em 0;

}

.RRSS .instagram:hover a{

	background-position:-6.8em -2.3em;

}

/*end footer*/

/*google maps*/

img[src="https://maps.gstatic.com/mapfiles/api-3/images/google4_hdpi.png"] {
	content: url('../img/google.png');
	width:100px !important;
	height:auto !important;
	margin-top:-20px !important;
	margin-left:10px !important;
}

.gmnoprint, .gmnoscreen {
	
	
	
}

.gmnoprint div, .gmnoscreen div, .gmnoprint a, .gmnoscreen a {
	
	opacity:1 !important;
	
}

.pac-container span{

	font-family: 'comex_mediummedium';
	font-size:1.1em;

}

.pac-item-query{

	font-size:1.2em;

}

.pac-item{



}

/*google maps end*/

@media (max-width: 1200px) {

	.ppg {
		width: 39%;
	}

}

@media (max-width: 1060px) {
	
	.ppg {
		width: 39%;
	}
	
	header ul{
		width: 96%;
		padding: 1em 2%;
	
	}
	
	.finder{
	
		right:2%;
	
	}
	
	.color_roll{
	
		right: 2%;
	
	}
	
	footer{
	
		width:96%;
		padding:1em 2%;
		font-size:.6em;
		line-height: 2.1em;
	
	}
	
	.leg{
	
		width:39%;
	
	}
	
	.rs{
	
		width:14%;
	
	}
	
	.map_container{
	
		bottom:2.4em;
	
	}
	
	
}

@media (max-width: 850px) {

	.ppg {
		width: 35%;
	}

}

@media (max-width: 760px) {
	
	body{
	
		/*height:auto;*/
	
	}
	
	.video_window{

		font-size:.5em;
		text-align:justify;
		bottom: 13.5em;
		left: 0;
		margin-left:0;
		padding: 0;
		width: 100%;
		height: 26em;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
		box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.4);
		overflow:hidden;
		margin-bottom:-100em;
		
	}
	
	
	.video_window .vid_cont {
		width: 90%;
		height: 22em;
		padding: 0 5%;
		margin-top: 3em;
		overflow: auto;
	}
	
	.map_window{

		top: 7.75em;
		left: 0;
		bottom:auto;
		width: 100%;
		position:fixed;
		padding:.5em 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		font-size:.4em;
		padding-bottom:2em;
	
	}
	
	.map_window .left{
	
		width:90%;
		float:none;
		margin-left:5%;
		margin-right:5%;
		
	}
	
	.map_window .right{
		
		width:90%;
		float:none;
		margin-left:5%;
		margin-right:5%;
		
	}
	
	.map_window .down{
	
		display:none;
		
	}
	
	.map_window .open_close{
	
		width:10em;
		height:2em;
		position:absolute;
		bottom:-2em;
		top:auto;
		right:50%;
		margin-right:-5em;
		z-index:-1;
		-webkit-border-top-right-radius: 0;
		-moz-border-radius-topright: 0;
		border-top-right-radius: 0;
		
		-webkit-border-bottom-right-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		-moz-border-radius-bottomright: 5px;
		-moz-border-radius-bottomleft: 5px;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		line-height:2em;
		cursor:pointer;
		
	}
	
	.consorcio {
    	width: 41em;
		height:3em;
	}
	
	.map_change{
	
		height:100%;
		overflow:hidden;
	
	}
	
	.map_container{
	
		top:4.5em;
		bottom:auto;
	
	}
	
	footer{

		height:auto;	
		margin-top:6.4em;
		
	}
	
	footer li{
	
		float:none;
		margin:auto;
	}
	
	header {

		height: 4.5em;
		
	}
	
	.overlay {
		display:none;
	}
	
	.main {
		margin-top: -4.4em;
	}
	
	.logo {
	  
		width: 6.2em;
		height: 3.5em;
		margin:0.2em;
		
	}
	
	.men{
	
		margin-top:1.1em;
	
	}
	
	.color_selector {
		
		margin-top: .7em;
	}
	
	.croma {
		
		height: 4.5em;
		margin-top: -.5em;
		
	}
	
	.finder {
	
		top: 4.4em;
	
	}
	
	.menu {
	
		margin-top: -.5em;
		
	}
	
	.color_roll {
		
		margin-top: -2em;
		
	}
	
	.leg{
	
		width:60%;
	
	}
	
	.leg li{
	
		width:33% !important;
	
	}
	
	.copy{
	
		width:auto;
		float:left;
	
	}
	
	.rs{
	
		width:80%;
		margin: 3em auto 6em auto;
	
	}
	
	.comex {
		width: 0;
		padding-left: 7em;
	}
	
	.ppg{
	
		width:50%;
		float:left;
	
	}
	
	img[src="https://maps.gstatic.com/mapfiles/api-3/images/google4_hdpi.png"] {
		width: 70px !important;
		margin-top: -15px !important;
		margin-left: 8px !important;
	}
}

@media (max-width: 580px) {
	
	.consorcio {
    	width: 100%;
	}
	
	.cop{
	
		width: 30em;
		margin: auto;
	
	}
	
	.copy {
		width: 21em;
	}
	
	.ppg {
		width: 8em;
	}
	

	.men{
	
		margin-top:1.5em;
	
	}
	
	footer{
	
		margin-top:7em;
	
	}
	
	.color_selector {
		
		margin-top: 1.2em;
	}

	.leg{
	
		width:100%;
	
	}
	
	.logo {
		width: 4.5em;
		height: 3.5em;
		margin-top: .3em;
		position: absolute;
	}
	
	.croma {
		margin-top: 0.1em;
	}
	
	.color_selector {
    	font-size: .5em;	
		background-size: 5.3em auto;
    	background-position: 5.8em 0;
	}
	
	.finder{
	
		width:96%;
		right:0;
		left:0;
		padding:2%;
	
	}
	
}

@media (max-width: 480px) {
	
	.color_roll {
		right: auto;
		left: 50%;
		margin-left: -6.5em;
	}
}

.brush path{

	fill:#00FF00;

}

.gradient_down{

	background: rgba(255,255,255,1);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
	position:absolute;
	top:0;
	height:1.3em;
	width:14em;
	left:.5em;

}

.gradient_up{

	background: rgba(255,255,255,0);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
	position:absolute;
	bottom:0;
	height:1.3em;
	width:14em;
	left:.5em;

}

.info-windows{
	width: 10em;
	height:3em;
	color: #000000;
	background:none;
	font-family: 'comex_mediummedium';
	font-size:1em;
	max-width: none;
	padding:0px;
	margin:0px;
}