.grises img,
a {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out
}

*,
.navbar {
    margin: 0
}

.sidebar-nav,
li {
    list-style: none
}

.sidebar-nav li a,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
a {
    text-decoration: none
}

* {
    padding: 0;
    -webkit-box-sizing: size-box;
    -moz-box-sizing: size-box;
    -ms-box-sizing: size-box;
    -o-box-sizing: size-box;
    box-sizing: size-box
}

a {
    transition: all .2s ease-in-out
}

body {
    background-color: #FFF;
    color: #4C4C4C;
    font-family: Raleway, sans-serif;
    font-size: 16px;
    height: 100%;
    width: 100%
}

img {
    max-width: 100%
}

nav#wrapper-h {
    background-color: #23292F;
    padding: 10px 0 0;
    position: relative;
    border-bottom: 2px solid #00DEFF;
    width: 100%;
    height: 100px;
    z-index: 999
}

.navbar-brand {
    padding: 0
}

.navbar-brand>img {
    width: 250px
}

.navbar-collapse {
    margin: 0 auto;
}

.navbar-default .navbar-nav>li>a {
    color: #0CF
}

.navbar-default .navbar-nav>li>a:active,
.navbar-default .navbar-nav>li>a:hover {
    background: #0E1217;
    color: #0CF
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus {
    background: #0E1217;
    color: #0075FF
}

.navbar-default .navbar-nav>.active>a {
    background: #0075FF;
    color: #FFF
}

.dropdown-menu>li>a {
    color: #00DEFF;
    padding: 15px;
    text-align: left
}

.dropdown-menu>li>a:hover {
    background: #0E1217;
    padding: 15px
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
    color: #00DEFF
}

li.dropdown-menu-contacto {
    width: 80em
}

li.nav-contacto div#nav-form,
li.nav-contacto div#nav-map,
li.nav-contacto div#nav-social {
    display: inline-block;
    vertical-align: top
}

li.nav-contacto div#nav-form {
    padding: 15px;
    width: 45%
}

li.li-tel-menu,
div.tel-menu-resp{
    display: block;
    float: none;
    background-color: #00DEFF;
    height: 45px;
    position: relative;
    top: 45px;
    padding: 10px 15px;
    font-size: 1.3em;
    text-align: center;
    width: 100%;
    max-width: 375px;
    margin: 0 0 0 auto;
}
div.tel-menu-resp{
    display: none;   
    position: absolute;
    top: 0px;
    padding: 20px;
    right: 0;
} 
li.li-tel-menu:hover,
div.tel-menu-resp:hover{
    background-color: #0AF;
}

span.tel-menu{
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
}
.tel-menu-grow{
    font-size: 1.5em;
}

div.tel-menu-resp > span.tel-menu{
    position: relative;
    left: 0;
    width: 100%;
    display: block;
    height: auto;
}

span.tel-menu > a{
    color: #FFF;
}

li.tel-stick-footer,
div.tel-stick-footer{
    position: fixed;
    top: 0px;
    right: 0;
    height: 65px;
    padding: 20px;
   
}

#loginForm input,
#loginForm label,
#loginForm textarea {
    color: #0CF;
    font-weight: lighter;
    margin: 5px 5px 0;
    width: 100%
}

#loginForm input,
#loginForm textarea {
    color: inherit;
    padding: 5px
}

#loginForm input[type=submit] {
    background: #0CF;
    border: none;
    color: #FFF;
    margin: 15px 5px
}

#loginForm input[type=submit]:hover {
    background: #0095BA
}

#loginForm textarea {
    height: 90px;
    resize: none;
    width: 100%
}

li.nav-contacto div#nav-map {
    padding: 20px 10px;
    width: 53%
}

li.nav-contacto div#nav-map iframe {
    height: 500px;
    width: 100%
}

li.nav-contacto div#nav-social {
    margin: 25px auto 0;
    padding: 0;
    width: 100%
}

div#nav-social span {
    color: #FFF;
    margin: 0 5px 0 0;
    vertical-align: middle
}

