/* mexitlan https://www.figma.com/resource-library/website-color-schemes/ */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body
{
margin:0;
padding:0;

background:#FFF7E3;

color:#333;
font-family:sans-serif;

box-sizing:border-box;
}







header
{

}

footer
{
background:#069494;

min-height:300px;
}




/* icon */
.mailicon
{
background:white;
color:grey;
text-align:center;
border-radius:50%;
height:100px;
width:100px;
}




/* divs */
#content
{
width:100%;
margin:auto;
max-width:1200px;
background:white;
}

.innercont
{
max-width:1200px;
width:96%;
margin:auto;

}



.next
{
display:inline-block;
}

.player
{
font-family:Poppins;
font-weight:600;
font-family: "Segoe UI";

background:black;
background:#161F2C;
color:white;
max-width:250px;
padding:5px;

border:0px solid white;
border-radius:5px;
}




.center
{
margin:auto;
text-align:center;
}

.center300
{
max-width:300px;
margin:auto;
text-align:center;
}




.loading
{
color: #888; 
font-style: italic;
}

.clear
{
clear:both;
}

.col2
{
display:inline-block;
vertical-align:top;
width:48%;
}

.col3
{
display:inline-block;
vertical-align:top;
width:32%;
}


/* a */
a
{
text-decoration:none;
}



/* bands    divs with content dont auto expand */

.banner
{
width:100%;
background:green;
min-height:50px;
color:white;

font-size:28px;
font-weight:600;

line-height:50px;
}

.band
{
text-align:left;

vertical-align:top;
display:inline-block;
width:48%;
min-height:200px;
border-radius:10px;
box-sizing:border-box;
}


@media screen and (max-width:600px)
{
.band
{
width:100%;
}
}

.blackband
{
background:black;
color:white;
}

.redband
{
background:#B50804;
color:white;
}

.orangeband
{
background:#F98800;
color:white;
}

.oliveband
{
background:#85860F;
color:white;
}

.beigeband
{
background:#e7d8c9;
color:white;
}

.tanband
{
background:#c8a07a;
color:white;
}

.brownband
{
background:#8f6b4f;
color:white;
}

.drabpurpleband
{
background:#3E4079;
color:white;
}

.limeband
{
background:#87D37C;
color:white;
}

.dodgerblueband
{
background:#2B8FEF;
color:white;
}

.drabcyanband
{
background:#83BCC3;
color:white;
}

.pinkband
{
background:#FE6FC7;
color:white;
}








/* nodes */
.node
{
text-align:left;

vertical-align:top;
display:inline-block;
width:48%;
min-height:200px;
border-radius:0px;
box-sizing:border-box;

transition:0.2s;
}

.node:hover
{
transform:scale(1.025);
}

@media screen and (max-width:600px)
{
.node
{
width:100%;
}
}

.blacknode
{
background:black;
color:white;
}

.rednode
{
background:#B50804;
color:white;
}

.orange
{
background:#F98800;
color:white;
}

.olivenode
{
background:#85860F;
color:white;
}

.beigenode
{
background:#e7d8c9;
color:white;
}

.tannode
{
background:#c8a07a;
color:white;
}

.brownnode
{
background:#8f6b4f;
color:white;
}

.drabpurplenode
{
background:#3E4079;
color:white;
}

.limenode
{
background:#87D37C;
color:white;
}

.dodgerbluenode
{
background:#2B8FEF;
color:white;
}

.drabcyannode
{
background:#83BCC3;
color:white;
}

.pinknode
{
background:#FE6FC7;
color:white;
}

.dodgerblue
{
background:#248afd;
}





/* tropical heat */
.tropheatcyan
{
background:#00cec8;
color:white;
}

.tropheatcream
{
background:#fcefc3;
color:white;
}

.tropheatpeach
{
background:#ff9c5f;
color:white;
}

.tropheatorange
{
background:#eb4203;
color:white;
}

/* tropical punch */
.troppunch
{
}

.troppunch
{
}

.troppunch
{
}

.troppunchcyan
{
background:#069494;
color:white;
}

/* tropjade */










/* img */
img
{
display:block;
}

.fit
{
width:100%;
max-width:100%;
}

.mapsymbol
{
transition:.2s;
}
.mapsymbol:hover
{
transform:scale(1.5);
}



.ofc100
{
object-fit:cover;
height:100px;
width:100px;
}

.ofc200
{
object-fit:cover;
height:200px;
width:200px;
}










