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

@media only screen and (max-width: 450px) {
	.principal{
		width: 100%;
		padding: 0 15px;
		box-sizing: border-box;
	}
	.logo{
		position: relative;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	.letrero{
		display: none;
	}
	.ancla{
		display: none;
	}
	.maping{
		display: block;
		position: relative;
		top: 15px;
		left: 5px;
		font-size: 18px;
		white-space:nowrap;
	}
	.menu{
		width: 100%;
		height: 80px;
	}
	.menu ul{
		position: relative;
		padding: 0px;
		top: 0px;
	}
	.buscar{
		margin: 0px;
		width: 212px;
		padding-bottom: 10px;
	}
	.contetnt{
		top: 30px;
	}
	.contenedor-flex{
		width: 100%;
		left: 0px;
	}
	.col{
		width: 100%;
	}
	.col2{
		position: relative !important;
		width: 100%;
		top: 10px;
		float: none;
	}
	.col2 img{
		position: relative;
		width: 100%;
	}
	.img-i{
		position: relative;
		width: 100%;
		top: 10px;
	}
	.img-i img{
		position: relative;
		width: 100%;
		height: auto;
	}
	.foot{
		position: relative;
		border-radius: 5px;
		height: 160px;
		/*background: linear-gradient(180deg, rgba(220,153,0,1) 0%, rgba(181,124,0,1) 100%);*/
		background: linear-gradient(180deg, rgba(232,205,131,1) 0%, rgba(229,186,47,1) 61.8%, rgba(225,175,7,1) 62.92%, rgba(235,185,2,1) 98%);
		margin: 25px 0;
	}
	.col-co{
		position: relative;
		height: auto;
		margin-bottom: 10px;
	}
	.col-co2{
		position: relative;
		width: 100%;
		float: none;
	}
	.col-co2 iframe{
		width: 100%;
	}
	.bdata{
		position:relative;
		height:120px;
		line-height: 32px;
	}
	.lb{
		display: none;
	}
	.lb2{
		position: relative;
		width: 100%;
		display: block;
		left: 10px;
		top: 118px;
	}
	.cn a{
		color: steelblue;
	}
	.rmove-t{
		display: block;
	}
	/*------------------------------*/
	.nav-items{
		top: 10px;
		display: none;
	}
	.pro{
		position: absolute;
		left: 33px;
		top: 7px;
	}
	#menup {
		width: 100%;
		background-color: #FFF;
		top: 15px;
		font-size: 18px;
	}
	.menus{
		display: block;
		position: absolute;
		top: -38px;
		left: 0px;
		cursor: pointer;
		z-index: 10;
	}
	.show{
		position: absolute;
		left: 0px;
		top: 0px;
		visibility: visible;
	}
	.close{
		position: absolute;
		left: 8px;
		top: 8px;
		visibility: hidden;
	}
	#menup li{
		border-bottom: solid 1px #EBB902;
		border-radius:0px;
		-webkit-border-radius: 0px;
	}
	#menup li a{
		width:100%;
		padding:5px 10px;
		box-sizing: border-box;
	}
	.gris, .verde, .amarillo, .rosa, .rosa{
		background-color: #FFF;
	}
	#menup ul.sm{
		display:none;
		position:relative;
		left:0px;
		top:0px;
	}
	#menup li a:hover{
		border-radius: 0px;
	}
	.naranja, .verde, .azul, .amarillo, .rosa{
		background-color:ghostwhite;
	}
	/*------------------------------*/
	
	
	
	/* ------------------- vertical ------------------
	
	#menup {
    overflow-x:scroll;
    width:100%;
		position: relative;
		/*height: 80px;
	}
	#menup li{
		margin-left: 2px;
	}
	#menup li a{
		height: 100%;
		text-align: center;
		padding: 0 7px;
	}*/
	/*::-webkit-scrollbar {display: none;}*/
	/*#main {
    overflow-x:scroll;
    width:100%;
	}
	#horizontal-scroll {
    display : inline-flex;
    padding:1px;
		width: auto;
	}
	#menup ul.sm{
		position: absolute;
		width: auto;
		left: 0px;
		top: 45px;
	}
	#menup li:hover .sm{
		display: inline-flex !important;
	}
	.sm li{
		display: inline-flex;
	}*/
	/**************   info   ****************/
	
	.grapa{
		width: 100%;
		flex-wrap: wrap;
	}
	.imgp{
		width: 85%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		left: 0px;
	}
	.imgp img{
		width: 100%;
		height: auto;
	}
	.descp{
		position: relative;
		width: 85%;
		margin-left: auto;
		margin-right: auto;
		left: 0px;
	}
	.tnom{
		width: 100%;
		left: 0px;
	}
	.tdesc{
		width: 100%;
		padding: 0px;
	}
	.insta{
		position: absolute;
		top: 118px;
		right: 25px;
		z-index: 100;
	}
	.face{
		position: absolute;
		top: 118px;
		right: 67px;
		z-index: 101;
	}
}

