@charset "utf-8";

/*--- RESET CSS ---*/
    html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    strong, sub, sup, tt, var, legend, fieldset {
        margin: 0;
        padding: 0;
    }
     
    img, fieldset {
        border: 0;
    }
    img {
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
        margin: 0;
    }

/*--- FONTS ---*/
    @font-face {
        font-family: "regular";
        font-style: normal;
        src: url("fonts/opensans-regular-webfont.eot?#iefix") 
        format("embedded-opentype"), 
        url("fonts/opensans-regular-webfont.woff") format("woff"), 
        url("fonts/opensans-regular-webfont.ttf") format("truetype"), 
        url("fonts/opensans-regular-webfont.svg#opensans-regular-webfont") 
        format("svg");
    }
    @font-face {
        font-family: "medium";
        font-style: normal;
        src: url("fonts/opensans-semibold-webfont.eot?#iefix") 
        format("embedded-opentype"), 
        url("fonts/opensans-semibold-webfont.woff") format("woff"), 
        url("fonts/opensans-semibold-webfont.ttf") format("truetype"), 
        url("fonts/opensans-semibold-webfont.svg#opensans-semibold-webfont") 
        format("svg");
    }
    @font-face {
        font-family: "bold";
        font-style: normal;
        src: url("fonts/opensans-bold-webfont.eot?#iefix") 
        format("embedded-opentype"), 
        url("fonts/opensans-bold-webfont.woff") format("woff"), 
        url("fonts/opensans-bold-webfont.ttf") format("truetype"), 
        url("fonts/opensans-bold-webfont.svg#opensans-bold-webfont") 
        format("svg");
    }
    @font-face {
        font-family: "light";
        font-style: normal;
        src: url("fonts/opensans-light-webfont.eot?#iefix") 
        format("embedded-opentype"), 
        url("fonts/opensans-light-webfont.woff") format("woff"), 
        url("fonts/opensans-light-webfont.ttf") format("truetype"), 
        url("fonts/opensans-light-webfont.svg#opensans-light-webfont") 
        format("svg");
    }
    
/*--- COLORES ---*/
    /* VERDE: 339f2c */
    /* AMARILLO: fcc000 */
    /* VERDE BOTTOM: 003b00 */

/*--- CLERAFIX MENU RESPONSIVO ---*/
    /* Clearfix */
        .clear:before, .clear:after {
            content: " ";
            display: table;
        }
         
        .clear:after {
            clear: both;
        }
         
        .clear {
            *zoom: 1;
        }
         
        a#pull {
            display: none;
        }

/*--- TOP NEGRO ---*/
        #topnegro{
            background-color: #000;
            z-index: 100;
            display: inline-block;
            float: none;
            position: fixed;
            left: 0;
            width: 100%;
            height: auto;
            margin: 0px;
            padding: 5px 0px 0px 0px;
        }
        #topnegrocontenedor{
            width: 100%;
            max-width: 1170px;
        }
        #topnegrocontenedor p{
            font-family: 'regular';
            font-size: 0.9em;
            line-height: 2em;
            text-align: left;
            color: #FFF;
            float: left;
        }
        #topnegrocontenedor a{
            text-decoration: none;
            font-family: 'regular';
            color: #fcc000;
        }
        #topnegrocontenedor a:hover{
            color: #fff;
        }

/*--- LOGO OCULTO ---*/
	#logoculto{
		display: none;
	}

/*--- REDES ---*/
        #redes{
            display: block;
            float: right;
            width: auto;
        }
        #redes ul{
           list-style-type: none;
        }
        #redes li{
            display: inline-block;
            float: left;
            margin: 0px 5px 0px 0px;
        }
        #redes a{
            text-decoration: none;
            opacity: 1;
        }
        #redes a:hover{
            opacity: 0.8;
        }

/*--- BANNER FONDO MENU ---*/
    #fondomenu{
        display: inline-block;
        float: none;
        width: 100%;
        height: 150;
        overflow: hidden;
        margin: 0px;
    }
    #fondomenu img{
        width: 100%;
        height: 150px;
        overflow:hidden!important;
        margin: 0px;
    }

/*--- MENU ---*/
            #menu{
                background-color: rgba(0,0,0,0.5);
                display: inline-block;
                float: none;
                position: fixed;
                z-index: 95;
                width: 100%;
                height: 150px;
                left: 0;
            }
            nav {
                display: inline-block;
                position: relative;
                width: 100%;
                max-width: 1170px;
                height: auto;
                margin: 50px 0px 0px 0px;
            }
            nav img{
                display: inline-block;
                float: left;
                width: auto;
                max-height: 90px;
                margin: 0px 0px 0px 0px;
            }            
            nav ul {
                display: inline-block;
                float: right;
                list-style: none;
                width: auto;
                margin: 33px 0px 0px 0px;
            }
            nav li {
                position: relative;
                display: inline-block;
                float: none;
                width: auto;
                height: auto;
                margin: 0px;
                padding: 0px;
            }
            nav li a {
                text-decoration: none;
                font-family: 'regular';
                font-size: 0.95em;
                color: #FFF;
                margin: 0px 5px; 
                bottom: 0px;
                transition: all .20s;
                -moz-transition:transition: all .20s;
                -ms-transition:transition: all .20s;
                -webkit-transition:transition: all .20s;
                -o-transition:transition: all .20s;
            }
            nav li a:hover, nav li a:active {
                color: #fcc000;
                bottom: 3px;
                position: relative;
            }

