﻿
.contentMenu {overflow:hidden;}
.animationHeight {-webkit-transition: height 500ms ease-in}

a { color: #0000FF}
.internalLink:link {color:#CC0000}
.internalFichaLink:link {color:#CC0000;}
.internalFichaLink:visited {color:#CC0000;}

.fnt1{font-family: 'SourceSansPro', Arial, sans-serif;font-size:22px;font-weight:bold;}
.fnt2{font-family: 'SourceSansPro', Arial, sans-serif;font-size:21px;font-weight:bold;}
.fnt3{font-family: 'SourceSansPro', Arial, sans-serif;font-size:20px;font-weight:bold;}
.fnt4{font-family: 'SourceSansPro', Arial, sans-serif;font-size:22px;}
.fnt5{font-family: 'SourceSansPro', Arial, sans-serif;font-size:21px;}
.fnt6{font-family: 'SourceSansPro', Arial, sans-serif;font-size:20px;}

.col1{color:#000000;}
.col2{color:#000000;}
.col3{color:#FFFFFF;}
.col4{color:#FFFFFF;}
.col5{color:#5c0d80;}
.col6{color:#000000;}
.col7{color:#cc0000;}


.lst1, .lst2, .lst3, .lst4, .lst5 {
    background:url('../img/icn_flecha.png') no-repeat left;
    background-size:10px 10px; 
    padding-left:20px; 
    margin-left:2px; 
    background-position:0 7px; 
}

.txt1, .txt2, .txt3, .txt4, .txt5 {
    position:relative;  
}

.tit1 { top:5px;position:relative;}
.tit2 {position:relative;padding-top:1px;padding-bottom:1px;}
.tit3 { top:5px;position:relative;}
.tit4, .tit5 {position:relative;padding-top:1px;padding-bottom:1px}
.tit6 { top:5px;position:relative;}
.tit7 { top:5px;position:relative;}
.tit8 { top:5px;position:relative;}


.bck1 {position:relative; margin-bottom:18px;margin-left:15px;margin-right:10px}
.bck2 {background-color:rgba(255,255,255,1.00); margin-bottom:8px;margin-left:15px;margin-right:13px;margin-top:10px}
.bck3 {position:relative; margin-bottom:8px;margin-left:15px;margin-right:10px;}
.bck4, .bck5 {background-color:#FEFEFE; margin-bottom:0px;margin-left:15px;margin-right:13px;margin-top:10px}
.bck6 {position:relative; margin-bottom:18px;margin-left:15px;margin-right:10px}
.bck7 {position:relative; margin-bottom:12px;margin-left:15px;margin-right:10px}
.bck8 {position:relative; margin-bottom:33px;margin-left:15px;margin-right:10px}

.btnOpen, .btn7 {
    background:url('../img/icn_menos.png') no-repeat left;
    background-size:10px 10px; 
    padding-left:20px; 
    margin-left:0px; 
    background-position:0 8px; 
}

.btnClose, .btn6 {
    background: url('../img/icn_menos.png') no-repeat left;
    background-size: 10px 10px;
    padding-left: 20px;
    margin-left: 0px;
    background-position: 0 8px;
}
.btn1, .btn2 { }

.btn3, .btn4, .btn5 {
    background:url('../img/icn_menos.png') no-repeat left;
    background-size:10px 10px; 
    padding-left:20px; 
    margin-left:0px; 
    background-position:0 8px; 
}
.btn1 > a, .btn2 > a, .btn3 > a, .btn4 > a, .btn5 > a, .btn6 > a, .btn7 > a, .btnOpen > a, .btnClose > a {
    display:block;
    padding-right:25px;
}

.btnLink {
   display:block;
   padding-right:25px;
}

  .margin{margin-left:15px;margin-right:15px; position:relative;}
  .margin_I {margin-top:-3px;}
  .margin_P {margin-top:12px;}
  .margin_P_sup {margin-top:11px;}
  .margin_P_inf {margin-bottom:21px;margin-top:12px;}
  .margin_L {margin-top:0px; position:relative;}
  .margin_L_sup {margin-top:-2px; position:relative;}
  .margin_L_inf {margin-top:1px;margin-bottom:0px; position:relative;}



#galeria {
   padding-top:30px;
   font-family: 'SourceSansPro', Arial, sans-serif;
   font-size: 17px;
   line-height:18px;
}

#html {
    background-color:#EBEBEB;
    margin-top:30px;
    margin-left:0px;
    margin-right:0px;
}

.item_imagen_thumb {
    margin: 0px;
    overflow:hidden;
}

.item_imagen_thumb > img {
    -moz-transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    transition: 0.5s all ease;
}

/*.item_imagen_overlay {*/
.franja_galeria {
    background-color:#CC0000;
    height:5px;
    width:100%;
}

.item_imagen_title {
    padding-top: 5px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom:5px;
    text-align: center;
    color: #545E69;

}

.item_imagen > a {
   text-decoration:none;
}


.item_imagen > a:hover .item_imagen_title {
    color: #EEE5E4;
    background-color:#CC0000;
}

.item_imagen > a:hover .item_imagen_thumb > img {
    -moz-transform: scale(1.08);
    -ms-transform: scale(1.08);
    -o-transform: scale(1.08);
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}

.franja_videos {
    text-align:center;
    font-family: 'SourceSansPro', Arial, sans-serif;
    font-size: 22px;
    font-weight: bold;
    margin-top:5px;
}

.item_video  {
    width: 210px;
    height: 45px;
    margin: 0 auto;
    vertical-align:top;
    line-height:45px;
}

.item_video > a {
       width: 210px;
        height: 45px;
        display:block;
        background: url('../img/btn_video.png') no-repeat left;
        background-size:contain;
        text-decoration: none;
        color: #FFFFFF;
}

    .item_video > a:hover {
        color: #CC0000;
        background: url('../img/btn_video_selec.png') no-repeat left;
        background-size: contain;
    }


/* audio style*/
#playPauseButton {
    background-image: url('../img/btn_play_audio.png');
    width: 50px;
    height: 50px;
    background-size: cover;
    background-color:transparent;
    border: none;
    cursor: pointer;
    position:absolute;
    z-index:200;
    right:0;
    top:0;
}
#playPauseButton.playing {
    background-image: url('../img/btn_pause_audio.png'); 
}

#restartButton {
    background-image: url('../img/btn_reload.png');
    width: 50px;
    height: 50px;
    background-size: cover;
    background-color: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    z-index: 200;
    left: 0;
    top: 0;
}

.audioBox {
    height:50px;
}

.audioPlayerBox {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
}

.audioBackground {
    background-color: #000000;
    position: absolute;
    height: 50px;
    top:0px;
    left: 25px;
    right: 25px;
}

.audioProgressBar {
    position: absolute;
    z-index: 120;
    left: 0px;
    top: 0;
    height:50px;
    right:0px;
}


#progressBar {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    width: 100%;
    overflow: hidden;
    outline: none;
    background: transparent;
    cursor: pointer;
    height: 50px;

    --range: calc(var(--max) - var(--min));
    --ratio: calc((var(--value) - var(--min)) / var(--range));
    --sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
}

/* Chrome Safari progress style */

    #progressBar::-webkit-slider-runnable-track {
        height: 15px;
        -webkit-appearance: none;
        background: linear-gradient(#FFFFFF,#FFFFFF) 0/var(--sx) 100% no-repeat, transparent;
        transform: translateY(20px);
    }

    #progressBar::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-image: url('../img/icn_progress_audio.png');
        height: 50px;
        width: 50px;
        background-size: cover;
        background-color: transparent;
        border: none;
        transform: translateY(-37px);
    }


    /* Mozilla Firefox progress style */
    #progressBar::-moz-range-progress {
        background-color: #FFFFFF;
        height: 15px;
        transform: translateY(20px);
    }

    #progressBar::-moz-range-track {
        background-color: transparent;
        height: 15px;
        transform: translateY(20px);
    }
       
    #progressBar::-moz-range-thumb {
        background-image: url('../img/icn_progress_audio.png');
        height: 50px;
        width: 50px;
        background-size: cover;
        background-color: transparent;
        border: none;
    }




.audioProgressText {
    color: #FFFFFF;
    font-family: 'SourceSansPro', Arial, sans-serif;
    font-size: 22px;
    font-weight: bold;
    left: 60px;
    top:10px;
    z-index: 100;
    position: absolute;
}


    .btn_div { 
	margin-left: auto; 
        margin-bottom: -10px; 
        margin-right: auto; 
        position: relative; 
	left: auto; 
        right: auto; 
        width: 100%; 
        top: 0px; 
        border: 0; 
    }

    .btn_div div { 
        position: relative; 
        display: inline-block; 
        width: 45px; 
        border: 0; 
        height:45px; 
        margin-bottom:10px;
        margin-right:10px;
     }

    .btn_div a { 
 	display: inline-block; 
	width: 100%; 
	height: 100%; 
	border: 0;
    }

.btn_top10 {
    background: url('../img/redes/icn_top10.png') no-repeat center;
    background-size: contain;
    border: 0;
}


.btn_video {
    background: url('../img/redes/icn_video.png') no-repeat center;
    background-size: contain;
    border: 0;
}


.btn_como_llegar {
    background: url('../img/redes/icn_comollegar.png') no-repeat center;
    background-size: contain;
    border: 0;
}


.btn_360 {
    background: url('../img/redes/icn_panoramica.png') no-repeat center;
    background-size: contain;
    border: 0;
    display: none !important; 
}


.btn_llamar {
    background: url('../img/redes/icn_llamar.png') no-repeat center;
    background-size: contain;
    border: 0;
}

.btn_mail {
    background: url('../img/redes/icn_mail.png') no-repeat center;
    background-size: contain;
    border: 0;
}

.btn_web {
    background: url('../img/redes/icn_web.png') no-repeat center;
    background-size: contain;
    border: 0;
}

.btn_tienda {
    background: url('../img/redes/icn_tienda.png') no-repeat center;
    background-size: contain;
    border: 0;
}


.btn_whatsapp {
    background: url('../img/redes/icn_whastapp.png') no-repeat center;
    background-size: contain;
    border: 0;
}

.btn_twitter {
    background: url('../img/redes/icn_twitter.png') no-repeat center;
    background-size: contain;
    border: 0;
}


.btn_instagram {
    background: url('../img/redes/icn_instagram.png') no-repeat center;
    background-size: contain;
    border: 0;
}


.btn_facebook {
    background: url('../img/redes/icn_facebook.png') no-repeat center;
    background-size: contain;
    border: 0;
}




@media screen and (max-width: 1300px) {

    .fnt1{font-size:20px;}
    .fnt2{font-size:19px;}
    .fnt3{font-size:18px;}
    .fnt4{font-size:19px;}
    .fnt5{font-size:18px;}

    
#galeria {
   font-size: 16px;
   line-height:17px;
}

    .franja_videos {
        font-size: 18px;
    }


    .item_video {
        width: 198px;
        height: 43px;
        line-height: 43px;
    }

    .item_video > a {
        width: 198px;
        height: 43px;
    }

    .audioProgressText {
        font-size: 20px;
    }

}

@media screen and (max-width: 480px) {

    #html {
        margin-left:20px;
        margin-right:20px;
    }

    #galeria {
        font-size: 15px;
        line-height:16px;
    }


    .fnt1{font-size:19px;}
    .fnt2{font-size:18px;}
    .fnt3{font-size:17px;}
    .fnt4{font-size:18px;}
    .fnt5{font-size:17px;}

    .lst1, .lst2, .lst3, .lst4, .lst5 {
        background-size:7px 7px; 
        padding-left:14px; 
        background-position:0 6px; 
}


.btnOpen, .btn7 {
        background-size:7px 7px; 
        padding-left:14px; 
        background-position:0 7px; 
}

.btnClose, .btn6 {
        background-size:7px 7px; 
        padding-left:14px; 
        background-position:0 7px; 
}
.btn1, .btn2 { }

.btn3, .btn4, .btn5 {
        background-size:7px 7px; 
        padding-left:14px; 
        background-position:0 7px; 
}


    .franja_videos {
        font-size: 18px;
    }


    .item_video {
        width: 180px;
        height: 39px;
        line-height: 39px;
    }

        .item_video > a {
            width: 180px;
            height: 39px;
        }


    .audioProgressText {
        font-size: 19px;
    }


}


