/*
Theme Name: S Child
Theme URI: http://tidythemes.com/supersimple/
Description: Child theme for the SuperSimple theme. 
Author: TidyThemes
Author URI: http://tidythemes.com/
Template: supersimple
*/

@import url("../supersimple/style.css");
body {
    background: radial-gradient(#000, hsl(200,30%,6%));
    font-family: 'Rubik', sans-serif;
	color:#aaa;
}
#header a, #content h2, .entry-content p, .entry-content p a{font-family:  'Rubik', sans-serif;}
#content h2{ font-size:24px; color:#ccc}
#wrapper{max-width:80%}
#content { box-sizing: border-box; width: 100%; text-align: center;}
.flexcerpt{display:inline-block; height:35vw; width: 22vw;float:left; margin:1.5vw; position:relative;}
.flexcerpt-overlay{ position:absolute; bottom:0vw; cursor:pointer;min-height:30%; line-height:1; padding:1vw; box-sizing:border-box; width:100%;
		background: linear-gradient(rgba(150,150,255,0), rgba(0,0,0,0.8));}
.flexcerpt h1{color:#fff;}
.flexcerpt-cat{color:#0f0}
.flexcerpt p{color:#fff; text-shadow: 0px 1px 2px #000; margin:1vw; text-align:left; word-wrap:break-word; font-size:16px }
.post {  box-sizing: border-box; width:80%; margin:auto; border-bottom:0;}
h1 {    font-size: 25px;    color: #bbb;}
/*
@media all and (min-width:1301px){.flexcerpt{width: 20vw; height:32vw}}

@media all and (max-width:1300px){.flexcerpt{width: 28vw; height:42vw}}
@media all and (max-width:1160px){.flexcerpt{width: 40vw; height:49vw}}
@media all and (max-width:1000px){.flexcerpt{width: 90vw; height:78vw}} 
*/

#acercade{width:70%;}
@media all and (max-width:1100px){.flexcerpt{width: 32vw; height:47vw; margin:2.5vw;}} /* Cambio a tres */
@media all and (max-width:782px ){.flexcerpt{width: 69vw; height:71vw} .post { width:100%;} #acercade{width:100%;} #site-title{ text-align:center}} /* Cambio a dos */
@media all and (max-width:520px ){.flexcerpt{width: 78vw; height:97vw ; margin-bottom:4vh} } 
@media all and (max-width:380px ){.flexcerpt{width: 79vw; height:111vw ; margin-bottom:4vh}}

#fmenu .menu li a{transition: all .5s; display:inline-block; font-size:30px; color:#999; margin:8px; text-decoration:none}
#fmenu .menu li a:hover{transform:scale(1.4); transition: all .5s; color:#fff}

#menu{border:0; margin:0; float:right;text-align:right; clear:right;}
#menu .no{display:none}

#branding{ text-align:center; clear:both; float:left; margin-left:4vw;}
/*#imenu{display:none; float:right;}*/
#menu ul.menu li {
    display: inline-block;
    /*border-bottom: 1px solid #999;*/
    line-height: 1.7;
    padding: 0;
    /* border-top: 1px solid #999;*/
    margin-right: 5px;
    cursor: pointer;
    color: #999;
	text-align:left;
}
#menu ul.menu li.current-menu-item {
    display: none;
}
#menu ul li a {
	font-family: 'Rubik', sans-serif;
    font-size: 17px;
    color: #999;
    text-decoration: none;
    margin: 0;
	padding: 3px 15px;
}
#menu ul li a:hover {
    color: #fff;
    text-decoration: none;
}
#menu ul.menu li:hover { color:#fff }
.current-menu-item a { color: #fff !important;}
.current-menu-item a:hover {color: #fff !important; cursor:default}

/*
@media screen and (min-width:661px){
	#imenu{display:none}
	#menu{display:block; text-align:right}
	#menu.no{display:block}
}
@media screen and (max-width:660px){
	#imenu{float:right; display:block}
	#menu{display:none; width:18vw; text-align:left}
	#menu.no{display:block}
}
*/
@media screen and (max-width: 460px)
{

	#menu ul.menu li {display: block;}
	#menu{float:left}
	/*#imenu{display:block; }*/
}
@media screen and (max-width: 520px)
{
	#wrapper{max-width:90%}
	/*#menu ul.menu li {display: block;}
	#imenu{display:block; }*/
}

.nav-next, .nav-previous {
    background-color: #343434;
    font-size: 12px;
    padding: .5vw 2vw;
	margin:5px 0;
}
.nav-next{
    text-align: right;
    float: right;
}

.nav-previous {
    text-align: left;
    float: left;
}
nav .nav-previous a, nav .nav-next a  {
    color: #999;
}
nav .nav-previous a:hover, nav .nav-next a:hover  {
    color: #fff;
}


#enlaces{display: inline-block; padding: 5px; }

#enlaces a {width: 24px;   height: 24px;   float:left; margin:0 7px; border-radius:4px;
	background: transparent url("/imagenes/footer-sprite/mvmsocialsprite-40.png") no-repeat;
	background-size: cover;	
	transition: transform .3s;
	opacity:.6;
}

#enlaces a.sptfacebook		{ background-position:   0px	0px; }
#enlaces a.sptimbd			{ background-position: -24px 	0px; }
#enlaces a.sptlinkedin		{ background-position: -48px 	0px; }
#enlaces a.sptpixeltheory	{ background-position: -72px 	0px; }
#enlaces a.sptbehance		{ background-position: -96px 	0px; }
#enlaces a.sptpepo			{ background-position: -121px 	0px; }
#enlaces a.sptinstagram		{ background-position: -144px 	0px; }

#enlaces a:hover{opacity:1; transform:scale(1.2)}