@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* global variables */
:root {
    --blue: #004b87;
    --white: #ffffff;
    --gray: #eef0f3;
}

body,
html {
    padding: 0;
    margin: 0;
}
html {
    font-family: "Open Sans", Sans-serif;
}
video {
    display: block;
    width: 100%;
    height: auto;
}
input[type="submit"],
input[type="text"],
input[type="email"],
textarea,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

::-moz-selection { /* Code for Firefox */
    color: var(--white);
    background: var(--blue);
}
::selection {
    color: var(--white);
    background: var(--blue);
}

.theme-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#topbar {
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    padding: 14px 0;
}
#topbar .theme-container,
#topbar .theme-container .col-left,
#topbar .theme-container .col-right {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
#topbar .theme-container .col-left div,
#topbar .theme-container .col-right div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}
#topbar .theme-container .col-right div:first-child {
    margin-right: 40px;
}
#topbar .theme-container .col-left div a,
#topbar .theme-container .col-right div a {
    text-decoration: none;
    font-size: 14px;
}
#topbar .theme-container a {
    font-weight: 700;
    color: var(--blue);
}
#topbar .theme-container a .phone-code {
    font-size: 12px;
}
#topbar .theme-container .social-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}
#topbar .theme-container .social-links a {
    background-color: var(--blue);
    color: var(--white);
    font-size: 18px !important;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

#header {
    background-color: var(--blue);
    position: sticky;
    position: -webkit-sticky;
    display: flex;
    flex-direction: column;
    padding: 14px 0;
    top: 0;
    z-index: 9999;
    box-shadow: 0 1px 5px rgba(117, 117, 117, 0.3);
    transition: top 0.3s;
    -webkit-transition: top 0.3s;
}
#header .theme-container,
#header .theme-container .col-left,
#header .theme-container .col-right {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
#header .theme-container .col-left .logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}
#header .theme-container .col-left img {
    width: 100%;
    max-width: 221px;
}
#header .theme-container .col-right nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}
#header .theme-container .col-right nav ul li {
    list-style: none;
}
#header .theme-container .col-right nav ul li a {
    text-decoration: none;
    color: var(--white);
    font-weight: 400;
}
#header .theme-container .col-right #toggle-nav {
    display: none;
    color: var(--white);
    font-size: 35px;
}

/* blog-single */
.blog-single {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #faf7f7;
    padding: 30px;
    box-sizing: border-box;
}
.blog-single .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    gap: 30px;
}
.blog-single .container .body,
.blog-single .container .sidebar {
    background-color: var(--white);
    border-radius: 8px;
    padding: 30px;
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(117, 117, 117, 0.3);
}
.blog-single .container .body {
    width: 70%;
    color: #464646;
}
.blog-single .container .sidebar {
    width: 30%;
}
.blog-single .container .body :first-child {
    margin-top: 0;
}
.blog-single .container .body :last-child {
    margin-bottom: 0;
}
.blog-single .container .body p {
    line-height: 25px;
}

/* "blog-archive */
.blog-archive,
.video-archive {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #faf7f7;
    padding: 30px;
    box-sizing: border-box;
}
.blog-archive .container,
.video-archive .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    gap: 30px;
}
.blog-archive .body,
.video-archive .body {
    width: 70%;
}
.blog-archive .sidebar,
.video-archive .sidebar {
    width: 30%;
}
.blog-archive .body,
.video-archive .body {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.blog-archive .body .post a, 
.video-archive .body .post a, 
.blog-archive .sidebar,
.video-archive .sidebar {
    background-color: var(--white);
    border-radius: 8px;
    padding: 30px;
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(117, 117, 117, 0.3);
}
.blog-archive .body .post a,
.video-archive .body .post a {
    display: flex;
    gap: 30px;
    align-items: center;
    text-decoration: none;
}
.video-archive .body .post a {
    flex-direction: column;
}
.blog-archive .body .post a .thumb,
.video-archive .body .post a .thumb {
    width: 40%;
}
.video-archive .body .post a .thumb {
    width: 100%;
}
.blog-archive .body .post a .desc,
.video-archive .body .post a .desc {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.video-archive .body .post a .desc {
    width: 100%;
}
.blog-archive .body .post a .thumb img,
.video-archive .body .post a .thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px;
    border: solid 1px #f3f3f3;
}
.blog-archive .body .post a .desc h2.title,
.video-archive .body .post a .desc h2.title {
    color: #337AB7;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.8px;
    margin: 0;
}
.blog-archive .body .post a .desc p.excerpt,
.video-archive .body .post a .desc p.excerpt {
    color: #7A7A7A;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

/* single-video */
.single-video {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #faf7f7;
    padding: 30px;
    box-sizing: border-box;
}
.single-video .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    gap: 30px;
}
.single-video .content-area,
.single-video .sidebar {
    background-color: var(--white);
    border-radius: 8px;
    padding: 30px;
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(117, 117, 117, 0.3);
}
.single-video .content-area {
    width: 70%;
    color: #464646;
}
.single-video .sidebar {
    width: 30%;
}

/* título */
.single-video .entry-header h1 {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: var(--blue);
}

/* vídeo responsivo */
.single-video .video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    margin-bottom: 25px;
}
.single-video .video-embed iframe,
.single-video .video-embed video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

