/*<====================ABOUT ME====================>*/


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');


/*<====================BODY====================>*/


body {
	background-image:url(image/wallpaper.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-attachment:fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	overflow-x: hidden;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}


main {
	margin-top: 40px;
	padding: 30px 10%;
	background-color: rgba(0,0,0,0.55);
	box-shadow: 1px 1px 4px 0 rgba(0,0,0,.4);
	display: block;
	
}

.line{
	text-align: center;
	color: #BCBCBC;
	display: block;
	width: 90%;
}

hr{ 
	height: 1px;
	color: #BCBCBC;
	background-color: #BCBCBC;
	border: none;
	margin: auto;
	margin-top: 10px;
}

/*<====================SCROLLBAR====================>*/


::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
::-webkit-scrollbar-thumb {
  background: #888; 
}

::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


/*<====================NAVBAR====================>*/


.icon {
	width: 20px;
	height: auto;
}

@media only screen and (min-width: 320px) {
	.icon {
		width: 50px;
		height: auto;
		display: none;	
	}
}

@media only screen and (min-width: 768px) {
	.icon {
		width: 50px;
		height: auto;
		display: block;	
	}
}

@media only screen and (min-width: 1000px) {
	.icon {
		width: 50px;
		height: auto;
		display: block;
	}
}

li, a {
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
	font-size: 20px;
	color: #fff;
	text-decoration: none;
}

header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 10%;
	background-color: rgba(0,0,0,0.75);
	box-shadow: 1px 1px 4px 0 rgba(0,0,0,.4);
}

.nav_links {
	list-style: none;
	color: #fff;
}

.nav_links li {
	display: block;
	padding: 0px 10px;
}

.nav_links li a{
	transition: all 0.3s ease 0s;
}

.nav_links li a:hover {
	color: #12AB79;
}

@media only screen and (min-width: 0px) {
	.nav_links {
	display: none;
	}
	header{
	display: none;
	justify-content: space-between;
	align-items: center;
	padding: 30px 10%;
	background-color: rgba(0,0,0,0.75);
	}
	.header_m{
	display: none;
	}
}

@media only screen and (min-width: 100px) {
	.nav_links {
	display: none;
	}
	header{
	display: none;
	justify-content: space-between;
	align-items: center;
	padding: 30px 10%;
	background-color: rgba(0,0,0,0.75);
	}
	.header_m{
	display: block;
	}
}

@media only screen and (min-width: 320px) {
	.nav_links {
	display: none;
	}
	header{
	display: none;
	justify-content: space-between;
	align-items: center;
	padding: 30px 10%;
	background-color: rgba(0,0,0,0.75);
	}
	.header_m{
	display: block;
	}
}

@media only screen and (min-width: 768px) {
	.nav_links {
	display: block;
	}
	header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 10%;
	background-color: rgba(0,0,0,0.75);
	}
	.header_m{
	display: none;
	}
}

@media only screen and (min-width: 1000px) {
	.nav_links {
	display: block;
	}
	header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 10%;
	background-color: rgba(0,0,0,0.75);
	}
	
	.header_m{
	display: none;	
	}
}

.icon_m {
	height: 40px;
	width: auto;
}

header2 {
	background-color: rgba(0,0,0,0.75);
	box-shadow: 1px 1px 4px 0 rgba(0,0,0,.4);
	width: 100%;
	position:fixed;
}

.header_m {
	position: relative;
	width: 100%;
	z-index: 3;
}

.header_m ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

.header_m ul a {
	display: block;
	padding: 20px;
	color: #fff;
	text-decoration: none;

}

.header_m ul a:hover {
	display: block;
	padding: 20px;
	color: #12AB79;
	background-color: rgba(0,0,0,0.75);
}

.header2 ul a {
	dispaly: block;
	padding: 40px;
}

.menu_m li{
	color: #fff;
}

.menu_m li:hover {
	color: #12AB79;
}

.header_m .logo_m {
	float: left;
	display: block;
	font-size: 2em;
	padding: 10px 20px;
}

