:root {
  --main-color-background: #0f0f11;
  --degradado: linear-gradient(45deg, rgba(7,43,121,1) 0%, rgba(11,65,155,1) 17%, rgba(19,83,174,1) 35%, rgba(48,63,176,1) 50%, rgba(70,47,130,1) 67%, rgba(58,36,110,1) 84%, rgba(71,35,105,1) 100%);
  --font-color: #e1e1e1;
  --font-family: sans-serif;

  --purple-dark: #472369;
  --purple-medium: #6b478e;
  --purple-light: #8c76a1;
  /* 9d84b3 */

  --blue-main:#0074c8;
  --blue-light: #4e7fc2;
  --blue-medium: #0b409b;
  --blue-dark: #072b79;

  --green-dark:#448733;
  --green-medium:#5b964d;
  --green-light:#b9d2b3;
}

body {
    background-color: var(--main-color-background);
}
.framer{
  position: absolute;
  width: 1230px;
  height: 660px;
  background-color: #37373d44;
}
/* header */
.header{
    margin-top: 10px;
    margin-left: 25px;
    width: 1220px;
    height: 100px;
    background: var(--degradado);
}
.header #grande{
  position: absolute;
  margin-top: 5px;
  margin-left: 180px;
  font:bold 65px var(--font-family);
  color: var(--main-color-background);
  vertical-align: middle;
}
.header #img, #logox{
  position: absolute;
  margin-top: 20px;
  margin-left: 50px;
  width: 100px;
  margin-bottom: 85px; 
  vertical-align: middle;
  /* box-shadow: 2px 2px 5px #999; */
}
#textMenu{
  bottom: 5px;
  text-align: left;
  left: 35px;
}
/* body */
.section{
  margin-left: 40px;
}
/* cajas de menu */
#d1{margin-left: 35px;}
.div1{
  display: inline-block;
  margin-left: 35px;
  margin-top: 70px;
  vertical-align: middle;
  line-height: normal;
  padding-bottom: 120px;
  background: transparent;
  box-shadow: 0.5px 2px 15px 2px var(--blue-dark);
  height: 133px;
  width: 220px;
  border-radius: 25px;
  text-align: center;
  font:bold 20px var(--font-family);
  border: solid 5px var(--blue-main);
  border-style: inset;
}
.faq{
  display: inline-block;
}
.lineafaq{
  height: 2px;
  width: 1100px;
  background: var(--degradado);
  position: absolute;
  left: 70px;
  top: 190px;
}
.imgfaq{
  width: 50px;
  position: absolute;
  left: 95px;
  top: 130px;
}
.textfaq{
  position: absolute;
  left: 163px;
  top: 115px;
  font:bold 26px var(--font-family);
  position: absolute;
  color: var(--blue-main);
  text-shadow: var(--blue-dark) 3px 3px 12px; 
}
.question{
  display: block;
  margin-left: 140px;
  height: 50px;
  width: 850px;
  box-shadow: 0 0px var(--main-color-background),0 -3px var(--blue-dark) inset, -0px 0 var(--main-color-background), 0px 0 var(--main-color-background);
  background: transparent;
  font:bold 20px var(--font-family);
  padding: 5px 10px 2px 10px;
}
.question #imgQ{
  width: 40px;
}
div#q1{
  margin-top: -20px;
}
.img{
    padding-top: 20px;
    width: 140px;
}
/* links cajas de menu*/
a.menus, a.menus:link{
  display: inline-block;
  font: bold 22px var(--font-family);
  margin-top: 18px;
  text-decoration: none;
  color: var(--blue-main);
}
a.menus:focus, a.menus:hover, a.menus:active{
  font:bold 24px var(--font-family);
  text-shadow: var(--purple-dark) 3px 3px 12px; 
  color: var(--purple-light);
}
/*flechas menu*/
div.flechader{
  display: inline-block;
  margin-left: 25px;
  margin-top: 100px;
  vertical-align: middle;
  height: 120px;
  width: 50px; 
}
div.flechaizq{
  display: inline-block;
  margin-right: 25px;
  margin-top: 100px;
  vertical-align: middle;
  height: 120px;
  width: 50px;
}
div.flechaAb{
  /* background: yellow; */
  position: absolute;
  width: 50px;
  height: 50px;
  margin-top: -30px;
  margin-left: 1050px;
}
div.flechaAr{
  /* background: yellow; */
  position: absolute;
  width: 50px;
  height: 50px;
  margin-top: -20px;
  margin-left: 50px;
}
/* flechas */
div.button, button.button{ 
  background: transparent;
  width: 63px;
  height: 63px;
  border: none;
}
/* flechas de submenus */
#ifder{
  width: 60px;
  margin-left: -6px;
}
#ifizq{
  width: 60px;
  margin-left: -6px;
  transform: rotate(180deg);
}
/* footer */
.footer{
  height: 2px;
  width: 1250px;
  background: var(--degradado);
  position: absolute;
  left: 0px;
  bottom: 45px;
}
.footert{
  font:condensed 16px var(--font-family);
  text-align: center;
  position: absolute;
  bottom: 16px;
  color: var(--font-color);
}
#version{
  bottom: 30px;
  right: 30px;
  font:condensed 9px cursive;
}
#textMenu{
  left: 10px;
  font:condensed 14px var(--font-family);
  /* color: #a5a5a6; */
}
#textpag{
  right: 100px;
}

