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

/* ================================================================ 

This copyright notice must be kept untouched in the stylesheet at 

all times.



The original version of this stylesheet and the associated (x)html

is available at http://www.cssplay.co.uk/menus/cssplay-bezier-curve-bounce-menu.html

Copyright (c) Stu Nicholls. All rights reserved.

This stylesheet and the associated (x)html may be modified in any 

way to fit your requirements.

=================================================================== */
html, body {height:100%; padding:0; margin:0;}

section {display:block; width:100%; position:relative;}
section article {width:90%; max-width:1300px; min-width:450px; margin:0 auto; text-align:center; margin-top:0;}



#a1 {min-height:100%; background:url(../images/tina-modotti.jpg) no-repeat center center fixed;background-size:cover; position:relative;}

#a2
{min-height:100%; background:url(../images/tina-balcon.jpg) no-repeat center center fixed;background-size:cover; position:relative;}


#a3
{min-height:100%; background:url(../images/tina-ojos.jpg) no-repeat center center fixed;background-size:cover; position:relative;}

#a4
{min-height:100%; background:url(../Tina-Modotti/images/tina-radio.jpg) no-repeat center center fixed;background-size:cover; position:relative;}

#a5
{min-height:100%; background:url(../images/Tina-lettura.jpg) no-repeat center center fixed;background-size:cover; position:relative;}
#a6
{min-height:100%; background:url(../images/Tina1929.jpg) no-repeat center center fixed;background-size:cover; position:relative;}
#a7
{min-height:100%; background:url(../images/Tina-cinema.jpg) no-repeat center center fixed;background-size:cover; position:relative;}
#a8
{min-height:100%; background:url(../images/Tina-pintura.jpg) no-repeat center center fixed;background-size:cover; position:relative;}

.cssplay-menu {width:0; height:0; margin:180px auto; position:relative; 

-webkit-tap-highlight-color: rgba(0,0,0,0);

transform: translate3d(0,0,0); z-index:100;

}

.cssplay-menu .segment {width:350px; height:350px; border-radius:100%; overflow:hidden; position:absolute; left:0; top:0; margin-left:-175px; margin-top:-175px; z-index:100;

transform:scale(0);

transition: 0.5s cubic-bezier(.58,2.4,0.5,0.5);

}

.cssplay-menu .curve-upper {width:356px; height:356px; position:absolute; left:-178px; top:-178px; background:#000; border-radius:100%; 

transform:scale(0);

transition: 0s;

}

.cssplay-menu .curve-lower {width:364px; height:364px; position:absolute; left:-182px; top:-182px; border-radius:100%; overflow:hidden;

transform:scale(0);

transition: 0s;

}

.cssplay-menu .curve {display:block; width:165px; height:210px; background:#00aeef; position:absolute; left:50%; top:50%;

transform-origin:left top;

transform:rotate(0deg) skewY(45deg);

}



.cssplay-menu .segment label {display:block; width:130px; height:175px; background:#9a7b5d; position:absolute; left:175px; top:175px; border:1px solid #000; cursor:pointer;

transform-origin:left top;

transition: 0.25s cubic-bezier(0,0,1,1);

}

.cssplay-menu .segment label span {display:block; width:60px; height:60px; position:absolute; left:0; top:0; right:10px; bottom:85px; margin:auto; background-position:center center; background-repeat:no-repeat;}




.cssplay-menu .segment label:nth-of-type(1) {transform:rotate(0deg) skewY(45deg);}

.cssplay-menu .segment label:nth-of-type(2) {transform:rotate(45deg) skewY(45deg);}

.cssplay-menu .segment label:nth-of-type(3) {transform:rotate(90deg) skewY(45deg);}

.cssplay-menu .segment label:nth-of-type(4) {transform:rotate(135deg) skewY(45deg);}

.cssplay-menu .segment label:nth-of-type(5) {transform:rotate(-180deg) skewY(45deg);}

.cssplay-menu .segment label:nth-of-type(6) {transform:rotate(-135deg) skewY(45deg);}

.cssplay-menu .segment label:nth-of-type(7) {transform:rotate(-90deg) skewY(45deg);}

.cssplay-menu .segment label:nth-of-type(8) {transform:rotate(-45deg) skewY(45deg);}



.cssplay-menu .segment label:nth-of-type(1) span {background: url(../images/libro-tina.png) no-repeat;

transform:skewY(-45deg) rotate(0deg);

}

.cssplay-menu .segment label:nth-of-type(2) span {background: url(../images/radio-modotti.png) no-repeat;

transform:skewY(-45deg) rotate(-45deg); 

}

.cssplay-menu .segment label:nth-of-type(3) span {background: url(../images/arte.png) no-repeat;

transform:skewY(-45deg) rotate(-90deg); 

}

.cssplay-menu .segment label:nth-of-type(4) span {background: url(../images/teatro-tina.png) no-repeat;

transform:skewY(-45deg) rotate(-135deg); 

}

.cssplay-menu .segment label:nth-of-type(5) span {background: url(../images/biografia.png) no-repeat;

transform:skewY(-45deg) rotate(-180deg); 

}

.cssplay-menu .segment label:nth-of-type(6) span {background: url(../images/cornea.png) no-repeat;

transform:skewY(-45deg) rotate(-225deg); 

}

.cssplay-menu .segment label:nth-of-type(7) span {background: url(../images/acuile-furlane.png) no-repeat;


transform:skewY(-45deg) rotate(-270deg); 

}

