/*FONTS*/

@import url('https://fonts.googleapis.com/css?family=Lato:100');


body {
    background: #FFF;
    font-family: verdana, Tohoma, Arial, Sang-serif;
    font-size: 18px;
    overflow: auto;
    margin: 0px;
}

.time-youtube {
    width: 100%;
    background-color:#f0f1f1;
    border-bottom: 1px #ccc solid;
    height: 60px;
}



#clockbox {
    padding: 20px 0px 0px 10px;

}


#callout {
    margin: auto;
    max-width: 1280px;
    width: 96%;
    overflow: hidden;
}

#callout p a span {
    color: #f5f7f8;
    margin-right: 20px;
}

#callout p {
    float: right;
    font-size: 19px;
    padding: 0%;
    color: #F1F0D1;

}

#callout p a {
    color: #F1F0D1;
    text-decoration: none;
    padding: 18px;
    background-color: #c52a47;
}

#callout p a:hover {
    color: #FFF;
    padding: 18px;
    background-color: #B2213C;
   
}

#logo {
    width:100%;
    height: 300px;
    background: #FFF;
    border-bottom: 1px #f0f1f1 solid;
   
    
}

#logo img {
    padding-top:0px;
    width: 275px;
    height: 275px;
}

#logo img {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
     transform: translateX(-50%);
}

 .show-modal img {
    width: 300px;
    height: 200px;
    cursor: pointer;
 }


.clearfix {
    clear:both;
}

.cajita {
    width: 96%;
    max-width: 1280px;
    height: 720px;
    background: #CCC;
    margin: 20px auto;

}

.efecto-bajo-video {
    position: relative;
}

.efecto-bajo-video:before, .efecto-bajo-video:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 5px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0px 15px 10px #777;
    -moz-box-shadow: 0px 15px 10px #777;
    -o-box-shadow: 0px 15px 10px #777;
    -ms-box-shadow: 0px 15px 10px #777;
     box-shadow: 0px 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
     transform: rotate(-3deg);
}

.efecto-bajo-video:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

.video-container {
    margin-top: 0px;
    width: 96%;
    max-width: 1280px;
    height: 720px;
    border: 10px solid #CCC;
    

}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.video-description {
    max-width: 1280px;
    width: 96%;
    height: auto;
    margin: auto;
}

.video-description p {
    text-indent: 25px;
    text-align: justify;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 25px;
}

.video-description p a {
    text-decoration: none;
    border: 2px #ccc solid;
    padding-right: 6px;
    padding-left: 6px;
    border-radius: 0px;
    cursor: pointer;
}

.video-description p a:link, a:visited {
    color: #000;

}

.video-description p b {
    color: red;
}

.video-description p a:hover {
    background-color: #ccc;
}

.cp p {
    font-size: 12px;
    text-align: center;
    color: #000;
    margin-top: 75px;

}


/*------------MEDIA -----------------*/ 
    
    
@media screen and (max-width: 478px) {
        body {
            font-size: 13px;
        }
        
        .time-youtube {
            height: auto;
            border-bottom: 1px #CCC solid;
        }


        #callout p {
        float: right;
        font-size: 15px;
        color: #F1F0D1;
        }



        #clockbox {
        font-size: 11.5px;
        width: 55%;
        padding-top:18px;
        }

        .video-container {
        position:relative;
        padding-bottom: 56.25%;
        padding-top:10px;
        height:0;
        }

        .clearfix {
        clear: both;
        }

        .cajita {
        position: relative;
        width: 96%;
        max-width: 450px;
        }

        p {
        text-align: center;
        font-family: 'Lato', sans-serif;
        font-size: 30px;
        }

        .video-description p {
        font-size: 18px;
        margin-left: 15px;
        margin-right: 15px;
        text-indent: 15px;
        }

        .show-modal img {
        width: 250px;
        height: 150px;
        cursor: pointer;
        } 



} 


    
@media screen and (max-width: 740px) {

   
        
}