div.container{
  max-width:600px;
}

section#header.fixed, section.unusualmenu.fixed {
  width: 100%;
  max-width: 960px;

}
section#header div.columns, section#more div.columns{
  min-height:1rem;
}
section#header h1{
    font-size:3.4rem;
    margin-bottom: 0;
}

section#header p{
    font-size:1.6rem;
    margin-bottom: 0;
}
section#header h1, a#me, section#header p{
    transition-property: font-size, transform, top;
    transition-duration: 0.2s;
    -webkit-transition-property:  font-size, transform, top;
    -webkit-transition-duration: 0.2s;
    -o-transition-property:  font-size, transform, top;
    -o-transition-duration: 0.2s;
    position:relative;
}
section#header{
  padding-top:3rem;
}


acronym{
  font-weight: bold;
}
acronym div.tipr_content{
  font-weight: normal;
  padding:0 8px;
}
a{
  color:#000;
}
a:hover{
  color:#333;
}
dt, dd{
  float:left;
}
dt{
  clear:left;
  margin-left:10px;
}
dd{
  margin-inline-start:10px;
}

a#me{
    display:block;
    border-radius:50%;
    width:100px;
    position:relative;
    
    height:100px;
    overflow: hidden;
    margin:auto; 
    cursor:pointer;
    /*background: url(../images/test.png);*/

}

dl{
  margin-bottom: 0;
  margin-top: 0;
}

section.unusualmenu.fixed{
    position:fixed;
    top:100px;
    z-index:101;
    background:#FFF;
    border-bottom: 1px solid #E1E1E1;
}

section.unusualmenu .menu{
    display:none;
}

section.unusualmenu .buttons{
    display:block;

}

section.unusualmenu.fixed .menu{
    display:block;

}
section.unusualmenu.fixed .buttons{
    display:none;
}
section.unusualmenu .call2action .button{
    width: 100%;    


}
section.unusualmenu .links .button{
    width:23%;


}
/*langs*/
ul.langs{
    display:block;
    text-align: right;
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    font-size:12px;
}
ul.langs li{
    display:inline;
}
/*langs*/

/*Unusual menu*/
.unusualmenu .row{

}
.unusualmenu .button{
  padding: 0 10px;
}
/*Unusual menu*/
/* process */

/* decalogue */
#decalogue{
    padding:4% 10%;
    background:#fce8e3; 
  
}
#decalogue li{
     list-style-type: upper-roman;
}

#arguments{
    padding:4% 10%;
    background:#eafce3; 
}
#arguments li{
     list-style-type: upper-roman;
}

@media (min-width: 768px) {

    .tipr_container_top
    {
        width:100%;
        margin-top: 0px;
        bottom: 11px;
        left: -34px;
        width: 180%;
    }
    ol.process:after{
        display: table;
        clear: both;
        content:"";
    }
    ol.process li{
        -ms-transform: rotate(-45deg); 
        -webkit-transform: rotate(-45deg); 
        transform: rotate(-45deg);
        float:left;
        width:27%;
        padding-bottom:0px;
        margin:0 0 0 -10%;
    }
    ol.process li .tipr_container_top{
        -ms-transform: rotate(45deg); 
        -webkit-transform: rotate(45deg); 
        transform: rotate(45deg);
    }
    ol.process{
        height:8em;
  
        padding:0 0 0 10%;
        margin-bottom:0px;
    }
    ol.process li:before{
        content: "●";
        font-size: 30px;
        top: -10px;
        left: -25px;
        position: absolute;
    }

}
@media (min-width: 1068px) {
    ol.process li{
   
    }
}
@media (max-width: 767px) and  (min-width: 700px) {
    ol.process li .tipr_container_top{
        left:0;
    }
   section#header.fixed p{
    
   }
   section.unusualmenu .links .button {
        width: auto;
   }
}
@media (max-width: 699px) and  (min-width: 551px){
   section#header.fixed p{
 
   }
   section.unusualmenu .links .button {
        padding:5px 0px;
        border:0px;
        color:#000;
        background: #FFF;
    }
    section.unusualmenu .links .button-selected{
      background:#FFF;
      color:#000;
      border-bottom:4px solid #000;    
      border-radius:0;
    }
}
@media  (max-width: 550px){
  section#header p{
    font-size:1.3rem;
    margin-bottom: 0;
  }
  section.unusualmenu {
    top:10px;
  }
  section.unusualmenu .links .button {
        padding:5px 0px;
        border:0px;
        width:23%;
        color:#000;
        background: #FFF;

    }
  section.unusualmenu .links .button-selected{
    background:#FFF;
    color:#000;
    border-bottom:4px solid #000;    
    border-radius:0;
  }
  section#header{
    text-align:center;
  }
  section#header.fixed p{
    display:none;
  }

  section#header a#me{
    transform: scale(0.8);
    margin:-10px auto;
    top:5px;
  }
  section#header.fixed a#me{
    transform: scale(0.6);
    margin:-10px auto;
    top:5px;
  }
  section#header h1{
    font-size:1.8em;
  }
  section#header.fixed h1{
    font-size:1.2em;
  }

}
section#header.fixed, section.unusualmenu.fixed {
     width: 90%;
     padding: 0; 
}
/* For devices larger than 400px */
@media (min-width: 400px) {
    section#header.fixed, section.unusualmenu.fixed {
     width: 85%;
     padding: 0; 
    }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
    section#header.fixed, section.unusualmenu.fixed {
        width: 80%; 
    }
}

