/* Estilos, usando la metodología MOBILE FIRST (móviles primero) */

/*****************************************************************************************************************************/
/*                                                                                                                           */
/*                                             PÁGINA PRINCIPAL                                                              */
/*                                                                                                                           */
/*****************************************************************************************************************************/
#logo-tejeda{ position: absolute; top:30px; left:30px; font-size: 19px; color: #fff;}
#logo-tejeda div{ float: left;}
.text-logo{ padding: 17px 5px;}
.text-logo p{ margin: 0; line-height: 20px;}
.img-logo{ width: 40px; height: 57px;}
.text-green{ color:#337403;}

#wrapper-home{ width: 100%; height: 100%; overflow: hidden;} /*background-image: url(../img/tejeda-prueba.jpg); background-size: cover;*/
#wrapper-home img{ width: 100%; height: 100%;}
#slide-home{ height: 100%;}
#slide-home a{ position: absolute; top:35%; left:35%; color: #fff; font-size: 30px;}
#homeCarousel{ position:fixed; width:100%;}
#homeCarousel, .carousel-inner, .carousel-inner>.item{ height: 100%;}

#block-home{background: url(../img/pattern-black.png) repeat;
opacity: 0.5;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 1;}

#content-home{
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 10;
overflow:hidden;
}

#content-home header, #content-home footer{ position: relative; background: transparent; height: 30%; }
#content-home footer{ bottom: 0;}

#content-home footer p{ font-size: 15px; left: 38%; position: absolute; color: #fff;}

/* Links-home */
#content-home .links-home{ position: relative; background: transparent; color: #fff; padding: 50px 0;}
#wrapper-home .links-home .background-links{ width: 100%; height: 100%; position: absolute; top:0; left:0; background-color: #000; opacity: 0.5;}
.links-home .row{ text-align: center;}
.links-home .links-file{ margin-bottom: 10px;}
.links-home .title-links{ font-size: 25px; text-transform: uppercase;}
#wrapper-home .links-home .lang-links img{ height: 16px; width: 24px; margin-right:5px;}

.lang-es{ text-align: right;}
.lang-en{ text-align: left;}
.lang-links a{ color:#fff;}

/*****************************************************************************************************************************/
/*                                                                                                                           */
/*                                              CONTENIDO WEB                                                                */
/*                                                                                                                           */
/*****************************************************************************************************************************/
body{ font-family: 'Open Sans', sans-serif;}

h1{ color: #fff; font-size: 50px; position: relative; z-index: 100;}
h2, h4{ color: #5d9771;}
h3{ color: #5e5e5e;}
h2{ font-size: 30px; color: #5d9771;}

a{ color:#5d9771;}
a:hover{ color: #449d44;}

footer{ background-color: #fff; width: 100%;}

.btn-success{ background-color: #5d9771;}

.block{ position: fixed; width: 100%; height: 200%; background-color: #000; opacity: 0.5; top:0; z-index: 9999; display: none;}

.route-logo{ position: fixed; bottom: 10px; right: 10px; z-index: 100; height: 100px;}
.route-logo img{ width: 150px;}

/* Header Icons */

.header-icons .home{ padding-top: 10px;}
.header-icons{ position: fixed; right: 15px; z-index: 100;}
.header-icons div{ float: left; padding-left: 10px;}
.header-icons { color:#5d9771;}
.header-icons i{ color: #000; font-size:25px;}
.header-icons img{ padding-right: 5px;}
.header-icons .text-icons{ display: none; float: right;}
.lang-icon{ padding: 10px 5px; border: none; background-color: transparent; opacity: 0.5; cursor: pointer;}
.lang-icon.activate{ background-color: transparent; opacity: 1;}

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

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 200px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 200px;
    height: 100%;
    margin-left: -200px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 0;
}

#wrapper.toggled #sidebar-wrapper {
    width: 70%;
}

#page-content-wrapper {
    width: 100%;
}

#wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: -200px;
}


#wrapper .container-text{
        top:0;
        z-index: 0;
    }
#wrapper .container-img{ 
    position: fixed;
    top:0;
    left: 0;
    height: inherit;    
    background-repeat: no-repeat;
    background-position: left;
   /*background-position: 50%;*/
    margin-top: -20px;
    padding-top: 15px;   
    z-index: -10;    
}

/* imágenes dependiendo la sección */
#wrapper .container-img.inicio{
    background-image: url(../img/tejeda-prueba.jpg);
}
#wrapper .container-img.cultura{
    background-image: url(../img/tejeda-cultura2.jpg);
}
#wrapper .container-img.naturaleza{
    background-image: url(../img/tejeda-prueba2.jpg);
}
#wrapper .container-img.ocio{
    background-image: url(../img/tejeda-ocio.jpg);
}
#wrapper .container-img.multimedia{
    background-image: url(../img/tejeda-prueba5.jpg);
}
#wrapper .container-img.rutas{
    background-image: url(../img/tejeda-rutas2.jpg);
    background-position: 0px;
}
#wrapper .container-img.interes{
    background-image: url(../img/tejeda-interes2.jpg);
}
#wrapper .container-img.comer{
    background-image: url(../img/tejeda-comer-dormir.jpg);
}
#wrapper .container-img.llegar{
    background-image: url(../img/tejeda-prueba2.jpg);
}

