.navigation {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;

  float: left; /*Lo que hace la propiedad es quitar al elemento del flujo normal de la página y colocarlo a la izquierda o derecha del resto del contenido de su elemento padre (se lo hace "flotar" hacia uno u otro costado). */
  position: relative;
  margin-top: 0px; /*permite ubicar toda la barra de menú vertical hacia arriba o hacia abajo*/

  z-index: 4;

  /*position: relative;
  background-color: brown;
  float: left;
  width: 11%;
  height: 830px;
  margin-top: 70px;
  margin-bottom: 10px;*/
}

.navigation ul,
.navigation ul li,
.navigation ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation ul {
  position: relative;
  z-index: 500;
  float: left;
}

.navigation ul li {
  float: left;
  min-height: 0.05em;
  line-height: 1em;
  vertical-align: middle;
  position: relative;
}


/*se pone color a los span 
.navigation ul li span {
    position: absolute;
    margin-left: 12px; permite colocar un margen paa que se hacerque al limite izquierdo del rectangulo de imagen
    width: 80px;
    padding: 5% 0px 0%;
    bottom: 5px;
    text-align: center;
    display: block;
    clear: both;
    z-index: 99;
    background-color: rgba(255,255,255,.7);
    color: #3E362E; color del texto
    
  }*/


.navigation ul li.hover,
.navigation ul li:hover {
  position: relative;
  z-index: 510;
  cursor: default;
}

.navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 520;
  width: 100%;
}

.navigation ul ul li { float: none; }

.navigation ul ul ul {
  top: 0;
  right: 0;
}

.navigation ul li:hover > ul { visibility: visible; }

.navigation ul ul {
  top: 8%; /*Margen de la posicion vertical donde va aparecer el sub menú*/
  left: 100%;/*Margen de la posicion izquierda donde va aparecer el sub menú*/
}

.navigation ul li { float: none; }

.navigation ul ul { margin-top: 0.05em; }

.navigation {
  width: 10em; /*ancho del menú*/
  /*background-image: url("Cndor_clothes_measure/contact_004.png"); /*color fondo de imagen para los menus y submenus esta en png por que se quiere que el menu sea transparente es mas interesante asi*/
  /*background: #333333; /*color fondo de menú - color (plomo rata- #333333 */
  /*font-family: 'roboto', Tahoma, Arial, sans-serif;*/
  background-color: rgba(0,0,0,.45); /*color del menú*/

  font-family: "NeueHansKendrick",sans-serif;
  font-size: 14px; 
  zoom: 1;
  text-align:center; /*permite centrar todos los textos del menú y sub menus*/


}

.navigation:before {
  content: '';
  display: block;
}

.navigation:after {
  content: '';
  display: table;
  clear: both;
}

.navigation a {
  display: block;
  padding: 1em 1.3em;/*espaciado entre menús*/
  color: #ffffff;
  text-decoration: none;
  /*text-transform: uppercase;  pone todo el texto en mayúscula*/
  /*text-transform: capitalize ;  pone solo las primes letras de las palabras en mayúsculas*/
}

.navigation > ul { width: 10em; }/*ancho del menú ---> cuando el mouse pasa encima */

.navigation ul ul { width: 15.4em; }/*15.4em ancho del sub menú*/ 

.navigation > ul > li > a {
  border-right: 0.9em solid #bfbab5;  /*0.3em #ffffff espacio entre menu y sub menú  // solid #34A65F color del borde del menu*/
  /*border-right: 0.9em transparent;  /*0.9em espacio entre menu y sub menú  // trnasparente es el color del borde del menu*/
  color: #ffffff;
}

