/* Theme Name: Neopreno Theme URI: http://www.neopreno.es Description: Neopreno WordPress theme Version: 1 Author: Ra Serrano Author URI: http://www.lapatineta.com */ @charset "UTF-8"; /* CSS by laPatineta.com */ /*-- Previos --*/ img, embed, object, video, iframe { max-width:100%; } @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @-webkit-viewport, @-moz-viewport, @-ms-viewport, @-o-viewport, @viewport { width: device-width; } * { -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 100%;} ::selection { background: #CFF; } ::-moz-selection { background: #CFF; } .selector { background-size: cover; /* The url is relative to the document, not to the css file! */ /* Prefer absolute urls to avoid confusion. */ -ms-behavior: url(/backgroundsize.min.htc); } /* =========== DESKTOP FIRST =============== */ body {background: #E4F9FF; font-family: Avenir Next, Helvetica, Arial, sans-serif; color:#161616; min-height: 100vh; } header {margin-right: 240px; } header div { max-width: 760px; margin:0 auto; overflow: auto; color:#002077; overflow:hidden;} header div h1 { background: white; font-size: 3em; display: inline-block; padding: 0px 8px 6px 8px; display: inline-block; margin-right: 15px; line-height: 0.8em; text-transform: lowercase;} header div a.h1 {color:#002077; display: inline-block;} header div h1 .color {color:#FF2424;} header div h2 {font-style: italic; font-weight: 400; font-size: 1.4em; display: inline-block; position: relative; top:-2px; margin-top: 50px;} .menu-link {display: none; } /* Tooltip .close { float: right; } .clear { clear: both; } .help { color: #fff; background-color: #22f; padding: 0px 5px; text-align: center; cursor: pointer; } .tooltip { border: 1px solid #22f; padding: 2px; width: 20%; position: absolute; background: #ddd;} #placeholder { border: 1px dotted #aaa; width: 200px; padding-bottom: 50px; } */ /* sidebar */ .sidebar { position: absolute; top:0; right: 0; width: 240px; background: white; height: 100vh; z-index: 999999999;} .sidebar a { color:#161616;} .sidebar h3 {font-size: 1.5em; color:white; padding: 15px 30px; } .sidebar .about h3 {background: #002077; } .sidebar div.about div.about-text { padding:30px 30px 10px 30px; line-height: 1.4em; } .sidebar div.about div.about-text p { padding-bottom: 15px;} .sidebar .about .follow {height: 30px; margin-bottom: 15px; margin-left: 30px; display: none;} .sidebar .about .fb-like {position: relative; top:-3px; } .sidebar .tags h3 {background: #FF2424; } .sidebar ul { padding-top: 25px; padding-bottom: 25px;} .sidebar ul li { list-style: none; line-height: 30px; color:white;} .sidebar ul li a { padding-left: 29px; text-transform: lowercase;} .sidebar ul li.current-cat a { padding-left: 11px; } .sidebar ul li.current-cat a:before { color: #FF2424; margin-right: 10px; content: '•'; } .sidebar ul li.current-cat:hover { color: #FF2424;} .sidebar ul li:hover { background: #f0f0f0; color: #f0f0f0; } .sidebar ul li a { text-decoration: none; display: block;} /* MAIN */ .main { border-right: 240px solid white; padding-bottom: 10px; } .main article { max-width: 758px; margin:0 auto; margin-top: 100px; margin-bottom: 120px; display: table; } .main article a.imagen-perfil { width:150px; height: auto; z-index: 9999999999; display: inline-block; vertical-align:top; cursor:default; } .main article a.imagen-perfil img { height: auto; } .main article div.info { width: 556px; display: table-cell; vertical-align:top;} .main article div.info hgroup { min-height: 150px; font-size: 2.9em; padding: 25px; padding-top: 30px; background: white;} .main article div.info hgroup h4 a { color:#161616; text-decoration: none; display: inline-block; border-bottom: 1px dashed white;} .main article div.info hgroup h4 { margin-bottom: 0px; margin-top: -4px; line-height: 1.2em;} .main article div.info hgroup h5 a { color: #FF2424; font-size: 0.6em; text-decoration: none; border-bottom: 1px dashed white;} .main article div.info hgroup h4 a:hover { border-bottom: 1px dashed #161616;} .main article div.info hgroup h5 a:hover { border-bottom: 1px dashed #FF2424;} .main article div.info hgroup h5 { color: #FF2424; line-height: 0.7em;} .main article div.info .thecontent { min-height: 136px; background: #002077; color:white; padding:25px; line-height: 1.4em; padding-bottom: 30px; } .main article div.info .thecontent ul, .main article div.info .thecontent ol { padding: 10px 0 10px 18px; } .main article div.info .thecontent p a { color:white; } .main article ul.social { background: #E5E5E5; width: 50px; list-style-type: none; min-height: 100%; text-align: center; padding-top:6px; display: table-cell; vertical-align:top; position: relative;} .main article ul.social li a { color:#161616; font-size: 1.3em; line-height: 40px; display: block;} .main article ul.social li:hover a { color:#5b5b5b;} .main article div.info a.more-link { text-decoration: none; color:#fff; padding: 0 5px; } .main article div.info a.more-link:hover { color:#FF2424; padding: 0 5px; } .main div.tag-container { color:white; display: block; text-align: right; margin-top: -26px;} .main span.tags { height: 100%; display: inline-block; background: #FF2424; position: relative; top:26px; z-index: 9999999; text-transform: lowercase;} .main span.tags a { text-decoration: none; color: white; padding:4px 6px; display: inline-block; font-weight: 600;} /* SINGLE (Hereda de Main) */ .single article { border-right: transparent 150px solid; max-width: 910px; margin-top: 50px; margin-bottom: 20px;} .single article div.info hgroup { min-height: initial; } .single article div.info hgroup h4 { margin-top: 0px; margin-bottom: 3px; } .single article div.info hgroup h5 { font-size: 0.6em; line-height: 1.3em; } .single article a.imagen-perfil { width: 100%; margin-bottom: -3px; } .single article a.imagen-perfil img { height: auto; width: 100%;} .single article div.info { } .single article ul.social { width: 50px; } .single article div.info p img { margin:30px 0 0 0; height: auto; width: 100%;} .single article div.info hgroup { padding:25px 35px; } .single span.tags { top:24px; } .single article p.entry-date { color:white; font-size: 0.9em; text-align: left;} .single .share { max-width: 457px; margin:0 auto; margin-bottom: 80px; top:0px; position: relative; text-align: right; padding:5px 15px; } .single .share .fb-share-button { position: relative; top:-3px; margin-left: 10px;} /* TAG (hereda de Main) */ .tag-page article { margin-top: 30px;} .tag-page h6 { max-width: 758px; margin:0 auto; margin-top: 50px; } .tag-page h6 span.tags { position: relative; top:0px; color: white; padding:4px 6px;} /* PERFIL */ .perfil article { display: block; } .perfil .main article a.imagen-perfil { position: absolute; cursor: default;} .perfil article div.info { background: transparent; width: 100%; border-left: 150px solid transparent; display: block;} .perfil article div.info hgroup { min-height: initial;} .perfil article div.info hgroup h4 { padding-bottom: 1px; display: block;} .perfil article div.info ul.social { background: none; width: auto; text-align: left; overflow: hidden; padding-top: 0; padding-left: 0;} .perfil article div.info ul.social li { float:left; background: #E5E5E5; } .perfil article div.info ul.social li a { padding:3px 20px; } .perfil article div.fichas {width: 100%; border-left: 150px solid transparent;margin-top: 50px;} .perfil article div.fichas section {margin-bottom: 50px; background: white;} .perfil article div.fichas section h5 {color: #FF2424; font-size: 2em; padding: 15px 25px;} .perfil article div.fichas section p {background: #002077; color:white; padding:25px; line-height: 1.4em; padding-bottom: 30px;} .perfil article div.fichas section p a {color:white;} /* 404 */ .cuatrocero article { display: block;} .cuatrocero article h2 { font-size: 3em; background: white; padding: 20px;} .cuatrocero article h2 span { color:#FF2424;} /*======================== TABLET LATER ========================*/ @media screen and (max-width: 1074px) { .container { margin: 0 35px; } header { margin:0 auto; width: 100%; } header div { width: 100%; overflow: hidden; } header div h2 { display: none;} header div h1 { margin-top: 50px;} .menu-link {display: block; background: #FF2424; color:white; border-radius: 50%; height:40px; width:40px; text-align:center; text-decoration: none; font-size: 1.6em; float:right; margin-top: 53px; } .menu-link span {top:7px; position: relative;} .sidebar { display: none; } /* Main */ .main { border:none; } .main article div.info hgroup h5 a { border-bottom: 1px dashed #FF2424;} /* SINGLE (Hereda de Main) */ .single article { border-right: none; margin-top: 80px;} } /*======================== movil LATER ========================*/ @media screen and (max-width: 600px) { .container { margin: 0 20px; } header { margin-bottom: 0px; } header div h1 { margin-right: 15px; margin-top: 55px; line-height: 0.8em; font-size: 2.3em;} header div h2 {display: none;} .menu-link {top:21px; right:15px; } .main article { display: block; margin-top: 50px; margin-bottom: 100px;} .main article a.imagen-perfil { height: auto; margin-bottom: -2px; } .main article a.imagen-perfil img { height: auto;} .main article div.info { width: 100%; display: block; } .main article div.info hgroup {font-size: 2em; min-height: initial; } .main article div.info hgroup h4 a { text-decoration: underline; border-bottom: none;} .main article div.info hgroup h4 a:hover { border:none;} .main article ul.social { width: 100%; list-style-type: none; min-height: initial; text-align: center; padding-top:0px; display: block; overflow: hidden; padding:12px 5px; } .main article ul.social li { float:left; padding:5px 15px;} .main article ul.social li a {line-height: initial;} .main span.tags { top:0px; } /* SINGLE */ .single article a.imagen-perfil { display: inherit; width: 100%; margin-bottom: -3px;} .single article hgroup h5 {line-height: 1.2em;} /* PERFIL */ .perfil article a.imagen-perfil { position: initial; display: block; width: 100%;} .perfil article div.info { border:none;} .perfil article div.fichas {border:none; margin-top: 50px;} .perfil article div.info ul.social { background: #E5E5E5; padding: 0;} .perfil article div.info ul.social li a { padding:10px 20px;} }