/*

Theme Name: koppe - Koppe Agência Digital

Theme URI: https://conexaogloriense.com.br/

Description: Este tema foi desenvolvido para facilitar criação dos sites em wordpress na Koppe Agência Digital

Author: Carlos da Silva, Mateus Barboza - Koppe Agência Digital

Author URI: http://www.koppe.com.br/quem-somos

Text Domain: koppe

Version: 1.1

License:

License URI:

General comments (optional).

*/



/* --------------- CSS GLOBAL ------------------ */



/* @import "reset.css"; */



body a {

    transition: 1s;

}



.text-shadow {

    text-shadow: 2px 2px 4px #000000;

}



.btn {

    transition: 1s;

}



.bg-gray {

    background: #f5f5f5;

}



.barra-top {

    width: 100%;

    display: block;

    background: #1a73e8;

    color: #fff;

    height: 50px;

    overflow: hidden;

}



.barra-top .nav a {

    color: #d5f2fd;

    font-variant-caps: all-small-caps;

    font-weight: bolder;

    transition: 1s;

    -webkit-transition: 1s;

    -moz-transition: 1s;

    -ms-transition: 1s;

    -o-transition: 1s;

    font-size: 18px;

}



.barra-top .nav a:hover {

    color: #d5f2fd;

    font-variant-caps: all-small-caps;

    font-weight: bolder;

    background: #007BFF;

}



.barra-top .nav-pills .nav-link {

    border-radius: .0rem;

    -webkit-border-radius: .0rem;

    -moz-border-radius: .0rem;

    -ms-border-radius: .0rem;

    -o-border-radius: .0rem;

    padding: .7rem 1rem;

}



.barra-top h6 {

    font-size: 14px;

    line-height: 50px;

}



.footer h6 {

    font-size: 14px;

    line-height: 50px;

}



.barra-top .btn {

    border-radius: 2em;

    -webkit-border-radius: 2em;

    -moz-border-radius: 2em;

    -ms-border-radius: 2em;

    -o-border-radius: 2em;

    font-weight: bolder;

    font-size: 18px;

}



.footer .btn {

    border-radius: 2em;

    -webkit-border-radius: 2em;

    -moz-border-radius: 2em;

    -ms-border-radius: 2em;

    -o-border-radius: 2em;

    font-weight: bolder;

    font-size: 18px;

}



.navigation-box {

    top: .4rem;

    right: .8rem;

    width: 2rem;

    position: absolute;

}



@media (min-width: 768px) {

    .breaking-caret:after {

        content: "";

        width: 0;

        height: 0;

        border-top: 20px solid transparent;

        border-left: 15px solid #007bff;

        border-bottom: 20px solid transparent;

        position: absolute;

        right: -15px;

        top: 0;

    }

}



.b-0 {

    bottom: 0;

}



.bg-shadow {

    background: rgba(76, 76, 76, 0);

    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179, 171, 171, 0)), color-stop(29%, rgba(48, 48, 48, 0.37)), color-stop(100%, rgba(19, 19, 19, 0.8)));

    background: linear-gradient(to bottom, rgba(179, 171, 171, 0) 0%, rgba(48, 48, 48, 0.71) 29%, rgba(19, 19, 19, 1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0);

}



.top-indicator {

    right: 0;

    top: 1rem;

    bottom: inherit;

    left: inherit;

    margin-right: 1rem;

}



.overflow {

    position: relative;

    overflow: hidden;

}



.zoom img {

    transition: all 0.2s linear;

}



.zoom:hover img {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

}



.lineh {

    line-height: 120px;

}



.menu-top li a {

    font-size: 20px;

    font-weight: bolder;

}



.openBtn {

    background: #f1f1f1;

    border: none;

    padding: 10px 15px;

    font-size: 20px;

    cursor: pointer;

    margin-top: 20px;

}



.openBtn:hover {

    background: #bbb;

}



.overlay {

    height: 100%;

    width: 100%;

    display: none;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: rgb(0, 0, 0);

    background-color: rgba(0, 0, 0, 0.7);

    transition: 0.3s;

}



.overlay-content {

    position: relative;

    top: 46%;

    left: 50%;

    width: 100%;

    text-align: center;

    margin-top: 30px;

    margin-left: -40%;

    transition: 0.3s;

}



.overlay .closebtn {

    position: absolute;

    top: 20px;

    right: 45px;

    font-size: 60px;

    cursor: pointer;

    color: white;

}



.overlay .closebtn:hover {

    color: #ccc;

}



.overlay input[type=text] {

    padding: 15px;

    font-size: 17px;

    border: none;

    float: left;

    width: 60%;

    background: white;

}