.navigation > ul > li > a:hover { color: #ffffff; }

.navigation > ul > li a:hover,








/*.navigation > ul > li:hover a { background: #34A65F; } /*color del menu y sub menu cuando pasa el mouse ensima*/
/*.navigation > ul > li:hover a {background-color: rgba(0,0,0,.45);}*/
/*.navigation > ul > li:hover a { background: #3a3a39; }*/
.navigation > ul > li:hover a { background: #3a3a39; }



.navigation li { position: relative; }


/*has sup  permite colocar una viñeta '»' en el menú*/
.navigation ul li.has-sub > a:after {
  content: '»';
  position: absolute;
  right: 15px; /* 1em distancia del simbolo '»' con el lado derecho del menú*/
  font-size: 20px; /*tamaño del simbolo '»' */

}

.navigation ul ul li.first {
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
}

.navigation ul ul li.last {
  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
  border-bottom: 0;
}

.navigation ul ul {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.navigation ul ul { border: 1px solid transparent; } /* 3a3a39 0F8A5F  color de borde superior sub menú*/

.navigation ul ul a { color: #ffffff; }

.navigation ul ul a:hover { color: #ffffff; }

.navigation ul ul li { border-bottom: 1px solid transparent ; } /*#3a3a39 color de borde inferior sub menú*/

.navigation ul ul li:hover > a {
  /*background: #277846; /* 4eb1ff color cuando el mouse pasa por encima del sub menú*/
  background: #1f1f1e; /* 4eb1ff color cuando el mouse pasa por encima del sub menú*/

  /*background: rgba(0,0,0,.45);*/
  color: #ffffff; /*color de la letra cuando el mouse pasa por encima del sub menú*/
}















.navigation.align-right > ul > li > a {
  border-left: 0.3em solid #34A65F;
  border-right: none;
}

.navigation.align-right { float: right; }

.navigation.align-right li { text-align: right; }

.navigation.align-right ul li.has-sub > a:before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -6px;
}

.navigation.align-right ul li.has-sub > a:after { content: none; }

.navigation.align-right ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 598;
  width: 100%;
}

.navigation.align-right ul ul li.first {
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}

.navigation.align-right ul ul li.last {
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
}

.navigation.align-right ul ul {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}


/*este una clase a parte para los iconos*/
.menuIcon {
    position: relative;
    margin: 3px auto 0;
    width: 80px;
    height: 80px;
    background-color: #ffffff;
    /*border: 5px solid white; borde al contorno de la imagen de color blanco*/

    /*left: 10px; posicion del polo*/
  }



/* -- esta tipo de flecha no se esta usando por que no esta esteticamente bien    -- */
.lado-derecha-arriba:before {
      content: "";
      position: absolute;
      top: 10px;
      left: 60px;
      width: 0;
      height: 0;
      border-width: 25px;
      border-style: solid;
      border-color:  transparent transparent transparent white;
}

/* -- ARROW 5      -- */
.arrow-5 {
  /* more triangle */
  position: relative;

  height: 15px; 
  width: 15px;

  left: 22px; /*posicion de la flecha tanto la cabeza como la cola*/
  border: 12px solid;

  border-color: 
    white  /*darkcyan*/
    white   /*darkcyan*/
    transparent
    transparent;
  transform: rotate(45deg); 
}

.arrow-5:before {
  content: '';
  position: relative;
  top: 0px; 
  right: 0px;
  left: 0px;
  display: block;

  height: 12px;/*epesor de la flecha*/
  width: 37px; /*largo de la flecha*/

  background-color: #ffffff;
  transform: 
    rotate(-45deg) 
    translate(-10px, -6px); /*permite el posicionamiento de la cola de la flecha -10 lo trnaslada hacia atras la col de la flecha*/
}
/* -- FIN ARROW 5      -- */





/* -- INICIAR AQUÍ flecha de movimiento iniciar aquí     -- */
.leftmenu #beginHere {
    
    transform-origin: 10% 100%;
    padding-left: 80px;
    padding-top: 80px;
    /*background: url(https://cdn.tailorstore.com/ui/emerald/bh-arrow-left.svg) 0 0 no-repeat;*/
    background: url("../Cndor_clothes_measure/flecha_iniciar_aqui_abajo.svg") 0 0 no-repeat;
        background-color: rgba(0, 0, 0, 0);
        background-position-x: 0px;
        background-position-y: 0px;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-image: url("../Cndor_clothes_measure/flecha_iniciar_aqui_abajo.svg");
        background-size: auto;
        background-origin: padding-box;
        background-clip: border-box;
    
    height: 120px;
    left: -10px;
    top: 30px;
   
}


#beginHere {
    
    transition: opacity 2s;
    transition-property: opacity;
    transition-duration: 2s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transform-origin: 10% 100%;
    -webkit-animation: wobble 0.5s ease-in-out 0s infinite;
        animation-name: wobble;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-direction: normal;
        animation-fill-mode: none;
        animation-play-state: running;
    -webkit-animation-direction: alternate;
        animation-direction: alternate;
    animation: wobble 0.5s ease-in-out 0s infinite;
        animation-name: wobble;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-direction: normal;
        animation-fill-mode: none;
        animation-play-state: running;
    animation-direction: alternate;
    position: absolute;
    font-family: "Permanent Marker",sans-serif;
    font-size: 2em;
    padding-left: 80px;
    padding-top: 80px;
    /*background: url(https://cdn.tailorstore.com/ui/emerald/bh-arrow-down.svg) 0 10px no-repeat; */
    background: url("../Cndor_clothes_measure/flecha_iniciar_aqui_arriba.svg") 0 10px no-repeat;
        background-color: rgba(0, 0, 0, 0);
        background-position-x: 0px;
        background-position-y: 10px;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-image: url("../Cndor_clothes_measure/flecha_iniciar_aqui_arriba.svg");
        background-size: auto;
        background-origin: padding-box;
        background-clip: border-box;
    color: #000;
    
    height: 120px;
    left: 155px;
    top: 99px;



    opacity: 1;

    z-index: 0;
  
}

/*esta sección es la que le da mivimiento*/
@keyframes wobble {
0% {
    transform: rotate(2deg);
}
100% {
    transform: rotate(-2deg);
}
}


/*esta sección es la que le da mivimiento*/
@keyframes wobble {
0% {
    transform: rotate(2deg);
}
100% {
    transform: rotate(-2deg);
}

}
/* fin de flecha de movimiento iniciar aquí*/





/*se crea un área de trabajo para que la ventana muestre el polo principal
Nota: no se uso esta areá de trabajo por que cuando se achicaba la ventana del navegador el area de trabajo automaticamente se colocaba al final del pie del menú*/
.area_trabajo_right_1 {
    position: static;
    background-color: linen; /*da el color de fondo al area de trabajo*/
    float: right; /*Lo que hace la propiedad es quitar al elemento del flujo normal de la página y colocarlo a la izquierda o derecha del resto del contenido de su elemento padre (se lo hace "flotar" hacia uno u otro costado). */
    width: 91%; /* permite ubicar el ancho de toda la barra del cuerpo de trabajo*/
    height: 820px;
    margin-top: 20px; /*permite ubicar toda la barra del cuerpo de trabajo hacia arriba o hacia abajo*/
    margin-bottom: 10px; /**/
    padding: 5px;
}
/*fin area de trabajo para que la ventana muestre el polo principal*/


/*se crea un área de trabajo para que la ventana muestre el polo principal
Nota: esta sección se lllego a usar por que se adata bien cuando el navegador se achica*/
.area_trabajo_right_2 {
    margin-right: 10px;/*margen derecho*/
    margin-left: 100px;
    /*background-color: transparent;/*Specifies that the background color should be transparent*/
    background-color: #ffffff;/*Specifies that the background color should be transparent*/

}
/*fin area de trabajo para que la ventana muestre el polo principal*/












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

  .inputs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 130px;
    max-width: 1152px;
    margin: 0 auto;
    z-index: 9;
    overflow: hidden;
    width: 100%;

    /*para saber el todo el ancho que ocupa
    border: 1px solid #DED9D0;
    background-color: rgba(245, 247, 243, 0.9);
    box-shadow: 5px 5px 0 rgba(0,0,0,.05);*/
}



  .measurement-input_1 {
      position: absolute;
      bottom: 20px; /*La propiedad bottom permite desplazar un elemento respecto a su posición original tomando como referencia el borde inferior del elemento.*/
      
      left: 0; /*mueve todo el cuadrado hacia la izquierda*/
      right: 0; /*mueve todo el cuadrado hacia la derecha*/

      margin: 0 auto;
      
      /*border: 1px solid #DED9D0; /*color del borde del cuadrado este caso color melon*/
      /*background-color: rgba(240, 223, 153, 0.9); /*color del fondo del cuadrado*/
      /*box-shadow: 5px 5px 0 rgba(0,0,0,.05);*/ /*sombra del cuadrado lado derecho*/

      float: none;

      min-width: 180px;
      max-width: 640px;

      width: 100%; /*ancho de todo el cuadrado que contiene la imagen*/
      overflow: hidden;
  }


  .measurement-input_1 img {
      display:block;/*permite centrar la imagen*/
      margin:auto;/*permite centrar la imagen*/
    
  }







