@charset "utf-8";
/* VAR */
:root {
    --gray: #EDEDED;
    --links: #EC7063;
    --text-color: #424949;
    --text-gray-color: #ABB2B9;
}

/* Main */
* {
    
    font-family: 'Raleway', sans-serif;
    overflow-x: hidden;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
}

body > .line:nth-of-type(4) {
    display: none;
}

main {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;

}

/* SHARED */
.line {
    margin: 15px 0px 0px 0px;
    width: 100vw;
    height: 1px;
    background-color: var(--gray);
}

.NavMenu, .articles, .post, .listOfPlaces > div {
    max-width: 1000px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

h1,h2,h3,h4,h5,h6,p {
    -webkit-font-smoothing: antialiased !important;
    -moz-font-smoothing: antialiased !important;
    text-rendering: optimizelegibility !important;
    letter-spacing: .03em;
}

.post p, .listOfPlaces p {
    line-height: calc(1ex / 0.32);
    font-size: 1em;
    margin: calc(1ex / 0.32) 0;
    color: var(--text-color);
}

/* HEADER */
.logo {
    width: 200px;
    height: auto;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient:  vertical;
    -webkit-box-direction:  normal;
        -ms-flex-flow:  column nowrap;
            flex-flow:  column nowrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

header span {
    font-size:.8rem;
}

header i {
    padding-top: 1px;    
    font-size: 0.7rem;
    color: var(--text-gray-color);
}

.HeaderLanguageSelected {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient:  horizontal;
    -webkit-box-direction:  normal;
        -ms-flex-flow:  row nowrap;
            flex-flow:  row nowrap;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    gap: .3rem;
    background-color: var(--gray);
    border-radius: 25px;
    color: var(--text-color);
    padding: .3rem;
    border: 1px solid var(--gray);
}

.HeaderLanguageSelected:hover {
    cursor: pointer;
}

.HeaderLanguageSelected img, .HeaderLanguageOptions img {
    width: 15px;
}


.HeaderLanguageOptions {
    position:absolute;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height:100px; 
    border-radius: 10px;
    margin-top: 10px;
    border: 1px solid var(--gray);
    overflow: hidden;
    background-color: white;
    width: 60px;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    visibility: hidden;
}


.HeaderLanguageSelectedClicked {
   border: 1px solid var(--links);
}



.HeaderLanguageOptions div {
   width: 100%;
   border-bottom: solid 1px var(--gray);
   text-align: center;
   padding-bottom: 3px;
}


.HeaderLanguageOptions div:nth-child(3)  {
    border-bottom: solid 1px white !important;
}


/* NAV */

.burgerIcon {
    max-width:30px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.burgerIcon ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 5px;
    margin-top: 20px;
}

.burgerIcon li {
    width: 30px;
    height: 3px;
    border-radius: 35px;
        background-image: linear-gradient(to left, #ff4d74, #ffac4e, #fff44d, #4cff99, #4eaffe, #8e4dff) !important;
    margin: 2px 0;  
}

.btnMenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    padding: .3rem .6rem .3rem .6rem;
    width:-webkit-fit-content;
    width:-moz-fit-content;
    width:fit-content;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 1px solid var(--gray);
    border-radius: 25px;
    gap: .3rem;
    cursor: pointer;
}

.btnMenu:hover {
    background-color:var(--gray);
    -webkit-transition: background-color 0.1s 0s ease-in;
    -o-transition: background-color 0.1s 0s ease-in;
    transition: background-color 0.1s 0s ease-in;
}

.btnMenu div:hover {
    cursor: pointer;
}

.cloudMenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    gap: 1rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 0.9rem
}

.NavButIcon {
    width: 1.5rem;
    height: auto;
}

.NavLanguages {
    width: 1.5rem;
    height: auto;
}

.languages-div {
    margin-bottom: 15px;
}

.navCloseIcon {
    margin-top: .4rem;   
}

#NavLanguages {
  opacity: 1;
  -webkit-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}

#NavLanguages.hide {
    opacity: 0;
}

#NavMenu.show {
    max-height:200px;
    -webkit-transition: max-height 0.5s ease-in;
    -o-transition: max-height 0.5s ease-in;
    transition: max-height 0.5s ease-in;
}

#NavMenu.hide {
    max-height:0;
    -webkit-transition: max-height 0.5s ease-out;
    -o-transition: max-height 0.5s ease-out;
    transition: max-height 0.5s ease-out;  
}

/* IMAGEN HEADER */

.imagenHeader, .imagenHeader img {
    min-height: calc(30vh+30px);
    width: 100vw;
    height: calc(30vh+30px);
    max-height: 50vh;

}

.imagenHeader {
    position:relative;
    text-align: center;
}

.imagenHeader img  {
    -o-object-fit:cover;
    object-fit:cover;
    display: block;
}

