/*================================
		cuerpo y burbujas
===============================*/
main {
	background-color: #fff9e1;
	border-radius:  0 0 40px 40px;
    box-shadow: 0 8px 8px rgba(0,0,0,0.3);
	margin-bottom: 50px;
	padding-bottom: 3rem;
}

.contenedor-burbujas{
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/*================================
			sobre mi
===============================*/
.burbuja-yo{
	background-image: url("../img/yo.jpg");
	background-size: cover;
	background-position: center;
	width: 400px;
	height: 400px;
	border: none;
	margin: 20px;
	border-radius: 50px;
}
.burbuja-yo button{
	background-image: url("../img/yo2.jpg");
	background-color: #00000000;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	border: none;
	opacity: 0;
	border-radius: 50px;
}
.burbuja-yo button:hover{
	opacity: 1;
	transition: all .3s ease-in-out;
}
#sobremi img{
	height: 200px;
	width: 100%;
	object-fit: cover;
	border-radius: 30px;
}
#sobremi p{
	font-size: 20px;
	padding-bottom: 1rem;
}

.burbuja-2{
	display: flex;
	flex-wrap: wrap;
	width: 400px;
	height: 400px;
	margin: 20px;
	border-radius: 50px;
}
.burbuja-2-1 {
	background-color: #5f4633;
	width: 400px;
	height: 190px;
	border-radius: 50px;
}
.burbuja-2-1 h3{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 80px;
	height: 85%;
}
.burbuja-2-1:hover {
	background-color: #ab9680;
	transition: all .3s ease-in-out;
}
.burbuja-2-2 {
	background-color: #ffffff;
	width: 190px;
	height: 190px;
	border-radius: 100px;
	margin: 20px;
	margin-left: 0;
	border: #5f4633 solid 8px;
}
.burbuja-2-2 h4{
	color: #5f4633;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 50px;
}
.burbuja-2-3 {
	width: 190px;
	height: 190px;
	border-radius: 70px;
	margin-top: 20px;
}
.burbuja-2-3 img{
	width: inherit;
	height: inherit;
	border-radius: inherit;
}

.burbuja-github{
	background-color: #ab9680;
	width: 400px;
	height: 400px;
	margin: 20px;
	border-radius: 50px;
	border: none;
	text-align: center;
}
#mi-github {
	font-size: 80px;
	padding-top: 40px;
	color: #000;
}

.burbuja-trayecto{
	background-color: rgba(174, 253, 3, 0);
	width: 1280px;
	height: 400px;
	border: #ab9680 solid 3px;
	margin: 20px;
	border-radius: 50px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.burbuja-trayecto:hover{
	border: #5f4633 solid 3px;
	transition: all .3s ease-in-out;
}
.burbuja-trayecto:hover .img-trayecto2{
	opacity: 1;
	transition: all .3s ease-in-out;
}
.img-trayecto{
	width: 50%;
	margin: 2rem;
	height: 90%;
	background-image: url("../img/trayecto.JPG");
	background-size: cover;
	background-position: center;
	border-radius: 50px;
}
.img-trayecto2{
	width: 100%;
	height: 100%;
	background-image: url("../img/trayecto2.JPG");
	opacity: 0;
	background-size: cover;
	background-position: center;
	border-radius: 50px
}
.texto-trayecto{
	margin-left: 4rem;
	width: 40%;
	height: 80%;
}
.texto-trayecto h4{
	font-size: 80px;
}
.texto-trayecto p{
	font-size: 20px;
}

/*================================
			proyectos
===============================*/
.burbuja-sneakers{
	background-image: url("../img/sneakers.JPG");
	background-size: cover;
	background-position: center;
	width: 400px;
	height: 400px;
	margin: 20px;
	border-radius: 50px;
}
#burbuja-sneakers-div{
	background-image: url("../img/sneakers2.JPG");
	opacity: 0;
	background-color: #00000000;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	border-radius: 50px;
}
#burbuja-sneakers-div:hover{
	opacity: 1;
	transition: all .3s ease-in-out;
}

.burbuja-tecnologias{
	display: flex;
	flex-wrap: wrap;
	background-color: #ffffff;
	color: #5f4633;
	justify-content: center;
	align-items: center;
	width: 840px;
	height: 400px;
	margin: 20px;
	border-radius: 50px 90px 50px 90px;
	border: #5f4633 solid 3px;
}
.burbuja-tecnologias h3{
	display: flex;
	justify-content: center;
	font-size: 80px;
	width: 100%;
}
.tecnologia{
	display: flex;
	flex-wrap: wrap;
	width: 95%;
}
.tecnologia img{
	width: 40px;
	height: auto;
	margin-right: 2rem;
}
.tecnologia h4{	
	display: flex;
	align-items: center;
	font-size: 40px;
}
.tecnologia li{	
	width: 50%;
	padding-left: 9rem;
}

.burbuja-bunyan{
	background-image: url("../img/bunyan.JpG");
	background-size: cover;
	background-position: center;
	width: 400px;
	height: 400px;
	margin: 20px;
	border-radius: 50px;
}
#burbuja-bunyan-div{
	background-image: url("../img/bunyan2.JPG");
	opacity: 0;
	background-color: #00000000;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	border-radius: 50px;
}
#burbuja-bunyan-div:hover{
	opacity: 1;
	transition: all .3s ease-in-out;
}