/**************************************************************************************/
 
  .inputs_3 {
    position: absolute;
    top:8px;
    left: 0;
    right: 0;
    /*bottom: 130px;*/


    margin: 0 auto; /*este margen cero es curioso ya que permite centrar - pone margenes automaticos que se ajustan a la izquierda como a la derecha para que el área donde se va trabajar quede centrada*/


    min-width: 692px; /*anchura mínima cuando se use en celulares iphone,yotaphone,xiomi o tablets*/
    max-width: 1152px; /*anchura máxima cuando se use en ordenadores laptops pc casa*/
    min-height: 900px;
    max-height: 1055px;
    


    /*width: 100%;*/
    /*height: 100%;*/

       
    z-index: 1;

    overflow: hidden; /*overflow permite regular la visiblidad de los contenidos que sobresalen de una caja html*/
                      /*hidden = ocultar*/

    /*para saber el todo el ancho que ocupa*/
    /*border: 1px solid #DED9D0;
    background-color: rgba(245, 247, 243, 0.9);
    box-shadow: 5px 5px 0 rgba(0,0,0,.05);*/
}



  .measurement-input_3 {
      position: absolute;
      top:40px;
      left: 0; /*mueve todo el cuadrado hacia la izquierda*/
      right: 0; /*mueve todo el cuadrado hacia la derecha*/
      /*bottom: 20px;*/ /*La propiedad bottom permite desplazar un elemento respecto a su posición original tomando como referencia el borde inferior del elemento.*/
      

      margin: 0 auto;
      

      min-width: 180px;/*anchura mínima cuando se use en celulares iphone,yotaphone,xiomi o tablets*/
      max-width: 640px;/*anchura máxima cuando se use en ordenadores laptops pc casa*/

      min-height: 380px;
      max-height: 840px;

      /*width: 100%;*/ /*ancho de todo el cuadrado que contiene la imagen*/
      
      z-index: 1;
  
      overflow: hidden;
      float: none; /*float:none y mantiene su posición normal*/


      /*para saber el todo el ancho que ocupa*/
      /*border: 1px solid #DED9D0; /*color del borde del cuadrado este caso color melon*/
      /*background-color: rgba(240, 223, 153, 0.9); /*color del fondo del cuadrado*/
      /*box-shadow: 5px 5px 0 rgba(0,0,0,.05);*/ /*sombra del cuadrado lado derecho*/
  }


  .measurement-input_3 img {
      display:block;/*permite centrar la imagen*/
      margin:auto;/*permite centrar la imagen*/
    
  }
