/* Globales */ 

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
  /* debido al proyecto se debe utilizar div.nombreClase */

/* ---------------------------------------------------------- */
:root { 
  --blanco: #ffffff;
  --primario: #f2f2f2;
  --secundario: #fe4918;
  --terciario: #353535;
  --gris: #757575;
  --oscuro: #212121;
  --negro: #000000;
  --anchoPantalla: 1200px;
}

.floatR {
  float: right;
}

.floatL{
  float: left;
}

html {
  box-sizing: border-box;
  font-size: 62.5%; /* 1rem = 10px es mucho mejor para dispositivos móviles */
}

*,*:before,*:after {
  box-sizing: inherit;
}

body {
    background-color: var(--primario);
    font-family: 'Open Sans', sans-serif;
}

/************************* Globales **/
.container {
  width: 98%;
  margin:0 auto;
}

@media only screen and (min-width:480px) {
  .container {
    width: 95%;
  }
}

@media only screen and (min-width:768px) {
  .container {
    width: 90%;
  }
}

@media only screen and (min-width:992px) {
  .container {
    width: 90%;
    max-width: 1100px;
  }
}

.section_ {
  padding: 20px 0 100px 0;
}

.section_ p {
  font-size: 1.6em;
  text-align: center;
  margin: 0 0.5rem 0 0.5rem;
}

h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.4em;
    text-transform: uppercase;
    text-align: center;
}

h2::after {
  content: '';
  margin: 0 auto;
  background-image: url(../img/separador.png);
  height: 30px;
  width: 100px;
  display: block;
  margin-top: 40px;
}

h3 {
  font-size: 1.8em;
  color: #fe4918;
  font-family: 'PT Sans', sans-serif;
  margin: 0;
}

.button {
  background-color: #fe4918;
  padding: 10px 40px;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: bold;
   font-family: 'Oswald', sans-serif;
   text-decoration: none;
   font-size: 1em;
   margin-top: 20px;
   display: inline-block;
   transition: all .3s ease;
   border: 2px solid #fe4918;
}

ul {
  list-style: none;
  margin:0;
  padding: 0;
}

.button:hover {
  background-color: #e33000;
}

.float-right {
  float: right;
}

/************************* Header **/
header{
  background-image: url(../img/pexels-negative-space-160107.jpg);
  height: 100vh;
  background-position: center center;
  background-size: cover;
}

.content-header{
  padding-top: 4rem;
}

@media only screen and (min-width: 768px){
  .content-header{
    padding-top: 2.5rem;
  }
}

.social-red{
  text-align: center;
}

.social-red a i.fa,
.social-red a i.fab{
  color: var(--blanco);
  font-size: 3rem;
  margin-right: 20px;
}

.social-red a i.fa:hover,
.social-red a i.fab:hover{
  color: var(--secundario);
}

.social-red a:last-child{
  margin-right: 0;
}

.information {
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  color: var(--blanco);
}

@media only screen and (min-width:768px) {
  .information {
    width: 60%;
    margin: 0 auto;
    margin-top: 50px;
  }
}

.information p {
  margin:0;
  display: inline;
  font-size: 20px;
  text-transform: uppercase;
}

.information p i {
  color: var(--secundario);
  font-size: 2.4rem;
}

.city {
  text-align: right;
}

.site-name {
  color: var(--blanco);
  text-transform: uppercase;
  font-family: 'PT Sans', sans-serif;
  margin-top: 5rem !important;
  text-align: center;
}

