html {
    background: #FFF url(../img/loading.gif) center 20em no-repeat;
}

body {
    display: none;
}

html, body {
    font-size: 16px;
    font-family: 'Segoe UI', sans-serif;
}

.agrupa-corpo,
.banner-principal,
.agrupa-banner,
.exb-ban-01,
.exb-ban-02,
.exb-ban-03,
.exb-ban-03-det,
.exb-ban-04,
.exb-ban-04-det,
.faixa-azul,
.gray,
.titulo,
.contextual,
.rodape {
    float: left;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Ubuntu Condensed',sans-serif;
}

.agrupa-corpo {
    background: #FFF;
    min-height: 100px;
}

/*  Menu  */
.menu-topo {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 4.688em;
    background: url(../img/bg-menu.png) left top repeat-x;
    background-size: auto 100%;
    z-index: 50;
    /*position: relative;*/
}

    .menu-topo a {
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }
/*  Logotipo  */
.logo-zyoncore {
    float: left;
    width: 210px;
    height: 70px;
    overflow: hidden;
    text-indent: -9999px;
    background: url(../img/logo-zyoncore.png) left top no-repeat;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

    .logo-zyoncore:hover {
        -webkit-transform: scale(.98);
        -moz-transform: scale(.98);
        -ms-transform: scale(.98);
        -o-transform: scale(.98);
        transform: scale(.98);
    }
/*  Menu a direita  */
.menu-topo ul {
    float: right;
    width: 338px;
    height: 70px;
}

.menu-topo li {
    float: left;
    list-style: none;
    position: relative;
}

.submenu-seta {
    margin: -3.5em 0em 0em 8em;
}

.submenu-seta-plus {
    margin: -3.5em 0em 0em 9em;
}

.submenu-seta-esquerda {
    margin: -3.5em 0em 0em 0em;
}

.menu-topo li a {
    float: left;
    color: #999;
    width: 6em;
    letter-spacing: 0.050em;
    line-height: 4.375em;
    font-size: 1em;
    font-family: 'Ubuntu Condensed', sans-serif;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
}

    .menu-topo li a.plus {
        width: 3.125em;
        overflow: hidden;
        text-indent: -9999px;
        background: url(../img/btn-plus.png) 1em 1.628em no-repeat;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    .menu-topo li a:hover {
        color: #25BEDE;
        text-shadow: 0em 0em 1em rgba(35,190,220,.5);
    }

    .menu-topo li a.plus:hover {
        -webkit-transform: scale(.90);
        -moz-transform: scale(.90);
        -ms-transform: scale(.90);
        -o-transform: scale(.90);
        transform: scale(.90);
    }

.menu-topo li:hover > ul.submenu {
    opacity: 1;
    visibility: visible;
    margin: 0em;
}

.submenu {
    width: 12em !important;
    height: auto !important;
    min-height: 1em;
    margin: 1em 0em 0em 0em;
    padding: .5em 1em;
    position: absolute;
    top: 3.5em;
    right: .5em;
    z-index: 999;
    background: rgba(255,255,255,.95);
    box-shadow: 0em 0em .5em rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.menu-topo li:hover > ul.submenu .teste {
    margin-top: 67px;
    margin-right: -58px;
}

.submenu li {
    float: none !important;
    margin: 0em 0em 0em 0em;
    padding: 0em;
    line-height: none;
    display: block;
}

    .submenu li:first-child {
        height: .1em;
    }

.submenu a {
    float: right !important;
    width: 12em !important;
    line-height: 2.25em !important;
    font-size: .85em !important;
    text-align: left !important;
}

/*  Banner Principal  */
.banner-principal {
    height: 33.125em;
    margin-top: 4.375em;
    background: #FFF;
    position: relative;
}

.agrupa-banner {
    height: 33.125em;
    overflow: hidden;
}

.exb-ban-00,
.exb-ban-01,
.exb-ban-02,
.exb-ban-03,
.exb-ban-03-det,
.exb-ban-04,
.exb-ban-04-det {
    height: 33.125em;
    text-align: center;
}

/*.exb-ban-00 {
    background: #10BC01 url(../img/banner/00.jpg) center top no-repeat;
}*/

.exb-ban-01 {
    background: #001C37 url(../img/banner/01.jpg) center top no-repeat;
}

.exb-ban-02 {
    /* background: #6B6156 url(../img/banner/02.jpg) center top no-repeat; */
    background: #6B6156 url(../img/banner/02.jpg) center top no-repeat;
}

.exb-ban-03 {
    background: #212121 url(../img/banner/degrade-banner-03.png) center top repeat-x;
}

.exb-ban-03-det {
    /* background: url(../img/banner/03b.jpg) center top no-repeat; */
    background: url(../img/banner/03.jpg) center top no-repeat;
}

/*.exb-ban-04 {
    background: #212121 url(../img/banner/degrade-banner-04.png) center top repeat-x;
}

.exb-ban-04-det {
    background: url(../img/banner/01.jpg) center top no-repeat;
}*/

.exb-ban-00 a,
.exb-ban-01 a,
.exb-ban-02 a,
.exb-ban-03 a,
.exb-ban-04 a {
    float: left;
    width: inherit;
    height: 33.125em;
    position: relative;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.msg-banner {
    position: absolute;
    left: 1em;
    bottom: 7em;
    min-width: 30.875em;
    min-height: 2.563em;
    padding: .5em;
    text-align: left;
}

    .msg-banner p {
        font-family: 'Ubuntu Condensed',sans-serif;
        font-size: 2.25em;
        font-weight: 400;
        line-height: 1.3em;
        margin-bottom: 0em;
        text-shadow: .03em .03em .03em rgba(0,0,0,.5);
    }
/*  Banner Módulos  */
.exb-ban-01 h3 {
    margin-top: 38%;
    padding: .5em 0em;
    color: #FFF;
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1.5em;
    text-shadow: .05em .05em .1em rgba(0,0,0,.5);
    background: rgba(0,20,40,.85);
}

    .exb-ban-01 h3 strong {
        font-size: 1.1em;
        font-weight: 400;
    }
/*  Banner On-line  */
.exb-ban-02 a {
    /* background: url(../img/banner/bg-ban02.png) right 1em no-repeat; */
    background-size: auto 90%;
}

    .exb-ban-02 a span {
        position: absolute;
        left: 0em;
        top: 3em;
        width: 11em;
        height: 11em;
        overflow: hidden;
        text-indent: -9999px;
        /* background: rgba(0,146,67,.85) url(../img/logo-online-big.png) 0em 0em no-repeat; */
        background-size: 100% auto;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    /* .exb-ban-02 a:hover span { */
    /* box-shadow: 0em 0em 1em rgba(0,146,67,.85); */
    /* -webkit-transform: scale(.96); */
    /* -moz-transform: scale(.96); */
    /* -ms-transform: scale(.96); */
    /* -o-transform: scale(.96); */
    /* transform: scale(.96); */
    /* } */

    .exb-ban-02 a div.msg-banner {
        min-width: 24em;
        background: rgba(0,146,67,.85);
        -webkit-transform: skewX(-20deg);
        -moz-transform: skewX(-20deg);
        -ms-transform: skewX(-20deg);
        -o-transform: skewX(-20deg);
        transform: skewX(-20deg);
    }

    .exb-ban-02 a:hover div.msg-banner {
        -webkit-transform: translateX(1em) skewX(-20deg);
        -moz-transform: translateX(1em) skewX(-20deg);
        -ms-transform: translateX(1em) skewX(-20deg);
        -o-transform: translateX(1em) skewX(-20deg);
        transform: translateX(1em) skewX(-20deg);
    }

    .exb-ban-02 a div.msg-banner p {
        color: #FFF;
        font-size: 1.75em;
        text-indent: 1em;
        -webkit-transform: skewX(20deg);
        -moz-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
        -o-transform: skewX(20deg);
        transform: skewX(20deg);
    }

/*  Banner Loja  */
.exb-ban-03 a {
}

    .exb-ban-03 a div.guria-b3 {
        position: absolute;
        width: 18.125em;
        height: 30em;
        /* background: url(../img/banner/03-guria.png) left bottom no-repeat; */
        background-size: auto 100%;
        left: 4em;
        bottom: 0em;
        z-index: 2;
        /*animation-name: chega-guria;
					animation-duration: 2.5s;
					animation-delay: 6.95s;
					}
					@keyframes chega-guria{
					0% {
						opacity: 0;
						left: 14em;
						}
					100% {
						opacity: 1;
						left:4em;
					}*/
    }

    .exb-ban-03 a:hover div.guria-b3 {
        -webkit-transform: translateX(1em);
        -moz-transform: translateX(1em);
        -ms-transform: translateX(1em);
        -o-transform: translateX(1em);
        transform: translateX(1em);
    }

    .exb-ban-03 a div.msg-b3 {
        position: absolute;
        bottom: 8em;
        right: 1em;
        min-width: 18.125em;
        max-width: 30em;
        min-height: 1em;
        padding: 1.5em;
        background: rgba(0,0,0,.8);
        z-index: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    .exb-ban-03 a:hover div.msg-b3 {
        -webkit-transform: scale(.95);
        -moz-transform: scale(.95);
        -ms-transform: scale(.95);
        -o-transform: scale(.95);
        transform: scale(.95);
    }

    .exb-ban-03 a div.msg-b3 p {
        color: #FFF;
        font-size: 1.6em;
        line-height: 2em;
        font-weight: 400;
        font-family: 'Ubuntu Condensed',sans-serif;
        text-shadow: .05em .05em .1em rgba(0,0,0,.5);
    }

    .exb-ban-03 a:hover div.msg-b3 p {
        text-shadow: 0em 0em 1em rgba(255,255,255,.75);
    }
/*  Banner Fotografo  */
.exb-ban-04 a {
}

    .exb-ban-04 a div.guria-b4 {
        position: absolute;
        width: 22.5em;
        height: 30em;
        /*background: url(../img/banner/04-guria.png) left bottom no-repeat;*/
        background-size: auto 100%;
        right: 0em;
        bottom: 0em;
    }

    /*.exb-ban-04 a:hover div.guria-b4 {
        -webkit-transform: translateX(-1em);
        -moz-transform: translateX(-1em);
        -ms-transform: translateX(-1em);
        -o-transform: translateX(-1em);
        transform: translateX(-1em);
    }*/

    .exb-ban-04 a span {
        position: absolute;
        left: 0em;
        top: 4em;
        width: 11em;
        height: 11em;
        overflow: hidden;
        text-indent: -9999px;
        background: rgba(214,166,20,.85) /*url(../img/logo-fotografo-big.png) 0em 0em no-repeat;*/
        background-size: 100% auto;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    .exb-ban-04 a:hover span {
        box-shadow: 0em 0em 1em rgba(214,166,20,.85);
        -webkit-transform: scale(.96);
        -moz-transform: scale(.96);
        -ms-transform: scale(.96);
        -o-transform: scale(.96);
        transform: scale(.96);
    }

    .exb-ban-04 a div.msg-banner {
        z-index: 2;
        background: rgba(214,166,20,.85);
        -webkit-transform: skewX(-20deg);
        -moz-transform: skewX(-20deg);
        -ms-transform: skewX(-20deg);
        -o-transform: skewX(-20deg);
        transform: skewX(-20deg);
    }

    .exb-ban-04 a:hover div.msg-banner {
        -webkit-transform: translateX(1em) skewX(-20deg);
        -moz-transform: translateX(1em) skewX(-20deg);
        -ms-transform: translateX(1em) skewX(-20deg);
        -o-transform: translateX(1em) skewX(-20deg);
        transform: translateX(1em) skewX(-20deg);
    }

    .exb-ban-04 a div.msg-banner p {
        color: #FFF;
        text-indent: 1em;
        font-size: 1.5em;
        -webkit-transform: skewX(-20deg);
        -moz-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
        -o-transform: skewX(20deg);
        transform: skewX(20deg);
    }

    /*  transition para todos os banners  */
    .exb-ban-02 a div.msg-banner,
    .exb-ban-02 a span,
    .exb-ban-03 a div.msg-b3,
    .exb-ban-03 a div.guria-b3,
    .exb-ban-04 a span,
    .exb-ban-04 a div.guria-b4,
    .exb-ban-04 a div.msg-banner {
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }

.btn-more {
    position: absolute;
    left: 50%;
    bottom: 0em;
    margin: 0em 0em 0em -3.255em;
    width: 6.563em;
    height: 2.188em;
    overflow: hidden;
    text-indent: -999px;
    background: url(../img/btn-more.png) center bottom no-repeat;
    background-size: 100% auto;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

    .btn-more:hover {
        margin: 0em 0em -.25em -3.255em;
    }

/*  Página Principal  */
.frase-pos-banner {
}

    .frase-pos-banner h1 {
        color: #2C6886;
        font-size: 3.125em;
        padding-top: 1em;
    }

    .frase-pos-banner p {
        color: #374550;
        font-size: 1em;
        padding-bottom: 1em;
    }

.faixa-azul {
    background: #25BEDE;
    min-height: 6.250em;
    padding: 1em 0em;
    margin: 1em 0em;
    -webkit-transform: skewY(-.75deg);
    -moz-transform: skewY(-.75deg);
    -ms-transform: skewY(-.75deg);
    -o-transform: skewY(-.75deg);
    transform: skewY(-.75deg);
}

    .faixa-azul h2 {
        color: #FFF;
        font-size: 1.875em;
        -webkit-transform: skewY(.75deg);
        -moz-transform: skewY(.75deg);
        -ms-transform: skewY(.75deg);
        -o-transform: skewY(.75deg);
        transform: skewY(.75deg);
    }

.sete-solucoes {
}

    .sete-solucoes h4 {
        color: #A4A4A4;
        font-size: 2.188em;
        padding: 1.01em 0em .5em 0em;
    }

        .sete-solucoes h4 strong {
            color: #2C6886;
            font-size: 1.5em;
            font-weight: 400;
        }

/*  Exibe modulos na Inicial  */
.exibe-ini-modulos {
    float: left;
    width: 100%;
    min-height: 1em;
}

.ini-modulos-big a,
.ini-modulos a {
    position: absolute;
    left: 0em;
    top: 0em;
    color: #FFF;
    text-align: center;
    overflow: hidden;
    z-index: 0;
    -webkit-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -ms-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear;
}

    .ini-modulos-big a:hover,
    .ini-modulos a:hover {
        z-index: 1;
    }

    .ini-modulos-big a span,
    .ini-modulos a span {
        float: left;
        overflow: hidden;
        text-indent: -9999px;
        -webkit-transition: all .25s linear;
        -moz-transition: all .25s linear;
        -ms-transition: all .25s linear;
        -o-transition: all .25s linear;
        transition: all .25s linear;
    }

.ini-modulos-big {
    float: left;
    width: 50%;
    height: 46.875em;
    position: relative;
}

    .ini-modulos-big a {
        width: 100%;
        height: 46.875em;
        background: #004F9B url(../img/img-profissional.jpg) center 0em no-repeat;
        background-size: auto 100%;
    }

        .ini-modulos-big a:hover {
            box-shadow: 0em 0em 1em rgba(0,0,0,.75);
            background-position: center -1em;
        }

.alinha-logo-1 {
    width: 11em;
    margin: 1em auto;
}

.ini-modulos-big a span {
    width: 11em;
    height: 11em;
    background: rgba(0,32,103,.9) url(../img/logo-profissional-big.png) 0px 0px no-repeat;
    background-size: 100% auto;
    margin: 11em 0em 2em 0em;
}

.ini-modulos-big a p {
    float: left;
    width: 96%;
    line-height: 1.5em;
    font-size: 1.375em;
    padding: 0% 2%;
    text-shadow: .05em .05em .05em rgba(0,0,0,.75);
}

.ini-modulos-big a em {
    line-height: 1.5em;
    font-size: .8em;
}

.ini-modulos {
    float: left;
    width: 25%;
    height: 23em;
    position: relative;
}

    .ini-modulos a {
        width: 100%;
        height: 23.89em;
    }

        .ini-modulos a.btn01 {
            background: #007F8F;
        }

        .ini-modulos a.btn02 {
            background: #008B2C;
        }

        .ini-modulos a.btn03 {
            background: #009657;
        }

        .ini-modulos a.btn04 {
            background: #D5B315;
        }

        .ini-modulos a.btn05 {
            background: #CB0200;
        }

        .ini-modulos a.btn06 {
            background: #520061;
        }

        .ini-modulos a.btn01:hover {
            box-shadow: 0em 0em 1em rgba(0,0,0,.75);
        }

        .ini-modulos a.btn02:hover {
            box-shadow: 0em 0em 1em rgba(0,0,0,.75);
        }

        .ini-modulos a.btn03:hover {
            box-shadow: 0em 0em 1em rgba(0,0,0,.75);
        }

        .ini-modulos a.btn04:hover {
            box-shadow: 0em 0em 1em rgba(0,0,0,.75);
        }

        .ini-modulos a.btn05:hover {
            box-shadow: 0em 0em 1em rgba(0,0,0,.75);
        }

        .ini-modulos a.btn06:hover {
            box-shadow: 0em 0em 1em rgba(0,0,0,.75);
        }

.alinha-logo-2 {
    width: 6.375em;
    margin: 1em auto;
}

.ini-modulos a span {
    width: 6.375em;
    height: 6.375em;
    margin-top: 3em;
    margin-bottom: 1em;
}

.ini-modulos a.btn01 span {
    background: rgba(0,55,70,.9) url(../img/logo-fotolivro.png) 0px 0px no-repeat;
    background-size: 100% auto;
}

.ini-modulos a.btn02 span {
    background: rgba(0,65,7,.9) url(../img/logo-online.png) 0px 0px no-repeat;
    background-size: 100% auto;
}

.ini-modulos a.btn03 span {
    background: rgba(0,76,26,.9) url(../img/logo-fotoproduto.png) 0px 0px no-repeat;
    background-size: 100% auto;
}

.ini-modulos a.btn04 span {
    background: rgba(154,109,1,.9) url(../img/logo-fotografo.png) 0px 0px no-repeat;
    background-size: 100% auto;
}

.ini-modulos a.btn05 span {
    background: rgba(123,0,0,.9) url(../img/logo-atendimento.png) 0px 0px no-repeat;
    background-size: 100% auto;
}

.ini-modulos a.btn06 span {
    background: rgba(56,0,66,.9) url(../img/logo-ecommerce.png) 0px 0px no-repeat;
    background-size: 100% auto;
}

.ini-modulos-big a:hover span,
.ini-modulos a:hover span {
    box-shadow: 0px 0px 20px rgba(0,0,0,.55);
}

.ini-modulos a p {
    float: left;
    width: 100%;
    font-size: 1.150em;
    line-height: 1.5em;
    padding: 1% 2%;
    text-align: center;
    text-shadow: .05em .05em .05em rgba(0,0,0,.75);
}

/*  Paginas Internas  */
.titulo {
    height: 11.875em;
    padding-top: 5.6em;
}

    .titulo h1 {
        font-size: 3em;
        text-shadow: 0em .05em .05em rgba(0,0,0,.3);
    }
/*  Atendimento  */
.t1 {
    background: #DD0000 url(../img/bg-tit-atendimento.jpg) center top no-repeat;
}

    .t1 h1 {
        color: #FFF;
    }
/*  E-commerce  */
.t2 {
    background: #600070 url(../img/bg-tit-ecommerce.jpg) center top no-repeat;
}

    .t2 h1 {
        color: #FFF;
    }
/*  Fotografo  */
.t3 {
    background: #D5B315 url(../img/bg-tit-fotografo.jpg) center top no-repeat;
}

    .t3 h1 {
        color: #FFF; /*  #574626  */
    }
/*  Fotolivro  */
.t4 {
    background: #007F8F url(../img/bg-tit-fotolivro.jpg) center top no-repeat;
}

    .t4 h1 {
        color: #FFF;
    }
/*  Fotoproduto  */
.t5 {
    background: #009657 url(../img/bg-tit-fotoproduto.jpg) center top no-repeat;
}

    .t5 h1 {
        color: #FFF;
    }
/*  Online  */
.t6 {
    background: #008B2C url(../img/bg-tit-online.jpg) center top no-repeat;
}

    .t6 h1 {
        color: #FFF;
    }
/*  Profissional  */
.t7 {
    background: #004F9B url(../img/bg-tit-profissional.jpg) center top no-repeat;
}

    .t7 h1 {
        color: #FFF;
    }
/*  Cinza  */
.t8 {
    background: #F0F0F0 url(../img/bg-gray.jpg) center top no-repeat;
}

    .t8 h1 {
        color: #2C6886;
        text-shadow: none;
    }

.interno {
    padding: 6em 0em 1em 0em;
}

    .interno p {
        color: #374550;
        font-size: 1em;
        padding-bottom: 1em;
    }

    .interno h3 {
        color: #004F9B;
        font-size: 2.5em;
    }

    .interno h4 {
        color: #25BEDE;
        font-size: 1.85em;
    }

.mission {
}

    .mission h4 {
        color: #25BEDE;
        font-size: 2em;
    }

    .mission p {
        font-size: .9em;
    }

/*  Exibe Modulos  */
.exibe-telas {
    display: block;
    margin: 1.5em 0em;
    min-height: 1em;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: .25em;
    cursor: pointer;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

    .exibe-telas:hover {
        box-shadow: 0em 1em .5em rgba(0,0,0,.1);
        -webkit-transform: translate(0em,-.5em);
        -moz-transform: translate(0em,-.5em);
        -ms-transform: translate(0em,-.5em);
        -o-transform: translate(0em,-.5em);
        transform: translate(0em,-.5em);
    }

    .exibe-telas span {
        position: absolute;
        left: 0em;
        top: 0em;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.0) url(../img/zoom-icon.png) center 100em no-repeat;
        z-index: 5;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }

        .exibe-telas span:hover {
            top: 0em;
            background: rgba(0,0,0,.35) url(../img/zoom-icon.png) center 45% no-repeat;
        }

    .exibe-telas img {
        width: 100%;
        height: auto;
    }

.exibe-telas-descricao {
    text-align: center;
    margin: 1em 0em;
}

    .exibe-telas-descricao .exibe-telas {
        margin: 0;
    }

    .exibe-telas-descricao .descricao-tela {
        margin-top: 0.8em;
        display: block;
    }

.exibe-modulos {
}

.submenu-modulos {
    width: 100% !important;
    max-width: 100% !important;
}

    .submenu-modulos li {
        float: left;
        width: 100%;
        list-style: none;
        border-top: 1px solid #DFDFDF;
    }

        .submenu-modulos li:first-child {
            border-top: none;
        }

    .submenu-modulos a {
        float: left;
        width: 100%;
        height: 3.125em;
        font-family: 'Ubuntu Condensed',sans-serif;
        background: url(../img/icons-submenu-off.png) no-repeat;
        background-size: 3.125em;
        font-size: 1.1em;
        line-height: 3.125em;
        text-indent: 3.5em;
        outline: none;
        -webkit-transition: all .25s linear;
        -moz-transition: all .25s linear;
        -ms-transition: all .25s linear;
        -o-transition: all .25s linear;
        transition: all .25s linear;
    }

        .submenu-modulos a:hover {
            background: url(../img/icons-submenu-on.png) no-repeat;
            background-size: 3.125em;
            text-indent: 3.75em;
        }

        .submenu-modulos a.btn-01 {
            background-position: 0em 0em;
        }

            .submenu-modulos a.btn-01:hover {
                background-position: 0em 0em;
            }

        .submenu-modulos a.btn-02 {
            background-position: 0em -3.125em;
        }

            .submenu-modulos a.btn-02:hover {
                background-position: 0em -3.125em;
            }

        .submenu-modulos a.btn-03 {
            background-position: 0em -6.25em;
        }

            .submenu-modulos a.btn-03:hover {
                background-position: 0em -6.25em;
            }

        .submenu-modulos a.btn-04 {
            background-position: 0em -9.375em;
        }

            .submenu-modulos a.btn-04:hover {
                background-position: 0em -9.375em;
            }

        .submenu-modulos a.btn-05 {
            background-position: 0em -12.5em;
        }

            .submenu-modulos a.btn-05:hover {
                background-position: 0em -12.5em;
            }

        .submenu-modulos a.btn-06 {
            background-position: 0em -15.625em;
        }

            .submenu-modulos a.btn-06:hover {
                background-position: 0em -15.625em;
            }

        .submenu-modulos a.btn-07 {
            background-position: 0em -18.75em;
        }

            .submenu-modulos a.btn-07:hover {
                background-position: 0em -18.75em;
            }

.sigi-recursos h5 {
    font-size: 1.75em;
}

.sigi-recursos li,
.sigi-recursos p {
    line-height: 1.75em;
    color: #666;
    padding-bottom: .5em;
}

/*  SIGIs  */
.exibe-sigi {
    cursor: pointer;
    min-height: 10.125rem;
    padding: .75em;
    margin-bottom: .25em;
    text-align: center;
    border-radius: .35em;
}

    .exibe-sigi h5 {
        font-size: 1.5em;
        line-height: 1.25em;
        color: #FFF;
        text-shadow: .05em .05em .05em rgba(0,0,0,.75);
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }

.exibe-sigi-conteudo {
    display: block;
    margin-bottom: 1.5em;
}

    .exibe-sigi-conteudo .btns-downloads-remoto {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
    }

        .exibe-sigi-conteudo .btns-downloads-remoto .btn-download {
            width: 50%;
            border: 1px solid #000;
            border-radius: 5px;
            padding: 0px 3px;
            margin: 0 5px;
            height: 60px;
            justify-content: center;
            align-items: center;
            display: flex;
        }

    .exibe-sigi-conteudo .btn-chat-online p {
        color: #fff;
    }
        .exibe-sigi-conteudo .btn-chat-online p:hover {
            text-shadow: 0em 0em .5em rgba(255,255,255,.75);
        }

    .exibe-sigi-conteudo .btn-email {
        width: 90%;
        /*border: 1px solid #000;*/
        border-radius: 5px;
        padding: 0px 3px;
        margin: 0 auto;
        height: 60px;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .exibe-sigi-conteudo a,
    .exibe-sigi-conteudo p {
        color: #FFF;
        text-shadow: .05em .05em .05em rgba(0,0,0,.75);
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
        width: 100%;
        height: 100%;
        align-items: center;
        display: flex;
        justify-content: center;
    }

        .exibe-sigi-conteudo a:hover,
        .exibe-sigi-conteudo p:hover {
            text-shadow: 0em 0em .5em rgba(255,255,255,.75);
        }

    /*.exibe-sigi-conteudo p {
        color: #fff;
        text-shadow: .05em .05em .05em rgba(0,0,0,.75);
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }*/

.bg-modulo-01 {
    background: #004F9B url(../img/bg-sigi-profissional.jpg) right bottom no-repeat;
}

.bg-modulo-02 {
    background: #007F8F url(../img/bg-sigi-fotolivro.jpg) right bottom no-repeat;
}

.bg-modulo-03 {
    background: #008B2C url(../img/bg-sigi-online.jpg) right bottom no-repeat;
}

.bg-modulo-04 {
    background: #009657 url(../img/bg-sigi-fotoproduto.jpg) right bottom no-repeat;
}

.bg-modulo-05 {
    background: #D5B315 url(../img/bg-sigi-fotografo.jpg) right bottom no-repeat;
}

.bg-modulo-06 {
    background: #CB0200 url(../img/bg-sigi-atendimento.jpg) right bottom no-repeat;
}

.bg-modulo-07 {
    background: #520061 url(../img/bg-sigi-ecommerce.jpg) right bottom no-repeat;
}

/*  Profissional  */
.sg-01 h4 {
    color: #25BEDE;
}

.sg-01 h5 {
    color: #004F9B;
}

.sg-01 a {
    color: #004F9B;
}

    .sg-01 a:hover {
        color: #25BEDE;
    }

/*  Fotolivro  */
.sg-02 h4 {
    color: #01ABBE;
}

.sg-02 h5 {
    color: #017B8A;
}

.sg-02 a {
    color: #017B8A;
}

    .sg-02 a:hover {
        color: #01ABBE;
    }

/*  On-line  */
.sg-03 h4 {
    color: #01A334;
}

.sg-03 h5 {
    color: #016B24;
}

.sg-03 a {
    color: #016B24;
}

    .sg-03 a:hover {
        color: #01A334;
    }

/*  Fotoproduto  */
.sg-04 h4 {
    color: #01A661;
}

.sg-04 h5 {
    color: #02864E;
}

.sg-04 a {
    color: #02864E;
}

    .sg-04 a:hover {
        color: #01A661;
    }

/*  Fotógrafo  */
.sg-05 h4 {
    color: #E9A00A;
}

.sg-05 h5 {
    color: #C88D15;
}

.sg-05 a {
    color: #8C6837;
}

    .sg-05 a:hover {
        color: #F8BF49;
    }

/*  Atendimento  */
.sg-06 h4 {
    color: #F02020;
}

.sg-06 h5 {
    color: #AB0303;
}

.sg-06 a {
    color: #AB0303;
}

    .sg-06 a:hover {
        color: #F02020;
    }

/*  E-commerce  */
.sg-07 h4 {
    color: #9B01B6;
}

.sg-07 h5 {
    color: #650176;
}

.sg-07 a {
    color: #650176;
}

    .sg-07 a:hover {
        color: #9B01B6;
    }

/*  Clientes  */
.exibe-clientes {
    padding: 2em 0em;
}

    .exibe-clientes a {
        float: left;
        width: 100%;
        min-height: 1em;
        color: #2C6886;
        font-family: 'Ubuntu Condensed',sans-serif;
        font-size: 1.25em;
        text-align: center;
        margin-bottom: 2em;
        outline: none;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }

        .exibe-clientes a:hover {
            color: #25BEDE;
        }

.thumb-site {
    position: relative;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

    .thumb-site:hover {
        box-shadow: 0em .5em .5em rgba(0,0,0,.1);
        -webkit-transform: translate(0em,-.5em);
        -moz-transform: translate(0em,-.5em);
        -ms-transform: translate(0em,-.5em);
        -o-transform: translate(0em,-.5em);
        transform: translate(0em,-.5em);
    }

    .thumb-site span {
        position: absolute;
        left: 0em;
        top: 0em;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.0) url(../img/icone-nova-tela.png) center 100em no-repeat;
        z-index: 5;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }

        .thumb-site span:hover {
            top: 0em;
            background: rgba(0,0,0,.15) url(../img/icone-nova-tela.png) center 45% no-repeat;
        }

    .thumb-site img {
        width: 100%;
        height: auto;
        border: none;
        margin-bottom: 1em;
    }


/*  Dúvidas Frequentes  */
.duvidas-frequentes {
}

.submenu-duvidas {
    width: 100% !important;
    max-width: 100% !important;
}

    .submenu-duvidas li {
        float: left;
        width: 100%;
        list-style: none;
        border-top: 1px solid #DFDFDF;
    }

        .submenu-duvidas li:first-child {
            border-top: none;
        }

    .submenu-duvidas a {
        float: left;
        width: 100%;
        height: 3.125em;
        font-family: 'Ubuntu Condensed',sans-serif;
        background: url(../img/icons-submenu-duvidas-off.png) no-repeat;
        background-size: 3.125em;
        font-size: 1.1em;
        line-height: 3.125em;
        text-indent: 3.5em;
        outline: none;
        -webkit-transition: all .25s linear;
        -moz-transition: all .25s linear;
        -ms-transition: all .25s linear;
        -o-transition: all .25s linear;
        transition: all .25s linear;
    }

        .submenu-duvidas a:hover {
            background: url(../img/icons-submenu-duvidas-on.png) no-repeat;
            background-size: 3.125em;
            text-indent: 3.75em;
        }

        .submenu-duvidas a.btn-01 {
            background-position: 0em 0em;
        }

            .submenu-duvidas a.btn-01:hover {
                background-position: 0em 0em;
            }

        .submenu-duvidas a.btn-02 {
            background-position: 0em -3.125em;
        }

            .submenu-duvidas a.btn-02:hover {
                background-position: 0em -3.125em;
            }

        .submenu-duvidas a.btn-03 {
            background-position: 0em -6.25em;
        }

            .submenu-duvidas a.btn-03:hover {
                background-position: 0em -6.25em;
            }

        .submenu-duvidas a.btn-04 {
            background-position: 0em -9.375em;
        }

            .submenu-duvidas a.btn-04:hover {
                background-position: 0em -9.375em;
            }

        .submenu-duvidas a.btn-05 {
            background-position: 0em -12.5em;
        }

            .submenu-duvidas a.btn-05:hover {
                background-position: 0em -12.5em;
            }

        .submenu-duvidas a.btn-06 {
            background-position: 0em -15.625em;
        }

            .submenu-duvidas a.btn-06:hover {
                background-position: 0em -15.625em;
            }

        .submenu-duvidas a.btn-07 {
            background-position: 0em -18.75em;
        }

            .submenu-duvidas a.btn-07:hover {
                background-position: 0em -18.75em;
            }

        .submenu-duvidas a.btn-08 {
            background-position: 0em -21.875em;
        }

            .submenu-duvidas a.btn-08:hover {
                background-position: 0em -21.875em;
            }

        .submenu-duvidas a.btn-09 {
            background-position: 0em -25em;
        }

            .submenu-duvidas a.btn-09:hover {
                background-position: 0em -25em;
            }

        .submenu-duvidas a.btn-10 {
            background-position: 0em -28.125em;
        }

            .submenu-duvidas a.btn-10:hover {
                background-position: 0em -28.125em;
            }

        .submenu-duvidas a.btn-11 {
            background-position: 0em -31.25em;
        }

            .submenu-duvidas a.btn-11:hover {
                background-position: 0em -31.25em;
            }

.conteudo-duvidas {
}

    .conteudo-duvidas h5 {
        font-size: 1.75em;
        color: #004F9B;
    }

    .conteudo-duvidas li,
    .conteudo-duvidas p {
        line-height: 1.75em;
        color: #666;
        padding-bottom: .5em;
    }

.exibe-duvidas {
    min-height: 1em;
}

    .exibe-duvidas h6 {
        color: #25BEDE;
        font-size: 1.20em;
        line-height: 1.75em;
        border-bottom: 1px solid #DDD;
        margin: 1em 0em 0em 0em;
        cursor: pointer;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }

        .exibe-duvidas h6:hover {
            text-indent: .5em;
        }

.exibe-duvidas-conteudo {
    background: #EEE;
    display: none;
    min-height: .1em;
    padding: .5em;
}

    .exibe-duvidas-conteudo p {
        padding: 0em !important;
        font-size: .90em;
    }

/* Templates */
#templates .interno p {
    text-align: justify;
    padding-top: 1.5em;
    margin-bottom: 0;
}

#templates .templates-wrapper {
    margin-bottom: 2em;
}

    #templates .templates-wrapper .columns:last-child {
        float: left;
    }

/*  Faixa cinza apos SIGIS  */
.gray {
    background: #F0F0F0 url(../img/bg-gray.jpg) center top no-repeat;
    height: 11.875em;
}

#rodape {
    float: left;
    margin-top: 7em;
}

/*  Contextual - rodape  */
.contextual {
    min-height: 18.750em;
    padding: 3.125em 0em;
    color: #FFF;
    background: #2C6987;
    border-top: 0.188em solid #25BEDE;
    border-bottom: 0.188em solid #25BEDE;
    text-align: center;
}

.cont-altura {
    min-height: 14em;
}

.alinha-icon {
    width: 6.875em;
    height: 6.875em;
    margin: 0em auto;
}

.contextual span {
    float: left;
    width: 6.875em;
    height: 6.875em;
    background: #25BEDE url(../img/contextual-icons.png) no-repeat;
    border-radius: 3.438em;
}

    .contextual span.icon01 {
        background-position: 0em 0em;
    }

    .contextual span.icon02 {
        background-position: -6.875em 0em;
    }

    .contextual span.icon03 {
        background-position: -13.750em 0em;
    }

    .contextual span.icon04 {
        background-position: -20.625em 0em;
    }

    .contextual span.icon01,
    .contextual span.icon02,
    .contextual span.icon03,
    .contextual span.icon04 {
        background-size: auto 100%;
    }

.contextual h6 {
    color: #98E4FE;
    font-size: 1.575em;
    font-weight: 400;
    padding: .3em 0em;
    margin-bottom: 0em;
}

.contextual address {
    font-style: normal;
    font-size: 0.813em;
}

.contextual strong {
    font-weight: 700;
}

.contextual p {
    font-size: 0.813em;
}

.contextual a {
    font-size: 0.875em;
    color: #FFF;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

    .contextual a:hover {
        text-shadow: 0em 0em 1em rgba(255,255,255,.5);
    }

/*  Rodape  */
.rodape {
    min-height: 15em;
    padding: 1.2em 0em 2em 0em;
    background: #374550;
}

.logo-zyon {
    height: 3.125em;
    border-bottom: 1px solid #2C6987;
    margin-bottom: .6em;
    background: url(../img/icon-rodape.jpg) right bottom no-repeat;
}

    .logo-zyon h6 {
        float: left;
        width: 8.438em;
        height: 3.125em;
        overflow: hidden;
        text-indent: -9999px;
        margin-left: -.5em;
        background: url(../img/logo-zyon-rodape.jpg) left .6em no-repeat;
        background-size: 100% auto;
    }

.menu-rodape {
}

    .menu-rodape ul {
        margin-left: 0em;
    }

    .menu-rodape li {
        list-style: none;
        margin: 0em;
        padding: 0em;
    }

    .menu-rodape a {
        color: #70889C;
        font-family: 'Ubuntu Condensed',sans-serif;
        font-size: 1em;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }

        .menu-rodape a:hover {
            color: #FFF;
        }

p.us {
    color: #5E7588;
    font-size: 0.875em;
    font-family: 'Ubuntu Condensed',sans-serif;
    text-align: right;
    margin-right: -.7em;
}

/*  Intermediário  */
@media screen and (max-width: 1310px) {
}

@media screen and (max-height: 800px) {
    .rodape {
        padding: 1.2em 0em 0em 0em;
    }
}

/*  Mobile  */
@media screen and (max-width: 960px) {
    html, body {
        font-size: 14px;
    }

    .logo-zyoncore {
        margin-left: -0.625em;
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -ms-transform: scale(.8);
        -o-transform: scale(.8);
        transform: scale(.8);
    }

        .logo-zyoncore:hover {
            -webkit-transform: scale(.75);
            -moz-transform: scale(.75);
            -ms-transform: scale(.75);
            -o-transform: scale(.75);
            transform: scale(.75);
        }

    .menu-topo {
        height: 5.000em;
    }

        .menu-topo ul {
            margin-right: -2.5em;
        }

    .ini-modulos-big a p,
    .ini-modulos a p {
        font-size: 1.1em;
        line-height: 1.5em;
    }

    .submenu {
        right: 1em;
    }

        .submenu .teste {
            margin-top: 60px;
        }

    .exibe-clientes span {
        height: 85% !important;
    }

        .exibe-clientes span:hover {
            background-position: center 4em;
        }
}

@media screen and (max-width: 800px) {
    .ini-modulos-big,
    .ini-modulos {
        width: 100%;
        height: 21.625em;
    }

        .ini-modulos-big a,
        .ini-modulos-big a:hover {
            height: 23.89em;
        }

            .ini-modulos-big a span {
                width: 6.375em;
                height: 6.375em;
                margin: 3em 0em 1em 0em;
            }

    .alinha-logo-1 {
        width: 6.375em;
        margin: 1em auto;
    }

    .cont-altura {
        min-height: 15.625em;
    }
}

@media (max-width:768px) {
    .menu-topo {
        height: 5.000em;
    }
}

@media screen and (max-width: 640px) {
    .banner-principal {
        margin-top: 0em;
    }

    .msg-banner {
        min-width: 25em;
        min-height: 3.75em;
        padding: .5em;
    }

        .msg-banner p {
            font-size: 1.75em;
            font-weight: 400;
            line-height: 1.8em;
        }

    .exb-ban-01 h3 {
        margin-top: 55%;
    }

    .exb-ban-02 a {
        background-size: auto 70%;
        background-position: right 6em;
    }

    .exb-ban-03 a div.guria-b3 {
        left: .5em;
        bottom: 0em;
        z-index: 2;
    }

    .exb-ban-03 a div.msg-b3 {
        bottom: 2.75em;
        right: .5em;
        padding: 1em;
        z-index: 3;
    }

    .exb-ban-04 a div.guria-b4 {
        left: 0em;
        right: auto;
    }

    .exb-ban-04 a span {
        left: auto;
        right: 0em !important;
        width: 10em;
        height: 10em;
    }

    .exb-ban-04 div.msg-banner p {
        font-size: .9em;
        font-weight: 400;
        line-height: 1.15em;
    }

    .frase-pos-banner h1 {
        font-size: 2em;
    }

    .faixa-azul h2 {
        font-size: 1.3em;
    }

    .sete-solucoes h4 {
        font-size: 1.5em;
        padding-bottom: .5em;
    }

        .sete-solucoes h4 strong {
            font-size: 1.1em;
        }

    .titulo {
        /*padding-top: 3.6em;*/
    }

        .titulo h1 {
            font-size: 2.5em;
        }

    .contextual h6 {
        font-size: 1.2em;
    }

    .exibe-clientes span {
        display: none;
    }

    /* Templates */
    #templates .templates-wrapper .exibe-telas {
        margin: 0 auto;
        width: 90%;
    }
}

@media screen and (max-width: 400px) {
    .msg-banner {
        min-width: 16.875em;
        min-height: 2.563em;
        padding: .5em;
    }

        .msg-banner p {
            font-size: 1.25em;
            font-weight: 400;
            line-height: 1.2em;
        }

    .exb-ban-01 h3 {
        margin-top: 85%;
    }

    .exb-ban-02 a {
        background-size: auto 60%;
    }

    .exb-ban-04 a span {
        width: 7em;
        height: 7em;
    }
}