/* CSS Document */
/* Author: Pablo Lara */

* {
	border:0px;
	margin:0;
	padding:0;
	}

window {
	width:400px;
}

html {
	margin:0px;
	}
@media screen and (max-width: 400px) {
	html{
		width:400px;
	}
}
body {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	text-align: left;
	color:#292929;
	margin:0px;
	background:#f4f1ea;
	}

h1 {
	font-size: 28px;
	color: #5c5858;
	text-transform:uppercase;
	font-weight:800;
	margin-bottom:10px;
	}

h2 {
	font-size: 22px;
	line-height:110%;
	font-weight:normal;
	margin-bottom:8px;
	}

h3 {
	font-size: 19px;
	color: #f3ec19;
	font-weight: normal;
	padding-bottom:5px;
	}
b {
	font-weight:bold;
	}
hr {
	border-bottom:1px solid #ff0a4c;
	margin-top:4px;
	margin-bottom:8px;
	}
.line_normal {
	border-bottom:1px solid #b277bd;
	height:10px;
	margin-bottom:12px;
	width:100%;
	}
.hr_title {
	border-bottom:1px solid #666565;
	margin-top: 10px;
    margin-bottom: 19px;
	}

.bold_color{
	font-weight:bold;
	color:#1f89ff;
	text-transform:uppercase;
}
.bold_magenta{
	color:#db086b;
}
.bold_gray{
	color:#7b7b7b;
}
.bold_contact{
	font-weight:800;
	color:#0384e2;
}
.bold_int_info_title{
	font-weight:800;
	color:#572361;
}
.informative_title{
	font-weight:800;
	color:#953764;
	font-size:20px;
}
.bold_yellow{
	font-weight:800;
	color:#fbd626;
}
.bold_webmaster{
	font-weight:400;
	color:#9b9280;
}

/* LINK EFFECT */
a, #header_logo, .contacto_icon, #contacto_dossier_button, .discografia_album
{
	text-decoration:none;
	  transition-property: background-color, color, border-color, opacity, -webkit-filter;
	  transition-duration: 0.22s;
	  transition-timing-function: ease-out;
	  -webkit-transition-property: background-color, color, border-color, opacity, -webkit-filter;
	  -webkit-transition-duration: 0.22s;
	  -o-transition-property: background-color, color, border-color, opacity, -webkit-filter;
	  -o-transition-duration: 0.22s;
}
a, #header_logo, .contacto_icon, #contacto_dossier_button, .discografia_album
{
	  transition-property: background-color, color, border-color, opacity, -webkit-filter;
	  transition-duration: 0.22s;
	  transition-timing-function: ease-out;
	  -webkit-transition-property: background-color, color, border-color, opacity, -webkit-filter;
	  -webkit-transition-duration: 0.22s;
	  -o-transition-property: background-color, color, border-color, opacity, -webkit-filter;
	  -o-transition-duration: 0.22s;
}

a{
	color: #ee2f3d;
	text-decoration:none;
}
a:hover{
	color: #d10075;
}

/* old_HEADER */
#old_header_cnt{
	width:100%;
	height:790px;
	float:left;
	background:#000 url(../images/back_top.jpg) top center;
	background-repeat:no-repeat;
}	
#old_header{
	width:400px;
	margin:auto;
	margin-top:70px;
}
#old_header_new_album{
	width: 352px;
    margin: auto;
}
#old_header_slogan{
	width:400px;
	float:left;
	text-align:center;
	margin-bottom:42px;
	font-family: 'Lora', serif;
	text-transform:uppercase;
}
#old_header_slogan_top{
	width:320px;
	margin:auto;
	font-size:25px;
	color:#c9cacf;
	letter-spacing: 1px;
	border-top:1px solid #6d7282;
	padding-top:7px;
	margin-bottom:2px;
}

/* HEADER */
#header_cnt{
	width:100%;
	height:1110px;
	float:left;
	background:#000 url(../images/back_top_2.jpg) top center;
	background-repeat:no-repeat;
}	
#header{
	width:400px;
	margin:auto;
	margin-top:70px;
}
#header_logo{
	width:400px;
	float:left;
	text-align:center;
	margin-bottom:30px;
	font-size:34px;
	font-weight:900;
	letter-spacing:3px;
	color:#acc9df;
	text-transform:uppercase;
	font-family: 'Muli', sans-serif;
}
#header_logo:hover{
	-webkit-filter: saturate(400%);
	filter: saturate(400%);
}
#header_slogan{
	width:400px;
	float:left;
	text-align:center;
	margin-bottom:0px;
	font-family: 'Lora', serif;
	text-transform:uppercase;
}
#header_slogan_top{
	width:320px;
	margin:auto;
	font-size:25px;
	color:#c9cacf;
	letter-spacing: 1px;
	border-top:1px solid #6d7282;
	padding-top:7px;
	margin-bottom:2px;
}
#header_slogan_bottom{
	width:320px;
	margin:auto;
	font-size:19px;
	color:#f3f3f5;
	letter-spacing: 2px;
	border-bottom:1px solid #6d7282;
	padding-bottom:9px;
	margin-bottom:20px;
}
#header_new_album{
	width: 352px;
    margin: auto;
}
#header_circle{
    margin-top: -461px;
    width: 70px;
    height: 70px;
    background: url(../images/back_circle.png) no-repeat center top;
    position: absolute;
    margin-left: 188px;
    color: #d3d3d3;
    font-weight: 800;
    text-align: center;
    padding-top: 17px;
    font-size: 12px;
    padding-left: 1px;
}

