/*RESET Y ESTILOS GENERICOS
***************************************************************************************/
*{ margin: 0; padding: 0; box-sizing: border-box; transition: all 0.2s ease-out 0s;}
html,body{ height: 100%; }
body{ font-family: 'Lora', serif; font-weight:400; color: #000; background-color: #fff;}
header{ padding:5rem 0 1.5rem; overflow:hidden;}
.logo { text-align: center;}
.logo h1 { display: none; float: left;}
h1 a{ margin: 0; font-size: 0.8rem;text-transform: uppercase;}
h2, h3{font-size: 1.1rem; font-weight: 600; line-height: 1.7rem; margin: 0 0 10px;}
h5{margin:20px auto; display: inline-block; line-height: 25px;}
a{text-decoration: none; color: #000; font-weight: 400;}
li{ list-style: none;}
img{ width:100%;display: block; border-radius: 3px;}
p{font-weight: 400; line-height: 25px; max-width: 800px; font-size: 18px; margin:20px 0;}
.cover{ width: 90%; margin: 0 auto; padding: 0; overflow: hidden; max-width:700px; }
.coverint{ padding: 2rem 0 1rem;}
.wh100{width: 100%; height: 100%;}
.mid-left{ width: 100%; height: 100%; display: table; text-align:center;}
.mid-left section{ display: table-cell; vertical-align: middle;}



/*ANIMACIONES
***************************************************************************************/
@keyframes top{ 100%{ opacity:1; top:0 } }
.move-top{ opacity: 0; position: relative; top:50px; animation: top 0.7s forwards;}

@keyframes right{ 100%{ opacity:1; right:0 } }
.move-right{ opacity: 0; position: relative; right:-50px; animation: right 0.7s forwards;}

@keyframes fade{ 100%{ opacity:1; } }
.fade{ opacity: 0; animation: fade 1.2s ease-in-out forwards;}

.d1{ animation-delay:.1s;}
.d2{ animation-delay:.2s;}
.d3{ animation-delay:.3s;}
.d4{ animation-delay:.4s;}
.d5{ animation-delay:.5s;}
.d6{ animation-delay:.6s;}


/*HOME
***************************************************************************************/
.home { cursor: url(../img/cursor-nube.png), auto;}
.home a{ cursor: url(../img/pointer-sol.png), auto;}
.home h1{position: relative; z-index: 1000; display: inline-block;}
.home h1 a { display: block; margin: 0 auto; background: url(../img/ruth.gif) no-repeat center bottom; background-size: contain; width: 450px; height: 440px; color: #000; font-weight: 400; font-size: 1rem; text-transform: none !important;}

/*HEADER
***************************************************************************************/
#btn_menu{ margin: 20px auto 0; width: 16px; height: 16px; background: url(../img/icon-menu-negro.svg) no-repeat center; background-size: 16px; cursor: pointer; display: none;}
header nav ul li { display: inline-block; font-weight:400; font-family: 'Lora', serif;}
header nav ul li a { display: block; opacity: 0.4; padding: 10px; font-size:0.88rem;}
header nav ul li:hover a, header nav ul .activo a { opacity: 1; font-weight:500;}

/*FOOTER
***************************************************************************************/
footer h5{ margin: 2.66rem auto; font-weight:500; font-size:0.88rem; font-family: 'Lora', serif; padding-left:8%;}


/*PORTFOLIO
***************************************************************************************/
.portfolio ul li { padding:8%;}
/*.portfolio .row { margin-left: -3%; margin-right: -3%; }*/
.portfolio ul li figure > a{ display:block; overflow: hidden; }
.portfolio ul li figure > a img { display: block; }
.portfolio ul li:hover figure > a { display:block; overflow: hidden;}
.portfolio .personal img { border-radius: 50%;}

/*WORKS
***************************************************************************************/
.works .images li{ padding: 8%;}
.vacio{ display: block; background-color: transparent; }

/*BIO
***************************************************************************************/
.bio article{ margin-bottom:2.66rem; margin-top: 8%;}
.bio article img{ max-width: 150px !important;}



/*MEDIA-QUERIES
***************************************************************************************/
@media (min-width:600px){
    #menu{ height: inherit !important; float: none; text-align: center;}
	.b-bottom{ position:fixed; bottom:0; width:100%;}
}



@media (max-width:1080px){
    .works .images li{padding: 5% 10%;}
	.portfolio ul li:hover figure > a { border-radius: 0;}
	.works .row { margin-left: -20px; margin-right: -20px; }
	.home h1 a { width: 250px; height: 260px; font-size: 15px; background: url(../img/ruth-mobile.gif) no-repeat center bottom;background-size: contain;}
} 


@media (max-width:599px){
	body{ text-align:left;}
	a {transition: none;}
	.coverint{ padding: 2rem 0 1rem;}
	h2, h3 { margin: 20px 0 10px; }
	.logo { display: block; overflow: hidden;}
	.logo h1 { float: none; padding:0;}
	header{ padding: 4rem 0 0 0;}
    header nav ul li{ display: block; padding: 20px 0; border-top: 0.8px solid #000; text-align: left;}
	header nav ul li a {padding: 0;}
	#btn_menu{ display: block; float: none;}
    #menu{ height: 0; overflow: hidden; transition: all 1s; margin-top: 20px;}
	.portfolio ul li figcaption{ padding: 10px 0 60px;}
	.portfolio .col-xs-12 {padding:0;}
	.row { margin-left: 0; margin-right: 0; margin-top: 14px;}
	.works .images {padding:0; margin: 20px auto;}
    .works .images li { padding: 5% 10%;}
	.works .images .mobile-center { clear:both; margin: 0 auto; float: none; padding: 8% 16% 8%;}
	.bio article{padding: 0;}
	.vacio{ display: none;}
	.mx-w-599 {display:none !important;}
	.bottom0{ padding-bottom: 0 !important;}
	
	header{ padding: 4rem 0 0 0;}
    header nav ul li{ display: block; padding: 20px 0; border-top: 1px solid #eeeeee; text-align: left;}
	header nav ul li a {padding: 0; text-align: center;}
	#btn_menu{ display: block; }
    #menu{ height: 0; overflow: hidden; transition: all 1s; margin-top: 20px;}
}