.header_m .menu_m {
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
}

.header_m .menu-icon { 
	padding: 28px 20px;
	position: relative;
	cursor: pointer;
	float: right;
	display: block;
}

.header_m .menu-icon .nav-icon {
	background: #fff;
	display: block;
	height: 2px;
	width: 18px;
	position: relative;
	transition: background .2s ease-out;
}

.header_m .menu-icon .nav-icon:before {
	background: #fff;
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	transition: all .2s ease-out;
	top: 5px;
}

.header_m .menu-icon .nav-icon:after {
	background: #fff;
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	transition: all .2s ease-out;
	top: -5px;
}

.header_m .menu_button {
	display: none;
}

.header_m .menu_button:checked ~ .menu_m {
	max-height: 270px;
}

.header_m .menu_button:checked ~ .menu-icon .nav-icon {
	background: transparent;
}

.header_m .menu_button:checked ~ .menu-icon .nav-icon:before {
	transform: rotate(-45deg);
	top: 0;
}

.header_m .menu_button:checked ~ .menu-icon .nav-icon:after {
	transform: rotate(+45deg);
	top: 0;
}

.menu-toggle {
	color: #fff;
	floar: right;
	font-size: 20px;
	padding-left: 97%;
}


/*<====================FOOTER====================>*/


footer {
	background: rgba(0,0,0,.75);
	padding: 30px 0 30px 0;
	width: 100%;
	margin-top: auto;
}

.rights-text {
	color: #fff;
	font-family: 'Open Sans', sans-serif;
}

.footer-container {
	max-width: 100%;
	margin: auto;
	padding: 0 10%;
	display: flex;
	justify-content: space-between;
	alighn-items: center;
	flex-wrap: wrap-reverse;

}

.footer-container-index {
	max-width: 200%;
	margin: auto;
	padding: 0 10%;
	display: flex;
	justify-content: space-between;
	alighn-items: center;
	flex-wrap: wrap-reverse;
	text-size: 100px;
}

.name_logo {
	width: 150px;
}

.social-media {
	margin: 20px 0;
}

.social-media a {
	color: #fff;
	margin-right: 25px;
	font-size: 22px;
	text-decoration: none;
	transition: .4 ease-out;
}

.social-media a:hover {
	color: #12AB79;
	transition: .4 ease-out;
}

.border {
	width: 100px;
	height: 4px;
	background: #12AB79; 
}


@media only screen and (min-width: 320px) {
	.name_logo {
	width: 80px;
	}
	.social-media a {
	color: #fff;
	margin-right: 25px;
	font-size: 30px;
	text-decoration: none;
	transition: .4 ease-out;
	}
	.rights-text {
	font-size: 14px;
	}
}


@media only screen and (min-width: 1000px) {
	.name_logo {
	width: 150px;
	}
	.social-media a {
	color: #fff;
	margin-right: 25px;
	font-size: 22px;
	text-decoration: none;
	transition: .4 ease-out;
	}
	.rights-text {
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	}
}


.name_logo_index {
	width: 150px;
}

.social-media-index {
	margin: 20px 0;
}

.social-media-index a {
	color: #fff;
	margin-right: 25px;
	font-size: 22px;
	text-decoration: none;
	transition: .4 ease-out;
}

.social-media-index a:hover {
	color: #12AB79;
	transition: .4 ease-out;
}

.border {
	width: 100px;
	height: 4px;
	background: #12AB79; 
}


@media only screen and (min-width: 320px) {
	.name_logo_index {
	width: 180px;
	}
	.social-media-index a {
	color: #fff;
	margin-right: 45px;
	font-size: 80px;
	text-decoration: none;
	transition: .4 ease-out;
	}
	.rights-text-index {
	font-size: 45px;
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	}
}


@media only screen and (min-width: 1000px) {
	.name_logo-index {
	width: 300px;
	}
	.social-media-index a {
	color: #fff;
	margin-right: 25px;
	font-size: 25px;
	text-decoration: none;
	transition: .4 ease-out;
	}
	.rights-text-index {
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 28px;
	}
}
/*<====================INDEX====================>*/


