/* CSS Document */

body {padding:0px; margin:2px 0px 0px 0px;   font-size: 14px; font-family:Arial, Helvetica, sans-serif; background-color:#e5e5e3; overflow-x: hidden;}
::-webkit-scrollbar { 
    display: none; 
}
.menu { color:white; z-index: 50; letter-spacing: 2px;width:100%; border-top: solid 0px blue; position:fixed; top:0px; z-index:10; z-index: 50; }

.hanalei {font-size: 24px; font-family: 'Permanent Marker', cursive; color:black;}
.hanaleibig {font-size: 32px; font-family: 'Permanent Marker', cursive; color:black;}
/*.insight { font-size: 14px; width: 180px; display:inline-block; padding: 40px; color:#000; font-family:Arial, Helvetica, sans-serif; letter-spacing: 2px;line-height: 24px; font-weight: ;}.insight2 { font-size: 14px; width: 180px; display:inline-block; padding: 40px; color:#000; font-family:Arial, Helvetica, sans-serif; letter-spacing: 2px;line-height: 24px; font-weight: ;}.insight3 { font-size: 14px; width: 328px; display:inline-block; padding: 40px; color:#000; font-family:Arial, Helvetica, sans-serif; letter-spacing: 2px;line-height: 24px; font-weight: ;}.insight4 { font-size: 14px; width: 350px; display:inline-block; padding: 40px; color:#000; font-family:Arial, Helvetica, sans-serif; letter-spacing: 2px;line-height: 24px; font-weight: ;}.insight5 { font-size: 14px; width: 311px; display:inline-block; padding: 40px; color:#000; font-family:Arial, Helvetica, sans-serif; letter-spacing: 2px;line-height: 24px; font-weight: ;}*/

.insight6
{font-size: 1.2em; width: 440px;  padding: 20px 25px 25px; color: #000000;font-family: Lora,serif; letter-spacing: 1px; background: rgba(248,248,248,1); line-height: auto; font-weight: 700;	overflow:hidden; box-shadow: 5px 5px 5px rgba(10,10,10,0.5); z-index:10; position: relative; }
.first {margin-top: 42px;}
.greybordertop {border-top: solid 1px #e5e5e3;}
.marginbottom {margin-bottom: 0px;}
.floatright {float: right; width:400px;}	
.floatleft {float: left; position: relative;}
.inline2 {display: inline-block}
.inline{display: inline-block; margin: 0px 0px;}
.nopadding {padding: 0px; width:490px;}
.nobold {font-weight:400;}
.arial {font-size: 0.7em; font-family: Arial, Helvetica, sans-serif;}
.current {background-image: url("http://fernandezpello.net/works/bg4.png"); height:600px;}
.insight {display: inline-block; font-size: 1.2em;    width:80%;  padding: 20px;    color: #000000;font-family: Lora,serif;    letter-spacing: 1px;    background: rgba(248,248,248,1);  font-weight: 700;	overflow:hidden; box-shadow: 5px 5px 5px rgba(10,10,10,0.5); z-index:10; position: relative;}


.boton:hover {background: rgba(255,255,255,1);}
.insight a , .insight6 a {display: inline;}

.content{ top: 0px; position: absolute;} 
a {text-decoration: none; position: relative; color: blue;} a:hover{color:#5c5cff; text-decoration: none;}
.note {letter-spacing: 2px; font-style:italic; line-height: 19px;} 
.content img {display: inline; list-style: none; box-shadow: 2px 2px 15px #888888;}
#wrapper img {zoom:60%;} #wrapper2 img {zoom:100%;} 


a {outline: none; display:table;}
a img {border:none;}
.underline {text-decoration:underline;}
.lazy {display: none;}
.about {display: none; background: blue; padding: 12px; font-family: Lora, sans-serif; font-size: 1em;  float: left;}
.name {background: blue; padding: 12px; font-family: Lora, sans-serif; font-size: 1em; font-weight:; float: left;}	
.mail { /* left: 305px; */ top: 0px; background: blue; float: left; /* z-index: 50; */ padding: 12px 12px 12px 0; font-family: lora; font-size: 1em; letter-spacing: 1px; color: white; margin-left:-1px;	}
.corner {text-decoration: line-through;}
.menu a:link {        /* margin-right: 15px; */    text-decoration: none;  position: relative;    color: white;    letter-spacing: 2px;    font-weight:;	display:block;	height:100%;}.mail a:visited{color: white;}  
.mail:hover, .mail:hover a {color:#6a6aff;}
.menu a:link {text-decoration: none; position: relative; color: white; letter-spacing: 1px;} .menu a:visited{color: white;} .name:hover, .about:hover {color:#6a6aff;}

#wrapper , #wrapper2 {display:inline-block; /*margin:50px;*/}

#wrapper .insight {position:relative; visibility:hidden;
}
#wrapper:hover .insight {visibility:visible;}

#wrapper .insight2 {position:absolute; left:0px; top:-3px; margin:0px; background:rgba(229,229,227,1); padding: 30px; visibility:hidden;
}
#wrapper:hover .insight2 {
visibility:visible;
}

#wrapper .insight4 {position:absolute; left:0px; top:-3px; margin:0px;  background:rgba(229,229,227,1); padding: 30px; visibility:hidden;
}
#wrapper:hover .insight4 {
visibility:visible;
}


#wrapper .insight5 {position:absolute; left:0px; top:-3px; margin:0px; background:rgba(248, 248, 214, 1); padding: 30px;}



@media (max-width: 500px) {  


.name {    }	
#wrapper , #wrapper2 {width:100%; margin: 0px;}
img {width:100%; height:auto; box-sizing: border-box;} .content {width:100%; box-sizing: border-box;}
.insight6 {width:95%; font-size:1.1em; box-sizing: border-box;}
.marginbottom {margin-bottom: 20px;}
.menu{font-size: 0.9em;}
.floatright {width:88%}
.about {display:inline;}
.name {display: none;}
.first{margin-top:40px;}
}