@import url("https://fonts.googleapis.com/css?family=Poppins");

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  font-size: 1em;
  overflow: visible; 
  background-color: black;
}

.top-space {
  padding-right: 30vh;
}

@media screen and (max-width: 800px) {
  .top-space {
    padding-right: 0;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 01em;
    letter-spacing: 0.2px;
    line-height: 1.3em;
  }
}

.text_om h3, .text_om ul, .text_om p{
  color: rgb(102, 136, 194);
  margin-left: 36px;
  margin-right: 120px;
}
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}
.bg0 {
  background-color: black;
}

.bg1 {
  background: url(../../aspo/static/images/bg-1.png);
  min-height: 100%;
  opacity: 0.99;
}

.bg3 {
  background: url(../../aspo/static/images/bg-3.png);
  min-height: 100%;
  opacity: 0.99;
}
.bg4 {
  background: url(../../aspo/static/images/bg-4.png);
  min-height: 100%;
  opacity: 0.99;
}
.bg5 {
  background: url(../../aspo/images/bg-5.png);
  min-height: 100%;
  opacity: 0.99;
}
.bg6 {
  background: url(../../aspo/images/bg-6.jpg);
  min-height: 100%;
  opacity: 0.99;
}
.bg7 {
  background: url(../../aspo/images/bg-6.png);
  min-height: 100%;
  opacity: 0.99;
}
.bg8 {
  background: url(../../aspo/images/AspoStranden01.jpg);
  min-height: 100%;
  opacity: 0.99;
}

.bg3, .bg4, .bg5, .bg6, .bg7, .bg8 {
  min-height: 100%;
  position: relative;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* * * * * S E C T I O N S * * * * */
.first-section {
  position: absolute;
  margin: 50px 30% 0px 80px;
  background-color:rgba(0,0,0,0.6);
  padding:2em;
}

.first-section h1 {
  color: rgb(175, 94, 47);
}

.first-section p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.1em;
  line-height: 155%;
  color: rgb(149, 180, 211);
}

.middle-section {
  margin: 50px 80px;
}

.middle-section h1 {
  color: rgb(47, 175, 132);
}
.middle-section p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.1em;
  line-height: 155%;
  color: rgb(30, 28, 82);
}

.next-section {
  position: absolute;
  margin: 50px 30% 0px 80px;
}

.next-section h1 {
  margin-top:50px;
  color: rgb(175, 47, 79);
}
.next-section p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.1em;
  line-height: 155%;
  color: rgb(12, 92, 16);
}

h1.dark-page {
  color: rgb(255, 198, 166);
  text-shadow: 2px 2px black;
}
h1.light-page{
  color: rgb(175, 94, 47);
}

h2 {
  color: rgb(56, 47, 175);
}

section {
  padding: 50px 80px;
}

section p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.1em;
  line-height: 155%;
  color: rgb(12, 92, 16);
}

/* TOOLTIP */

.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  vertical-align: bottom;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  font-family: "Trebuchet MS", sans-serif;
  visibility: visible;
  padding: 16px;
  width: max-content;
  max-width: 200px;
  font-size: 16px;
  color: black;
  background: dimgray;
}

.home-tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.home-tooltip .home-tooltiptext {
  visibility: hidden;
  width: 120px;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: fixed ;
  margin-left: 200px;
  margin-top:-40px;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.home-tooltip:hover .home-tooltiptext {
  display: block;
  /* font-family: 'Times New Roman', Times, serif; */
  font-family: 'Trebuchet', sans-serif;
  text-align: left;
  visibility: visible;
  padding: 24px 16px 16px 16px;
  width: max-content;
  letter-spacing: 0.41px;
  max-width: 200px;
  font-size: 12px;
  color: rgb(209, 191, 24);
  /* background: dimgray; */
}

.buttons-container {
  display:flex;
  flex-direction: column;
  justify-content:flex-start;
  align-items: flex-start;
  padding: 180px 50px 200px 24px;
}

.button-item {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  width: 205px;
  border-radius: 6px;
  padding: 5px 8px 5px 8px;
  background-color:rgb(102, 136, 194);
  /* transform: translateY(5%) rotate(10deg); */

}

.button-item:hover {
  background-color:rgb(131, 153, 193);
}

.buttons-container a {
  text-decoration: none;
}

.button-text-l {
font-size: 14px;
}

.button-text-r {
font-family: 'arial black';
font-weight: bold;
}
.om_link {
  color: rgb(0, 162, 255);

}
.om_link:hover {
  color: rgb(246, 250, 5);
  
}