html,body{
	height: 100%;
}
html{
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
}

#home{
	overflow-y: hidden;	
}

/*Navegação*/

#barra-navegacao{
	background: linear-gradient(to right, white, #02057F);
	
}

.navbar-light .navbar-nav .nav-link{
	color: #fff;
}

.navbar-light .navbar-nav .nav-link:hover{
	color: #08AFF7;
}

.navbar-light .navbar-toggler{
	color: #02057F;
}

/*Conteúdos*/

section{
	color: #02057F;
	background: #EBEDEF;
}

.principal1{
	padding: 0px;
}

.principal2 h1{
	color: #08AFF7;
}
.principal3{
	color: #FFF;
	background: #D35400;
	padding: 10px;
}
.btn-custom{
	color: #02057F;
	border-radius: 500px;
	-webkit-border-radius: 500px;
	-moz-border-radius: 500px;
	text-transform: uppercase;
	transition: background 0.4s, color 0.4s;
	padding: 10px 20px;
	margin-left: 20px;
}

.btn-branco{
	background: #F9A13D;
	border: 2px solid white;
}

.btn-branco:hover{
	background: #08AFF7;
	color: white;
}

 /*seção recursos index e internas*/
#recursos{	
	padding: 15px;
	overflow: hidden;	
}
.fotos-recursos{	
	padding-top: 10px;
	padding-bottom: 20px;
}

#fotos-recursos1{
	background-color: rgb(254, 122, 25, 1.0);	
}

#fotos-recursos2{
	margin-left: 3px;
	background-color: rgb(230, 48, 49, 1.0);	
}

#fotos-recursos3{
	margin-left: 3px;
	background-color: rgb(178, 220, 61, 1.0);	
}

#fotos-recursos4{	
	margin-top: 15px;
	background-color: rgb(50, 150, 224, 1.0);
	/*background-color: rgb(106, 224, 224, 1.0);*/
	margin-left: 138px;		
}

#fotos-recursos5{
	margin-left: 3px;
	margin-top: 15px;
	background-color: rgb(33, 125, 57, 1.0);	
}

#recursos h2{
	margin-top: 20px;
	text-align: center;	
}
#recursos p{
	font-size: 18px;	
}
a:link{
	text-decoration: none;
}

#recursos .fotos-recursos a p{
	color: #fff;
}
#recursos .fotos-recursos a{
	color: #02057F;
}
#recursos .fotos-recursos a:hover{
	color: #fff;	
}
.tema-video1{
	padding-top: 20px;
}
.video1{
	padding-top: 20px;
}
.tema-video2{	
	padding-top: 60px;
}
.video2{
	
	padding-bottom: 20px;
}
.tema-video3{
	padding-top: 50px;
}
.letra-vermelha{
	color: #FF0000;
	font-weight: bold;
}

/*Seção curso Render:*/
#curso{
	padding-top: 40px;
	padding-bottom: 40px;
}
#curso p{
	font-size: 18px;	
}
/*Perfil - sobre a Roger Code*/
.perfil-completo{
	padding: 20px;
}
.perfil{
	background: #086BDC;
	color: #fff;
	padding-top: 30px
}
#texto-perfil{
	margin-top: 30px;
}
.quadro-perfil{
	padding-left: 0;
	padding-right: 0;
}

/*Rodapé*/
.direitos, .redes, .categorias{
	color: #02057F;
}
#home .categorias h3{
	margin-top: 10px;
	padding: 7px;
	background: #ABB2B9;
}
.categorias a{
	color: #02057F;
	text-decoration: none;
}
.categorias a:hover{
	color: #08AFF7;
}
.categorias{
	margin-top: 25px;
}

.categorias ul{
	color: #02057F;
	list-style: none;
	padding-left: 0;
}
.redes{
	margin: 40px 0 20px 0;
}
.redes p{
	font-family: cursive, Lucida Handwriting;
	font-size: 20px;
}
.redes i{
	color: #02057F;
}
.redes i:hover{
	color: #08AFF7;
	transition: color 0.2s;
}
footer{
	height: 150px;
}

footer hr{
	color: #02057F;
}


/*Efeito parallax*/
html, .parallax{
	margin:0;	
	height: 100%; 
	font:16px "Lato", sans-serif;
	color: #777;
}

.conteudo-parallax{
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	text-align: center;
}
.conteudo-parallax .texto-parallax{
	color: #000;
	background-color: #D5D8DC;
	padding: 22px;
	font-size: 32px;
	letter-spacing: 5px;
}

.figura1, .figura2, .figura3, .figura4{
	position: relative;
	height: 100%;
	opacity: 0.8;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	
}
.figura1{
	background-image: url(../img/monitor.jpg);
}
.figura2{
	background-image: url(../img/programador.jpg);
}
.figura3{
	background-image: url(../img/code.jpg);
}
.figura4{
	background-image: url(../img/computer.jpg);
}
#letra-azul{
	color: #000080;
	font-weight: bold;
}
#letra-oblique{
	font-style: oblique;
	font-weight: bold;
}