/**************************************************************************************/


















  .measurement-input_2 {
      position: absolute;
      bottom: 0px; /*La propiedad bottom permite desplazar un elemento respecto a su posición original tomando como referencia el borde inferior del elemento.*/
      
      left: 0; /*mueve todo el cuadrado hacia la izquierda*/
      right: 0; /*mueve todo el cuadrado hacia la derecha*/

      margin: 0 auto;
      
      /*border: 1px solid #DED9D0; /*color del borde del cuadrado este caso color melon*/
      /*background-color: rgba(255,255,255,.9); /*color del fondo del cuadrado*/
      /*background-color: rgba(153, 183, 240, 0.9);; /*color del fondo del cuadrado*/
      /*box-shadow: 5px 5px 0 rgba(0,0,0,.05);*/ /*sombra del cuadrado lado derecho*/

      float: none;

      min-width: 180px;
      max-width: 640px;

      width: 100%; /*ancho de todo el cuadrado que contiene la imagen*/
      overflow: hidden;
  }




  .measurement-input_2 div {
     
      text-align: center;
      margin-bottom: 0;
          
  }

   

  h3 {
      font-size: 190%;
      line-height: 1.3;
      font-family: "NeueHansKendrick",sans-serif;
      text-transform: none;
      margin: 0 0 .3em;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0.3em;
          margin-left: 0px;
      font-weight: 400;
  }

  p {
    margin: 0 0 1em;
    clear: both;
    padding: 0;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    border: 0;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: 0px;
        border-right-color: currentcolor;
        border-right-style: none;
        border-right-width: 0px;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: 0px;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: 0px;
        border-image-outset: 0;
        border-image-repeat: stretch;
        border-image-slice: 100%;
        border-image-source: none;
        border-image-width: 1;
    font-size: 100%;
    font: inherit;
        font-style: inherit;
        font-variant-caps: inherit;
        font-weight: inherit;
        font-stretch: inherit;
        font-size: inherit;
        line-height: inherit;
        font-family: inherit;
        font-size-adjust: inherit;
        font-kerning: inherit;
        font-optical-sizing: inherit;
        font-variant-alternates: inherit;
        font-variant-east-asian: inherit;
        font-variant-ligatures: inherit;
        font-variant-numeric: inherit;
        font-variant-position: inherit;
        font-language-override: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
    vertical-align: baseline;
  }


  .measurement-value {
    background-color: #ffffff;
    color: #554F45;
    width: 100px;
    font-size: 2em;
    margin-right: 5px;
    padding: .3em;
        padding-top: 0.3em;
        padding-right: 0.3em;
        padding-bottom: 0.3em;
        padding-left: 0.3em;
    text-align: center;
  }


  /*quita o oculta el spinner de subir y bajar la cantidad del número*/
   .measurement-input_2 input[type="number"] {
    -moz-appearance: textfield;
    max-width: 100%;
  }


  .unit {
    font-size: 1.5em;
}
/*************************************************************************************************************/














 /*color de fondo para la pagina*/

