/*  IMPORTAR EL RESET  */

@import url('reset.css');

   
/* mis estilos  */

body{font-family:Verdana, Geneva, sans-serif; background-color:#FFFFFF;}

#contenedor {
	/*width:800px;
	margin: 10px auto;
	 background:#000;   provisional   */
	padding: 10px;
	}
	
header{text-align:center; padding:3% 0 !important;}
	header img{width:100%; max-width:800px;}
.section2{/*height:25%; min-height:260px;*/}	
#contenido {width: 100%; min-height: 180px;	float:left;	margin: 0 15px 0 0; background-color:#000;	}
	
#contenido p {
	color:#FFF;
	font-weight:100;
	font-size:12px;
	padding:0 0 10px 0;
	
	}
	                 
#barra_lateral {
  display: inline-block;  background:#000000;}
.banner{float:left; margin-right:3%;}	                      
#social {
	width: 30%;
	display:block;
	float:right;
	margin-top: 2%;
	}
	#social ul li{width: 20%; float:left;}
	
#social ul li img {
	float:left;
	width:100%;
	margin:-2% -2% -2% -2%;
	}
	#barrita {
	width: 800px;
	
	float:left;
	background:#666;           /*  provisional   */
	margin-bottom:10px;
	}
	
	.scd_tracks{width:25%; display:block; float:left; margin:1% 1% 1% 0;}
	
	#right_side{width: 48%; display: block; float: right; margin-top: 0.7%;}
	#instagram{ padding: 5px;  float: left;  width: 45%;}
	.insta_head{width: 100%;  background-color: #e7ddd1;  padding-right: 4px; padding-bottom: 13px;}
	.insta_head img{width:43%;}	
	.track-art{float:left; width:20%; }
	.friends{width: 100%; margin:0 auto; display:inline-block;}
	.friends a img{float:left;}
	img.img-1{float:left; margin: 5% 0; }
	img.img-2{ margin: 0; margin-right: 0 !important;}
	.img-mar{margin-left:20px !important;}
	
	.close{text-align: center;  width: 100%;  padding: 15px 0;  border-top: thin solid #000;  clear: both;}


/*	SLIDESHOW*/
.slider{overflow:hidden;}

.bss-slides{
  position: relative;
  display: block;    
}
.bss-slides:focus{
 outline: 0;
}
.bss-slides figure{
  position: absolute;
  top: 0;
  width: 100%;
}
.bss-slides figure:first-child{
  position: relative;
}
.bss-slides figure img{
  opacity: 0;
  transition: opacity 1.2s;
  backface-visibility: hidden;
}
.bss-slides .bss-show{
  z-index: 2;
}
.bss-slides .bss-show img{
  opacity: 1;
  backface-visibility: hidden;
  position: relative; 
}

.bss-slides figcaption{
  position: absolute;
  font-family: sans-serif;
  font-size: .8em;
  bottom: .75em;
  right: .35em;
  padding: .25em;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .25);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 1.2s;
}
.bss-slides .bss-show figcaption{
  z-index: 3;
  opacity: 1;
}
.bss-slides figcaption a{
  color: #fff;    
}
.bss-next, .bss-prev{
  color: #fff;
  position: absolute;
  background: #000;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 4;
  font-size: 2em;
  margin-top: -1.2em;
  opacity: .3;
  user-select: none;
}
.bss-next:hover, .bss-prev:hover{
  cursor: pointer;
  opacity: 1;
}
.bss-next{
  right: -1px;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.bss-prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.bss-fullscreen{
  display: block;
  width: 32px;
  height: 32px;    
  background: rgba(0,0,0,.4) url(../img/arrows-alt_ffffff_64.png); 
  background-size: contain;
  position: absolute;
  top: 5px;
  left: 5px;   
  cursor: pointer;    
  opacity: .3;
} 
.bss-fullscreen:hover{
  opacity: .8;   
}
:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:-moz-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}


 @media only screen and (min-width: 1200px) {
	 #social{margin-top:0!important;}
	 }
  @media only screen and (max-width: 1200px) and (min-width: 980px) {
	  .scd_tracks{width:48%;}
	 #right_side{width:100%; margin-bottom: 5%;}
	 #instagram{width:33%;}
	
   }
  @media only screen and (max-width: 979px) and (min-width: 768px) {
	  .scd_tracks{width:100%;}
	 #right_side{width:100%; margin-bottom: 5%;}
	 .friends img.img-1{margin-top:5%;}
	
	  
   }
   
 @media only screen and (min-width: 734px) and (max-width: 767px) {
	 .scd_tracks{width:100%;}
	 #right_side{width:100%; margin-bottom: 5%;}
	 #instagram{width:55%; padding:0;}
	 .friends{width:100%; text-align:center;}
	 .friends img.img-1{margin-top:5%;}
	 #barra_lateral{width:100% !important;}
	 .banner{width:48%; margin-right:1%;}
	 .banner img{width:98%;}
	 .last{float:right; margin-right:0;}
	 #social{width:100%;}
	  #social ul li {  width: 20%;}
	 
	 }
 @media only screen and (min-width: 480px) and (max-width: 733px) {
	 .scd_tracks{width:100%;}
	 #right_side{width:100%; margin-bottom: 5%;}
	 #instagram{width:55%; padding:0;}
	 .friends{width:60%; text-align:center; margin-left:32%;}
	 .friends img.img-1{margin-top:5%;}
	 #barra_lateral{width:100% !important;}
	 .banner{width:48%; margin-right:1%;}
	 .banner img{width:98%;}
	 .last{float:right; margin-right:0;}
	 #social{width:100%;}
	  #social ul li {  width: 20%;}
   }
 @media only screen and (min-width: 80px) and (max-width: 479px) {
	 #barra_lateral{width:100%;}
	 .banner{width:48%; margin-right:0;}
	 .last{float:right; margin-right:0;}
	 .banner img{width:100%;}
	 #social{width:100%; text-align:center;}
	 .scd_tracks{width:100%;}
	 #right_side{width:100%; margin-bottom: 5%;}
	 #instagram{width:100%; padding:0;}
	 .friends{width:60%; text-align:center; margin-left:25%;}
   }