#wrap_about{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#abt_bt, #awd_bt, #rapidez_bt, #resultado_bt, #comprmosio_bt, #contactoos_bt{ cursor:pointer;}
/* about */
#about {
  overflow: scroll;
  background-color: #e97168; 
}

.inner{
  position:absolute;
  top:50%;
  height:10em;
  text-align: center;
  margin: 0;
  width: 100%;
  height: 100%;
}


.inner a{
  text-decoration: none;
}

#abt, #edu, #exp, #awd {
  position: absolute;
  width: 50%;
  height: 50%;
  cursor: pointer;
  -webkit-transition-duration: .3s;
  -webkit-duration: .3s;
  -moz-duration: .3s;
  -o-duration: .3s;
  transition-duration: .3s;
}

#abt { top: 0; left: 0; background-color: #e97168; }
#edu { top: 50%; left: 0; background-color: #e34d42; }
#exp { top: 0; left: 50%; background-color: #d94a3f; }
#awd { top: 50%; left: 50%; background-color: #cf1d0f; }

#abt h3, #edu h3, #exp h3, #awd h3 {
  width: 100%;
  text-align: center;
  font-family: 'kocha';
  font-size: 2.5em;
  color: #f8f5ef;
  margin-top: 0em;
  -webkit-font-smoothing: antialiased;
  -webkit-transition-duration: margin 0.4s;
  -webkit-transition: margin 0.4s;
  -moz-transition: margin 0.4s;
  -o-transition: margin 0.4s;
  transition: margin 0.4s;
}

#abt h3:hover, #edu h3:hover, #exp h3:hover, #awd h3:hover { margin-top: -0.5em; }

#abt h3:before { content: "\a9"; }
#edu h3:before { content: "\2710"; }
#exp h3:before { content: "\25b6"; }
#awd h3:before { content: "\2605"; }

/* about content _show */
#edu_show, #exp_show{
      display: none;
    position: absolute;
    overflow: auto;
    padding: 5%;
    width: 90%;
height:360px;
    z-index: 200;
    white-space: wrap;
}

#abt_show, #awd_show, #comprmosio_show, #rapidez_show, #resultado_show {
      display: none;
    position: absolute;
    overflow: auto;
    padding: 5%;
    width: 90%;
height:460px;
    z-index: 200;
    white-space: wrap;
}

#contactoos_show {
      display: none;
    position: absolute;
    padding: 5%;
    width:50%;
	background:#e6e6e6;
	margin-left:20%;
	margin-right:25%;
	margin-top:-250px;
height:500px;
    z-index: 200;
    white-space: wrap;
}
#exp_show, #edu_show{ background-color: #F5AF01; }
#abt_show, #awd_show, #comprmosio_show, #rapidez_show, #resultado_show { background-color:#E3EFEB; }


#about img { width: 100% }

#about h2 {
  font-size: 2.5em;
  line-height: 1em;
  font-weight: 700;
  color: #ffffff;
}

#about p {
  color: #ffffff;
  font-size: 1.5em;
  font-weight: 700;
  text-align: justify;
  padding-right: 15%;
}

#about a {
  color: #eec22f;
  text-decoration: none;
  font-size: 1em;
  font-weight: 700;
}

#about a:hover,
#about a:focus,
#about a:visited {
  color: #eec22f;
  text-decoration: underline;
  font-size: 1em;
  font-weight: 700;
}

.close {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 5%;
  right: 10%;
  cursor: pointer;
}

.close:before,
.close:after {
  content: '';
  position: absolute;
  width: 100%;
  top: 50%;
  height: 1px;
  background:#fff;
  opacity: 1;
  -webkit-transition-duration: .3s;
  -webkit-duration: .3s;
  -moz-duration: .3s;
  -o-duration: .3s;
  transition-duration: .3s;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
 }

 .close:after{
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.close:hover::before,
.close:hover::after {
  opacity: 0.5;

}

/*popit*/

.closee {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 5%;
  right: 10%;
  z-index:10;
  cursor: pointer;
}

.closee:before,
.closee:after {
  content: '';
  position: absolute;
  width: 100%;
  top: 50%;
  height: 1px;
  background:#e3ae00;
  opacity: 1;
  -webkit-transition-duration: .3s;
  -webkit-duration: .3s;
  -moz-duration: .3s;
  -o-duration: .3s;
  transition-duration: .3s;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
 }

 .closee:after{
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.closee:hover::before,
.closee:hover::after {
  opacity: 0.5;

}