html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}




/* Tipografía*/
h1 { 
font-family: 'Gugi', cursive;
font-size: 6em;
margin: 0.67em 0; 
color: #cc2a3b;
text-align: center;
}

h2 { 
font-family: 'Gugi', cursive;     
font-size: 1.5em;
margin: 0.83em 0;
color: #cc2a3b; 
text-align: center;    
}

h3 { 
font-family: 'Gothic A1', sans-serif;    
font-size: 1em; 
margin: 1em 0;
text-align: center;
font-weight: bold;    
}


p {
font-family: 'Gothic A1', sans-serif;    
color: #8c9398;
word-spacing: 1px;
line-height: 25px;
font-size: 14px;
}

.caja-texto-principal {
margin: 4.5em;
}

.texto-caja {
text-align: center;    
}

.titulo {
text-align: left;
padding-left: 3em;
color: #cc2a3b;     
}

/* cabecera*/
.cabecera {
    background: url(../img/Tentacular19.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 65px 0 300px 0;
    height: auto;
}

.nav-icon {
position: relative;
height: 26px;
}

.back{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

nav{
width: 100%;
/*position: fixed;*/
top:50px;
text-align:center;
padding-top: 1em;
padding-bottom: 1em;    
}

nav a{
font-family: 'Gothic A1', sans-serif; 
font-weight:500;
text-transform:uppercase;
text-decoration:none;
color:#16151b;
margin:0 15px;
font-size:16px;
letter-spacing:1px;
position:relative;
display:inline-block;
}

ul li {
list-style: none;
font-family: 'Gothic A1', sans-serif; 
text-transform:uppercase;
text-decoration:none;
text-align:center;
font-size: 4.5em;
}


a:link, a:visited, a:active {
    text-decoration:none;
}

a:hover {
    color: #cc2a3b;
}

.uk-navbar-toggle {
color: #000;
}

.uk-open>.uk-offcanvas-bar {
    left: 0;
    background: #cc2a3b;
    opacity: 80%;
    width: 100%;
    height: 100%;
}


/* Botón*/
.boton {
font-family: 'Gothic A1', sans-serif;    
background: #cc2a3b;
padding: 20px 60px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
margin: 30px 0 0;
font-weight: bold;
}

.boton:hover, .boton:focus {
background: #798897;
color: #fff;
}
    
/* Flex*/
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}    


.row {
margin: 0px 0 0 0em; 
display: flex;
flex-direction: row;
justify-content: center;    
}


.caja {
width: 30%;
clear: none;
border: solid;
border-color: #8c9398;
padding-bottom: 2em;
margin: 5px; 
 
}

.caja interior {
background: #FE4337;
border: 0;    
margin-left: auto;
margin-right: auto;
text-align: center;    
}

.caja-vacia {
background: #FE4337;
width: 30%;    
clear: none;
border: solid;
padding-bottom: 2em;
margin: 5px;
}

/* Imágenes*/
img {
    max-width: 100%;
}

.flex-contenedor-img {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}

.imagen-caja {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: auto;
}



/* Footer*/
footer a { 
color: #a1a9b0; 
}

footer { 
background-color: #010101;
padding: 40px 0 30px;
}

footer p { 
color: #fff;
font-family: 'Gugi', cursive;
margin-right: 39em;  
}


.tag {
text-align: right;
}

/* El horror de las media queries*/

@media screen and (orientation: portrait) {

    .row {
        flex-direction: column;
        
    }
    
    h1 {
    font-size: 3em;
        
        }
    
    .caja {
    width: 90%; 
    height: 300px;
        
        }
    
    flex {
        flex-direction: column; 
        
        }
        
     .caja-vacia {
        width: 90%;
            
            }
    footer p {
    padding-right: 1em;
    padding-left: 1em;
    }

    
   }