/*
Theme Name: Inventer
Theme URI: http://www.reformabranding.com
Author: the Reforma Branding team
Author URI: http://www.reformabranding.com
Description: Inventer Theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready, accessibility-ready
Text Domain: inventer

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/******************************************************************generales***************************************************************/
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background-color: #006eab;
}

p:empty {
    display: none;
}

.right_animation_hidden,
.right_animation_visible,
.left_animation_hidden,
.left_animation_visible
{
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-duration: 350ms;
    -ms-animation-duration: 350ms;
    -o-animation-duration: 350ms;
    animation-duration: 350ms;
}

.right_animation_hidden,
.left_animation_hidden
{
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.right_animation_hidden
{
    -webkit-animation-name: right_animation_hidden;
    -moz-animation-name: right_animation_hidden;
    -ms-animation-name: right_animation_hidden;
    -o-animation-name: right_animation_hidden;
    animation-name: right_animation_hidden;
}

.right_animation_visible
{
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-animation-name: right_animation_visible;
    -moz-animation-name: right_animation_visible;
    -ms-animation-name: right_animation_visible;
    -o-animation-name: right_animation_visible;
    animation-name: right_animation_visible;
}

.left_animation_hidden
{
    -webkit-animation-name: left_animation_hidden;
    -moz-animation-name: left_animation_hidden;
    -ms-animation-name: left_animation_hidden;
    -o-animation-name: left_animation_hidden;
    animation-name: left_animation_hidden;
}

.left_animation_visible
{
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-animation-name: left_animation_visible;
    -moz-animation-name: left_animation_visible;
    -ms-animation-name: left_animation_visible;
    -o-animation-name: left_animation_visible;
    animation-name: left_animation_visible;
}

@-webkit-keyframes right_animation_hidden
{
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-100%); }
}

@-moz-keyframes right_animation_hidden
{
    from { -moz-transform: translateX(0); }
    to { -moz-transform: translateX(-100%); }
}

@-ms-keyframes right_animation_hidden
{
    from { -ms-transform: translateX(0); }
    to { -ms-transform: translateX(-100%); }
}

@-o-keyframes right_animation_hidden
{
    from { -o-transform: translateX(0); }
    to { -o-transform: translateX(-100%); }
}

@keyframes right_animation_hidden
{
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@-webkit-keyframes right_animation_visible
{
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}

@-moz-keyframes right_animation_visible
{
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(0); }
}

@-ms-keyframes right_animation_visible
{
    from { -ms-transform: translateX(100%); }
    to { -ms-transform: translateX(0); }
}

@-o-keyframes right_animation_visible
{
    from { -o-transform: translateX(100%); }
    to { -o-transform: translateX(0); }
}

@keyframes right_animation_visible
{
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@-webkit-keyframes left_animation_hidden
{
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(100%); }
}

@-moz-keyframes left_animation_hidden
{
    from { -moz-transform: translateX(0); }
    to { -moz-transform: translateX(100%); }
}

@-ms-keyframes left_animation_hidden
{
    from { -ms-transform: translateX(0); }
    to { -ms-transform: translateX(100%); }
}

@-o-keyframes left_animation_hidden
{
    from { -o-transform: translateX(0); }
    to { -o-transform: translateX(100%); }
}

@keyframes left_animation_hidden
{
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

@-webkit-keyframes left_animation_visible
{
    from { -webkit-transform: translateX(-100%); }
    to { -webkit-transform: translateX(0); }
}

@-moz-keyframes left_animation_visible
{
    from { -moz-transform: translateX(-100%); }
    to { -moz-transform: translateX(0); }
}

@-ms-keyframes left_animation_visible
{
    from { -ms-transform: translateX(-100%); }
    to { -ms-transform: translateX(0); }
}

@-o-keyframes left_animation_visible
{
    from { -o-transform: translateX(-100%); }
    to { -o-transform: translateX(0); }
}

@keyframes left_animation_visible
{
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
/******************************************************************************************************************************************/

/******************************************************************header******************************************************************/
header {
    background-color: #0080c6;
    padding: 40px 0 70px 58px;
    text-align: justify;
    position: relative;
    z-index: 3;
}

header:after {
    content: '';
    display: inline-block;
    width: 100%;
}

#logo, header nav {
    display: inline-block;
    vertical-align: middle;
}

#logo img {
    display: block;
    height: auto;
}