header_index {
	padding-botom: 50px;
	width: 100%;
	height: auto;
}

.logo {
	display: block;
	padding-bottom: 80px;
	margin-left: auto;
	margin-right: auto;
}

.wrapper {
	width: 100%;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
}

@media only screen and (min-width: 320px) {
	.logo {
	width: 75px;
	height: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	scale: 40%;
	}	
}

@media only screen and (min-width: 768px) {
	.logo {
	width: 100px;
	height: auto;
	padding-top: 50px;
	margin-bottom: 50px;
	scale: 100%;
	}
}
	
@media only screen and (min-width: 1000px) {
	.logo {
	width: 100px;
	height: auto;
	padding-top: 80px;
	padding-bottom: 50px;
	}
}

.index_spacer {
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	box-shadow-bottom: 10px; 
}

.index_button {
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	opacity: 0.6;
	-webkit-filter: grayscale(10%);
	-moz-filter:    grayscale(10%);
	-ms-filter:     grayscale(10%);
	-o-filter:      grayscale(10%);
}	

.index_button:hover {
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	opacity: 1;
	-webkit-filter: grayscale(0%);
	-moz-filter:    grayscale(0%);
	-ms-filter:     grayscale(0%);
	-o-filter:      grayscale(0%);
}


/*<====================INDEX/REEL====================>*/


.index_reel{
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	opacity: 0.6;
	-webkit-filter: grayscale(10%);
	-moz-filter:    grayscale(10%);
	-ms-filter:     grayscale(10%);
	-o-filter:      grayscale(10%);	
}

.index_reel:hover {
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	opacity: 1;
	-webkit-filter: grayscale(0%);
	-moz-filter:    grayscale(0%);
	-ms-filter:     grayscale(0%);
	-o-filter:      grayscale(0%);
	 
}

@media only screen and (min-width: 320px) {
	#reel {display:none}
	#reelm {display:block}
}

@media only screen and (min-width: 1000px) {
	#reel {display:block}
	#reelm {display:none}
}


/*<====================INDEX/EXTRA====================>*/


.index_extra{
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	opacity: 0.6;
	-webkit-filter: grayscale(10%);
	-moz-filter:    grayscale(10%);
	-ms-filter:     grayscale(10%);
	-o-filter:      grayscale(10%);	
}

.index_extra:hover {
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	opacity: 1;
	-webkit-filter: grayscale(0%);
	-moz-filter:    grayscale(0%);
	-ms-filter:     grayscale(0%);
	-o-filter:      grayscale(0%);
	 
}

@media only screen and (min-width: 320px) {
	#extra {display:none}
	#extram {display:block}
}

@media only screen and (min-width: 1000px) {
	#extra {display:block}
	#extram {display:none}
}


/*<====================INDEX/ABOUT====================>*/


.index_about{
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	opacity: 0.6;
	-webkit-filter: grayscale(10%);
	-moz-filter:    grayscale(10%);
	-ms-filter:     grayscale(10%);
	-o-filter:      grayscale(10%);	
}

.index_about:hover {
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	opacity: 1;
	-webkit-filter: grayscale(0%);
	-moz-filter:    grayscale(0%);
	-ms-filter:     grayscale(0%);
	-o-filter:      grayscale(0%);
	 
}

@media only screen and (min-width: 320px) {
	#about {display:none}
	#aboutm {display:block}
}

@media only screen and (min-width: 1000px) {
	#about {display:block}
	#aboutm {display:none}
}


/*<====================INDEX/CONTACT====================>*/


.index_contact{
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	opacity: 0.6;
	-webkit-filter: grayscale(10%);
	-moz-filter:    grayscale(10%);
	-ms-filter:     grayscale(10%);
	-o-filter:      grayscale(10%);	
}

.index_contact:hover {
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	opacity: 1;
	-webkit-filter: grayscale(0%);
	-moz-filter:    grayscale(0%);
	-ms-filter:     grayscale(0%);
	-o-filter:      grayscale(0%);
	 
}

