/*PANTALLA*/

	@media screen and (min-device-width: 1025px){


	body{
	background-color: black;
	font-family: Lucida Console;
	}
	a{
		text-decoration: none;
	}

	header{
		display: inline;
	}

	#navL{
	background-color: #cacaca;
	float: left;
	width: 35%;	
	margin-top: 5%;

	}	


	#logo{
	width: 30%;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	
	}


	#navR{
	background-color: #cacaca;
	float: right;
	width: 35%;
	margin-top: 5%;
	
	}

	.navSobre{
	color: black;
	float: left;
	margin-left: 15%;
	font-size: 110%;	
	transition: 0.5s;
	
	}

	.navSobre:hover{
		transform: scale(1.5);
		text-shadow: 3px 2px #828282;
	}

	.navModels{
	color: black;
	float: right;
	margin-right: 15%;
	font-size: 110%;	
	transition: 0.5s;
	}	

	.navModels:hover{
		transform: scale(1.5);
		text-shadow: 3px 2px #828282;
	}


	.navAnim{
	color: black;
	float: left;
	margin-left: 10%;
	font-size: 110%;
	transition: 0.5s;
	}

	.navAnim:hover{
		transform: scale(1.5);
		text-shadow: 3px 2px #828282;
	}


	.navProgra{
	color: black;
	float: right;
	margin-right: 10%;
	font-size: 110%;	
	transition: 0.5s;
	}

	.navProgra:hover{
		transform: scale(1.5);
		text-shadow: 3px 2px #828282;
	}


	#SobreMi{		
		margin-left: 15%;
		width: 70%;
		height: auto;
		border: 5px groove;
		border-radius: 5px;
		border-color: #cacaca;
	}
	

	.h1SM{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		margin-left: 10%;
	}

	.pSM{
		color: #cacaca;
		margin-left: 10%;
		margin-right: 10%;
		text-align: justify;
	}

	.demoreel{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		margin-left: 10%;
	}
	
	.pSM2{
		color: #cacaca;
		margin-left: 10%;
		margin-right: 10%;
	}

	#redes{
		width: 100%;
		align-content: center;
	}

	.gmailLogo{
		width: 7%;
		margin-left: 47%;
		margin-bottom: 2%;
	}

	.gmailLogo:hover{
		transform: scale(0.75);
		transition: 0.7s;
	}


	#imgModels{
		width: 70%;
		margin-left: 15%;
		margin-top: 5%;
		padding-bottom: 3%;
		height: auto;
		border: 5px groove;
		border-radius: 5px;
		border-color: #cacaca;
	}

	.h1Mo{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		margin-left: 10%;
	}

	#anims{
		width: 70%;
		margin-left: 15%;
		margin-top: 5%;
		padding-bottom: 3%;
		height: auto;
		border: 5px groove;
		border-radius: 5px;
		border-color: #cacaca;
	}

	.h1Anim{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		margin-left: 10%;
	}

	.ani1{
		width: 100%;
		margin-bottom: 3%;
	}

	.ani2{
		width: 100%;
		margin-bottom: 3%;
	}

	.ani3{
		width: 100%;
		margin-bottom: 3%;
	}

	.ani4{
		width: 100%;
		margin-bottom: 3%;
	}
	
	#program{
		width: 70%;
		margin-left: 15%;
		margin-top: 5%;
		padding-bottom: 3%;
		height: auto;
		border: 5px groove;
		border-radius: 5px;
		border-color: #cacaca;
	}

	.h1Progra{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		margin-left: 10%;
	}

	.div1{
		width: 70%;
		color: #cacaca;
		font-size: 80%;
		margin-left: 15%;
		
	}

	.pPic1{
		width: 100%;
		transition: 0.5s;
	}

	.pPic1:hover{
		box-shadow: 0px 0px 30px rgba(150, 250, 150, 0.5);
		transform: scale(0.95);
	}

	.div2{
		width: 70%;
		color: #cacaca;
		font-size: 80%;
		margin-left: 15%;		
	}

	.pPic2{
		width: 100%;
		transition: 0.5s;
	}

	.pPic2:hover{
		box-shadow: 0px 0px 30px rgba(255, 255, 0, 0.5);
		transform: scale(0.95);
	}

	.div3{
		width: 70%;
		color: #cacaca;
		font-size: 80%;
		margin-left: 15%;		
	}

	.pPic3{
		width: 100%;
		transition: 0.5s;
	}

	.pPic3:hover{
		box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.5);
		transform: scale(0.95);
	}

	.div4{
		width: 70%;
		color: #cacaca;
		font-size: 80%;
		margin-left: 15%;
		margin-bottom: 3%;
	}

	#flecha{
		width: 5%;
		position: fixed;
		bottom: 1%;
		/*margin-left: 1%;*/
  		transform: translateY(-50%);
	}

}



