* {
  box-sizing: border-box;
}

html{
  font-size:  16px;
}

@media (min-width:359px)  { 
/* smartphones, iPhone, portrait 480x320 phones */ 
html{
    font-size:  .46rem;
  }
}

@media (min-width:361px)  { 
html{
    font-size:  1rem;
  }
 }

@media (min-width:769px)  {
 html{
    font-size:  0.8rem;
  }
}

/*@media (min-width:1025px) {
   html{
    font-size:  13px;
  }
}*/

@media (min-width:1367px) {
   html{
    font-size:  17px;
  }
}

@media (min-width:1441px) {
   html{
    font-size:  30px;
  }
}

/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: regular;
  src: url('fonts/raleway-v26-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/raleway-v26-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/raleway-v26-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/raleway-v26-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/raleway-v26-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/raleway-v26-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

body {
  background-color: #fcf5f5;
  font-family: Tahoma, Verdana, Geneva, sans-serif;
  margin: .5em;
}

#contenido {
  /*position: absolute;*/
 /* width: 1440px;
  padding-bottom: 100px;
  padding-left: 60px;*/
  /*width: 100%;*/
  width: 100%;
  background: #fcf5f5;
}

#estrella {
  float: left;
}

#estrella img{
  /*height: 50px;*/
  /*width: calc(var(--escalavertical)*50px);*/
  /*width:  50px;*/
  width: 3.125rem;
}

#nombre {
  float: left;
  padding: 1rem 0rem .875rem .5rem;
  font-family: Raleway;
  font-style: normal;
  font-weight: bold;
  font-size: 1.125rem;
  line-height: 1.1875rem;
}

#top {
  display:  block;
  width:  100%;

}

#logo {
  float:  left;
  /*margin-right:  21rem;*/
  width: 35%;
}

.topnav {
  float:  right;
  background-color: #333;
  overflow: hidden;


  /*display: flex;
  flex-direction: row;*/
  align-items: center;

  /*flex: none;*/
  order: 1;
  /*flex-grow: 0;*/
}

.topnav a {
  float: left;
  color: #f2f2f2;
  padding: .875rem 0rem .875rem .25rem;
  text-decoration: none;
  font-size: 1.0625rem;
  text-align:center;
  width: 100%;
}

.btnnav:hover {
  background-color: #ddd;
  color: black;
}
.btnnav:active {
  background-color: #04AA6D;
  color: white;
}

.btnnav {
  width: 6.25rem;
  display: inline-block;

  font-family: Raleway;
  font-style: normal;
  font-weight: semibold;
  font-size: 1rem;
  line-height: 1.1875rem;

  color: #464646;

}

#btnmail {
  width: 15.625rem;
  font-weight: bold;
}

#menu {
  /*float: right;*/
  display: none;
}

#presentacion {
  width: 100%;
}

#textopresentacion {
  float: left;
  width:  85%;
  padding-top: 1.875rem;
}

#titulopresentacion {
  font-family: Raleway;
  font-style: normal;
  font-weight: bold;
  font-size: 3.25rem;
  line-height: 3.8125rem;
}

#descripcionpresentacion {
  font-family: Raleway;
  font-style: normal;
  font-weight: normal;
  font-size: 1.375rem;
  line-height: 1.625rem;
}

.linkpersonal {
  float: left;
  margin-top: .625rem;
  margin-right: 1.375rem;

  font-family: Raleway;
  font-style: normal;
  font-weight: semibold;
  font-size: 1rem;
  line-height: 1.1875rem;

}

.linkpersonal a:link {
  text-decoration: none;
  color: #464646;
}

.linkpersonal a:visited {
  text-decoration: none;
  color: #464646;
}

.flecha {
  margin-left: .3125rem;
}

#foto {
  float: left;
}

#foto img {
  margin-top: .9375rem;
  width: 12.5rem;
  /*width: calc(var(--escalahorizontal)*200px);*/
  border-radius: 50%;
}

#sobremi {
  padding-top: 1.875rem;
  clear: both;
  width:  100%;
  background: #EAF2FD;
}

#titulosobremi {
  font-family: Raleway;
  font-style: normal;
  font-weight: bold;
  font-size: 2rem;
  line-height: 2.375rem;
}

#textosobremi {
  font-family: Raleway;
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.1875rem;
}

#firma img{
  width:  8.75rem;
  /*width: calc(var(--escalahorizontal)*140px);*/

}