/*--- SUBMENUS --*/
            nav li .flecha{
                font-size: 0.8em;
                padding-left: 3px;
                color: #fcc000;
                }

            nav li.parent:hover{
                margin: 0px;
            }
            nav li li a{
                width: 270px;/*el ancho de los links del submenu, debe ser fijo, esto servirá para crear la animación mas adelante */
                display: inline-block;
                float: none;
                font-size: 0.9em;
                text-align: left;
                border-bottom: 1px #555 solid;
                padding: 10px 7px;
            }
            /* aquí esta lo importante!!: SUB MENU ANIMACION ---*/
            nav li ul {
                width: 0; /*Cambiamos la linea */
                margin:0;
                /*display:none; Lo Eliminamos */
                background: rgba(0,0,0,0.65);
                border: none;
                position: absolute;
                left: 0%;
                top: 30px;
               
                overflow: hidden; /* Para evitar Que se salgan los links */
                z-index: 1;/*El Submenu tiene que ir atras, para evitar que los 0 pixeles causen problema al :hover*/ 
               
                opacity: 0; 
                filter: alpha(opacity=0); /* Internet Explorer*/
                -webkit-transition: opacity 0.2s ease-in 0.3s, width 0.4s ease-in 0.3s;/* Chrome, Safari*/
                transition: opacity 0.2s ease-in  0.3s, width 0.4s ease-in 0.3s;/* Navegadores CSS3 */
                -moz-transition: opacity 0.2s ease-in  0.3s, width 0.4s ease-in 0.3s; /* Firefox 4 */
                -o-transition: opacity 0.2s ease-in 0.3s, width 0.4s ease-in 0.3s; /*Opera */
            }
            nav li:hover ul {
                /*display:block; Lo Eliminamos */
                  
                width: 270px; /*La animación de 0 a 310px*/
                opacity: 1;
                filter: alpha(opacity=100);/* Internet Explorer*/
                -webkit-transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s;/* Chrome, Safari*/
                transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s;/* Navegadores CSS3 */
                -moz-transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s; /* Firefox 4 */
                -o-transition: oopacity 0.1s linear 0s, width 0.3s ease-out 0s; /* Opera */
            }

/*--- DESTACADOS ---*/

        #general{
            display: inline-block;
            float: none;
            width: 100%;
            margin: 30px 0px 0px 0px;
        }

        #destacados{
            display: inline-block;
            float: none;
            width: 100%;
            max-width: 1000px;
        }
        #destacados h1{
            font-family: "bold";
            font-size: 2em;
            line-height: 1em;
            color: #000;
            text-align: center;
            margin: 0px 0px 30px 0px;
            height: 50px;
            overflow:hidden!important;
        }
        #destacados h2{
            font-family: "light";
            font-size: 1em;
            color: #000;
            text-align: left;
            margin: 0px 0px 0px 0px;
            height: 70px;
            overflow:hidden!important;
            /*white-space:nowrap;
            text-overflow: ellipsis;*/
        }
        #destacados h3{
            background-color: #CCC;
            font-family: "light";
            font-size: 1em;
            color: #000;
            text-align: left;
            margin: 20px 0px;
            padding: 15px;
        }
        #destacados h4{
            font-family: "light";
            font-size: 1em;
            color: #000;
            text-align: left;
            margin: 0px 0px 0px 0px;
        }
        #destacados a{
            text-decoration: none;
            color: #339f2c;
        }
        #destacados ul{
            list-style-type: none;
        }
        #destacados ul li{
            background-color: #FFF;
            display: inline-block;
            float: left;
            width: 45%;
            margin: 0px 1%;
            padding: 1%;
            box-shadow: 0px 0px 10px #999;
            bottom:0;
            transition: all .25s;
            -moz-transition:transition: all .25s;
            -ms-transition:transition: all .25s;
            -webkit-transition:transition: all .25s;
            -o-transition:transition: all .25s;
        }
        #destacados ul li:hover {
            bottom: 3px;
            position: relative;
        }
        #destacados ul li h1{
            font-family: "bold";
            font-size: 1.35em;
            color: #339f2c;
            text-align: left;
            margin: 10px 0px 10px 10px;
        }
        #destacados ul li h2{
            font-family: "light";
            font-size: 1em;
            color: #000;
            text-align: left;
            margin: 0px 0px 5px 10px;
        }
        #destacados ul li .foto{
            display: inline-block;
            float: none;
            width: 100%;
            height: 120px;
        }
        #destacados ul li .vermas{
            display: inline-block;
            float: right;
        }
        #destacados ul li a{
            text-decoration: none;
            bottom:0;
            transition: all .25s;
            -moz-transition:transition: all .25s;
            -ms-transition:transition: all .25s;
            -webkit-transition:transition: all .25s;
            -o-transition:transition: all .25s;
        }
        #destacados ul li a:hover {
            bottom: 3px;
            position: relative;
        }