/* estilos para la página de rutas */
#page-content-wrapper .rutas{ padding:0;}
.section-text, .section-image, .logo-ruta{ display: inline-table;}
.section-image .logo-ruta { list-style: none; float: left; margin: 10px 0 15px 0; height: 62px; margin-bottom: 15px;}
.section-image .logo-ruta div{ float: left; text-align: center; line-height: 14px; font-size:13px; font-weight: bold; font-size: 9px; padding: 0px; }
.section-image .logo-ruta img{ max-height: 92px; }
.section-image .logo-ruta #logtejeda img{max-height: 62px;}
/*.section-image .logo-ruta #logo-cabildo img{float:right;}*/
.btn-ruta{ margin-left: 15px; padding:0 10px;}

#googlemap iframe{ width: 100%; height: 100%;}


/* Estilos del menú */
.sidebar-nav {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    height: 100%;
}

.sidebar-nav li {
    /*text-indent: 20px;*/
    line-height: 40px;
    /*height: 80px;*/
    padding-top: 10px;
    padding-left: 20px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #fff;
    line-height: 20px;
    text-transform: uppercase;
    font-size: 12px;
    padding: 5px 0;
    text-align: left;
}

.sidebar-nav li a i{
    font-size: 25px;
    text-indent: initial;
}
.sidebar-nav li span{ display: inline;}
.sidebar-nav li:hover {
    text-decoration: none;
    color: #fff;
    background-color: rgba(255,255,255,0.2);
}

.sidebar-nav li:active,
.sidebar-nav li:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {    
    background-color: #5d9771;
}

.sidebar-nav > .sidebar-brand a {
    color: #fff;
}

.sidebar-nav >  li.sidebar-brand:hover {
    color: #fff;
    background-color: #5d9771;
}
.sidebar-nav li span{ padding-left: 5px;}

/* Botón del menú */
#menu-toggle{ 
    display: block;
    position: fixed;
    left: 10px;
    z-index: 999;
}
#menu-toggle:hover{ 
    background-color: #333;
}

#close-toggle{ 
    display: none;
    position: absolute;
    z-index: 9999;
    color:#fff;
    right: 10px;
    top: 5px;
    font-size: 20px;
    border: 3px solid;
    border-radius: 50px;
    padding: 0px 7px;
}

#wrapper.toggled #close-toggle{ display: block;}


.navbar-toggle .icon-bar{
    background-color: white;
    width: 35px;
    height: 3px;
}


