html, body {height: 100%; margin:0; font-family: 'Open Sans', sans-serif; background: #f4f2ef; max-width: 100%; color: #2d2b28; font-weight: 400; font-size: 10pt}
* {outline:none;}
img{border:0;}
a{text-decoration: none !important;cursor: pointer;}
::selection { background: #2d2b28; color: #fff }
::-moz-selection { background: #2d2b28; color: #fff }
h1 { font-size: 36pt; margin: 0; font-weight: 800;}
h2 {font-size:26pt;margin:0;font-weight:300; text-transform: uppercase; letter-spacing: 1pt}
h3 { font-size:15pt;margin:0;font-weight:800; }
h4 { font-size:32pt;margin:0;font-weight:300; }
.no-pad {padding:0 !important;}
.no-pad-left {padding-left:0 !important;}
.no-pad-right {padding-right:0 !important;}
.no-mar {margin:0 !important;}
.no-bor {border:0 !important;}
.sep {height:1px;}
.sepxl {height:3px;}
.sepxl div {height:100%;}
.sepv {width:1px; display: inline-flex}
.img-responsive{display: inline;}
.anim { -webkit-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; }
.valign-cont { display: table;}
.valign {vertical-align: middle; display: table-cell;}
.valign-bot {vertical-align: bottom; display: table-cell;}
.sticky { top: 50px; position: fixed; width: 370px;}
.bl {color:#fff;}
.bgbl{background: #fff}
.bl2 {color:#f4f2ef;}
.bgbl2{background: #f4f2ef}
.vd {color:#758931;}
.bgvd{background: #758931}
.am {color:#a27622;}
.bgam{background: #a27622}
.rj {color:#692f43;}
.bgrj{background: #692f43}
.gris {color:#2d2b28;}
.bggris{background: #2d2b28}
.mas10 { background: rgba( 255, 255, 255, 0.1); }
.menos10 { background: rgba( 0, 0, 0, 0.1); }
.justshadow { box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); }
.shadow { box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.0);
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;}
.shadow:hover { box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3) }
.head { height: 700px; padding: 10px 0; background-image:url(../imgs/slide01.jpg); background-size: cover; background-position: center top }
.buscador { margin-top:50px; height: 50px; }
.buscador .input-group {margin-top: 12px }
.buscador input {border-radius: 0; border:0; background-color: rgba(255, 255, 255, 0.1); border: 0px; color:#f4f2ef; padding: 5px 10px; height: 25px; outline: 0; -webkit-box-shadow: none; box-shadow: none; font-size: 10pt; }
.buscador input:focus {outline: 0; -webkit-box-shadow: none; box-shadow: none; }
.buscador button {height:25px; width:25px ; border:0px; border-radius: 0; font-size: 10pt; padding: 0px; background-color: rgba(255, 255, 255, 0.1); text-align: center; margin-left: 0 !important}
.buscador button:hover {background-color: #fff; color:#2d2b28 }
.social{ height: 25px; width: 25px; border-radius: 2px; text-align: center; padding-top: 4px; font-size:13pt !important; line-height: 11pt; display: inline-block; margin-top: 12px}
.social:hover { background: #fff; color:#2d2b28; }
.logo { height: 260px; margin-top: -200px;}
.menu { min-height: 100px; }
.interna.head { height: 150px; padding: 0px ; }
.interna.buscador {margin-top: 0px ; }
.interna.logo { height: 150px; margin-top: -150px; }
.interna.logo-in { height: 150px; padding: 5px 0 }
.interna.foto { height: 400px; background-position: top center; background-repeat: no-repeat; background-attachment: fixed; margin-bottom: 0px; }
.slide { height: 400px }
.slide .item { height: 400px; padding-top: 90px }
.slide .item p { font-size: 30pt; font-weight: 300; text-transform: uppercase; padding: 10px 0px; letter-spacing: 1pt ; line-height: 33pt}
.slide .item p span { font-weight: 800; }
.slide .slick-dots { bottom: 0px; left: 10px }
.destinations { height: 100px; margin-top: -180px; margin-bottom: 80px }
.destinations p { font-size: 18pt; font-weight: 800; letter-spacing: 1pt; text-transform: uppercase; }
.foot {height: 510px ; background: url(../imgs/bg-foot.jpg) center top; padding-top:110px; z-index: 999; position: relative; }
.foot p { font-size: 11pt; font-weight: 300 ; line-height: 18pt; margin:0px ; padding: 0 }
.foot .buscador { margin-top: 260px; }
.foot .submenu { padding-top: 60px}
.foot .submenu h2 { font-size: 10pt; text-transform: uppercase; height: 45px; padding-left: 10px; letter-spacing: 1pt; padding-top: 2px}
.foot .submenu ul { margin: 0; padding: 0; list-style: none; margin-left: 0px;}
.foot .submenu ul li { font-size: 9pt; color:#f4f2ef; font-weight: 300; padding: 0px 2px 0px; line-height: 11pt; margin-top:18px;}
.foot .submenu ul li:hover { padding: 0px 2px 0px 7px; border-left: 5px solid #f4f2ef}
.foot .submenu ul li a { color:#f4f2ef;}
.interna.titulo { height: 100px; margin-top: 0px; }
.titulo { height: 100px; margin-top: 50px; }
.titulo h2 { border-left:10px solid #fff; padding-left: 15px; line-height: 19pt; margin-top: 35px; margin-bottom: 38px}
.titulo h2 span { font-weight: 800}
.titulo2 { height: 100px; text-align: center; background: rgba( 255, 255, 255, 0.4); }
.titulo2 h2 { display: inline-block; border-left:10px solid #fff; border-right:10px solid #fff; padding: 0 15px; line-height: 19pt; margin-top: 35px; margin-bottom: 38px}
.titulo2 h2 span { font-weight: 800}
.actividades { height: 420px; background-size: cover; background-position: center; background-image: url(../imgs/bg-activites.jpg);}
.actividades .item { margin-top: 90px; text-align: center;opacity: 0.8 }
.actividades .item:hover { opacity: 1 }
.actividades .item img { margin-bottom: 10px; }
.actividades .item p { font-size: 12pt; text-transform: uppercase; margin-top: 10px; color: #fff; font-weight: 400; letter-spacing: 2pt}
.actividades .item:hover p { }
.destacado { height: 260px; margin: 90px 0 }
.destacado a .foto { height: 260px; max-width: 255px; background-size: cover; background-position: center }
.destacado a .foto .texto { max-width: 255px; height: 260px; background: rgba( 0, 0, 0, 0.6); padding-top: 30px}
.destacado a:hover .foto .texto { opacity: 0 }
.destacado a .foto .texto h2 { padding-bottom: 3px; }
.destacado a .foto .texto p { font-size: 12pt; text-transform: uppercase; margin-top: 10px; color: #fff;}
.destacado a .foto .texto .categoria { font-size: 10pt; font-weight: 800; padding: 5px 10px; display: inline-block; color: #758931 }
.destacado a .borde { height: 260px; width: 255px; margin-top: -260px ;position: absolute ; background-size: cover; background-position: center; background-image: url(../imgs/round-border.png); }
.derniers { height: 270px; margin: 60px 0 90px }
.derniers .foto { height: 270px; background-size: cover; background-position: center }
.derniers .texto { height: 230px; margin-top: -250px; }
.derniers .texto .fecha { height: 230px; width: 70px; float: left; margin-left: 175px }
.derniers .texto .fecha .mes { padding: 5px 10px; font-size: 12pt }
.derniers .texto .fecha .anno { padding: 5px 10px; font-size: 9pt }
.derniers .texto .titulo { height: 230px; width: 295px; padding: 20px 15px; font-size: 9pt; float: left; margin-top: 0 }
.derniers .texto .titulo .main { font-size: 11pt; text-transform: uppercase; line-height: 13pt; margin-bottom: 20px; }
.derniers .texto .titulo a div { font-size: 10pt; text-transform: uppercase; padding: 5px 10px; letter-spacing: 1pt; display: inline-block; margin-top: 20px; }
.derniers .texto .titulo a div:hover { color: #2d2b28 ; background: #f4f2ef }
.derniers .texto h2 { padding-bottom: 3px; }
.derniers .texto p { font-size: 12pt; text-transform: uppercase; margin-top: 10px; color: #fff;}
.derniers .texto .categoria { font-size: 10pt; font-weight: 800; padding: 5px 10px; display: inline-block; color: #758931 }
.breadcrumbs { height: 40px; overflow: hidden; margin-top: 20px }
.breadcrumbs p{ padding:10px 0px;font-size: 9pt !important; font-weight: 400; color: rgba(0, 0, 0, 0.7); }
.breadcrumbs p i { margin: 0 5px }
.breadcrumbs p a { color: #fff;
-webkit-transition: color 0.3s linear 0s;
transition: color 0.3s linear 0s;}
.breadcrumbs p a:hover {color: rgba(0, 0, 0, 1);}
.contenido { height: auto; padding: 60px 0 }
.contenido h1 { height: auto; display: inline-block; margin-bottom: 10px;}
.contenido p {font-size: 11pt; line-height: 18pt; font-weight: 300; margin-bottom: 25px}
.contenido p strong, .contenido p b {font-weight: 800}
.contenido p img { max-width: 100%; height: auto; }
.contenido p a { color:#9b9086; font-weight: 700; padding:1px 2px;
-webkit-transition: all 0.1s linear 0s;
transition: all 0.1s linear 0s;}
.contenido p a:hover { color:#fff; background: #9b9086; }
.contenido .rrssb-buttons li:before { display: none }
.contenido .foto { height: 400px; background-position: center center; background-repeat: no-repeat;background-size: cover; margin-bottom: 30px; margin-top: 5px }
.contenido .galeria .item {height:100px; opacity: 0.8; padding: 0 5px; margin-bottom: 10px; overflow: hidden;
-webkit-transition: opacity 0.3s linear 0s;
transition: opacity 0.3s linear 0s;}
.contenido .galeria .item .foto {height:100%; margin-bottom: 0; display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.contenido .galeria .item:hover {opacity: 1}
.contenido h2 { margin-bottom: 40px; font-style: italic; }
.contenido h3 { margin-bottom: 40px; font-style: italic; font-weight: 300 }
.contenido .nav-tabs .foto { margin-bottom: 5px; height: 60px }
.subir { position: fixed; width: 70px; height: 70px; background-size: cover; background-image: url(../imgs/up.png); bottom: 40px ; right: 40px; opacity: 0.5; font-size: 30pt; padding-top: 5px; z-index: 222}
.subir:hover { opacity: 1}
.contenido .tinimce-wrap { }
.contenido .tinimce-wrap h1 { font-size: 32pt; padding:0; margin-bottom: 25px; text-transform: initial; color: #9b9086}
.contenido .tinimce-wrap h2 { font-size: 20pt; padding:0; margin-bottom: 25px; text-transform: initial; color: #9b9086; font-weight: 300; height: auto }
.contenido .tinimce-wrap h3 { font-size: 20pt; margin-bottom: 25px; color: #9b9086; font-weight: 800; display: inline-block; }
.contenido .tinimce-wrap h4 { font-size: 15pt; padding:0; margin: 10px 0; text-transform: initial; color: #9b9086; font-weight: 800; height: auto; display: inline-block; }
.contenido .tinimce-wrap h5 { font-size: 15pt; padding:0; margin-bottom: 25px; text-transform: initial; font-weight: 300; height: auto; font-style: italic;color: #9b9086;}
.contenido .tinimce-wrap h6 { font-size: 9pt; padding:0; margin-bottom: 25px; text-transform: initial; height: auto}
.contenido .tinimce-wrap hr { margin: 45px 0 45px; border-top: 1px solid #9b9086 ; opacity: 0.5 }
.contenido .tinimce-wrap p {font-size: 12pt; line-height: 20pt; font-weight: 300; margin-bottom: 10px; text-align: justify;}
.contenido .tinimce-wrap table p {font-size: 11pt; line-height: 20pt; font-weight: 300; margin-bottom: 20px; text-align: justify;}
.contenido .tinimce-wrap p strong, .contenido .tinimce-wrap p b {font-weight: 800; color: #a27622}
.contenido .tinimce-wrap p img { max-width: 100%; height: auto; padding: 15px; float:left; }
.contenido .tinimce-wrap p a, .contenido .tinimce-wrap ul li a { color:#9b9086; font-weight: 700; padding:1px 2px;
-webkit-transition: all 0.1s linear 0s;
transition: all 0.1s linear 0s;}
.contenido .tinimce-wrap p a:hover, .contenido .tinimce-wrap ul li a:hover { color:#fff; background: #9b9086; }
.contenido .tinimce-wrap ul { list-style-type: none;font-size: 11pt; line-height: 18pt; font-weight: 300; margin-bottom: 25px }
.contenido .tinimce-wrap ol { font-size: 11pt; line-height: 18pt; font-weight: 300; margin-bottom: 25px }
.contenido .tinimce-wrap ul li:before { content: ""; margin-right: 10px; display: inline-block; width: 7px; height: 7px; background-color: #9b9086; border-radius: 50%; margin-bottom: 2px;}
.contenido .tinimce-wrap .rrssb-buttons li:before { display: none }
.contenido .tinimce-wrap .foto { height: 300px; background-position: center center; background-repeat: no-repeat;background-size: cover; margin-bottom: 40px; }
.contenido .tinimce-wrap .galeria .item {height:90px; width:90px; opacity: 0.8; margin: 0 5px; padding: 0; margin-bottom: 10px; overflow: hidden; display: inline-block;
-webkit-transition: opacity 0.3s linear 0s;
transition: opacity 0.3s linear 0s;}
.contenido .tinimce-wrap .galeria .item .foto {height:100%; margin-bottom: 0; display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.contenido .tinimce-wrap .galeria .item:hover {opacity: 1}
.contenido .tinimce-wrap table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
.contenido .tinimce-wrap table > thead > tr > th,
.contenido .tinimce-wrap table > tbody > tr > th,
.contenido .tinimce-wrap table > tfoot > tr > th,
.contenido .tinimce-wrap table > thead > tr > td,
.contenido .tinimce-wrap table > tbody > tr > td,
.contenido .tinimce-wrap table > tfoot > tr > td {
padding: 15px 20px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
.contenido .tinimce-wrap table {
border: 1px solid #ddd;
}
.contenido .tinimce-wrap table > thead > tr > th,
.contenido .tinimce-wrap table > tbody > tr > th,
.contenido .tinimce-wrap table > tfoot > tr > th,
.contenido .tinimce-wrap table > thead > tr > td,
.contenido .tinimce-wrap table > tbody > tr > td,
.contenido .tinimce-wrap table > tfoot > tr > td {
border: 1px solid #ddd;
}
.contenido .tinimce-wrap table > thead > tr > th,
.contenido .tinimce-wrap table > thead > tr > td {
border-bottom-width: 2px;
}
.contenido .tinimce-wrap table > thead > tr > td {
background-color: #2d2b28; border-color: #2d2b28; font-weight: 800; color: #fff;
}
.contenido .tinimce-wrap table > tbody > tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.03);
}
.contenido .tinimce-wrap table {
min-height: .01%;
overflow-x: auto;
}
.regiones { margin-top: 40px; margin-bottom: 40px }
.regiones .item .foto { height:150px; margin-bottom: 25px; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.regiones .item .foto .in { height:100%; width: 100%; background: rgba( 0, 0, 0, 0.4); padding-top: 60px}
.regiones .item .foto .in:hover { background: rgba( 0, 0, 0, 0.7);}
.regiones .item .foto .in a { color: #fff; font-size: 15pt; padding: 30px; border: rgba(255, 255, 255, 0) solid 0px; margin: 0; text-transform: uppercase; }
.regiones .item .foto .in:hover a { margin: 30px; border: #fff solid 3px; padding: 5px 10px }
.circuits { margin-top: 40px; margin-bottom: 40px }
.circuits .item { height: 270px; margin-bottom: 30px }
.circuits .item .foto { height: 270px; background-size: cover; background-position: center }
.circuits .item .texto { height: 230px; margin-top: -250px; }
.circuits .item .texto .fecha { height: 230px; width: 100px; float: left; margin-left: 145px }
.circuits .item .texto .fecha .jours { padding: 5px 10px; font-size: 11pt; font-weight: 400 }
.circuits .item .texto .fecha .niveau { padding: 5px 8px; font-size: 8pt; font-weight: 800; }
.circuits .item .texto .fecha .niveau1, .contenido .tinimce-wrap table > tbody > tr > td.niveau1, .contenido .tinimce-wrap table > tbody > tr > td.niveau1 > p > b { background: #ccc0d9 ; color: #3d3939; text-transform: uppercase;}
.circuits .item .texto .fecha .niveau2, .contenido .tinimce-wrap table > tbody > tr > td.niveau2, .contenido .tinimce-wrap table > tbody > tr > td.niveau2 > p > b { background: #d99594 ; color: #fff; text-transform: uppercase;}
.circuits .item .texto .fecha .niveau3, .contenido .tinimce-wrap table > tbody > tr > td.niveau3, .contenido .tinimce-wrap table > tbody > tr > td.niveau3 > p > b { background: #5f497a ; color: #fff; text-transform: uppercase;}
.circuits .item .texto .fecha .niveau4, .contenido .tinimce-wrap table > tbody > tr > td.niveau4, .contenido .tinimce-wrap table > tbody > tr > td.niveau4 > p > b { background: #ffc000 ; color: #5c3518; text-transform: uppercase;}
.circuits .item .texto .fecha .niveau5, .contenido .tinimce-wrap table > tbody > tr > td.niveau5, .contenido .tinimce-wrap table > tbody > tr > td.niveau5 > p > b { background: #e36c0a ; color: #fff; text-transform: uppercase;}
.circuits .item .texto .fecha .niveau6, .contenido .tinimce-wrap table > tbody > tr > td.niveau6, .contenido .tinimce-wrap table > tbody > tr > td.niveau6 > p > b { background: #dd0c0c ; color: #fff; text-transform: uppercase;}
.contenido .tinimce-wrap table > tbody > tr > td.niveau1, .contenido .tinimce-wrap table > tbody > tr > td { border-color: #fff; border-width: 1px; }
.contenido .tinimce-wrap table > tbody > tr > td.niveau2, .contenido .tinimce-wrap table > tbody > tr > td { border-color: #fff; border-width: 1px; }
.contenido .tinimce-wrap table > tbody > tr > td.niveau3, .contenido .tinimce-wrap table > tbody > tr > td { border-color: #fff; border-width: 1px; }
.contenido .tinimce-wrap table > tbody > tr > td.niveau4, .contenido .tinimce-wrap table > tbody > tr > td { border-color: #fff; border-width: 1px; }
.contenido .tinimce-wrap table > tbody > tr > td.niveau5, .contenido .tinimce-wrap table > tbody > tr > td { border-color: #fff; border-width: 1px; }
.contenido .tinimce-wrap table > tbody > tr > td.niveau6, .contenido .tinimce-wrap table > tbody > tr > td { border-color: #fff; border-width: 1px; }
.circuits .item .texto .titulo { height: 230px; width: 895px; padding: 20px 15px; font-size: 9pt; float: left; margin-top: 0 }
.circuits .item .texto .titulo .in { height: 102px; overflow: hidden; }
.circuits .item .texto .titulo p { margin: 0 }
.circuits .item .texto .titulo .main { font-size: 15pt; text-transform: uppercase; line-height: 13pt; margin-bottom: 10px; font-weight: 800; color: #9b9086; max-width: 500px; }
.circuits .item .texto .titulo .pais { font-size: 15pt; line-height: 13pt; margin-bottom: 10px; color: #9b9086 }
.circuits .item .texto .titulo .periodo { font-size: 12pt; line-height: 13pt; margin-bottom: 20px; }
.circuits .item .texto .titulo .activites { height: 70px; position: absolute; top: 20px; right: 20px }
.circuits .item .texto .titulo .activites .item img { height: 25px;}
.circuits .item .texto .titulo .activites .item .sep { margin-top: 3px; }
.circuits .item .texto .titulo .activites .item p { font-size: 8pt; font-weight: 800; color: #fff;}
.circuits .item .texto .titulo a div { font-size: 10pt; text-transform: uppercase; padding: 5px 10px; letter-spacing: 1pt; display: inline-block; margin-top: 20px; }
.circuits .item .texto .titulo a .sep { padding: 0px; }
.circuits .item .texto .titulo a div:hover { color: #2d2b28 ; background: #f4f2ef }
.circuits .item .texto .titulo a .sep:hover { background: transparent; }
.circuits .item .texto h2 { padding-bottom: 3px; }
.circuits .item .texto .plus { position: absolute; right: 20px; bottom: 20px }
.circuits .item .texto .categoria { font-size: 10pt; font-weight: 800; padding: 5px 10px; display: inline-block; color: #758931 }
.circuits .item .texto .titulo .grad { width: 100%; height: 80px; margin-top: 42px; background: url(../imgs/grad.png) repeat-x; position: relative;}
.circuits .item .texto .titulo .activites .item { height: 75px; padding: 8px 10px; background: #9b9086; display: inline-block; margin-top: 0; float: left; max-width: 150px; margin-left: 10px }
.circuit .info { margin-top: -100px; min-height: 200px }
.circuit .info .activites { height: 70px; border-left: 2px solid #fff }
.circuit .info .activites .item { height: 70px; padding: 10px 0; background: #9b9086; display: inline-block; width: 100% }
.circuit .info .activites .item img { height: 25px;}
.circuit .info .activites .item .sep { margin-top: 5px; }
.circuit .info .activites .item p { font-size: 8pt; font-weight: 800; color: #fff; line-height: 9pt}
.circuit .info .texto .titulo { height: auto; padding: 20px 15px 20px; font-size: 9pt; float: left; margin-top: 0 }
.circuit .info .texto .titulo .main { font-size: 15pt; text-transform: uppercase; line-height: 13pt; margin-bottom: 10px; margin-top: 15px; font-weight: 800; color: #9b9086 }
.circuit .info .texto .titulo .pais { font-size: 15pt; line-height: 13pt; margin-bottom: 10px; color: #9b9086 }
.circuit .info .texto .titulo .periodo { font-size: 12pt; line-height: 13pt; margin-bottom: 20px; }
.circuit .info .texto .fecha .jours { height:35px; padding: 6px 10px; font-size: 11pt; font-weight: 400; border-bottom: 2px solid #fff; }
.circuit .info .texto .fecha .niveau { height:35px; padding: 11px 5px; font-size: 8pt; font-weight: 800; }
.circuit .info .texto .fecha .niveau1 { background: #ccc0d9 ; color: #3d3939; text-transform: uppercase;}
.circuit .info .texto .fecha .niveau2 { background: #d99594 ; color: #fff; text-transform: uppercase;}
.circuit .info .texto .fecha .niveau3 { background: #5f497a ; color: #fff; text-transform: uppercase;}
.circuit .info .texto .fecha .niveau4 { background: #ffc000 ; color: #5c3518; text-transform: uppercase;}
.circuit .info .texto .fecha .niveau5 { background: #e36c0a ; color: #fff; text-transform: uppercase;}
.circuit .info .texto .fecha .niveau6 { background: #dd0c0c ; color: #fff; text-transform: uppercase;}
.circuit .info .texto .titulo .mapa { height: 230px; background-position: center; background-repeat: no-repeat;background-size: cover; }
.circuit .info .texto .titulo .mapa .in { height: 230px; padding-top: 75px; background: rgba( 0, 0, 0, 0.5); }
.circuit .info .texto .titulo .mapa .in span { font-size: 30pt; opacity: 0.8 }
.circuit .info .texto .titulo .mapa .in:hover { background: rgba( 0, 0, 0, 0.7); }
.circuit .info .texto .titulo .mapa .in:hover span { opacity: 1 }
.circuit .tinimce-wrap p {font-size: 11pt; line-height: 20pt; font-weight: 300; margin-bottom: 10px; text-align: justify;}
.circuit .info .texto .plus { width: 100%; text-align: center; margin-top: 20px; font-size: 10pt; text-transform: uppercase; padding: 5px 10px; letter-spacing: 1pt; display: inline-block; margin-top: 20px; }
.circuit .info .texto .plus:hover { color: #2d2b28 ; background: #f4f2ef }
.circuit .tab-content .tab-pane { padding-top: 40px }
.circuit .nav-tabs>li.active>a, .circuit .nav-tabs>li.active>a:focus, .circuit .nav-tabs>li.active>a:hover { color: #2d2b28; }
.nav-tabs li { margin-top: 0px; height: 70px; padding-top: 5px; border-left: 2px solid #fff; }
.nav-tabs li a { color: #fff; font-weight: 800; text-transform: uppercase; line-height: 10pt}
.nav-tabs li a i { font-size: 15pt }
.contenido .tinimce-wrap.resultados h2 { margin-bottom: 5px }
.contenido .tinimce-wrap.resultados table tbody tr td p, .contenido .tinimce-wrap.resultados table { margin: 0; padding: 0 }
.contenido .tinimce-wrap.resultados table tbody tr td { padding: 10px 20px }
.contenido .tinimce-wrap.resultados table tbody tr td p { }
.contenido .tinimce-wrap.resultados table tbody tr td p a{ font-weight: 400; font-size: 12pt }
.icono { position: absolute; width: 120px; height: 120px; background-size: cover; background-image: url(../imgs/icon-bg.png); top: -30px ; right: 0px; z-index: 999; padding-top: 22px}
.icono img { width: 70px; height: 70px; }
.noticias .item { height: 270px; margin-bottom: 30px }
.noticias .item .foto { height: 270px; background-size: cover; background-position: center }
.noticias .item .texto { height: 230px; margin-top: -280px; }
.noticias .item .texto .fecha { height: 230px; width: 70px; float: left; margin-left: 175px }
.noticias .item .texto .fecha .mes { padding: 5px 10px; font-size: 12pt }
.noticias .item .texto .fecha .anno { padding: 5px 10px; font-size: 9pt }
.noticias .item .texto .titulo { height: 230px; width: 295px; padding: 20px 15px; font-size: 9pt; float: left; margin-top: 0 }
.noticias .item .texto .titulo .main { font-size: 11pt; text-transform: uppercase; line-height: 13pt; margin-bottom: 20px; }
.noticias .item .texto .titulo a div { font-size: 10pt; text-transform: uppercase; padding: 5px 10px; letter-spacing: 1pt; display: inline-block; margin-top: 20px; }
.noticias .item .texto .titulo a div:hover { color: #2d2b28 ; background: #f4f2ef }
.noticias .item .texto h2 { padding-bottom: 3px; }
.noticias .item .texto p { font-size: 12pt; text-transform: uppercase; margin-top: 10px; color: #fff;}
.noticia p { text-align: justify;}
.noticia h4 { font-size: 25pt; padding:0; margin-bottom: 25px; text-transform: initial; color: #9b9086; font-weight: 800; text-transform: uppercase; margin-top: 20px}
.noticia .foto { height: 400px; margin-bottom: 10px }
.noticia .datos { height: 100px; padding: 0 25px 0px 0 ; margin-bottom: 20px }
.noticia .datos .in { padding: 10px;}
.noticia .datos .in .fecha .mes { padding: 5px 10px; font-size: 12pt ; height: 33px; margin-bottom: 5px}
.noticia .datos .in .fecha .anno { padding: 8px 10px; font-size: 9pt ; height: 33px; margin-bottom: 5px}
.noticia .datos h2 { height: 40px; font-size: 13pt; padding: 10px 15px}
.noticia .datos .in p { text-transform: uppercase; font-size: 10pt; padding: 7px 0 0; font-weight: 400}
.noticia .subtitulo { font-size: 17pt; padding:0; text-transform: initial; font-weight: 400; margin-bottom: 30px; font-style: italic;color: #9b9086;}
.tab-content .in { padding-top: 0 }
.nav-tabs, .nav-tabs li a, .nav-tabs li a:hover, .nav-tabs .active, .nav-tabs .active:hover, .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {border: 0px; background: transparent;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { opacity: 0.5;}
.nav-tabs li { margin-top: 0px;}
.nav-tabs li a .foto { background-position: center; background-repeat: no-repeat;background-size: cover; margin-top: 0px;}
.nav-tabs li a { padding: 10px 0}
.paginador { margin-top: 20px; font-weight: 700 }
.paginador a { color:#fff; }
.paginador .boton { border-right:2px solid #fff ; padding: 7px 15px; background: #9b9086;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;}
.paginador .boton:hover { color: #fff; background: #272626; }
.paginador .active { color: #fff; background: #758931; }
.boton a { border: 2px solid #9b9086; margin-bottom: 25px; font-weight: 700; color: #fff; padding:5px 40px; text-transform: uppercase; font-size: 11pt;display: inline-block; margin-top:20px }
.boton a {
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;}
.boton a:hover {border: 2px solid #9b9086;background-color: #fff; color:#9b9086 }
#map {width: 100%; height: 270px; margin-bottom: 20px }
.contacto input, .contacto textarea { width:100%; background: #e4e4e4; border:0; padding:10px; margin: 10px 0 }
.contacto button { background: #222; border:0; padding:10px 40px; margin: 10px 0 ; text-transform: uppercase; display: inline-block; font-size: 10pt}
.contacto .lead { margin: 0 }
#formulario button {height:40px;margin-bottom: 25px; font-weight: 700; color: #fff; padding:5px 40px; text-transform: uppercase; font-size: 11pt;display: inline-block; margin-top:20px }
#formulario button, #formulario textarea, #formulario input {
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;}
#formulario button:hover {background-color: #9b9086; color:#fff }
#formulario ::-webkit-input-placeholder { color: #222222;}
#formulario :-moz-placeholder { color: #222222; opacity: 1; }
#formulario ::-moz-placeholder { color: #222222; opacity: 1; }
#formulario :-ms-input-placeholder { color: #222222; }
#copyright {height:40px;padding:13px 0px;width:100%; font-size:8pt; }
#copyright a{color:#9b9086}
#copyright a:hover{color:#9b9086}
.menu ul {margin: 0; padding: 0; padding-top: 20px}
.menu ul li { list-style: none; display: inline-block; font-size: 10pt; font-weight: 400;letter-spacing: 1pt; border-bottom: 0px solid transparent; color: #2d2b28; margin:15px 14px 0px 13px; padding-bottom: 20px ; text-transform: uppercase ; line-height: 11pt;}
.menu ul li:first-child { margin-left:0px; }
.menu ul li a {height: auto; color: #2d2b28; display: block;}
.menu ul li:hover { border-bottom: 5px solid #9b9086; padding-bottom: 32px ; }
.menu ul li:hover a { color: #2d2b28; }
.menu ul .active { border-bottom: 5px solid #9b9086; padding-bottom: 32px ; }
.menu ul .active a { color: #9b9086; }
.menu ul li ul { border-top: 5px solid #9b9086; padding-top: 0; top: 50px }
.menu ul li ul li { font-size: 10pt; font-weight: 400;letter-spacing: 1pt; color: #2d2b28; margin:0; padding-bottom: 0px ;}
.menu ul li ul li:hover { border-bottom: 0px solid #9b9086; padding-bottom: 20px ; }
#cssmenu {
margin: 0;
padding: 0;
line-height: 1;
display: block;
position: relative;
}
#cssmenu ul:after,
#cssmenu:after {
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
position: relative;
}
#cssmenu ul li a {
text-decoration: none;
display: block;
margin: 0;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li ul {
position: absolute;
left: -9999px;
}
#cssmenu ul li ul li {
max-height: 0;
position: absolute;
-webkit-transition: max-height 0.4s ease-out;
-moz-transition: max-height 0.4s ease-out;
-ms-transition: max-height 0.4s ease-out;
-o-transition: max-height 0.4s ease-out;
transition: max-height 0.4s ease-out;
background: #ffffff;
}
#cssmenu ul li ul li.has-sub:after {
display: block;
position: absolute;
top: 13px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
right: auto;
left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
display: block;
position: absolute;
content: "";
height: 0;
width: 0;
border: 3px solid transparent;
border-left-color: #ffffff;
z-index: 2;
top: 15px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
right: auto;
left: 15px;
border-left-color: transparent;
border-right-color: #ffffff;
}
#cssmenu ul li ul li a, #cssmenu ul li ul li ul li a {
text-transform: uppercase;
display: block;
width: auto;
text-align: left;
height: auto;
padding: 11px 10px 11px 20px;
margin: 0;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
background: #9b9086; color: #fff;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
background: #692f43;
}
#cssmenu ul li ul li:hover > ul {
left: 100%;
top: 0;
}
#cssmenu ul li ul li:hover > ul > li {
max-height: 72px;
position: relative;
}
#cssmenu > ul > li:after {
display: block;
position: absolute;
width: 100%;
height: 0;
top: 0;
z-index: 0;
background: #ffffff;
-webkit-transition: height .2s;
-moz-transition: height .2s;
-ms-transition: height .2s;
-o-transition: height .2s;
transition: height .2s;
}
#cssmenu > ul > li.has-sub > a:after {
display: block;
background: #ffffff;
height: 12px;
width: 12px;
position: absolute;
border-radius: 13px;
right: 14px;
top: 16px;
}
#cssmenu > ul > li.has-sub > a:before {
display: block;
z-index: 2;
height: 0;
width: 0;
position: absolute;
right: 16px;
top: 21px;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
height: 100%;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
border-top-color: #ffffff;
}
#cssmenu > ul > li:hover > ul {
left: 0;
}
#cssmenu > ul > li:hover > ul > li {
max-height: 72px;
position: relative;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu > ul > li > a {
display: block;
}
#cssmenu > ul > li {
width: auto;
}
#cssmenu > ul > li > ul, #cssmenu > ul > li > ul > li > ul {
margin-top:0px;
min-width: 173px;
margin-left: -25px;
width: auto;
display: block;
z-index: 9999;
}
#cssmenu > ul > li > ul > li, #cssmenu > ul > li > ul > li > ul > li {
padding: 0;
width: auto;
display: block;
}
@media (min-width: 1080px) {
}
@media (max-width: 1199px) {
.menu ul li { font-size: 10pt; margin:15px 7px 0px 7px; }
.menu p { padding: 40px 10px 0; }
.menu p i { padding: 0 5px 0 10px }
.actividades .item p { font-size: 10pt;letter-spacing: 1pt}
.circuits .item .texto .fecha { margin-left: 120px }
.circuits .item .texto .titulo { width: 720px; }
.circuits .item .texto .titulo .main { max-width: 400px; }
.contenido .tinimce-wrap p {font-size: 11pt; line-height: 18pt; }
.contenido .foto { height: 327px; }
.contenido .nav-tabs .foto { height: 51px }
.sticky { width: 303px;}
.noticias .item .texto .fecha { margin-left: 145px }
.noticias .item .texto .titulo { width: 240px; }
.derniers .texto .fecha { margin-left: 145px }
.derniers .texto .titulo { width: 240px; }
}
@media (max-width: 991px) {
.menu ul li { font-size: 9pt; margin:15px 7px 0px 7px; }
.menu p { padding: 40px 10px 0; }
.menu p i { padding: 0 5px 0 10px }
.actividades .item img { margin-bottom: 10px; padding: 10px; width: 100% }
.actividades .item p { font-size: 8pt;letter-spacing: 0pt}
.circuit .info .texto .fecha .jours { height:35px; padding: 6px 10px; font-size: 9pt; font-weight: 400; border-bottom: 2px solid #fff; }
.circuit .info .texto .fecha .niveau { height:35px; padding: 5px; font-size: 7pt; font-weight: 800; }
.circuits .item .texto .fecha { margin-left: 60px }
.circuits .item .texto .titulo { width: 560px; }
.noticias .item .texto .fecha { margin-left: 90px }
.noticias .item .texto .titulo { width: 185px; }
.derniers .texto .fecha { margin-left: 90px }
.derniers .texto .titulo { width: 185px; }
.circuits .item .texto .titulo .main { max-width: 270px; }
.sticky { width: 229px;}
.contenido .fotos-carro .tab-content .foto { height: 345px; }
.contenido .fotos-carro .nav-tabs .foto { height: 51px; }
.contenido .fotos-carro .nav-tabs li { height: 51px; }
.contenido .fotos-galeria .tab-content .foto { height: 407px; }
.contenido .fotos-galeria .nav-tabs .foto { height: 64px; }
.contenido .fotos-galeria .nav-tabs li { height: 64px; }
.contenido .tinimce-wrap p {font-size: 10pt; line-height: 15pt; }
.contenido .tinimce-wrap ul {font-size: 10pt; line-height: 15pt; }
.contenido .foto { height: 248px; }
.contenido .nav-tabs .foto { height: 38px }
.carritos .datos .in h5 { height: auto; font-size: 9pt; padding: 5px 10px; border: 2px solid #9b9086; margin-bottom: 7px; margin-left: 7px; margin-top: 0; text-transform: uppercase; display: inline-block;}
.index .noticias .row .item:nth-child(4) { display: none; }
}
@media (max-width: 767px) {
.container { max-width: 320px; }
.foot .buscador { margin-top: 50px; }
.head { height: 560px; padding: 0; }
.actividades .item { margin-top: 20px; }
.actividades .item img { margin-bottom: 10px; padding: 10px; width: 100% }
.actividades .item p { font-size: 7pt;letter-spacing: 0pt}
.slide .item { padding-top: 30px }
.slide .slick-dots { bottom: 160px}
.slide .item p { font-size: 17pt; line-height: 18pt}
.destinations p { font-size: 15pt; }
.destinations { height: 50px; margin-top: -240px; }
.circuits .item .texto .fecha { margin-left: 60px }
.circuits .item .texto .titulo { width: 560px; }
.circuits .item { height: auto; margin-bottom: 30px }
.circuits .item .foto { height: 180px;}
.circuits .item .texto { height: 230px; margin-top: 0px; }
.circuits .item .texto .fecha { height: 170px; width: 100px; margin-left: 10px; margin-top: -170px }
.circuits .item .texto .titulo { width: 290px; }
.circuits .item .texto .titulo .main { font-size: 14pt; margin-bottom: 4px; }
.circuits .item .texto .titulo .pais { font-size: 14pt; margin-bottom: 4px; }
.circuits .item .texto .titulo .periodo { font-size: 11pt; margin-bottom: 10px; }
.circuits .item .texto .titulo a div { font-size: 10pt; text-transform: uppercase; padding: 5px 10px; letter-spacing: 1pt; display: inline-block; margin-top: 20px; }
.circuits .item .texto .titulo a div:hover { color: #2d2b28 ; background: #f4f2ef }
.circuits .item .texto h2 { padding-bottom: 3px; }
.circuits .item .texto .plus { position: absolute; right: 20px; bottom: 20px }
.circuits .item .texto .categoria { font-size: 10pt; font-weight: 800; padding: 5px 10px; display: inline-block; color: #758931 }
.circuits .item .texto .titulo .grad { width: 100%; height: 80px; margin-top: 30px; background: url(../imgs/grad.png) repeat-x; position: relative;}
.noticias .item { height: auto;}
.noticias .item .foto { height: 180px; margin: 0 }
.noticias .item .texto { height: 230px; margin-top:0px; }
.noticias .item .texto .fecha { height: 170px; width: 70px; margin-left: 10px; margin-top: -170px }
.noticias .item .texto .titulo { width: 100%; }
.noticias .item .texto .titulo .main { font-size: 10pt; }
.derniers { height: auto; padding: 0; margin: 30px 0 }
.derniers .foto { height: 180px; margin: 0 }
.derniers .texto { height: 230px; margin-top:0px; }
.derniers .texto .fecha { height: 170px; width: 70px; margin-left: 10px; margin-top: -170px }
.derniers .texto .titulo { width: 100%; }
.derniers .texto .titulo .main { font-size: 10pt; }
.noticia .subtitulo { font-size: 11pt; }
.logo-in { text-align: center }
.logo-in img { width: 150px}
.titulo h2 { font-size: 16pt; padding-left: 10px}
.titulo2 h2 { font-size: 16pt; padding-left: 10px; padding-right: 10px}
.foot { height: auto ; padding-bottom: 40px; background-image: url(../imgs/bg-foot.jpg) ; background-size: cover; background-position: top center }
.foot .logo-foot { height: 150px ; padding-top: 70px}
.foot .datos-foot { padding-top: 20px; padding-bottom: 40px}
.interna.foto { height: 300px; background-position: top center; background-repeat: no-repeat; background-attachment: initial ; background-size: cover; margin-bottom: 0px; }
.interna.logo { min-height: 170px; height: auto; margin-top: -170px; padding: 15px 25px 0; }
.interna.logo-in { height: 170px; padding: 5px 0 }
.icono { width: 100px; height: 100px; top: -20px ; padding-top: 25px}
.icono img { width: 50px; height: 50px; }
.circuit .info .texto .fecha .jours { height:35px; padding: 6px 10px; font-size: 11pt; font-weight: 400; border-bottom: 2px solid #fff; }
.circuit .info .texto .fecha .niveau { height:35px; padding: 11px 5px; font-size: 8pt; font-weight: 800; }
.menu-min {margin:0 ;}
.menu-min .panel{border-bottom: 0px solid rgba(255, 255, 255, 0.4); border-radius: 0}
.menu-min .panel-heading {padding:10px 0 !important; }
.menu-min .panel-heading h4{ font-size: 12pt; font-weight: 800}
.menu-min ul{margin:0; padding:0px; list-style: none; border-top: 1px solid rgba( 255, 255, 255, 0.6) ; text-align: left}
.menu-min ul li { height:auto; padding:5px 10px; float: none; font-size:10pt; border: 0; border-bottom: 1px solid rgba( 255, 255, 255, 0.5); margin:0; display: block; font-weight: 800}
.menu-min ul li ul li { font-weight: 300 }
.menu-min ul li:hover { border: 0px ; border-bottom: 1px solid rgba( 255, 255, 255, 0.5); color: #9b9086; margin: 0px; padding:5px 10px;}
.menu-min ul li:hover a{color:#9b9086; }
.menu-min ul li a{color: #9b9086; }
.menu ul .active { border-bottom: 1px solid rgba( 255, 255, 255, 0.5); padding:5px 10px; }
.panel {background: none;-webkit-box-shadow: none; box-shadow: none;}
.panel-default{border: 0}
.collapse.in {border: 0}
.panel-body {padding: 10px 0 5px; border-top: 1px solid #231f20}
.panel-body p {font-size: 11pt}
.panel-group .panel-heading+.panel-collapse>.panel-body{border-top: 0px; position: relative;z-index: 999; background: #f4f2ef}
.panel-title {font-size: 18pt;padding:10px 20px;}
.panel-default>.panel-heading{background: none;padding:5px 0;text-align: left;}
.panel-default>.panel-heading h3{font-weight: 700}
.contenido h2 { height: auto; display: inline-block; margin-bottom: 20px; font-size:18pt;}
.contenido h3 { font-size:11pt;}
.noticia h4, .carritos h4 { margin-top: 0px; font-size: 18pt}
.contenido h1 { font-size:18pt ; height: auto; padding:8px 12px; margin-bottom: 15px}
.contenido .tinimce-wrap h1 { font-size: 20pt; padding:0; margin-bottom: 25px; text-transform: initial; color: #9b9086}
.contenido .tinimce-wrap h2 { font-size: 15pt; padding:0; margin-bottom: 25px; text-transform: initial; color: #9b9086; font-weight: 300; height: auto }
.contenido .tinimce-wrap h3 { font-size: 12pt; }
.contenido .tinimce-wrap h4 { font-size: 12pt; padding:0; margin-bottom: 25px; text-transform: initial; color: #9b9086; font-weight: 800; height: auto; display: inline-block; }
.contenido .tinimce-wrap h5 { font-size: 12pt; padding:0; margin-bottom: 25px; text-transform: initial; font-weight: 300; height: auto; font-style: italic;}
.contenido .tinimce-wrap h6 { font-size: 9pt; padding:0; margin-bottom: 25px; text-transform: initial; height: auto}
.contenido .tinimce-wrap p { font-size: 9pt; line-height: 15pt; font-weight: 300; margin-bottom: 25px}
.contenido .tinimce-wrap p strong, .contenido .tinimce-wrap p b {font-weight: 800}
.contenido .tinimce-wrap p img { max-width: 100%; height: auto; }
.contenido .tinimce-wrap p a { color:#9b9086; font-weight: 700; padding:1px 2px;
-webkit-transition: all 0.1s linear 0s;
transition: all 0.1s linear 0s;}
.contenido .tinimce-wrap p a:hover { color:#fff; background: #9b9086; }
.contenido .tinimce-wrap ul { list-style-type: none;font-size: 9pt; line-height: 15pt; font-weight: 300; margin-bottom: 25px }
.contenido .tinimce-wrap ol { font-size: 9pt; line-height: 18pt; font-weight: 300; margin-bottom: 25px }
.contenido .tinimce-wrap ul li:before { content: ""; margin-right: 10px; display: inline-block; width: 7px; height: 7px; background-color: #9b9086; border-radius: 50%; margin-bottom: 2px;}
.contenido .tinimce-wrap .rrssb-buttons li:before { display: none }
.contenido .tinimce-wrap .foto { height: 300px; background-position: center center; background-repeat: no-repeat;background-size: cover; margin-bottom: 40px; }
.contenido .tinimce-wrap .galeria .item {height:80px; opacity: 0.8; padding: 0; margin-bottom: 10px; overflow: hidden;
-webkit-transition: opacity 0.3s linear 0s;
transition: opacity 0.3s linear 0s;}
.contenido .tinimce-wrap .galeria .item .foto {height:100%; margin-bottom: 0; display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.contenido .tinimce-wrap .galeria .item:hover {opacity: 1}
.contenido .fotos-carro .tab-content .foto { height: 290px; margin-bottom: 10px }
.contenido .fotos-carro .nav-tabs .foto { height: 40px; margin-bottom: 10px }
.contenido .fotos-carro .nav-tabs li { height: 40px; margin-bottom: 10px }
.contenido .fotos-galeria .tab-content .foto { height: 290px; }
.contenido .fotos-galeria .nav-tabs .foto { height: 64px; }
.contenido .fotos-galeria .nav-tabs li { height: 64px; }
#formulario div:nth-child(1) {padding:0 0px 20px 0}
#formulario div:nth-child(2) {padding:0 0px 20px 0}
#formulario div:nth-child(3) {padding:0 0px 20px 0}
#formulario div:nth-child(4) {padding:0 0 20px}
#formulario div:nth-child(5) {padding:0 0 20px}
#formulario div:nth-child(6) {padding:0 0 20px}
#formulario .sepxl {height:3px;padding: 0}
#formulario .sepxl div {height:100%;padding: 0}
.menu .head .logo {margin-left: -100px;margin-top: 0px}
.menu .head {height: 200px;padding-top: 50px;}
.novedades .texto {min-height: 10px; padding:10px 10px 0;}
.novedades .texto h4 {font-size: 12pt;}
.menu .head img { width:200px }
.pagination span {font-size: 10pt;font-weight: 700;}
#footer {}
#footer p {line-height: 25pt;font-size: 10pt}
#copyright {font-size:7pt;}
.contenido .galeria .item .foto {height:70px; }
.nav-tabs li { border-bottom: 2px solid #fff;}
}
#myModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
#myModal .modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Add Animation - Zoom in the Modal */
#myModal .modal-content {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.modal-close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.modal-close:hover,
.modal-close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
#myModal .modal-content {
width: 100%;
}
}