/*####################################
*
*   Cliente:
*   Autores:
*   Versión:
*
*#####################################*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    /*background: #e3e3e3;*/
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
}
/*
*  CSS HELP DESING
*--------------------------------------*/
 #border-1b {border: 1px dashed darkorange;background: rgba(255,147,0,.3);}#border-2b { border: 1px dashed purple; background: rgba(128,0,128,.3);}#border-3b {border: 1px dashed #00dd00;background: rgba(0,255,0,.3);}#border-1{border: 1px dashed #000;}#border-2{border: 1px dashed purple;}#border-3{border:1px dashed darkorange;}
#border-4{border: 1px dashed lime;}/*.container {border: 1px dotted purple;}.row {border: 1px dotted red;}*/
/*
*  CSS COLORS
*--------------------------------------*/
@import url("color-flat.css");
/*
* CSS BOTONES
*--------------------------------------*/
@import url("btn.css");
/*
*  CSS TIPOS WEB
*--------------------------------------*/
#mailing {
    max-width: 600px;
    width: 600px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    border: 1px dashed #000;
}
#landing-page {
    max-width: 960px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    border: 1px dashed #000;
}
.full-width {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    height: auto;
    border: 1px dashed #000;
}
/*
* AYUDAS CSS
*--------------------------------------*/
.div-padre {
    position: relative;
}
.center-div {
    position: absolute;
    top: 50%; 
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.element-left {
    text-align: left;
    margin: 10px 0;
    padding: 0;
}
.element-center {
    text-align: center;
    margin: 10px 0;
    padding: 0;
}
.element-right {
    text-align: right;
    margin: 10px 0;
    padding: 0;
}
.air-margin {
    margin: 10px;
    padding: 0;
}
.air-padding {
    margin: 0;
    padding: 10px;
}
.fullWidth {
    margin: 0 !important;
    padding: 0 !important;
}
/*
* CSS ICONOS
*---------------------------------------------*/
.icon-xl, .icon-lg, .icon-md, .icon-sm, .icon-xs {
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
}
.icon-xl {
    font-size: 5em;
}
.icon-lg {
    font-size: 3em;    
}
.icon.md {
    font-size: 2.5em;
}
.icon-sm {
    font-size: 1em;
}
.icon-xs {
    font-size: 1em;
}

/*
*   CSS PROYECTO
*--------------------------------------*/
#main {
    position: relative;
    padding: 0;
    margin: 0;
    height: auto;
    min-height: auto;
    max-height: auto;
}
#header {
    width: 100%;
    min-height: 300px;
    height: auto;
}
.air-top {
    margin-top: 5%;
}
.brand {
    max-width: 150px;
    height: auto;
}
.msj-banner {
    background: rgba(0,0,0,.6);
    display: inline-block;
    margin: 25px 0 0 0;
    padding: 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.msj-banner h2 {
    margin: 0;
    padding: 0;
    font-size: 3em;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.msj-banner h3 {
    margin: 0;
    padding: 0;
    font-size: 2em;
    color: #fff;
}
.bg-header {
    background: url(../images/lofwork-header.png) center center no-repeat;
    background-size: cover;
}
#content {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}

.wrapper-formulario {
    background: rgba(47,154,230,0.72);
    padding: 10px;
    border: 2px solid #2f9ae6;
    display: block;
    margin: 10% auto 5% auto;
    max-width: 80%;
    position: relative;
}
.title-formulario {
    color: #fff;
    font-size: 2em;
    margin: 15px 0;
    padding: 5px;
    text-align: center;
    font-family: 'Open Sans',sans-serif;
    font-weight: 300;
    display: block;
}
.description {
    padding: 10px;
    margin: 10px 0 0 0;
}
.description h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 2.2em;
    color: #000;
    margin: 10px 0;
    padding: 0;
}
.wrapper-llamados {
    text-align: center;
    padding: 10px;
    margin: 0;
}
.llamado-1 {
    margin: 0 auto;
    padding: 3%;
    display: inline-block;
    position: relative;
    font-weight: 700;
    background: #2F99E5;
    color: #fff;
    border-radius: 5px;
}
.llamado-2 {
    margin: 0 auto;
    padding: 10px;
    display: block;
    position: relative;
    font-weight: 700;
}
.llamado-3 {
    display: inline-block;
    position: absolute;
    font-weight: 400;
    background: orangered;
    padding: 3%;
    border-radius: 5px;
    color: #fff;
    top: -18%;
    right: -2%;
    font-size: 1.2em;
    text-align: center;
}
#footer {
    background: #6B6B6B;
    margin: 0;
    padding: 10px;
    width: 100%;
    text-align: center;
}
#footer p {
    margin: 0;
    padding: 2px;
    font-size: .9em;
    color: #fff;
}
.imk {
    font-size: .9em;
    color: #bf0000;
    text-decoration: none;
    padding: 5px;
    margin: 0 0 0 2px;
    font-weight: 700;
}
.imk:hover {
    background: #bf0000;
    color: #fff;
    padding: 5px;
    margin: 0 0 0 px;
}
/*
*  MEDIA QUERYS BOOTSTRAP
*--------------------------------------*/
    
/*Hasta smartphones de 480px*/
@media (max-width: 480px) { 
    #mailing {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 0;
        border: 1px dashed purple;
    }
    #landing-page {
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        border: 1px dashed red;
    }
    .full-width {
        margin: 0;
        padding: 0;
    }
    .brand {
    display: block;
        margin: 0 auto;
    }
    .msj-banner {
    margin: 10px 0 20px 0;
        text-align: center;
    }
    .msj-banner h2 {
    font-size: 2em;
    }
    .msj-banner h3 {
    font-size: 1.5em;
    }
    .description {
    text-align: center;
    }
    .wrapper-formulario {
        width: 100%;
        max-width: 100%;
        margin: 5% 0;
        display: block;
    }
    .llamado-3 {
    display: block;
    top: -13%;
    right: 5%;
    font-size: 1.2em;
    text-align: center;
    }
    .air-botoneras {
        padding: 10px;
    }

}

/* de Smartphones a Tablets*/
@media (max-width: 768px) { ... }

/* de Tablets a pantallas de desktops */
@media (min-width: 768px) and (max-width: 980px) { ... }

/* Pantallas anchas (desktops) */
@media (min-width: 1200px) { .. }