/*
* Author: Carlos Alvarez
* URL: http://alvarez.is
*
* Project Name: Landing Sumo - Theme 13
* URL: http://LandingSumo.com
* Version: 1.0
*/

/*	################################################################
1. GENERAL STRUCTURES
################################################################# */

/* Import fonts */
@import url(http://fonts.googleapis.com/css?family=Teko:400,500,300,600);
@import url(http://fonts.googleapis.com/css?family=Inconsolata);
* { 
margin: 0;
padding: 0px;
font-family: 'Inconsolata', sans-serif;
} 
body { 
background: #fff;
margin: 0; 
color: #fff;
}

h1, h2,h3, h4, h5, h6 {
font-family: 'Teko', sans-serif;
font-weight: 500;
}

h3 {
font-size: 34px;text-transform: uppercase;
}
p { 
padding: 0; 
margin-bottom: 12px; 
font-family: 'Inconsolata', sans-serif;
font-weight: 300;
font-size: 18px; 
line-height: 20px;
color: #fff; 
margin-top: 10px; 
}

html,
body {
height: 100%;
}


.centered {text-align: center}

::-webkit-selection {
color: #fcfcfc;
background: #2a2a3a;
}

::-moz-selection {
color: #fcfcfc;
background: #2a2a3a;
}

::selection {
color: #fcfcfc;
background: #52d3aa;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
a {
color: #2a2a3a; 
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
a:hover {
text-decoration: underline !important;
color: #000 !important;
}
a:focus, a:active {
outline: none;
}

.nopadding {
padding: 0px !important;
margin: 0px;
}

.btn-contacto {
border-radius: 50px;
padding:  8px 25px 4px 25px;
top: 0px;
float: right;
font-size: 20px;
background-color: #2a2a3a;
color: #fff;
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
}
.btn-contacto:hover,
.btn-contacto:focus,
.btn-contacto:active {
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
background-color: #FFF;
color: #2A2A3A;
}
.btn-site {
font-family: 'Teko', sans-serif;
border-radius: 0px;
margin-top: 12px;
border: 1px solid #fff;

padding:  8px 25px 4px 25px;
font-size: 18px;
background-color: transparent;
color: #fff;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.btn-site:hover,
.btn-site:focus,
.btn-site:active {
-webkit-transition: all 0.5s;
transition:all 0.5s;
background-color: #000; 
border: 1px solid #000;
color: #ddd;
}

.btn-enviar {
font-family: 'Teko', sans-serif;
border-radius: none;
margin-top: 15px;
padding:  8px 25px 4px 25px;
font-size: 20px;
background-color: #fff;
color: #242424;
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
width: 100%;
max-width: 440px;

}
.btn-enviar:hover,
.btn-enviar:focus,
.btn-enviar:active {
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
}
.fa {
font-size: 1.2em;
margin: 5px;
color: #222;
border: 1px solid #222;
padding: 10px 14px;
-webkit-transition: color 0.5s;
transition: color 0.5s;
-webkit-transition: border 0.5s;
transition: border 0.5s;
}

.fa:hover,
.fa:focus,
.fa:active {
-webkit-transition: color 0.5s;
transition: color 0.5s;
-webkit-transition: border 0.5s;
transition: border 0.5s;
color: #2A2A3A;
border: 1px solid #2A2A3A;

}
.cd-main-content {
/* you need to assign a min-height to the main content so that the children can inherit it*/
height: 100%;
position: relative; 

}

.cd-fixed-bg {
position: relative;
min-height: 100%;
  background-size: cover;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; 
background-repeat: no-repeat;
background-position: center center;

}

.cd-fixed-bg.cd-bg-1 {
/*background-image: url("../img/header.png");*/
background-repeat: no-repeat;
background-attachment: fixed;
}
.cd-fixed-bg.cd-bg-2 {
background-image: url("../img/megafono-estudio-rosario.jpg");
padding: 100px 0 100px 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top; 
}

.logo  {
position: fixed;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 90%;
max-width: 1170px;
text-align: center;
}  
.logos  {
position: fixed;
left: 50%;
top: 70%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 90%;
max-width: 1170px;
text-align: center;
} 

#inicio img {
padding-bottom: 0px;
}
.img-responsive-s{
width: 100% \9;
max-width: 100%;
height: auto;
}
#clientes {
background: #2A2A2A;
width: 100%;
padding-top: 100px;
padding-bottom: 100px;
color: white;
}

#clientes h4 {
font-weight: 500;
text-align: center;
font-size: 48px;
}
#clientes h5 {
color: #fff;
font-size: 18px;
line-height: 25px;
letter-spacing: 1px;
font-family: 'Inconsolata', sans-serif;
}
#clientes p {
color: #2A2A2a;
font-size: 16px;
line-height: 36px;
text-transform: uppercase;

background-color: #fff;
padding: 18px 18px; 
font-family: 'Inconsolata', sans-serif;
-webkit-transition: color 0.5s;
transition: color 0.5s;
}
#clientes p:hover,
#clientes p:focus,
#clientes p:active {
-webkit-transition: color 0.5s;
transition: color 0.5s;
-webkit-transition: border 0.5s;
transition: border 0.5s;
color: #242424;
border: 4px solid #242424;

}
.fondo {
background:rgba(36,36,36,0.65) ;

padding: 15px 15px 25px 15px;
}
/* FOOTER */
#footer {
background: #000 ;
width: 100%;

