*{    
	margin: 0;
    padding: 0;
	font-family:futura-pt;
	box-sizing: border-box;
}
html{
	font-size:16px;
	}

#main_container{
	width:100%;
	height:auto;
}

/*------------------------header------------------*/
#header_container{
    width:100%;
    background-color:#7FB78F;
    overflow:hidden;
}

#logo_container img{
    max-height:180px;
    width:auto;
    float:left;
}

/*---nav bar---*/
#nav_bar_container{
	float:right;
	padding-top:4rem;
	padding-right:2rem;

}
#nav_bar_list {
    list-style: none;
	display: flex;
    justify-content: flex-end;
    gap: 2rem;
    flex-wrap: nowrap;
}
#nav_bar_list li{
    font-size:2rem;
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:bold;
}
li.youarehere{
	color:#B21F58;
}
#nav_bar_list a:link{
	color:#000000;
	text-decoration:none;
}
#nav_bar_list a:visited{
	color:#000000;
	text-decoration:none;
}
#nav_bar_list a:hover{
	text-decoration:underline;
}
#nav_bar_list a:active{
	text-decoration:underline;
	color:#B21F58;
}
/*-end of nav bar-*/



/*------------------------body----------------------*/
#countdown1_container{	
	width:100vw;
	padding:0rem;
}
#countdown_container{	
	width:100%;
	padding:4rem 1rem;
	background-color:#F6EACE;
	font-size:9rem;
	text-align:center;
	font-weight:bold;
	overflow: hidden;
}
.video {
  width: 100vw;
  margin: 0;
  padding: 0;
}
.video video {
  width: 100vw;
  height: auto;
  display: block;
}

/*---yellow bit---*/
#yellow_container{
	width:100%;
	padding:4rem 1rem;
	background-color:#ffd108;
	overflow: hidden;
}

#description_container{
	column-count:2;
	column-gap:1rem;
	margin:3rem;
}

#ticket_container{
	margin:0 50px;
	text-align:center;
}

#ticket_container a:link{
	color:#000000;
	text-decoration:none;
}
#ticket_container a:visited{
	color:#000000;
	text-decoration:none;
}
#ticket_container a:hover{
	text-decoration:underline;
}
#ticket_container a:active{
	text-decoration:underline;
	color:#A61F5E;
}


/*---lower third---*/
#bottom_container{	
	width:100%;
	padding:3rem 1rem;
	background-color:#F6EACE;
}

#body_container{
	width: 100%;
	overflow: hidden;
}

#text_container{
	width: 48%;      
	float: left;
	padding-right: 2%; 
	box-sizing: border-box;
	text-align:center;
	line-height:3rem;
	font-size:1.5rem;
}

/*---slideshow---*/
.slideshow-container {
  width: 50%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  float:right;
  position:relative;
  overflow: hidden;
}
.bts {
  display: none;
  width: 100%;
  height: 100%;
}
.bts img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 1rem;
  color: black;
  font-weight: bold;
  font-size: 5rem;
  font-weight:bold;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prev {
  left: 1rem;
}

.next {
  right: 1rem;
}

.prev:hover, .next:hover {
  color: #f2595c;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


/*--------------------footer--------------------*/
#footer_container{
	width:100%;
	padding:4rem 1rem;
	background-color:#E57C34;
}

#links_container{
	text-align:center;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 3rem; 
}

.social-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #000000;
    text-decoration: none;
}

.icon {
    width: 2rem;
    height: 2rem;
}

.social-link:hover {
    text-decoration: underline;
}

.social-link:active {
	text-decoration:underline;
    color: #F2DB66;
}
.social-link a:link{
	color:#000000;
	text-decoration:none;
}
.social-link a:visited{
	color:#000000;
	text-decoration:none;
}


/*--------------------text spec---------------------*/
h1{
	color:#B21F58;
	font-size:6rem;
	text-align:center;
	text-transform:uppercase;
	font-style:italic;
}

h2{
	color:#B21F58;
	font-size:4rem;
	text-transform:uppercase;
	font-style:italic;
	margin:2rem;
}

h3{
	font-size:2rem;
}

h4{
	color:#B21F58;
	font-size:4rem;
	text-transform:uppercase;
	font-style:italic;
	margin-bottom:2rem;
	text-align:center;
}

p{
	font-size:1.5rem;
	text-align:left;
	font-weight:normal;
}

h5{
	font-size:1.5rem;
	text-align:center;
	font-weight:normal;
}

h6{
	font-size:1.5rem;
	text-align:left;
	font-weight:normal;
	margin:1rem 0;
}


/*-----------About us Page-----------------*/
#left_container{
	width:21%;
	height:auto;
	float:left;
	margin-top:0;
	margin-bottom:1rem;
	margin-left:2%;
	margin-right:2%;
	text-align:center;
}
#middle_1_container{	
	width:21%;
	height:auto;
	float:left;
	margin-top:0;
	margin-bottom:1rem;
	margin-left:2%;
	margin-right:2%;
	text-align:center;
}
#middle_2_container{	
	width:21%;
	height:auto;
	float:left;
	margin-top:0;
	margin-bottom:1rem;
	margin-left:2%;
	margin-right:2%;
	text-align:center;
}

