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

/* html { 
  background: url(../barthes-perfil2.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}*/

html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }

a:hover {
	cursor: hand;
	display:inline

}

#content { padding-bottom: 5em; }

#footer {
	font-family: 'Oswald', sans-serif;
	font-size:14px;
	padding:10px 30px 10px 30px;
 clear: both;
 position: relative;
 z-index: 10;
 height: 5em;
 margin-top: -5em;
 background-color:#000;
}
#footer2 {
	font-family: 'Oswald', sans-serif;
	font-size:16px;
	font-weight:300;
	padding:10px 30px 10px 30px;
 clear: both;
 position: relative;
 z-index: 10;
 height: 5em;
 margin-top: -5em;
 border-top: dotted 1px #ff0179;c
}

#footerLeft { width: 50%; float: left; display: block; border-right: dotted 1px #FFF; height: 5em; color:#000; }
#footerRight { width: 48%; float: right; display: block; height: 70px; color:#000; text-align:right;}


.completo:link, .completo:visited{
    color: #fff;
	font-size:11px;
	text-decoration: none;
	font-style:italic;
	background-color:#ff0179;
	text-align:left;
	padding:5px 10px 5px 10px;
}
.completo:hover{
   background-color: #FFF;
   color:#ff0179;
}

.stories{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	line-height:25px;
	background-color:#FFF;
	text-align:justify;
	color:#000;
	padding:10px 20px 10px 50px;
	 border: dotted 1px #ff0179;
}