@media screen and (max-width: 820px) {
	#header{
		width:400px;
	}
}

/* BIO */
#bio_cnt{
	width:100%;
	float:left;
	background:#e4e4e4 url(../images/img_home_bio.jpg) bottom right;
	background-repeat:no-repeat;
}	
#bio{
	width:360px;
	margin:auto;
	margin-top:34px;
}
#bio_title{
	width:100%;
	margin:auto;
	font-size:42px;
	color:#9fadc9;
	font-weight:800;
	text-transform:uppercase;
	margin-bottom:20px;
}
#bio_text{
	width:100%;
	margin:auto;
	color:#4f4f4f;
	font-weight:500;
	line-height:22px;
	padding-bottom:80px;
}
#bio_button{
	width:100%;
	margin:auto;
}
#bio_button_bio{
	width:120px;
	color:#FFF;
	background-color:#7686a5;
	padding:13px 12px 13px 12px;
	text-align:center;
	font-weight:700;
	margin-top:-50px;
	margin-bottom:50px;
	letter-spacing:1px;
}
#bio_button_bio:hover{
	background-color:#267fda;
}

@media screen and (max-width: 820px) {
	#bio_cnt{
		padding-bottom:350px;
	}
	#bio_button_bio{
		float:right;
		margin-bottom:4px;
	}
}

#bio a{
	color:#085d8d;
	font-weight:bold;
	font-size:18px;
}
#bio a:hover{
	color:#ed006a;
}

/* CONTENIDO */
#contenido_cnt{
	width:100%;
	float:left;
	background-color:#b7c7c7;
}	
#contenido{
	width:1200px;
	margin:auto;
	margin-top:34px;
}
#contenido_title{
	width:100%;
	margin:auto;
	font-size:42px;
	color:#7a87a0;
	font-weight:800;
	text-transform:uppercase;
	margin-bottom:20px;
	text-align:center;
}
.contenido_item{
	width:380px;
	color:#4f4f4f;
	font-weight:500;
	line-height:22px;
	padding:10px;
	float:left;
}

@media screen and (max-width: 820px) {
	#contenido{
		width:400px;
	}
}

/* DISCOGRAFIA */
#discografia_cnt{
	width:100%;
	height:560px;
	float:left;
	background-color:#26292f;
}
#discografia{
	width:900px;
	margin:auto;
	margin-top:60px;
}
#discografia_title{
	width:380px;
	margin:auto;
	font-size:42px;
	color:#576a8f;
	font-weight:800;
	text-transform:uppercase;
	margin-bottom:40px;
	text-align:center;
}
#discografia_albums{
	width:100%;
	margin:auto;
}
.discografia_album{
	float:left;
	width:300px;
	margin-bottom:30px;
}
.discografia_album:hover{
	-webkit-filter: contrast(130%);
	filter: contrast(130%);
}
.discografia_album_img{
	margin:auto;
	text-align:center;
	width:274px;
	height:268px;
	margin-bottom:14px;
}
.discografia_album_title{
	margin: auto;
    text-align: center;
    color: #b5bdce;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 22px;
    border-top: 1px solid #668b9c;
    width: 273px;
    padding-top: 10px;
}

@media screen and (max-width: 820px) {
	#discografia{
		width:300px;
	}
	#discografia_title{
		width:300px;
	}
	#discografia_cnt{
		height:1300px;
	}
}

/* DISCOGRAFIA_PLAYLIST */
#discografia_playlist_cnt{
	width:100%;
	height:2520px;
	float:left;
	background-color:#26292f;
}
#discografia_playlist{
	width:380px;
	margin:auto;
	margin-top:60px;
}
.discografia_playlist{
	float:left;
	width:380px;
	margin-bottom:60px;
	color:#CCCCCC;
	text-align:center;
}