/* process */

/*sections*/
    h2{
        text-transform: uppercase;
        font-size: 1.4rem;
        letter-spacing: .2rem;
        font-weight: 600;
    }
    h3{

        font-size: 1.4rem;
        letter-spacing: .2rem;
        font-weight: 600;
    }

/*sections*/


#moreaboutme, #portfolio_list{
    overflow-y:hidden; 
    transition-property: height;
    transition-duration: 0.5s;
    -webkit-transition-property: height;
    -webkit-transition-duration: 0.5s;
    -o-transition-property: height;
    -o-transition-duration: 0.5s;
       
}
.hidden{
    
    height:0px !important;
}

ul.inline{
    text-align: center
}
ul.inline li{
    display:inline;
    margin-right:10px;

}
.center{
    text-align: center
}

/*thumbnail*/

.thumbnail{
    position:relative;
    text-align: center;
    top:0px;
    transition-property: transform, top;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-property: transform, top;
    -webkit-transition-duration: 0.5s, 0.5s;
    -o-transition-property: transform, top;
    -o-transition-duration: 0.5s, 0.5s;
    height:100px;
}

.thumbnail:hover{
   
    -ms-transform: rotate(-9deg); /* IE 9 */
    -webkit-transform: rotate(-9deg); /* Chrome, Safari, Opera */
    transform: rotate(-9deg);

}
.thumbnail img{
    max-width:100%; 
    max-height:50px;
    margin:auto;   
}

@media (max-width: 550px) {
    .thumbnail{
        width: 50%;
        float:left;
    }
    .thumbnail img{
        width: auto;
        max-width:100px;
    }
}



/*icons*/
.ion-large{
    font-size:140px;
    color: white;
    /*borde*/
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #666;
    /*animacion*/
    transition-property: color, transform, text-shadow;
    transition-duration: 1s, 0.5s, 0.5s;
    -webkit-transition-property: color, transform, text-shadow;
    -webkit-transition-duration: 1s, 0.5s, 0.5s;
    -o-transition-property:  color, transform, text-shadow;
    -o-transition-duration: 1s, 0.5s, 0.5s;

    text-shadow: rgb(3, 3, 3) 0;
    -webkit-text-shadow: rgb(3, 3, 3) 0;
    -o-text-shadow: #FFF 0;
}
img.ion-large{
    max-width:100%;
    max-height: 100px;
}
section.hover:hover .ion-large{
    color:#DDD;
    cursor:pointer;
      /*rotación*/
          /*rotación*/
    -ms-transform: rotate(-9deg); /* IE 9 */
    -webkit-transform: rotate(-9deg); /* Chrome, Safari, Opera */
    transform: rotate(-9deg);
    text-shadow: rgb(3, 3, 3) 3px 4px 4px;
    -webkit-text-shadow: rgb(3, 3, 3) 3px 4px 4px;
    -o-text-shadow: #666 3px 4px 4px;

}

