@import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');
// Geral
p {
    font-family: "Swis721 WGL4 BT";
    font-size: medium;
    font-weight: 500;
}

h1 {
    font-family: "teko";
    font-family: 'Acme', sans-serif;
}

h4 {
    font-family: 'Acme', sans-serif;
    font-weight: 700;
}

.tamanho-nomes {
    font-size: 17px!important;
}

a {
    font-family: 'Acme', sans-serif;
    font-size: 1.5rem;
}

.logo-webinar {
    width: 460px;
}

.box-form {
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    padding: 30px;
    background-color: #1092AA;
}

.label-style {
    font-family: 'Acme', sans-serif;
    font-weight: 700;
}

.input-style {
    border: none;
    border-radius: 0;
    background: #ffffff;
    border-left: 3px solid #35B6CC;
}

.btn-form {
    background-color: #34B5CB;
    border: none;
    border-radius: 0;
}

.btn-primary:hover {
    color: #fff;
    background-color: #0c7588;
    border: none;
}

.btn-primary:focus {
    color: #fff;
    background-color: #0c7588;
    border: none;
    box-shadow: none!important;
}

.btn-primary:active {
    color: #fff;
    background-color: #0c7588!important;
    border: none;
    box-shadow: none;
}

/*
=====
DEPENDENCIES LINKS
=====
*/

.r-link {
    display: var(--rLinkDisplay, inline-flex) !important;
}

.r-link[href] {
    color: var(--rLinkColor) !important;
    text-decoration: var(--rLinkTextDecoration, none) !important;
}

.text-underlined {
    /*
        1. I use pixels units because others units (em, rem, vw, vh, etc) can
        lead to the mistake of displaying a circumcised line
    */
    --uiTextUnderlinedLineHeight: var(--textUnderlinedLineHeight, 2px);
    /* 1 */
    --uiTextUnderlinedLineGap: var(--textUnderlinedLineGap, .5rem);
    --uiTextUnderlinedPaddingBottom: calc(var(--uiTextUnderlinedLineHeight) + var(--uiTextUnderlinedLineGap));
    padding-bottom: var(--uiTextUnderlinedPaddingBottom) !important;
    position: var(--textUnderlinedPosition, relative) !important;
    z-index: var(--textUnderlinedZindex, 1) !important;
}

.text-underlined::after {
    content: "";
    width: var(--textUnderlinedLineWidht, 100%) !important;
    height: var(--uiTextUnderlinedLineHeight) !important;
    background-image: var(--textUnderlinedBackgroundImage, linear-gradient(to top, var(--textUnderlinedLineColor, currentColor) 30%, rgba(0, 0, 0, 0) 45%)) !important;
    position: absolute;
    left: var(--textUnderlinedLineLeft, 0) !important;
    bottom: var(--textUnderlinedLineBottom, 0) !important;
    z-index: var(--textUnderlinedLineZindex, -1) !important;
}

/*
=====
CORE
=====
*/

.link {
    --textUnderlinedLineHeight: 100%;
    --textUnderlinedLineGap: 0;
    --textUnderlinedLineColor: #35b6cc;
    padding-left: .75rem;
    padding-right: .75rem;
}

.link::after {
    will-change: width;
    transition: width .1s ease-out;
    transform: rotate(-2deg);
    transform-origin: left bottom;
}

.link:hover {
    --textUnderlinedLineWidht: 0;
}

.link:hover::after {
    transition-duration: .15s;
}

/*
* These styles for text decoration. The demo will be work without it
*/

.link {
    font-weight: 700;
    text-transform: uppercase;
}

.link:focus {
    outline: 2px solid #35b6cc;
    outline-offset: .5rem;
}

:root {
    --rLinkColor: #222;
}