/*!
 * TEMA para GEOCON.com.ar
 */
@font-face {
    font-family: 'Rambla';
    src: url('../fonts/Rambla-Regular.eot');
    src: url('../fonts/Rambla-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Rambla-Regular.woff2') format('woff2'),
        url('../fonts/Rambla-Regular.woff') format('woff'),
        url('../fonts/Rambla-Regular.ttf') format('truetype'),
        url('../fonts/Rambla-Regular.svg#Rambla-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.eot');
    src: url('../fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Oswald-Regular.woff2') format('woff2'),
        url('../fonts/Oswald-Regular.woff') format('woff'),
        url('../fonts/Oswald-Regular.ttf') format('truetype'),
        url('../fonts/Oswald-Regular.svg#Oswald-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Marvel';
    src: url('../fonts/Marvel-Bold.eot');
    src: url('../fonts/Marvel-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Marvel-Bold.woff2') format('woff2'),
        url('../fonts/Marvel-Bold.woff') format('woff'),
        url('../fonts/Marvel-Bold.ttf') format('truetype'),
        url('../fonts/Marvel-Bold.svg#Marvel-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Rambla';
    src: url('../fonts/Rambla-Bold.eot');
    src: url('../fonts/Rambla-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Rambla-Bold.woff2') format('woff2'),
        url('../fonts/Rambla-Bold.woff') format('woff'),
        url('../fonts/Rambla-Bold.ttf') format('truetype'),
        url('../fonts/Rambla-Bold.svg#Rambla-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Marvel';
    src: url('../fonts/Marvel-BoldItalic.eot');
    src: url('../fonts/Marvel-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Marvel-BoldItalic.woff2') format('woff2'),
        url('../fonts/Marvel-BoldItalic.woff') format('woff'),
        url('../fonts/Marvel-BoldItalic.ttf') format('truetype'),
        url('../fonts/Marvel-BoldItalic.svg#Marvel-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}
/* ----------------------------- GENERALES */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.alert{margin-bottom: 30px;font-size: 20px;text-transform: uppercase;}
.alert button{display:none;}
html,body {height: 100%;width: 100%;}
body{font-family: 'Rambla', sans-serif; text-align: center;background-color: #fff; color: #757575; font-size: 14px;}
h1,h2,h3,h4,h5,h6{font-family: 'Marvel', sans-serif;font-weight: bold;font-style: italic;}
a {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  color: #c5ac84;
}
a:hover, a:focus {
  color: #ccc;
}
.fa{font-size: 6em;}
i{margin: 30px auto;}
p {
  font-size: 1em;
  line-height: 1.8em;
  margin-bottom: 20px;
}
p b{font-weight: bold;}

section{min-height: 100vh; width: 100%;padding-top: 100px; padding-bottom: 100px;}
.container{width: 90%; max-width: 1457px; margin: 0 auto;}

a.sr-button, button{
  margin: 30px auto;
  display: block;
  text-decoration: none;
  width: 230px; padding-top: 15px; padding-bottom: 15px;
  border: 1px solid #69b447;background:none; color:#69b447;
  font-family: 'Oswald', sans-serif; font-size: 1.5em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  }
a.sr-button:hover, button:hover{color:#fff;background-color: #69b447;}
.blanco a.sr-button, .blanco button{border: 1px solid #fff;background:none; color:#fff;}
.blanco a.sr-button:hover, .blanco button:hover{color:#1779a4;background-color: #fff;}
.azul a.sr-button, .azul button{border: 1px solid #1779a4;background:none; color:#1779a4;}
.azul a.sr-button:hover, .azul button:hover{color:#fff;background-color: #1779a4;}

button{margin: 0 auto;}
h2{}
.marco{ background-color: rgba(255,255,255,0.7); padding: 5%;}
/* ----------------------------- MENU */
nav,
.navbar-toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

nav {
  position: fixed;
  z-index: 10;
  background-color: rgba(23,121,164,0.8);
  width: 100%;
  height: 100%;
  text-align: right;
  display: table;
  color: white;
}

.nav-hide { display: none; }

nav ul {
  display: table-cell;
  vertical-align: top; padding-top: 80px;
  padding-left: 0 !important;
}

nav ul li { list-style: none;}

nav ul li a {
  font-size: 30px;line-height: 1.4em; margin-right: 30px;
  color: inherit;
  font-weight: bolder;
  text-decoration: none;
}
@media only screen and (min-width: 450px){nav ul li a {font-size: 50px;}}

.navbar-toggle {
  position: fixed;
  top: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  z-index: 20;
  cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
  width: 100%;
  height: 4px;
  margin-bottom: 4px;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
  box-shadow: 2px 2px 2px grey;
}
.navbar-on .bar1,
.navbar-on .bar2,
.navbar-on .bar3 { background-color: white; }
.navbar-on .bar1 {
  transform-origin: 25% 40%;
  transform: rotate(45deg);
  box-shadow: 0 0 0 white;
}
.navbar-on .bar3 {
  transform-origin: 25% 40%;
  transform: rotate(-45deg);
  box-shadow: 0 0 0 white;
}
.navbar-on .bar2 { background-color: transparent; box-shadow: 0 0 0 white;}
/* ----------------------------- INICIO */
#inicio{
  width: 100%; min-height: 100vh;
  background: url(../img/imagenes-fondo-01-min.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;   
}
#marca{margin-bottom: 50px;margin-top: 90px;}
#marca img{height: 110px; width: auto;}
#inicio h2{color: #fff; font-size: 1.5em;}
#inicio h2:first-child{font-size: 3em;}
@media only screen and (min-width: 500px){
    #marca{margin-top: 70px;}
    #marca img{height: 180px;}
    #inicio h2{font-size: 2em;}
    #inicio h2:first-child{font-size: 4em;}
}
@media only screen and (min-width: 1600px){
    #marca{margin-top: 150px;}
    #marca img{height: 228px;}
}
/* ----------------------------- NOSOTROS */
#nosotros{text-align: center;}
#quienes-somos, #que-hacemos{margin-bottom: 50px;}
#nosotros h3{font-size: 3em;width: 100%; height: 400px; line-height: 400px; color: #fff; margin: 20px auto;}
#nosotros p{width: 100%; font-size: 1.5em; text-align: justify; margin: 0 auto;margin-top: 70px;}
#quienes-somos h3{
    background: url(../img/nosotros-01-min.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#quienes-somos p{}
#que-hacemos h3{
    background: url(../img/nosotros-02-min.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#que-hacemos p{}

@media only screen and (min-width: 1100px){
    #quienes-somos h3{float: left; width: 46%; margin-right: 8%;}
    #quienes-somos p{float: left; width: 46%;}
    #que-hacemos h3{float: right; width: 46%; margin-left: 8%;}
    #que-hacemos p{float: right; width: 46%;}
    #que-hacemos .buttons{float: right; position: relative; right: 15%;}
}
/* ----------------------------- SERVICIOS */
#servicios{
    width: 100%; min-height: 100vh;
  background: url(../img/imagenes-fondo-02-min.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
}
#servicios h2{text-transform: uppercase; color: #fff; font-size: 5em; margin-bottom: 50px;}
.servicios-resumen{background-color: rgba(255,255,255,0.7); padding: 15px; width: 280px;display: inline-block; margin: 2%;}
.servicios-resumen h3{font-size: 2em;font-style: normal; color: #69b447; height: 84px}
@media only screen and (min-width: 1100px){.servicios-resumen{}}
@media only screen and (min-width: 1600px){.servicios-resumen{margin: 4%;}}

#servicios-contenido{text-align: left;}
#servicios-contenido .servicios{margin-bottom: 50px;}
#servicios-contenido .hr{border: 0; border-top: 3px solid #69b447; width: 320px; margin-bottom: 30px}
#servicios-contenido h3{font-size: 4em; margin-bottom: 50px; color: #69b447;}
#servicios-contenido img{ margin-bottom: 30px; width: 100%; height: auto;}
#servicios-contenido ul{font-size: 1.5em; list-style: disc; list-style-position: inside; line-height: 1.2em;}
#servicios-contenido ul li{margin-bottom: 20px; text-align: justify;}
#servicios-contenido ul .sub-list{padding-left: 40px;}
#servicios-contenido .buttons ul{font-size: 1em; list-style: none; line-height: 1.2em; margin: 0 auto; text-align: center;}
#servicios-contenido .buttons ul li{margin-bottom: 0; text-align: center; display: inline-block;}

@media only screen and (min-width: 700px){
    #servicios-contenido img{width: 610px; margin: 0 auto;margin-bottom: 30px;}
    #servicios-contenido .buttons{width: 470px; margin: 0 auto; float: none; clear: both;}
}
@media only screen and (min-width: 1100px){
    #servicios-contenido img{width: 610px; margin: 0 0;margin-bottom: 30px;}
    #servicios-contenido ul{float: right;width: 35%;}
    #servicios-contenido .buttons ul{float: none; width: auto;margin: 0 auto;}
}
@media only screen and (min-width: 1200px){
    #servicios-contenido ul{width: 40%;}
    #servicios-contenido .buttons ul{float: none; width: auto;margin: 0 auto;}
}
/* ----------------------------- PRODUCTOS */
#productos{}
#productos h2{text-transform: uppercase; color: #69b447; font-size: 5em; margin-bottom: 50px;}
#productos img{width: 100%; height: auto; max-width: 500px;}
#productos p{font-size: 1.5em; text-align: justify; margin-top: 50px;}
@media only screen and (min-width: 800px){
    #productos img{width: 50%;}
    #productos p{float: right;width: 45%; margin-left: 5%;}
    #productos .buttons{float: right; position: relative; right: 15%; top: -100px;}
}
/* ----------------------------- TRABAJOS */
#trabajos{
    width: 100%; min-height: 100vh;
  background: url(../img/imagenes-fondo-03-min.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;   
}
#trabajos h2{text-transform: uppercase; color: #fff; font-size: 5em; margin-bottom: 50px;}
#trabajos p {font-size: 1.5em; text-align: justify;}
@media only screen and (min-width: 1035px){
    #trabajos ul li{display: inline-block; margin: 20px;}
}

#mapa .container {
        position: relative;
        padding-bottom: 100%; /* 4:3 ratio*/
        height: 0;
        overflow: hidden;
}

#mapa iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
@media only screen and (min-width: 1035px){
    #mapa .container {padding-bottom: 50%; /* 4:3 ratio*/}
}

/* ----------------------------- CLIENTES */
#clientes{
    width: 100%; min-height: 100vh;
  background: url(../img/imagenes-fondo-04-min.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;   
}
#clientes h2{color: #fff; font-size: 5em; margin-bottom: 50px;}
#clientes-marcas img:nth-of-type(1){display: none;}
#clientes-marcas img:nth-of-type(2){width: 100%; max-width: 500px; height: auto; margin: 0 auto;}
@media only screen and (min-width: 1035px){
    #clientes-marcas img:nth-of-type(1){width: 100%; max-width: 1000px; height: auto;display: block; margin: 0 auto;}
    #clientes-marcas img:nth-of-type(2){display: none;}
}
#clientes h4{font-style: normal; font-size: 2em; color: #1779a4;margin-top: 50px; padding-bottom: 30px;}
#clientes p{font-size: 1.5em;}
/* ----------------------------- CONTACTO */
#contacto h2{color: #1779a4; font-size: 5em; margin-bottom: 50px; text-align: left;}
#contacto ul{font-size: 1.5em; text-align: left; line-height: 1.4em;}
#contacto ul li:first-child{color: #1779a4; font-weight: bold; margin-top: 30px;}
#contacto ul:last-child{margin-bottom: 50px;}
#contacto i{margin: 0;}
#contacto .fa{font-size: 1em;}
#contacto li a{color: #757575; text-decoration: none;}
#contacto .instagram a{font-weight: normal;}
#contacto .instagram i{ font-size: 20px; line-height: 25px;}
.fa-whatsapp{color:#00bb2d;}
.fa-instagram{
  display: inline-block;
  width: 25px;
  height: 25px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  vertical-align: middle;
  background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  box-shadow: 0px 3px 10px rgba(0,0,0,.25);
}
#mapa-ubicacion {
        position: relative;
        padding-bottom: 100%; /* 4:3 ratio*/
        height: 0;
        overflow: hidden;
}

#mapa-ubicacion iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
@media only screen and (min-width: 1035px){
    #contacto .col{width: 50%; float: left;}
}

#escribinos{
    width: 100%; min-height: 100vh;
  background: url(../img/imagenes-fondo-05-min.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;   
}
#escribinos h3{color: #fff; font-size: 5em;}
#escribinos h4{color: #fff; font-size: 2em; margin-bottom: 50px;}
#escribinos .marco{max-width: 500px; margin: 0 auto;}

input{
    border: none;
    width: 90%; max-width: 400px; margin: 0 auto;
    padding: 15px; border-radius: 5px;
    font-size: 1em; font-family: 'Open Sans', sans-serif;
}
textarea{
    border: none;
    width: 90%; max-width: 400px; margin: 0 auto;
    padding: 15px; min-height: 200px;border-radius: 5px;
    font-size: 1em; font-family: 'Open Sans', sans-serif;
}
form{max-width: 90%; margin: 0 auto;margin-bottom: 50px; }
.help-block{font-size: 12px; text-transform: uppercase;}
#pie{font-size: 1.5em; margin-top: 50px;color: #fff;}

@media only screen and (min-width: 500px){
#servicios h2, #productos h2, #trabajos h2, #clientes h2, #contacto h2, #escribinos h3{font-size: 6em;}
#escribinos h4{font-size: 2.5em;}
}