/*.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;


}*/

@font-face {
  font-family: Aptos;
  src: url("../fonts/aptos.ttf");
}

.top{  position: fixed;
  top: 55px;
  z-index: 1000;
width: 100%;
background-color: white;
/*background: rgb(147,147,147);
background: linear-gradient(180deg, rgba(147,147,147,1) 0%, rgba(147,147,147,1) 6%, rgba(80,80,80,1) 100%);*/
min-height: 100vh;
}


.yacht-top-logo{

  padding-top:20px;
  margin-bottom:-200px;
}

.yacht-top-logo img {width:86px; height:18px;margin-left:20px;}


.yachtImage img{
  max-width: 100%;
  margin-left:1%;
  z-index: 1000;
}

.yacht-caption{
  margin-top:-150px;
  font-size: 1.2em;
  color: black;
  font-weight: bold;

}



/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {  
  .yacht-top-logo{padding-top:10px;margin-bottom:-150px;}
  .yacht-top-logo img {width:86px; height:18px;}
  .yachtImage img{ max-width: 50%;  margin-left:26%;margin-top:-50px;}
  .yacht-caption{  font-size:1em;margin-top:-100px;}
}

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  .yacht-top-logo{padding-top:10px;margin-bottom:-150px;}  
  .yacht-top-logo img {width:173px; height:35px;} 
  .yachtImage img{ max-width: 80%;  margin-left:9%;margin-top:-100px;}
  .yacht-caption{  font-size:1em; margin-top:-100px;}
}

@media (min-width: 1000px) {  
  .yacht-top-logo{padding-top:10px;margin-bottom:-200px;}
  .yacht-top-logo img {width:173px; height:35px;} 
  .yachtImage img{ max-width: 80%;  margin-left:11%; margin-top:-100px;}
  .yacht-caption{  font-size:1.7em; margin-top:-150px;}
}

.header h2 {
  text-align: center;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}




/* HTML: <div class="loader"></div> */
.loader {
  position: fixed;
  top: 100px;
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-color: #ccc #0000;
  animation: l16 1s infinite linear;
  z-index: 2000;
}
.loader::before,
.loader::after {    
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
}
.loader::before {
  border-color: #f03355 #0000;
  animation: inherit; 
  animation-duration: .5s;
  animation-direction: reverse;
}
.loader::after {
  margin: 8px;
}
@keyframes l16 { 
  100%{transform: rotate(1turn)}
}

#carouselGallery{ margin-bottom:20px }