*{

	margin: 0; 
	padding: 0;
	box-sizing: border-box;
	
}
header 
{
	background-image:linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.5)), url(../img/chicago.jpg); /** reduce opacity **/
	height: 100vh;
	background-size: cover ;
	background-position: center ;
	baseline-shift: all;
	display: block;
}
.p{

}
body
{
	font-family: monospace;
}
/**Navigation**/

.logo-and-nav
{

	display: flex;
	justify-content: space-around;
	list-style: none; /** remove points **/
	align-items: center;
}	/**logo**/
.logo img
{
	width: 110px;
	height: auto;
	margin-top:20px; 


}
.nav-links
{
	display: flex;
	justify-content: space-around;
	width: 60%;
	
}

.nav-links li 
{
	margin-top: -5px;
	list-style: none;
}

.nav-links li a 
{
	display:table-cell;
	color: white;
	text-decoration: none;
	padding: 5px 20px;
	font-size: 15px;
	margin-right: 10px;
	vertical-align:middle;
}

.nav-links li a:hover
{
	border: 1px solid white;
	background-color: darkorange;
	transition: all 0.4s ease-in;
}

.break
{
	display: none;

}



/**video**/
.podcast
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.podcast h1 /**welcome heading**/
{
	color: white;
	text-transform: uppercase;
	font-size: 70px;
	text-align: center;
	margin-top: 120px;
	max-width: 100%;
}

.button
{
	margin-top: 30px;
}

.btn
{
	border: 1px solid white;
	padding: 10px 30px;
	color:white;
	text-decoration: none;
	margin-right:5px;
	font-size: 13px;
	text-transform: uppercase;

}

.btn:hover
{
	background-color: darkorange;
	transition: all 0.4s ease-in;
}

/**social media**/
.social{
	margin-top: 30px;

}

.social a img
{
	width: 40px;
	height: auto;
}


.twitter
{
	padding: 40px;
}


/**footer**/
.footer 
{
	text-align: center;
	margin-top: 1px;
	background: black;
	color: white;
	margin-bottom: 0p;  
}
.burger div
{
	 width: 25px;
	 height: 2px;
	 background-color: white;
	 margin:5px;
	 transition: all 0.3s ease;
}	
.burger
{
	display: none;
}
	
@media screen and (max-width: 1140px)
	{
	.nav-links {
		width: 70%;
	}



	.podcast h1 /**welcome heading**/
	{
	
	
	font-size: 50px !important;
	margin-top: 120px;
	
	}

	.break
	{
	display: bloc;
	margin: 0px;
	}

	.button
	{	
	margin-top: 30px;
	
	}


	}

@media screen and (max-width: 768px)
	{
		body{
			overflow-x: hidden;
			overflow-y: hidden;
	}
	.nav-links {
		position: absolute;
		right: 0px;
		height: 92vh;
		top: 2vh;
		background-color: rgba(0,0,0,0.9);
		display: none;
		flex-direction: column;
		align-items: center;
		width: 70%;
		transform: translateX(100%);
		transition: transform 0.5s ease-in;

	}

	.btn {
	padding: 5px 15px;
	
	
	margin-bottom: 5px;
}
	




	.burger{

		display: block !important;
		cursor: pointer;
	}



.logo{


	margin-left: 30%;
}




	}

.nav-active
{
	transform: translateX(0%);
	display: flex;
}

@keyframes navLinkFade {
	from {
		opacity: 0 !important;
		transform: translateX(50px);
	}
	to{
		opacity: 1 !important;;
		transform: translateX(0px);
	}
}

.toggle .line1{
	transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2{
	opacity: 0;
}

.toggle .line3{
	transform: rotate(45deg) translate(-5px, -6px);
}

@media screen and (max-width: 411px){
.btn {
	padding: 5px 15px;
}
}

@media screen and (max-width: 346px){
.btn {
	padding: 2px 3px;

	display: block;
	margin-bottom: 5px;
}
.podcast h1{
	margin-top: 90px;

}


}
@media screen and (max-height: 500px){

.podcast h1{
	margin-top: 50px;
}


}


@media screen and (max-width: 290px){
.btn {
	padding: 4px ;
	display: block;
	margin-bottom: 5px;
}
.podcast h1{
	margin-top: 60px;
}


}