/* RESET */

html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, code, del, dfn, em, img, b, u, i, center,dl, dt, dd, ol, ul, li, form, label, table, tr, th, td, article, footer, header, menu, nav, section, time { margin: auto;  padding: 0; border: 0;}


/* apply a natural box layout model to all elements   http://paulirish.com/2012/box-sizing-border-box-ftw/*/


/* HTML5 element display */
   
article, footer, header, hgroup, nav, section { display: block; }


/* base */
   
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: 'Lato', sans-serif; color:#c8c8c8; }
body {
    margin: 0; 
    font-size: 1em; 
    line-height: 1.5; 
}

p {letter-spacing:.75px;}

#page {
    background: white 43.25% top;
}

/* links & buttons */

/*homepage*/

body.homepage p a {margin: -.1em -.1em -1px;padding: .1em .1em 1px; position: relative; text-decoration: none; color:#ebebeb; }
body.homepage p a:hover {color: #e0e0e0 }
body.homepage a.button {background:#3ce9eb; color:#fff; }
body.homepage a.button:hover {background:#53eea4; color:#fff; }


/*blog pages*/

a:link {color:white;}
a  {-webkit-transition: .25s;-moz-transition: .25s;-ms-transition: .25s;-o-transition: .25s;transition: .15s;}
a:visited { color: white;}
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
a:active {  position: relative;  top:1px;}
.navbar a { color: #c8c8c8; text-decoration:none;}

/* typography */

#intro span {font-family:'Lato'; font-size: 1em; display:inline-block; line-height: .7em; letter-spacing: 1px; color: #c8c8c8;}
h1 {font-family: 'Lato'; color:#ff757a; font-size: 1em; display: block; font-weight:900; line-height: 1em;}
h2 {font-family: 'Lato'; font-size: 1.6em; line-height: 1.333333333333333em; margin-bottom: .6666666666666667em;  font-weight:900; }
h3 {font-family: 'Lato';font-size: 1.5em; line-height: 1em; margin-bottom: 1em; font-weight:normal }
h4 {font-family: 'Lato';font-size: 1.2em; line-height: 1.142857142857143em; margin-bottom: 1em; margin-top:2em; font-weight:normal }
h5 {font-family: 'Lato', sans-serif; font-size:1.2em; font-weight:400;margin-bottom:2em;}
h6 {font-family: 'Lato', sans-serif; font-size:1.2em; font-weight:700;margin:1em 0 0.5em 0;}
p  {font-family: 'Lato', sans-serif; font-size: 1em; line-height: 1.5em; font-weight:400; margin-bottom: 1.5em; }

@media (max-width: 400px) {
  #intro span {
    font-size: .65em;
  }
}

@media (max-width: 265px) {
  #intro span {
    font-size: .35em;
  }
}


#header {
    background-color: white;
    height: auto;
    width: 100%;
    line-height: 145%;
    font-size: 19pt;
    padding-left: 20px;
    margin: 0px, 0px, 0px, 0px;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }



/* Navbar */

.about {border-bottom: 3px solid #ff8350;}
.coding {border-bottom: 3px solid #3ce9eb;}
.community {border-bottom: 3px solid #53eea4;}
.my_blog {border-bottom: 3px solid #e594ff; }
.contact {border-bottom: 3px solid #ff757a;}

.about:hover {border-bottom:6px solid #ff8350; color: #ff8350;}
.coding:hover {border-bottom:6px solid #3ce9eb; color: #3ce9eb;}
.community:hover {border-bottom:6px solid #53eea4; color: #53eea4;}
.my_blog:hover {border-bottom:6px solid #e594ff; color: #e594ff;}
.contact:hover {border-bottom:6px solid #ff757a; color: #ff757a;}


@media (max-width: 400px) {
  a.about, a.coding, a.community, a.my_blog, a.contact {
    font-size: 8px;
  }
}

@media (max-width: 250px) {
  a.about, a.coding, a.community, a.my_blog, a.contact {
    font-size: 7px;
  }
}

/* Lists */
   
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }



/* Main style (starting with mobile) */

.wrapper {width: 90%; margin: 0 auto;}
#mainheader {text-align: center; padding-top:1em;}
#intro { display:block;  text-align: left; margin:1.2em 0  0;}
nav {margin:0; height: 3em;}
nav ul {display:inline-block;}
nav ul li { float:left;  }
nav ul li a {color:#c8c8c8; display:inline-block; text-transform:uppercase; font-size: .7em;padding:1em .6em; font-family: 'Lato';-webkit-transition: .25s;-moz-transition: .25s; -ms-transition: .25s;-o-transition: .25s;transition: .25s; position:relative;}
nav a:active {top: 2px;}
.solo {font-size: 6em;}

/* posts */

.posts { height: 1--%; overflow: hidden;}
.post_content {padding: 1em;;}
.post_content h2 {margin-bottom:.2em;  }
.post_content p {margin:0; margin-bottom: .8em;}
.post_content img {height:auto; max-width:25%; float:right; margin:-30px 10px 30px 10px;}
.post_details {font-size: 1em !important}
#about {background: #ff8350;  color: #fff; clear: both;}
#coding {background: #3ce9eb; color: #fff;}
#community {background: #53eea4; color: #fff;}
#my_blog {background: #e594ff; color: #fff}
#contact {background: #ff757a; color: #fff}


/* footer */
/*
footer {background: #c8c8c8; color: #fff; }
footer a {float:left; display:inline-block;  font-size: 1.1em; color:#fff; padding:1em 1em 0em 0em; }
footer a span {vertical-align:middle; font-size:1.2em; line-height: 0; padding:0;}*/


/* end */

#end a.button{background-color: #c8c8c8; color: white; text-decoration:none;}
#top_return {text-align:center;}
#top_return p {font-size: .8em; }
p.back_to_top {margin-top:1em; font-family: 'Lato';}
p.back_to_top a {padding: 1em!important; border:0;}
p.back_to_top a:hover {bottom: 5px;}


/* Configure your grid here: http://www.responsivegridsystem.com/ */


/*  SECTIONS  */

.section {clear: both;  padding: 0px; margin: 0px;}
.section:before, .section:after {margin:0em 0em;}


/*  COLUMN SETUP  */

.col { display: list-item;  float: none; margin: 0% 0 3% 0%;}
.col:first-child { margin-left: 0; }
article .col, footer .col {margin:0;}


/*  GROUPING  */

.group:before,.group:after {  content:"";  display:table;}
.group:after {  clear:both;}
article .group {margin-bottom:1.5em;}


/*  1  ipad vert */ 

@media screen and (min-width: 43em)  {
#top_return { text-align: center !important;}
html { font-size: 1.1em; }
nav {float:right;}
/*#page {   padding-bottom: 5%; }*/
footer .read_also {width: 50%; }
body { padding: 1.5em;}
.col { margin: 1.5% 0% 3% 0%; }
#intro { text-align: left; }
h1 { font-size: 2em; }
#mainheader { padding-top: 1.4em;margin-bottom:2em; }
nav ul li a { font-size:.8em; }
footer { text-align: left; }
footer h2 { z-index: +10; font-size: 1.5em; margin: 0em 0.2em 0em 0em; padding:.5em; }


/*  1.5  */

@media screen and (min-width: 58em) {
html {font-size: 1.2em;}
nav {float:right;}
#top_return { text-align: center; }


/*  2  */

@media screen and (min-width: 66em) {
html {font-size: 1.3em;}
nav {float:right;}
.article_content {width: 80%; max-width:34em;}
.case {max-width:90em!important }
.case .entradilla {max-width: 36em;}
article h5 {max-width:32rem}
body { padding: 1.5em;}
h1 {font-size: 2em; margin-top: .6em;}
#mainheader {padding-top: 0em;}
footer h2 {font-size:2em;  margin:.4em 0; padding:1.5em;}
#top_return { text-align: center; }



/*  3  */

@media screen and (min-width: 80em) {
nav {float:right;}
.col {margin: 1.2% 2.05% 3% 0%;}
}
#top_return { text-align: center; }


/*  4  */

@media screen and (min-width: 100em) {
html { font-size: 1.5em; max-width: 100em }
nav {float:right;}
#page { padding-bottom: 4em }
h1 { font-size: 2.8em; margin-top: .6em; padding: 0; }
#mainheader { padding-top: 2em; }
footer h2 { font-size:2.6em; margin:.4em 0; padding:1.5em;}
}
#top_return { text-align: center; }


/*  5 - bigger  */

@media screen and (min-width: 120em) {
html { max-width: 100em }
#page { padding-bottom: 4em }
h1 { font-size: 2.8em; margin-top: .6em; padding: 0; }
#mainheader { padding-top: 2em; }
footer h2 { font-size: 2.6em; padding:.5em; }
footer a { padding-right:6em; }
}
#top_return { text-align: center; }