/* font face */

@font-face {
  font-family: myFontBold;
  src: url(fonts/DrBold.ttf);
  font-weight: 600;
}
@font-face {
  font-family: myFontExtraBold;
  src: url(fonts/DrExtraBold.ttf);
  font-weight: 800;
}
@font-face {
  font-family: myFontExtraLight;
  src: url(fonts/DrExtraLight.ttf);
  font-weight: 100;
}
@font-face {
  font-family: myFontItalic;
  src: url(fonts/DrItalic.ttf);
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: myFontLight;
  src: url(fonts/DrLight.ttf);
  font-weight: 300;
}
@font-face {
  font-family: myFontMedium;
  src: url(fonts/DrMedium.ttf);
  font-weight: 500;
}
@font-face {
  font-family: myFontRegular;
  src: url(fonts/DrRegular.ttf);
  font-weight: 400;
}

/* color variables */
:root {
  --main-bg-color: #082a4c;
  --main-text-color: #fff54d;
}
*{
    margin: 0;
    box-sizing: border-box;
}
body{
    min-width: 450px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-x: hidden!important;

    font-family: myFontRegular;
    font-size: 24px;
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
}
img{ max-width: 100%;}

main{ 
    position: relative;
    /* max-width: 1600px; */
    padding: 2em;
}
header, footer{
    display: flex;
    align-items: center;
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.content {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.regular {font-family: myFontRegular;}
.light {font-family: myFontLight;}
.negrita {font-family: myFontBold;}
.em2 {font-size: 0.7em; line-height: 1.2;}

.logo{
    width: 240px;
}
.textos.contacto{
    margin-top: 20px;
    font-family: myFontLight;
    font-size: 24px;
}
.header-right{
    padding-left: 4em;
    display: none;
}
.caja{ width: 100px;}
.aprende{
    margin: 0 -18px;
}
.saludo{
    padding-bottom: 68px;
    font-size: 12rem;
    line-height: 1;
    font-family: myFontMedium;
    color: azure;
}
.intro{
    padding-bottom: 68px;
    font-size: 6rem;
    line-height: 1;
    font-family: myFontRegular;
    color: azure;
}
.textos{
    padding: 20px 0;
    align-items: center;
    font-size: 2.1em;
    line-height: 1;
}
.textos.servicios{
    padding: 0;
}
.txt-big{font-size: 1.6em;}
.divider{height: 150px;}

.img_futuro{
    width: 686px;
    max-width: 686px;
}
.servicios{
    margin-left: 50px;
    align-items: flex-start;
}

.servicios p:nth-child(2),
.servicios p:nth-child(3){
    font-family: myFontLight;
    font-size: .7em;
    line-height: 1.2;
    color: #fff;
}

.hablemos{
    max-width: 80%;
    margin: 0 auto;
    justify-content: center;
    display: none; 
}

/* Formulario */

.hablemos form{
    display: none;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 1em;
}

.wpcf7-form-control-wrap{
    display: inline-block;
    margin-top: 20px;
}

.hablemos form p,
.hablemos form label, 
.hablemos form span, 
.hablemos form input {display: block; max-width: 100%; width: 800px;}
.hablemos form input[type="submit"]{
    display: inline-block;
    width: auto;
    position: relative;
    left: calc(100% - 330px);
    padding: 20px 30px;
    background-color: #fff54e; 
    border-radius: 20px;
    font-size: 0.8em;
    font-family: myFontRegular;
    color: #333;
}
.contactadme{   
    width: 600px;
    height: 90px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 6px solid #fff54e;
    font-size: 50px;
    color: #fff54e;
    cursor: pointer;
}
.contactadme:hover{
    background-color: #ffffff7a;
    transition: all 500ms;
}

.wpcf7-response-output{
    color: #ddd;
    font-size: 0.6em;
}
.screen-reader-response{
    display: none;
}

.wpcf7-not-valid-tip{
    color: #ffbfbf;
    font-size: 0.6em;
}

/*///////////////////*/

.fondo{
    position: fixed;
    top: 0;
    bottom: 0;
    width: 2000px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -999;
}
.fondo>div{position: absolute;}

/*  .FORMAS.   */
.circulo {
    background: #00402a;
    border-radius: 50%;
    width: 400px;
    height: 400px;
}
.arco{
    width: 0px;
    height: 0px;
    border-right: 400px solid transparent;
    border-top: 400px solid transparent;
    border-left: 400px solid transparent;
    border-bottom: 400px solid #00402a;
    border-top-left-radius: 400px;
    border-top-right-radius: 400px;
    border-bottom-left-radius: 400px;
    border-bottom-right-radius: 400px;
}
.arco1{transform: rotate(135deg);}
.arco2{transform: rotate(225deg);}


.agujero{
    position: relative;
    width: 400px;
    height: 400px;
}
.agujero .arco{ 
    position: absolute;
    border-width: 200px; 
    border-radius: 200px;
}
.agujero .arc1{top: 50%; left: 50%; transform: rotate(135deg);}
.agujero .arc2{top: 50%; left: -50%; transform: rotate(225deg);}
.agujero .arc3{top: -50%;left: -50%; transform: rotate(315deg);}
.agujero .arc4{top: -50%; left: 50%; transform: rotate(45deg);}

.triangulo {
    width: 0;
    height: 0;
    border-top: 280px solid #00402a;
    border-right: 280px solid transparent;
    transform: rotate(45deg);
}
.insignia{
    position: relative;
    width: 400px;
    height: 400px;
}
.insignia .triangulo{
    position: absolute;
    border-width: 283px; 
}

.insignia .triang1{top: 58px; left: -139px; rotate: 90deg;}
.insignia .triang2{top: -140px; left: 60px; rotate: 180deg; border-width: 280px;}
.insignia .triang3{top: 58px;left: 257px; rotate: 270deg;}


/*  .fondo LAYOUT.   */

.circ1{
    top: calc(100% - 800px);
}
.arco1{
    top: calc(100% - 400px); 
}
.agujero{
   /* top: 800px; */
   top: calc(100% - 400px);
    left: 400px;
}
.circ2{
    top: calc(100% - 400px);
    left: 800px;
}
.insignia1{
    top: calc(100% - 400px);
    left: 1200px;
}

.triangulo1{
    top: calc(100% - 540px);
    left: 1260px;
}
.triangulo2{
    top: 1205px;
    left: 1258px;

    display: none;
}
.circ3{
    top: 600px;
    left: 1200px;

    display: none;
}
.arco2{
    top: calc(100% - 400px);
    left: 1198px;
}
.insignia2{
    top: calc(100% - 800px);
    left: 1595px;
}


/*  .media QUERIES.   */

@media only screen and (min-width: 990px) {
    body{ font-size: 18px;}
    .textos{ font-size: 2.8em;}
    .servicios{ margin-left: 0;}
    .textos.servicios{ padding: 20px 0;}
    .servicios p:nth-child(2),
    .servicios p:nth-child(3){
        font-size: .5em;
        line-height: 1;
    }
}
@media only screen and (min-width: 1280px) {
    main { max-width: 1280px;}
    .header-right{ display: block;}
    .servicios{ margin-left: 150px;}

}