your styles go here */*/
body {
  font-size: 28px;
}

/* FLAG */
.flag-icon {
  width: 24px !important;
  margin-top: 3px;
  margin-right: 3px;
}

/*  */
.right {
    float: right;
}

.left {
    float: left;
}

.black {
    color: black;
}

.list {
    color: #333366;
}

/*-------------------*/
/* move the anchors lower so the NavBar doesn't cover the text */
/*-------------------*/
#form::before { 
    display: block; 
    content: " "; 
    margin-top: -10px; 
    height: 10px; 
    visibility: hidden; 
    pointer-events: none;
}

#invitation::before { 
    display: block; 
    content: " "; 
    margin-top: -52px; 
    height: 52px; 
    visibility: hidden; 
    pointer-events: none;
}



/*-------------------*/

/* a nice font for "Ina & Emil" */
.nice_font {
    /*font-family: "Aguafina Script", sans-serif;*/
    /*font-family: "Pirata One";*/
    /*font-size: 80px;*/
    font-family: "Luxurious Script";
    font-size: 90px;
}

.font_40 {
    font-size: 40px;
}


/* partially transparent */
.transparent {
    opacity: 0.3;
}


/* this will force the item to have parallax background (as in the background doesn't scroll with the page) */
.parallax {
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center 10%;
  background-repeat: no-repeat;
  background-size: contain;
}

.parallax_blur {
  background-attachment: fixed;
  background-repeat: repeat;
  filter: blur(8px);
}


/* fix for phone screens */
@media (max-aspect-ratio: 1/1) {
  .parallax {
    background-size: 65vh;
    background-position: center center;
  }

  .parallax_blur {
    background-size: 80vh;
    background-attachment: fixed;
    background-repeat: repeat;
    filter: blur(8px);
  }

  .carousel_container {
    height: 65vh;
    background-color: blue;
  }
}

/* Navigation Menu & SubItems  */
$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  font-family: Helvetica;
  color: #fcfcfc;
}

