/*
Theme Name: Secretly Distribution
Author: Helen Cramer
Version: 1.12
*/


* {
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    transition: all .1s ease;
}


html, body {
  width:100%;
  overflow-x:hidden;
  margin:0;
  padding:0;

}

.wp-block-embed__wrapper {
  height: auto !important;
}

body {
  font-family: 'Montserrat', sans-serif;
  color:black;
  background-color:#000;
  padding-top: 45px;
}


/*image fade */
.fade-in {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/* ------ */

.page-content {
  position:relative;
  display:block;
  height:100%;
}

h2 {
  font-size:21px;
  font-weight:700;
  margin-block-start:.4em;
  margin-block-end:.4em;
}

p {
  font-size:15px;
  font-weight:400;
}

h3 {
  font-size:15px;
  font-weight:300;
  opacity:.6;
  text-transform: uppercase;
  margin:0;
  padding:0;
}

a {
  text-decoration:none;
  color:#fff;
}

.bold {
  font-weight:700;
}

.responsive-background-image {
  width: 100%;
  position:absolute;
  height:100%;
  display: flex;
  justify-content:center;
  align-self: flex-start;
  overflow:hidden !important;

}

@media only screen and (min-width: 687px) {
  body #top-sellers {
    height: auto;
    min-height: 100vh !important;
  }
}

.responsive-background-image img {
  min-height:100%;
  display:block;
  margin:auto;
}

.mobile-menu {
  z-index:2000;
  width:100%;
  margin:auto;
  visibility:visible;
  padding-top:50px;
  position:relative;
}

.mobile-menu img {
  width:50%;
  margin:auto;
  display:block;
}

.menu {
  clear:both;
  visibility: hidden;
  position:fixed;
  top: 0;

}
.menu-content {
  width:auto;
  margin:25px;
}

.menu-image {
  width:100%;
}

.menu img {
  width:200px;
  margin:auto;
  display:block;
  }

#home {
  position:relative;
  height:100vh;
  width:100%;
}

.home-image {
  width:100%;
  height:100%;
  position:absolute;
}

@media (max-width: 686px) {
  .about-image {
    position: relative;
  }
}

.about-image {
  width:100%;
  height:750px;
  background-repeat:no-repeat;
  background-size: cover;
  background-position:center;
}

.text-block {
  padding:20px;
  margin:20px;
  background-color:rgba(255,255,255,.85);
  position:absolute;
  bottom:4%;
  left:0;
  z-index:1000;
}

.text-block svg {
  width:25px;
}

.text-block img {
  display:block;
  visibility: visible;
  width:75%;
  clear:both;
  position:relative;
  padding-top:15px;
  padding-bottom:15px;
}

.banner {
  height:100%;
  padding:15vh 30px;
  position:relative;
  display: block;
  align-items: center;
}

#about-1 .banner {
  display:flex;
}

#contact .banner {
  display:flex;

}

.banner-text {
  width:100%;
  padding-top:15px;
  padding-bottom:15px;
}

.contact-text {
  width:100%;
  padding-top:15px;
  padding-bottom:15px;
}

#footer {
  color:#fff;
  padding:15vh 30px;
  align-items: flex-start;
  display:block;
}

.footer-column {
  width:100%;
  padding-bottom:15px;
}

.footer-column svg {
  width:20px;
  display:inline;
  padding-left:5px;
}

.partner-logos {
  height:100%;
}

#about-1{
  background-color:#000;
  color:white;
  height:100vh;
  width:100%;
}

#partners {
  background-color:#fff;
  color:#000;
}

#top-sellers {
  background-color:#000;
  color:#fff;
  height:auto;
}

#contact {
  background-color:#fff;
  color:#000;
  height:100vh;
  width:100%;
}

#contact a{
  color:#000;
}

#footer p {
  padding-bottom:15px;
}

#about-2 {
  position:relative;
  display:block;
  /*height:100vh;*/
  width:100%;
}

#about-3 {
  position:relative;
  display:block;
  /*height:100vh;*/
  width:100%;
}

#about-4 {
  position:relative;
  display:block;
  /*height:100vh;*/
  width:100%;
}

