@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Abel|Roboto+Condensed:300,400,700");
/******** GLOBAL ********/
*::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none; }

*::--webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none; }

*::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none; }

body {
  font-family: "Abel", sans-serif;
  background-color: #CCC;
  color: #333333;
  font-size: 15px;
  line-height: 1.8em;
  letter-spacing: 0.1em; }

h1,
h2,
h3,
h4 {
  font-family: "Roboto Condensed", sans-serif;
  padding: 0;
  margin: 0; }

h1 {
  font-size: 4em;
  font-weight: 700;
  color: #FFF; }

h2 {
  font-size: 2.5em;
  font-weight: 700; }

h3 {
  font-size: 2em;
  font-weight: 300; }

h4 {
  font-size: 0.8em;
  font-weight: 300;
  text-transform: uppercase;
  padding-bottom: 0.5em;
  letter-spacing: 0.05em; }

.externo:after {
  font-family: 'FontAwesome';
  content: "\f08e";
  font-size: 10px;
  padding-left: 2px; }

.box {
  padding: 10em 0; }

.box-base {
  background-color: #FFF; }

.box-principal {
  background-color: #F4F4F4; }

.box-secundario {
  background-color: #FF951F;
  color: #FFF; }
  .box-secundario a {
    color: #f1f1f1;
    text-decoration: none;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
    .box-secundario a:hover {
      color: #333333; }

.box-terciario {
  background-color: #EA7C02;
  color: #FFF; }

.box-nav {
  padding: 2em 0; }

article h2,
h3 {
  padding-bottom: 0.5em; }

.note {
  opacity: 0.6; }

.btn:hover,
.btn:focus,
.btn.focus {
  color: #FF951F;
  text-decoration: none; }

.btn-secundario {
  color: white !important;
  background-color: transparent;
  border-color: #f1f1f1;
  border-radius: 0;
  padding: 0.7em 1.2em;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.btn-secundario:focus,
.btn-secundario.focus {
  color: #FF951F;
  background-color: #FFF;
  border-color: #FFF; }

.btn-secundario:hover {
  color: #333 !important;
  background-color: #FFF;
  border-color: #FFF; }

.btn-secundario:active,
.btn-secundario.active {
  color: #FF951F;
  background-color: #FFF;
  border-color: #FFF; }

.versiguiente,
.verportafolio {
  margin-right: 3em; }

.veranterior {
  margin-left: 3em; }

.btn-nav {
  color: #000;
  background-color: #FFF;
  border-color: #FFF;
  border-radius: 50%;
  padding: 0.7em 1.2em;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.versiguiente .btn-nav:before {
  content: '';
  position: absolute;
  margin-left: -100px;
  color: white;
  background-color: transparent;
  opacity: 0;
  with: 0;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.versiguiente .btn-nav:hover:before {
  content: 'Siguiente proyecto';
  position: absolute;
  margin-left: -170px;
  opacity: 1;
  with: 100px; }

.veranterior .btn-nav:before {
  content: '';
  position: absolute;
  margin-left: -50px;
  color: white;
  background-color: transparent;
  opacity: 0;
  with: 0;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.veranterior .btn-nav:hover:before {
  content: 'Volver atrás';
  position: absolute;
  margin-left: 35px;
  opacity: 1;
  with: 100px; }

.verportafolio .btn-nav:before {
  content: '';
  position: absolute;
  margin-left: -100px;
  color: white;
  background-color: transparent;
  opacity: 0;
  with: 0;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.verportafolio .btn-nav:hover:before {
  content: 'Ver portafolio';
  position: absolute;
  margin-left: -140px;
  opacity: 1;
  with: 100px; }

.btn-nav:focus,
.btn-nav.focus {
  color: #FF951F;
  background-color: #FFF;
  border-color: #FFF; }

.btn-nav:hover {
  color: #FF951F;
  background-color: #FFF;
  border-color: #FFF; }

.btn-nav:active,
.btn-nav.active {
  color: #FF951F;
  background-color: #FFF;
  border-color: #FFF; }

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none; }

/******** FIN GLOBAL ********/
/******** MENU ********/
#logo-endercepeda {
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }

#menu_principal {
  position: fixed;
  top: 45%;
  left: 0;
  right: 0; }

#menu_principal ul {
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0; }

#menu_principal ul li {
  vertical-align: top;
  display: inline-block;
  /* if you need ie6/7 support */
  *display: inline;
  zoom: 1; }

#menu_principal a {
  float: left;
  cursor: pointer;
  width: 33%;
  text-align: center;
  color: white;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  text-decoration: none; }

#menu_principal a:hover {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); }

#menu_principal a:hover:after {
  margin-left: 20px; }

#menu_principal a:after {
  content: url("../img/arrow-right.png");
  position: absolute;
  margin-top: 1px;
  margin-left: 10px;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }

/******** FIN MENU ********/
/******** INICIO ********/
.centercenter {
  position: absolute;
  margin: 0 auto;
  color: #FFF;
  width: 100%;
  z-index: 1;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%); }

.homepage-hero-module {
  border-right: none;
  border-left: none;
  position: relative; }

.no-video .video-container video,
.touch .video-container video {
  display: none; }

.no-video .video-container .poster,
.touch .video-container .poster {
  display: block !important; }

.video-container {
  position: relative;
  bottom: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden; }

.video-container .poster img {
  width: 100%;
  bottom: 0;
  position: absolute; }

.video-container .filter {
  z-index: 1;
  position: absolute;
  background: rgba(0, 0, 0, 0.1);
  width: 100%; }

.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0; }

.video-container video.fillWidth {
  width: 100%; }

/******** FIN INICIO ********/
/******** SOBRE MI ********/
.hero_sobremi {
  background: url(../img/sobre-mi.jpg) no-repeat center center fixed;
  background-size: cover;
  background-attachment: scroll;
  height: 100vh;
  width: 100%; }
  .hero_sobremi:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0));
    opacity: .6;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease; }
  .hero_sobremi:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0));
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0));
    opacity: .6;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease; }