/*--- OPCIONES ---*/

        #opciones{
            display: inline-block;
            float: none;
            width: 100%;
            max-width: 1000px;
        }
        #opciones h1{
            font-family: "bold";
            font-size: 2em;
            color: #000;
            text-align: center;
            margin: 0px 0px 30px 0px;
        }
        #opciones ul{
            list-style-type: none;
        }
        #opciones ul li{
            background-color: #FFF;
            display: inline-block;
            float: left;
            width: 22%;
            margin: 0px 0.5%;
            padding: 1%;
            box-shadow: 0px 0px 10px #999;
            bottom:0;
            transition: all .25s;
            -moz-transition:transition: all .25s;
            -ms-transition:transition: all .25s;
            -webkit-transition:transition: all .25s;
            -o-transition:transition: all .25s;
        }
        #opciones ul li:hover {
            bottom: 3px;
            position: relative;
        }
        #opciones ul li h1{
            font-family: "bold";
            font-size: 1em;
            line-height: 1em;
            color: #339f2c;
            text-align: left;
            margin: 10px 0px 10px 10px;
            height: 33px;
            overflow:hidden!important;
        }
        #opciones ul li h2{
            font-family: "light";
            font-size: 0.8em;
            color: #000;
            text-align: left;
            margin: 0px 0px 5px 10px;
            height: 90px;
            overflow:hidden!important;
        }

        #opciones ul li .vermas{
            display: inline-block;
            float: right;
        }
        #opciones ul li .foto{
            display: inline-block;
            float: none;
            width: 100%;
            height: 120px;
        }
        #opciones ul li a{
            text-decoration: none;
            bottom:0;
            transition: all .25s;
            -moz-transition:transition: all .25s;
            -ms-transition:transition: all .25s;
            -webkit-transition:transition: all .25s;
            -o-transition:transition: all .25s;
        }
        #opciones ul li a:hover {
            bottom: 3px;
            position: relative;
        }

/*--- VIAJES ---*/

        #viajes{
            display: inline-block;
            float: none;
            width: 100%;
            max-width: 1000px;
        }
        #viajes h1{
            font-family: "bold";
            font-size: 2em;
            color: #000;
            text-align: center;
            margin: 0px 0px 30px 0px;
        }
        #viajes ul{
            list-style-type: none;
            display: inline-block;
        }
        #viajes ul li{
            background-color: #FFF;
            display: inline-block;
            float: left;
            width: 21%;
            margin: 1.2% 0.8%;
            padding: 1%;
            box-shadow: 0px 0px 10px #999;
            bottom:0;
            transition: all .25s;
            -moz-transition:transition: all .25s;
            -ms-transition:transition: all .25s;
            -webkit-transition:transition: all .25s;
            -o-transition:transition: all .25s;
        }
        #viajes ul li:hover {
            bottom: 3px;
            position: relative;
        }
        #viajes ul li h1{
            font-family: "bold";
            font-size: 1em;
            line-height: 1em;
            color: #339f2c;
            text-align: left;
            margin: 10px 0px 10px 10px;
            height: 33px;
            overflow:hidden!important;
        }
        #viajes ul li h2{
            font-family: "light";
            font-size: 0.8em;
            color: #000;
            text-align: left;
            margin: 0px 0px 5px 10px;
            height: 90px;
            overflow:hidden!important;
        }
        #viajes ul li .vermas{
            display: inline-block;
            float: right;
        }
        #viajes ul li .foto{
            display: inline-block;
            float: none;
            width: 100%;
            height: 120px;
        }
        #viajes ul li a{
            text-decoration: none;
            bottom:0;
            transition: all .25s;
            -moz-transition:transition: all .25s;
            -ms-transition:transition: all .25s;
            -webkit-transition:transition: all .25s;
            -o-transition:transition: all .25s;
        }
        #viajes ul li a:hover {
            bottom: 3px;
            position: relative;
        }

/*--- CALENDARIO ---*/

        #calendario{
            display: inline-block;
            float: none;
            width: 100%;
            max-width: 1000px;
        }
        #calendario h1{
            font-family: "bold";
            font-size: 2em;
            color: #000;
            text-align: center;
            margin: 0px 0px 30px 0px;
        }
        #calendario ul{
            list-style-type: none;
            display: inline-block;
        }
        #calendario ul li{
            background-color: #FFF;
            display: inline-block;
            float: left;
            width: 21%;
            margin: 1.2% 0.8%;
            padding: 1%;
            height: 425px;
            overflow:hidden!important;
            box-shadow: 0px 0px 10px #999;
            bottom:0;
            transition: all .25s;
            -moz-transition:transition: all .25s;
            -ms-transition:transition: all .25s;
            -webkit-transition:transition: all .25s;
            -o-transition:transition: all .25s;
        }
        #calendario ul li:hover {
            bottom: 3px;
            position: relative;
        }
        #calendario ul li h1{
            font-family: "bold";
            font-size: 1em;
            line-height: 1em;
            color: #339f2c;
            text-align: left;
            margin: 10px 0px 10px 10px;
            height: 40px;
            overflow:hidden!important;
        }
        #calendario ul li h2{
            font-family: "light";
            font-size: 0.8em;
            color: #000;
            text-align: left;
            margin: 0px 0px 15px 10px;
            height: auto;
            overflow:hidden!important;
        }
        #calendario ul li h3{
            font-family: "bold";
            font-size: 1em;
            color: #000;
            text-align: left;
            margin: 0px 0px 5px 10px;
            height: auto;
        }
        #calendario ul li .estado{
            display: inline-block;
            float: none;
            margin: 0px 0px -6px 5px;
        }
        #calendario ul li .foto{
            display: inline-block;
            float: none;
            width: 100%;
            height: 120px;
        }
        #calendario ul li a{
            text-decoration: none;
            bottom:0;
            transition: all .25s;
            -moz-transition:transition: all .25s;
            -ms-transition:transition: all .25s;
            -webkit-transition:transition: all .25s;
            -o-transition:transition: all .25s;
        }
        #calendario ul li a:hover {
            bottom: 3px;
            position: relative;
        }