@media only screen and (min-width: 320px) {
	#contact {display:none}
	#contactm {display:block}
}

@media only screen and (min-width: 1000px) {
	#contact {display:block}
	#contactm {display:none}
}


/*<====================REEL====================>*/


main {
	width: 90vw;
	margin: 0 auto;
	padding: 30px 20px;
}

.wrapper_reel {
	background: rgba(0,0,0,0.50);
	padding: 40px 0 40px 0;
	text-align: center;
	margin-top: 5%;
	margin-bottom: 5%;
}

.reel_title {
	text-align: center;
	color: #BCBCBC;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	margin-top: 70px;
	font-size: 20px;
}

.project {
	text-align: left;
	color: #BCBCBC;
	font-family: 'Open Sans', sans-serif;
	font-weight: 100;
	font-size: 18px;
	margin-top: 10px;
	margin-left: 5%;
}

.bg-modal {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.70);
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 5;
	display: none;
}

.modal-content {
	background-color: white;
	text-align: center;
	position: relative;
}

.close {
	position: absolute;
	top: -60px;
	right: -60px;
	font-size: 42px; 
	color: white;
	transform: rotate(45deg);
	cursor: pointer;
}
	
.bg-modal1 {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.70);
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 5;
	display: none;
}

.modal-content1 {
	background-color: white;
	text-align: center;
	position: relative;
}

.close1 {
	position: absolute;
	top: -60px;
	right: -60px;
	font-size: 42px; 
	color: white;
	transform: rotate(45deg);
	cursor: pointer;
}


.reel_button{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);	
}

.reel_button:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#reel_button {display:none}
	#reel_button_m {display:block}
	.project {
	font-size: 14px;
}
}

@media only screen and (min-width: 1000px) {
	#reel_button {display:block}
	#reel_button_m {display:none}
	.project {
	font-size: 18px;
}
}





.reel_minerva{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);	
}

.reel_minerva:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#minerva {display:none}
	#minerva_m {display:block}
	.project {
	font-size: 14px;
}
}

@media only screen and (min-width: 1000px) {
	#minerva {display:block}
	#minerva_m {display:none}
	.project {
	font-size: 18px;
}
}

.reel_otyum{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);	
}

.reel_otyum:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#otyum {display:none}
	#otyum_m {display:block}
	.project {
	font-size: 14px;
}
}

@media only screen and (min-width: 1000px) {
	#otyum {display:block}
	#otyum_m {display:none}
	.project {
	font-size: 18px;
}
}


.reel_cuento_chino{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);	
}

.reel_cuento_chino:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#cuento_chino {display:none}
	#cuento_chino_m {display:block}
	.project {
	font-size: 14px;
}
}

@media only screen and (min-width: 1000px) {
	#cuento_chino {display:block}
	#cuento_chino_m {display:none}
	.project {
	font-size: 18px;
}
}

.reel_pierde_turno{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);	
}

.reel_pierde_turno:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#pierde_turno {display:none}
	#pierde_turno_m {display:block}
	.project {
	font-size: 14px;
}
}

@media only screen and (min-width: 1000px) {
	#pierde_turno {display:block}
	#pierde_turno_m {display:none}
	.project {
	font-size: 18px;
}
}

.reel_caballo{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);	
}

.reel_caballo:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#caballo {display:none}
	#caballo_m {display:block}
	.project {
	font-size: 14px;
}
}

@media only screen and (min-width: 1000px) {
	#caballo {display:block}
	#caballo_m {display:none}
	.project {
	font-size: 18px;
}
}

.reel_alhambra{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_alhambra:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#alhambra {display:none}
	#alhambra_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#alhambra {display:block}
	#alhambra_m {display:none}
}

.reel_erruz{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_erruz:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#erruz {display:none}
	#erruz_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#erruz {display:block}
	#erruz_m {display:none}
}

.reel_elem{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_elem:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#elem {display:none}
	#elem_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#elem {display:block}
	#elem_m {display:none}
}