.name {
  background: -webkit-linear-gradient(left, var(--oscuro) , var(--blanco));
  background: -o-linear-gradient(right, var(--oscuro), var(--blanco));
  background: -moz-linear-gradient(right, var(--oscuro), var(--blanco));
  background: linear-gradient(to right, var(--oscuro) 25%, var(--blanco) 75%); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 5.5vw;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.slogan {
  color: var(--secundario);
  /* text-transform: none !important; */
  text-align: center;
  /* margin-top: 1rem; */
  font-size: 3rem;
  margin-top: 75px;
}

@media only screen and (max-width:768px) {
  .slogan{
    font-size: 1.5rem;
  }
}

.slogan span {
  font-weight: bold;
  text-transform: uppercase;
}

/* .slogan span:first-child{
  color: var(--oscuro);
  font-weight: bold;
} */

/************************* Barra **/
.bar {
  background-color: var(--terciario);
  padding: 20px 0;
}

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

.cv-file{
  font-size: 2rem;
  float: left;
  margin-top: 10px;
  color: var(--secundario);
  background-color: var(--terciario);
  border: 1px solid var(--secundario);
  padding: 5px;
  text-decoration: none;
}

.cv-file:hover{
  background-color: var(--secundario);
  color: var(--blanco);
}


/************************* menú móvil */
.menu-movil {
  width: 60px;
  display: block;
  float: right;
  text-align: right;
  margin-top: 1.2rem;
}

.menu-movil:hover {
  cursor: pointer;
}

@media only screen and (min-width: 768px) {
  .menu-movil {
      display: none;
  }
}

.menu-movil span{
  height: 8px;
  margin-bottom: 6px;
  background-color: var(--blanco);
  display: block; 
} 

/************************* Nav principal **/
.principal-nav {
  display: none;
  width: 100%;
}

.principal-nav a {
   font-family: 'Oswald', sans-serif;
   color: var(--blanco);
   font-size: 1.6em;
   text-transform: uppercase;
   text-decoration: none;
   transition: all .8s ease;
   width: 100%;
   display: block;
   text-align: center;
   margin-bottom: 20px;
   clear: both;
}

@media only screen and (min-width:768px) {
  .principal-nav {
    width: 67%;
    float: right;
    text-align: right;
    display: block;
  }

  .principal-nav a {
    padding: 10px 10px;
    display: inline-block;
    width:auto;
    text-align: center;
    margin: 0 10px 0 0;
  }
}

.principal-nav a:hover {
  background-color: var(--secundario);
}

.principal-nav a:last-child {
  border: 2px solid var(--secundario);
  color: var(--secundario);
}

.principal-nav a:last-child:hover {
  color: var(--blanco);
}

/************************* experiences **/
.experience {
  position: relative;
}

.container-video {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: var(--terciario);
  margin-bottom: 100px;
}


.container-experience {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.experience-event {
  background-color: var(--blanco);
  padding: 15px;
  margin-top: 80px;
  float: right;
}

@media only screen and (min-width:768px) {
    .experience-event {
        width: 70%;
    }
}

@media only screen and (min-width:992px) {
    .experience-event {
        width: 50%;
    }
}

.menu-experience {
  width: 100%;
}

@media only screen and (min-width:768px) {
    .menu-experience {
        display: table;
    }
}

.menu-experience a {
  display: block;
  text-align: center;
  color: var(--negro);
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  margin-bottom: 10px;
  font-size: 1.6em;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--secundario);
}

.menu-experience a.activo::after {
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  height: 26px;
  width: 22px;
  background-image: url(../img/talleres-flecha.jpg);
  /* background-image: url(../img/svg/down-arrow.svg); */
  background-position: top center;
  background-repeat: no-repeat;
  bottom: -26px;
  margin: 0 auto;
}

.menu-experience a.activo::after svg{
  color: var(--secundario);
  fill: currentColor;
}

@media only screen and (min-width:768px) {
    .menu-experience a {
      display: table-cell;
    }
}

.menu-experience a i,
.detail p i {
  color: var(--secundario);
  font-size: 1.6em;
  margin-right: 10px;
}


/************************* detail **/
.detail {
  margin-top: 20px;
  border-bottom: 1px solid var(--negro);
  padding: 0 20px;
}

.detail:nth-child(2){
  border:none;
}

.detail p {
  margin-bottom: 20px;
  font-size: 20px;
}
.detail li{
  font-size: 1.6rem;
  padding: 5px 0 5px 0;
}

.detail li .fa-circle{
  margin-left: 40px;
  margin-right: 30px;
}

.detail-hide {
  display: none;
}

/*************************  educations   **/
.educations {
  padding-bottom: 20px;
}

.education {
  padding: 5px;
}

@media only screen and (min-width:768px){
  .education {
    float: left;
    width: 50%;
  }
}

.education blockquote {
  background-color: var(--blanco);
  border: 1px solid var(--gris);
  position: relative;
  margin: 0 0 10px 0;
  padding-bottom: 20px;
}

.education blockquote p:first-of-type{
  text-align: center!important;
  color: var(--secundario);
  margin-top: 10px;
  margin-bottom: 20px;
  font-weight: 700;
}

.education blockquote p {
  text-align: justify !important;
  font-size: 2em !important;    
  font-family: 'PT Sans', sans-serif;
  padding: 0 20px 0 65px;
}

.education blockquote p::before {
  content: '\201c';
  position: absolute;
  left: 13px;
  top: 50px;
  font-size: 8rem;
  margin:0;
  padding:0;
  line-height: 1;
  color: var(--secundario);
}

.education footer.info-education {
  padding: 0;
  background-color: transparent;
}

.education footer.info-education p {
  float: left;
  width: 20%;
  display: inline;
  margin-left: 20px;
  color:var(--secundario);
}

.education footer.info-education cite {
  text-align: right;    
  margin-right: 20px;
  text-transform: uppercase;
  font-size: 12px;
  padding-top: 20px;
  width: 66.6%;
  float: right;
  font-weight: bold;
  font-style: normal;
}

.education footer.info-education cite span {
  color: var(--negro);
  display: block;
  text-transform: none;
  margin-top: 5px;
}

/************************* knowledges **/
.knowledges{
  max-width: 1800px;
}

.list-knowledge li  {
  padding: 10px;
  float: left;
}

@media only screen and (min-width:480px) {
  .list-knowledge li  {
      flex: 0 0 100%;
  }
} 

@media only screen and (min-width:768px) {
  .list-knowledge li  {
      /* 100 / 12 = 8,3
      8,3 * 10 = 83,3 */
      float: 0 0 calc(83.3% - 1rem);
  }
} 

@media only screen and (min-width:900px) {
  .list-knowledge li  {
      flex: 0 0 calc(66.6% - 1rem);
  }
}

@media only screen and (min-width:1024px) {
  .list-knowledge li  {
      flex: 0 0 calc(50% - 1rem);
  }
}

@media only screen and (min-width:1200px) {
  .list-knowledges li  {
      flex: 0 0 calc(33.3% - 1rem);
  }
}

.knowledge {
  position: relative;
  overflow: hidden;
  margin-left: 45px;
}

.knowledge img {
  width: 150px;
  height: 140px;
  filter: var(--oscuro);
  -webkit-filter: grayscale(1);
  -webkit-transition: all .9s ease-in-out;
}

.knowledge:hover img {
  -webkit-filter: grayscale(0);
  -webkit-transform: scale(0.6);
}

.knowledge p {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 15px 10px;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.75);
  width: 100%;
  text-align: right;
  font-family: 'Oswald', sans-serif;
  color: var(--secundario);
  text-transform: uppercase;
  -webkit-transition: all .9s ease-in-out;
}