/* conteúdo */
.single-video .entry-content p {
    line-height: 1.6;
    margin-bottom: 15px;
}
.single-video .entry-content :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* home-contact-form */
.home-contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.home-contact-form .elementor-widget-container {
    display: block;
    width: 100%;
}
.home-contact-form .wpcf7-form p {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.home-contact-form .wpcf7-form p label {
    color: #004B87;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}
.home-contact-form .wpcf7-form p label span.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}
.home-contact-form .wpcf7-form input[type='text'],
.home-contact-form .wpcf7-form input[type='email'],
.home-contact-form .wpcf7-form textarea {
    display: block;
    width: 100%;
    height: 40px;
    border: solid 1px #cccccc;
    outline: none;
    border-radius: 5px;
    padding: 8px;
    box-sizing: border-box;
}
.home-contact-form .wpcf7-form textarea {
    height: 125px;
    resize: none;
}
.home-contact-form .wpcf7-form .wpcf7-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px 10px 12px;
    border-radius: 3px;
    background: #004b87;
    color: #ffffff;
    border: none;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    font-family: "Open Sans", Sans-serif;
}
.home-contact-form .wpcf7-spinner {
    position: absolute;
    inset: -15px;
    width: auto;
    height: auto;
    background-color: rgba(0, 0, 0, .2);
    z-index: 1;
    margin: 0;
    border-radius: 8px;
}
.home-contact-form .wpcf7-spinner::before {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--blue);
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.home-contact-form .wpcf7-response-output {
    margin: 15px 0 0 0 !important;
}

/* sidebar */
.sidebar {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
.sidebar .box {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.sidebar .box h3.title {
    color: #777777;
    font-family: "Open Sans", Sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
    margin: 0;
    padding: 0;
}
.sidebar .wpcf7-form p {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
}
.sidebar .wpcf7-form p label {
    color: #004B87;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}
.sidebar .wpcf7-form p label span.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}
.sidebar .wpcf7-form input[type='text'],
.sidebar .wpcf7-form input[type='email'],
.sidebar .wpcf7-form textarea {
    display: block;
    width: 100%;
    height: 40px;
    border: solid 1px #cccccc;
    outline: none;
    border-radius: 5px;
    padding: 8px;
    box-sizing: border-box;
}
.sidebar .wpcf7-form textarea {
    height: 125px;
    resize: none;
}
.sidebar .wpcf7-form .wpcf7-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px 10px 12px;
    border-radius: 3px;
    background: #004b87;
    color: #ffffff;
    border: none;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    font-family: "Open Sans", Sans-serif;
}
.sidebar .wpcf7-spinner {
    position: absolute;
    inset: -15px;
    width: auto;
    height: auto;
    background-color: rgba(0, 0, 0, .2);
    z-index: 1;
    margin: 0;
    border-radius: 8px;
}
.sidebar .wpcf7-spinner::before {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--blue);
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.sidebar .wpcf7-response-output {
    margin: 15px 0 0 0 !important;
}

/* copyright */
.copyright {
    background-color: var(--gray);
    color: var(--blue);
    padding: 5px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
}

.menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(255, 255, 255, .7);
    visibility: hidden;
}
.menu-mobile.active {
    visibility: visible;
}
.menu-mobile nav {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    left: -280px;
    width: 100%;
    max-width: 280px;
    background-color: var(--blue);
    padding: 30px 15px 15px 15px;
    box-sizing: border-box;
    transition: all ease-in-out .1s;
    -webkit-transition: all ease-in-out .1s;
}
.menu-mobile.active nav {
    left: 0;
}
.menu-mobile nav li {
    display: block;
}
.menu-mobile nav li a {
    display: block;
    text-decoration: none;
    padding: 15px;
    box-sizing: border-box;
    color: var(--white);
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
}
.menu-mobile nav ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu-mobile .close {
    position: absolute;
    font-size: 40px;
    color: #8dc1ee;
    z-index: 9999;
    right: 15px;
    top: 0;
}

@media (max-width: 992px) {

    #topbar .theme-container {
        flex-direction: column;
    }
    #topbar .theme-container .col-left {
        display: none;
    }
    #topbar .theme-container .col-right {
        width: 100%;
    }

    #header .theme-container .col-right #toggle-nav {
        display: block;
    }
    #header .theme-container .col-right nav {
        display: none;
    }

    .blog-box {
        flex-direction: column;
    }
    .blog-box .post p.excerpt {
        display: none;
    }
    .blog-single,
    .blog-archive,
    .video-archive {
        padding: 30px 15px;
    }
    .blog-single .container,
    .blog-archive .container,
    .video-archive .container {
        flex-direction: column;
    }
    .blog-single .container .body, 
    .blog-single .container .sidebar,
    .video-single .container .sidebar,
    .blog-archive .body, 
    .blog-archive .sidebar,
    .video-archive .body,
    .video-archive .sidebar {
        width: 100%;
    }

    .single-video .container,
    .video-single .container {
        flex-direction: column;
    }
    .single-video .content-area,
    .video-single .content-area,
    .single-video .sidebar,
    .video-single .sidebar {
        width: 100%;
    }
}

@media (max-width: 768px) { 

    .blog-archive .body .post a,
    .video-archive .body .post a {
        flex-direction: column;
    }
    .blog-archive .body .post a .thumb,
    .blog-archive .body .post a .desc,
    .video-archive .body .post a .thumb,
    .video-archive .body .post a .desc {
        width: 100%;
    }

}