/*--- DETALLES ---*/

        #detalle{
            display: inline-block;
            float: none;
            width: 100%;
            max-width: 1000px;
            bottom: 0px;
            transition: all .25s;
            -moz-transition:transition: all .25s;
            -ms-transition:transition: all .25s;
            -webkit-transition:transition: all .25s;
            -o-transition:transition: all .25s;
        }
        #detalle a{
            text-decoration: none;
        }
        #detalle a:hover {
            bottom: 3px;
            position: relative;
        }
        #detalleizq{
            display: inline-block;
            float: left;
            width: 46%;
        }
        #detalleder{
            display: inline-block;
            float: right;
            width: 47%;
        }
        
        #detallecuadro{
        	background-color: #e5e5e5;
        	border-radius: 2px;
        	box-shadow: 0px 0px 10px #888;
        	display: block;
        	float: none;
        	position: relative;
        	width: 100%;
        	font-family: "regular";
            font-size: 1em;
            line-height: 1.75em;
            color: #000;
            text-align: left;
            padding: 15px;
            margin: 0px 0px 20px 0px;
        }
        #detallecuadro .correo{
        	display: block;
        	float: right;
        	width: 100%;
        	max-width: 72px;
        	position: absolute;
        	right: 0;
        	top: 0;
        	margin: 5px;
        }
        #detallecuadro .calendario_img{
            display: block;
            float: right;
            max-height: 105px;
            max-width: 250px;
            position: absolute;
            right: 0;
            top: 0;
            margin: 5px;
        }
        #detallecuadro a{
        	text-decoration: none;
        	font-family: "bold";
            color: #000;
            text-align: left;
        }
        #detallecuadro a:hover{
            color: #fcc000;
        }


        #detalleder p{
        	display: block;
        	float: none;
        	width: 100%;
        	font-family: "regular";
            font-size: 1em;
            color: #000;
            text-align: left;
            margin: 0px 0px 20px 0px;
        }

        #detalle h1{
            font-family: "bold";
            font-size: 2em;
            color: #000;
            text-align: center;
            margin: 0px 0px 30px 0px;
        }
        #detalle img{
            display: inline-block;
            float: none;
            width: 100%;
            margin: 0px 0px 30px 0px;
        }

/*--- CONTACTO ---*/

        #contacto{
            background: url(../media/fon_contacto.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: top;
            background-size: 100%;
            display: inline-block;
            float: none;
            width: 100%;
            margin: 50px 0px 0px 0px;
            padding: 50px 0px;
        }
        #contacto h1{
            font-family: "bold";
            font-size: 1.5em;
            color: #000;
            text-align: center;
            margin: 0px 0px 30px 0px;
        }
        #contacto ul{
            list-style-type: none;
        }
        #contacto ul li{
            display: inline-block;
            float: none;
            width: auto;
            margin: 0px;
        }

        #institucional{
            background: url(../media/fon_institucional.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            background-size: 100%;
            display: inline-block;
            float: none;
            width: 100%;
            margin: 50px 0px 0px 0px;
            padding: 150px 0px;
        }
        #fondobici{
            background: url(../media/fon_bici.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            background-size: 100%;
            display: inline-block;
            float: none;
            width: 100%;
            margin: 50px 0px 0px 0px;
            padding: 150px 0px;
        }

/*--- CONTACTO FORM ---*/

        #form{
            display: inline-block;
            float: none;
            width: 100%;
            max-width: 1000px;
            margin: 30px 0px 0px 0px;
        }
        .cajaizq{
            display: inline-block;
            float: left;
            width: 48%;
        }
        .cajader{
            display: inline-block;
            float: right;
            width: 48%;
        }

            .contact_form {
                display: inline-block;
                float: none;
                width:100%;
                padding: 0px;
                margin: 0px;
            }
            .contact_form ul {
                width: 100%;
                float: none;
                list-style-type:none;
            }
            .contact_form li{
                display: inline-block;
                float: right;
                width: 100%;
                margin-bottom: 18px;
            }
            .contact_form input {
                background-color: rgba(0,0,0,0.075);
                float: none;
                height: 43px;
                width: 97.5%;
                padding: 0px 0px 0px 10px;
                border: 1px #ccc solid;
                text-align: left;
                font-family: 'regular';
                font-size: 1em;
            }
            .contact_form textarea {
                background-color: rgba(0,0,0,0.075);
                float: none;
                padding: 10px 0px 0px 10px;
                width: 97.5%;
                border: 1px #ccc solid;
                text-align: left;
                font-family: 'regular';
                font-size: 1em;
            }
            #botones {
                display: inline-block;
                float: left;
                width: 100%;
                padding-top: 10px;
            }
            .contact_form button {
                display: inline-block;
                float: left;
                width: 100%;
                margin: 0px;
                padding: 10px 30px;
                background-color: #003b00;
                border: none;
                font-family: 'regular';
                font-size: 1em;
                color: #FFF;
                transition: all .25s;
                -moz-transition:transition: all .25s;
                -ms-transition:transition: all .25s;
                -webkit-transition:transition: all .25s;
                -o-transition:transition: all .25s;
            }
            .contact_form button:hover {
                background-color: #fcc000;
                color: #000;
            }

