@import url('https://fonts.googleapis.com/css?family=Just+Another+Hand');
@font-face {
  font-family: 'TradeGothic';
  font-style: normal;
  font-weight: 900;
  src: local('TradeGothic'), local('TradeGothic-Regular'), url(../../fuentes/TradeGothicBoldCondensedNo.20.ttf);
  }

#i1, #i2, #i3, #i4, #i5{ display: none;}

.container10{
		position: relative;
		width: 500px;
		height: 500px;
		padding-bottom: 38%;
	  	user-select: none;
		background-color: #1c1c1c;
		border: solid 3px #616161;
		border-radius:10px ; 
	}

	.container10 .slide_img{
		position: absolute;
		width: 100%;;
		height: 100%;
	}
	.container10 .slide_img img{
		width: inherit;
		height: inherit;
	}

	 .prev, .next{
		width: 12%;
		height: inherit;
		position: absolute;
		top:0; 
		background-color: rgba(88, 88, 88,.2);
		color:rgba(244, 244, 244,.9);
		z-index: 99;
		transition: .45s;
		cursor: pointer;
		text-align: center;
	}

	.next{right:0;}
	.prev{left:0;}

	label span{
		position: absolute;
		font-size: 70pt;
		margin-left:-10px;
		top: 50%;
	 	transform: translateY(-50%);
	}

	.prev:hover, .next:hover{
		transition: .3s;
		background-color: rgba(88, 88, 89,.8);
		color: #ffffff; 
	}

.container10 #nav_slide{
	width: 100%;
	bottom: 12%;
	height: 11px;
	position: absolute;
	text-align: center;
	z-index: 99;
	cursor: default;
}

#nav_slide .dots{
	top: 40px;
	width: 18px;
	height: 18px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
	transition: .4s;
}

#nav_slide .dots:hover {
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.9);
	transition: .25s
}

.slide_img{z-index: -1;}

	#i1:checked ~ #one  ,
	#i2:checked ~ #two  ,
	#i3:checked ~ #three,
	#i4:checked ~ #four 
 
	{z-index: 9; animation: scroll 1s ease-in-out;}

	#i1:checked  ~  #nav_slide #dot1,
	#i2:checked  ~  #nav_slide #dot2,
	#i3:checked  ~  #nav_slide #dot3,
	#i4:checked  ~  #nav_slide #dot4
	
	{ background-color: rgba(255,255,255,.9);}
/*---fin-slider---*/
#detalles{
	width:95%;
	margin:0 auto;
	display:flex;
	padding-bottom:50px;
	}

#espec{
	margin-left:5%;
	width:45%;}

h3{
	font-family: Cambria;
	font-size:1.3em;
	color:#fff !important;
	text-align:right;
	}
h4{
	font-family: 'TradeGothic', arial;
	font-size:1.3em;
	line-height:1.5em;
	padding-bottom:10px;
	padding-top:20px;
	color:rgba(255,173,40,1.00);
	text-align:right;
	text-decoration: underline;
	}
#btnvolver a{
	color:#CC0033;}	
	
  #btnvolver{
          background-color: white;
          border: none;
          padding: 8px;
          text-decoration: none;
          margin: 0 auto;
          cursor: pointer;
          margin-top: -60px;
          border-radius: 8px;
          font-size: 16px;
          font-family: 'TradeGothic', arial;
		  font-stretch: narrower;	
		  color: #CC0033 !important;	
		  display:block; 
		  width:30%;
		  text-align:center;
		  margin-bottom:50px;
      	                        }
								
 #btnvolver a:hover{					  
	 color:#fff;}
 
 #btnvolver:hover{
          background:red;
          color: white;
      }
	  



@keyframes scroll{
	0%{	opacity:.4;}
	100%{opacity:1;}
}		


@media screen and (max-width: 768px){
	.container{
		border: none;
		width: 100%;
		height: 0;
		padding-bottom: 55%; 
	}	

#detalles{
	display:block;}

#espec{
	margin-left:auto;
	margin-rigth:auto;
	display:block;	
	width:100%;}
	
	label span { font-size: 50pt; }
	
	.prev, .next{
		width: 15%;
	}	
	#nav_slide .dots{
		width: 12px;
		height: 12px;
	}
.container10{
	width:95%;
	margin:0 auto;
	}

h4{
	text-align:center;}
h3{
	text-align:center;}
}