.cssplay-menu .segment label:nth-of-type(8) span {background: url(../images/CINE-modotti.png) no-repeat;

transform:skewY(-45deg) rotate(-315deg); 

}



.cssplay-menu .center{display:block; width:64px; height:64px; border-radius:100%; background:#00bff3 url(../Tina-Modotti/images/luna-cornea.png) no-repeat center center; overflow:hidden; cursor:pointer; position:absolute; z-index:200; left:0; top:0; margin-left:-32px; top:-42px; box-shadow:0 0 0 2px #000;}



.cssplay-menu .holder {width:0; height:0; position:absolute; top:0; left:0;} 

.cssplay-menu .holder input {position:absolute; display:none;}



.cssplay-menu #toggle:checked + .segment {

transition: 0.5s cubic-bezier(.58,3,0.5,0.5);

transform:scale(1);

}

.cssplay-menu #toggle:checked ~ .center {

transition: 0.5s cubic-bezier(.58,3,0.5,0.5);

transform:scale(1.2);

}

.cssplay-menu #toggle:checked ~ .curve-upper {

transition: 0.5s cubic-bezier(.58,3,0.5,0.5);

transform:scale(1);

}

.cssplay-menu #toggle:checked ~ .curve-lower {

transition: 0.5s cubic-bezier(.58,3,0.5,0.5);

transform:scale(1);

}



.cssplay-menu #c1:checked ~ .segment label:nth-of-type(1),

.cssplay-menu #c2:checked ~ .segment label:nth-of-type(2),

.cssplay-menu #c3:checked ~ .segment label:nth-of-type(3),

.cssplay-menu #c4:checked ~ .segment label:nth-of-type(4),

.cssplay-menu #c5:checked ~ .segment label:nth-of-type(5),

.cssplay-menu #c6:checked ~ .segment label:nth-of-type(6),

.cssplay-menu #c7:checked ~ .segment label:nth-of-type(7),

.cssplay-menu #c8:checked ~ .segment label:nth-of-type(8) {background:#4c4c4c;}



.cssplay-menu #c1:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(0deg)}

.cssplay-menu #c2:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(45deg)}

.cssplay-menu #c3:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(90deg)}

.cssplay-menu #c4:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(135deg)}

.cssplay-menu #c5:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(180deg)}

.cssplay-menu #c6:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(225deg)}

.cssplay-menu #c7:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(270deg)}

.cssplay-menu #c8:checked ~ #toggle:checked ~ .curve-lower {transform:rotate(315deg)}



.cssplay-menu .sub {width:420px; height:auto; overflow:hidden; position:absolute; left:-215px; top:195px; background-color:#363636; filter: alpha(opacity=30);}



.cssplay-menu .sub dl {padding:2px; margin:0; width:418px; height:auto; position:absolute; top:-210px; left:0;

transition: 0.5s cubic-bezier(.58,3,0.5,0.5);

}

.cssplay-menu .sub dl dt {text-align:center; font:bold 16px/20px Tahoma, Geneva, sans-serif; color:#00aeef;}

.cssplay-menu .sub dl dd {padding:0; margin:0; text-align:center; font:normal 15px/20px 'Lato', arial, sans-serif; color:#fff;}

.cssplay-menu .sub dl dd a {color:#0072bc;}



.cssplay-menu #c1:checked ~ #toggle:checked ~ .sub dl:nth-of-type(1),

.cssplay-menu #c2:checked ~ #toggle:checked ~ .sub dl:nth-of-type(2),

.cssplay-menu #c3:checked ~ #toggle:checked ~ .sub dl:nth-of-type(3),

.cssplay-menu #c4:checked ~ #toggle:checked ~ .sub dl:nth-of-type(4),

.cssplay-menu #c5:checked ~ #toggle:checked ~ .sub dl:nth-of-type(5),

.cssplay-menu #c6:checked ~ #toggle:checked ~ .sub dl:nth-of-type(6),

.cssplay-menu #c7:checked ~ #toggle:checked ~ .sub dl:nth-of-type(7),

.cssplay-menu #c8:checked ~ #toggle:checked ~ .sub dl:nth-of-type(8) {top:20px;

transition: 0.5s cubic-bezier(.58,3,0.5,0.5) 0.5s;

} 



.cssplay-menu #c1:checked ~ #toggle:checked ~ .sub,

.cssplay-menu #c2:checked ~ #toggle:checked ~ .sub,

.cssplay-menu #c3:checked ~ #toggle:checked ~ .sub,

.cssplay-menu #c4:checked ~ #toggle:checked ~ .sub,

.cssplay-menu #c5:checked ~ #toggle:checked ~ .sub,

.cssplay-menu #c6:checked ~ #toggle:checked ~ .sub,

.cssplay-menu #c7:checked ~ #toggle:checked ~ .sub,

.cssplay-menu #c8:checked ~ #toggle:checked ~ .sub {height:250px} 



	@media only screen and (max-width:480px) {

	.team {display:none;}

	#info h3.smartphone {display:block;}

	}


#contenido
{width:80%;height:auto; margin:0 auto; text-align:center; margin-top:5%;
background-color: rgba(233,227,220,0.8);

    padding: 2%;
    color: #362414;
    position: absolute;
	position:relative;
    z-index: 2;
	
}
p
{
		font-family:Tahoma, Geneva, sans-serif;
	font-size:16px;
	line-height:21px;
	text-align:left;
	
}