/*Media queries página Inicial - Paralaxe*/
@media (max-width: 575.98px) {
	.conteudo-parallax .texto-parallax{
		padding: 21px;		
		font-size: 13px;
		letter-spacing: 1px;
	}
 	#expande-area{
		padding-left: 60px;
		padding-right: 60px;
	}
}
@media(min-width: 576px) and (max-width: 767.98px) {
	.conteudo-parallax .texto-parallax{
		padding: 19px;
		font-size: 20px;
		letter-spacing: 2px;
	}
	#expande-area{
		padding-left: 80px;
		padding-right: 81px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px){
	.conteudo-parallax .texto-parallax{
		padding: 19px;
		font-size: 28px;
		letter-spacing: 1px;
	}
	#expande-area{
		padding-left: 107px;
		padding-right: 106px;
	}
}

@media (min-width: 992px){
	#expande-area{
		padding-left: 130px;
		padding-right: 130px;
	}
}
/*Fim Media queries página Inicial - Paralaxe*/


/*Extra small devices*/

@media (max-width: 575.98px) {
	.principal2{
		color: #FFF;
		background: #02057F;
		padding: 10px;
	}
	#info1{
		margin-top: 100px;
		padding-top: 30px;
		padding-bottom: 20px;
		margin-left: 5px;
	}
	#info2{
		margin-top: 100px;
	}	
	.videos{
		width: 310px;
	}
		#info3{
		margin-top: 100px;
		padding-top: 20px;			
		padding-bottom: 20px;
	}
		#info4{
		padding-top: 40px;
		margin-top: 100px;
		padding-bottom: 30px;
		padding-right: 0px;
	}
	#info5{
		padding-top: 120px;
	}	
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {

	.imagem-principal1{
		box-sizing: border-box;
		height: 100%;
		width: 100%;
		object-fit: cover;		
	}
	.principal2{
		color: #FFF;
		background: #02057F;
		padding: 10px;
	}
	.principal3{
		color: #FFF;
		background: #02057F;
		padding: 10px;
	}	
	.fotos-recursos img{
		width: 150px;
		align-content: center;					
	}	
	#info1{
		margin-top: 100px;
		padding-top: 30px;
		padding-bottom: 20px;
		margin-left: 5px;
	}
	#info2{
		margin-top: 100px;
	}	
	#info3{
		margin-top: 100px;
		padding-top: 20px;			
		padding-bottom: 20px;
	}
	#info4{
		padding-top: 40px;
		margin-top: 100px;
		padding-bottom: 30px;
	}
	#info5{
		padding-top: 120px;
	}			
	.perfil-completo{
		flex-direction: column-reverse;
	}
	.perfil{
		padding: 20px;
		float: right;		
	}
	.categorias{
		padding-bottom: 15px;
		margin-bottom: 20px;
	}
	.redes p{
	font-size: 18px;
	}
	.direitos{
		padding-bottom: 7px;
	}
}

@media (min-width: 768px){
	#recursos{	
		padding: 15px;		
	}
	#info1{
		margin-top: 100px;
		padding-top: 30px;
		padding-bottom: 20px;			
	}
	#info2{
		margin-top: 100px;		
	}
	#info3{
		margin-top: 100px;
		padding-top: 20px;			
		padding-bottom: 20px;
	}
	#info4{
		padding-top: 40px;
		margin-top: 100px;
		padding-bottom: 30px;
	}
	#info5{
		padding-top: 120px;		
	}
	.imagem-principal1{
		box-sizing: border-box;
		height: 100%;
		width: 100%;
		object-fit: cover;
		border-bottom-left-radius: 15px;
		border-top-left-radius: 15px;
		-webkit-border-bottom-left-radius: 15px;
		-webkit-border-top-left-radius: 15px;
		-moz-border-bottom-left-radius: 15px;
		-moz-border-top-left-radius: 15px;
	}
	.principal2{
		color: #FFF;
		background: #02057F;
		margin-left: -15px;
		border-bottom-right-radius: 15px;
		border-top-right-radius: 15px;
		-webkit-border-bottom-right-radius: 15px;
		-webkit-border-top-right-radius: 15px;
		-moz-border-bottom-right-radius: 15px;
		-moz-border-top-right-radius: 15px;
	}	
	.principal3{
		color: #FFF;
		background: #02057F;
		padding: 10px;
	}	
	.perfil{
		border-bottom-left-radius: 15px;
		border-top-left-radius: 15px;
		-webkit-border-bottom-left-radius: 15px;
		-webkit-border-top-left-radius: 15px;
		-moz-border-bottom-left-radius: 15px;
		-moz-border-top-left-radius: 15px;
	}

	.perfil h1,.principal2 h1{
		padding: 20px;
	}

	.perfil p,.principal2 p{
		padding: 20px;
		font-size: 20px;
	}

	.foto-perfil{
		box-sizing: border-box;
		height: 100%;
		width: 100%;
		object-fit: cover;
		border-bottom-right-radius: 15px;
		border-top-right-radius: 15px;
		-webkit-border-bottom-right-radius: 15px;
		-webkit-border-top-right-radius: 15px;
		-moz-border-bottom-right-radius: 15px;
		-moz-border-top-right-radius: 15px;
	}

}