.burbuja-rectangulos{
	display: flex;
	flex-wrap: wrap;
	width: 400px;
	height: 400px;
	margin: 20px;
	border-radius: 50px;
}
.burbuja-rectangulos1{
	background-image: url("../img/codeNchill.JPG");
	background-size: cover;
	background-position: center;
	width: inherit;
	height: 190px;
	border-radius: 50px;
	margin-bottom: 20px;
}
#burbuja-rectangulos1-div{
	background-image: url("../img/codeNchill2.JPG");
	background-size: cover;
	background-position: center;
	opacity: 0;
	background-color: #00000000;
	width: inherit;
	height: 190px;
	border-radius: 50px;
}
#burbuja-rectangulos1-div:hover{
	opacity: 1;
	transition: all .3s ease-in-out;
}
.burbuja-rectangulos2{
	background-image: url("../img/mensajin.JPG");
	background-size: cover;
	background-position: center;
	background-color: #ffffff;
	border: #5f4633 solid 3px;
	width: inherit;
	height: 190px;
	border-radius: 50px;
}
.burbuja-rectangulos2:hover{
	background-image: none;
}

.burbuja-inicios{
    background-image: url("../img/misinicios3.PNG");
	background-size: 250px;
	background-color: #00000000;
	background-position: center;
	background-repeat: no-repeat;	
	border: #5f4633 solid 3px;
    width: 400px;
    height: 400px;
    border-radius: 200px;
    margin: 20px;
}
.burbuja-inicios button{
	background-color: #00000000;
	width: 100%;
	height: 100%;
	border: none;
    border-radius: inherit;
}
.img-inicios{
	transition: 1.2s ease-in-out;
}
.img-inicios:hover{
	transform: rotate(180deg);
}

.burbuja-multifeed{
	background-color: #00000000;
	width: 400px;
	height: 400px;
	margin: 20px;
	border-radius: 50px;
}
.burbuja-multifeed img{
	width: inherit;
	height: inherit;
	transition: 0.5s ease-in-out;

} 
.burbuja-multifeed img:hover{
	transform: rotate(-10deg);
}

/*================================
			contacto
===============================*/
.burbuja-formulario{
	background-color: #ab9680;
	border: #5f4633 solid 3px;
	width: 840px;
	height: 400px;
	margin: 20px;
	border-radius: 50px;
	text-align: center;
}
.burbuja-formulario h4{
	margin: 1.5rem 0 3rem 0 ;
	font-size: 80px;
}
.btn-default {
	text-transform: uppercase;
	color: #5f4633;
	background-color: #00000000;
	border: #5f4633 solid 3px;
	padding: 14px 20px;
	font-size: 16px;
	border-radius: 20px;
	margin-top: 8px;
}
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active {
	background-color: #00000000;
	color: #5f4633;
	border: #5f4633 solid 3px;
	transition: all .3s ease-in-out;
}


/*===========================================
 			RESOLUCION MENOR 
============================================*/
@media (max-width: 618px) {
	.burbuja-sneakers, .burbuja-bunyan, .burbuja-rectangulos, .burbuja-inicios, .burbuja-yo, .burbuja-yo button, .burbuja-github, .burbuja-2, .burbuja-rectangulos,.burbuja-yo button, .burbuja-multifeed img,.burbuja-multifeed, .burbuja-formulario, .burbuja-tecnologias{
		width: 350px;
		height: 350px;
		overflow: hidden;
	}
	.modal{
		overflow: hidden;
	}
	.modal-content h3{
	font-size: 50px;
	}
	/*====== burbuja 2=============*/
	.burbuja-2-1 {
		height: 160px;
	}
	.burbuja-2-1 h4{
		font-size: 65px;
		height: 140px;
	}
	.burbuja-2-2 {
		width: 150px;
		height: 150px;
		margin-top: 20px;
		margin-left: 10px;
	}
	.burbuja-2-2 h4{
		font-size: 35px;
	}
	.burbuja-2-3 {
		width: 150px;
		height: 150px;
		border-radius: 50px;
		margin-top: 20px;
	}
	/*====== ajustando tamaños random=============*/
	.burbuja-tecnologias{
		border-radius: 50px;
	}
	.burbuja-tecnologias h3{
		font-size: 50px;
	}
	.burbuja-tecnologias h4{
		font-size: 17px;
	}
	.tecnologia li{	
		width: 50%;
		padding-left: 0.5rem;
	}
	.burbuja-formulario h4{
		font-size: 35px;
	}
	main{
		padding-top: 0;
		margin-bottom: 30px;
	}	
	.burbuja-rectangulos1{
		height: 160px;
		overflow: hidden;
	}
	#burbuja-rectangulos1-div{
		width: 350px;
		height: 165px;
	}
	.burbuja-rectangulos2{
		height: 160px;
	}	
	.burbuja-bunyan{
		border: #5f4633 solid 3px;
	}
	#mi-github {
		font-size: 65px;
		padding-top: 30px;
		color: #000;
	}
	/*======== display none/ opacity 1====================*/
	.burbuja-trayecto,.loader, #header{
		display: none;
	}
	#about, .burbuja-bunyan div, .burbuja-sneakers div, .burbuja-rectangulos1 div{
		opacity: 1 !important;
	}
}