.hero_sobremi_content {
  position: absolute;
  bottom: 5%;
  left: 5%;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease; }
  .hero_sobremi_content p {
    margin-left: 3px;
    color: #FFF; }

.hero_sobremi_content_icon {
  padding-bottom: 2px; }

.hero_sobremi_content.shrink {
  opacity: 0; }

#skills {
  -webkit-columns: 2;
          columns: 2;
  margin: 0;
  padding: 0; }

#skills > li {
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
          break-inside: avoid;
  list-style-type: none;
  line-height: 2em; }

/******** FIN SOBRE MI ********/
/******** PORTAFOLIO ********/
.hero-image {
  max-width: 100%;
  width: 100%;
  margin: auto;
  position: relative;
  color: #FFF; }
  .hero-image a {
    cursor: pointer;
    color: #FFF; }
  .hero-image .descripcion {
    position: absolute;
    bottom: 3em;
    left: 1em;
    z-index: 5; }
    .hero-image .descripcion .tags {
      text-transform: uppercase;
      opacity: 0;
      -webkit-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease; }
    .hero-image .descripcion .vermas {
      text-transform: uppercase;
      opacity: 0;
      -webkit-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease; }
    .hero-image .descripcion h1 {
      margin: 0 0 -15px 0;
      -webkit-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      font-size: 2.5em; }
    .hero-image .descripcion p {
      margin: 0 0 -10px 0;
      -webkit-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease; }
  .hero-image:after {
    display: block;
    position: relative;
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
    background-image: -webkit-linear-gradient(top, transparent, black);
    background-image: -o-linear-gradient(top, transparent, black);
    background-image: linear-gradient(to bottom, transparent, black);
    margin-top: -200px;
    height: 200px;
    content: ''; }
  .hero-image:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(white));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), white);
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), white);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), white);
    opacity: .2;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease; }
  .hero-image:hover .tags {
    opacity: 1;
    -webkit-transform: translateY(2px);
        -ms-transform: translateY(2px);
            transform: translateY(2px); }
  .hero-image:hover .vermas {
    opacity: 1;
    -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
            transform: translateY(20px); }
  .hero-image:hover h1 {
    -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
            transform: translateY(-10px); }
  .hero-image:hover p {
    -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
            transform: translateY(10px); }

.portafolio_detalle:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
  opacity: .5;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.portafolio_detalle:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
  opacity: .5;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.hero_portafolio_content {
  position: absolute;
  bottom: 5%;
  left: 5%;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  z-index: 1; }