header {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*.nav_storage {
    overflow: hidden;
}*/

/*.nav_item{
  position: relative;
  text-align: center;
}*/

/*.nav_item a {
    color: #fcfcfc;
    padding: 15px;
    display: block;
}*/
      
/*.nav_item a:hover {
    background-color: #0052aa;
}*/
    
.subnav {
  visibility: hidden;
  flex-direction: column;
  background-color: #0084ff;  
  position: absolute;
  /*left: 0;*/
  right:  0;
  top: 99%;
  width: 150px;
}

.subsubnav {
    /*background-color: green;*/
    /*background-color: #0084ff;  */
    width: 150px;
}

.has-subnav:hover .subnav,
.has-subnav:focus .subnav,
.has-subnav:focus-within .subnav,
.subnav:hover {
  visibility: visible;
}


/*https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav_right*/
.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav-right {
  float: right;
}

.nav {
  width: 100%;
  padding: 0px;
  background-color: #0084ff;
  align-self: flex-start;
  position: -webkit-sticky;
  position: sticky;
  top: 0; 
  z-index: 2;
}

.topnav a.nav-names {
  font-size: 38px;
  padding: 0px 16px;
}

/* ALERTS */
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
.audun_warn {
    color: #ffffff;
    background-color: #FF8080;
    font-family: 'Source Sans Pro', sans-serif;
    border-radius:.5em;
    border: 1px solid;
    margin: 10px 0px;
    padding:12px;
    width: 420px;
}

.audun_info {
    color: #0000ff;
    background-color: #79CFE0;
    font-family: 'Source Sans Pro', sans-serif;
    border-radius:.5em;
    border: 1px solid;
    margin: 10px 0px;
    padding:12px;
    width: 420px;
}

.audun_success {
    color: #ffffff;
    background-color: #7DDF7C;
    font-family: 'Source Sans Pro', sans-serif;
    border-radius:.5em;
    border: 1px solid;
    margin: 10px 0px;
    padding:12px;
    width: 420px;
}
/*----------------- */

/*--- Fonts for invitation --- */

.fnt_inv_normal {
    font-family: "Comic Neue";
    font-size: 30px;
    color: #ffffff;
    display:inline-block;
}

.fnt_inv_bold {
    font-family: "Comic Neue";
    font-size: 30px;
    color: #0000ff;
    display:inline-block;
}

.fnt_inv_names {
    font-family: "Luxurious Script";
    font-size: 60px;
    color: #0000ff;
}

.invitation_background {
    text-align: center;
    background-image: url("https://drive.google.com/uc?id=1gbIoTZ1fjytiXBucuox20uvmA9f36qf3");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire */
}


/* ----Photo Albums */
.photos_row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.photos_column {
  -ms-flex: 25%;  /* IE10  */
  flex: 25%;
  max-width: 25%;
  /*-ms-flex: 100%; /* IE10 */
  /*flex: 100%;*/
  /*max-width: 100%;*/
  padding: 0 4px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1400px) {
  .photos_column {
    -ms-flex: 33%;
    flex: 33%;
    max-width: 33%;
  }
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1024px) {
  .photos_column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .photos_column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
/* ---------------- */

/*----------------- 






/*-------------------*/
/* custom shapes */
/*.pentagon {
  clip-path: polygon(50% 0, 100% 45%, 80% 100%, 20% 100%, 0 45%);
  -webkit-clip-path: polygon(50% 0, 100% 45%, 80% 100%, 20% 100%, 0 45%);
}

.hexagon {
  clip-path: polygon( 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25% );
  -webkit-clip-path: polygon( 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25% );
}

.octagon {
  clip-path: polygon(33.33% 0%, 66.66% 0%, 100% 33.33%, 100% 66.66%, 66.66% 100%, 33.33% 100%, 0 66.66%, 0 33.33%);
  -webkit-clip-path: polygon(33.33% 0%, 66.66% 0%, 100% 33.33%, 100% 66.66%, 66.66% 100%, 33.33% 100%, 0 66.66%, 0 33.33%);
}*/

.rounded {
  border-radius:40px;
  -webkit-border-radius:40px;
  -moz-border-radius:40px;
  -o-border-radius:40px;
  height: 180px;
  width: 180px;
}

/* Hotel image + hover effect */
.hotel_img {
  position: relative;
}

.hotel_img img.image-hover {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity .6s;
}

.hotel_img:hover img.image-hover {
  opacity: 0.7;
}

.negative {
  -webkit-filter: invert(1);
  filter: invert(1);
}


.fnt_hotel_title
{
  font-size: 20px;
  font-weight: bold;
}

.fnt_hotel_group
{
  font-size: 16px;
  font-weight: bold;
  display: inline;
  vertical-align: top;
}

.fnt_hotel_data
{
  font-size: 16px;
  font-weight: normal;
  display: inline;
  vertical-align: middle;
}

/* Helper image + hover effect */
.helper_img {
  position: relative;
}

.helper_img img.image-hover {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity .6s;
}

.helper_img:hover img.image-hover {
  opacity: 0.7;
}

.fnt_helper_title
{
  font-size: 20px;
  font-weight: bold;
}

.fnt_helper_motto
{
  font-size: 18px;
  font-weight: bold;
  font-style: italic;
  opacity:  0.7;
  max-width: 450px;
}

.fnt_helper_group
{
  font-size: 16px;
  font-weight: bold;
  display: inline;
  vertical-align: top;
}

.fnt_helper_data
{
  font-size: 16px;
  font-weight: normal;
  display: inline;
  vertical-align: middle;
}

/* online accounts */
.account-icon {
  width: 36px !important;
  margin-top: 3px;
  margin-right: 3px;
  opacity: 0.7;
}

.account-icon:hover {
  opacity: 1;
}

/* taxi icons */
.taxi-icon {
  width: 92px !important;
  margin-top: 3px;
  margin-right: 3px;
  opacity: 0.7;
}

.taxi-icon:hover {
  opacity: 1;
}