body {
	background-color: #FFFFFF;
	color: #3B2314;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	line-height: 22px;
	position: relative;
	overflow-x: hidden;
}
@font-face {
  font-family: titulos;
  src: url('/font/SantJoanDespi-Regular.otf');
}

.txt-white{
	color: #F9F1E2;
}
.txt-no{
	font-size: 0px;
	text-indent: -99999px;
}
.title-bren{
	font-family: titulos;
	font-size: 48px;
	line-height: 50px;
	margin-bottom: 80px;
	margin-top: 0px;
}
.bloque{
	min-height: 100vh;
	position: relative;
}
.tabla{
	height: 100vh;
	width: 100%;
	display: table;
}
.celda{
	display: table-cell;
	vertical-align: middle;
}
.celda-pad{
	padding-top: 100px;
	padding-bottom: 100px;
}
#cont-general{
	overflow: hidden;
}
#cont-introducion{
	/*background: transparent url("/images/piernitas.png") no-repeat scroll 80% 0px;*/
	/*background-size: auto 60%;*/
	background-color: #F8F1E4;
	overflow: hidden;
}
#cont-about-me{
	background: #F9A51A url("/images/brenda-montes.png") no-repeat fixed right bottom;
	background-size: contain;
}
#cont-top-skills{
	background-color: #8BCBCA;
}
#cont-beer{
	background-color: #EC4938;
}

/*Intro******/
#name-bren{
	background: transparent url("/images/name.png") no-repeat scroll 0px 0px;
	background-size: 400px auto;
	height: 160px;
	width: 400px;
}
#patitas{
	background: transparent url("/images/piernitas.png") no-repeat scroll 0px 0px;
	background-size: 367px auto;
	height: 500px;
	position: absolute;
	left: 60%;
	top: 0px;
	width: 420px;
	transition: all 1.2s ease-out;
}

#patitas.inicial{
	top: -300px;
	margin-left: -100%;
	/*transform: rotate(20deg);*/
	-moz-transform: scale(0.1);
	-webkit-transform: scale(0.1);
	-o-transform: scale(0.1);
	-ms-transform: scale(0.1);
	transform: scale(0.1);
}
/*
.option { infinite
			-webkit-animation-duration: 3s;
			-webkit-animation-delay: 2s;
			-webkit-animation-iteration-count: 5;
			} animated inifinite fadeIn
			*/
#introduccion-txt{
	/*padding-top: 50vh;
	margin-top: -250px;*/
	-webkit-animation-duration: 3s;
	-webkit-animation-delay: 1.5s;
}

/*ABOUT ME*****/
#about-me-txt{
	
}


/*SKILLS******/
#cont-int-skills{

}
.cont-skill{
	text-align: center;
	margin: 0px auto 50px;
	position: relative;
	text-align: center;
}
#skill-product{
	background: transparent url("/images/product-design.svg") no-repeat scroll center bottom;
	background-size: 140px auto;
	padding-top: 160px;
}
#skill-documentation{
	background: transparent url("/images/docummentartion.svg") no-repeat scroll center bottom;
	background-size: 140px auto;
	padding-top: 160px;
}
#skill-methods{
	background: transparent url("/images/user_centered.svg") no-repeat scroll center bottom;
	background-size: 140px auto;
	padding-top: 160px;
}
#skill-illustration{
	background: transparent url("/images/Illustration.svg") no-repeat scroll center bottom;
	background-size: 140px auto;
	padding-top: 160px;
}


/*CONTACT*****/
#cont-int-beer{
	
}
#cont-link{
	padding-top: 118px;
}
.btn-bren-principal{
	padding-left: 130px;
	display: block;
	height: 100%;
	position: relative;
	z-index: 1;
	width: 100%;
}
.btn-bren-efecto{
	background-color: #8BCBCA;
	display: block;
	height: 100%;
	position: absolute;
	z-index: 0;
	width: 0px;
	transition: all 0.5s ease;
}
.btn-bren{
	background-color: #F9A51A;
	cursor: pointer;
	font-family: titulos;
	font-size: 24px;
	float: right;
	line-height: 70px;
	display: block;
	color: #FFFFFF;
	height: 70px;
	max-width: 370px;
	margin-bottom: 48px;
	width: 100%;
	position: relative;
}
.btn-bren:hover{
	color: #FFFFFF;
	text-decoration: none;
}
.btn-bren:hover div.btn-bren-efecto{
	width: 100%;
}

