@font-face {
    font-family: 'Cera';
    src: url('fonts/Cera GR Black Italic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Cera';
    src: url('fonts/Cera GR Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Cera';
    src: url('fonts/Cera GR Bold Italic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}



@font-face {
    font-family: 'Cera';
    src: url('fonts/Cera GR Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Cera';
    src: url('fonts/Cera GR Light Italic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Cera';
    src: url('fonts/Cera GR Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Cera';
    src: url('fonts/Cera GR Medium Italic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Cera';
    src: url('fonts/Cera GR Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Cera';
    src: url('fonts/Cera GR Regular Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Cera';
    src: url('fonts/Cera GR Thin Italic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Cera';
    src: url('fonts/Cera GR Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Cera';
    src: url('fonts/Cera GR.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

  
  html,body {background:#111111;
  margin:0;
  height:100%;
  width:100%;
  padding:0;
  color:#fff;
  font-family: 'Cera', sans-serif;}
  
  /* cfcdc8 */
  
  .spot-header{width:100%;
  text-align: center;
    border-bottom:1px solid #fff;

  height:auto;}
  
  .content-section {width:100%;
  text-align: center;
    border-bottom:1px solid #fff;

  height:auto;}
  
  .region-list a{font-weight: bold;
  color:#fff;}
  
  .spot-header img {margin:50px auto; width:200px;
  height:auto;}
  
  .nighttime {display:none;}
  
  .region-model-details {
    padding:10px 0px;
    margin: 10px 5px;
    border-bottom: 1px solid #fff;
    overflow: auto;
    font-size:14px;}
    
    .region-details {width:50%;
    float:left;}
    
    .model-details {width:50%;
    text-align: right;
    padding:10px 0;
    float:left;}
    
    select[name="model-selector"] {background: #111;
    color:#fff;
    padding:10px;
    border:1px solid #fff;}
    
    .model-details img{height:30px;width:auto;}
    
    .nautical-wave-direction {height:20px;
    width:auto;}
    
    .hour-details img,    .weather-icon{
    width:20px;
    height:auto;
    margin:5px 30px;}
    
    .wind-direction {height:15px;
    margin-top:5px;
    width:auto;}
    
    .latlng {font-size:12px;}
  
  .int {color:#91a3b0;}
  
  .wrapper {position:relative;
  max-width:80%;
  margin:0 auto;}
  
  .forecast-container {
  left:0;
  width:calc(100% - 20px);}
  
  .overall-container {
position:relative;
min-height:20px;
  width:calc(100% - 20px);
  }
  
  .inner-scrollable {}
  
  .day {width:100%;height:200px;
  padding:10px;
  position:relative;}

  .wave-height {width:100%;
  clear:both;
  background: #fff;}
  
  .wave-details {width:100%;
  float:left;}
  
  .direction-container {text-align:center;}
  
  .wave-details p,.wind-details p {margin:5px 0;}
  
  .wind-details {width:100%;
  float:left;}
  
  .hour-details {width:80px;
position:absolute;
top:15px;
  margin:0 0px 0 10px;
  }
  
  .hour-details p {text-align: center;
  margin:10px auto;}

a{color:#fff;}

.expand-day {float:right;}
  
  .hourly-container{width:80px;
position:absolute;
bottom:15px;
text-align: center;
  margin:0 0px 0 10px;}
  
  .day-header{position:relative;
  padding:0 5px;
  margin:30px 0 10px;
  overflow:hidden;
  width:calc(100% - 10px);}
  
  .day-header p {font-size:13px;}
  
  .day-title {font-size:13px;}
  
  .day-header h2{
  color:#fff;}
  
  .header-navigation {border-bottom:1px solid #fff;
  height:60px;}
  
  .header-navigation img{margin:12.5px;
  height:30px;}
  
  .day-container{
  position:relative;
  margin:0px 0 30px;;
  color:#fff;
  background: #222;
  font-size:12px;
  height:280px;
  width:100%;
  float:left;
  }

 .preview {overflow-x: scroll;}
 
 .expand-day img {height:20px;
 width:auto;}
 
 
 /* Style the scrollbar for an element with class 'preview' */
.preview::-webkit-scrollbar {
    width: 3px;
    height:5px;
    /* width of the entire scrollbar */
}

.preview::-webkit-scrollbar-track {
    background: #111111; /* color of the tracking area */
}

.preview::-webkit-scrollbar-thumb {
    background: #888; /* color of the scroll thumb */
}

/* Handle on hover */
.preview::-webkit-scrollbar-thumb:hover {
    background: #888; /* color of the scroll thumb on hover */
}

  
  .daily-context-1 {}
  
  @media screen and (max-width:768px) {
     .wrapper {position:relative;
  max-width:calc(100% - 10px);
  margin:0 auto;}
   
  }