:root {
    --mainFont:"Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mainBgColor: #e8e0ef;
    --mainTextColor: #2A2823;
 
    --logoTextColor:#202522;
    --menuTextColor:#707874;
    --menuHoverTextColor:#111;
    --menuFont:sans-serif;
    --menuBgColor:rgba(144,144,144,0.9);
    --menuCurrentColor:#912;
	--bgMenuL2Color:rgba(144,144,144,0.8);
    --bgHoverColor:#3b3a50; /* #3b3a50 */
    --textHoverColor:#fAf8f3;
    --bgDivColor:transparent; /* #3b3a50 */
}
html {height: 100%;width: 100%; font : 14px var(--mainFont);}
body {  margin: 0;padding: 0;background-color: var(--mainBgColor); color: var(--mainTextColor);  }
/*  overflow:hidden; */
header,nav,section,article,aside,footer,hgroup{display: block;}     
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote,details,abbr,
header, footer, nav, article, aside, section, figure{
	margin: 0; padding: 0; border: 0; list-style:none }
a, abbr { text-decoration: none; }
.clr{clear: both}
header {position: fixed; top:0;left: 0; text-transform:lowercase; z-index: 90 !important;display:block;
        padding:0em; 
/* background: #008; */
        color:var(--textLogoColor);
        }
header a, header a:hover, header a:visited {color:var(--logoTextColor);}       
header abbr { z-index:99 !important; float: left; max-height:3em; line-height:3em;margin:2em 0 0 1em; }
nav {margin: 2em 0.2em 0em 1em; font: bold 1em var(--menuFont); color: #666; list-style:none; text-transform:lowercase;z-index:99;}
nav li { padding: 0.1em 0.5em; text-decoration: none; line-height: 100%; }
nav a, nav a:visited {color: #666;}
nav a:hover {color: #000}
nav > ul { margin: 4.5em 0 0; padding:0.5em; list-style: none;  }
nav > ul > li { margin: 0 0.3em 0.3em 0; padding: 0; list-style: none; cursor: pointer; }
nav > ul > li > ul {display: none; margin-left: 0em;margin-top: 0em; position:relative; padding:0;}
nav > ul > li > ul ul {margin-left: 1em;}
nav:hover  > ul {background:var(--menuBgColor);border-radius:7px; }
nav:hover  ul {display: block; }
nav:hover  h4 {display: none; }
nav > ul > li > ul > li {margin: 0.1em}
nav h4 { margin-top: -0.5em; margin-left: 1em; color:var(--menuCurrentColor) }
nav a.current {color:var(--menuCurrentColor)}
/*  */
main { position: fixed;z-index: 50;top:0;bottom: 0;left:0;right: 0; width:auto; height:85%; padding: 0em; margin: 4em 4em 0em 4em; }
#galeriaImg {height: 100%;width: 100%;}
#galeriaImg div {height: 100%;} 
#imgNext, #imgPlay, #imgPrev {position:absolute;z-index:75;top:0px;width:35%;background-color:transparent;}
#imgPrev {left:0;margin-left:-2em ;}
#imgPlay {left: 33%; z-index:74;}
#imgNext {right: 0em;margin-right:-2em ;}
.prev {cursor: url("prev.png"), all-scroll;}
.next {cursor: url("next.png"), all-scroll;}
.pause {cursor: url("pause.png"), cell;}
.play {cursor: url("play.png"), move;}
/* */
#galeriaThumbs {z-index:98;position:fixed;left:0px;bottom:0em;width:94%;height:5em;min-height:5em;max-height:5em;border-top:#aaa solid 1px;padding: 0 3%;}
#thumbPrev, #thumbNext {position: fixed;bottom: 0px;width: 3%;height: 5em;}
#thumbPrev {left: 0px;background:transparent url('prev.png') center center no-repeat;}
#thumbNext {right: 0em;background:transparent url('next.png') center center no-repeat;}
#thumbsAlbum {margin: 0.5em 0 0 0;overflow: hidden;max-height: 4em; }
#thumbsList { height: 4em; margin: 0 0px; display: inline-block;max-height: 4em;  }
#thumbsList img { width: auto; height: auto; max-height: 4em; max-width: 4em; margin-left: 7px; float: left; cursor: pointer; opacity:0.5 }
/* */
main.portfolio { display: inline-block;overflow-y: auto;overflow-x: hidden;margin: 0;height: 100%;width: 100%;}
main.portfolio2 { background-color: darkorange; }
#portfolioAlbum {position: relative;clear: both;margin: 16px;padding: 0 4em 0.5em 12em;}
#portfolioAlbum .portfolioTitol {width: 100%;margin: 96px 0px 16px 0px;color: #222;}
#portfolioAlbum .imgTitle {border-bottom: #333 solid 1px;color: #111;}
#portfolioAlbum .imgList {width: 100%; margin: 4px 0 16px 0; min-height: 4em;}
#portfolioAlbum .imgList img {display: inline-block;vertical-align: bottom;height: auto;width: auto;max-width: 9em; max-height: 9em;padding: 0 8px 8px 0; cursor: pointer;}
#portfolioCarousel {z-index:95; position: fixed;top:0;right: 0; width: 100%;height: 100%;background-color: rgba(11, 11, 11,0.9);display: none;}



@media screen and (orientation: portrait) {
html {font-size: 18px;}
 header {font-size: 21px;}
header abbr {margin:0 0 0 1em;} 
nav {margin:-2em 0 0 1em;}
nav:hover  > ul {background:rgba(144,244,144,0.85); }
section#main article.carousel {height: 80%;}
section#main article.about {height: 20%;font-size: 18px;}

section#curriculum article#carousel {display: none;}
section#curriculum article#text {left:4em;}

}

@media (orientation: landscape) {

}
/* Pantallas de gran resolución ----------- */
@media all and (max-width : 1824px) {
}
/* Tabletas (Vertical y Horizontal) ----------- */
@media all and (max-width : 1024px) {

}
/* Tabletas (Vertical) ----------- */
@media all and (max-width:1024px) and (orientation : portrait)  {

}
 
/* Tabletas (Horizontal) ----------- */
@media all and (max-width : 800px) {
header abbr {margin:0 0 0 1em;} 
nav {margin:-2em 0 0 1em;}
section#curriculum article#carousel {display: none;}
section#curriculum article#text {left:4em;}
}