.detalle_portafolio h4 {
  color: #FF951F; }

.detalle_portafolio_content {
  padding-top: 3em; }

.sep {
  border-right: 1px solid #CCC;
  border-left: 1px solid #CCC; }

.detalle_portafolio_icon img {
  height: 3.5em;
  padding-bottom: 1em; }

.detalle_contacto a {
  color: #FF951F;
  text-decoration: none;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.detalle_contacto a:hover {
  color: #333; }

.detalle_contacto_icon img {
  height: 3em;
  padding-bottom: 1em; }

.arrow {
  color: white;
  font-size: 2em;
  position: absolute;
  z-index: 1;
  bottom: 7%;
  right: 6%;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

/******** FIN PORTAFOLIO ********/
/******** CONTACTAME ********/
.hero_contact {
  background: url(../img/contactame.jpg) no-repeat center center fixed;
  background-size: cover;
  height: 100vh;
  width: 100%;
  background-attachment: scroll; }
  .hero_contact:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0));
    opacity: .6;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease; }
  .hero_contact:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0));
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0));
    opacity: .6;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease; }

.hero_contact_content {
  position: absolute;
  bottom: 5%;
  left: 5%;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease; }

.hero_contact_content.shrink {
  opacity: 0; }

.icon img {
  padding: 1em; }

/******** FIN CONTACTAME ********/
/* Medium Devices, Desktops MD*/
@media only screen and (max-width: 992px) {
  .well {
    background-color: red; } }

/* Small Devices, Tablets SM */
@media only screen and (max-width: 768px) {
  .well {
    background-color: blue; }
  .vcenter {
    display: block; }
  .sep {
    border: 0; }
  .vcenter {
    display: block; }
  .center-text {
    text-align: center; } }

/* Extra Small Devices, Phones  XS */
@media only screen and (max-width: 480px) {
  .well {
    background-color: yellow; } }

@media only screen and (max-width: 480px) and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .hero_sobremi_content {
      bottom: 15%; }
    .hero_portafolio_content {
      bottom: 15%; }
    .hero_contact_content {
      bottom: 15%; }
    .arrow {
      bottom: 22%; } } }

@media only screen and (max-width: 480px) {
  #menu_principal a {
    float: none;
    font-size: 2em; }
  #menu_principal li {
    margin-bottom: 2em; }
  .hero-image {
    max-width: 100%;
    width: 800px;
    margin: auto;
    position: relative;
    color: #FFF; }
    .hero-image a {
      cursor: pointer;
      color: #FFF; }
    .hero-image .descripcion {
      position: absolute;
      bottom: 5.5em;
      left: 1em;
      z-index: 5; }
      .hero-image .descripcion .tags {
        display: none; }
      .hero-image .descripcion .vermas {
        text-transform: uppercase;
        opacity: 1;
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease; }
      .hero-image .descripcion h1 {
        margin: 0;
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        font-size: 2.5em; }
      .hero-image .descripcion p {
        margin: 0 0 5px 0;
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease; }
    .hero-image:hover .tags {
      opacity: 1;
      -webkit-transform: none;
          -ms-transform: none;
              transform: none; }
    .hero-image:hover .vermas {
      opacity: 1;
      -webkit-transform: none;
          -ms-transform: none;
              transform: none; }
    .hero-image:hover h1 {
      -webkit-transform: none;
          -ms-transform: none;
              transform: none; }
    .hero-image:hover p {
      -webkit-transform: none;
          -ms-transform: none;
              transform: none; }
  h1 {
    font-size: 2.5em; }
  .hero_sobremi_content_icon {
    padding-bottom: 2px; }
  .sep {
    border: 0; }
  .detalle_contacto_icon, .detalle_portafolio_icon {
    margin-bottom: 3em; }
  .verportafolio .btn-nav:hover:before {
    content: '';
    position: absolute;
    margin-left: -100px;
    color: white;
    background-color: transparent;
    opacity: 0;
    with: 0;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease; }
  .verportafolio .btn-nav:before {
    content: 'Ver portafolio';
    position: absolute;
    margin-left: -120px;
    opacity: 1;
    with: 100px; }
  .versiguiente,
  .verportafolio {
    margin-right: 1em; }
  .veranterior {
    margin-left: 1em; }
  .vcenter {
    display: block; }
  .hidden {
    display: block !important; }
  .center-text {
    text-align: center; } }

/*# sourceMappingURL=main.css.map */