/* input */
input
{
padding:9px;
border-radius:5px;
border:0px solid black;
}

select
{
padding:9px;
border-radius:5px;
border:0px solid black;
}

textarea
{
padding:9px;
border-radius:5px;
border:0px solid black;
}

input[type=radio]
{

height:2em;
}

input[type=checkbox]
{
transform:scale(2.5);
}








/* menu */
#menucont
{
width:100%;
/*
background-color:#4C0082;*/
background-color:#f9d779;
}



ul {
list-style-type: none;
margin:0;
padding:0;
overflow:hidden;
/*background-color:#4C0082;*/
background-color:#f9d779;
color:black;
font-size:20px;
}

li 
{
float: left;
}

li a, .dropbtn 
{
display:inline-block;
padding:12px;
color:black;
text-align:center;

text-decoration:none;
}

li a:hover, .dropdown:hover .dropbtn 
{
background-color:green;
color:white;
}

li.dropdown 
{
display:inline-block;
}

li>a:after 
{ 
content:' ▼'; 
}

li>a:only-child:after 
{ 
content:''; 
}






/* dropdown*/
.dropdown-content 
{
display: none;
position: absolute;
/*background-color: #4C0082;*/
background:white;

min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a 
{
color:black;
padding:12px 16px;
text-decoration:none;
display:block;
text-align:left;
}

.dropdown-content a:hover 
{
background-color: red;
color:white;
}

.dropdown:hover .dropdown-content 
{
display: block;
}
















/* sidenav */
#sidenav
{
display:none;
}
/* Fixed sidenav, full height */
.sidenav 
{


height:100%;
width:200px;
position:fixed;
z-index:1;
top:0;
left:0;
background:white;
overflow-x:hidden;
padding-top:20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a,.dropdown-btn 
{
padding:6px 8px 6px 16px;
text-decoration:none;
font-size:22px;

display:block;
border:none;

width:100%;
text-align:left;
cursor:pointer;
outline:none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover 
{
color: #f1f1f1;
}







/* Add an active class to the active dropdown button */
.active 
{
background-color:green;
color:white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container 
{
display:none;
background-color:#262626;
padding-left:8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down 
{
float: right;
padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) 
{
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}







/* buttons */
.button
{
display:inline-block;
color:white;
padding:9px;
font-size:18px;
transition:0.2s;
}

.button:hover
{
transform:scale(1.05);
}

.black
{
background:black;
}

.red
{
background:red;
}









/* text */
.spa-link
{
font-size:28px;
}

.f32
{
font-size:32px;
}

.f36
{
font-size:36px;
}

.f48
{
font-size:32px;
}



.b
{
color:black;
}

.w
{
color:white;
}

.anton
{
font-family:Anton;
}

.poppins2
{
font-family:Poppins;
font-weight:700;
font-size:2vw;
}

.detail
{
color:grey;
font-size:0.8vw;
}

@media screen and (max-width:600px) 
{
.detail
{
font-size:4vw;
}
}

.detailw
{
color:white;
font-size:0.8vw;
}

@media screen and (max-width:600px) 
{
.detailw
{
font-size:4vw;
}
}










  .widget{
    width:300px;
    background: linear-gradient(160deg, var(--panel), var(--panel-2));
background:#161F2C;
    border:1px solid var(--line);
    border-radius:18px;
    padding:22px 24px;
    color:var(--text);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6);
    box-sizing:border-box;

color:#e9edf3;
  }
  .row-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }
  .time{
    font-size:40px;
    font-weight:600;
    letter-spacing:0.5px;
    line-height:1;
    font-variant-numeric: tabular-nums;
  }
  .time span.sec{
    font-size:18px;
    color:var(--dim);
    font-weight:500;
    margin-left:2px;
  }
  .date{
    margin-top:6px;
    font-size:13px;
    color:var(--dim);
    letter-spacing:0.3px;
  }
  .icon{
    width:46px;
    height:46px;
    flex-shrink:0;
  }
  .divider{
    height:1px;
    background:var(--line);
    margin:16px 0 14px;
  }
  .row-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .temps{
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  .temp-c{
    font-size:26px;
    font-weight:600;
  }
  .temp-f{
    font-size:14px;
    color:var(--dim);
  }
  .desc{
    text-align:right;
  }
  .desc .label{
    font-size:13px;
    color:var(--text);
  }
  .desc .place{
    font-size:11px;
    color:var(--dim);
    margin-top:2px;
  }
  .loading, .err{
    font-size:12px;
    color:var(--dim);
  }