.ion-android-hand{
/*rotación*/
    -ms-transform: rotate(16deg); /* IE 9 */
    -webkit-transform: rotate(16deg); /* Chrome, Safari, Opera */
    transform: rotate(16deg);
    
    
}
/*icons*/

/*tooltip*/
/*
Tipr 2.0.1
Copyright (c) 2015 Tipue
Tipr is released under the MIT License
http://www.tipue.com/tipr
*/

.

.tipr_content
{
     font: 13px/1.7 'Helvetica Neue', Helvetica, Arial, sans-serif;
     color: #333; 
     background-color: #fff;
     padding: 9px 17px;
}
.tipr_container_bottom
{
     display: none;
     position: absolute;
     margin-top: 13px;
     box-shadow: 2px 2px 5px #f9f9f9;
     z-index: 1000;
}
.tipr_container_top
{

     display: none;
     position: absolute;
     margin-top: -77px;
     box-shadow: 2px 2px 5px #f9f9f9;
     z-index: 1000;

}
.tipr_point_top, .tipr_point_bottom 
{
     position: relative;
    background: #fff;
    border: 1px solid #dcdcdc;
}
.tipr_point_top:after, .tipr_point_top:before
{
    position: absolute;
    pointer-events: none;
    border: solid transparent;
    top: 100%;
    content: "";
    height: 0;
    width: 0;
}
.tipr_point_top:after
{
    border-top-color: #fff;
    border-width: 8px;
    left: 50%;
    margin-left: -8px;
}
.tipr_point_top:before 
{
    border-top-color: #dcdcdc;
    border-width: 9px;
    left: 50%;
    margin-left: -9px;
}
.tipr_point_bottom:after, .tipr_point_bottom:before
{
    position: absolute;
    pointer-events: none;
    border: solid transparent;
    bottom: 100%;
    content: "";
    height: 0;
    width: 0;
}
.tipr_point_bottom:after
{
    border-bottom-color: #fff;
    border-width: 8px;
    left: 50%;
    margin-left: -8px;
}
.tipr_point_bottom:before 
{
    border-bottom-color: #dcdcdc;
    border-width: 9px;
    left: 50%;
    margin-left: -9px;
}

/*button form save thanx asstor ¡http://codepen.io/asstor_/pen/MYMZZK*/

button#form_save {
  outline: none;
  height: 40px;
  text-align: center;
  width: 130px;
  border-radius: 6px;
  background: #33C3F0;
  border: 3px solid #33C3F0;
  color: #FFF;
  letter-spacing: 1px;
  text-shadow: 0;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  float:right;
}
button#form_save:hover {
  color: white;
  background: #1ECD9;
}
button#form_save:active {
  letter-spacing: 2px;
}
button#form_save:after {
  content: "Enviar";
}

button#form_save.onclic {
  width: 40px;
  padding:0px;
  border-color: #bbbbbb;
  border-radius: 40px;
  background: #FFF;
  border-width: 3px;
  font-size: 0;
  border-left-color: #33C3F0;
  -webkit-animation: rotating 2s 0.25s linear infinite;
          animation: rotating 2s 0.25s linear infinite;
}
button#form_save.onclic:after {
  content: "";
}
button#form_save.onclic:hover {
  color: #1ECD97;
  background: white;
}

button#form_save.validate {
  font-size: 13px;
  background: #FFF;
  border: #FFF;
  color: #33C3F0;
  width: 100%;
}
button#form_save.validate:after {
  font-family: 'Ionicons';
  content: "\f2c3";
}

@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.required:after {
    content: "*";
}
input.error{
    border:1px solid #9c5853;
    
}
span.error{
    font-style: italic;
    color:#Ac9893;
    font-size:0.9em;
}
/*copy left*/
.copy-left{
    display: inline-block;
    text-align: right;
    margin: 0px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
.copy-left .tipr_container_top{
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    position:absolute;
    width:400px;
    text-align:left;
    bottom: 25px;
     left: 0px; 
}

/*charts*/
.charts img{
  width:100%;
}

/*portfolio*/
#portfolio_list{
  text-align:center;

}
#portfolio_list a{
  position:relative;
}
#portfolio_list a .tipr_container_top{
  bottom:100px;
  width: 500px
}
#portfolio_list a .tipr_container_top img{
  width:100%;  
}