.reel_endorphin{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_endorphin:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#endorphin {display:none}
	#endorphin_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#endorphin {display:block}
	#endorphin_m {display:none}
}

.reel_lugar{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_lugar:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#lugar {display:none}
	#lugar_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#lugar {display:block}
	#lugar_m {display:none}
}

.reel_rotos{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_rotos:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#rotos {display:none}
	#rotos_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#rotos {display:block}
	#rotos_m {display:none}
}

.reel_humanidad{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_humanidad:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#humanidad {display:none}
	#humanidad_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#humanidad {display:block}
	#humanidad_m {display:none}
}

.reel_tina{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_tina:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#tina {display:none}
	#tina_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#tina {display:block}
	#tina_m {display:none}
}

.reel_afterlife{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_afterlife:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#afterlife {display:none}
	#afterlife_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#afterlife {display:block}
	#afterlife_m {display:none}
}

.reel_ou{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_ou:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#ou {display:none}
	#ou_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#ou {display:block}
	#ou_m {display:none}
}

.reel_gallinita_ciega{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_gallinita_ciega:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#gallinita_ciega {display:none}
	#gallinita_ciega_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#gallinita_ciega {display:block}
	#gallinita_ciega_m {display:none}
}

.reel_spend_day{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_spend_day:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#spend_day {display:none}
	#spend_day_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#spend_day {display:block}
	#spend_day_m {display:none}
}

.reel_sobre_interpretacion{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_sobre_interpretacion:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#sobre_interpretacion {display:none}
	#sobre_interpretacion_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#sobre_interpretacion {display:block}
	#sobre_interpretacion_m {display:none}
}

.reel_courage{
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1);
	-moz-filter:    brightness(1);
	-ms-filter:     brightness(1);
	-o-filter:      brightness(1);
}

.reel_courage:hover {
	width: 90%;
	height: auto;
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	-webkit-filter: brightness(1.2);
	-moz-filter:    brightness(1.2);
	-ms-filter:     brightness(1.2);
	-o-filter:      brightness(1.2);
	 
}

@media only screen and (min-width: 320px) {
	#courage {display:none}
	#courage_m {display:block}
}

@media only screen and (min-width: 1000px) {
	#courage {display:block}
	#courage_m {display:none}
}


/*<====================ABOUT ME====================>*/


.about-container {
	background: rgba(0,0,0,0.50);
	margin: 50px 0;
	padding: 40px 0 40px 0;
	mad-width: 1300px;
	dislpay: flex;
	justify-content: space-between;
	aligh-itmes: center;
	flex-wrap: wrap-reverse;
}

.image_vn {
	width: 450px;
	height: auto;
}

.about_image {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 3% 10% 10% 10%;
	
}

.about_text {
	float: left;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #BCBCBC;
	text-align: justify;
	display: block;
	margin-right: 10%;
	padding: 3% 10% 3% 10%;
}

.right_col {
	float: right;
}

.imdb {
	font-family: Impact;
	font-size: 20px;
	font-weight: 10;
	color: #BCBCBC;
	border-width: 1px;
	border-color: #BCBCBC;
	border-radius: 6px;
	text-align: justify;
	display: block;
	margin-right: 10%;
	padding: 5px 10px;
	background-color: transparent;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
}

.imdb:hover {
	font-family: Impact;
	font-size: 20px;
	font-weight: 10;
	color: #000000;
	border-width: 1px;
	border-color: #F8C902;
	border-radius: 6px;
	text-align: justify;
	display: block;
	margin-right: 10%;
	padding: 5px 10px;
	background-color: #F8C902;
	-webkit-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
	cursor: pointer;
}

@media only screen and (min-width: 320px) {
	.image_vn {
	width: 90%;
	height:auto;
	
	}

	.about_image {
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding: 30px;
	}

	.about_text {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #BCBCBC;
	text-align: justify;
	display: block;
	margin-right: 10%;
	margin-left: 10%;
	padding: 10px;
	}
}