/* Estilos de la parte de los textos */
.container-text{ padding-left: 0; padding-right: 0; background-color: #fff; top:0; z-index: 0; z-index: 10px; }
    .container-text section, .container-text footer{ line-height: 20px; padding: 10px 20px 30px 20px;}
    .container-text section#portfolio, .container-text section#tourDIV, .container-text section#googlemap{ padding: 0;}
.content-color-change{ background-color: #f2f2f2;}
/*.portfolio-top{ padding-top: 0;}*/

/* Estilos de la imagen */
#wrapper .container-img:after {
    background: url(../img/pattern-black.png) repeat;
    opacity: 0.3;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}


/* ESTILOS DE LA GALERÍA */
.container-text section.image-gallery{ padding:0; margin: 0;}
.image-carousel{ padding: 0; margin:0; overflow: hidden; width: 100%;  position: relative;}
.image-list{ list-style: none; margin: 0; padding: 0; height: 100%; position: absolute; top:0; left: 0;}
.image-list li{ float: left; padding: 0; float: left; height: auto; overflow: hidden; position: relative; cursor: pointer;}
.image-list li img{ width: 100%; height: 100%; }
.gallery-control{ width: 25px; height: 25px; position: absolute; top:50%; margin-top: -10px; background-color: gray; border-radius: 15px; color: white; text-align: center; font-size: 25px; font-weight: bold;
opacity: 0.7; cursor: pointer;
}
.gallery-control-prev{ left:10px;}
.gallery-control-prev:hover{ opacity: 1;}
.gallery-control-next{ right: 10px;}
.gallery-control-next:hover{ opacity: 1;}

.image-carousel:hover .gallery-control{ display: block;}
/* estilos del lightbox */
#carousel-content{ position:fixed; width:100%; top:25px; left:0;  z-index:99999; display:none; background-color:#f5f5f5; padding:5px 10px 20px 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
#carousel{  overflow:hidden; position:relative; height:95%; clear:both;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
#carousel .carousel-text{ position:absolute; bottom:0px; width:100%; height:50px; text-align:center; background-color:rgba(42, 100, 150, 0.5); color:#fff; font-size:25px; padding-top:10px;}
.carousel .arrow{ width:20px; height:20px; background-color:black; position:relative; top:60px;}

/* ESTILOS DEL FOOTER */
footer{ min-height: 200px;}
footer .copyright{ position: absolute; left: 0; top:70px; font-family: Arial; font-weight: bold; font-size: 14px;}
footer .escudos, footer .fright{ position: relative; top:50px;}
footer .escudos ul, footer .logos ul{ list-style: none; float: left; padding: 0;}
footer .escudos li, footer .logos li{ float: left; padding:0 10px 0 0; text-align: center; line-height: 14px; font-size:13px; font-weight: bold;}
footer .escudos img{ width: 43px; height: 62px;}
footer .logos{ top:20px; position: relative;}
footer .logos li{ padding: 0 20px 0 0;}
footer .logos img{ width: 150px;}


/* COOKIES */
#cookies{ position: fixed; bottom: 0; left: 0; width: 100%; background-color: #000; padding: 20px 50px; z-index: 99999; color: #fff; display: none;}
#cookies .close{ position: absolute; top:5px; right: 20px; color: #fff;}
#cookies .text-cookies{}

/*************************/
/* RESIZE - MEDIAQUERIES */
/*************************/
/* RESIZE MIN*/
/*pantallas superiores a 820px de ancho*/
@media(min-width:837px) {
    /* Portada */
    #content-home header, #content-home footer{ height: 42%; }
    #logo-tejeda{ top:30px; left:30px; font-size: 36px;}
    .text-logo{ padding: 40px 10px;}
    .text-logo p{ line-height: 40px;}
    .links-home .links-file{ margin-bottom: 0px;}
    .links-home .title-links{ font-size: 36px;}
    .img-logo{ width: 106px; height: 150px;}

    #content-home footer p{ font-size: 30px; }

    /* Páginas de contenido */
    h1{ margin:20px; font-size: 36px;}
    #wrapper {
        padding-left: 200px;
    }

    #wrapper.toggled {
        padding-left: 200px;
    }

    /* menu */
    #sidebar-wrapper {
        width: 200px;
        display: block;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 200px;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
        margin-right: -200px;
    }
    .sidebar-nav {
        position: fixed;
        top: 0;
        width: 200px;
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
        height: 100%;
    }
    .sidebar-nav li {
        line-height: 40px;
        padding:0;
        /*height: 70px;*/
    }
    .sidebar-nav li span{ display: block; padding-left: 0px;}
    .sidebar-nav li a{ text-align: center;}
    .portfolio-top{ padding-top: 50px;}

    /* Header Icons */

    .header-icons .home{ padding-top: 10px;}
    .header-icons{ position: absolute; right: 50px; z-index: 100;}
    .header-icons div{ float: left; padding-left: 10px;}
    .header-icons a{ color:#5d9771;}
    .header-icons a i{ color: #000; font-size:25px;}
    .header-icons a img{ padding-right: 5px;}
    .header-icons .text-icons{ display: block;}
    .lang-icon{ padding: 10px 5px; border: 1px solid #e4e4e4; background-color: #fff; opacity: 0.5;}
    .lang-icon.activate{ background-color: #f2f2f2; opacity: 1;}


    /* botón de menú */
    #menu-toggle{ display: none; z-index: 100;}

    #wrapper .container-img{ 
        margin-top: 0;
        padding-top: 0;
        left: 200px;
        background-size: cover;
        width: 100%;
        z-index: 10;
    }
    #wrapper .container-text{
        top:0;
        z-index: 10;
    } 
    .container-text section, .container-text footer{ padding: 10px 50px 30px 50px; }

    /* Imagen de página */
    #wrapper .container-img.rutas{
        background-position: -180px;
    }
    /*galeria de imagen */
    .gallery-control{display: none; }
    .image-carousel{ height: 100%;}
    #carousel-content{ width: 50%; left: 25%; top:15%;}

    /* Estilos del footer */
    footer .copyright{ top:70px;}
    footer .escudos ul{ float: right;}
    footer .escudos li{ padding:0 20px;}
}