.areadetalles {
  clear:  both;
  font-family: Raleway;
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.1875rem;
  padding-top: 1.875rem;
  width: 100%;
}

.titulodetalles {
  padding-top: 1.875rem;
  font-family: Raleway;
  font-style: normal;
  font-weight: bold;
  font-size: 2rem;
  line-height: 2.375rem; 
  text-align: center; 
}

.miitem {
  margin-top: 7.5rem;
  margin-right: 1.5625rem;
  width: 10rem;
  height: 10rem;
  float: left;
  text-align: center;
  background-color: white;
}

.miitem img {
   margin-top: 20%;
   margin-left:  30%;
   margin-bottom: 10%;
   height:  40%;
   display:  block;
}

.itemformacion {
  margin-top: 2.5rem;
  margin-right: .625rem;
  width:  20rem;
  float: left;
}

.cuadroformacion {
  margin-right: 4.6875rem;
  height: 12.5rem;
  width:  12.5rem;
  background-color: white;
  text-align: center;
}

.cuadroformacion img{
  width:  100%;
}

.tituloitem {
  font-family: Raleway;
  font-style: normal;
  font-weight: bold;
}

.detalleitem {
  font-family: Raleway;
  font-style: normal;
  font-weight: semibold;
  font-size: 1rem;
}

.itemexperiencia {
  margin-right: .625rem;
  width:  100%;
  float: left;
  margin-top:  1.875rem;
}

.cuadroexperiencia {
  width:  50%;
  background-color: white;
  text-align: center;
  float: left;
}

.imagenizquierda {
  padding-left: 60%;
  width:  100%;
}

.imagenderecha
{
  padding-left:  10%;
  padding-right:  50%;
  width: 100%;
}

.bloqueexperiencia {
  padding-left: 5%;
  float: left;
  width:  50%;
}

.tituloexperiencia {
  font-family: Raleway;
  font-style: normal;
  font-weight: bold;
  display: block;
  padding-bottom: 2%;
}

.detalleexperiencia {
  font-family: Raleway;
  font-style: normal;
  font-weight: semibold;
  font-size: 1rem;
  display: block;
}

.alinearderecha {
  text-align: right;
  padding-right: 8%;
}

#contacto {
  background-color: #EAF2FD;
  height: 37.5rem;
}

#contactoimagen {
  float: left;
  width:  30%;
}

#contactoimagen img {
  padding-left: 20%;
  width:  100%;
}

#bloquecontacto {
  width:  50%;
  padding-left: 5%;
  float: left;
  background-color: transparent;
}

#titulocontacto {
  font-family: Raleway;
  font-style: normal;
  font-weight: bold;
  padding-bottom: 2%;
}

#detallecontacto {
  font-family: Raleway;
  font-style: normal;
  font-weight: semibold;
  font-size: 1rem;
}

.detalleform {
  width: 100%;
  float: left;
  margin-bottom: 2%;
  font-family: Raleway;
  font-style: normal;
  font-weight: semibold;
  font-size: 1.25rem;
}

#mensaje {
  max-width: 100%;
}

#enviar {
  font-family: Raleway;
  font-style: normal;
  font-weight: 500;
  font-size: 1.25rem;
  background: #333;
  color:white;
  border:  none;
  padding: .9375rem 1.375rem;
}

footer {
    width:  100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #333;
    color: white;
    text-align: center;
    opacity: 0.9;
    margin: .5em;
  }

  /*Responsive elementos de la página, escalado general más arriba*/

  @media screen and (max-width: 960px) {

    /*Cuando es una resolución hasta 960px */
    /**/
    
    /*Cambio el tamaño del menú superior*/
    .topnav {
      width: 100%;
    }

    /*Tamaño de botones navegación*/

    /*Oculto todos los elementos del menú menos el primero*/
    /*.topnav div:not(:first-child){*/
      .topnav div{
      display: none;}

   /*Muestro el botón del menú*/
    #menu {

       /*float: left;*/
       /*position:  absolute;*/
      position:  absolute;
      right: 0;
      display: inline-block;
      
      /*position: absolute;
        left: 0;
        top: 0;*/

      /*float: right;
      display: block;
      width:  4em;*/
      /*margin-left: 28.8em;*/
    }

    /*Muestro el mail*/

    #btnmail{
      float: none;
      display: block;
      text-align: left;
    }

    /*Para abrir y cerrar menú desplegable*/

    .topnav.responsive {position: relative;}
    .topnav.responsive #menu {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive div {
        float: none;
        display: block;
        text-align: left;
    }

  }