/*iPad min-732 max-1024*/
	@media (min-device-width: 732px) and (max-device-width: 1024px) {

	body{
		background-color: black;
		font-family: Lucida Console;
	}

	a{
		text-decoration: none;
	}

	header{
		display: inline;
	}
	#navL{
		background-color: #cacaca;
		float: left;
		width: 35%;
		margin-top: 5%;
	}


	#logo{
		width: 30%;
		display: inline-block;
		margin-left: auto;
		margin-right: auto;
		float: left;	
	}


	#navR{
		background-color: #cacaca;
		float: left;
		width: 35%;
		margin-top: 5%;
	}

	.navSobre{
		color: black;
		float: left;
		width: 50%;
		text-align: center;
		font-size: 100%;	
		transition: 0.5s;	
	}

	.navSobre:hover{
		transform: scale(1.5);
		text-shadow: 3px 2px #828282;
	}

	.navModels{
		color: black;
		float: right;
		width: 50%;
		text-align: center;
		font-size: 100%;	
		transition: 0.5s;
	}

	.navModels:hover{
		transform: scale(1.5);
		text-shadow: 3px 2px #828282;
	}


	.navAnim{
		color: black;
		float: left;
		width: 50%;
		text-align: center;
		font-size: 100%;	
		transition: 0.5s;
	}

	.navAnim:hover{
		transform: scale(1.5);
		text-shadow: 3px 2px #828282;
	}


	.navProgra{
		color: black;
		float: right;
		width: 50%;
		text-align: center;
		font-size: 100%;	
		transition: 0.5s;
	}

	.navProgra:hover{
		transform: scale(1.5);
		text-shadow: 3px 2px #828282;
	}

	#SobreMi{		
		margin-left: 15%;
		width: 70%;
		height: auto;
		border: 5px groove;
		border-radius: 5px;
		border-color: #cacaca;
		float: right;
		
	}
	

	.h1SM{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		margin-left: 0%;
		transform: scale(0.8);
	}

	.pSM{
		color: #cacaca;
		margin-left: 10%;
		margin-right: 10%;
		text-align: justify;
	}

	.demoreel{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		margin-left: 0%;
		transform: scale(0.8);
	}
	
	.pSM2{
		color: #cacaca;
		margin-left: 10%;
		margin-right: 10%;
	}

	#redes{
		width: 100%;
		align-content: center;
	}

	.gmailLogo{
		width: 7%;
		margin-left: 47%;
		margin-bottom: 2%;
	}

	.gmailLogo:hover{
		transform: scale(0.75);
		transition: 0.7s;
	}


	#imgModels{
		margin-left: 15%;
		margin-top: 5%;
		width: 70%;
		height: auto;
		border: 5px groove;
		border-radius: 5px;
		border-color: #cacaca;
		float: right;
		padding-bottom: 3%;
	}

	.h1Mo{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		margin-left: 0%;
		transform: scale(0.8);
	}

	#anims{
		margin-left: 15%;
		margin-top: 5%;
		width: 70%;
		height: auto;
		border: 5px groove;
		border-radius: 5px;
		border-color: #cacaca;
		float: right;
		padding-bottom: 3%;
	}

	.h1Anim{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		margin-left: 0%;
		transform: scale(0.8);
	}

	.ani1{
		width: 100%;
		margin-bottom: 3%;
	}

	.ani2{
		width: 100%;
		margin-bottom: 3%;
	}

	.ani3{
		width: 100%;
		margin-bottom: 3%;
	}

	.ani4{
		width: 100%;
		margin-bottom: 3%;
	}

	#program{
		margin-left: 15%;
		margin-top: 5%;
		width: 70%;
		height: auto;
		border: 5px groove;
		border-radius: 5px;
		border-color: #cacaca;
		float: right;
	}

	.h1Progra{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		margin-left: 0%;
		transform: scale(0.8);
	}

	.div1{
		width: 100%;
		color: #cacaca;
		font-size: 80%;
		text-align: center;	
		
	}

	.pPic1{
		width: 100%;
		transition: 0.5s;
		transform: scale(0.8);
	}

	.pPic1:hover{
		box-shadow: 0px 0px 30px rgba(150, 250, 150, 0.5);
		transform: scale(0.9);
	}

	.div2{
		width: 100%;
		color: #cacaca;
		font-size: 80%;
		text-align: center;		
	}

	.pPic2{
		width: 100%;
		transition: 0.5s;
		transform: scale(0.8);
	}

	.pPic2:hover{
		box-shadow: 0px 0px 30px rgba(255, 255, 0, 0.5);
		transform: scale(0.9);
	}

	.div3{
		width: 100%;
		color: #cacaca;
		font-size: 80%;
		text-align: center;			
	}

	.pPic3{
		width: 100%;
		transition: 0.5s;
		transform: scale(0.8);

	}

	.pPic3:hover{
		box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.5);
		transform: scale(0.9);
	}

	.div4{
		width: 100%;
		color: #cacaca;
		font-size: 80%;
		text-align: center;
	}


	#flecha{
		width: 5%;
		position: fixed;
		bottom: 1%;
		margin-left: 3%;
  		transform: translateY(-50%);

  	}

	}