.knowledge:hover p {
  bottom: -80px;
  opacity: 0;
}

/************************* count */
.parallax::before {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  filter: brightness(0.8);
  -webkit-filter: brightness(0.8);
}

.count {
  position: relative;
  height: auto;
}

.count::before  {
  background-image: url(../img/pexels-lukas-574077.jpg);
  background-position: center center;
  content:'';
}

.rezume {
  position: relative;
  padding: 120px 0;
}

.rezume li {
  width: 50%;
  float: left;
  text-align: center;
  color: var(--blanco);
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
}

@media only screen and (min-width:768px){
  .rezume li {
      width: 25%; 
  }
}

.number{
  color: var(--secundario);
  font-size: 4em;
  display: block;
  margin: 0 0 10px 0;
  font-family: 'Oswald', sans-serif;
}

@media (max-width: 560px){
  .rezume li{
    display: block;
    width: 100%;
  }
}

/*************************  courses   **/
.courses {
  padding-bottom: 20px;
}

.cours {
  width: 100%;
  border: 1px solid var(--gris);
  margin-bottom: 10px;
  float: left;
}

.cours blockquote {
  background-color: var(--blanco);
  left: 0;
}


.cours blockquote p{
  color: var(--negro);
  text-align: left;
  font-size: 2em !important;    
  font-family: 'PT Sans', sans-serif;
  padding: 20px 0 20px 0;
  margin-bottom: 20px;
  font-weight: 400;
}

.cours blockquote p i{
  color: var(--secundario);
}

.cours blockquote p cite{
  color: var(--negro);
  margin-right: 20px;
}

.cours li{
  font-size: 1.6rem;
  margin-left: 50px;
  text-decoration: underline;
  line-height: 2.6rem;
}

.cours i.fa{
  font-size: 2rem;
  justify-content: space-between;
  margin: 20px 20px 0 0;
}

/*************************  Newsletter:   **/
.newsletter {
  position: relative;
  height: auto;
}

.newsletter::before {
  background-image: url(../img/pexels-negative-space-169573.jpg);
  content: '';
}

.newsletter .content {
  position: relative;
  padding: 100px 0;
  margin: 0 auto;
  text-align: center;
}

.newsletter li {
  width: 25%;
  float: left;
  text-align: center;
  color: var(--blanco);
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
}

.newsletter .content p{
  /* display: inline-flex; */
  margin: 50px;
}

.newsletter .content h3 {
  color: var(--blanco);
  text-transform: uppercase;
  font-size: 4vw;
  font-family: 'PT Sans', sans-serif;
}

.newsletter .content:nth-child(2) p{
  display: inline-flex;
}


