/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/


/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cyclehome, .cyclehome * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.cyclehome { 
    margin: 10px auto;
    max-width: 680px;
    min-width: 200px;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1 !important;

 }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cyclehome img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
    z-index: 10!important;
}

/* in case script does not load */
.cyclehome img:first-child {
    position: static; z-index: 100;
}
.slidess{width: 100%;}
/* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; top: 10px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}


/* caption */
.cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }


/* overlay */
.cycle-overlay { 
    font-family: Verdana, Arial, Helvetica, sans-serif;
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    z-index: 600;
    background: black; 
    color: white; 
    padding: 15px; 
    background-color: rgba(0,0,0,0.5);
    text-align: left;
    z-index: 10!important;
}
.cycle-overlay h2{color:#f21c0a;font-size: 20px;font-weight: bold;}
.cycle-overlay p{color:white;font-size: 12px;}


/* prev / next links */
.cycle-prev, .cycle-next { position: absolute; top: 0; width: 30%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; }

.cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) }

.disabled { opacity: .5; filter:alpha(opacity=50); }


/* display paused text on top of paused slideshow */
.cycle-paused:after {
    content: 'Paused'; color: white; background: black; padding: 10px;
    z-index: -500; position: absolute; top: 10px; right: 10px;
    border-radius: 10px;
    opacity: .5; filter: alpha(opacity=50);
}
.slide-pager{margin-top: 0px;}
.slide-pager span
{    
    color:#6D6E70;
    cursor: pointer;
    display: inline-block;
    height: 17px;
    font-size: 50px;
    margin-right: 7px;
    
    width: 17px;        
}

.cyclehome
{
   box-shadow: 0px 2px 8px #000;
   -webkit-box-shadow: 0px 2px 8px #000;
   -moz-box-shadow: 0px 2px 8px #000;  
}
#slide
{
    background-color: white;
    padding: 0px 5px 0px 5px;    
    z-index: -9999!important;   
   display:inline-block;
    margin-left:auto;
    margin-right:auto;
    margin-top: 50px;
    width: 100%;
}

.altoslide{}

/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/


/*////////////////////////////////////////////////////////////////////////////////////////////////////*/






/* Nuestro nav con id #menu lo flotaremos a la derecha*/
#menu{float: right;margin-top: 15px;}   

    /* Quitamos estilos por defecto de el tag UL */
    #menu ul{
        list-style: none;
        font-size: 14px;
    }
        
        /* Centramos y ponemos los textos en mayuscula */
        #menu li{
           display: block;
           float: left;
           text-transform: uppercase;
           text-align: center;
        }
            
            /* Damos estilo a nuestros enlaces */
            #menu li a{
                display: block;
                color: #fff;
                text-decoration: none;
                height: 60px;
                line-height: 60px;
                padding: 0 26px;
            }
            #menu li a:hover{
                background: #151a1e;
                color: #84134A;
            }
    
    /* Estilos #nav-mobile y lo ocultamos */
    #nav-mobile{
        display: none;
        background: url(../images/nav.png) no-repeat center center;
        float: right;
        width: 60px;
        height: 60px;
        position: absolute;
        right: 0;
        top:0px;
        opacity: .6;

    }   
        /* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
        #nav-mobile.nav-active{
            opacity: 1;
        }


    


/*
    MEDIA QUERY
*/

@media only screen and (max-width: 980px) {
        
    h2{font-size: 40px;}
    
    /* mostramos #nav-mobile */
    #nav-mobile{ display: block; }

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 100%;
        float: none;
        padding-top: 60px;
    }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            box-shadow: 0 1px 2px rgba(0,0,0,.5);
            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
                background: #33363b;
                border-bottom: 1px solid #282b30;
                float: none;
            }

            /* Quitamos el borde del ultimo item del menú */
            #menu li:last-child{ border-bottom: 0;}
                #menu li a{
                    padding: 15px 0;
                    height: auto;
                    line-height: normal;
                }
                #menu li a:hover{background:#2a2d33}

        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{
            max-height: 400px;
            -webkit-transition: max-height .4s;
            -moz-transition: max-height .4s;
            -ms-transition: max-height .4s;
            -o-transition: max-height .4s;
            transition: max-height .4s;
        }
}




     
    /* Z-index of #mask must lower than #boxes .window */
    #mask,#mask2 {
      position:absolute;
      z-index:102;
      background-color:#000;
      display:none;
      top: -8px;
      left: -8px;
    }
     
    #boxes .window{
      position:absolute;
      z-index: 999;
      
    }
    #boxes2{text-align: center;}
     #boxes2 .window2 {
     position:absolute;
      
      display:none;   
    }
    /* .content_gale2{ float: left;
    height: 100%;
    position: relative;
    width: 100%;}
   
    #boxes2{
        z-index: 9999;
    }*/
    #boxes2,.content_gale2{ }
     #dialog2 {
     
    }
    
.layerslide{margin-top: 100px;}

/* pager */
.slide-pager2,.slide-pager3 { 
    text-align: center; width: 100%; z-index: 500; position: absolute;  overflow: hidden;
}
.slide-pager2 span,.slide-pager3 span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.slide-pager2 span.cycle-pager-active,.slide-pager3 span.cycle-pager-active { color: #84134A;}
.slide-pager2 > *,.slide-pager3 > * { cursor: pointer;}



.layerslide2{ display: block;
    float: left!important;
    height: 100%!important;
    width: 100%!important;}
.cycle-youtube object{width: 100%!important;height: 100%!important;}
.cycle-youtube{width: 100%!important;height: 100%!important;}
.close2{color: white;
    font-size: 50px;
    position: absolute;
    right: 15%;
    text-align: center;
    top: 5%;
padding:15px;}
.cycle-overlay {
    background: none repeat scroll 0 0 black;
    bottom: 0;
    color: white;
    font-family: tahoma,arial;
    opacity: 0.5;
    padding: 15px;
    position: absolute;
    width: 70%;
    z-index: 99999!important;
    text-align: center;
    font-size: 16px;    
    left:15%;
}
.window{ display: inline-block;
    left: 0;
    margin: 0 auto;width: 100%;text-align: center;}
.content_gale{text-align: center;margin: 0 auto;}
.slidesss{ }
.altoslides{}
.layerslide{}
.layerslide { width: 90%; height: 700px; max-height: 700px; margin: auto; }
.layerslide img { opacity: 0; filter:alpha(opacity=0); }
.cycle-youtube {  float:left!important;margin: auto!important; }
.cycle-youtube > div { width: 100%!important; height: 100%!important; }
.cycle-youtube > img { width: 100%!important; height: 100%!important; }
iframe,object,embed { width: 100%; height: 100%; }

/*.cycle-youtube { max-width: 640px; margin: auto }
.cycle-youtube > div { width: 100%; height: 100% }
.cycle-youtube > img { width: 100%; height: 100% }
iframe,object,embed { width: 100%; height: 100% }*/

.botonesyoutube{border: 1px solid #8A0147;;
    height: 50px;
    margin-top: 400px;
    position: absolute;
    width: 100%;
    z-index: 9999999;}
.botonesyoutube a{color:white;}