:root { 
    --headerHeight:100px;    
    --fontColor:#4e4e4e;
    --houseColor:rgba(122,165,245,1);
    --houseColor09:rgba(122,165,245,0.9);
    --houseFont:'Raleway', sans-serif;
}
*,
*::before,
*::after {
    box-sizing: border-box
}

.sticky{
    height:80px !important;
}
.stickyLogo {
    margin-top:20px !important;
}
.stickyLogoLap {
    margin-top:30px !important;
}
.stickyOpener {
    top:25px !important;
}
.stickyMenu {
    top:80px !important;
}
.stickyMenuLap {
    margin-top:40px !important; 
}

.stickyInsta { 
    top:6px !important;  height:25px !important; width:25px !important;}


html, body {height:100%; color:var(--fontColor);}
html, body, img, h1, h2, h3, h4, h5 h6, p, div {margin:0; padding: 0;}

p, ul, li {font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 18px;}
h2, h3, h4,h5 {font-family: 'Raleway', sans-serif;}
a {text-decoration: none; color: var(--fontColor);}
.toRight {text-align: right;}
.about p {padding:10px 0;}
.about h2 {padding:40px 0 20px;}
h2.titles {padding:40px 0 10px;}
h3.subtitles {font-size:1em; padding-bottom:10px;}
.about img {float:left; width:25%; height:auto; padding: 0 15px 15px 0;}

h1#title-over-video  {
    position: relative;
    width: 100%;
    z-index: 20;
    text-align: center;
    color:white;
    font-size: 4.65vw;
    font-family: 'Raleway', sans-serif;}
    
h1.page-title {text-align: center; font-size: 4rem;  font-family: var(--houseFont); margin-top: 30px; letter-spacing: 6px;}
.costumes {color:#346952;}
.fashion {color:#b03437;}
    
h2.intro {font-size: 24px; text-align: center; margin:70px auto 30px; width:90%; font-family: 'Raleway', sans-serif; font-weight:300; line-height: 35px;}

a.button {border: 1px solid black ;
            font-size: 22px;
            cursor: pointer;
display: inline-block;
padding: 1.1em 0;
text-align: center;
text-decoration: none;
/*text-transform: uppercase;*/
transition: opacity 0.15s linear;
max-width: 74%;

font-weight: 800;

    letter-spacing: 2px;}

a.button:hover {background: var(--houseColor); color:white; border-color: white;}


.topHeader {   
    /*background-color: white;*/
    position:fixed;
    
    top:0;
    transition:all .4s;   
    height: var(--headerHeight);
    z-index: 30;
    width:100%;
}



#logo-container {
    display:inline-block;
    width:200px;
   
    transition: all 0.4s;
}

#logo {
    width:100%;
    max-width:200px;
    z-index: 10;
    
}

#insta {position: absolute; top:10px; right:20px; height:35px; width:35px; transition: all 0.4s;}

#article-container {
    margin:70px 5%;
    width:90%;
    
}

#article-container-mosaic {
    margin: calc((var(--headerHeight)) + 10px) 5%;
    width:90%;
    
}

article.front-page-choices p {padding: 0 20px;}


.main-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    width:100%;
    display: block;
    clear:both;
    z-index: 0;
   
}

.about-video {
  
  
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
  width:100%;
  display: block;
  clear:both;
  z-index: 0;
 
}

.embellishment-main-video {
    
    
    
    
    width: 100%;
    height: 100%;
    z-index: 0;
    
    
    display: block;
    clear:both;
   
   
}

.video-container {
    overflow: hidden !important;
    object-fit: cover !important;
    height: 100vh !important;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:-100px;

}

.embellishment-video-container {
    overflow: hidden !important;
    margin-top:110px;
   
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#costume-img-dad {margin-right: 20px;}
#fashion-img-dad {margin-left:20px;}

#costume-img-dad, #fashion-img-dad, .collection-choice-img-dad {
     
     position: relative;
    min-width:0;
     text-align: center;    
}



#costume-img-dad a img, #fashion-img-dad a img, .collection-choice-img-dad a img {
    width:100%;
}

.userScrolledDown {background: rgba(122,165,245,0.9);}
.userScrolledBackUp {background: rgba(122,165,245,0);}


.secondButton {margin-right:20px !important; width:200px; margin-left: auto !important;}
.firstButton {margin-left:20px !important; width:200px;}


#menu-container {
    float:right;
   margin:61px 40px 0 0 ; transition: all 0.4s;
}