body {
    /*background-color: grey;*/
    /*background-color: #c9c9c9;*/
    /*background-position: center center;
    background: radial-gradient(ellipse, #black, #white);*/

    /*background-image: radial-gradient(circle at 50% 50%, #00ffff 0, #00ffff 16.67%, #00edff 33.33%, #0cc1ed 50%, #3497bd 66.67%, #3b7491 83.33%, #38576c 100%);*/

    /*background: radial-gradient(circle, rgba(251,251,254,1) 0%, rgba(181,181,189,1) 49%, rgba(95,95,96,1) 100%);*/

     /*background: rgb(244,244,243);*/

/*background: radial-gradient(circle, rgba(244,244,243,1) 0%, rgba(227,225,222,1) 49%, rgba(198,194,189,1) 100%); */

/*background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(227,225,222,1) 58%, rgba(198,194,189,1) 100%);*/

 /*background: rgb(244,243,242);
background: radial-gradient(circle, rgba(244,243,242,1) 0%, rgba(215,212,209,1) 58%, rgba(182,177,170,1) 100%); */

/*Gradiente fondo de la página*/
background: rgb(244,243,242);
background: radial-gradient(circle, rgba(244,243,242,1) 0%, rgba(215,212,209,1) 33%, rgba(182,177,170,1) 100%); /*https://cssgradient.io/*/
}




/*Un archivo WOFF2 es un archivo de fuente web creado en el formato WOFF (Formato de fuente abierta web) 2.0, un formato abierto que se utiliza para entregar fuentes de página web sobre la marcha. Se guarda como un contenedor comprimido que admite fuentes TrueType ( .TTF ) y OpenType ( .OTF ). Los archivos WOFF2 también admiten metadatos de licencias de fuentes. */
/* latin */
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/permanentmarker/v10/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cfw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}






.logo {

    padding: 10px;
    margin: 0;
    border: 0;
    line-height: 1;

    float: left; /*Lo que hace la propiedad es quitar al elemento del flujo normal de la página y colocarlo a la izquierda o derecha del resto del contenido de su elemento padre (se lo hace "flotar" hacia uno u otro costado). */
    position: relative;
    margin-top: 10px;
    
    /*text-align: right;
    position: absolute;
    right: 0;
    top: 25px;
    margin: 10px 10px 0px 0px;
    margin-right: 0px;*/
  }

.logo img{

    height: 100px; /*altura de la imagen*/

    
  }


.pricebox {

    /*padding: 10px;
    margin: 0;
    border: 0;
    /*line-height: 1;*/

    /*float: right; Lo que hace la propiedad es quitar al elemento del flujo normal de la página y colocarlo a la izquierda o derecha del resto del contenido de su elemento padre (se lo hace "flotar" hacia uno u otro costado). */
    /*position: relative;
    margin-top: 200px;*/

    text-align: right;
    position: absolute;
    right: 0;
    top: 40px; /*altura*/

    z-index: 3;

    padding: 10px;

  }