header nav {
    background-color: #FFFFFF;
}

header nav ul li {
    display: inline-block;
    vertical-align: top;
    height: 46px;
}

header nav ul li a {
    display: block;
    height: 100%;
    font-family: GothamBold;
    font-size: 10pt;
    font-weight: normal;
    color: #0080c6;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 30px;
    line-height: 46px;
    text-align: center;
}

header nav ul li a:hover, .current_page_item a {
    font-family: GothamBook;
}
/******************************************************************************************************************************************/

/********************************************************************pages*****************************************************************/
article {
    height: 452px;
    position: relative;
    z-index: 2;
}

#contacto {
    height: 500px;
}

.current {
    display: block!important;
}

.aligncenter {
    display: block;
    margin: 40px auto;
}

#inicio .page_content {
    width: 44%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    background-color: #FFFFFF;
}

#inicio .page_content p {
    font-family: GothamBook;
    font-size: 13pt;
    font-weight: normal;
    color: #0080c6;
    line-height: 18px;
}

#inicio .page_content a {
    font-family: GothamBold;
    font-size: 10pt;
    font-weight: normal;
    color: #0080c6;
    display: inline-block;
    margin-top: 40px;
    background-image: url(images/see_more.png);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 25px;
    text-decoration: none;
    text-transform: uppercase;
}

#inicio ul {
    width: 56%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
}

#inicio ul li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: none;
    text-align: center;
}

#inicio ul li:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#inicio ul li h3 {
    display: inline-block;
    vertical-align: middle;
    font-family: GothamBold;
    font-size: 18pt;
    font-weight: normal;
    color: #FFFFFF;
    text-transform: uppercase;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.75);
}

.page-id-18 footer {
    margin-top: -142px;
}

#quienes-somos {
    padding-bottom: 142px;
    height: auto!important;
    background-repeat: no-repeat;
    background-position: left bottom;
    text-align: right;
}

#quienes-somos:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#quienes-somos .page_content {
    padding: 30px;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

#quienes-somos .page_content h3 {
    font-family: GothamBold;
    font-size: 12pt;
    font-weight: normal;
    color: #FFFFFF;
    margin-top: 20px;
}

#quienes-somos .page_content ul {
    margin-top: 20px;
    margin-left: 30px;
}

#quienes-somos .page_content p, #quienes-somos .page_content ul li {
    font-family: GothamBook;
    font-size: 10pt;
    font-weight: normal;
    color: #FFFFFF;
}

#quienes-somos .page_content p {
    margin: 15px 0;
}

#quienes-somos .page_content p strong {
    font-family: GothamBold;
    font-size: 10pt;
    font-weight: normal;
    color: #FFFFFF;
}

#servicios .page_content, #servicios .page_content ul {
    width: 100%;
    height: 100%;
}

#servicios .page_content ul {
    position: relative;
    overflow: hidden;
}

#servicios .page_content ul li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.service_image, .service_info {
    display: inline-block;
    vertical-align: top;
    height: 100%;
}

.service_image {
    width: 53%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.service_info {
    width: 47%;
    background-color: #FFFFFF;
    text-align: center;
}

.service_info:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.service_info h2 {
    font-family: Gotham-Black;
    font-size: 10pt;
    font-weight: normal;
    color: #0080c6;
    padding-bottom: 15px;
    text-transform: uppercase;
}

.service_info p {
    font-family: GothamBook;
    font-size: 10pt;
    font-weight: normal;
    color: #0080c6;
    margin: 20px 0;
}

.service_content {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

#contacto:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#contacto .page_content {
    display: inline-block;
    vertical-align: middle;
    padding: 0 120px;
    width: 100%;
}

#contacto table {
    width: 100%;
    text-align: left;
}

#contacto th {
    width: 90px;
}

#contacto th, #contacto td {
    padding: 7px 0;
}

#contacto label {
    font-family: GothamBook;
    font-size: 10pt;
    font-weight: normal;
    color: #FFFFFF;
    text-transform: uppercase;
}

#contacto input {
    width: 100%;
    height: 23px;
    background-color: #FFFFFF;
    padding: 0 5px;
}

#contacto textarea {
    width: 100%;
    height: 225px;
    resize: none;
    padding: 5px;
}

#contacto input, #contacto textarea {
    font-family: GothamBook;
    font-size: 10pt;
    font-weight: normal;
    color: #006eab;
}