.blink {
  animation-duration: 400ms;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.ficha{
	height:400px;
	overflow:auto;
	
}
.fichaAbajo{
	padding: 10px 0px 0px 0px ;
	border-top-style:dotted;
	border-top-color:#FFE3FF;
	border-top-width:thin;
	overflow: auto;
	min-height:200px;
}

.artist {
    color: #fff;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	font-size:18px;
}

.artist:link, .artist:visited{
	font-size:18px;
    color: #ff0179;
	text-decoration: none;
}
.artist:hover{
    color: #fff;
	text-decoration: none;
}

.fragmentoIntro{
	font-family: 'PT Mono' ;
    color: #fff;
	font-size:17px;
	line-height:28px;
	text-align:center;
	border-bottom-style:dotted;
	border-bottom-color:#FFE3FF;
	border-bottom-width:1px;	
	padding: 0px 0px 5px 0px; 
}

.fragmentoTitle{
	font-family: 'PT Mono' ;
    color: #fff;
	font-size:14px;
	line-height:24px;
	text-align:left;
	background-color:#000;
	 
}

.fragmento{
    color: #fff;
	background-color:#000;
	text-decoration: none;
	text-align:justify;
	padding: 10px 5px 10px 0px;

}

.fragmentoLarge{
	font-family: 'PT Mono' ;
	text-align:left;
	line-height:22px;
    color: #000;
	font-size:14px;
	text-decoration: none;
	padding: 5px 25px 0px 25px;
}

.heart-fucsia{
	 color: #ff0179;
	font-size:12px;
	text-decoration: none;
}
.heart-orange{
	 color:#F90;
	font-size:12px;
	text-decoration: none;
}
.heart-green{
	 color: #0C3;
	font-size:12px;
	text-decoration: none;
}
.heart-blue{
	 color: #09F;
	font-size:12px;
	text-decoration: none;
}
.heart-purple{
	 color: #939;
	font-size:12px;
	text-decoration: none;
}

/* unvisited link */
.span_1_of_8:link, .span_4_of_8:link,  {
    color: #666;
	text-decoration: none;
	background-color: #8AC007;
	
 
	
}


/* visited link */
.span_1_of_8:visited {
    color: #000;
	text-decoration: none;
	background-color: #8AC007;
 
	
}
/* divs header */
.span_43_of_4 {
	width: 8%;
	background-color:#000;
	color:#FFF;
	text-align:center;
	vertical-align:middle;
	padding: 10px 2px 10px 2px ;
	border-bottom-style:solid;
	border-bottom-color:#FFE3FF;
	border-bottom-width:4px;
	min-height:55px;
	
}

.span_44_of_4 {
	width: 89%;
	background-color:#000;
	color:#FFF;
	text-align:center;
	vertical-align:middle;
	padding: 10px 0px 10px 0px ;
	border-bottom-style:solid;
	border-bottom-color:#FFE3FF;
	border-bottom-width:4px;
	min-height:55px;
}


/* mouse over link */
.span_1_of_8:hover, .span_4_of_8:hover {
    color: #FFF;
	background-color:#000;
	text-decoration: none;
	  -webkit-animation: mymove 1s; /* Chrome, Safari, Opera */
    animation: mymove 1s;
}

/* selected link */
.span_1_of_8:active {
    color:#ff0179;
	text-decoration: none;
   
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {background-color: white;}
    to {background-color: #000;}
}

/* Standard syntax */
@keyframes mymove {
    from {background-color: white;}
    to {background-color: #000;}
}





/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }


/*  GRID OF EIGHT  */
.span_8_of_8 {
	width: 100%;
	font-family: 'PT Mono';
	font-weight: 400;
	font-size:24px;
	text-align:center;
	color:#000;	
	padding: 20px 0px 20px 0px ;
}

.span_7_of_8 {
  	width: 87.3%;
}

.span_6_of_8 {
  	width: 74.6%;
	font-family: 'Lobster', cursive;
	font-weight: 400;
	font-size:48px;
	text-align:center;
	color:#000;	
	padding: 20px 0px 20px 0px ;
	
}

.span_5_of_8 {
  	width: 61.9%;
	font-family:'PT Mono' ;
	font-size:12px;
	text-align:center;
	background-color:#000;
	color:#999;	
	padding: 10px 0px 10px 0px ;
}

.span_4_of_8 {
  	width: 49.2%;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	text-align:center;
	background-color:#fff;
	color:#999;	
	padding: 20px 0px 20px 0px ;
	border:#999, 1px;
}

.span_3_of_8 {
  	width: 36%; /*  original 36.5% */
	font-family: 'PT Mono' ;
	font-size:13px;
	text-align:center;
	background-color:#000;	
	padding: 20px 0px 20px 0px ;
	color:#FFF;
	
}

.span_2_of_8 {
  	width: 23.8%;
	
}

.span_1_of_8 {
  	width: 11.1%;
	font-family: 'PT Mono';
	font-size:13px;
	background-color:#FFF;
	text-align:center;
	min-height:55px;	 
	padding: 20px 0px 20px 0px ;
	border-top-style:dotted;
	border-top-width:thin;
	border-top-color:#000;   
}


.span_1_of_1 {
	width: 100%;
	font-family: 'Lobster', cursive;
	font-weight: 400;
	font-size:48px;
	text-align:center;
	color:#000;	
	padding: 20px 0px 20px 0px ;
}
	

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
	font-family: 'PT Mono' ;
	font-weight: 400;
	font-size:14px;
	text-align:center;
	background-color:#000;
	color:#fff;	
	padding: 20px 0px 20px 0px ;
}

.span_1_of_2 {
  	width: 49.2%;
	font-family: 'PT Mono' ;
	font-size:12px;
	text-align:center;
	background-color:#000;
	color:#fff;	
	padding: 10px 0px 10px 0px ;
	 background: rgb(000, 000, 000); /* Fallback for older browsers without RGBA-support */
    background: rgba(000, 000, 000, 0.9);
	
}

.span_1_of_2:link, .span_1_of_2:visited {
  	width: 49.2%;
	font-family: 'PT Mono' ;
	font-size:12px;
	text-align:center;
	background-color:#000;
	color:#fff;	
	padding: 10px 0px 10px 0px ;
	 background: rgb(000, 000, 000); /* Fallback for older browsers without RGBA-support */
    background: rgba(000, 000, 000, 0.9);
	
}
.span_1_of_2:hover{
    color: #ff0179;
	text-decoration: none;
}
.span_1_of_2:active{
    color: #ff0179;
	text-decoration: none;
}

.span_3_of_3 {
  	width: 100%;
	font-family: 'PT Mono' ;
	font-size:14px;
	text-align:center;
	background-color:#FFF;	
	padding: 20px 0px 20px 0px ;
}

.span_2_of_3 { 
	width: 66.13%;
}

.span_1_of_3 {
  	width: 32.26%;
	font-family: 'PT Mono' ;
	font-size:12px;
	color:#FFF;
	text-align:left;
	background-color:#000;	
	
}

.span_1_1_of_3 {
  	width: 20%;
	
}

/*  GRID OF FOUR  
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}
*/

/*==================================================
 * Effect 1
 * ===============================================*/
 
 .effect1
{
  position: relative;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
.effect1:before, .effect1:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #000;
  -moz-box-shadow: 0 15px 10px #000;
  box-shadow: 0 15px 10px #000;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect1:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

/*==================================================
 * Fin de Effect 1
 * ===============================================*/



/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) ;
       -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) ;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) ;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #000;
  -moz-box-shadow: 0 15px 10px #000;
  box-shadow: 0 15px 10px #000;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
/*==================================================
 * Fin de Effect 2
 * ===============================================*/

/*==================================================
 * Effect 5
 * ===============================================*/
.effect5
{
 position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}
/*==================================================
 * Fin de Effect 5
 * ===============================================*/


/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8, .span_1_of_2, .span_2_of_2, .span_0_of_0, .span_1_of_3, .span_2_of_3, .span_3_of_3, { width: 100%; }
}