span.contacto-llamanos {
    font-size: 1.4em
}

.navbar-nav>li>.dropdown-menu {
    background: #23292F;
    position: absolute;
    top: 90%;
    width: auto;
}

section#ws-Agencia-txt,
section#ws-Exitos-txt {
    background: #F6F5F2;
    color: #222
}

section#ws-Agencia-txt {
    padding: 75px 0
}

.caso-exito,
section#ws-Exitos-txt {
    padding: 25px 0 50px;
    text-align: center
}

section#ws-Agencia-txt h2,
section#ws-Exitos-txt h2 {
    color: #0AF;
    font-size: 3em;
    font-weight: lighter;
    text-align: center
}

section#ws-Agencia-txt p.txt-blog {
    color: #333;
    font-size: 16px;
    font-weight: lighter;
    text-align: left;
    line-height: 24px;
}

section#ws-Agencia-txt h4 {
    color: #222;
    font-size: 2em;
    margin-top: 50px
}

section#ws-Exitos-txt h4 {
    color: #222;
    font-size: 2em
}

.caso-exito div img {
    margin: 25px auto;
    text-align: center;
}

.caso-exito div p {
    line-height: 1.5em
}

.caso-exito div p.title {
    font-size: 2em
}

.caso-exito div p.sub-title {
    font-size: 1.5em
}

section#ws-Hacemos-txt {
    background: #fff;
    color: #222;
    margin: 0 auto;
    padding: 0 0 25px
}

section#ws-Amigos-txt {
    background: #FFF;
    color: #222;
    padding: 25px 0
}

#wrapper {
    margin-left: 0;
    margin-right: 0;
    padding-right: 0
}

.cont-tiempo {
    color: #fff;
    height: 100px;
    opacity: .9;
    overflow: hidden;
    padding-bottom: 40px;
    padding-top: 10px
}

.cont-tiempo:hover {
    height: 250px;
    opacity: 1
}

.cont-tiempo p {
    font-size: 28px;
    font-weight: 700;
    padding: 15px 10px 5px;
    opacity: .9
}

.seccion-sm {
    margin-left: 15px;
    text-align: left;
    width: 85%
}

.cont-hacemos,
.tiempo {
    text-align: center;
    cursor: pointer
}

.tiempo {
    bottom: 0;
    color: rgba(255, 255, 255, .2);
    display: block;
    height: 130px;
    font-size: 8em;
    font-weight: bolder;
    position: absolute
}

.hacemos-figure {
    display: inline-block;
    height: 300px;
    margin: 0 auto
}

.hacemos-figure>span {
    bottom: 50px;
    color: #fff;
    font-size: 1.2em;
    left: 10%;
    margin: 0 auto
}

.cont-hacemos {
    min-height: 375px
}

.cont-hacemos-estrategias {
    background: #0AF
}

.cont-hacemos-seo {
    background: #0068FF
}

.cont-hacemos-social {
    background: #D30571
}

.cont-hacemos-desarrollo {
    background: #FFA300
}

.cont-hacemos-diseno {
    background: #00CFFF
}

.cont-hacemos-apps {
    background: #FF7300
}

.cont-hacemos-txt {
    color: #fff;
    left: 10%;
    opacity: 0;
    position: absolute;
    text-align: left;
    top: 0;
    width: 80%;
    z-index: -10
}

.cont-hacemos-txt h2,
.cont-hacemos-txt h3 {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    margin: 6px auto;
    text-align: left
}
.seccion-extra-btn{
    display: block;
    color: #FFF;
    text-align: center;
    max-width: 180px;
    padding: 10px 5px;
    width: 100%;
}