#contacto button {
    font-family: GothamBold;
    font-size: 10pt;
    font-weight: normal;
    color: #FFFFFF;
    text-transform: uppercase;
    background-color: transparent;
    height: 26px;
    background-image: url(images/button.png);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 30px;
}

#contacto a {
    font-family: GothamBook;
    font-size: 10pt;
    font-weight: normal;
    color: #FFFFFF;
    text-decoration: none;
}

#contact_alert {
    height: 25px;
    font-family: GothamBook;
    font-size: 10pt;
    font-weight: normal;
    color: #FFFFFF;
    text-align: center;
}

#page_gallery_nav {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 28px;
    right: 0;
}

.page_gallery_nav_item {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #0181c8;
    background-color: #FFFFFF;
    display: inline-block;
    vertical-align: top;
    margin: 0 2px;
    position: relative;
    cursor: pointer;
}

.current_nav {
    cursor: auto;
}

.current_nav:before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #0181c8;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
}

#servicios #page_gallery_nav {
    width: 47%;
}
/******************************************************************************************************************************************/

/********************************************************************footer****************************************************************/
footer {
    height: 142px;
    background-color: #0080c6;
    background-image: url(images/pattern.png);
    position: relative;
    z-index: 1;
}
/******************************************************************************************************************************************/

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

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

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

/************************************************************************responsive********************************************************/
@media screen and (max-width: 980px) {
    #logo img {
        width: 250px;
    }
    
    header nav ul li a {
        font-size: 8pt;
        padding: 0 15px;
    }
}

#menu {
    width: 83px;
    height: 80px;
    background-image: url(images/menu.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 25px auto;
    cursor: pointer;
    display: none;
    vertical-align: middle;
}

@media screen and (max-width: 750px) {
    body {
        background-color: #0080c6;
    }
    
    header {
        padding: 0 0 0 29px;
    }
    
    #logo img {
        width: 173px;
    }
    
    header nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.8);
        z-index: 4;
        left: 100%;
        -webkit-transition: left 0.3s ease-in-out;
        -moz-transition: left 0.3s ease-in-out;
        -ms-transition: left 0.3s ease-in-out;
        -o-transition: left 0.3s ease-in-out;
        transition: left 0.3s ease-in-out;
    }
    
    header nav:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
    
    header nav ul {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
    }
    
    header nav ul li {
        display: block;
        width: 100%;
        height: 40px;
        margin: 10px 0;
        border: 1px solid #FFFFFF;
    }
    
    header nav ul li a {
        padding: 0;
        width: 100%;
        line-height: 40px;
        color: #FFFFFF;
    }
    
    #menu {
        display: inline-block;
    }
    
    article {
        padding: 0 29px;
        height: auto;
        min-height: -webkit-calc(100% - 80px);
        min-height: -moz-calc(100% - 80px);
        min-height: -ms-calc(100% - 80px);
        min-height: -o-calc(100% - 80px);
        min-height: calc(100% - 80px);
        padding-bottom: 18px;
    }
    
    br {
        display: none;
    }
    
    #inicio .page_content, #inicio ul {
        width: 100%;
    }
    
    #inicio ul {
        height: 210px;
        margin-top: 30px;
    }
    
    #inicio .page_content {
        padding: 30px;
    }
    
    .aligncenter {
        margin: 0 auto 30px;
    }
    
    footer {
        background-size: 13px auto;
        height: 157px;
        margin-top: -157px!important;
    }
    
    #inicio .page_content p {
        font-size: 11pt;
    }
    
    #inicio ul li h3 {
        font-size: 10pt;
    }
    
    #inicio .page_content a {
        font-size: 9pt;
    }
    
    #quienes-somos .page_content {
        padding: 0;
    }
    
    #quienes-somos .page_content p {
        text-align: justify;
    }
    
    #quienes-somos {
        background-size: 50% auto;
        padding-bottom: 157px;
    }
    
    #servicios .page_content {
        height: 574px;
    }
    
    .service_image {
        width: 100%;
        height: 210px;
        margin-bottom: 28px;
    }
    
    .service_info {
        width: 100%;
        height: 336px;
        padding: 0 25px;
    }
    
    #contacto .page_content {
        padding: 0;
    }
    
    #servicios #page_gallery_nav {
        width: 100%;
    }
}
/******************************************************************************************************************************************/