@media (min-width: 768px) and (max-width: 991.98px){
	/*.btn-custom{
		margin-bottom: 40px;
	}*/
	#home{
		margin-top: 110px;
		padding-top: 30px;
		padding-bottom: 30px;				
	}
	.fotos-recursos img{
		width: 150px;
		align-content: center;					
	}
	#fotos-recursos1{		
		margin-left: 3px;
		margin-right: 12px;		
	}
	#fotos-recursos2{		
		margin-right: 12px;		
	}
	#fotos-recursos3{		
		margin-right: 12px;		
	}			
	#fotos-recursos4{
		margin-left: 3px;
		margin-right: 12px;
		margin-top: 0px;		
	}
	.principal2 h1,p,a{
		margin-left: 20px;			
	}
	
	.principal2 h1{
		font-size: 30px;
	}
	.principal2 p{
		font-size: 18px;
	}
	.categorias h5{
		margin-left:20px;
	}
	#texto-perfil{
		margin-top: -30px;
	}
	.quadro-perfil,.perfil{
		height: 300px;
	}
	
}

@media (max-width: 991.98px){

	#home{
		margin-top: 110px;
		padding-top: 30px;
		padding-bottom: 30px;				
	}
	.btn-custom{
		margin-bottom: 40px;
	}
	.fotos-recursos img{
		width: 150px;
		align-content: center;					
	}
	#fotos-recursos1{		
		margin-left: 3px;
		margin-right: 12px;		
	}
	#fotos-recursos2{		
		margin-right: 12px;		
	}
	#fotos-recursos3{		
		margin-right: 12px;		
	}			
	#fotos-recursos4{
		margin-left: 3px;
		margin-right: 12px;
		margin-top: 0px;		
	}
	#fotos-recursos5{
		margin-right: 12px;
		margin-top: 0px;		
	}
	.segundo_video{
		margin-top: 35px;
	}
	.btn-curso{
		margin-top: 10px;
	}
}

@media (min-width: 992px)and (max-width: 1199.98px){
	#home{
		margin-top: 110px;
		padding-top: 30px;
		padding-bottom: 30px;				
	}
	.imagem-curso{
		box-sizing: border-box;
		height: 100%;
		width: 100%;
		object-fit: cover;
		border-bottom-left-radius: 15px;
		border-top-left-radius: 15px;
		-webkit-border-bottom-left-radius: 15px;
		-webkit-border-top-left-radius: 15px;
		-moz-border-bottom-left-radius: 15px;
		-moz-border-top-left-radius: 15px;
	}
	.principal3{
		color: #FFF;
		background: #02057F;
		margin-left: -15px;
		border-bottom-right-radius: 15px;
		border-top-right-radius: 15px;
		-webkit-border-bottom-right-radius: 15px;
		-webkit-border-top-right-radius: 15px;
		-moz-border-bottom-right-radius: 15px;
		-moz-border-top-right-radius: 15px;
	}
	.btn-curso{
		margin-top: 10px;
	}		
	#fotos-recursos4{
		margin-left: 117px;
	}
	#info1{
		padding-top: 30px;
		margin-top: 100px;
		padding-bottom: 30px;
	}
	#info2{
		margin-top: 110px;	
	}
	#info4{
		padding-top: 40px;
		margin-top: 100px;
		padding-bottom: 30px;
	}
		
	.btn-custom{
		margin-bottom: 40px;
	}
	.principal2 p{
		font-size: 20px;
	}
	
}

@media (min-width: 1200px){
	#home{
		margin-top: 110px;
		padding-top: 30px;
		padding-bottom: 30px;				
	}
	.imagem-curso{
		box-sizing: border-box;
		height: 100%;
		width: 100%;
		object-fit: cover;
		border-bottom-left-radius: 15px;
		border-top-left-radius: 15px;
		-webkit-border-bottom-left-radius: 15px;
		-webkit-border-top-left-radius: 15px;
		-moz-border-bottom-left-radius: 15px;
		-moz-border-top-left-radius: 15px;
	}
	.principal3{
		color: #FFF;
		background: #02057F;
		margin-left: -15px;
		border-bottom-right-radius: 15px;
		border-top-right-radius: 15px;
		-webkit-border-bottom-right-radius: 15px;
		-webkit-border-top-right-radius: 15px;
		-moz-border-bottom-right-radius: 15px;
		-moz-border-top-right-radius: 15px;
	}
	.btn-curso{
		margin-top: 25px;
	}	
}