.color-google-adw{color: #4E7BBE;}
.color-bg-google-adw{background-color: #4E7BBE;}

.color-one{color: #0068FF;}
.color-bg-one{background-color: #0068FF;}

.color-coco{color: #00DEFF;}
.color-bg-coco{background-color: #00DEFF;}


.cliente-img,
.cont-hacemos-txt h1,
.pagination-cont {
    font-size: 18px;
    text-align: center
}

.cont-hacemos-txt a {
    color: #fff;
    margin: 0
}

.cliente-img {
    display: inline-block;
    margin: 10px auto 30px
}

section#nosotros {
    background: #0075FF;
    color: #fff
}

section#roomTeam,
section#roomTeam-graciasM {
    background: #00ACFF;
    color: #fff
}

section#blog-web-new {
    background: #87CCF8;
    color: #fff;
    padding-bottom: 5px;
    padding-top: 15px
}

section#apps,
section#blog-web,
section#desarrollo-web,
section#diseno-web,
section#estrategias,
section#posicionamiento,
section#redes-sociales {
    background: url(../images/iconos/icon-diseno-img.svg) 100% 50% no-repeat #00CFFF;
    background-size: 768px 768px;
    color: #fff;
    padding-bottom: 5px;
    padding-top: 15px
}

section#blog-web {
    background: url(../images/iconos/icon-blog-img.svg) 100% 50% no-repeat #87CCF8;
    background-size: 768px 768px
}

section#estrategias {
    background: url(../images/iconos/icon-estrategias-img.svg) 100% 50% no-repeat #0AF;
    background-size: 768px 768px
}

section#posicionamiento {
    background: url(../images/iconos/icon-posicionamiento-img.svg) 100% 50% no-repeat #0068FF;
    background-size: 768px 768px
}

section#redes-sociales {
    background: url(../images/iconos/icon-redesSociales-img.svg) 100% 50% no-repeat #D30571;
    background-size: 768px 768px
}

section#desarrollo-web {
    background: url(../images/iconos/icon-desarrollo-img.svg) 100% 50% no-repeat #FFA300;
    background-size: 768px 768px
}

section#apps {
    background: url(../images/iconos/icon-app-img.svg) 100% 50% no-repeat #FF7300;
    background-size: 768px 768px
}

section#apps img,
section#desarrollo-web img,
section#diseno-web img,
section#estrategias img,
section#posicionamiento img,
section#redes-sociales img {
    display: inline-block;
    height: 50%;
    left: -5%;
    opacity: .3;
    position: relative;
    top: 0;
    width: 50%
}

.seccion-intro-txt {
    margin: 50px auto;
    text-align: center
}

.seccion-intro-txt h1 {
    font-size: 42px
}

.seccion-intro-txt h3 {
    font-size: 32px
}

.seccion-intro-txt p {
    font-size: 26px
}

#nav-form,
#nav-map {
    vertical-align: top
}
.seccion-extra-wp{
    padding: 60px 20px;
    background: #FFF;
}

.seccion-extra-imagen{
    max-width: 480px;
    width: 100%;
}
.icon,
.img-blog-new img {
    display: inline-block;
    vertical-align: middle
}

#nav-map iframe {
    min-height: 420px;
    width: 100%
}

#footer-graciasM,
footer {
    background: #23292F;
    padding: 20px 10px
}

footer small,
footer small a {
    color: rgba(143, 143, 143, 1)
}

footer small a:active,
footer small a:focus,
footer small a:hover {
    color: rgba(75, 75, 75, 1)
}

#footer-graciasM {
    bottom: 0
}

.btn-sm {
    max-width: 375px;
    width: 85%
}

.btn-cotizar,
.btn-search {
    background: #05E28D;
    color: #fff;
    font-weight: bolder
}

.btn-cotizar:hover,
.btn-search:hover {
    background: #09B26D
}

.figure-desktop {
    max-width: 60%
}

.h1-txt {
    font-size: 24px
}

.h-slider {
    display: inline-block;
    font-size: 18px;
    margin: 0
}

.icon-gp {
    display: inline-block;
    position: absolute;
    right: 90px;
    top: 95px;
    width: 180px;
    z-index: 100
}

.imagen-blog {
    left: 0;
    max-height: 100%;
    position: absolute;
    top: 0;
    width: 100%
}

.img-blog-new img {
    max-height: 80px;
    max-width: 80px;
    width: 100%
}