.overlay input[type=text]:hover {

    background: #f1f1f1;

    transition: 0.3s;

}



.overlay button {

    float: left;

    width: 20%;

    padding: 15px;

    background: #ddd;

    font-size: 17px;

    border: none;

    cursor: pointer;

    transition: 0.3s;

}



.overlay button:hover {

    background: #bbb;

}



a.btn-social, .btn-social {

    border-radius: 50%;

    color: #ffffff !important;

    display: inline-block;

    height: 46px;

    line-height: 46px;

    margin: 8px 4px;

    text-align: center;

    text-decoration: none;

    transition: background-color .3s;

    webkit-transition: background-color .3s;

    width: 46px;

}



.btn-social .fa, .btn-social i {

    backface-visibility: hidden;

    moz-backface-visibility: hidden;

    ms-transform: scale(1);

    o-transform: scale(1);

    transform: scale(1);

    transition: all .25s;

    webkit-backface-visibility: hidden;

    webkit-transform: scale(1);

    webkit-transition: all .25s;

}



.btn-social:hover, .btn-social:focus {

    color: #fff;

    outline: none;

    text-decoration: none;

}



.btn-social:hover .fa, .btn-social:focus .fa, .btn-social:hover i, .btn-social:focus i {

    ms-transform: scale(1.3);

    o-transform: scale(1.3);

    transform: scale(1.3);

    webkit-transform: scale(1.3);

}



.btn-social.btn-xs {

    font-size: 9px;

    height: 24px;

    line-height: 13px;

    margin: 6px 2px;

    width: 24px;

}



.btn-social.btn-sm {

    font-size: 13px;

    height: 36px;

    line-height: 18px;

    margin: 6px 2px;

    width: 36px;

}



.btn-social.btn-lg {

    font-size: 22px;

    height: 62px;

    line-height: 40px;

    margin: 10px 6px;

    width: 62px;

}



.btn-facebook {

    background-color: #3b5998;

}



.btn-facebook:hover {

    background-color: #4c70ba;

}



.btn-instagram {

    background-color: #3f729b;

}



.btn-instagram:hover {

    background-color: #548cb9;

}



.btn-youtube {

    background-color: #e52d27;

}



.btn-youtube:hover {

    background-color: #ea5955;

}



.btn-email {

    background-color: #44c456;

}



.btn-email:hover {

    background-color: #6bd079;

}



.btn-search {

    background-color: #1A73E8;

}



.btn-search:hover {

    background-color: #006DE2;

}



.top-mais {

    list-style: none;

    padding: 0;

    margin: 0;

}



.top-mais li {

    width: 20%;

    padding: 2%;

    float: left;

    border-right: 1px solid #F4F4F4;

    text-align: center

}



.top-mais li img {

    padding: 10px;

    margin-bottom: 15px;

    transition: 1s;

}



.top-mais li:last-child {

    border: 0px solid #F4F4F4

}



.top-mais li a:hover {

    text-decoration: none;

    color: #000000;

}



.titulos-categorias {

    font-size: 24px;

    font-variant-caps: all-small-caps;

    display: block;

    padding-bottom: 15px;

    border-bottom: 2px dotted transparent;

    margin-bottom: 30px;

    font-weight: bolder;

}



.titulos-categorias:hover {

    text-decoration: none;

    border-bottom: 2px dotted #006DE2;

}



.card a:hover {

    text-decoration: none;

}



.box {

    overflow: hidden;

    position: relative;

}