@media(max-width:837px) {
    #wrapper .container-text{ width: 100%;}
}

@media(min-height: 680px) {
    .sidebar-nav li {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
/* pantallas superiores a 820px de altura */
@media(min-height: 836px) {
    #wrapper .container-img{ 
        background-size: cover;
    }

    .sidebar-nav li {
        text-indent: 0;
        line-height: 40px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
}
@media(min-height: 950px) {
    .sidebar-nav li {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}



/* RESIZE MAX */
/* pantallas inferiores a 920px de ancho */

@media(max-width: 1255px){
    h1{ font-size: 25px; margin-left: 0;}
}
@media(max-width: 1072px){
    h1{ font-size: 20px; margin-left: 0;}
    footer .escudos{ top:-50px; left: -260px;}
    footer .logos{ top:60px;}
    footer .copyright{ top:100px;}
}

@media(max-width: 900px){
    h1{ font-size: 20px; margin-left: 0;}
    footer .escudos{ top:-50px; left: -160px;}
    footer .logos{ top:60px;}
    footer .copyright{ top:100px;}
}

/* pantallas inferiores a 820px de ancho */
@media(max-width:837px) {
    h1{ font-size: 32px; margin-top:80px; margin-left: 10px;}
    h2{ font-size: 23px; margin-bottom: 15px;}
    #wrapper .container-img{ 
        width: 100%;
        z-index: 10;
    } 
    .container-text section, .container-text footer { padding: 0px 10px 30px 20px;}
    section p{ font-size: 12px; line-height: 15px;}
    footer .escudos{ top:10px; left: -340px;}
    footer .logos{ top:60px;}
    footer .copyright{ top:100px;}
}
@media(max-width: 600px){
    .route-logo{ top:40px;}
    footer .escudos{ top:-30px; left: 0px;}
    footer .logos{ top:80px;}
    footer .copyright{ top:120px;}
}
@media(max-width: 400px){
    #wrapper.toggled #sidebar-wrapper {
        width: 100%;
    }  
    footer .escudos{ left: 0px; top:0px;} 
    footer .logos{ top:110px;}
    footer .logos img{ width:120px;}
    footer .copyright{ top:150px;}   
}

@media(max-height: 630px){
    .sidebar-nav li {
        line-height: 30px;
        /*height: 60px;*/
    }
    .sidebar-nav li a i{ font-size: 20px;}
}


/*******************/
/*   ANIMACIONES   */
/******************/

.image-list li img{
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.image-list li:hover img{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}