/*font-family: 'Open Sans', sans-serif;*/
body{
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 20px;
}
header{
    background-color: #2e64a1;
    padding: 1em 0;
}

header h1{
    color: white;
    font-size: 2.5em;
    font-style:italic;
    font-weight: 100;
    display: inline-block; /*para que cuadro este en linea con el otro en vez de abajo  */
    position: relative;
    bottom: 30px;
}
nav{
    background-color: #6da9ed;
    margin-bottom: 2em;

}

nav ul{
    margin:0;
    padding:0;
    list-style: none;
}

nav ul li{
    display: inline-block;
    width: 16.3%;
}
nav ul li a{
    color:white;
    text-decoration:none; /*quitar la linea de abajo*/
    display:block;
    text-align:center;
    padding:0.2em 0.4em; 
}

nav ul li a:hover{ /*cambiar el color del menu cuando la mano esta arriba*/
    background-color: rgba(0,0,0, 0.5);
}
nav ul li a.activo{
    background: #4c76a5;
}

footer{
    background-color: #ccc;
    clear:both; 
    color: #333;
    padding: 3em 0;
    margin-top: 2em;
    text-align:center;
}
footer p{
    text-align: center;
}
.holder{/*contenedor*/
    max-width: 960px;
    margin: 0 auto;
}

h2{
    color:#2e64a1;
    font-weight: 400;
    margin: 0 0 1em;
}
.left{
   float: left;
}
.right{
    float:right;
 }

/*Inicio home*/
.homeimg{
    margin-bottom:1.5em;
    /*clear:both*/
}
.homeimg img{
    max-width: 100%;
}
.homeimg .cycle-overlay{
    font-family: 'Open Sans', sans-serif; ;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 600;
    background: black;
    color: white;
    padding: 15px;
    opacity: 0.7;
}

.columnas{
    overflow: hidden;
   /* background-color: violet;*/
}
.bienvenidos, .testimonios{
    box-sizing: border-box;/*ayuda a que todo se acomoda, toma los tamaños de los distintos elementos, mantiene el valor mayor,redimenciona el tamaño)*/
}
.bienvenidos{
    width: 75%;
    padding-right: 2em;
    
}
.testimonios{
    width: 25%;
}

.testimonio{
    background-color: #ccc;
    padding:1em;
}
.testimonios .cycle-slideshow{
    background-color: #ccc;
}

.testimonio .cita{
    font-weight:bold;
    font-style: italic;
    font-size:1.4em;
    display: block;
}
.testimonio .autor{
    font-size:0.7em;
    text-align:center;
    margin:1em 0;
    display: block;
}

/*fin home*/

/*inicio nosotros*/

.historia p{
  font-size: 0.8em;
}

.personas{
    overflow: hidden;/*me muestran el alto que no me dejaba ver */
    /* background-color: yellow; */
}
.persona{
  width: 18%;
  border:1px solid gray;
  border-radius: 0.25em;
  float:left;
  margin-left:2.25%;
  box-sizing: border-box;
}

.persona figure{
   margin: 0.8em 0 1em;
   text-align: center;
}
.persona figure img{
   border-radius: 50%;
   box-shadow:0 0 5px rgba(0,0,0, 0.5);
}

.persona h5 , .persona h6{
   text-align:center;
   font-weight: normal;
   color: #2e64a1;
   margin:0;
}

.persona h6{
    font-size:0.9em;
    text-align: center;
   
}

.persona h6{
  font-size: 0.8em;
  font-style:italic;
}

.persona p{
  font-size:0.7em;
  color: #444;
  margin: 0 1em 1em;
}

.persona:first-child{ /*o last-child usando margin-right*/
   margin-left: 0;
  }


/*fin nosotros*/

/*Inicio de servicio*/

.servicio{
    border: 1px solid gray;
    border-radius: 0.7em;
    margin: 1em 0;
    padding:1em;
    overflow: hidden; /*visualizar los elementos que para el div servicio estaria ocultos*/
}

.servicio .info{
    width: 75% ; /*para que le de espacio a la imagen de ocupar su espacio*/
    /* background-color: yellow; */
}

.servicio .info h4{
    color:#2e64a1;
    font-size: 1.2em;
    font-weight: 500; /*peso de la letra*/
    font-style: italic;
    margin:0 0 1em;
    border-bottom: 1px solid #2e64a1;
    padding-bottom: 0.5em;

}

.servicio .info p{
    font-size: 0.8em;
    line-height: 1.2em;

}

.servicio figure img{
    border-radius:0.8em;
}

.servicio:nth-child(odd) figure{ /* odd impar- seria la imagen maritimo y ferroviario*/
    float:left;
    margin: 0 1em 0 0;
}
.servicio:nth-child(odd) .info{
    float: right;
   
}
.servicio:nth-child(even) figure{ /* even par- seria la avion y terrestre*/
    float:right;
    margin: 0 0 0 1em;
}

.servicio:nth-child(even) .info{
    float: left;
   
}

/*fin de servicio*/

/*inicio galeria*/

.galeria .foto{
    /* display: inline-block; */
    float: left;
    width: 18%;
    margin: 1em 0 1em 2.5%;
    border:1px solid #ddd;
    padding:0.3em;
    box-sizing: border-box;
}

.galeria .foto img{
    width: 100%;
    display: block; /*para que ajuste bien proporcionalmente*/
}
.galeria .foto:nth-child(5n+1){ 
   /* border-color: red;*/
    margin-left:0;
}

/*fin galeria*/
/*Inicio contacto*/
.columna{ 
    width:50%;
    /* background-color: yellow; */
    box-sizing: border-box;
    padding: 0.6em;
 }

.columna.left{ /*cuando un elemento tiene dos clases se colocan pegado*/
    border-right: 2px solid grey;
    
 }

 .columna.right p{ 
    font-size: 0.9em;
 }

 .columna.right ul li{ 
    font-size: 0.8em;
 }
.formulario label{ 
    vertical-align:top;
    width:20%;
    /* background-color: red; */
    display: inline-block; /*se usó para que el formulario se colocar en lìnea pareja una debajo del otro*/
 }

 .formulario input,.formulario textarea{ 
    background-color:#ddd;
    border-radius: 5px;
    border: 1px solid #999;
    padding: 0.4em 0.6em;
    font-size: 0.8em;
    width: 70%;

 }

 .formulario textarea{ 
    height:10em;
    resize:none;/*quita la opcion de agrandar*/
 }

 .formulario label.error{
     width:auto;
     font-size: 0.8em;
     color:red;
 }

.formulario input.error,
.formulario textarea.error{
    border: 1px solid red;
    background-color: pink;
}

.formulario input[type="submit"]{ 
    background-color:#6da9ed ;
    box-shadow: 0 0 10px rgba(0,0,0, 0.4);
    color:white;
    font-size: 1em;
    width:auto;/*vuelve al tamaño que viene por defecto, para que no se modifique con el resto del formulario*/
    cursor:pointer;/*coloca la manito*/
 }

 .formulario .acciones{  /*se creo la clase acciones, para que el bottom enviar se colocara en el centro, con text align*/
    text-align: center;
 }
/*fin contacto*/

@media screen and (max-width:768px){
    .holder{
        max-width: 768px;
        padding:0 1em;
    }
    nav ul li{
        width: 15.7%;
    }
    .columnas .bienvenidos,
    .columnas .testimonios{
        width: 50%;
    }
    .persona{
        width:30%;
        margin-left:5%;
        margin-bottom: 5%;
    }
    .persona:nth-child(3n+1){
        margin-left: 0;
    }

    .servicio figure,
    .servicio .info{
        box-sizing: border-box;
    }
    .servicio figure{
        max-width: 22%;
    }
    .servicio figure img{
        width:100%;
    }
    .galeria .foto{
        width:24%;
        margin: 1em 0 1em 1.3333%;
    }
    .galeria .foto:nth-child(5n+1){
        margin-left:1.3333%;
    }
    .galeria .foto:nth-child(4n+1){
        margin-left:0;
    }
    .columna{
        width: 100%;
        float:none;
        padding: 0 1em;
    }
    .columna.left{
        border: none;
    }
}
/*fin media 768*/

/*inicio media 480*/
@media screen and (max-width:480px){

    
    .holder{
        max-width: 468px;
        padding:0 1em;
    }
    header .holder{
        margin-left: 1.3em;
    }
    nav ul li{
        display: block;
        width:auto;
    }
    .columnas .bienvenidos,
    .columnas .testimonios{
        /* clear:both; */
        width:auto;
        float:none;
        display:block;
    }
    .columnas .bienvenidos{
        padding: 0.6em;
    }

    .columnas .testimonios{
        width:50%;
        margin:0 auto;
        min-width: 220px;
    }
    .persona{
        width:48%;
        margin-left:2%;
        margin-bottom:2%;
    }
    .persona:nth-child(3n+1){
        margin-left: 2%;
    }/*esta regla lo que se heredo en la linea 362 (margin-left:0)*/

    .persona:nth-child(2n+1){
        margin-left: 0;
    }

    .servicio figure,
    .servicio .info{
        display: block;
        float: none;
        width:100%;
    }
    .servicio figure{
        max-width: 100%;
        margin:0 0 1em 0;
    }

    .galeria .foto{
        width:30%;
        margin: 1em 0 1em 3.3333%;
        padding: 0.3em;
    }
    .galeria .foto:nth-child(5n+1){
        margin-left:3.3333%;
    }
    .galeria .foto:nth-child(4n+1){
        margin-left:3.3333%;
    }
    .galeria .foto:nth-child(3n+1){
        margin-left:0;
    }
    .formulario label{
        font-size: 0.8em;
    }
}
/*fin de @media 480px*/

/*inicio @media 360px*/
@media screen and (max-width:360px){

    .holder{
        max-width: 360px;
    }

    header .holder{
        text-align: center;
        margin-left: 0;
    }
    header h1{
        display:block;
        position: static;
    }
    nav .holder{
        padding: 0;
    }
    nav ul li a{
        font-size: 1.2em;
        padding:0.5em 0;
    }
    .servicio .info h4{
        margin-top: 1em;
    }
    .formulario label{
        font-size: 0.9em;
    }
    .formulario label,
    .formulario input,
    .formulario textarea{
        float: none;
        display:block;
        width:100%
    }

    .formulario p.acciones {
        padding-bottom: 1em;
    }
    .formulario .acciones input{
        margin: 0 auto;
    }
}

/*fin @media 360*/