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

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Oswald|Ropa+Sans|Source+Sans+Pro&display=swap');

@font-face {
    font-family: 'HeadlineOneHPLHS';
    src: url('/headoh__-webfont.eot');
    src: url('/headoh__-webfont.eot?iefix') format('eot'),
         url('/headoh__-webfont.woff') format('woff'),
         url('/headoh__-webfont.ttf') format('truetype'),
         url('/headoh__-webfont.svg#webfont0ZVaMrJo') format('svg');
    font-weight: normal;
    font-style: normal;}
	
	@font-face { 
	font-family:'Deansgate-Light';
	src:url(/deansgatelight-webfont.eot);
	src:url(/deansgatelight-webfont.eot?#iefix) format("embedded-opentype"),url(/deansgatelight-webfont.woff2) format("woff2"),url(/deansgatelight-webfont.woff) format("woff"),url(/deansgatelight-webfont.ttf) format("truetype"),url(/deansgatelight-webfont.svg#deansgatelight) format("svg");;
	}
	
	@font-face { 
	font-family:'Deansgate-Bold';
	src:url(/deansgate-bold-webfont.eot);
	src:url(/deansgate-bold-webfont.eot?#iefix) format("embedded-opentype"),url(/deansgate-bold-webfont.woff2) format("woff2"),url(/deansgate-bold-webfont.woff) format("woff"),url(/deansgate-bold-webfont.ttf) format("truetype"),url(/deansgate-bold-webfont.svg#deansgatebold) format("svg")}
	
	
/* Colores y Tamaños */  
html,
body {
  background-color: #333 /*#2F3749*/;
  font-family: 'Source Sans Pro', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
  

.encabezado {
	color: #646E84;
	background: url(imagenes/bg_encabezado.gif) right top no-repeat #464646;
	}  
	
.cuerpo {
	background-color: #6699CC;
	padding-left: 2px;
	padding-right: 2px;
	margin-top: 2px;
/*	margin-bottom: 0.8rem;  */
	}

.pie {}

.accordion ul li {
  margin-bottom: 0.1rem;
  list-style: inside square;
  
}

.tabs .tab-title > a {
  outline: none;
  display: block;
  background-color: inherit;
  color: #222222;
  padding: 0.3rem 0.5rem;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 0.85rem;
}

.tabs-content > .content {
  display: none;
  float: left;
  padding: 0;
  width: 100%;
}

.sub-nav dt, .sub-nav dd, .sub-nav li, .sub-nav dt a, .sub-nav dd a, .sub-nav li a {
  color: #000;
}

/*Fuentes y Tamaños*/  
.cuerpo p {
	color: #000; 
	font-size: 0.95em;
	line-height: 1em;
	text-indent: 0.6em;
	text-rendering: optimizeLegibility;
	margin-bottom: 0.55em;
	}

.pie {
	color: #999;
	font-size: 0.8em;
	text-align: right;
	margin-top: 3px;
	}


ul li, .content {
/*	color: rgba(255, 255, 255, 0.5); */
	color: #000;
	font-size: 0.90em;
	line-height: 1em;
	text-rendering: optimizeLegibility;	
}

/* .accordion .content ul li:before {
	color: #8D6B59; 
}

 #lateral_img h3 {
	font-family: Ropa Sans;
	font-weight: 100;
	font-size: 14px;
	padding: 0 5px;
	margin: 3px 0;
	text-transform: uppercase;
	color:#FFF;
	border-left: 5px #FFF solid;
} */

.sidebar h1 {
	font-family: Deansgate-Bold, HeadlineOneHPLHS, Tahoma, Arial, Helvetica, sans-serif !important;
	font-size: 2.2em ;
	color: #FFF !important;
	margin: 2px 5px 0 10px !important;
}

.sidebar h2 {
	margin: 0 5px 15px 12px !important;
	font-weight: normal;
	color: #CCC;
	font-family: Deansgate-Light, HeadlineOneHPLHS, Tahoma, Arial, Helvetica, sans-serif !important;
	font-size: 133% ;
	text-transform:uppercase;
	line-height: 0.5em !important;
	font-stretch: expanded !important;
} 
	
h1 {
	font-family: Oswald !important ;
	font-size: 1.5em ;
	font-weight: 200;
	margin-left: 5px;
	text-transform: uppercase;
}

h4 {
	font-family: 'Ropa Sans' !important ;
	font-size: 1.1em ;
	font-weight: bold;
	margin-left: 5px;
	text-transform: lowercase;
	border-bottom: thin #000000 solid;
}

h3 {
	font-size: 15px;
	font-family: Oswald !important ;
}	
h1, h2, h3, h4, h5, h6 {
	font-style: normal;
	color: #000;
	text-rendering: optimizeLegibility;
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
	line-height: 1.2em; 
}
  
.sinopsis p {
	 font-size: 0.95em;
	 text-indent: 0;
	 margin-bottom: 0.4em;
	 display: table;
	}
	
.lyrics p {
	text-indent: 0px;
	margin-left: 0.7em;
	}

/* Default Link Styles */
a {
	color: #283249;
	text-decoration: none;
	line-height: inherit;
}
a:hover, a:focus {
	color: #495C86;
}
a img {
    border: none; 
}

/*Otros*/

#lateral_img {
	padding: 3px 0;
}

/*	.principal {
		background-color: #6699CC; 
	border: thin solid #000;
		} */
		
	.header {
		margin-top: 3px;
		}

.footer {

}
	
	.principal p {
/*	font-family: Verdana, Arial, Helvetica, sans-serif; */

	}

 
.top-bar-section .dropdown li.title h5, .top-bar-section .dropdown li.parent-link {
	  font-size: 0.7em;
	  }
  
/*  .column,
  .columns {
    position: relative;
    padding-left: 0.6rem;
    padding-right: 0.25rem;
    float: left; }
	
 .row {
  width: 100%;
  max-width: 62.5rem; }	*/
  
 .contain-to-grid {
  width: 100%;
  background: #2F3749; } 
  
.accordion {
  margin-bottom: 0; }
  .accordion:before, .accordion:after {
    content: " ";
    display: table; }
  .accordion:after {
    clear: both; }
  .accordion .accordion-navigation, .accordion dd {
    display: block;
    margin-bottom: 0 !important; }
    .accordion .accordion-navigation.active > a, .accordion dd.active > a {
      background: none;}
    .accordion .accordion-navigation > a, .accordion dd > a {
      background: none;
      color: #2A2A2A;
      padding: 0.25rem;
      display: block;
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 1rem; 
	  font-weight: bold; 
	  background: url('https://i.imgur.com/ERt02Jx.png') no-repeat center right;}
      .accordion .accordion-navigation > a:hover, .accordion dd > a:hover {
        background: none /*#e3e3e3*/; }
    .accordion .accordion-navigation > .content, .accordion dd > .content {
      display: none;
      padding: 0.35rem; 
	font-size: 0.9rem;
	background: none;}
      .accordion .accordion-navigation > .content.active, .accordion dd > .content.active {
        display: block;
        background: none; 
	  padding-top: 0; }  
	  
	  img.left {
    margin: 0 5px 0 0;
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(0.95); }

  input[type="submit"] {
  -webkit-appearance: none;
  -webkit-border-radius: 0px; 
  padding: 0;
  }
  
[class*="block-grid-"] > li {
	padding: 0 0.25rem 0.75rem;	
}
  
@media only screen and (min-width: 40.063em) {
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
	background: none; /*#2F3749;*/ ; 
}
.top-bar-section li:not(.has-form) a:not(.button) {
	padding: 0 5px;
	line-height: 35px;
	background: none; /*#2F3749;*/ 
}
.top-bar-section .has-dropdown > a:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border: inset 5px;
	border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
	border-top-style: solid;
	margin-top: -2.5px;
	top: 16.5px; 
}
.top-bar {
	height: 35px;
	line-height: 35px;
	background: none; /*#2F3749;*/ ;
	padding-left: 10px;
}
.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
	border: none;
	content: "\00bb";
	top: 0.65rem;
	margin-top: -1px;
	right: 5px;
	line-height: 1.2; 
}
.top-bar-section ul li > a {
	font-family: Ropa Sans;
	font-weight: 100;
	font-size: 0.95em;
	background: none; /*#2F3749;*/ ;
}

.top-bar ul li {
	background: none;
	}
.top-bar-section .dropdown {
	background: #444444;}

.principal img {
max-width: 60%;
}

.tabs.vertical {
  width: 25%;
  max-width: 25%;
  float: left;
  height: auto;
  margin: 0.3rem 0.5rem;
}

}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
/*	.sidebar h1 {
	font-family: HeadlineOneHPLHS, Tahoma, Arial, Helvetica, sans-serif !important;
	font-size: 2em ;
	color: #CCC !important;
	margin: 10px 5px 0 !important;
}

.sidebar h2 {
	margin: 0 5px 5px !important;
	font-weight: bold;
	color: #999;
	font-family: Tahoma, Geneva, sans-serif !important;
	font-size: 13px !important;
	}
	 */
.top-bar {
	height: 35px;
	line-height: 35px;
	margin-top: 5px;
	align-content:center;
}

.sidebar h1, .sidebar h2 {
  margin-top: 1em;
  margin-bottom: 0.2rem;
  line-height: 1.5em; }
}
@media only screen and (max-width: 40em) {
.principal p {
	font-size: 0.85em;
	}
		h1 {
	font-size: 1.2em ;
	}
	.principal img {
		max-width: 50%;
		}
	.top-bar .name h1 {
		font-family: Deansgate-Bold, HeadlineOneHPLHS, Tahoma, Arial, Helvetica, sans-serif !important;
		font-size: 1.2em ;
}
	}
.tabs-content {
    display: block;
}
.tabs dd > a, .tabs .tab-title > a {
	padding: 0.4rem 0.5rem !important;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 0.8em; }
.tabs dd.active a, .tabs .tab-title.active a {
	font-weight: 600; 
	background-color: transparent !important;}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.tabs.vertical ul, .tabs.vertical ol, .tabs.vertical dl, .tabs.vertical dd {
	font-size: ;
	line-height: 0.75em;
}
.tabs.vertical dt { margin-top: 8px;}

/* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption { 
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

		.adHeader { width: 275px; max-height: 120px; }
@media (min-width:40em) { .adHeader { width: 275px !important; max-height: 120px; } }
@media (min-width:64em) { .adHeader { width: 400px !important; max-height: 150px; } }

.adDiscogs { display: none; }
@media (min-width:40em) { .adDiscogs { max-width: 200px; height: auto; } }
@media (min-width:64em) { .adDiscogs { max-width: 250px; height: auto; } }

.adSide { max-width: 120px; height: auto; }
@media (min-width:40em) { .adSide { width: 120px; height: auto; } }
@media (min-width:64em) { .adSide { width: 120px; height: auto; } }

.adLetras { max-width: 200px; height: auto; }
@media (min-width:40em) { .adLetras{ max-width: 280px; height: auto; } }
@media (min-width:64em) { .adLetras{ max-width: 350px; height: auto; } }

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}