.opacity {
    opacity: .7
}

.opacity:hover {
    opacity: 1
}

.pagination-cont {
    background: #F5F5F5
}

.panel-default {
    margin-right: 15px;
    padding-left: 0;
    padding-right: 0
}

.panel-default>.panel-heading {
    background-color: #87CCF8;
    color: #fff
}

.politicas-pb {
    text-align: justify
}

.politicas-pb li {
    margin: 10px auto
}

.grises img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: Gray();
    transition: all .2s ease-in-out
}

.grises img:hover {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: none
}

.icon {
    height: 60px;
    width: 60px
}

.icon:hover {
    opacity: .8
}

.i-facebook {
    background: url(../images/facebook.png) center no-repeat;
    background-size: cover
}

.i-twitter {
    background: url(../images/twitter.png) center no-repeat;
    background-size: cover
}

.i-google {
    background: url(../images/google.png) center no-repeat;
    background-size: cover
}
.adwords-footer {
    background: url(../images/google-adw-footer.png) center no-repeat;
    background-size: cover;
    border-radius: 5px;
    height: 30px;
    padding: 30px;
    width: 140px;
}
.adwords-footer a{
    display: block;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
}

.button-info:hover {
    opacity: .7
}

.transition {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.volteaY {
    opacity: 0;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.regresaY {
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
    z-index: 1
}

#modal-container,
.fadeNegro {
    z-index: 1001;
    position: fixed
}

#cerrarModal {
    background: #23292F;
    border: none;
    color: #01D4F4;
    font-size: 1.5em;
    font-weight: bolder;
    float: right;
    padding: 0 20px 5px
}

#formModal input,
#formModal label,
.msjRoomModal {
    display: block;
    font-size: 1em;
    font-weight: lighter
}

#elModal p {
    font-size: 1em
}

#formModal input,
#formModal label {
    margin: 0 auto;
    padding: 5px;
    width: 90%
}

#formModal input {
    color: #333
}

#formModal input[type=submit] {
    background: #049BE5;
    border: none;
    color: #fff;
    cursor: pointer;
    margin: 20px auto 0;
    padding: 10px 15px
}

#formModal input[type=submit]:hover {
    background: #008BC1
}

#modal-container {
    background: #23292F;
    color: #f7f7f7;
    top: 5%;
    left: 35%;
    max-width: 580px;
    padding: 20px 10px;
    width: 93%
}

#formModal>label#nombrePaqueteModal {
    text-align: center
}

#nombrePaqueteModal>h2 {
    margin-top: 0
}

.fadeNegro {
    background: rgba(000, 000, 000, .5);
    display: block;
    height: 100%;
    top: 0;
    width: 100%
}

.modal-body {
    padding: 5px 0;
    width: 100%
}

.msjRoomModal {
    color: #333;
    margin: 0 auto;
    padding: 5px;
    resize: none;
    width: 90%
}

a#menu-toggle {
    display: none
}

#wrapper {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

#wrapper.toggled {
    padding-right: 250px
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    right: 250px;
    width: 0;
    height: 100%;
    margin-right: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

#wrapper.toggled #sidebar-wrapper {
    background: #0E1217;
    box-shadow: -1px 0 1px #000;
    width: 250px
}

#page-content-wrapper {
    width: 100%
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px
}

.sidebar-nav li a {
    display: block;
    color: #0CF
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #0CF;
    background: #23292F
}

.sidebar-nav>.sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px
}

.sidebar-nav>.sidebar-brand a {
    color: #999
}

.sidebar-nav>.sidebar-brand a:hover {
    color: #fff;
    background: 0 0
}

.btn-secciones,
.btn-secciones:hover {
    background: rgba(000, 000, 000, .2)
}

.anio {
    font-size: 1.2em
}

.anio span {
    color: #00ACFF;
    display: block;
    font-size: 2.5em;
    font-weight: bolder;
    opacity: .5;
    right: 0
}