.box:before, .box:after {

    content: '';

    background: linear-gradient(to right, #772ce8, #772ce8);

    height: 100%;

    width: 150%;

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

    opacity: 0;

    position: absolute;

    left: 0;

    top: -60%;

    transition: all 0.3s ease;

}



.box:after {

    top: auto;

    bottom: -75%;

    left: auto;

    right: 0;

}



.box:hover:before, .box:hover:after {

    opacity: 0.9;

    transform: rotate(22deg);

}



.box img {

    width: 100%;

    height: auto;

}



.box .box-content {

    color: #fff;

    text-align: right;

    opacity: 0;

    transform: rotateX(90deg);

    transform-origin: top center;

    position: absolute;

    top: 15px;

    right: 15px;

    z-index: 1;

    transition: all 0.3s ease;

}



.box:hover .box-content {

    opacity: 1;

    transform: rotateX(0);

}



.box .title {

    font-size: 23px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin: 0;

}



.box .post {

    font-size: 16px;

    text-transform: capitalize;

    font-style: italic;

}



.box .icon {

    width: 70%;

    padding: 7px 10px;

    margin: 0;

    list-style: none;

    opacity: 0;

    transform: rotateX(-90deg);

    transform-origin: bottom center;

    position: absolute;

    left: 0;

    bottom: 0;

    z-index: 1;

    transition: all 0.3s ease;

}



.box:hover .icon {

    opacity: 1;

    transform: rotateX(0);

}



.box .icon li {

    display: inline-block;

    margin: 0 2px;

}



.box .icon li a {

    color: #fff;

    background-color: transparent;

    font-size: 15px;

    text-align: center;

    line-height: 32px;

    height: 35px;

    width: 35px;

    border: 2px solid #fff;

    border-radius: 50%;

    display: block;

    transition: all 0.3s;

}



.box .icon li a:hover {

    box-shadow: 0 0 5px #fff;

}



@media only screen and (max-width:990px) {

    .box {

        margin: 0 0 30px;

    }

}



/* The side navigation menu */



.sidenav {

    height: 100%;

    /* 100% Full-height */

    width: 0;

    /* 0 width - change this with JavaScript */

    position: fixed;

    /* Stay in place */

    z-index: 1;

    /* Stay on top */

    top: 0;

    left: 0;

    background-color: #111;

    /* Black*/

    overflow-x: hidden;

    /* Disable horizontal scroll */

    padding-top: 60px;

    /* Place content 60px from the top */

    transition: 0.5s;

    /* 0.5 second transition effect to slide in the sidenav */

}



/* The navigation menu links */



.sidenav a {

    padding: 8px 8px 8px 32px;

    text-decoration: none;

    font-size: 16px;

    color: #818181;

    display: block;

    transition: 0.3s;

}



/* When you mouse over the navigation links, change their color */



.sidenav a:hover {

    color: #f1f1f1;

}



/* Position and style the close button (top right corner) */



.sidenav .closebtn {

    position: absolute;

    top: 0;

    right: 25px;

    font-size: 36px;

    margin-left: 50px;

}



/* Style page content - use this if you want to push the page content to the right when you open the side navigation */



#main {

    transition: margin-left .5s;

    padding: 0px;

}



/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */



@media screen and (max-height: 450px) {

    .sidenav {

        padding-top: 15px;

    }

    .sidenav a {

        font-size: 18px;

    }

}



.mask {

    position: fixed;

    z-index: 99;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    display: none;

}



.numero-maisvistos {

    font-size: 18px;

    font-weight: bolder;

    position: absolute;

    z-index: 9;

    background: #1a73e8;

    padding: 5px 13px 5px 13px;

    display: block;

    color: #fff;

    border-radius: 50%;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -ms-border-radius: 50%;

    -o-border-radius: 50%;

    transition: 1s;

}



.top-mais li:hover .numero-maisvistos {

    background: #000000;

}



.top-mais li:hover img {

    padding: 0px;

    margin-bottom: 15px;

    transition: .2s;

    -webkit-transition: .2s;

    -moz-transition: .2s;

    -ms-transition: .2s;

    -o-transition: .2s;

}



.ngg-navigation {

    font-size: 1.4em !important;

    clear: both !important;

    display: block !important;

    padding-top: 15px;

    padding-bottom: 15px;

    text-align: center

}



.ngg-navigation span {

    color: #FFF;

    border: 0;

    padding: 10px 15px;

    background: #3195bf;

    font-weight: bold;

    margin: 0 6px

}



.ngg-navigation a.page-numbers, .ngg-navigation a.next, .ngg-navigation a.prev, .ngg-navigation span.page-numbers, .ngg-navigation span.next, .ngg-navigation span.prev {

    color: #FFF;

    background: #03afef;

    border: 0;

    margin-right: 3px;

    padding: 10px 15px;

    text-decoration: none

}



.ngg-navigation a.page-numbers:hover, .ngg-navigation a.next:hover, .ngg-navigation a.prev:hover, .ngg-navigation span.page-numbers:hover, .ngg-navigation span.next:hover, .ngg-navigation span.prev:hover {

    background: #1d83c3;

    color: #fff !important;

    text-decoration: none !important

}



.ngg-clear {

    clear: both

}



.title_single {

    font-size: 32px;

    color: #333;

}



.dados-post {

    color: #757575;

    width: 100%;

    float: left;

    margin: 15px 0 15px 0;

    font-size: 14px;

}



.image-wrapper img {

    width: 100%;

}



@media (max-width: 768px) {

    .lineh {

        line-height: 60px;

    }

    .top-mais li {

        width: 50%;

        padding: 2%;

        float: left;

        border-right: 1px solid #F4F4F4;

        text-align: center

    }

    .top-mais li img {

        padding: 10px;

        margin-bottom: 15px;

        transition: 1s;

        display: block;

        width: 100%;

    }

}