#menu {
    list-style-type: none;
    display:flex;
    justify-content: flex-end;
    padding:0%;
    margin:0;
  
    
}
#menu li {
    padding: 10px 0;
    font-size: 18px;  
    flex-direction: row;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    padding: 0 10px;
}

#menu li a {
    text-decoration: none;
    color:white;
}

#menu li ul {
    background: var(--houseColor09);
    list-style-type: none;
    padding: 0;
    color: white;
}


#menu li ul a li  {
    padding: 5px 15px 8px 10px;
    cursor:pointer;
}


#menu li ul li:hover {background:black;}

.img-title {
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    letter-spacing: 4px;
}

.collection-choice-img-dad .img-title {
    font-size: 2rem;
    letter-spacing: 3px;
}

/*   collection tiled images */
ul.collection-parent {
  display: flex;
  flex-wrap: wrap;
}

li.collection-item {
  height: 60vh;
  flex-grow: 1;
  list-style-type: none;
}

licollection-item:last-child {
  flex-grow: 10;
}

ul.collection-parent > li.collection-item > span > img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

.header-images {width:100%; height: auto;}

footer {
    width:100%;
    background:#f7f7f7;
    text-align: center;
}

#logo-footer {width:200px; height: auto;margin:30px;}

.photoInFocus {
    background-color: #fefefe;
  
  padding: 0px;
  border: 0px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  position: fixed;
  z-index: 100;
  top:0;
  left:0;
  height:100% !important;
  width:auto !important;
  min-width:auto !important;
  
}

.modal {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100vh; /* Full height */
    overflow-y:hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,1); /* Black w/ opacity */
  }

  .close {
    color: white;
    position:fixed;
    font-size: 28px;
    font-weight: bold;
    top:10px;
    right:10px;
    z-index:200;
    display:none;

  }

  .next, .previous {
    color: white;
    position:fixed;
    font-size: 38px;
    font-weight: bold;
    top:50%;    
    z-index:200;
    display:block;
  }

.next {right:30px;}
.previous {left:30px;}
  
  .close:hover,
  .close:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
  }


  /*  media queries  */
 
 


  @media only screen and (min-width: 769px) {
      
      
      .toggleMenu {display:none; position:absolute; top:30px;left:0px;white-space:nowrap;}
      .front-page-choices {display:flex; flex-direction: row; justify-content: space-around;}
      #logo-container {margin:50px 0 0 27px;}
  }

  @media only screen and (max-width: 768px) {
.on-laptop {display:none;}
#logo-container {margin:30px 0 0 27px;}
.images {max-width: 100%;}
ul.collection-parent {display:block; padding:0;}
li.collection-item {height:auto;}



.collection-choice-img-dad img {width:80%;}
.collection-choice-img-dad .img-title {font-size: 4rem;}
.toggleMenu {display:none; padding-left:0;}
.front-page-choices {display:block;}
.about img { width:35%;}

  }

  @media only screen and (min-width: 500px) {
    .display-selection {display:flex; flex-direction: row; justify-content: space-around;}
    .collection-choice-img-dad img {width:100%;}
    .collection-choice-img-dad .img-title {font-size: 1.2rem;}
    #article-container {width: 100%; margin:70px 0;} 
    .lb {display:none;}
  }
  @media only screen and (max-width: 499px) {
    h1#title-over-video {font-size:37px;line-height:52px;}
    .collection-choice-img-dad .img-title {font-size:2.3em;}
  }

  

  @media only screen and (min-width: 990px) {
    .collection-choice-img-dad .img-title {font-size: 2.2rem;}
  }

  @media only screen and (max-width: 869px) {
    
    .menu-container, #insta {display:none;}
    #mobile-menu-container {transition: top 0.4s; width:100%; position:fixed;  display: none; padding:0; font-size:21px; font-family: var(--houseFont); margin:0; }
    #mobile-menu-container li {width:100%; padding:10px; background:black; color:white;}
    ul#mobile-menu-container li ul li {list-style-type:none;}
    
    #menu-opener-box {height:29px; width:36px; cursor: pointer; position: fixed; top:35px;right: 35px; transition: all 0.4s;}
    .menu-rubrika {width:100%; height: 5px; background: white; margin:0px 0 7px;}
  }

  @media only screen and (min-width: 870px) {
    #mobile-menu-container {display: none;}
  }


  .lds-spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: #fff;
  }
  .lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }
  .lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
  }
  .lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
  }
  .lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
  }
  .lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
  }
  .lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
  }
  .lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
  }
  .lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
  }
  .lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
  }
  .lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
  }
  .lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
  }
  .lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }
  @keyframes lds-spinner {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }