/* ===========================
   Base & Typography
=========================== */
body {
background: #f2f2f2;
font-family: 'Open Sans', sans-serif;
}

/* ===========================
   Header
=========================== */
header {
margin-top: 30px;
}

header .nav {
min-height: 80px;
overflow: hidden;
background: #fff;
}

/* --- Logo --- */
header .logo .logo-name,
header .logo span,
header .logo p {
font-size: 16px;
display: inline-block;
margin: 0;
}

header .logo .logo-name {
font-weight: 800;
text-transform: uppercase;
}

header .logo .icono {
color: #bfbfbf;
}

header .logo p {
color: #777777;
}

/* --- Menu --- */
header .menu {
padding: 0;
}

header .menu a {
display: block;
text-decoration: none;
color: #fff;
padding: 0 30px;
transition: background 0.25s ease;
}

header .menu a div span {
font-weight: 600;
}

header .menu .c-1 { background: #3da5e2; }
header .menu .c-2 { background: #005385; }
header .menu .c-3 { background: #003855; }

header .menu .c-1:hover,
header .menu .c-1.active { background: #1ba0ef; }
header .menu .c-2:hover,
header .menu .c-2.active { background: #00426a; }
header .menu .c-3:hover,
header .menu .c-3.active { background: #002d44; }

/* ===========================
   Slider
=========================== */
.slider {
margin-bottom: 40px;
}

.slider .col {
padding: 50px;
}

/* ===========================
   Portfolio
=========================== */
.portafolio {
background: #feffff;
border-top: 5px solid cyan;
padding: 0 20px;
margin-bottom: 40px;
}

.portafolio .titulo {
padding: 40px 0;
text-align: center;
color: #3da5e2;
font-weight: 300;
}

.portafolio .galeria .contenedor-imagen {
margin-bottom: 40px;
max-height: 180px;
overflow: hidden;
}

.portafolio .galeria .contenedor-imagen a {
display: block;
background: #3da5e2;
overflow: hidden;
}

.portafolio .galeria .contenedor-imagen .imagen {
width: 100%;
transition: opacity 0.3s ease, transform 0.3s ease;
}

.portafolio .galeria .contenedor-imagen:hover .imagen {
opacity: 0.35;
transform: scale(1.04);
}

/* ===========================
   Modal
=========================== */
.portafolio .modal-dialog {
width: 100%;
height: 100%;
max-height: 100%;
}

/* ===========================
   About
=========================== */
.acerca-de {
padding: 30px;
margin-bottom: 40px;
}

.acerca-de .foto {
text-align: center;
}

.acerca-de .foto img {
margin-bottom: 30px;
}

.acerca-de .foto .nombre {
color: #545454;
font-weight: 300;
font-size: 18px;
letter-spacing: 2px;
}

.acerca-de .info .titulo {
color: #005385;
font-weight: 300;
font-size: 40px;
margin-bottom: 30px;
}

.acerca-de .info .resumen {
letter-spacing: 1px;
}

.acerca-de .info .label {
font-size: 10px;
font-weight: 600;
color: #005385;
margin-bottom: 10px;
}

.acerca-de .info .progress {
background: #005385;
border-radius: 0;
margin-bottom: 15px;
height: 25px;
}

.acerca-de .info .progress-bar {
height: 25px;
background: #3da5e2;
line-height: 25px;
text-align: left;
padding-left: 20px;
transition: width 0.8s ease;
}

/* ===========================
   Contact
=========================== */
.contacto {
padding: 40px 0;
border-top: 1px solid #cbcbcb;
margin-bottom: 40px;
}

.contacto .titulo {
color: #003855;
font-weight: 300;
font-size: 40px;
margin-bottom: 40px;
text-align: center;
}

.contacto .form-group {
margin-bottom: 0;
}

.formulario input[type='text'],
.formulario input[type='email'],
.formulario textarea {
padding: 15px;
border: none;
width: 100%;
font-family: 'Open Sans', sans-serif;
margin-bottom: 30px;
outline: none;
transition: box-shadow 0.2s ease;
}

.formulario input[type='text']:focus,
.formulario input[type='email']:focus,
.formulario textarea:focus {
box-shadow: 0 0 0 3px rgba(61, 165, 226, 0.35);
}

.formulario textarea {
height: 150px;
min-height: 150px;
max-height: 250px;
resize: vertical;
}

.formulario .boton {
background: #3da5e2;
border: none;
padding: 10px 40px;
color: #fff;
font-family: 'Open Sans', sans-serif;
cursor: pointer;
width: auto;
border-radius: 3px;
transition: background 0.25s ease, transform 0.15s ease;
}

.formulario .boton:hover {
background: #1ba0ef;
transform: translateY(-1px);
}

/* ===========================
   Footer / Social
=========================== */
.redes-sociales {
padding: 40px 0 10px;
}

.redes-sociales .icono {
width: 70px;
height: 70px;
font-size: 30px;
line-height: 70px;
color: #fff;
text-align: center;
background: #cbcbcb;
display: inline-block;
margin: 0 15px;
text-decoration: none;
border-radius: 50%;
transition: background 0.3s ease, transform 0.2s ease;
}

.redes-sociales .icono:hover {
transform: translateY(-3px);
}

.redes-sociales .twitter  { background: #1da1f2; }
.redes-sociales .instagram { background: #833ab4; }
.redes-sociales .facebook  { background: #3b5998; }

.footer-copy {
color: #777;
font-size: 13px;
margin: 20px 0 30px;
}

/* ===========================
   Media Queries
=========================== */

/* Dispositivos xl */
@media screen and (max-width: 1199px) {}

/* Dispositivos lg */
@media screen and (max-width: 991px) {
.logo {
height: 76px;
}
.menu {
min-height: 76px;
}
.menu a {
width: 100%;
}
.menu a div {
width: 100%;
}
.portafolio .galeria .contenedor-imagen:nth-child(1) { order: 1; }
.portafolio .galeria .contenedor-imagen:nth-child(2) { order: 3; }
.portafolio .galeria .contenedor-imagen:nth-child(3) { order: 6; }
.portafolio .galeria .contenedor-imagen:nth-child(4) { order: 2; }
.portafolio .galeria .contenedor-imagen:nth-child(5) { order: 5; }
.portafolio .galeria .contenedor-imagen:nth-child(6) { order: 4; }
.portafolio .galeria .contenedor-imagen:nth-child(7) { order: 7; }

#modalImagen .modal-dialog .modal-content img {
width: 100%;
}
}

/* Dispositivos md */
@media screen and (max-width: 767px) {}

/* Dispositivos sm */
@media screen and (max-width: 575px) {
header {
margin-top: 0;
text-align: center;
}

header .logo .logo-name,
header .logo p {
font-size: 12px;
}

.redes-sociales .icono {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 20px;
margin: 0 8px;
}

.slider .col {
padding: 20px;
}
}