/*General styles */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Knewave' );
@import url('https://fonts.googleapis.com/css?family=Work+Sans' );
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@700;800&display=swap');

html {
    scroll-behavior: smooth;
}
body{
    background: #FAD744;
    margin: 0;
    padding: 0;
}
html, body, .main-container, 
.hero-section, .hero-content, .hero-video
{
    height: 100%;
}

.main-container{
    margin: 0;
    background-color: #FAD744;
}


/*Hero Section */
.hero-content{
    background: white;
    width: 85%;
    height: 100%;
    margin: 0 auto 0 auto;
}

nav{
    width: 50%;
    margin: 0 auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5em;
  
}
.nav-links{
    width: 100%;
    display: flex;
   
    justify-content: space-between;
    margin-top: 2em;
    font-family: 'Work Sans',sans-serif;
    font-size: .95em;
    font-weight: bold;
}
.link a{
    box-shadow: inset 0 -2px 0 white, 
    inset 0 -5px 0 #FAD744;
    text-decoration: none;
    color: black;
    padding-bottom: 5px;
}
.menu-wrap{
    display: none;
}
/* */
.title-text-box{
    position: absolute;
    z-index: 1;
    margin-left:-21em;
    margin-top: 13.5em;
    transform: rotate(-90deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.title-text{
    color: #2B3252;
    font-family:  sans-serif;
	font-style: normal;
	font-weight: 900;
	font-size: 4.1em;
    letter-spacing: 0.48em;
}

/* */
.video-overlay{
 position: absolute;
 z-index: 2 ;
 width: 85%;
 height: 80%;
 background: black;
 opacity: 0;

}
.video-overlay2{
 position: absolute;
 margin-left: 50%;
 margin-top: 2%;
 z-index: 2 ;
 width: 50%;
 height: 70%;
 background: black;
 opacity: 0;

}
/* */
.hero-video{
    height: 100%;
    margin-bottom: 2em;
    position: relative;
    background: #FAD744;
}
.hero-video iframe{
    height: 93%;
}

.video-text{
    position: absolute;
    margin-top: -17em;
    width: 100%;
    text-align: center;
}
.video-title{
    color: #fff;
	font-weight: 400;
    font-size: 3.5em;
    font-family: 'Knewave';
}
.watch-title{
    font-family: futura;
    font-weight: 900;
    font-size: 1em;
    padding: .5em 1em .5em 1em;
    color: #fff;
    border:  2px solid #fff;
    letter-spacing: 0.25em;
    cursor: pointer;
    background: none;
}
@media (max-width : 1100px){
    nav{
        width: 70%;
    }
    .hero-content{
        background: white;
        width: 100%;
        height: 100%;
        margin: 0 auto 0 auto;
    }
    .title-text-box{
        margin-left:-16em;
        margin-top: 11.5em;
       
    }
    .title-text{
        font-size: 3.5em;
        letter-spacing: 0.48em;
    }
    
}
@media (max-width : 860px){
    .hero-content{
        background: #FAD744;
        width: 100%;
        height: 100%;
        margin: 0 auto 0 auto;
    }
    nav{
        width: 80%;
        height: 50px;
        margin: 0 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2em;
    }
    .nav-links{
        display: none;
    }
    .menu-wrap{
        display: block;
    }
    .title-text-box{
        position: absolute;
        z-index: 1;
        margin-left:-11em;
        margin-top: 5.5em;
        transform: rotate(-90deg);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .title-text{
        color: #2B3252;
        font-family:  sans-serif;
        font-style: normal;
        font-weight: 900;
        font-size: 2.7em;
        letter-spacing: 0.48em;
    }
    .her0-video iframe{
        height: 93%;
    }
    /* */
        .video-overlay{
            position: absolute;
            z-index: 1 ;
            width: 100%;
            height: 80%;
            background: black;
            opacity: 0;
        }
        .video-overlay2{
            position: absolute;
            margin-left: 0%;
            margin-top: 101%;
            z-index: 2 ;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0;
        }
    /* */
    .video-text{
        position: absolute;
        margin-top: -20em;
        width: 100%;
        text-align: center;
    }
    .video-title{
        color: #fff;
        font-weight: 400;
        font-size: 3.1em;
        font-family: 'Knewave';
    }
}

/* Music Section */
.music-section{
    background: #2B3252;
	background-image: url('../vectors/txtbg.png');
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: center;
    margin-top: 8em;
    padding: 3.4em 2em 0 10em;
    height: 135vh;
    position: relative;
    z-index: 1;
}
.music-section-content{
    display: flex;
    width: 80%; 
    position: absolute;
}
.music-title{
    margin-top: 11em;
    font-family: sans-serif;
	font-style: normal;
	font-weight: bold;
    font-size: 1.8em;
    text-align: center;
	letter-spacing: 0.5em;
    color: #FFFFFF;
    width: 25%;
}
.music-tiles{
    display: flex;
    justify-content: space-between;
    width: 60%;
    margin-left: 5em;
}
.music-left{
    height: 745px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.music-lefta{
    display: flex;
    flex-direction: column;
}
.get-it{
    height: 50px;
    cursor: pointer;
    border: none;
    font-weight: 900;
    font-family: 'futura';
    background: #fff;
}
.music-leftb{
    display: flex;
    flex-direction: column;
}
.music-right{
    height: 745px;
    margin-top: 3em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.music-righta{
    display: flex;
    flex-direction: column;
}
.music-rightb{
    display: flex;
    flex-direction: column;
}
@media (max-width : 1100px){
    .music-section{
        padding: 0em 0em 0 0em;
        margin-top: 1.5em;
    }
    .music-section-content{
        display: flex;
        flex-direction: column;
        width: 100%; 
        position: absolute;
    }
    .music-title{
        margin-top: 1em;
        
        color: #FFFFFF;
        width: 100%;
    }
    .music-tiles{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }
}

@media (max-width : 860px){
    .music-section{
        margin-top: 0;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        height: 1700px;
        position: relative;
        background-position-x: center;
        background-position-y: 50%;
        background-size:80% ;
    }
    .music-section-content{
        display: flex;
        flex-direction: column;
        width: 100%; 
        
    }
    .music-title{
        margin-top: 1.5em;
        font-family: sans-serif;
        font-style: normal;
        font-weight: bold;
        font-size: 1em;
        text-align: center;
        letter-spacing: 0.5em;
        color: #FFFFFF;
        width: 100%;
    }
    .music-tiles{
        display: flex;
        flex-direction: column;
       
        align-items: center;
        width: 100%;
        margin-top: 1em;
        margin-left: auto;
        margin-right: auto;
    }
    .music-left{
        height: 200%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .music-lefta{
        display: flex;
        flex-direction: column;
        margin-bottom: 3em;
    }
    .music-leftb{
        display: flex;
        flex-direction: column; 
    }
}


/* Connect Section */
.connect-section{
    background:  #EF5455;
    padding-top: 1em;
    padding-bottom: 1em;  
}
.connect-section-content{
    display: flex;
    justify-content: space-between;
    width: 90%;
    padding: 1em;
    margin-left: 5%;
    margin-right: 5%;
}
.connect-fields{
    display: flex;
    justify-content: space-evenly;
    width: 60%;
    margin-left: 3em;
}
.connect-text{
    font-family: sans-serif;
	font-style: normal;
	font-weight: 900;
	font-size: 1.1em;
	letter-spacing: 0.48em;
    color: #2B3252;
}
.connect-input{
    display: flex;
    padding-top: .9em;
}
.input-field{
    width: 27vw;
    height: 48px;
    background: transparent;
	border: 1px solid #2B3252;
    color: #2B3252;
    padding:1em; 
}
.connect-input input{
    color: #2B3252;
}
.input-field:focus{
    border: 1px solid #2B3252;
    outline: none;
}
::placeholder {
    color:  #2B3252;
    opacity: 1; /* Firefox */
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:  #2B3252; 
  }
  ::-ms-input-placeholder { /* Microsoft Edge */
   color:  #2B3252;
  }
.input-btn{
    width: 11%;
    content: '\003E';
    height: 48px;
    background: transparent;
	border: 1px solid #2B3252;
    color: #2B3252;
    padding:1em; 
}
.input-btn:focus{
    outline: none;
}
.connect-icons {
    width: 40%; 
}
.connect-icons ul{
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding-top: .5em;
}
.connect-icons ul li{
    padding-right: 2em;
}
@media (max-width : 860px){
    .connect-section-content{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        width: 90%;
        padding: 1em;
        margin-left: 5%;
        margin-right: 5%;
    }
    .connect-fields{
        display: flex;
        
        flex-direction: column;
        width: 100%;
        margin-left: 0; 
    }
    .connect-text{
        text-align: center;
        
    }
    .connect-input{
        width: 100%;
        
        
        align-items: center;
        justify-content: center;
    }
    .input-field{
        width: 57vw;
        height: 48px;
        
        background: transparent;
        border: 1px solid #2B3252;
        color: #2B3252;
        padding:1em; 
    }
    .input-btn{
        width: 13%;
        max-width: 65px;
       
    }
    .connect-icons {
        width: 100%; 
    }
}
/* Photos Section */
.photos-section{
    background-color: #2B3252;
    background-image: url('../vectors/txtbg.png');
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: center;
}
.photos-section-content{
    padding-top: 5em;
    color: white;
    
}
.photos-title{
    display: flex;
    width: 67%;
    text-align: center;
    justify-content: center;
    font-family: sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 1.4em;
	/* identical to box height, or 87% */
	letter-spacing: 0.5em;
    color: #FFFFFF;
    margin-top: -2em;
}
.photos-title-m{
    display: none;
}
.photos-box{
    width: 80%;
   
    margin: auto;
}
.photos{
    display: flex;
    justify-content: space-between;
    
    margin: auto;
    padding-left: 5em;
}
.photos-left img{
    margin-bottom: 5em;
}
.photos-center img{
    margin-bottom: 5em;
}
.photos-right img{
    margin-bottom: 5em;
}
@media (max-width : 1100px){
   .photos-title{
     width: 100%;
   } 
   .photos-box{
        width: 100%;
        margin: auto;
    }
    .photos{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: auto;
        padding-left: 0;
    }
}
@media (max-width : 860px){
   .photos-section{
       background-size:80% ;
   }
    .photos-title-m{
        display: flex;
        width: 100%;
        text-align: center;
        justify-content: center;
        font-family: sans-serif;
        font-style: normal;
        font-weight: bold;
        font-size: 1.4em;
        /* identical to box height, or 87% */
        letter-spacing: 0.5em;
        color: #FFFFFF;
        margin-top: 0;
    }
    .photos-box{
        width: 100%;
    }
    .photos-title{
        display: none;
    }
    .photos{
        display: flex;
        justify-content: center;
        width: 100%;
        flex-direction: column;
        align-items: center;
        margin: auto;
        padding:0;
        
    }
    .photos-left{
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }
    .photos-center{
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }
    .photos-right{
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }
    
}
/* Comfort You */
.comfort-you-section{
    display: flex;
    padding: 0;
    width: 100%;
    margin-top: -2em;
}
.comfort-you{
    width: 50%; 
    margin-bottom: 5em; 
}
.comfort-you-content{
    padding: 6em;
}
.video-title2{
    color: #2B3252;
	font-weight: 400;
    font-size: 3.5em;
    font-family: 'Knewave';
}
.video-text2{
    font-family: Work Sans;
    font-style: normal;
    font-weight: 800;
    font-size: 2em;
    line-height: 42px;
    
    letter-spacing: 0.4em;
    color: #2B3252;
    margin-top: -.9em;
    margin-bottom:1em;
}
.watch-title2{
    font-family: futura;
    font-weight: 900;
    font-size: 1em;
    padding: .5em 1em .5em 1em;
    color: #2B3252;
    border:  2px solid #2B3252;
    letter-spacing: 0.25em;
    cursor: pointer;
    background: none;
}

.comfort-video{
    width: 50%;
    margin-top: 2em;
    cursor: progress;

}
.comfort-video iframe{
    height: 100%;
    cursor: none;
}
@media (max-width : 860px){
    .comfort-you-section{
        display: flex;
        flex-direction: column;
        padding: 0;
        width: 100%;
        height: 180%;
        margin-top: 0;
    }
    .comfort-you{
        width: 100%; 
        height: 55%;
        margin-bottom: 5em; 
    }
    .comfort-you-content{
        padding: 6em;
        text-align: center;
    }
    .video-text2{
        margin-top: 0;
    }

    .comfort-video{
        width: 100%;
        height: 50%;
        margin-top: 0;
    }
    .comfort-video iframe{
        height: 100%;
    }
}

/* Upcoming Section */
.upcoming-section{
    background-color: #2B3252;
    background-image: url('../vectors/txtbg.png');
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: top;
    
}
.upcoming-section-content{
   
    padding: 4em 1em 1em 6em;
    color: #fff;  
}
.upcoming-title{
    color: #fff;
	font-weight: 400;
    font-size: 3.7em;
    font-family: 'Knewave';
}
.shows-span{
    font-size: 2.4rem;
    letter-spacing: 0.4em;
    font-family: Work Sans;
    font-style: normal;
    font-weight: 700;
    
}
.upcoming-dates{
    display: flex;
    justify-content: space-between;
    width: 90%;
}
.upcoming{
    margin-bottom: 3em;
}
.tickets{
    font-family: Work Sans;
    font-weight: 700;
    font-size: 1em;
    padding: .5em 1em .5em 1em;
    color: #fff;
    border:  2px solid #fff;
    letter-spacing: 0.25em;
    cursor: pointer;
    background: none;
}

.connect-section-content-2{
   display: flex;
    width: 70%;
    padding: 1em;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: -1em;
    
}
.footer-bottoms{
    display: flex;
    justify-content: space-between;
    width: 75%;
    padding-left: 1em;
}
.footer-bottoms p{
    font-size: .7em;
    color: #2B3252;
    letter-spacing: 0.2em;
    font-family: Work Sans;
    font-style: normal;
    font-weight: 700;
}

@media (max-width : 1080px){
    .upcoming-section-content{
        padding: 4em 1em 1em 2em;
         
    } 
}

@media (max-width : 860px){
    .upcoming-section{
        background-position-x: center;
        background-position-y: 50%;
        background-size:80% ;
    }
    .upcoming-section-content{
        padding: 7em 1em 1em 2em;
         
    } 
    .upcoming-title{
        display: flex;
        flex-direction: column;
        width: 90%;
        text-align: center;
        
        font-size: 2.7em;
    }
    .upcoming-dates{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        width: 90%;
        text-align: center;
    }
    .shows-span{
        font-size:1.8rem ;
    }
    
}

@media (max-width : 1080px){
    .connect-section-content-2{
        display: flex;
        width: 90%;
        padding: 0;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: -1em; 
    } 
}

@media (max-width : 860px){
    .connect-section-content-2{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: 90%;
        padding: 1em;
        margin-top: -1em; 
    } 
    .footer-bottoms{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 90%;
        padding-left: 1em;
    }
}