color: white;
}
#footers {
background: #fff;
color: white;
} 
#footers p { 	 
font-size: 20px; 
line-height: 20px;
color: #333;
font-weight: lighter;
letter-spacing: 2px;
font-family: 'Teko', sans-serif;
}
.sa {   
font-size: 22px;
color: #2a2a3a;
font-weight: lighter;
letter-spacing: 2px;
padding: 24px 0 0px; 

}
#footer p {
color: white;
}

#footer h4 {
font-weight: 500;
text-align: center;
font-size: 48px;
}

/* CREDIT */
.fixed_footer{
width: 100%;
height: 190px;
position: fixed; left: 0; bottom: 0;
z-index: -100;
}

.content{
margin: auto;
margin-bottom: 190px; /* Same height as footer */

}
/* = Contacto = */
.help-required{
color: #fff;
font-size:15px;
}
.help-block{
font-size:15px;
color: #ccc;
text-align:right;
font-weight: 300;
letter-spacing: 1px;
font-style: oblique;
}
.help-block ul{
list-style:none;
margin-bottom: 0px;
}

.alert-message error{
color: #ff0053;
font-size: 12px;
}

.input {
position: relative;
z-index: 1;
display: inline-block;
border: none;
width: 100% ;
vertical-align: top;
}
/*#ff0053 rosa;
#feca09 amarillo;
#2A2A3A negro;*/
.input__field {
position: relative;
display: block;
float: right;

width: 60%;
border: none;
border-radius: 0;
background: #fff;
color: #fff;
font-weight: lighter;
-webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
outline: none;
}

.input__label {
display: inline-block;
float: right;

width: 40%;
color: #fff;
font-weight: 300;
font-size: 18px;
letter-spacing: 1px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.input__label-content {
position: relative;
display: block;

width: 100%;

}

/* Isao */
.input__field--isao {
z-index: 10;
padding: 0em 0.1em 0.25em;
width: 100%;
background: transparent;
color: #fff;
font-weight: lighter;
font-size: 18px;
letter-spacing: 1px;
font-family: 'Inconsolata', sans-serif;
}

.input__label--isao {
position: relative;
overflow: hidden;
padding: 0;
width: 100%;
color: #fff;
text-align: left;
}

.input__label--isao::before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 7px;
background: #fff;
-webkit-transform: scale3d(1, 0.4, 1);
transform: scale3d(1, 0.4, 1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
transition: transform 0.3s, background-color 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__label--isao::after {
content: attr(data-content);
position: absolute;
top: 0;
left: 0;
padding: 0.25em 0.15em;
color: #fff;
opacity: 0;
-webkit-transform: translate3d(0, 50%, 0);
transform: translate3d(0, 50%, 0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
pointer-events: none;
}

.input__field--isao:focus + .input__label--isao::before {
background-color: #fff ;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

.input__field--isao:focus + .input__label--isao {
pointer-events: none;
}

.input__field--isao:focus + .input__label--isao::after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.input__label-content--isao {
padding: 0.25em 0.15em;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__field--isao:focus + .input__label--isao .input__label-content--isao {
opacity: 0;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}

.mouse {
width: 22px;
position: absolute;
height: 42px;
border-radius: 15px;
border: 2px solid #fff;
left: 50%;
bottom: 5%;
z-index: 1;

}
.scroll {
display: block;  margin: 6px auto;  width: 3px;  height: 3px;  border-radius: 4px;
background: #fff;
-webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;  -webkit-animation-name: scroll;  animation-name: scroll;
}

@keyframes scroll {
0% {
opacity: 1;
}

100% {
opacity: 0;    -webkit-transform: translateY(20px);    -ms-transform: translateY(20px);    transform: translateY(20px);
}
} 
@-webkit-keyframes scroll {  0% {    opacity: 1;  }

100% {    opacity: 0;    -webkit-transform: translateY(20px);    transform: translateY(20px);
}
}

#work {

background: #2A2A2a ;
}
.animate-box {
opacity: 0;
}

#work .fh5co-grid {
height: auto;
/*background-size: cover;
position: relative;*/
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;

}

#work .fh5co-grid img {
width: 100%;
height: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#work .fh5co-grid:hover  img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/*@media screen and (max-width: 480px) {
#work .fh5co-grid {
height: 400px;
}
}*/
#work .fh5co-grid .image-popup {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.84);
opacity: 0;

}
#work .fh5co-grid .image-popup .work-title {
position: absolute;
top: 40%;
bottom: 20px;
left: 20px;
right: 20px;
margin-top: -25px;
}
#work .fh5co-grid .image-popup .work-title p {
color: #fff; 
text-transform: uppercase;
}
#work .fh5co-grid .image-popup .work-title h3 {
margin-bottom: 10px;  color: #fff;
}
#work .fh5co-grid:hover .image-popup {
opacity: 1;

}