.imagenHeader div {
    position:absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.imagenHeader h1, .imagenHeader h2 {
    text-shadow: 1px 1px 2px #17202A;
    color: white;
}   

.imagenHeader div h1 {

    font-size:6vh;
    font-weight: 500;
}

.imagenHeader div h2 {
    font-size: 3vh;
    font-style: italic;
}

/* SHARED: POST & ARTICLES */

.post, .articles div {
    padding: 1rem;
}


/* POST */

.post {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.post h1 {
    font-size: 2.5em;
    line-height: calc(1ex / 0.42);
    margin: calc(1ex / 0.42) 0;
}

.post h2 {
    font-size: 1.5em;
}

.post h6 {
    font-size: 0.7rem;
}

    /*SHARED */

.post strong {
    font-weight:500;
}

.post a {
    color: var(--links);
    text-decoration:underline;
    
}

.post a:hover {
   background-color: var(--links);
   color: black;
}

/* ARTICLES */

.articles {
    border-radius: 10px;
    display: -webkit-box;  
    display: -ms-flexbox; 
    display: flex;  
    -webkit-box-orient: horizontal;  
    -webkit-box-direction: normal;  
        -ms-flex-flow: row wrap;  
            flex-flow: row wrap;
    -webkit-box-pack: flex-start;
        -ms-flex-pack: flex-start;
            justify-content:flex-start;
    border: 1px solid white;
}

.articles div:hover {
    border:  var(--gray);
}

.articles div img {
   border-radius: 10px; 
   max-width:  calc((100vw/2)-10px);
   width: 300px;
   padding-bottom: .3rem;
}

.articles h4 {
    font-size: .9rem;
}

.articles a > h4 {
    color: var(--links);
    text-decoration:underline;
}

.articles  a > h4:hover {
    background-color: var(--links);
    color: black;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}


/* LIST OF PLACES */

.listOfPlaces>div, .listOfPlaces div img {
    width: 95vw;
}

.listOfPlaces {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
            flex-flow: column wrap;
    gap: 2rem;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
            align-items: center;
}


.listOfPlaces > div {
    border: 1px solid var(--gray);
    border-radius: 10px;  
    padding: .5rem;  
    display: -webkit-box;  
    display: -ms-flexbox; 
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.5rem;
}

.listOfPlaces div img {
    border-radius: 10px;
    min-width: 200px;
    min-height: 200px;
    max-height: 500px;
    -o-object-fit: cover;
       object-fit: cover;

}

.listOfPlaces div h1 {
    font-size: 1.6rem;
    font-weight: 500;
    padding-bottom: 7px;    
}

.listOfPlaces div h4 {
    font-size: .8rem;
    color: var(--text-color);
    padding-bottom: 7px;
    background-color: var(--gray);
    padding: 3px 10px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 25px;
    margin-bottom: 10px;
}

.listOfPlaces div h5 {
    color: var(--links);
    margin-top: 10px;
    margin-bottom: 10px;
}

.listOfPlaces div h5 a {
    text-decoration: underline;
}

.listOfPlaces div h5 a:hover {
    background-color: var(--links);
    color: black;
} 

.listOfPlaces div p {
    color: var(--text-color);
    font-size: 1rem;
    padding-top: 10px;
}

.listOfPlaces div p a {
    color: var(--links);
}

.listOfPlaces div p a:hover {
    background-color: var(--links);
    color: black;
    cursor: pointer;
}


.listOfPlaces .aditonalLinks a{
    font-size: 2rem;
    color: var(--links);
    margin: 0px 10px;
    cursor: pointer;
}

.listOfPlaces iframe {
    max-width: 1000px;
    width: 90vw;
    border-radius: 25px;
    border: 1px solid var(--gray);
}

/* FOOTER */

footer {
    max-width: 100vw;
    min-width: 100vw;
    background-color: var(--gray);
    padding: 3rem;
}

.footerContainer {
    width: 1000px;
    display: -webkit-box;  
    display: -ms-flexbox; 
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    gap: 1rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content:space-between;
    margin-left: auto;
    margin-right: auto;
}

.footerLogo {
    width: 150px;
    height: auto;
    display: inline-block
}

.footerSocialNetworks {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.footerSocialNetworks i {
    font-size: 1.8rem;
    margin-right: 1rem;
    padding-top: 2px;
    padding-right: 2px;
}

.footerSocialNetworks a {
    color: var(--text-color);
    cursor: pointer;
}  

.footerSocialNetworks a:hover {
    color: var(--links);
    text-decoration: none;   
}

.footerSiteMaps  {
    display: flex;
    flex-flow: row wrap;
    gap: 0.9em;
}
.footerLine {
    height: 1px;
    width: 100vw;
    background-color: #cdcdcd;
    margin-top: 1em;
    margin-bottom: 1.5em;
}

.footerCategoryTitle {
    font-weight: bold;
    font-size: 0.9em;
    color: black;
}

.footerSiteMaps div {
    width: 300px;
}

.footerSiteMaps a {
    display: block;
    font-size: 0.9em;
    color: var(--text-color);
    cursor: pointer;
    margin-top: 0.4rem;
}

.footerSiteMaps a:hover {
    color: white;
    background-color: var(--links);
    text-decoration: none;
}

.footerContactLink  {
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.8rem;
}
 .footerContactLink:hover {
    color: white;
    background-color: var(--links);
    text-decoration: none;
}

.logoFooter {
    text-align: center;
    display: flex;
    flex-flow: column;
    column-gap: inherit;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
}

/* OTHERS */

.fa-triangle-exclamation {
    color: orange;
}

.rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 30px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}



.rating .webOpinions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    text-align: center;

}

.webOpinions {
    color: var(--text-color);
    border-radius: 10px;
    width: 300px;
    height: 125px;
    padding: 5px;
    border: 1px solid var(--gray);
}

.webOpinions:hover {
    background-color: var(--links);
}

.webOpinions .brand {
    font-size: 1em;
    
}

.webOpinions .score {
    line-height: calc(1ex / 0.32);
    font-size: 2em;
}

.webOpinions .votes {
    line-height: calc(1ex / 0.32);
    font-size: .7em;
}

.webOpinions {
    text-decoration: none;
}

.webOpinions:hover {
    color: white;
}

.carateristicas span {
    margin-right: 10px;
    background-color: var(--gray);
    border-radius: 10%;
    padding: 1px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
}

.carateristicas .fa-solid {
    font-size: 14px;
    color: green;
}

.fa-circle-exclamation {
    color: red;
}

.fa-mountain-sun , .fa-face-smile {
    color:seagreen;
}