#about-5 {
  position:relative;
  display:block;
  /*height:100vh;*/
  width:100%;
}

#about-6 {
  position:relative;
  display:block;
  /*height:100vh;*/
  width:100%;
}

#about-7 {
  position:relative;
  display:block;
  /*height:100vh;*/
  width:100%;
}

/*spotify embed */
figure {
margin-inline-start:0;
margin-inline-end:0;
width:100%;
}

.wp-block-embed__wrapper {
  display:block;
  width:100%;
  height:400px;
  padding:10px 0px;
}

iframe {
  width:100%;
}

/*end spotify embed */

.social-links {
  width:100%;
  float:left;
}

.social-links svg {
  width:30px;
  margin-right:10px;
}

.social-links svg {
  width:25px;
}

.social-links a{
  display:inline;
}

.caption {
  position:absolute;
  bottom:0;
  right:15px;
  color:#fff;

}

.caption p {
  font-size:11px;
}

.contact-image {
  visibility:hidden;
  display:none;
}

.wp-block-gallery {
  width:100%;
}


.menu {
    z-index:2000;
    width:100%;
    margin:auto;
    visibility:visible;
    padding:10px 0px;
    background:#fff;
    display:flex;
    align-items: center;
  flex-direction: column; 
  justify-content: center;
  }

    .menu-image {
      opacity:.95;
      align-items: center;
      text-align:center;

    }

    .menu-image img {
      width:180px;
      margin:0;
      display:inline-block;
    }

  #menu-text {
      visibility: visible;
    }

    #menu-text ul {
      text-align:center;
      padding: 0;
      margin-left: 0;
    }

    #menu-text li {
      display:inline;
      font-size:13px;
      font-weight:normal;
      text-transform: uppercase;
      padding:5px;
    }

  #menu-text li a{
      text-decoration:none;
      color:#000;
      opacity:1;
    }

.active, #menu-text a:hover  {
      opacity:.65 !important;
}

#internal {
  float:right;
}
#external {
  float:right;
}

#external ul {
  padding-inline-start: 8px;

}
  .mobile-menu {
    visibility:hidden;
    display:none;
  }



/* ---------------------------------------------------------
-----------------------transition screen-------------------- */
@media only screen and (min-width: 687px) {
  
  #about-2 {
  height:100vh;
}

#about-3 {
  height:100vh;
}

#about-4 {
  height:100vh;
}

  
#about-5 {
  height:100vh;
}
  
  
#about-6 {
  height:100vh;
}
  
  
#about-7 {
  height:100vh;
}
  
  
#about-8 {
  height:100vh;
}
  
  body {
    padding-top: 30px;
  }
  
  .menu {
   	flex-direction: row; 
  justify-content: start;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .menu-image {
    width:30%;
      display:flex;
      float:left;
      text-align:left;
  }
  
  #menu-text {
    
      width:70%;
      float:left;
  }
  

  h2 {
    font-size:25px;
  }

  .page-content {
    width:100%;
    height:100vh;
    overflow-y:initial;
    overflow-x:hidden;
    scroll-snap-type: mandatory;
    scroll-snap-type: y mandatory;
  }

  .page-section {
    scroll-snap-align: start;
    position:relative;
  }

  

.text-block {
  width:60%;
  margin-top:250px;
  margin-left:10px;
  bottom:25vh;
}

.text-block img {
  display:none;
  visibility: hidden;
}

.banner {
  float:left;
}

    .banner-text {
      width:60%;
    }


    .contact-text {
      width:60%;
    }

    .footer-column {
      width:60%;
    }

    #top-sellers {
      height:100vh;
      width:100%;
    }

}


/* ---------------------------------------------------------
-----------------------desktop------------------------------ */
@media only screen and (min-width: 960px) {

  .text-block {
    width:45%;
}

.banner-text {
  width:45%;
}

.contact-text {
  width:45%;
  float:left;
}

.contact-image {
  visibility: visible;
  display:block;
  width:45%;
  height:100%;
  overflow:hidden;
  position:absolute;
  bottom:0;
  right:0;
  background-size:cover;
}


.footer-column {
  width:30%;
  float:left;
  padding-bottom:90px;
}