/**
* Template Name: Bell - v2.1.0
* Template URL: https://bootstrapmade.com/bell-free-bootstrap-4-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Raleway", Helvetica, Arial, sans-serif;
    }
    
    p {
        line-height: 1.55;
        color: #333;
        font-size: 400;
        font-family: "Raleway", Helvetica, Arial, sans-serif;
    }
    
    h1 {
        font-size: 62px;
    }
    
    h2 {
        font-size: 30px;
        margin-bottom: 65px;
    }
    
    h3 {
        font-size: 24px;
    }
    
    h4 {
        font-size: 18px;
    }
    /*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
    
    a {
        transition: 0.5s;
        color: #ed3237;
    }
    
    a:hover {
        color: #8cc448;
    }
    /* ==================================================
  Elements
  ================================================== */
    
    .btn {
        background-color: #ed3237;
        font-family: "Roboto", Helvetica, Arial, sans-serif;
        font-weight: 800;
        color: #fff;
        padding: 15px 45px;
        border-radius: 50px;
    }
    
    .btn:hover {
        background-color: #8cc448;
        color: #fff;
    }
    
    .btn:focus {
        color: #fff;
    }
    
    .btn-ghost {
        border: 3px solid #fff;
        background-color: transparent;
    }
    
    .btn-ghost:hover {
        background-color: #fff;
        color: #ed3237;
    }
    
    section {
        padding: 85px 0;
    }
    
    .card {
        position: relative;
        padding: 0;
        border: 0;
        border-radius: 0;
        margin: 0;
        overflow: hidden;
    }
    
    a:hover {
        text-decoration: none !important;
    }
    
    .scrolltop {
        display: none;
        position: fixed;
        bottom: 15px;
        right: 15px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #ed3237;
        color: #fff;
        text-align: center;
        font-size: 24px;
    }
    
    .scrolltop:hover,
    .scrolltop:active,
    .scrolltop:focus {
        color: #fff !important;
        opacity: .75;
    }
    /*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
    
    #header {
        background: #ed3237;
        height: 70px;
    }
    
    #header #logo {
        margin: 14px 25px 0 0;
    }
    
    #header #logo h1 {
        font-size: 36px;
        margin: 0;
        padding: 2px 0;
        line-height: 1;
        font-family: "Raleway", Helvetica, Arial, sans-serif;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
    }
    
    #header #logo h1 a,
    #header #logo h1 a:hover {
        color: #fff;
    }
    
    #header #logo img {
        padding: 0;
        margin: 0;
        max-height: 40px;
    }
    
    @media (max-width: 768px) {
        #header {
            height: 50px;
        }
        #header #logo {
            margin: 10px 0 0 0;
        }
        #header #logo h1 {
            padding: 2px 0;
            font-size: 26px;
        }
        #header #logo img {
            max-height: 30px;
        }
    }
    
    #header .social-nav {
        margin-top: 15px;
    }
    
    #header .social-nav a {
        font-size: 24px;
        margin-left: 15px;
        color: #fff;
    }
    
    #header .social-nav a:hover {
        color: rgba(255, 255, 255, 0.75);
    }
    /*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
    /* Nav Menu Essentials */
    
    .nav-menu,
    .nav-menu * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .nav-menu ul {
        position: absolute;
        display: none;
        top: 100%;
        left: 0;
        z-index: 99;
    }
    
    .nav-menu li {
        position: relative;
        white-space: nowrap;
    }
    
    .nav-menu>li {
        float: left;
    }
    
    .nav-menu li:hover>ul,
    .nav-menu li.sfHover>ul {
        display: block;
    }
    
    .nav-menu ul ul {
        top: 0;
        left: 100%;
    }
    
    .nav-menu ul li {
        min-width: 180px;
    }
    /* Nav Menu Arrows */
    
    .sf-arrows .sf-with-ul {
        padding-right: 30px;
    }
    
    .sf-arrows .sf-with-ul:after {
        content: "\f107";
        position: absolute;
        right: 15px;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
    }
    
    .sf-arrows ul .sf-with-ul:after {
        content: "\f105";
    }
    /* Nav Meu Container */
    
    #nav-menu-container {
        margin: 0;
    }
    
    @media (max-width: 768px) {
        #nav-menu-container {
            display: none;
        }
    }
    /* Nav Meu Styling */
    
    .nav-menu a {
        padding: 22px 15px 18px 15px;
        text-decoration: none;
        display: inline-block;
        color: #fff;
        font-family: "Roboto", Helvetica, Arial, sans-serif;
        font-weight: 300;
        font-size: 15px;
        outline: none;
    }
    
    .nav-menu a:hover,
    .nav-menu li:hover>a,
    .nav-menu .menu-active>a {
        color: rgba(255, 255, 255, 0.75);
    }
    
    .nav-menu ul {
        margin: 4px 0 0 15px;
        box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
    }
    
    .nav-menu ul li {
        background: #fff;
        border-top: 1px solid #f4f4f4;
    }
    
    .nav-menu ul li:first-child {
        border-top: 0;
    }
    
    .nav-menu ul li:hover {
        background: #199EB8;
        transition: 0.3s;
    }
    
    .nav-menu ul li a {
        color: #333;
        transition: none;
        padding: 10px 15px;
    }
    
    .nav-menu ul li a:hover {
        color: #fff;
    }
    
    .nav-menu ul ul {
        margin: 0;
    }
    /* Mobile Nav Toggle */
    
    #mobile-nav-toggle {
        position: fixed;
        right: 0;
        top: 0;
        z-index: 999;
        margin: 8px 10px 0 0;
        border: 0;
        background: none;
        font-size: 24px;
        display: none;
        transition: all 0.4s;
        outline: none;
        cursor: pointer;
    }
    
    #mobile-nav-toggle i {
        color: #fff;
    }
    
    @media (max-width: 768px) {
        #mobile-nav-toggle {
            display: inline;
        }
    }
    /* Mobile Nav Styling */
    
    #mobile-nav {
        position: fixed;
        top: 0;
        padding-top: 18px;
        bottom: 0;
        z-index: 998;
        background: rgba(0, 0, 0, 0.9);
        left: -260px;
        width: 260px;
        overflow-y: auto;
        transition: 0.4s;
    }
    
    #mobile-nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    #mobile-nav ul li {
        position: relative;
    }
    
    #mobile-nav ul li a {
        color: #fff;
        font-size: 16px;
        overflow: hidden;
        padding: 10px 22px 10px 15px;
        position: relative;
        text-decoration: none;
        width: 100%;
        display: block;
        outline: none;
    }
    
    #mobile-nav ul li a:hover {
        color: #fff;
    }
    
    #mobile-nav ul li li {
        padding-left: 30px;
    }
    
    #mobile-nav ul .menu-has-children i {
        position: absolute;
        right: 0;
        z-index: 99;
        padding: 15px;
        cursor: pointer;
        color: #fff;
    }
    
    #mobile-nav ul .menu-has-children i.fa-chevron-up {
        color: #ed3237;
    }
    
    #mobile-nav ul .menu-item-active {
        color: #ed3237;
    }
    
    #mobile-body-overly {
        width: 100%;
        height: 100%;
        z-index: 997;
        top: 0;
        left: 0;
        position: fixed;
        background: rgba(0, 0, 0, 0.6);
        display: none;
    }
    /* Mobile Nav body classes */
    
    body.mobile-nav-active {
        overflow: hidden;
    }
    
    body.mobile-nav-active #mobile-nav {
        left: 0;
    }
    
    body.mobile-nav-active #mobile-nav-toggle {
        color: #fff;
    }
    /*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
    
    .hero {
        display: table;
        position: relative;
        background-image: url(../images/cover.jpg);
        background-size: cover;
        padding: 50px 0;

        width: 100%;
        height: 100vh;
    }
    
    .hero:after {
        content: '';
        z-index: 0;
        position: absolute;
        background: rgba(0, 0, 0, 0.4);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    
    .hero .container {
        position: relative;
        z-index: 1;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }
    
    .hero-brand {
        margin-bottom: 75px;
        display: inline-block;
    }
    
    .hero-brand:hover {
        opacity: .75;
    }
    
    @media (max-width: 768px) {
        .hero-brand img {
            max-width: 300px;
        }
    }
    
    @media (max-width-device: 768px) {
        .hero-brand img {
            max-width: 300px;
        }
    }
    
    .hero h1 {
        font-size: 40px;
        color: #fff;
    }
    
    .tagline {
        font-family: "Raleway", Helvetica, Arial, sans-serif;
        font-size: 23px;
        margin: 45px 0 75px 0;
        color: #fff;
    }
    /*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
    
    .about p {
        font-size: 20px;
    }
    
    .about img {
        margin-bottom: 10px;
    }
    /* ==================================================
  Welcome Styling
  ================================================== */
    
    .welcome {
        color: #fff;
        width: 100%;
        background: url("../images/parallax-bg.jpg");
        background-size: 100% 100%;
        background-attachment: fixed;
    }
    
    .welcome h2 {
        text-transform: uppercase;
        margin-bottom: 15px;
    }
    
    .welcome img {
        width: 80%;
    }
    /* ==================================================
  services Styling
  ================================================== */
    
    .services h2 {
        color: #ed3237;
    }
    
    .services .row {
        margin-bottom: 50px;
    }
    
    .services img {
        width: 100%;
    }
    
    .subtitle {
        color: #ed3237 !important;
    }
    
    p {
        font-family: "Roboto", Helvetica, Arial, sans-serif;
        font-size: 20px;
    }
    li {
        font-family: "Roboto", Helvetica, Arial, sans-serif;
        font-size: 20px;
    }
    /* ==================================================
  Call-to-action Styling
  ================================================== */
    
    .cta {
        background-color: #ed3237;
        padding: 25px 0;
    }
    
    .cta h2 {
        margin-bottom: 25px;
    }
    
    .cta h2,
    .cta h3,
    .cta h5,
    .cta p,
    .cta label {
        color: #fff;
    }
    
    .cta label {
        margin-bottom: 0;
    }
    
    .cta h5 {
        font-size: 40px;
    }
    
    .cta .btn-block {
        height: 40px;
        padding: 7px;
        margin-bottom: 40px;
    }
    
    .cta #bill {
        display: none;
    }
    
    .cta .btn-ghost {
        position: relative;
        top: 13px;
    }
    /* ==================================================
  Features Styling
  ================================================== */
    
    .features {
        padding-bottom: 45px;
    }
    
    .features h2 {
        color: #ed3237;
    }
    
    .feature-col {
        display: table;
        padding-bottom: 45px;
    }
    
    .feature-col>div>div {
        display: table-cell;
        vertical-align: middle;
    }
    
    .feature-col>div>div:last-child {
        padding-left: 20px;
    }
    
    .feature-col .feature-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 15px;
        background: #ed3237;
        color: #fff;
        font-size: 24px;
        text-align: center;
        line-height: 70px;
        border-radius: 50%;
        display: inline-block;
    }
    
    .feature-col h3 {
        color: #ed3237;
    }
    
    .feature-col p {
        font-family: "Roboto", Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #999;
    }
    /* ==================================================
  Portfolio Styling
  ================================================== */
    
    .portfolio {
        background-color: #edf6ff;
        padding-bottom: 0;
    }
    
    .portfolio h2 {
        color: #ed3237;
        margin-bottom: 25px;
    }
    
    .portfolio-grid {
        margin-top: 65px;
    }
    
    .portfolio-grid .row {
        margin: 0;
    }
    
    .portfolio-grid .row>div {
        padding: 0;
    }
    
    .portfolio-grid .row>div .card img {
        width: 100%;
    }
    
    .portfolio-grid .row>div .card .portfolio-over {
        position: absolute;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        top: 0;
        left: 0;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .portfolio-grid .row>div .card .portfolio-over>div {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .portfolio-grid .row>div .card .portfolio-over .card-title {
        color: #fff;
        font-size: 30px;
    }
    
    .portfolio-grid .row>div .card .portfolio-over .card-text {
        color: #fff;
        opacity: .75;
        padding: 0 45px;
    }
    
    .portfolio-grid .row>div .card:hover .portfolio-over {
        opacity: 1;
        visibility: visible;
    }
    /* ==================================================
  Team Styling
  ================================================== */
    
    .team h2 {
        color: #ed3237;
    }
    
    .team .col-sm-3 {
        padding: 0;
    }
    
    .team .card>a {
        display: block;
    }
    
    .team .card img {
        width: 100%;
    }
    
    .team .card h4 {
        color: #fff;
        text-transform: uppercase;
    }
    
    .team .card p {
        font-size: 11px;
        color: #fff;
        opacity: .75;
        margin: 0;
        padding: 0 35px;
    }
    
    .team .card .social-nav {
        margin-bottom: 45px;
    }
    
    .team .card .social-nav a {
        color: #fff;
        font-size: 16px;
        margin: 0 4px;
    }
    
    .team .card .social-nav a:hover {
        opacity: .75;
    }
    
    .team .card:hover .team-over {
        opacity: 1;
        visibility: visible;
    }
    
    .team .card:hover .card-title-wrap {
        background-color: #ed3237;
    }
    
    .team .card:hover .card-title-wrap .card-title,
    .team .card:hover .card-title-wrap .card-text {
        color: #fff;
    }
    
    .team .team-over {
        padding-top: 45px;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        top: 0;
        left: 0;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .team .card-title-wrap {
        padding: 15px 25px;
        position: relative;
        z-index: 9;
        background-color: #fff;
    }
    
    .team .card-title-wrap .card-title,
    .team .card-title-wrap .card-text {
        font-family: "Raleway", Helvetica, Arial, sans-serif;
        display: block;
        margin: 0;
    }
    
    .team .card-title-wrap .card-title {
        font-size: 24px;
        color: #333;
    }
    
    .team .card-title-wrap .card-text {
        font-size: 18px;
        color: #999;
    }
    /* ==================================================
  Contact Section
  ================================================== */
    
    #contact {
        background: #f7f7f7;
        padding: 80px 0;
    }
    
    #contact h2 {
        font-family: "Raleway", Helvetica, Arial, sans-serif;
        color: #ed3237;
    }
    
    #contact .fa-whatsapp {
        font-size: 20px;
    }
    
    #contact .scrollto {
        background-color: #25d366 !important;
        margin-top: 10px;
        margin-bottom: 30px;
    }
    
    #contact .info {
        margin-top: 20px;
        margin-left: 50px;
        margin-bottom: 20px;
    }
    
    #contact .info-2 {
        border-left: solid 1px #c3c3c3;
        border-right: solid 1px #c3c3c3;
    }
    
    @media (max-width: 768px) {
        #contact .info-2 {
            border-left: none;
            border-right: none;
            border-top: solid 1px #c3c3c3;
            border-bottom: solid 1px #c3c3c3;
        }
    }
    
    @media (max-width-device: 768px) {
        #contact .info-2 {
            border-left: none;
            border-right: none;
            border-top: solid 1px #c3c3c3;
            border-bottom: solid 1px #c3c3c3;
        }
    }
    
    #contact .info i {
        font-size: 32px;
        color: #ed3237;
        float: left;
    }
    
    #contact .info p {
        padding: 0 0 10px 50px;
        line-height: 24px;
        font-size: 17px;
    }
    
    #contact .justify-content-center {
        margin-top: 30px;
    }
    
    #contact .php-email-form .validate {
        display: none;
        color: red;
        margin: 0 0 15px 0;
        font-weight: 400;
        font-size: 13px;
    }
    
    #contact .php-email-form .error-message {
        display: none;
        color: #fff;
        background: #ed3c0d;
        text-align: left;
        padding: 15px;
        font-weight: 600;
    }
    
    #contact .php-email-form .error-message br+br {
        margin-top: 25px;
    }
    
    #contact .php-email-form .sent-message {
        display: none;
        color: #fff;
        background: #18d26e;
        text-align: center;
        padding: 15px;
        font-weight: 600;
    }
    
    #contact .php-email-form .loading {
        display: none;
        background: #fff;
        text-align: center;
        padding: 15px;
    }
    
    #contact .php-email-form .loading:before {
        content: "";
        display: inline-block;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        margin: 0 10px -6px 0;
        border: 3px solid #18d26e;
        border-top-color: #eee;
        -webkit-animation: animate-loading 1s linear infinite;
        animation: animate-loading 1s linear infinite;
    }
    
    #contact .php-email-form input,
    #contact .php-email-form textarea {
        border-radius: 0;
        box-shadow: none;
    }
    
    #contact .php-email-form input::focus,
    #contact .php-email-form textarea::focus {
        background-color: #ed3237;
    }
    
    #contact .php-email-form button[type="submit"] {
        background: #ed3237;
        border: 0;
        padding: 10px 24px;
        color: #fff;
        transition: 0.4s;
    }
    
    #contact .php-email-form button[type="submit"]:hover {
        background: #23c2e1;
    }
    
    @-webkit-keyframes animate-loading {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    
    @keyframes animate-loading {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    /*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
    
    .site-footer {
        background-color: #111;
        padding: 0;
    }
    
    .site-footer h2,
    .site-footer p {
        color: #fff;
    }
    
    .site-footer p {
        opacity: .75;
        line-height: 2.0925;
    }
    
    .site-footer h2,
    .site-footer .btn {
        margin-bottom: 25px;
    }
    
    .site-footer .social-nav a {
        color: #fff;
        opacity: .25;
    }
    
    .site-footer .social-nav a:hover {
        opacity: 1;
    }
    
    .site-footer .bottom {
        background-color: #000;
        padding: 20px 0;
    }
    
    .site-footer .bottom .list-inline,
    .site-footer .bottom p {
        margin: 0;
    }
    
    .site-footer .bottom .list-inline {
        position: relative;
        top: 5px;
    }
    
    .site-footer .bottom .list-inline a {
        color: #fff;
        font-family: "Roboto", Helvetica, Arial, sans-serif;
        margin-right: 15px;
    }
    
    .site-footer .bottom .list-inline a:hover {
        color: #ed3237;
    }
    
    .site-footer .credits {
        color: #ddd;
    }
    
    .site-footer .credits a {
        color: #ed3237;
    }
    /* ==================================================
  Responsive Styling
  ================================================== */
    
    @media (max-width: 61.9em) {
        section,
        .block,
        .cta {
            padding: 35px 0;
        }
        .features {
            padding-bottom: 5px;
        }
        p,
        .block p {
            margin: 0;
        }
        .hero-brand {
            margin-bottom: 35px;
        }
        .tagline {
            margin: 35px 0;
        }
        h1 {
            font-size: 32px;
            margin: 0;
        }
        h2,
        .tagline {
            font-size: 24px;
        }
        h2 {
            margin-bottom: 25px;
        }
        .hero {
            padding: 75px 0;
        }
        .stats-col {
            margin-bottom: 25px;
        }
        .block {
            height: auto;
        }
        .feature-col {
            padding-bottom: 30px;
        }
        .portfolio-grid .card h3.card-title {
            font-size: 18px !important;
        }
        .portfolio-grid .card .card-text {
            font-size: 13px;
        }
        .team .team-over {
            padding-top: 20px;
        }
        .team .card .social-nav {
            margin-bottom: 15px;
            padding: 0;
        }
        .site-footer .social-nav {
            margin-bottom: 35px;
        }
        .site-footer .list-inline {
            text-align: center;
            padding-bottom: 15px;
        }
        .site-footer .list-inline li {
            display: inline-block;
        }
    }
    
    @media (max-width: 767px) {
        .block {
            padding-left: 30px;
            padding-right: 30px;
        }
    }