/*--- NOSOTROS ---*/

        #nosotros{
            background: url(../media/fon_nosotros.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            background-size: 100%;
            display: inline-block;
            float: none;
            width: 100%;
            margin: 50px 0px 0px 0px;
            padding: 50px 0px;
        }
        #nosotroscontenedor{
            display: inline-block;
            float: none;
            width: 100%;
            max-width: 1000px;
        }
        #nosotrosizq{
            display: inline-block;
            float: left;
            width: auto;
        }
        #nosotrosder{
            background-color: rgba(50,160,45,0.8);
            display: inline-block;
            float: right;
            width: 65%;
            border: 5px #FFF solid;
            padding: 20px;
        }
        #nosotrosder p{
            font-family: "light";
            font-size: 0.9em;
            color: #FFF;
            text-align: justify;
            margin: 0px 0px 0px 0px;
        }

        #nosotros h1{
            font-family: "bold";
            font-size: 1.5em;
            color: #000;
            text-align: center;
            margin: 0px 0px 30px 0px;
        }
        #nosotros ul{
            list-style-type: none;
        }
        #nosotros ul li{
            display: inline-block;
            float: none;
            width: auto;
            margin: 0px;
        }

/*--- PIE ---*/

        #footer {
            background: url(../media/negro.png);
            background-repeat: no-repeat;
            background-position: top;
            background-color: #003b00;
            display: inline-block;
            float: none;
            width: 100%;
            height: auto;
            margin: 50px 0px 0px 0px;
            padding: 30px 0px;
        }
        #footercontenedor {
            display: inline-block;
            float: none;
            width: 100%;
            max-width: 1000px;
        }
        

        #footerizq {
            display: inline-block;
            float: left;
            width: 30%;
            height: 180px;
            border-right: 1px #fcc000 solid;
        }
        #footerizq ul{
            list-style-type: none;
        }
        #footerizq ul li{
            display: inline-block;
            float: left;
            width: 100%;
            font-family: "light";
            font-size: 0.9em;
            color: #FFF;
            text-align: left;
        }
        #footerizq a{
            color: #FFF;
            text-decoration: none;
        }
        #footerizq a:hover{
            color: #fcc000;
        }
        

        #footermedio {
            display: inline-block;
            float: none;
            width: 30%;
            height: 180px;
            border-right: 1px #fcc000 solid;
        }
        #footermedio p{
            font-family: "light";
            font-size: 0.9em;
            color: #FFF;
            text-align: left;
        }
        #footermedio a{
            text-decoration: none;
            color: #fcc000;
            text-align: left;
        }
        #footermedio a:hover{
            color: #FFF;
        }
        

        #footerder {
            display: inline-block;
            float: right;
            width: 33%;
            height: 180px;
        }
        #footerder p{
            font-family: "regular";
            font-size: 0.9em;
            color: #FFF;
            text-align: left;
            margin: 0px 0px 20px 0px;
        }
        #footerder ul{
            list-style-type: none;
        }
        #footerder ul li{
            display: inline-block;
            float: left;
            width: auto;
            margin: 0px 5px;
        }
        #footerder a{
            opacity: 1;
            bottom: 0px;
            transition: all .20s;
            -moz-transition:transition: all .20s;
            -ms-transition:transition: all .20s;
            -webkit-transition:transition: all .20s;
            -o-transition:transition: all .20s;
        }
        #footerder a:hover{
            opacity: 0.75;
            bottom: 3px;
            position: relative;
        }




