/*
Theme Name: elufo BaseTheme 2.0
Theme URI: http://elufo.com
Description: elufo Base Theme basado en html5reset.org
Author: elufo
Author URI: http://elufo.com
Version: 2.0
*/
html{ margin: 0; padding: 0; }
body { background-color: #f5f5f5; margin: 0; padding: 0; font-family: 'Poppins', Arial, Helvetica, Verdana, Geneva, sans-serif; font-size: 80%; font-weight: 400; font-style: normal; /*letter-spacing: 1px;*/ word-spacing: 1px; line-height: 1.8em; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; }

a {color: black; text-decoration: none;}
a:hover {color: orange;}

/* Custom text-selection colors */
::-moz-selection{background: orange; color: #fff; text-shadow: none;}
::selection {background: orange; color: #fff; text-shadow: none;}
a:link {-webkit-tap-highlight-color: orange;}
ins {background-color: orange; color: #000; text-decoration: none;}
mark {background-color: orange; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

/* -------------------------------------------------------------------------------*/


#lienzo { display: grid; height: 100vh; grid-template-columns: 1fr; grid-template-rows: 41px 1fr 82px; grid-gap: 0px; grid-template-areas: "header" "content" "footer"; padding: 0; margin: 0 auto; max-width: 1500px; }
#header { grid-area: header; }
#content { grid-area: content; }
#footer { grid-area: footer; }
#wrapper { margin: 0px auto; padding: 0;  }

header{ margin: 0 auto; padding: 0 20px; position: fixed; top: 0; left: 0; right: 0; z-index: 99; background-color: #f5f5f5; max-width: calc(1500px - 40px); }
header .flex{ display: flex; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid white; box-shadow: 0 8px 8px -10px rgba(0,0,0,.1); padding: 10px 0 10px 0; }
header h1{ margin: 0; flex: 0 0 auto; line-height: 20px; font-weight: 600; }
header h1 a{ text-decoration: none; color: black; }

nav .ckmenu{ display: none; }
nav{ flex: 1 1 auto; max-width: 75%; }
nav ul{ display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
nav ul li{ line-height: 20px; margin: 0; padding: 0; }
nav ul li:nth-child(1), header nav ul li:nth-child(2), header nav ul li:nth-child(3){ font-weight: bold; }
.current-menu-item a{ color: orange; }

@keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
}
#content{ opacity: 0; padding: 20px 0; margin: 0 10px; min-width: calc(100% - 20px); animation-name: fade; animation-duration: 500ms; animation-delay: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-out; }
footer{ text-align: center; height: 82px; background: transparent url(http://suso33.com/wp-content/uploads/footer.png) no-repeat center; margin: 0 20px; position: relative; }
footer small{ display: block; margin: 0 auto; padding: 55px 0 0 0; font-weight: bold; text-shadow: 0px 0px 2px white; }
.social{ margin: 0; padding: 0; list-style: none; position: absolute; right: 0; bottom: 0; font-size: 0; line-height: 0px; width: 124px; height: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.social li{ flex: 1 1 auto; width: 24px; margin: 0; }
.social a{ display: block; margin: 2px; }
.social img{ display: block; margin: 0; width: 20px; height: 20px; border: 0; }


figure{ margin: 0; padding: 0; border: 0; }
.pagetitle{ text-align: center; line-height: 43px; font-size: 140%; background: transparent url(http://suso33.com/wp-content/uploads/category.png) no-repeat center; margin: 0 10px 20px 10px; }

.home article ul{ margin: 0 10px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; background-color: black; }
.home article ul li{ flex: 1 1 auto; width: calc(100% / 3); min-width: 300px; display: flex; align-items: center; position: relative; overflow: hidden; }	
.home article ul li:after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background-repeat: no-repeat; background-size: cover; background-position: center; filter: brightness(50%); transition: all .2s ease-in-out; }
.home article ul li a{ flex: 1 1 auto; font-size: 1000%; font-size: calc(3.75rem + ((1vw - 3.2px) * 2.5)); line-height: calc(100vh - 163px); font-family: 'Oswald'; text-align: center; background-repeat: no-repeat; background-size: cover; background-position: center; color: white; opacity: .6; z-index: 1; transition: all .2s ease-in-out; text-shadow: 0px 0px 6px black; }
.home article ul li:nth-child(1):after{ background-image: url(http://suso33.com/wp-content/uploads/suso33-mural.jpg); }
.home article ul li:nth-child(2):after{ background-image: url(http://suso33.com/wp-content/uploads/suso33-action.jpg); }
.home article ul li:nth-child(3):after{ background-image: url(http://suso33.com/wp-content/uploads/suso33-video.jpg); }
.home article ul li:hover:after{ filter: brightness(100%); transform: scale(1.2); transition: all .2s ease-in-out; }
.home article ul li:hover a{ opacity: 1; color: orange; transition: all .2s ease-in-out; }

.news{ display: flex; flex-wrap: wrap; justify-content: flex-start; }
.news-box{ flex: 1 1 auto; width: 100%; max-width: calc(100% / 4); }
.news-body{ padding: 0 10px 0 10px; text-align: justify; margin: 0 0 30px 0;}
.news-body figure{ margin: 0 0 10px 0; padding: 0; }
.news-body figure img{ display: block; margin: 0; border: 0; width: 100%; height: auto; }
.news-body h1{ margin: 0 0 10px 0; }

.portfolio{ display: flex; flex-wrap: wrap; justify-content: flex-start; }
.portfolio-box{ flex: 1 1 auto; width: 100%; max-width: calc(100% / 3); }
.port-body h1{ text-align: center; margin: 0 10px 20px 10px; padding: 8px 10px; font-size: 1.2em; background-color: #e9e9e9; }
.port-body h1 a{ color: black; text-decoration: none; }
.category-video .portfolio-box{ max-width: calc(100% / 2); }

.fotorama__wrap{ width: 100% !important; }
.fotorama{ margin: 0 10px;}
.fotorama__fullscreen-icon{ z-index: 99 !important; }
.fotorama__nav{ position: absolute !important; bottom: 0 !important; }
.fotorama--fullscreen .fotorama__nav{ position: relative !important; }
.fotorama__dot{ border-color: white !important; box-shadow: 0 0 4px 1px rgba(0,0,0,.7);  pointer-events: auto; }
.fotorama__caption{ left: 0 !important; top: 0 !important; }

.fotorama__caption__wrap{ font-size: .8em !important; color: white !important; display: block; width: auto; text-align: center; padding: 3px 10px !important; background-color: rgba(0,0,0,.5) !important; font-style: italic; opacity: 0; }
.fotorama--fullscreen .fotorama__caption__wrap{ opacity: 1 !important; }

.fotorama__html{ background-color: white; position: relative; overflow: auto !important; }
.fotorama__html div{ padding: 20px 40px; text-align: justify; }
/*.fotorama--fullscreen .fotorama__html div{ padding: 40px; font-size: 180%; line-height: 1.5em; }*/

.fotorama__html div h2{ margin: 0 0 10px 0; font-size: 140%; }
.fotorama__video{ top: 0 !important; }
.fotorama__html div.cover span{ position: absolute; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: .5; }

article.about{ margin: 0 10px; display: flex; flex-wrap: wrap; justify-content: space-between; }
article.about figure{ flex: 1 1 auto; width: 50%; background-repeat: no-repeat; background-size: cover; background-position: center; }
article.about figure img{ display: block; margin: 0; width: 1px; height: 1px; }
article.about .entrybox{ flex: 1 1 auto; width: 50%; text-align: justify; }
article.about .entry{ padding: 20px; }
article.about h1{ margin: 0 0 40px 0; }
article.about p.quote{ text-align: right; padding-bottom: 1em; }
article.about q{ font-style: italic;}
article.about p.download{ border-top:1px solid #e9e9e9; padding: 20px 0 0 0; margin: 40px 0 0 0; text-align: center; }
article.about a{ color: orange; font-weight: 600; }
article.about a:hover{ color: black; }

article.about ul#langs{ margin: 0 0 1rem 0; padding: 0; list-style: none; }
article.about ul#langs li{ display: inline; font-weight: 700; margin-right: .5em; color: orange; }
article.about ul#langs label:hover{ cursor: pointer; color: black; }
article.about ul#langs label.activo{ cursor: pointer; color: black; }
article.about input{ display: none; }
article.about div[lang]{ display: none; margin: 0 0 .5rem 0; }		
article.about input:checked + div{ display: block !important; }


/* Media queries!
-------------------------------------------------------------------------------*/

@media screen and (max-width: 979px) {
	footer{ height: 42px; background-size: 154px 42px; }
	footer small{ padding: 15px 0 0 0;}
	.home article ul li{ width: 100%; min-width: 300px; min-height: 100px;}
	.home article ul li a{ line-height: calc((100vh - 123px) / 3); }
	.portfolio-box{ max-width: calc(100% / 2); }
	.news-box{ flex: 1 1 auto; width: 100%; max-width: calc(100% / 3); }

} 
@media screen and (max-width: 667px) {
	nav{ display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; z-index: 99; }
	nav label.ckmenu{ display: block; width: 30px; height: 15px; cursor: pointer; border-top: 3px solid black; border-bottom: 3px solid black; }
	nav label.ckmenu:after{ content: ""; display: block; width: 30px; margin-top: 6px; border-top: 3px solid black; }
	nav input.ckmenu:checked + label.ckmenu, nav input.ckmenu:checked + label.ckmenu:after{ border-color: #a9a9a9; }
	nav input.ckmenu:checked + label.ckmenu + div ul, ul.active{ display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; margin: 0; padding: 10px 0 0 0; width: 100%; position: fixed; background-color: white; top: 41px; right: 0; bottom: 0; left: 0; }
	nav ul { display: none; }
	nav ul li{ flex: 1 1 auto; min-width: 100%; }
	nav ul li a{ display: block; width: 100%; text-align: center; font-size: 140%; line-height: 30px; }
	
	.fotorama{ margin: 0;}
	.port-body h1{ margin: 0 0px 20px 0px; }
	.portfolio-box{ max-width: 100%; }
	.news-box{ width: calc(100% / 2); max-width: 100%; }
	.category-video .portfolio-box{ max-width: 100%; }
	
	article.about figure{ width: 100%; height: 250px; }
	article.about .entrybox{ width: 100%;}
	article.about h1{ margin: 0 0 20px 0; }
	article.about p.download{ padding: 10px; margin: 20px 0 0 0; }

} 
@media screen and (max-width: 419px) {
	header{ padding: 0 10px;}
	.social{ margin: 0 auto 3px auto; position: relative; }
	footer small{ padding: 0px 0 0 0; }
	#content{ margin: 0; min-width: 100%; }
	.home article ul{ margin: 0;}
	.news-box{ width: 100%;}
}