/* navegacion */
.navegacion{
  display: inline-block;
  position: absolute;
  left: 370px;
  bottom: -8px;
}
.nav{
  display: inline-block;
  margin-left: 20px;
}
.nav img{
  display: inline-block;
  width: 40px;
}
.nav p{
  margin-left: 8px;
  display: inline-block;
  font:condensed 12px var(--font-family);
  color: var(--font-color);
}
.nav #niNavegacion,#nSelect{
  margin-bottom: -5px;
}


/* iamgenes logos en texto */
img.iconoText{
  width: 30px;
  margin-bottom: -10px;
  border-radius: 15px;
  padding: 8px 8px 8px 8px;
  border: 2px solid var(--font-color);
}
#iconoText3{
  margin-bottom: -17px;
  margin-right: 2px;
  margin-left: 2px;
}
#iconoText4{
  margin-bottom: -33px;
  margin-right: 2px;
  margin-left: 2px;
}
#iconoText2{
  margin-bottom: -5px;
  margin-right: 8px;
  margin-left: 8px;
}
#iconoText1{
  margin-bottom: -8px;
  margin-right: 8px;
  margin-left: 8px;
}
#iconoText6{
  width: 35px;
  margin-bottom: -10px;
  margin-right: 3px;
  margin-left: 3px;
}
#logo1{
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: -12px;
}
#logo{
  width: 50px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: -6px;
}
#logo2{
  width: 110px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: -10px;
}
/* botones aC & aT*/
.daC{
  position: absolute;
  bottom: 60px;
  left: 30px;
}
#aC, #aT{
  display: inline-block;
  width: 60px;
  height: 60px;
  padding: 10px 4px 4px 4px;
}
#tC{
  display: inline-block;
  width: 150px;
  font:condensed 18px sans-serif;
  color: var(--purple-light);
  /* background-color: #47236944; */
}
.daT{
  position: absolute;
  bottom: 60px;
  right: 30px;
}
#tT{
  display: inline-block;
  width: 150px;
  font:condensed 18px sans-serif;
  color: var(--blue-medium);
  /* background: #0b409b44; */
}

.dQ{
  display: inline-block;
  margin-top: 14px;
  margin-bottom: 20px;
  margin-left: 30px;
  background: transparent;
  height: 50px;
  width: 1000px;
  border-radius: 25px;
}

/* colores
linear-gradient(45deg, rgba(82,0,145,1) 0%, rgba(179,0,255,1) 40%, rgba(33,180,226,1) 68%, rgba(183,222,237,1) 100%);
--------------------purple
#70009f
#b85ddf
3d1969
--purple-dark: #341969;
  --purple-light: #806fa1;


--------------------azul
#45beee
#b7deed

-------------------green
#2ab205
#7acf63

------------------red

*/

/* .text1{
  border:2px solid white;
} */