body{
  /*font-family: 'Nobile', sans-serif;*/
  font-family: 'Bitter', serif;
  color: #fff;
/*  background-color: #465068;
  background-color: #4A5154;*/
}

h1, h2, h3, h4, h5, h6{
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
}

h1{
  margin-bottom: 50px;
  text-transform: uppercase;
}

h3 span{
  font-size: 1.5em;
  font-weight: 400;
}

h4{
  font-family: 'Bitter', serif; 
}

a {
  color: #fff;
  text-shadow: 0 0 4px #000;
}

a:focus{
  color: #fff;
}

img {
    max-width: 600px;
    width: 100%;
}

[class*="column"] + [class*="column"]:last-child {
    float: left;
}

/*.full-width {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}*/

.row{
  max-width: 100%;
}
.main-img{
  text-align: right;
}

#construir{
  background: url("../img/bg-1.jpg") no-repeat scroll center center / cover rgba(0, 0, 0, 0) ;
}

#como{
  background: url("../img/bg-2.jpg") no-repeat scroll center center / cover rgba(0, 0, 0, 0) ;
}

#porfolio{
  background: url("../img/bg-3.jpg") no-repeat scroll center center / cover rgba(0, 0, 0, 0) ;
}

#contactame{
  background: url("../img/bg-4.jpg") no-repeat scroll center center / cover rgba(0, 0, 0, 0) ;
}

.pad-top{
  padding-top: 10em;
}

.show-hide{
  display: none;
}

.mail{
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 40px;
    margin: 40px auto;
}

#contactame em{
  white-space: nowrap;
  font-style: normal;
}


p{
	font-weight: 200;
  margin-top: 2rem;
}
ul {
  list-style: outside none none;
  margin-left: 0;
}

.container{
  overflow: auto;
}

header{
    max-width: 320px !important;
    position: fixed !important;
    z-index: 999;
}

.logo{
	margin-top: 50px;
  max-width: 240px;
}

header ul{
  list-style: outside none none;
  margin: 25px;
  font-family: 'Oswald', sans-serif;
}

section{
  height: 100%;
  position: relative;
}

article {
  padding-top: 70px;
  width: 100%;
  height: 100%;
}

footer {
    background-color: rgba(0, 0, 0, 0.2);
    bottom: 0;
    padding: 10px;
    position: absolute;
    text-align: center;
    width: 100%;
}

/****** MENU ******/

li:nth-child(1) a:hover, li:nth-child(1).active a {
  color: #F00203;
}
li:nth-child(2) a:hover, li:nth-child(2).active a{
  color: #57B234;
}
li:nth-child(3) a:hover, li:nth-child(3).active a{
  color: #0073B2;
}
li:nth-child(4) a:hover, li:nth-child(4).active a{
  color: #F38B22;
}

nav ul {
  display: block;
}

nav a#pull {  
    display: none;  
} 

#rojo{
  color: #FC3C3C;
}

#verde{
  color: #57b234;  
}

#azul{
  color: #0073B2;  
}

#naranja{
  color: #F38B22;  
}

#porfolio img{
  width: 100%;
}

.animated {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

/************** PORFOLIO *********************/

#porfolio h4{
  border-bottom: 2px solid #274268;
  text-transform: uppercase;
  margin-bottom: 0;
}

#porfolio li{
  text-align: center;
}
.view{
    min-height: 210px;
    overflow: hidden;
    padding-top: 15px;
    position: relative;
}

.view .mask, .view .content {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}

.view img {
    display: block;
    position: relative;
}

.mask{
  height: 100%;
  width: 100%;
  background-color:#0B1B32;
}

.view .mask { 
  height: 100%;
  display: none;
}

.mask img{
  max-width: 300px;
  margin: 0 auto;
}

.view a.info { 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    display: block;
    position: relative;
    text-align: center;
    top: -20px;
    width: 100%;
}

.mas-info{
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
} 


/************ COOKIES *****************/

#cookie-box {
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid #aaa;
    bottom: 0;
    left: 50%;
    margin: 5px 0 5px -512px;
    max-width: 1024px;
    position: fixed;
    width: 100%;
    z-index: 999;
}
#cookie-box > p {  
    font-size: 14px;
    color: #000;
    margin: 10px 40px;
}
#cookie-box a {
    color: #000;
    font-weight: bold;
    text-decoration: underline;    
    text-shadow:none;
}
#cookie-box span {
    float: right;
    position: absolute;
    right: 10px;
    top: 5px;
}
#capa-cookies {
    display: none;
    font-size: 12px;
    height: 100%;
    left: 0;
    text-align: center;
    top: -50px;
    width: 100%;
    z-index: 99999;
}
#capa_interior {
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid #aaa;
    color: #000;
    margin: 40px auto 0;
    max-width: 950px;
    padding: 15px;
    text-align: justify;
}
#capa_interior h2 {
    color: #000;
    font-size: 20px;
    padding-left: 35px;
}
#capa_interior p {
    color: #000;
    font-size: 14px;
    padding: 0 35px;
}
#capa_interior a {
    color: #000;
}
#capa_interior span {
    position: relative;
}