html{
padding:0px;
margin:0px;
height:100%;
}
body{
color:#ccc;
background:#333333 url(img/bg.png) top left repeat;
padding:0px;
margin:0px;
font-family:"DejaVu Sans","DejaVu", Arial,Sans-serif;
font-size:1em;
}

header{
display:block;
width:100%;
background:#000 url(img/headerbg.jpg) top center repeat-x;

padding:0px;
text-align:center;
margin:0px;
border:#222 2px solid;
position:fixed;
top:0;
left:0;
transition: all 0.3s ease;
z-index: 100;
}
header .logo{
display:inline-block;
max-width:400px;
width:90%;
height: 90px;
text-align:center;
margin:1.2% auto 1.2% auto;
padding:0px;
}
header .logo img{
border:none;
width:auto;
height:100%;
}
header menu{
display: block;
margin:0px;
padding:0px;
}
header menu a{
display:inline-block;
font-size:1.5em;
font-weight:bold;
color:#ccc;
padding:.2em .4em;
margin:.2em;
text-decoration: none;
}
header menu a:hover{
color:#007EF5;
}

header.scrolled {
    display: grid;
    grid-template-columns:90px 1fr;

    height: 50px;
    padding: 10px 30px;
}
header.scrolled menu{
background-color: black;
}

header.scrolled .logo {
    height: 45px;
    width:90px;
}

#postHeader{
    height:160px;
}
#postHeader.scrolled{
    height:100px;
}
.mobileLink{
    display:none;
    color:#fff;
}

@media screen and (max-width:720px) {
    header.scrolled menu a{
    display: block;
    }
    header.scrolled menu{
        visibility:hidden;
        position: fixed;
        top:60px;
        width:100%;
        max-height: 1px;
        transition: max-height 300ms ease-out;
        overflow: hidden;
    }
    header.scrolled menu.ver{
        visibility: visible;
        max-height: 250px;
    }
    header.scrolled .mobileLink{
        display: inline-block;
        font-size:24px;
        position:fixed;
        top:10px;
        right:40px;
        z-index:101;
    }
    #postHeader{
    height:240px;
    }
    #postHeader.scrolled{
        height:100px;
    }
}


.Cuerpo{
max-width:1280px;
margin:0px auto;
padding:0px 2% 1% 2%;
overflow:hidden;
}
.primero .Cuerpo{
padding:1% 0px 0px 0px;
}
a{
color:#007EF5;
}
a:hover{
color:#07C3F2;
}
h2{
font-size:2.4em;
margin:0px;
padding:.1em 0px .2em 0px;
text-align:center;
margin:0px;
text-shadow: #333 1px 1px 1px;
letter-spacing: .1em;
color:#666;
}
h1{
color:#007EF5;
font-size:2.4em;
margin:0px;
padding:.5em 0px .4em 0px;
text-align:center;
margin:0px;
}

hr{
    margin:40px 0px;

    border:#444 1px solid;
}


aside{
display:block;
float:left;
width:40%;
/*height:340px;*/
overflow:hidden;
margin:1% 1%;
padding:2%;
background:url(img/aside.png) repeat-x bottom left;
}
aside .representa{
background: black;
height:200px;
margin:0px 0px 1% 0px;
overflow:hidden;
}
aside .representa img{
width:100%;

}

.primero{
display:block;
background:#fff;
padding:0px;
overflow:hidden;
margin:0px 0px;
color:#333;
}

.col{
float:left;
margin-right:2%;
}
.col.d{
width:29%;
}
.col.m{
width:50%;
}
.col.a{
width:66%;
}

.col img{
width:90%;
margin:0px auto;
}

.Parrafo{
padding:0px 2em;
line-height:1.5;
}

.ImgPortada{
max-width:1920px;
width:100%;
}

.Contenido{
padding:2em;
}


.ContactoTira{
    background-color: #000;
    padding:0px 0px 20px 0px;
    width:30vw;
    text-align: center;
}
.alexalcanimg{
width:34vw;
}

@media (max-width:699px) {

aside{
width:97%;    
}

.col,.col.d,.col.m,.col.a{
float:none;
width:auto;
}

.ContactoTira{
width:70vw;
  
}
.alexalcanimg{
width:70vw;
}

}