@import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic,900,900italic);
@import url(http://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,900,700italic,900italic&subset=latin,latin-ext);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);

body { margin: 0; }
body, html { height: 100%; width:100%; }
.frame span{ font-size:1em; line-height:normal; display:none;  padding:0.2em;}
.z{ bottom: 10px;left: 10px; z-index:999;background:#FE4365;}
 .z a:hover{  background:#000;  }
 .z a:link, .z a:visited, .z a{ font-weight:bold; font-size:0.9em; color:#fff; text-decoration:none;}
.help{ bottom: 60px;left: 10px; z-index:99; position:fixed;} 
.destacada{ bottom: 10px;right: 10px; z-index:99; position:fixed;} 
.container { margin: 0 auto; }
#work{ overflow: auto; }
#what {width:100%;overflow: auto;}
#dafoto{height:40em; cursor:move;}

  

.clickme{cursor: pointer;}
/*////////// ELEMENTOS HTML /////////*/
header, footer {
    clear:both;
    text-align:center;
    padding:0px;
	font-family: 'Lato', sans-serif;
	font-size:0.7em;
	color:#333;
	text-transform:uppercase;
	line-height: 1.1em;
vertical-align: baseline;
letter-spacing: 1.1px;
word-spacing: 0px;	 	 
}
header{width:100%; border-top:0.5em solid #000; border-bottom:0.5em solid #FFF; background:#FFF;}
article{ width:92%; margin:1em auto ;}
footer {height:6em;}
h1,h2 { line-height:normal; font-style:italic; text-align:center;}
h1{font-size:2em;}

/*////////// NAVEGACION /////////*/
nav, h1,h2 {font-family: 'Playfair Display', serif;}
nav{ float:left; font-style:italic; font-weight:500; line-height:normal; height:100%; display:none;
height:100%; position:relative; z-index:77;padding: 0; text-align:center;}
nav ul{margin:1.4em; font-size:1.8em;width: 5em;height: 100%;}
nav ul li{ border-bottom: 1px dashed #000; }
nav ul li a:hover{ font-weight:700; }
nav ul li a {  }
nav span{ }
.viendo { font-weight:700;}
.toggle{ display:none;}
#damenu{cursor: pointer; float:left; max-width:4em; margin: 2em 0 0 2em; left:2em; position: absolute; z-index:12; }

/*////LOGO Y ESO////*/
.blocked img {display: block; max-width:100%;}
.blocked {position: relative; display: inline-block; border:0px; padding:0px; visibility:hidden;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1;
} 
/*////MODAL////*/
#modal{ width:100%;  min-height:100%; overflow: auto;  top:0; background:#000; display:none; z-index:99;
background-color: rgba(255, 255, 255, 0.6);}
#box{   z-index:100; margin:4em auto;   background:#FFF;  height:auto; padding:0.2em;   }
article p{font: 400 14px/1.3 'Open Sans', Verdana, Helvetica, sans-serif;}
#x{ position:absolute; z-index:101; margin:-0.2em auto;   background:#FFF;  height:auto;   }
/*//////////DESCRIPCION, PREV Y NEXT /////////*/
#prev, #next  {position:absolute;  z-index:88; margin-top: -3em; top:50%;}
#prev {left: 1em;}
#next {right: 1em;}
#data {bottom:2em; left:2em; position: fixed;}

/*////////// SCROLLER /////////*/
/* Example wrapper */
.wrap {position: relative;margin: 3em 0;}
.opaque {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";  
  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=50);  
  opacity: 0.4;
}
.info{}


  /*, screen*/
  
@media screen and  (min-width: 960px) {
#box{  width:60%; }
}  
@media screen and (max-width: 480px) and (max-height: 640px) {
.frame { height: 20em; line-height: 20em;}
.frame img{ max-height: 19.1em;  }
#damenu{  max-width:4em; margin: 3em 0 0 0.8em; left:0.2em;  }
#box{  width:98%;  margin:0em auto; border-TOP: 0.5em solid #000;   }
.clickme{ width:3em;}
.navigation img{ width:4.2em;}
article p{font: 400 13px/1.2 ;}
header{ position:fixed; z-index:96;}
 #dafoto{ margin-top:4.6em;}
 nav{ margin-top:5.2em;}
}
@media screen and (max-width: 320px) and (max-height: 480px) {
 #damenu{  max-width:4em; margin: 2em 0 0 0em; left:0.2em;  }
 
}


@media screen and (orientation:portrait) {
     /* Portrait styles */
     /*hide your main content and display message */

 }
 @media screen and (orientation:landscape) {
     /* Landscape styles */
     /* show your content*/

 }
 
 
 .demo p {
  margin:15px;
}