#right_container{
	width:21%;
	height:auto;
	float:left;
	margin-top:0;
	margin-bottom:1rem;
	margin-left:2%;
	margin-right:2%;
	text-align:center;
}
.image_container {
	width: 100%;
	height: 100%;
	margin: 2%;
}

.image_container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}


.name_link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
	font-size:3rem;
	text-transform:uppercase;
	font-style:italic;
	margin:1rem;
	font-weight:bold;
	color:#B21F58;
	text-decoration:none;
}
.name_link:hover {
    text-decoration: underline;
	color:#B21F58;
}
.name_link:active {
    text-decoration: underline;
	color:#B21F58;
}
.name_link a:link{
	text-decoration:none;
}
.name_link a:visited{
	text-decoration:none;
}

/*---personal pages---*/
#personal_profile{
	width:100%;
	height:auto;
	overflow: hidden;
}

#person_description{
	width:65%;
	height:auto;
	float:left;
	margin:2%;
	text-align:left;
} 
#profile_pic{
	width:30%;
	height:auto;
	float:left;
	box-sizing: border-box;
}
.work {
  width: 75%;
  margin: 0 auto;
}
.sam video {
  height:100vh;
  width:auto;
  margin: 0 auto;
  display: block;
}
.work video {
  width: 100%;
  height: auto;
  display: block;
}
.work img {
  width: 100%;
  height: auto;
  display: block;
}

.breadcrumbs {
    font-size: 1.5rem;
    font-weight: normal;
    list-style: none;
    text-align: left;
    padding: 0;
    margin-bottom: 2rem;
}

.breadcrumbs li {
    display: inline;
}
.breadcrumbs li + li::before {
    content: " > ";
    padding: 0 5px;
}
.breadcrumbs li:last-child {
    font-weight: bold; 
}
.breadcrumbs a:link {
    color: #000;
    text-decoration: none;
}
.breadcrumbs a:visited {
    color: #000;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs a:active {
    color:#B21F58;
    text-decoration: underline;
}

/* Tablet / half-screen laptops */
@media (max-width: 1000px) {
    #countdown_container {
        font-size: 6rem;
    }
    .name_link {
        font-size: 2.2rem;
    }
	#person_description{
        font-size:0.85rem;
        line-height:1.5rem;
        text-align:left;
		width:95%;
		height:auto;
		margin:2%;
    }
	
	#profile_pic{
	width:75%;
	height:auto;
	float: none;
	margin:0 auto;
	box-sizing: border-box;
	}
}


/*-----------phone adaptive----------------*/
@media (max-width: 768px) {
	#logo_container img{
		max-height:100px;
	}
	#nav_bar_container{
        float:right;
        padding-top:1rem;
        padding-right:1rem;
    }
	#nav_bar_list {
		display:flex;
		flex-direction:column;   
        align-items:flex-end;    
        gap:1rem;
	}
	#nav_bar_list li{
    font-size:1rem;
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:bold;
	}
	#countdown_container{	
	background-color:#F6EACE;
	font-size:4rem;
	text-align:center;
	font-weight:bold;
	overflow: hidden;
	width:100%;
	height:auto;
	padding-top:0rem;
	padding-bottom:0rem;
	margin:0;
	}	

	#description_container{
    column-count:1;
	overflow: hidden;
	width:95%;
	height:auto;
	margin:2%;
    }
	
	#footer_container{
		padding:1rem;
	}
	
	h1{
	color:#B21F58;
	font-size:3rem;
	text-align:center;
	text-transform:uppercase;
	font-style:italic;
	}

	h2{
	color:#B21F58;
	font-size:2rem;
	text-transform:uppercase;
	font-style:italic;
	margin:1rem;
	}

	h3{
	font-size:1rem;
	}

	h4{
	color:#B21F58;
	font-size:2rem;
	text-transform:uppercase;
	font-style:italic;
	margin:0;
	text-align:center;
	}
	p{
	font-size:1rem;
	text-align:left;
	font-weight:normal;
	}
	
	#left_container,
    #middle_1_container,
    #middle_2_container,
    #right_container{
        float:none;
        width:100%;
        margin:1rem 0;
        text-align:center;
    }

    .image_container{
        max-width:300px;
        margin:0 auto;
    }
	
	#text_container{
        float:none;
        width:100%;
        margin:1rem auto;
        text-align:center;
        font-size:1.5rem;
		box-sizing: border-box;
    }
    .slideshow-container{
        float:none;
        width:100%;
        margin:1rem auto;
		aspect-ratio: 16/9;
		overflow: hidden;
		position:relative;
    }
    .prev,
    .next{
        font-size:2rem;
        padding:0.5rem;
    }
	#person_description{
        font-size:0.85rem;
        line-height:1.5rem;
        text-align:left;
		width:95%;
		height:auto;
		margin:2%;
    }
	
	#profile_pic{
	width:100%;
	height:auto;
	box-sizing: border-box;
	}
	.work{
        width:100%;
        max-width:600px;
        margin:2rem auto;
    }
	    .social-links{
        flex-direction:column;
        gap:1.5rem;
    }

}