@media only screen and (min-width: 667px) and (max-width: 1024px) {
	.principal{
		width: 100%;
		padding: 0 15px;
		box-sizing: border-box;
	}
	.logo{
		position: relative;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	.letrero{
		display: none;
	}
	.ancla{
		display: none;
	}
	.maping{
		display: block;
		position: relative;
		top: 15px;
		left: 5px;
		font-size: 18px;
		white-space:nowrap;
	}
	.menu{
		width: 100%;
		height: 80px;
	}
	.menu ul{
		position: relative;
		padding: 0px;
		top: 0px;
	}
	.buscar{
		margin: 0px;
		width: 212px;
		padding-bottom: 10px;
	}
	.contetnt{
		top: 30px;
		padding-bottom: 10px;
	}
	.contenedor-flex{
		width: 100%;
		left: 0px;
	}
	.col{
		width: 45%;
	}
	.col2{
		position: absolute;
		width: 45%;
		top: 10px;
		right: 0px;
	}
	.col2 img{
		position: relative;
		width: 100%;
	}
	.img-i{
		position: absolute;
		width: 45%;
		top: 10px;
		right: 0px;
	}
	.img-i img{
		/*position: relative;*/
		width: 100%;
		height: auto;
	}
	.foot{
		position: relative;
		border-radius: 5px;
		height: 160px;
		/*background: linear-gradient(180deg, rgba(220,153,0,1) 0%, rgba(181,124,0,1) 100%);*/
		background: linear-gradient(180deg, rgba(232,205,131,1) 0%, rgba(229,186,47,1) 61.8%, rgba(225,175,7,1) 62.92%, rgba(235,185,2,1) 98%);
		margin: 25px 0;
	}
	.col-co{
		position: relative;
		height: auto;
		margin-bottom: 10px;
	}
	.col-co2{
		position: relative;
		width: 100%;
		float: none;
	}
	.col-co2 iframe{
		width: 100%;
	}
	.bdata{
		position:relative;
		height:120px;
		line-height: 32px;
	}
	.lb{
		display: none;
	}
	.lb2{
		position: relative;
		width: 100%;
		display: block;
		text-align: center;
		top: 118px;
	}
	.cn a{
		color: steelblue;
	}
	.nav-items{
		top: 10px;
		display: none;
	}
	.pro{
		position: absolute;
		left: 33px;
		top: 7px;
	}
	#menup {
		width: 100%;
		background-color: #FFF;
		top: 15px;
		font-size: 18px;
	}
	.menus{
		display: block;
		position: absolute;
		top: -38px;
		left: 0px;
		cursor: pointer;
		z-index: 10;
	}
	.show{
		position: absolute;
		left: 0px;
		top: 0px;
		visibility: visible;
	}
	.close{
		position: absolute;
		left: 8px;
		top: 8px;
		visibility: hidden;
	}
	#menup li{
		border-bottom: solid 1px #EBB902;
		border-radius:0px;
		-webkit-border-radius: 0px;
	}
	#menup li a{
		width:100%;
		padding:5px 10px;
		box-sizing: border-box;
	}
	.gris, .verde, .amarillo, .rosa, .rosa{
		background-color: #FFF;
	}
	#menup ul.sm{
		display:none;
		position:relative;
		left:0px;
		top:0px;
	}
	#menup li a:hover{
		border-radius: 0px;
	}
	.naranja, .verde, .azul, .amarillo, .rosa{
		background-color:ghostwhite;
	}
	/**************   info   ****************/
	
	.grapa{
		width: 100%;
		flex-wrap: wrap;
	}
	.imgp{
		width: 85%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		left: 0px;
	}
	.imgp img{
		width: 100%;
		height: auto;
	}
	.descp{
		position: relative;
		width: 85%;
		margin-left: auto;
		margin-right: auto;
		left: 0px;
	}
	.tnom{
		width: 100%;
		left: 0px;
	}
	.tdesc{
		width: 100%;
		padding: 0px;
	}
	.insta{
		position: absolute;
		top: 110px;
		right: 25px;
		z-index: 100;
	}
	.face{
		position: absolute;
		top: 110px;
		right: 67px;
		z-index: 101;
	}
}

@media(hover: hover) and (pointer: fine) {
  #menup li a:hover{
		background-color:#808080;
		border-radius:5px;
		color:#FFF;
		cursor:pointer;
		display: block;
	}
	#menup li:hover .sm{
		text-align:center;
		/*background-color:#F2F2F2;*/
		display:block;
	}
}