/*

    Box Model

*/


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body{
    background-color: #000;
}

/*

    Encabezado

*/

@keyFrames headerAnimation{
    0%{
        transform: translateY(-100%);
        opacity: 0;
    }

    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

.header{
    width: 100%;
    text-align: center;
    position: absolute;
    animation-duration: 0.8s; /* the duration of the animation */
    animation-timing-function: ease-in-out; /* how the animation will behave */
    animation-delay: 0s; /* how long to delay the animation from starting */
    animation-iteration-count: 1; /* how many times the animation will play */
    animation-name: headerAnimation; /* the name of the animation we defined above */
}

.header-relative {
    position: relative;
}

.header-logo{  
    content:url('../media/Logo.png');
    display: block;
    margin: 0px auto 24px;
    text-align: center;
    max-width: 70%;   
}

.header-logo-text{
    font-family: 'Montserrat', sans-serif;
    font-size: 8em;
    color: #fff;
    margin-top: 55px;
    margin-bottom: 35px;
    text-transform: uppercase;
    text-shadow:2px 2px 0 rgba(0,0,0,0.8);
}

.header-links{
    display: block;    
    text-align: center;
    width: 100%;
    /*font-family: 'Barlow Condensed', sans-serif;*/
    font-family: 'Montserrat', sans-serif;
    display: inline;
    font-size: 0.9em;
}

.header-links a{
    font-size: 2em;
    color: #000;
    text-decoration: none;
}

.header-links ul li{
    display: inline;
    margin: 0px 15px;
}

a.glow
{
    text-decoration: none;
    color: #aaf;
    text-shadow: none;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
    outline: 0 none;
    text-transform: uppercase;
    text-shadow:2px 2px 0 rgba(0,0,0,0.8);
}

a.glow:hover
{
    color: #fff;
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}


/*

    Social media

*/

.header-social{
    display: block;    
    text-align: center;
    width: 100%;    
    font-family: 'Barlow Condensed', sans-serif;
    display: inline;
}

ul.social {
    list-style:none; 
    margin-top: 23px;
}

ul.social li {
    display:inline; 
    padding: 0; 
    margin:0 5px;
}

ul.social li a {
    display:inline-block; 
    margin:0 auto; 
    -moz-border-radius:50%; 
    -webkit-border-radius:50%; 
    border-radius:50%; 
    text-align:center; width: 50px; 
    height: 50px; 
    font-size:26px; 
    position:relative;
}

ul.social li a i {
    color:#FFF;
    text-align: center;
    margin:0;
    line-height:50px;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
}

.social li a{
    background-color: transparent;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
}

.social li a.face:hover {
    background-color:#3B5998;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;}

.social li a.twit:hover {
    background-color:#33ccff;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;}

.social li a.yt:hover {
    background-color:#e60000;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;}

.social li a.bc:hover {
    background-color:#1a75ff;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;}

.social li a.spo:hover {
    background-color:#1ed760;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;}

/*

    Video

*/

.video-wrapper {
    width:100%;
    height: 100vh;
    overflow: hidden;
}

.video-wrapper video {
    object-fit: cover;
    width:100%;
    height:100%;
}

/*

    Contenidos

*/

.content{
    width: 100%;
    color: #fff;
    background: #000;  
    margin-bottom: 45px;
}


.content-title{
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2.5em;
    background: black;
    padding: 50px 0px;
}

.content-title-black{
    background: black;
}

.feeds-wrapper{
    width: 100%;
    background-color: #000;
    padding: 55px 15px;
    overflow: hidden;
    margin: 0 auto;
    display: inline-block;
}

.shit-wrapper{
    overflow: hidden;
    margin: 0 auto;
    /*border: #000000 solid thick;*/
}

.doble-shit-wrapper{
    float: left;
    width: 50%;
    /*border: #33ccff solid thick;*/
    text-align: center;
}

.triple-shit-wrapper{    
    width: 500px;
    margin: 35px auto;
}

@media (max-width: 1050px) {
    .doble-shit-wrapper{   
        width: 100%;
        /*border: #0f0 solid thick;*/
    }   
}

.news-wrapper{
    max-width: 1260px;
    background-color: #000;
    padding: 55px 15px;
    overflow: hidden;
    margin: 0 auto;
}

.news-wrapper:after{
    content: "";
    display: table;
    clear: both;
}

.news-col{
    color: #fff;
    background-color: #000;    
    display: inline;       
    padding: 15px;   
    margin-left: 15px;
    margin-bottom: 0px;
    text-align: justify;
    float: left;
    width: 31.83%;    
    padding: 10px;
    min-height: 330px;
}

.news-col p {
    font-family: sans-serif;
    line-height:1.7;
    color:#fff;
    margin:20px;
}

.news-col h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8em;
    margin: 0;    
    top:50%;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    text-shadow:4px 4px 0 rgba(0,0,0,0.4);
}

.news-col h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3em;
    text-decoration: underline;
    margin: 0;    
    top:50%;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    /*text-shadow:4px 4px 0 rgba(0,0,0,0.4);*/
}

.news-col p{
    font-family: 'PT Sans', sans-serif;
    font-size: 1em;
}

.news-col a{
    color: #1a75ff;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
}

.news-col a:hover
{
    color: #ffff00;

    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
}

.blog-button-wrapper{
    width: 100%;
    text-align: center;    
}

.blog-button {
    background-color: #cc0000;
    border: none;
    color: white;
    padding: 32px 64px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.3em;
    margin: 4px 2px;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
}

.feeder-button-fb {
    background-color: #1a75ff;
    border: none;
    color: white;
    padding: 32px 64px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.3em;
    cursor: pointer;
    width: 300px;
    font-family: 'Barlow Condensed', sans-serif;
    margin: 0 auto;
    text-align: center;
}

.feeder-button-tw {
    background-color: #cc0000;
    border: none;
    color: white;
    padding: 32px 64px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.3em;
    cursor: pointer;
    width: 300px;
    font-family: 'Barlow Condensed', sans-serif;
    margin-top: 25px;
}

@media (max-width: 345px) {
    .feeder-button-fb {
        font-size: 1.2em;
        width: 235px;
        padding: 32px 0px;
    }
    .feeder-button-tw {
        font-size: 1.2em;
        width: 235px;
        padding: 32px 0px;
        margin-top: 25px;
    }
    
    
    
}

.gigs-wrapper{
    width: 80%;
	background-image: url("../media/pixels.png");
    /*background-color: #660033;*/
    padding: 95px 15px;
    overflow: hidden;   
    margin: 0 auto;
}

.gigs-content{
    /*background-color: #660033;      */
    max-width: 1500px; 
    margin: 10px auto;
    overflow: hidden;
}

.fucsia{
    /*background-color: #660033;*/
    margin-bottom: 0px;
}

.gigs-col-a{
    width: 30%;
    float:left;
    /*border: #33ccff solid 2px;*/    
}

.gigs-col-b{
    width: 70%;
    float:left;
    text-align: left;
    /*border: #33ccff solid 2px;*/    
}


.gigs-content h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8em;
    margin: 0;    
    top:50%;
    width: 100%;    
    text-transform: uppercase;
    text-shadow:2px 2px 0 rgba(0,0,0,0.8);
    color: #ffff33;
}

.gigs-content h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8em;
    margin: 0;    
    top:50%;
    width: 100%;    
    text-transform: uppercase;
    text-shadow:2px 2px 0 rgba(0,0,0,0.8);
    color: #fff;
}



/*

    Footer

*/

.footer{
    color: #fff;
    background-color: #000;
    text-align: center;
    /*min-height: 350px;*/
    clear: both;
    margin-top: 55px;
}

.footer-links{
    display: block;    
    text-align: center;
    width: 100%;
    /*font-family: 'Barlow Condensed', sans-serif;*/
    font-family: 'Montserrat', sans-serif;
    display: inline;
    font-size: 0.6em;
}

.footer-links a{
    font-size: 2em;
    color: #fff;
    text-decoration: none;
}

.footer-links ul li{
    display: inline;
    margin: 0px 15px;
}

.footer-palao{
    margin-top: 55px;
    font-family: 'Montserrat', sans-serif;    
    font-size: 1em;
    margin-bottom: 55px;
}

.footer-palao p{
    font-size: 0.7em;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

/*

    Album Gallery

*/

.gallery{
    /*border: #e60000 solid thick;*/
    overflow: hidden;
    max-width: 1150px;
    margin: 25px auto;
}

.gallery-row{
    /*border: #660033 solid thick;*/
    overflow: hidden;
    margin: 35px auto;
}

.gallery-column{
    /*border: #ffb06b solid thick;*/
    width: 33.3%;
    float: left;
    text-align: center;
}

.gallery-column p{
    color: #FFF;
}

.gallery-column img{
    max-width: 345px;    
    border: #333333 solid 2px;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 200ms linear 0s;
    -o-transition: 200ms linear 0s;
    transition: 200ms linear 0s;
}

.gallery-column img:hover{
    border: white solid 2px;
    -webkit-transition: 200ms linear 0s;
    -moz-transition: 200ms linear 0s;
    -o-transition: 200ms linear 0s;
    transition: 200ms linear 0s;
}

.formato {
    font-family: 'Montserrat', sans-serif;
    font-size: 2em;
    color: #f0f0f0;    
    text-align: center;
    margin-top: 50px;
}

@media (max-width: 1100px) {
.gallery-column img{
    max-width: 250px;
}
}

@media (max-width: 775px) {
.gallery-column{
    /*border: yellow solid 2px;*/
    width: 100%;
    margin-top: 35px;
}

.gallery-row{
    /*border: #660033 solid thick;*/
    overflow: hidden;
    margin: 0px auto;
}
}

/*

    Depechin

*/

#depe {
    position:fixed;
    right:0;
    bottom:-5px;
    margin:0;
    width:150px;
    /*border: #33ccff thick solid;*/
    z-index: 5000;
    display: none;
filter: grayscale(100%);
}

#depe img {width:100%;}


@media (max-width: 400px) {
.gallery-column img{
    max-width: 250px;
}

#depe {width:105px;}

}


/*

    Disco

*/

.album-box{   
    max-width: 720px;
    /*border: #33ccff solid 1px;*/
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 50px;
}

.album-content{
    float: left;
}

.album-content img{
    max-width: 340px;    
    border: #333333 solid 2px;
}

.playlist-content{
    float: right;
}

.album-title{
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 2em;
    padding: 50px 0px;
}

.album-info{
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 0.5em;
}



@media (max-width: 850px) {
    
.album-content{
    float: none;
    margin: 0 auto;
    margin-bottom: 35px;
}
.playlist-content{
    float: none;
    margin: 0 auto;
}

}

/*

    ***************************************************************

*/





video::-webkit-media-controls {
    display:none !important;
}




/*

    Parallax

*/

.bgimg-1, .bgimg-2, .bgimg-3 {
    position: relative;    
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2;
}


.bgimg-1 {
    background-image: url("../media/mikeedu.jpg");
    min-height: 600px;  
	filter: grayscale(100%);    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
}


.bgimg-1-ajusta{
    /* Background image and gradient */
    background: url("../media/mikeedu.jpg"), fixed;
    filter: grayscale(100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    padding: 25%;
}

.bgimg-1-psicodelia{
    /* Background image and gradient */
    background: url("../media/keyboard.png"), fixed
        linear-gradient(to bottom, #ffee75 3%,#ffb06b 27%,#e86f97 50%,#b08cff 75%,#5477af 100%);

    /* 	Background blend mode 
                    for blending the image and thegradient.
                    The blend modes are: 
                            screen, 
                            overlay, 
                            darken, 
                            lighten, 		
                            color-dodge, 
                            color-burn, 
                            hard-light, 
                            soft-light, 			
                            difference, 
                            exclusion, 
                            hue, 
                            saturation, 
                            color, 
                            luminosity. 
                            And also *normal* which reset it.
    */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: color-burn;
    padding: 25%;
}

.bgimg-2{
    /* Background image and gradient */
    background: url("../media/keyboard.png"), fixed;
    filter: grayscale(100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    padding: 25%;
}

.bgimg-3{
    /* Background image and gradient */
    background: url("../media/cuadromike.jpg"), fixed;
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    padding: 15%;
}


.bgimg-2-old {
    background-image: url("../media/mikeedu.jpg");
    min-height: 600px;
    background-color: red;
    background-blend-mode: multiply;
}

.bgimg-3-old {
    background-image: url("../media/cuadromike.jpg");
    min-height: 600px;
    background-color: #006699;
    background-blend-mode: multiply;

}

.caption {
    position: absolute;
    left: 0;
    top: 2%;
    width: 100%;
    text-align: center;
    color: #000;
}

/*

    Ajustes responsividad

*/

@media (max-width: 1240px) {
    .header-logo-text{
        font-size: 5em;
    }

    .news-col{   
        width: 100%;
        margin-bottom: 0px;
        min-height: 0px;        
        overflow: hidden;
        margin: 0 auto;
    }

    .news-wrapper{
        width: 90%;
        padding: 0px 0px;
        margin: 0 auto;
    }


}

@media (max-width: 786px) {
    .header-logo-text{
        font-size: 2em;
    }

    .video-wrapper{
        width:100%;
        height: 250px;
        overflow: hidden;
    }

    .header-links a{
        font-size: 1em;
    }

    .header-links ul li{
        display: inline;
        margin: 0px 10px;
    }


    .footer-links a{
        font-size: 1.2em;
    }

    .footer-palao p{
        font-size: 0.5em;
    }

    ul.social li a {
        font-size:20px; 
    }

    .content-title{
        font-size: 2em;
        padding: 10px 0px;
    }

    .gigs-col-a{
        width: 100%;
        float:left;
        /*border: #33ccff solid 2px;*/    
    }

    .gigs-col-b{
        width: 100%;
        float:left;
        text-align: left;
        /*border: #33ccff solid 2px;*/    
    }

    .gigs-wrapper{
        padding: 35px 15px;
    }
    .gigs-content h1 {
        font-size: 1.3em;

    }

    .gigs-content h2 {
        font-size: 1.1em;
    }

    .news-col h1 {
        font-size: 1.3em;

    }

    .news-col h2 {
        font-size: 1.1em;
    }

}

@media (max-width: 360px) {
    .header-logo-text{
        font-size: 1.5em;
    }

    .video-wrapper{
        width:100%;
        height: 250px;
        overflow: hidden;
    }

    .header-links a{
        font-size: 0.8em;
    }

    .header-links ul li{
        display: inline;
        margin: 0px 5px;
    }

    ul.social li a {
        font-size:20px; 
    }

    .content-title{
        font-size: 2em;
        padding: 10px 0px;
    }
}

/*

    Sliders

*/

.slideanim {visibility:hidden;}
.slideanim2 {visibility:hidden;}


.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

.slide2 {
    /* The name of the animation */
    animation-name: slide2;
    -webkit-animation-name: slide2; 
    /* The duration of the animation */
    animation-duration: 5s; 
    -webkit-animation-duration: 5s;
    /* Make the element visible */
    visibility: visible; 
}


/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

@keyframes slide2 {
    0% {
        transform: translateY(70%);
    } 
    100% {
        transform: translateY(0%);
    } 
}