.btn-secciones {
    border: none;
    cursor: pointer;
    margin: 0 0 15px 15px;
    padding: 10px 15px;
    width: 85%;
    z-index: 1000
}

.btn-cotizar {
    background: #05E28D;
    color: #fff
}

.btn-cotizar:hover {
    background: #09B26D
}

.btn-desktop {
    margin: inherit
}

.c-apps {
    color: #FF7300
}

.c-diseno {
    color: #00CFFF
}

.c-desarrollo {
    color: #FFA300
}

.c-estrategia {
    color: #0AF
}

.c-posi {
    color: #0068FF
}

.c-redes {
    color: #D30571
}

.contenedor-seccion {
    margin: 0 auto 25px
}

.contenedor-seccion h1 {
    font-size: 26px;
    text-align: center
}

.contenedor-seccion h3 {
    font-size: 22px;
    margin: 5px auto
}

.contenedor-seccion .h1-txt {
    font-size: 1.15em;
    text-align: left
}

.contenedor-seccion figure {
    margin: 0 auto;
    max-width: 65%
}

.contenedor-seccion h3 {
    margin-left: 15px
}

.container {
    width: 90%
}

.cont-desk {
    vertical-align: top
}

.cont-desk img {
    width: 75%
}

.room-team {
    height: 320px
}

.room-team img {
    float: left;
    max-width: 82%
}

@media all and (max-width:1280px) {
    li.dropdown-menu-contacto {
        width: 50em
    }
    .seccion-intro-txt {
        margin: 25px auto;
        text-align: center
    }
    section#apps,
    section#blog-web,
    section#blog-web-new,
    section#desarrollo-web,
    section#diseno-web,
    section#estrategias,
    section#posicionamiento,
    section#redes-sociales {
        height: 400px
    }
    .img-blog-new span {
        display: inline-block;
        vertical-align: middle;
        width: 50%
    }
}

@media all and (max-width:1024px) {
    #modal-container {
        left: 15%;
        max-width: inherit;
        width: 75%
    }
}

@media all and (max-width:768px) {
    a#menu-toggle {
        display: inline-block;
        font-size: 1.4em;
        float: right;
        height: 60px;
        padding-right: 20px;
        width: 60px
    }

    
    div.tel-menu-resp{
        display: block;
        top: 100px;
        padding: 10px;
        right: 0; 
        height: auto;
    }
    div.tel-stick-footer{
        top: 0;
    }
    
    .btn-search,
    .navbar-brand>img {
        width: 180px
    }
    a#menu-toggle span {
        padding: 20px
    }
    .navbar-default .navbar-toggle {
        border: none;
        opacity: .7
    }
    .navbar-default .navbar-toggle:hover {
        background-color: transparent;
        opacity: 1
    }
    .navbar-header {
        float: inherit
    }
    .figure-desktop {
        margin: 0 auto;
        max-width: inherit
    }
    .h1-txt {
        font-size: 20px
    }
    .seccion-intro-txt {
        margin: 5px auto
    }
    .title-seccion {
        font-size: 28px
    }
    .btn-search {
        float: right
    }
    .cont-desk img {
        width: 100%
    }
    .icon-gp {
        right: 0;
        width: 150px
    }
}

@media (max-width:580px) {
    .seccion-intro-txt h1 {
        font-size: 32px;
        margin-top: 0
    }
    .seccion-intro-txt h3 {
        font-size: 28px;
        margin-bottom: 0;
        margin-top: 5px
    }
    .seccion-intro-txt p {
        font-size: 18px
    }
}

@media (max-width:375px) {
    #nombrePaqueteModal>h2,
    .title-seccion {
        font-size: 22px
    }
    .subtitle-seccion {
        font-size: 18px
    }
}

@media (max-width:320px) {
    .seccion-intro-txt h3 {
        font-size: 24px
    }
    #modal-container {
        top: 5%;
        left: 5%;
        max-width: inherit;
        padding: 20px 10px;
        position: fixed;
        width: 90%
    }
    #modal-container h3 {
        font-size: 20px
    }
}