/*Movil max-731*/

	@media (max-device-width: 731px) {

	body{
		background-color: black;
		font-family: Lucida Console;
	}

	a{
		text-decoration: none;
	}

	header{
		display: inline;
	}
	
	#navL{
		background-color: #cacaca;
		float: left;
		width: 50%;
	}


	#logo{
		width: 30%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	
	}


	#navR{
		background-color: #cacaca;
		float: left;
		width: 50%;
	}

	.navSobre{
		color: black;
		width: 25%;
		float: left;
		margin-left: 15%;	
		transition: 0.5s;
	
	}	

	.navSobre:hover{
		transform: scale(1.5);
		text-shadow: 3px 2px #828282;
	}

	.navModels{
		color: black;
		width: 25%;
		float: right;
		margin-right: 15%;	
		transition: 0.5s;
	}

	.navModels:hover{
		transform: scale(1.5);
		text-shadow: 3px 2px #828282;
	}


	.navAnim{
		color: black;
		width: 25%;
		float: left;
		margin-left: 10%;	
		transition: 0.5s;
	}	

	.navAnim:hover{
		transform: scale(1.5);
		text-shadow: 3px 2px #828282;
	}


	.navProgra{
		color: black;
		width: 25%;
		float: right;
		margin-right: 10%;	
		transition: 0.5s;
	}

	.navProgra:hover{
		transform: scale(1.5);
		text-shadow: 3px 2px #828282;
	}

	#SobreMi{		
		margin-left: 2%;
		margin-top: 10%;
		width: 95%;
		height: 80%;
		border: 5px groove;
		border-radius: 5px;
		border-color: #cacaca;
		
	}
	

	.h1SM{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		transform: scale(1);
		text-align: center;
	}

	.pSM{
		color: #cacaca;
		margin-left: 10%;
		margin-right: 10%;
		font-size: 150%;
	}

	.demoreel{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		transform: scale(1);
		text-align: center;
	}
	
	.pSM2{
		color: #cacaca;
		margin-left: 10%;
		margin-right: 10%;
		font-size: 150%;
	}

	#redes{
		width: 100%;
		align-content: center;
	}

	.gmailLogo{
		width: 7%;
		margin-left: 47%;
		margin-bottom: 2%;
	}

	.gmailLogo:hover{
		transform: scale(0.75);
		transition: 0.7s;
	}


	#imgModels{
		margin-left: 2%;
		margin-top: 10%;
		width: 95%;
		height: 80%;
		border: 5px groove;
		border-radius: 5px;
		border-color: #cacaca;
		padding-bottom: 3%;
	}

	.h1Mo{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		transform: scale(1);
		text-align: center;
	}

	#anims{
		margin-left: 2%;
		margin-top: 10%;
		width: 95%;
		height: 80%;
		border: 5px groove;
		border-radius: 5px;
		border-color: #cacaca;
		padding-bottom: 3%;
	}

	.h1Anim{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		transform: scale(1);
		text-align: center;
	}

	.ani1{
		width: 100%;
		margin-bottom: 3%;
	}

	.ani2{
		width: 100%;
		margin-bottom: 3%;
	}

	.ani3{
		width: 100%;
		margin-bottom: 3%;
	}

	.ani4{
		width: 100%;
		margin-bottom: 3%;
	}

	#program{
		margin-left: 2%;
		margin-top: 10%;
		width: 95%;
		height: 80%;
		border: 5px groove;
		border-radius: 5px;
		border-color: #cacaca;
		padding-bottom: 3%;
	}

	.h1Progra{
		color: #cacaca;
		text-shadow: 3px 2px rgba(120, 120, 120, 0.5);
		transform: scale(1);
		text-align: center;
	}

	.div1{
		width: 100%;
		color: #cacaca;
		text-align: center;	
		
	}

	.pPic1{
		width: 100%;
		transition: 0.5s;
		transform: scale(0.8);
	}

	.pPic1:hover{
		box-shadow: 0px 0px 30px rgba(150, 250, 150, 0.5);
		transform: scale(0.9);
	}

	.div2{
		width: 100%;
		color: #cacaca;
		text-align: center;		
	}

	.pPic2{
		width: 100%;
		transition: 0.5s;
		transform: scale(0.8);
	}

	.pPic2:hover{
		box-shadow: 0px 0px 30px rgba(255, 255, 0, 0.5);
		transform: scale(0.9);
	}

	.div3{
		width: 100%;
		color: #cacaca;
		text-align: center;			
	}

	.pPic3{
		width: 100%;
		transition: 0.5s;
		transform: scale(0.8);

	}

	.pPic3:hover{
		box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.5);
		transform: scale(0.9);
	}

	.div4{
		width: 100%;
		color: #cacaca;
		text-align: center;
	}

	#flecha{
		width: 5%;
		position: fixed;
		bottom: 1%;
		margin-left: 3%;
  		transform: translateY(-50%);
	}

}