/* AGENDA */
#agenda_cnt{
	width:100%;
	float:left;
	background:#d9d9d9 url(../images/img_home_agenda.jpg) bottom left;
	background-repeat:no-repeat;
	padding-bottom:60px;
}	
#agenda{
	width:340px;
	margin:auto;
	margin-top:34px;
}
#agenda_info{
	float:left;
	width:340px;
}
#agenda_title{
	width:100%;
	margin:auto;
	text-align:center;
	font-size:42px;
	color:#8c97ac;
	font-weight:800;
	text-transform:uppercase;
	margin-bottom:20px;
}
.agenda_item{
	width:100%;
	height:160px;
	margin:auto;
	border-bottom: 1px solid #bc2b54;
}
.agenda_item_fecha{
    float: left;
    width: 52px;
    font-family: 'Lora', serif;
    font-size: 66px;
    font-weight: bold;
    color: #bc2b54;
    letter-spacing: -3px;
    text-align: right;
    margin-right: 12px;
}
.agenda_item_mes{
	float:left;
	width:200px;
	text-transform:uppercase;
	font-weight:800;
	color:#bb6880;
	font-size:25px;
	margin-top:13px;
}
.agenda_item_year{
	float:left;
	width:200px;
	font-weight:800;
	color:#ec5d85;
	font-size:20px;
	margin-bottom:16px;
	margin-top:-3px;
}
.agenda_item_lugar{
	float:left;
	width:340px;
	color:#2056c7;
	font-weight:600;
	font-size:17px;
	margin-top:-8px;
}
.agenda_item_nombre{
	float:left;
	width:340px;
	color:#bc2b54;
	font-size:17px;
	padding-top:2px;
}
.agenda_item_ciudad{
	float:left;
	width:340px;
	color:#596377;
	font-size:14px;
	text-transform:uppercase;
	padding-top:4px;
	letter-spacing:1px;
	font-weight:800;
}

@media screen and (max-width: 820px) {
	#agenda_cnt{
		padding-bottom:330px;
	}
}

/* CONTACTO */
#contacto_cnt{
	width:100%;
	height:790px;
	float:left;
	background:#000 url(../images/back_bottom.jpg) top center;
	background-repeat:no-repeat;
}	
#contacto{
	width:400px;
	margin:auto;
	margin-top:75px;
}
#contacto_title{
	float:left;
	width:380px;
	font-size:42px;
	color:#94a3c1;
	font-weight:800;
	text-transform:uppercase;
	margin-bottom:40px;
	text-align:center;
}
#contacto_icons{
	float:left;
	width:380px;
	border-top:1px solid #94a3c1;
	border-bottom:1px solid #94a3c1;
	padding:12px 0px 12px 0px;
}
.contacto_icon{
	float:left;
	width:63px;
	height:63px;
	margin-right:10px;
}
.contacto_icon:hover{
	-webkit-filter: contrast(70%);
	filter: contrast(70%);
}
#contacto_web{
	float:left;
	width:380px;
	color:#c8c8c6;
	border-bottom:1px solid #94a3c1;
	padding:12px 0px 12px 0px;
	text-align:center;
	font-size:20px;
	font-weight:800;
}
#contacto_dossier{
	float:left;
	width:380px;
	border-bottom:1px solid #94a3c1;
	padding:12px 0px 12px 0px;
}
#contacto_dossier_button{
	width:200px;
	margin:auto;
	background-color:#bc2b54;
	color:#e6e6e6;
	text-align:center;
	font-size:16px;
	font-weight:700;
	padding:11px 5px 12px 5px;
	text-transform:uppercase;
}
#contacto_dossier_button:hover{
	background-color:#5268ca;
}
#contacto_form{
	float:left;
	width:324px;
	margin-top:20px;
	margin-left:32px;
}

/* CONTACTO_INFO */
#contacto_info_cnt{
	width:100%;
	float:left;
	background:#d2dbe4;
	padding-top:50px;
	padding-bottom:50px;
}	
#contacto_info{
	width:360px;
	margin:auto;
}

/* FOOTER */
#footer_cnt{
	width:100%;
	float:left;
	height:110px;
	background-color:#000;
}
#footer{
	width:582px;
	margin:auto;
	margin-top:0px;
	padding-top:24px;
	text-align:center;
}
#footer_text{
	color:#e2e2e5;
	font-size:15px;
	line-height:180%;
}
#footer_text_1{
	float:left;
}
#footer_text_2{
	float:left;
	margin-left:5px;
}
#footer_text_2 a{
	color:#FFF;
}
#footer_text_2 a:hover{
	color:#aff5ec;
}

@media screen and (max-width: 820px) {
	#footer_cnt{
		height:170px;
	}
	#footer{
		width:400px;
	}
	#footer_text_1{
		text-align:center;
		width:100%;
	}
	#footer_text_2{
		text-align:center;
		width:100%;
	}
}