/*Media Queries*/
@media screen  and (min-device-width: 2400px) 
  and (max-device-width: 8800px) {
  	  	html, body {
  		background: url(../assets/bg/BGBlack.jpg);
  	}

  		.container-film-1 {
		width: 80%;
	}
		.des-vid {
		display: none;
	}
	nav {
		background: url(../assets/bg/light-grading-hd.jpg) repeat 0% 0%;
		background-size: cover;
	}
.cursor-auto {
	cursor: auto;
  }
	.responsive-video .cabaret-video {
		width: 100%;
		height: 600px;
	}
}

@media screen  and (min-device-width: 2400px) 
  and (max-device-width: 2780px) {

	.responsive-video iframe {
		width: 100%;
		height: 580px;
	}
	.responsive-video .what {
		width: 100%;
		height: 394px;
	}
	.twh{
		font-size: 1.8rem;
	}
	.heading{
		font-size: 2.5rem;
	}
	.about-txt{
		font-size: 1.9rem;
		line-height: 3.4rem;
	}
	.thumb{
		width: 40rem;
	}
	.card h3{
		font-size: 2.1rem;
		line-height: 2.5rem;
	}
	.resume {
		font-size: 3.3rem;
	}
	.academic a::after {
		width: 227px;
		height: 0.7px;
		background: rgba(255, 255, 255, 0.7);
	}
	.professional a::after{
		width: 269px;
		height: 0.7px;
		background: rgba(255, 255, 255, 0.7);
	}
	.pdf{
		width: 3.3rem;
		margin-left: 1.4rem;
	}
    .c-txt{
    	font-size: 1.4rem;
    }
    .social li a img{
    	width: 2.4rem;
    }

    /*Secciones*/
	.container {
		width: 73%;
	}
	.container-1, .sec-header {
		width: 80%;
		margin: 0 auto;
	}
	.container-film {
		width: 80%;
		margin: 0 auto;
	}
	.home-left {
		width: 46%;
		padding: 1.3rem;
	}
	.home-right {
		width: 46%;
		padding: 1.3rem;
	}	
	.about-right {
		width: 48%;
	}
	.thumb{
			width: 53rem;
			margin: 2rem;
		}
	.card h3{
		font-size: 2.1rem;
		line-height: 2.5rem;
	}

	/*FILMES*/
	#section-film-1, #section-film-2, #section-film-3, #section-film-4, #section-film-5{
		width: 100vw;
	}
	.container-film-1 {
		width: 80%;
	}

	.project-video {
		width: 60%;
		position: relative;
	}



	#section-film-3 .project {
		width: 20vw;
	}

	.des-vid {
		display: none;
	}
	.h-vid {
		display: flex;
		margin-top: -11rem;
	}

	.responsive-video .cabaret-video {
		width: 100%;
		height: 500px;
	}
}
@media screen  and (min-device-width: 2400px) 
  and (max-device-width: 2560px){
  		.thumb{
		width: 49rem;
		margin: 2rem;
	}

  }

@media screen  and (min-device-width: 1800px) 
  and (max-device-width: 2100px){
  		.thumb{
		width: 40rem;
		margin: 2rem;
	}

  }

@media screen  and (min-device-width: 1801px) 
  and (max-device-width: 2399px){
	.responsive-video iframe {
		width: 100%;
		height: 450px;
	}

	.des-vid {
		display: none;
	}
	.h-vid {
		display: flex;
	}

}

@media screen and (max-width: 1800px){

	.responsive-video iframe {
		width: 100%;
		height: 400px;
	}
	.responsive-video .cabaret-video {
		width: 100%;
		height: 320px;
	}
	.des-vid {
		display: block;
	}
	.h-vid {
		display: none;
	}
}

@media screen  and (min-device-width: 1470px) 
  and (max-device-width: 1600px) {

	.responsive-video iframe {
		width: 100%;
		height: 400px;
	}

  	#section5 {
  		height: auto;
  	}
  	.thumb{
	width: 34rem;
	margin: 1.3rem;
	}
  }

@media screen  and (min-device-width: 1000px) 
  and (max-device-width: 1300px) {
  	.main {
  		height: auto;
  	}
  		.responsive-video iframe {
		width: 100%;
		height: 650px;
	}
	.responsive-video .cabaret-video {
		width: 100%;
		height: 500px;
	}
	.project {
		width: 80%;
	}
	.credits-col{
		margin-left: 3rem;
	}

  }

@media screen  and (min-device-width: 781px) 
  and (max-device-width: 969px) {
  		.responsive-video iframe {
		width: 100%;
		height: 500px;
	}

  }

@media screen  and (min-device-width: 781px) 
  and (max-device-width: 1300px) {


  	#section5 {
  		height: auto;
  	}

/*  	.thumb{
	width: 23rem;
	margin: 1rem;
	}*/
  	#section-film-2{
  		width: 100%;
  	}
  	.container-film-1{
  		width: 86%;
  		margin: 0 auto;
  	}
  	.container-film-2 {
	width: 90%;
	display: flex;
	flex-direction: column;
}
  	.project-video {
  		width: 100%;
  		height: auto;
  		padding-bottom: 3rem;
  	}

  	.des-vid{
  		display: none;
  	}

  	.h-vid {
	display: block;
}

