@charset "UTF-8";
/* CSS Document */
#home {
  max-height: 600px;
  overflow: auto;
}
#eimdc {
  margin: 60px 0 0 -4px;
  position: absolute;
  width: 70%;
-webkit-animation: zoomIn 0.7s ease-in-out 2s backwards;
-moz-animation: zoomIn 0.7s ease-in-out 2s backwards;
-ms-animation: zoomIn 0.7s ease-in-out 2s backwards;
animation: zoomIn 0.7s ease-in-out 2s backwards;
}
@-webkit-keyframes zoomIn {0% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(1);}
}
@-moz-keyframes zoomIn {0% {-moz-transform: scale(0);}
100% {-moz-transform: scale(1);}
}
@keyframes zoomIn {0% {transform: scale(0);}
100% {transform: scale(1);}
}

footer {
  background-color: #CDDFF7;
  bottom: 0;
  color: #989898;
  float: left;
  font-family: Georgia,"Times New Roman",Times,serif;
  font-size: 10px;
  height: 20px;
  margin-bottom: -3px;
  padding: 3px 6px 0 7px;
  position: fixed;
  z-index: 1111;
box-shadow: -2px 1px 2px rgba(100, 100, 100, 0.4) inset;
-moz-box-shadow: -2px 1px 2px rgba(100, 100, 100, 0.4) inset;
-webkit-box-shadow: -2px 1px 2px rgba(100, 100, 100, 0.4) inset;
}	
.panel {
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all 0.7s ease-in-out 0s;

  box-shadow: none;
  background-color: rgba(204, 225, 250, 0.7);
  border: 3px solid #FFFFFF;
  border-radius: 10px 0 0 10px;
  margin-left: 94%;
  min-height: 590px;
  position: absolute;
  top: 5px;
  width: 100%;
  z-index: 0;
  opacity:0;
}


.panel:target {
  margin-left: -5%;
  opacity:1;
box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.2);
}

.content {
    padding: 10px;
    position: absolute;
    top: 5px;
    text-align: left;
}
.content h2 {
  color: #000000;
  font-family: "Aguafina", cursive ;
  font-size: 2.3em;
  font-weight: 100;
  line-height: 30px;
  margin-top: 0;
  padding: 5px 0 0;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
.content p {
  color: #000000;
  font-size: 1.05em;
  line-height: 20px;
  padding-bottom: 10px;
  text-align: left;
}

.sketch {
  float: left;
  margin: -20px 5px 5px -10px;
  max-width: 60%;
}
p.footnote a {
  bottom: -10px;
  color: #990033;
  font-family: quicksand;
  left: 10px;
  position: absolute;
}
.footnote a:hover { color: #000;}

.toolvideo {
  position: absolute;
  width: 225px;
  right:15px;
box-shadow:2px 2px 4px #000000;
-moz-box-shadow:2px 2px 4px #000000;
-webkit-box-shadow:2px 2px 4px #000000;  
}

.iconvideo {display:none;}

#social {
  margin-top: -30px;
  position: absolute;
  width: 140px;
}
.noesveu {	right:-150px; }
.esveu {right: 2px;
-webkit-transition: all 3s ease-in;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-ms-transition: all 3s ease-in;
transition: all 3s ease-in 3s;
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.sketch { max-width:250px}

}


/* iPad portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.container > header h1 {
    font-size: 2.2em;
    line-height: 1.1;
}
.column p {
    font-size: 1.1em;
    line-height: 1.15;
	padding-top:3px;
}
.panel:target {
  margin-left: -8%;
}

.sketch { max-width:150px}
.toolvideo {width:80px;}

}

@media screen and (max-width: 1000px){
.toolvideo {display:none;}
.iconvideo {
  background: url("video-play.png") no-repeat scroll 0 0 transparent;
  bottom: -75px;
  height: 68px;
  position: absolute;
  right: 30px;
  width: 68px;
  display:block;
}
}

@media screen and (min-width: 320px) and (max-width: 480px) and (orientation:portrait){
/* iPhone portrait */
.container > header h1 {  font-size: 1.7em;}
}