#btn-resume div.btn-bren-principal{
	background: transparent url("/images/download-arrow@2x.svg") no-repeat scroll 68px center;
	background-size: 18px auto;
}
#btn-contact div.btn-bren-principal{
	background: transparent url("/images/open-envelope@2x.svg") no-repeat scroll 60px center;
	background-size: 35px auto;
}
.link-red{
	background-color: #8BCBCA;
	border-radius: 40px;
	display: block;
	float: left;
	height: 80px;
	margin-right: 50px;
	width: 80px;
}
#link-o{
	background: transparent url("/images/behance-logo-button@2x.svg") no-repeat scroll center center;
	background-size: 100% auto;
}
#link-be{
	background: transparent url("/images/dribbble@2x.svg") no-repeat scroll center center;
	background-size: 100% auto;
}
#link-in{
	background: transparent url("/images/linkedin@2x.svg") no-repeat scroll center center;
	background-size: 100% auto;
}
#maletita{
	background: transparent url("/images/lonche.png") no-repeat scroll 0px 0px;
	background-size: 559px auto;
	height: 348px;
	position: absolute;
	right: 0;
	top: -100px;
	width: 559px;
	transform: rotate(0deg);
	 animation: corre 3s infinite;
} 
@keyframes corre {
  0%   { right: 0px; top: -100px; transform: rotate(0deg);}
  50% { right: -200px; top: 0px; transform: rotate(-30deg);}
  100% { right: 0px; top: -100px; transform: rotate(0deg);}
}




@media only screen and (max-width: 1199px) {
	.link-red{
		margin-right: 44px;
	}
}

@media only screen and (max-width: 991px) {
	.bloque{
		min-height: 400px;
	}
	.tabla{
		height: initial;
	}
	.celda{
		vertical-align: top;
	}
	.celda-pad{
		padding-top: 60px;
		padding-bottom: 60px;
	}
	#name-bren {
	    background: transparent url("/images/name.png") no-repeat scroll 0px 0px;
	    background-size: 200px auto;
	    height: 80px;
	    width: 200px;
	}
	#patitas {   
	    left: initial;
	    top: 0px;
	    right: 0px;
	}
	.title-bren {
	    font-size: 28px;
	    line-height: 28px;
	    margin-bottom: 40px;
	    text-align: center;
	}
	#cont-about-me{
		background-attachment: scroll;
		padding-bottom: 57%;
		background-size: 100%;
	}
	#padre-redes{
		display: block;
		margin: 0px auto;
		width: 270px;
	}
	.link-red{
		width: 60px;
		height: 60px;
		background-size: 60px auto;
		margin-right: 15px;
		margin-left: 15px;
		margin-bottom: 40px;
	}
	#cont-link {
    	padding-top: 0px;
	}
	.btn-bren-principal {
    	padding-left: 80px;
	}
	#btn-resume div.btn-bren-principal{
		background-position: 38px center;
	}
	#btn-contact div.btn-bren-principal{
		background-position: 35px center;
		padding-left: 110px;
	}
	.btn-bren{
		max-width: 295px;
		margin: 0px auto 40px;
		position: relative;
		float: none;
		height: 50px;
		line-height: 50px;
	}
	.texto-parrafos{
		margin: 0px auto;
		position: relative;
		max-width: 400px;
	}
	.cont-skill{
		margin-bottom: 20px;
	}
	.caja-skills{
		margin-bottom: 40px;
	}
	#patitas {
	    height: 375px;
	    width: 315px;
	    background-size: 80% auto;
	}
	#btn-contact div.btn-bren-principal {
    background-size: 27px auto;
	}
	#btn-resume div.btn-bren-principal {
    	background-size: 14px auto;
	}
	#maletita{
		background-size: 300px auto;
		height: 190px;
		right: -80px;
		top: -130px;
		width: 300px;
	}
	@keyframes corre {
	  0%   { right: -80px; top: -130px; transform: rotate(0deg);}
	  50% { right: -280px; top: -30px; transform: rotate(-30deg);}
	  100% { right: -80px; top: -130px; transform: rotate(0deg);}
	}
}

@media only screen and (max-width: 767px) {
	#patitas {   
	    left: initial;
	    right: 0px;
	    z-index: 0;
	}
	#home-txt-patitas{
		position: relative;
		z-index: 1;
	}

	#skill-product{
		background-size: 120px auto;
		padding-top: 160px;
	}
	#skill-documentation{
		background-size: 120px auto;
		padding-top: 160px;
	}
	#skill-methods{
		background-size: 120px auto;
		padding-top: 160px;
	}
	#skill-illustration{
		background-size: 120px auto;
		padding-top: 160px;
	}
	
	
}

@media only screen and (max-width: 575px) {
	#patitas {   
	    left: 245px;
	    right: initial;
	    z-index: 0;
	    height: 250px;
	    width: 210px;
	    background-size: 150px auto;
	}
	#maletita{
		background-size: 200px auto;
		height: 150px;
		right: -80px;
		top: -100px;
		width: 200px;
	}
	@keyframes corre {
	  0%   { right: -80px; top: -100px; transform: rotate(0deg);}
	  50% { right: -280px; top: -30px; transform: rotate(-30deg);}
	  100% { right: -80px; top: -100px; transform: rotate(0deg);}
	}
	
}


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

	#patitas {   
	    left: 260px;
	    right: initial;
	    z-index: 0;
	}
}