@media only screen and (min-width: 768px) {
	.image_vn {
	width: 50%;
	height:auto;
	}

	.about_image {
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding: 30px;
	}

	.about_text {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #BCBCBC;
	text-align: justify;
	display: block;
	margin-right: 10%;
	margin-left: 10%;
	padding: 10px;
	}
}

@media only screen and (min-width: 1000px) {
	.image_vn {
	width : 450px;
	}

	.about_image {
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding: 3% 10% 3% 10%;
	}

	.about_text {
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	color: #BCBCBC;
	text-align: justify;
	display: block;
	margin-right: 10%;
	padding: 3% 10% 3% 10%;
	}
}




/*<====================EXTRA====================>*/

.inner-width-extra {
	max-width: 98%;
	margin: auto;
	padding: 0 20px;
}



/*<====================CONTACT====================>*/


.contact-section {
	background: rgba(0,0,0,0.50);
	padding: 40px 0 40px 0;
	text-align: center;
	margin-top: 5%;
	margin-bottom: 5%;
}

@media only screen and (min-width: 320px) {
	.contact-section {
	padding: 20px 0;
	}

}

@media only screen and (min-width: 1000px) {
	.contact-section {
	margin-top: 80px 0;
	}
}

.name {
	min-width: 100%;
	max-width: 100%;
}

.email {
	min-width: 100%;
	max-width: 100%;
}

.message {
	min-width: 100%;
	max-width: 100%;
	font-family: arial;
}

.inner-width {
	max-width: 40%;
	margin: auto;
	padding: 0 20px;
}

@media only screen and (min-width: 1080px) {
	.inner-width {
	max-width: 40%;
	}

}

@media only screen and (min-width: 320px) {
	.inner-width {
	max-width: 80%;
	}

}


.contact-section h1 {
	font-size: 20px;
	color: #fff;
	margin-bottom: 40px;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-weight: 700;
	font-family: 'Open Sans', sans-serif;
	cursor: default;
}

.name, .email, .message {
	background: none;
	border: none;
	outline: none;
	border-bottom: 1px solid;
	color: #fff;
	padding: 10px 6px;
	font-size: 14px;
	margin-bottom: 40px;
}


.contact-section button {
	background: none;
	padding: 12px 40px;
	color: #12AB79;
	border: 1px solid #12AB79;
	border-radius: 8px;
	text-transform: uppercase;
	font-size: 14px;
	transition: .2s linear;
	cursor: pointer;
}

.contact-section button:hover {
	background: #12AB79;
	color: #fff;
}

@media screen and (max-width: 600px) {
	.name, .email {
	width: 100%;
	}
}

.contact_text {
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	color: #BCBCBC;
	text-align: justify-all;
	display: block;
	margin-right: 10%;
	padding: 3% 10% 3% 10%;
}

.back {
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	font-weight: 200;
	color: #BCBCBC;
	display: block;
	transition: all 0.3s ease 0s;

}

.back:hover {
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	font-weight: 200;
	color: #12AB79;
	display: block;
	transition: all 0.3s ease 0s;
}



/*<====================WORK====================>*/


.wrapper_work {
	background: rgba(0,0,0,0.50);
	padding: 40px 0 40px 0;
	text-align: center;
	margin-top: 5%;
	margin-bottom: 5%;
}

.wrapper_work h1 {
	font-size: 30px;
	color: #fff;
	margin-bottom: 40px;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-weight: 800;
	font-family: 'Open Sans', sans-serif;
	cursor: default;
}

.wrapper_work h2 {
	font-size: 18px;
	color: #fff;
	margin-bottom: 40px;
	letter-spacing: 4px;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
	cursor: default;
}

.wrapper_work h3 {
	font-size: 18px;
	color: #fff;
	text-align: left;
	padding-left: 10%;
	margin-bottom: 10px;
	letter-spacing: 4px;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
	cursor: default;
}

.stills {
	padding: 1% 20%;

	width: 90%;
}

.left-col-index {
	
}