:root {
  --color1: 40, 164, 224 /*19, 35, 91*/ /*0, 0, 0*/;
  --color2: 255, 255, 255;
  --overlayColor: 0, 0, 0, 0.6;
  --bodyBorderColor: 25, 25, 25;
}

@font-face {
    font-family: 'euclid';
    src: url('../fonts/euclidflex-bold-webfont.woff2') format('woff2'),
         url('../fonts/euclidflex-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: 700;
}
@font-face {
    font-family: 'euclid';
    src: url('../fonts/EuclidFlex-Medium-WebS.woff2') format('woff2'),
         url('../fonts/EuclidFlex-Medium-WebS.woff') format('woff');
    font-weight: 600;
    font-style: 600;
}
@font-face {
    font-family: 'euclid';
    src: url('../fonts/euclidflex-regular-webfont.woff2') format('woff2'),
         url('../fonts/euclidflex-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: 400;
}
@font-face {
    font-family: 'euclid';
    src: url('../fonts/euclidflex-light-webfont.woff2') format('woff2'),
         url('../fonts/euclidflex-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: 300;
}

* {
  font-family: 'euclid'!important /*'Roboto', sans-serif*/;
}

html,
body,
.pre-wrapper,
.wrapper,
.container {
  height: 100% !important;
}

.contenido,
.form-wrap {
  height: 80% !important;
}

.container {
  display: flex;
}

.contenido,
.form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body {
  padding: 40px;
 /* background-color:  #28a4e0 rgb(var(--bodyBorderColor))*/
 background-color: #222254;
 
}

/* fondo */
.pre-wrapper {
  position: relative;
}

.background,
.background::after,
.background .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.background {
  z-index: -1;
  overflow: hidden;
}

.background::after {
  content: "";
   /*rgba(var(--overlayColor))*/ 
   background:rgba(34,34,84,0.8);
}

.background .img {
  z-index: -2;
  overflow: hidden;
  /*background-image: url("../imgs/background.jpg");*/
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: rgb(var(--color1));
}

.background .img img {
  display: none;
}

/* menú */
.menu ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.menu a {
  display: block;
  margin-top: 48px;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  color: rgb(var(--color2));
  transition: 0.5s;
}

.menu a:hover {
  text-decoration: none;
  opacity: 0.6;
}

/*.menu img {width:200px;}*/

/* contenido */
.contenido {
  color: rgb(var(--color2));
}

.contenido span {
  font-size: 24px;
  opacity: 0.7;
}

.contenido h1 {
  /*
  margin-top: 20px;
  margin-bottom: 20px;*/
  margin-top: 48px;
  margin-bottom: 0;
  font-size: 90px;
  line-height: 100px;
  font-weight: 700;
  text-transform: uppercase;
}

.contenido p {
  font-size: 16px;
  opacity: 0.7;
}

.contenido a {color:rgba(var(--color2)); text-decoration:underline;}
.contenido a:hover {color:rgba(var(--color2), 0.6); transition:0.5s;}

/* iconos */
.iconos {
  margin-bottom: 48px;
}

.iconos ul {
  display: flex;
  padding-left: 0;
  margin: 0;
  list-style-type: none;
}

.iconos li {
  display: flex;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  line-height: 32px;
  border: 2px solid rgba(var(--color2), 0);
  border-radius: 50%;
  transition: 0.5s;
}

.iconos li:hover {
  border: 2px solid rgba(var(--color2), 0.6);
}

.iconos a {
  display: block;
  margin: auto;
  color: rgb(var(--color2));
}

.iconos i {
  font-size: 18px;
}

/* dirección */
.direccion {color:rgba(var(--color2), 0.8);}

/* formulario */
.formulario {
  padding: 20px;
  /*border-radius: 8px;*/
  background-color: rgba(var(--color1), 0.6);
  ;
}

.formulario h2 {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 24px;
  color: rgb(var(--color2));
}

input[type="text"],
textarea {
  width: 100%;
}

input,
textarea {
  padding: 10px;
  padding-top: 13px;
  padding-bottom: 0;
  margin-bottom: 15px;
  font-size: 16px;
  border: 2px solid rgba(var(--color2), 0.3);
  /*border-radius: 6px;*/
  color: rgb(var(--color2));
  background-color: rgba(var(--color2), 0.02);
}

input[type="button"] {
  float: right;
  font-weight: 700;
  border:2px solid #FFF;
}

input[type="button"]::after {
  clear: both;
}

input:hover,
textarea:hover {
  background-color: rgba(var(--color2), 0.2);
  transition: 0.5s;
}

input::placeholder,
textarea::placeholder {
  color: rgba(var(--color2), 0.7);
}

input:focus,
textarea:focus {
  outline: none;
}

.condiciones {margin-bottom:15px; text-align:center; color:rgba(var(--color2), 0.8);}
.condiciones input,
.condiciones label {margin-bottom:0;}
.condiciones input {margin-right:6px;}
.condiciones a {text-decoration:underline!important; color:rgba(var(--color2), 0.8);}
.condiciones a:hover {color:rgba(var(--color2), 0.6)!important; transition:0.5s!important;}

@media (max-height:750px) {.menu a {margin-top:12px; margin-bottom:12px;}}
@media (max-height:700px) {
	.contenido h1 {font-size:69px; line-height:77px;}
	.formulario {margin-top:-80px;}
}
@media (max-height:650px) {.formulario {margin-top:-105px;}}
@media (max-height:600px) {.formulario {margin-top:-130px;}}

@media (max-width:991px) {
  body {
    padding: 20px;
  }

  .pre-wrapper,
  .wrapper,
  .container,
  .contenido,
  .form-wrap {
    height: unset !important;
  }

  .menu a {
    margin-top: 32px;
    margin-bottom: 48px;
    font-size: 22px;
  }
  
  .menu img {max-width:200px;}

  .contenido {
    margin-bottom: 48px;
  }

  .contenido span {
    font-size: 20px;
  }

  .contenido h1 {
    font-size: 64px;
    line-height: 72px;
  }

  .iconos {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 24px;
  }
  
  .direccion {margin-top:15px;}
  
  .condiciones {display: flex;}
  .condiciones label {font-size: 14px;}
  
  .formulario {margin-top:0!important;}
  
  .pre-wrapper {margin-bottom:20px;}
  .form-wrap {margin-bottom:48px;}
}

@media (max-width:500px) {
  .menu a {
    margin-top: 24px;
    font-size: 20px;
  }

  .contenido span {
    font-size: 18px;
  }

  .contenido h1 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 32px;
    line-height: 38px;
  }

  .formulario h2 {
    font-size: 22px;
  }

  input[type="submit"] {
    font-size: 13px;
  }
  
  .form-wrap {margin-bottom:24px;}
}

/* mensaje ok formulario */

.send_form_txt{ display:none;}

/* popup */

.box {position:absolute; display:none;}
.boxbg {position:fixed; top:0; left:0; z-index:1; display:flex; justify-content:center; align-items:center; width:100%; height:100vh; padding:24px; background-color:rgba(0,0,0,0.6);}
.boxwrap {max-width:600px; max-height:600px; overflow:auto; padding:24px; color:#FFF; background-color:#28a4e0;}
.boxtitle {display:flex; justify-content:space-between;}
.close {font-size:48px; cursor:pointer;}
.box h2 {margin-top:20px; font-size:32px; line-height:38px; font-weight:bold;}
.box p {color:rgba(255,255,255,0.9);}
.showpopup {display:block;}
@media (max-width:991px) {
	.boxwrap {height:90vh;}
	.box h2 {font-size: 20px; line-height:24px;}
	.close {position:relative; top:-24px; right:-14px;}
	.close img {width:24px;}
}