.pricebox a {

    position: relative;
    float: right;
    clear: both;
    margin-bottom: 2.5em; /*espacios entre letras*/
    /*text-align: right;
    position: absolute;
    right: 0;
    top: 25px;
    margin: 10px 10px 0px 0px;
    margin-right: 0px;*/
  }

  .primaryButton {
    background-color: #1a2d40;
    color: #fff !important;

    font-family: "NeueHansKendrick",sans-serif;
    font-size: 100%;
    font-weight: 300;
    text-decoration: none !important;
    text-transform: uppercase;
    text-align: center;
    padding: .8em 2.3em;
    border: .1em solid transparent;
    /*-webkit-appearance: none;
    -moz-appearance: none;*/
    appearance: none;
    border-radius: 0;
    /*color: #fff;*/
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease-in-out,color 0.25s ease-in-out,border 0.25s ease-in-out,transform 0.25s ease-in-out;
}


.secondaryButton.withBorder {
    border-color: #1a2d40;
}

.small.secondaryButton{

    padding: .7em 1.5em;
    font-size: 90%;

}


.secondaryButton {
    background-color: #fff;
    color: #1a2d40;


    font-family: "NeueHansKendrick",sans-serif;
    /*font-size: 100%;*/
    font-weight: 300;
    text-decoration: none !important;
    text-transform: uppercase;
    text-align: center;
    /*padding: .8em 2.3em;*/
    border: .1em solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    /*-webkit-appearance: none;*/
    /*-moz-appearance: none;*/
    appearance: none;
    border-radius: 0;
    /*color: #fff;*/
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease-in-out,color 0.25s ease-in-out,border 0.25s ease-in-out,transform 0.25s ease-in-out;
}





.fal{
    transform: scale(1.3);

    font-size: 90% !important;
    transform: scale(1.5) translateY(0em);
    margin-right: .75em;

}

.fa-arrow-right::before {

    content: "🠕"; /*unicode\e907*/

}


.fa-redo::before {

    content: "↻"; /*unicode \e927*/
    

}


.price {
    transition: 0.3s all;
    text-shadow: 1px 1px 0 #fff;
    clear: right;
    float: right;
    font-size: 2em;

    font-weight: 300;
    font-family: "NeueHansKendrick",sans-serif;
}

.form_navegador{

    background-color: transparent;
    border-color: transparent;
}

.boton_form_navegador{
    /*border-color:  transparent transparent transparent white;*/
    /*text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;*/
    /*color: #ffffff;*/
    /*background-color: #1883ba
    border-color: 2px solid #0016b0;*/


    background-color: #3a3a39;
    border-color: #3a3a39;
        
    width: 100%;
    height: 100%;

}

.boton_form_navegador img:hover{
     background-color: #3a6897; /*#e8f3fb bae0fc 6dbefa 47fb0e cuando el mouse pasa encima de la imagen*/
}


/* esta opción no se esta usando por directamente en javascript se esta cambiando de color
.img_seleccionado {
      background-color: #3a6897; cuando se seleciona la imagen y en el menu se muestra lo seleccionado del sub menú
   }/*




.disabled {
    pointer-events:none; /*This makes it not clickable*/
}

.disabled img {
    opacity:0.2;         /*This grays it out to look disabled*/
}


.form_navegador_continuar{

    background-color: white;
     
    width: 9.15em; /*ancho del menú*/
    border-right: 1em solid #bfbab5; /*color del extremo dercho del menú*/
    
}


#id_continuar {

    /*background-color: white;*/
     
    width: 9.15em; /*ancho del menú*/
    border-right: 1em solid #bfbab5; /*color del extremo dercho del menú*/
    
}

.boton_form_navegador_continuar{
   

   /* background-color: yellow ; #6a6865
    border-color: pink; *//*6a6865*/

    background-color: rgba(0, 0, 0, 0); /*color del menú*/
    border-color: rgba(0, 0, 0, 0);/*color del menú*/
        
    width: 100%;
  
     

    

}

.form_navegador_continuar button:hover{
    
    background-color: #3a3a39 ; /*#6a6865*/
    border-color: #3a3a39; /*6a6865*/
    
   

}

.divider {
   
    
    border-bottom: 1px dashed #bfbab5;
    width: 9.15em;
    height: 0;
    border-right: 1em solid #bfbab5; /*color del extremo dercho del menú*/
}