/*--- R E S P O N S I V O S ---*/

    /*--- PANTALLA 950 (probar hasta 769) ...*/
        @media only screen and (max-width: 950px) {

            /*--- LOGO OCULTO ---*/
    			#logoculto{
					position: absolute;
					z-index: 300;
					display: block;
					float: none;
					width: auto;
					height: auto;
				}
				#logoculto img{
					max-width: 150px;
					height: auto;
					margin: 100px 0px 0px 15px;
				}

			/*--- TOP NEGRO ---*/
                #topnegrocontenedor{
                    width: 95%;
                }

            /*--- MENU ---*/
                #menu{
                    height: 90px;
                    left: 0;
                }
                nav {
                    float: none;
                    width: 95%;
                    margin: 20px 0px 0px 0px;
                }
                nav ul {
                    float: none;
                    margin: 33px 0px 0px 0px;
                }
                nav li a {
                    font-size: 0.9em;
                    margin: 0px 10px; 
                }

                nav img{
                    display: none;
                }

            /*--- SUBMENUS --*/
                nav li .flecha{
                    font-size: 0.8em;
                    padding-left: 3px;
                    color: #fcc000;
                    }

                nav li.parent:hover{
                    margin: 0px;
                }
                nav li li a{
                    width: 270px;/*el ancho de los links del submenu, debe ser fijo, esto servirá para crear la animación mas adelante */
                    display: inline-block;
                    float: none;
                    font-size: 0.9em;
                    text-align: left;
                    border-bottom: 1px #555 solid;
                    padding: 10px 7px;
                }
                /* aquí esta lo importante!!: SUB MENU ANIMACION ---*/
                nav li ul {
                    width: 0; /*Cambiamos la linea */
                    margin:0;
                    /*display:none; Lo Eliminamos */
                    background: rgba(0,0,0,0.65);
                    border: none;
                    position: absolute;
                    left: 0%;
                    top: 30px;
                   
                    overflow: hidden; /* Para evitar Que se salgan los links */
                    z-index: 1;/*El Submenu tiene que ir atras, para evitar que los 0 pixeles causen problema al :hover*/ 
                   
                    opacity: 0; 
                    filter: alpha(opacity=0); /* Internet Explorer*/
                    -webkit-transition: opacity 0.2s ease-in 0.3s, width 0.4s ease-in 0.3s;/* Chrome, Safari*/
                    transition: opacity 0.2s ease-in  0.3s, width 0.4s ease-in 0.3s;/* Navegadores CSS3 */
                    -moz-transition: opacity 0.2s ease-in  0.3s, width 0.4s ease-in 0.3s; /* Firefox 4 */
                    -o-transition: opacity 0.2s ease-in 0.3s, width 0.4s ease-in 0.3s; /*Opera */
                }
                nav li:hover ul {
                    /*display:block; Lo Eliminamos */
                      
                    width: 270px; /*La animación de 0 a 310px*/
                    opacity: 1;
                    filter: alpha(opacity=100);/* Internet Explorer*/
                    -webkit-transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s;/* Chrome, Safari*/
                    transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s;/* Navegadores CSS3 */
                    -moz-transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s; /* Firefox 4 */
                    -o-transition: oopacity 0.1s linear 0s, width 0.3s ease-out 0s; /* Opera */
                }

            /*--- DESTACADOS ---*/

                    #destacados{
                        width: 95%;
                    }
                    #destacados h1{
                        font-size: 1.5em;
                        margin: 0px 0px 20px 0px;
                        height: 40px;
                    }

            /*--- OPCIONES ---*/

                    #opciones{
                        width: 95%;
                    }
                    #opciones h1{
                        font-size: 1.5em;
                    }
                    #opciones ul li{
                        width: 45%;
                        margin: 1.25% 1.25%;
                    }
                    #opciones ul li h1{
                        height: 30px;
                        overflow:hidden!important;
                    }
                    #opciones ul li h2{
                        font-size: 1em;
                        height: 70px;
                    }

                    #opciones ul li .foto{
                        height: 150px;
                    }

            /*--- VIAJES ---*/

                    #viajes{
                        width: 95%;
                    }
                    #viajes h1{
                        font-size: 1.5em;
                    }
                    #viajes ul li{
                        width: 28%;
                        margin: 1.2% 1.2%;
                    }
                    #viajes ul li h2{
                        height: 70px;
                    }

            /*--- CALENDARIO ---*/

                    #calendario{
                        width: 95%;
                    }
                    #calendario h1{
                        font-size: 1.5em;
                    }
                    #calendario ul li{
                        width: 28%;
                        margin: 1.2% 1.2%;
                    }
                    #calendario ul li h2{
                        height: auto;
                    }

            /*--- DETALLES ---*/

                    #detalle{
                        width: 95%;
                    }
                    #detalleizq{
                        width: 30%;
                    }
                    #detalleder{
                        width: 62.5%;
                    }
                    
                    #detallecuadro{
                        font-size: 0.9em;
                        line-height: 1.5em;
                        padding: 10px;
                    }
                    #detallecuadro .correo{
                        display: none;
                    }

                    #detalleder p{
                        font-size: 0.9em;
                    }

                    #detalle h1{
                        font-size: 1.5em;
                    }

            /*--- CONTACTO ---*/

                    #contacto h1{
                        font-size: 1.25em;
                    }

                    #institucional{
                        padding: 120px 0px;
                    }
                    #fondobici{
                        padding: 120px 0px;
                    }

            /*--- NOSOTROS ---*/

                    #nosotros{
                        padding: 30px 0px;
                    }
                    #nosotroscontenedor{
                        width: 95%;
                    }
                    #nosotrosizq{
                        display: inline-block;
                        float: left;
                        width: auto;
                    }
                    #nosotrosder{
                        width: 60%;
                    }
                    #nosotros h1{
                        margin: 0px 0px 20px 0px;
                    }
                    #nosotros ul li{
                        display: inline-block;
                        float: none;
                        width: auto;
                        margin: 0px;
                    }

            /*--- PIE ---*/

                    #footer {
                        margin: 50px 0px 0px 0px;
                        padding: 30px 0px;
                    }
                    #footercontenedor {
                        width: 95%;
                    }
                    

                    #footerizq {
                        width: 25%;
                    }
                    

                    #footermedio {
                        width: 40%;
                    }
                    

                    #footerder {
                        width: 25%;
                    }

        }

    /*--- PANTALLA 768  (probar hasta 641)...*/
        @media only screen and (max-width: 768px) {

       		/*--- LOGO OCULTO ---*/
				#logoculto img{
					max-width: 100px;
					margin: 55px 0px 0px 15px;
				}

			/*--- MENU ---*/
                #menu{
                    height: auto;
                    left: 0;
                    margin: 0px;
                    padding: 0px;
                }
                nav {
                    background-color: rgba(0,0,0,0.8);
                    float: right;
                    height: auto;
                    width: 100%;
                    margin: 10px 0px 0px 0px;
                }
                nav ul {
                    display: none;
                    height: auto;
                    width: 100%;
                }
                nav li {
                    width: 45%;
                    margin: 10px 0px 0px 0px;
                    padding: 0px 0px 10px 0px;
                    position: relative;
                    border-bottom: 1px #555 solid;
                }
                nav a {
                    text-align: left;
                    width: 100%;
                    text-indent: 25px;
                }
                nav a#pull {
                    display: block;
                    width: 100%;
                    position: relative;
                    margin: 40px 0px 0px 0px;
                }
                nav a#pull:after {
                    content:"";
                    background: url('../media/menu.png') no-repeat;
                    width: 30px;
                    height: 30px;
                    display: inline-block;
                    position: absolute;
                    right: 20px;
                    top: 5px;
                }

            /*--- SUBMENUS --*/

                nav ul li ul li a{
                    width: 300px;/*el ancho de los links del submenu, debe ser fijo, esto servirá para crear la animación mas adelante */
                    display: inline-block;
                    float: left;
                    font-size: 0.9em;
                    text-align: left;
                    border-bottom: none;
                    padding: 5px 5px;
                }
                /* aquí esta lo importante!!: SUB MENU ANIMACION ---*/
                nav ul li ul {
                    width: 0; /*Cambiamos la linea */
                    margin:0;
                    /*display:none; Lo Eliminamos */
                    background: #000;
                    border: none;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 30px;
                    overflow: hidden; /* Para evitar Que se salgan los links */
                    z-index: 1;/*El Submenu tiene que ir atras, para evitar que los 0 pixeles causen problema al :hover*/ 
                    opacity: 0; 
                    filter: alpha(opacity=0); /* Internet Explorer*/
                    -webkit-transition: opacity 0.2s ease-in 0.3s, width 0.4s ease-in 0.3s;/* Chrome, Safari*/
                    transition: opacity 0.2s ease-in  0.3s, width 0.4s ease-in 0.3s;/* Navegadores CSS3 */
                    -moz-transition: opacity 0.2s ease-in  0.3s, width 0.4s ease-in 0.3s; /* Firefox 4 */
                    -o-transition: opacity 0.2s ease-in 0.3s, width 0.4s ease-in 0.3s; /*Opera */
                }

                nav li:hover ul {
                    /*display:block; Lo Eliminamos */
                    width: 300px; /*La animación de 0 a 310px*/
                    opacity: 1;
                    filter: alpha(opacity=100);/* Internet Explorer*/
                    -webkit-transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s;/* Chrome, Safari*/
                    transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s;/* Navegadores CSS3 */
                    -moz-transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s; /* Firefox 4 */
                    -o-transition: oopacity 0.1s linear 0s, width 0.3s ease-out 0s; /* Opera */
                }
                .submenu{
                    display: inline-block;
                    float: right;
                    width: auto;
                    margin: 3px 0px 0px 0px;
                    padding: 0px 0px 3px 0px;
                }

            /*--- NOSOTROS ---*/

                    #nosotrosizq{
                        display: none;
                    }
                    #nosotrosder{
                        float: none;
                        width: 90%;
                    }
                    #nosotros h1{
                        margin: 0px 0px 20px 0px;
                    }
                    #nosotros ul li{
                        display: inline-block;
                        float: none;
                        width: auto;
                        margin: 0px;
                    }

            /*--- PIE ---*/

                    #footer {
                        margin: 50px 0px 0px 0px;
                        padding: 30px 0px;
                    }
                    #footercontenedor {
                        width: 90%;
                    }
                    
                    #footerizq {
                        display: none;
                    }
                    
                    #footermedio {
                        float: left;
                        width: 50%;
                    }
                    
                    #footerder {
                        width: auto;
                    }

        }

    /*--- PANTALLA 640  (probar hasta 481)...*/
        @media only screen and (max-width: 640px) {

        		/*--- LOGO OCULTO ---*/
				#logoculto img{
					margin: 15px 0px 0px 15px;
				}

				/*--- TOP NEGRO ---*/
			        #topnegro{
			            background: none;
			            z-index: 100;
			            display: inline-block;
			            float: none;
			            position: fixed;
			            left: 0;
			            width: 100%;
			            height: auto;
			            margin: 0px;
			            padding: 5px 0px 0px 0px;
			        }
			        #topnegrocontenedor{
			        	background: none;
			            width: 100%;
			            max-width: 1000px;
			        }
			        #topnegrocontenedor p{
			        	display: none;
			        }

		        /*--- REDES ---*/
			        #redes{
			            display: none;
			        }

				/*--- MENU ---*/
	                #menu{
	                    background-color: rgba(0,0,0,0.8);
		                float: none;
		                height: 40px;
		            }
            		nav {
	                    margin: 0px 0px 0px 0px;
	                }
	                nav li {
	                	float: none;
	                    width: 75%;
	                    margin:  5px 0px 0px 0px;
	                    padding: 0px 0px 5px 0px;
	                }
	                nav a {
	                    text-align: center;
	                    width: 100%;
	                    text-indent: 0px;
	                }
	                nav a:hover{
	                	bottom: 0;
	                }
	                nav a#pull {
	                    display: block;
	                    width: 100%;
	                    position: relative;
	                    margin: 0px 0px 0px 0px;
	                }
	                nav a#pull:after {
	                    content:"";
	                    background: url('../media/menu.png') no-repeat;
	                    width: 30px;
	                    height: 30px;
	                    display: inline-block;
	                    position: absolute;
	                    right: 20px;
	                    top: 5px;
	                }

	            /*--- SUBMENUS --*/

	                nav ul li ul li a{
	                    width: 100%;/*el ancho de los links del submenu, debe ser fijo, esto servirá para crear la animación mas adelante */
	                    display: inline-block;
	                    float: none;
	                    font-size: 0.9em;
	                    text-align: center;
	                    border-bottom: none;
	                    padding: 5px 0px;
	                }
	                
	                nav li:hover ul {
	                    /*display:block; Lo Eliminamos */
	                    width: 100%; /*La animación de 0 a 310px*/
	                    opacity: 1;
	                    filter: alpha(opacity=100);/* Internet Explorer*/
	                    -webkit-transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s;/* Chrome, Safari*/
	                    transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s;/* Navegadores CSS3 */
	                    -moz-transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s; /* Firefox 4 */
	                    -o-transition: oopacity 0.1s linear 0s, width 0.3s ease-out 0s; /* Opera */
	                }
	                .submenu{
	                    display: block;
	                    float: none;
	                    width: 100%;
	                    margin: 3px 0px 0px 0px;
	                    padding: 0px 0px 3px 0px;
                        text-indent: 0px;
	                }

                /*--- DESTACADOS ---*/

                    #destacados h1{
                        font-size: 1.5em;
                        margin: 0px 0px 10px 0px;
                        height: 40px;
                    }
                    #destacados ul li{
			            float: none;
			            width: 95%;
			            margin: 0px 0px 20px 0px;
			        }

    	        /*--- VIAJES ---*/

                    #viajes ul li{
                        width: 45%;
                    }
                    #viajes ul li h2{
                        height: 55px;
                    }

                /*--- CALENDARIO ---*/

                    #calendario ul li{
                        width: 45%;
                    }
                    #calendario ul li h2{
                        height: auto;
                    }
                    #calendario ul li h3{
                        margin: 0px 0px 10px 10px;
                    }


                /*--- CONTACTO ---*/

			        #contacto{
			            background-size: auto;
			        }

	            /*--- DETALLES ---*/

                    #detalleizq{
                        width: 95%;
                        float: none;
                    }
                    #detalleder{
                    	float: none;
                        width: 95%;
                        padding: 0px;
                    }
                    
                    #detallecuadro{
                    	background: none;
                    	box-shadow: none;
                    	float: none;
                        font-size: 0.9em;
                        line-height: 1.5em;
                        padding: 0px 0px 10px 0px;
                        border-bottom: 1px #ccc solid;
                        color: #003b00; 
                    }

                    #detalle h1{
                        font-size: 1.5em;
                    }
   
        }

    /*--- PANTALLA 480  (probar hasta 361)...*/
        @media only screen and (max-width: 480px) {

			/*--- DESTACADOS ---*/

                    #destacados h1{
                        font-size: 1.25em;
                        margin: 0px 0px 10px 0px;
                        height: 40px;
                    }
                    #destacados ul li{
			            float: none;
			            width: 95%;
			            margin: 0px 0px 20px 0px;
			        }
			        #destacados ul li h1{
			            font-size: 1.2em;
			            height: 20px;
                        overflow:hidden!important;
			        }
			        #destacados ul li h2{
			            font-family: "light";
			            font-size: 0.8em;
			            color: #000;
			            text-align: left;
			            margin: 0px 0px 5px 10px;
			        }

			/* INSTITUCIONAL */
			    
			        #destacados h1{
			            font-size: 1.5em;
			            margin: 0px 0px 20px 0px;
			        }
			        #destacados h3{
			            font-size: 0.9em;
			            width: 85%;
			            color: #000;
			            text-align: left;
			            margin: 20px 0px;
			            padding: 15px;
			        }
			        #destacados h4{
			            font-size: 0.9em;
			            width: 90%;
			            margin: 0px 0px 0px 0px;
			        }

			/*--- OPCIONES ---*/

                    #opciones h1{
                        font-size: 1.25em;
                    }
                    #opciones ul li{
                    	float: none;
                        width: 90%;
                        margin: 0% 1% 5% 1%;
                    }
                    #opciones ul li h1{
                        height: 20px;
                        overflow:hidden!important;
                    }
                    #opciones ul li h2{
                        font-size: 0.8em;
                        height: 55px;
                    }

                    #opciones ul li .foto{
                        height: 150px;
                    }            

            /*--- VIAJES ---*/

                    #viajes ul li{
                    	float: none;
                        width: 90%;
                        margin: 0% 1% 5% 1%;
                    }
                    #viajes ul li h1{
                        height: 20px;
                        overflow:hidden!important;
                    }
                    #viajes ul li h2{
                    	height: 55px;
                    }

            /*--- CALENDARIO ---*/

                    #calendario ul li{
                        float: none;
                        width: 90%;
                        margin: 0% 1% 5% 1%;
                    }
                    #calendario ul li h1{
                        height: auto;
                        overflow:hidden!important;
                    }
                    #calendario ul li h2{
                        height: auto;
                    }
                    #calendario ul li h3{
                        margin: 0px 0px 10px 10px;
                    }

            /*--- NOSOTROS ---*/

                    #nosotrosder{
                        float: none;
                        width: 80%;
                    }

            /*--- DETALLES ---*/

                    #detalle h1{
                        font-size: 1em;
                    }

            /*--- PIE ---*/

                    #footer {
                        margin: 50px 0px 0px 0px;
                        padding: 30px 0px;
                    }
                    #footercontenedor {
                        width: 90%;
                    }
                    
                    #footermedio {
                        float: none;
                        width: 100%;
                        border-right: none;
                        border-bottom: 1px #fcc000 solid;
                    }
                    #footermedio p{
			            font-size: 0.8em;
			            text-align: center;
			            margin: 0px 0px 20px 0px;
			        }
                    
                    #footerder {
                    	float: none;
                        width: auto;
                        margin: 20px 0px 0px 0px;
                    }

        }

    /*--- PANTALLA 360  (probar hasta 321)...*/
        @media only screen and (max-width: 360px) {

            

        }

    /*--- PANTALLA 320  (probar hasta 241)...*/
        @media only screen and (max-width: 320px) {

                

        }

    /*--- PANTALLA 240  (probar hasta 120)...*/
        @media only screen and (max-width: 240px) {
            
                

        }