@font-face{
  font-family: 'Font-Content';
  src: url('fonts/page fonts/Exo-ExtraLight.otf');
}

@font-face{
  font-family: 'Font-Second';
  src: url('fonts/page fonts/conthrax-sb.ttf');
}

@import url('https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap');
.section {
  clear: both;
  margin: 0;
  padding-right: 1%;
}
/* Column */
.col {
  line-height : 24px;
  display: block;
  float:left;
  margin: 4% 2% 4% 2%;
  text-align: justify;
}
.col:first-child { margin-left: 4% !important; }

/* Row */
.row:before,
.row:after { content:""; display:table; }
.row:after { clear:both;}
.row { zoom:1; /* For IE 6/7 */ }

/* Grid */
.grid_1_of_2{ width: 45% }
.grid_2_of_2{ width: 100% }

h3{
    text-align: center;
    margin: 4%;
}
#cursiva{
    color: black;
    margin-right: 0;
}
h1, h2, h3{
  text-align: center;
  line-height : 1.5em;
  font-family: 'Font-Second';
}

b{
    letter-spacing: 3px;
    font-family: 'Exo', sans-serif;
}

h1, h2{
	text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
    font-weight: bold;}



p, #cursiva{
    font-family: 'Font-Content';
    letter-spacing: 1.5px;
    margin-left: 0;
    margin-bottom: 3.5vh;
}
#correo, #cor2{
    color: black;
float: left;
    }

/* Full Width below 768 pixels */

@media only screen and (max-width: 1175px) {
  .col {  margin: 0; }
  [class*='grid_'] { width: 100%;margin: 0}
    
  h1{
    font-size: 2.5em;
  }
  h2{
    font-size: 0.6em;
    font-size: 1.5em;
  }
  h1,h2,h3{
    margin: 2%;
  }
    p{
        margin-right: 4%;
    }
    #prueba{
        margin-left: 3.7vw;
    }
}

@media (min-width:400px) and (max-width:450px) {
     h1{
    font-size: 1.6em;
  }
  h2{

      font-size: 1.1em;
  }
}
@media (min-width:451px) and (max-width:500px) {
     h1{
    font-size: 1.8em;
  }
  h2{

      font-size: 1.2em;
  }  
}
@media (min-width:501px) and (max-width:800px) {
     h1{
    font-size: 2em;
  }
  h2{
      font-size: 1.2em;
  } 
}
@media (min-width:350px) and (max-width:399px) {
     h1{
    font-size: 1.5em;
  }
  h2{
      font-size: 1em;
  }
}

@media (min-width:300px) and (max-width:349px) {
     h1{
    font-size: 1.3em;
  }
  h2{
      font-size: 0.9em;
  }
}


@media (min-width:1176px) and (max-width:1920px) {
h1{
    margin-top: 7vh;
    font-size: 4em;
}
h2{
    font-size: 1.8em;
  }

p, #cursiva, b{
    font-size: 0.9em;
}
#correo, #cor2{
    font-size: 1.04em;
}
}