#section-film-2 {
	width: 100%;
  }
  #section7 {
	background: url(../assets/bg/Punch-hole-park-mobile.jpg) center center / cover no-repeat;
}
    nav ul {
    	padding-top: 11%;
    }
}

@media screen  and (min-device-width: 781px) 
  and (max-device-width: 980px) {
  	.thumb{
	width: 18rem;
	margin: 1rem;
	}
  }


@media screen  and (min-device-width: 681px) 
  and (max-device-width: 780px) {  	
  	.thumb{
	width: 23rem;
	margin: 1rem;
	}
	.container-film {
		justify-content: center;
	}
  	.project-video {
  		width: 100%;
  		height: auto;
  		padding-bottom: 3rem;
  	}
	.responsive-video iframe {
		width: 100%;
		height: 500px;
	}
	.responsive-video .cabaret{
		width: 100%;
		height: 
		margin:0 auto;
	}
 	#section7 {
	background: url(../assets/bg/Punch-hole-park-mobile.jpg) center center / cover no-repeat;
	}
    nav ul {
    	padding-top: 28%;
    }
    .container-film-2 {
    	flex-wrap: wrap;
    }
}



@media screen and (max-width: 680px) {


.section {
  width: 100%;
  height: 100vh;
  scroll-snap-align: none;
  scroll-snap-stop: normal;


}
.y-mandatory {
  scroll-snap-type: none;
}

	#section1 {
		height: 100vh;
	}
.container {
	width: 90%;
}
.home-left {
	width: 100%;
	padding:.5rem 0;
	/*border: 1px solid #fff;*/
}
.home-right {
	width: 100%;
	padding:.5rem 0;
	margin-top: -8px;
	/*border: 1px solid #fff;*/
	display: none;
}
	.twh {
	font-size: 1.2rem;
	line-height: 3rem;
	padding: 0;
}
.hide {
	display: inline;
}


#section2, #section3 {
	height: auto;
	padding: 10rem 0 5rem 0;
	}
#section4 {
	height: auto;
	padding: 10rem 0 5rem 0;
}

#section5 {
	height: auto;
	padding: 10rem 0 5rem 0;
}
 #section7 {
	height: 120vh;
	padding: 10rem 0 5rem 0;
	background: url(../assets/bg/Punch-hole-park-mobile.jpg) center center / cover no-repeat;
}

.about-2-heading {
	display: none;
}
.about-txt {
	padding-top: 1.3rem;
	padding-bottom: 1.3rem;
}

.container-resume {
	flex-direction: column;
	align-items: center;
}
.resume-left, .resume-right {
	height: 100px;
}

.container-contact{
	width: 100%;
	padding: 7rem 2rem;
}
.contact{
	width: 100%;
	align-items: center;
}
.c-txt {
	text-align: center;
}
.social{
	justify-content: center;
}
.social li a img {
	margin-right: 1.3rem;
}

.modal-content {
	width: 90%;
}

.des-vid {
	display: none;
}
.land-vid {
	display: none;
}

.res-vid {
	display: block;
	margin:0 auto;
}

.h-vid {
	display: none;
}

#section-film-2 {
	width: 100vw;
}
  	.thumb{
	width: 20rem;
	margin: 1rem;
	}
    .container-film-2 {
    	flex-wrap: wrap;
    }


.about-left{
	width: 100%;
}
.about-right {
    width: 100%;
    padding-left: 20px;
}
}



@media screen and (max-width: 380px){
	#section2 {
	height: auto;
	padding: 10rem 0 5rem 0;
	}
	#section3, #section4, #section5 {
	height: auto;
	padding: 3rem 0 5rem 0;
	}
	.container {
		width: 98%;
	}
	.container-1 {

	}
	.thumb {
    width: 27rem;
    margin: 1rem auto;
    position: relative;
    overflow: hidden;
	}
	.resume {
		font-size: 2rem;
	}
	.nombre {
		font-size: 1.7rem;
	}
	.nombre::after {
		width: 162px;
	}
	.res-vid{
	width: 100%;
	margin:0 auto;
	}
.h-vid {
	display: none;
}
 #section7 {
	background: url(../assets/bg/Punch-hole-park-mob1.jpg) center center / contain no-repeat;
}
}



@media screen and (max-width: 330px){
	#section1 {
		height: auto;
		padding-top: 8rem;
		padding-bottom: 6rem;
	}
	.container {
		width: 100%;
	}
	.twh {
		font-size: 1.2rem;
		line-height: 2.5rem;
	}
	#section5{
		padding: 9rem 0 5rem 0;
	}
	.res-vid{
	width: 96%;
	margin:0 auto;
	}
.h-vid {
	display: none;
}
#section-film-3 {
	padding: 2rem 0 0 0;
}
.container-film {
	width: 96%;
}
.project-video {
	height: 273px;
}
.project {
	padding: 2rem;
}
}