@media (max-width: 480px){
  .newsletter .content h3{
    font-size: 7vw;
  }
}

@media (max-width: 560px){
  .newsletter li {
    width: 50%;
    height: 300px;
    margin-top: 50px;
  }
}

.newsletter .content p {
  font-size: 1.4em;
  text-transform: lowercase;
  font-weight: 400;
  color: var(--blanco);
}

.newsletter img{
  width: 100px;
  height: 100px;
}

/************************* Tabla de contact **/
.topNav{
  width: 100%;
  float: right;
  text-align: right;
  margin-right: 70px;
  z-index: 2;
}

.topNav a{
  text-decoration: none;
  font-size: 7rem;
  color: var(--secundario);
}

.list-contact > li {
  padding: 10px;
}

@media only screen and (min-width:768px){
  .list-contact > li {
    float: left;
    width: 33.3%;
  }
}

.table-contact {
  border: 1px solid var(--gris);
  background-color: var(--blanco);
  padding: 40px 0;
  text-align: center;
  transition: all .6s ease;
}

.table-contact p i{
  font-size: 5rem;
  color: rgb(49, 145, 26);
}

/* .table-contact ul li:nth-child(2){
  color: var(--negro);
} */

.table-contact:hover {
  transform: scale(1.4);
  border: 1px solid var(--secundario);
  box-shadow: 0px 0px 50px var(--gris);
  font-size: 5rem;
  font-weight: 900;
}

.table-contact ul li {
    font-family: 'PT Sans', sans-serif;
    font-size: 14px;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: var(--oscuro);
    line-height: 26px;
    list-style: none;
}

.table-contact .social-red a i.fa, 
.table-contact .social-red a i.fab {
  color: var(--negro);
  font-size: 4rem;
  margin-right: 0;
}

.table-contact .social-red a i.fa:hover, 
.table-contact .social-red a i.fab:hover {
  color: var(--secundario);
}

.table-contact h3 {
  font-family: 'Oswald', sans-serif;
  font-size:16px;
  text-transform: uppercase;
}

.table-contact p.number {
  color: var(--negro);
  margin: 20px 0;
}

/************************* Footer **/
footer {
  background-color: var(--oscuro);
  padding-top: 40px;
  margin-top: 55px;
}

footer .container > div {
  color: var(--blanco);
  padding: 0px 20px;
  font-size: 16px;
}

@media only screen and (min-width:768px){
  footer .container > div {
      width: 33.3%;
      float: left;
  }
}

footer h3 {
  color: var(--blanco);
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  margin-bottom: 20px;
  text-align: center;
}

footer h3 span {
  color: var(--secundario);
}

footer p{
  font-size: 1.8rem!important;
  text-align: center;
  color: var(--blanco);
}

footer p.slogan{
  font-size: 2.2rem!important;
  text-align: center;
  color: var(--secundario);
  margin-top: 20px;
}

footer .last-info li {
  margin-bottom: 10px;
}

footer .last-info p a{
  color: var(--secundario);
  font-size: 1.8rem;
  text-align: center;
  display: inline-block;
  text-decoration: none !important;
  margin:0 auto;
}

footer nav.social-red {
  text-align: center;
}

footer nav.social-red a i.fa,
footer nav.social-red a i.fab{
  color: var(--blanco);
  font-size: 2.2rem;
}

footer nav.social-red a i.fa:hover,
footer nav.social-red a i.fab:hover{
  color: var(--secundario);
}

p.copyright {
  background-color: #2e2e2e;
  color: var(--blanco);
  padding: 10px 0;
  margin:20px 0 0 0;
  text-align: center;
  font-size: 1.6rem;
}

p.copyright span{
  font-size: 1.8rem;
  color: var(--secundario);
}


/************************* Lettering **/
.surname span {
  position: relative;
  font-size:3.4vw;
  /*margin-top: -10px;*/
  text-shadow: 0 0 30px black;
}

@media only screen and (min-width: 768px){
  .char1 {
    top: 30px; 
    right:20px;
  }
  .char2 {
    top:0px;
    left:-20px;
  }
  .char3 {
    top:10px; 
    right:20px;
  }
  .char4 {
    top:5px; 
    right:10px;
  }
  .char5 {
    top:15px; 
    right:10px;
  }
  .char6 {
    top:5px; 
    left:5px;
  }
  .char7 {
    top:20px; 
    left:-10px;
  }
  .char8 {
    top:0; 
    left: -20px;
  }
  .char9 {
    top: 43px;
    right: 32px;
  }
  .char10 {
      top: 20px; 
      right: 20px; 
  } 
}