/*
Theme Name: UnderStrap Child
Theme URI: https://wp-themes.com/understrap
Author: ChildThemeWP.com
Author URI: https://childthemewp.com
Description: My WordPress UnderStrap child theme.
Template: understrap
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Version: 1.0.0
Text Domain: understrap-child
*/

/* GENERAL */
@font-face {
	font-family: 'Qanelas-Regular';
	src: url(./../fonts/Qanelas-Regular.eot);
	src: local('☺'), url(./../fonts/Qanelas-Regular.woff) format('woff'), url(./../fonts/Qanelas-Regular.ttf) format('truetype'), url(./../images/Qanelas-Regular.svg) format('svg');
	font-style: normal;
}
@font-face {
	font-family: 'Qanelas-Bold';
	src: url(./../fonts/Qanelas-Bold.eot);
	src: local('☺'), url(./../fonts/Qanelas-Bold.woff) format('woff'), url(./../fonts/Qanelas-Bold.ttf) format('truetype'), url(./../images/Qanelas-Bold.svg) format('svg');
	font-style: normal;
}
@font-face {
	font-family: 'Inter-Regular';
	src: url(./../fonts/Inter-Regular.eot);
	src: local('☺'), url(./../fonts/Inter-Regular.woff) format('woff'), url(./../fonts/Inter-Regular.ttf) format('truetype'), url(./../images/Inter-Regular.svg) format('svg');
	font-style: normal;
}
@font-face {
	font-family: 'Inter-Bold';
	src: url(./../fonts/Inter-Bold.eot);
	src: local('☺'), url(./../fonts/Inter-Bold.woff) format('woff'), url(./../fonts/Inter-Regular.ttf) format('truetype'), url(./../images/Inter-Regular.svg) format('svg');
	font-style: normal;
}
body {
    background-color: #000!important;
}
.site-main {
    width: 100%;
}
h1 {
    background: -webkit-linear-gradient(#E3BB23, #FD7614);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    font-size: 50px!important;
    line-height: 62px!important;
    font-family: 'Qanelas-Bold';
}
h2 {
    color: #FED94B;
    font-size: 36px;
    line-height: 29px;
    text-transform: uppercase;
    font-family: 'Qanelas-Bold';
}
h3 {
    font-size: 28px!important;
    line-height: 42px!important;
    font-weight: 600;
    color: #fff;
    font-family: 'Qanelas-Bold';
}
p {
    font-size: 20px;
    line-height: 30px!important;
    font-weight: 500;
    color: #fff;
    font-family: 'Qanelas-Regular';
}
#main-nav {
    background-color: transparent!important;
    padding-top: 20px;
}
#main-nav img {
    width: 100%;
}
input[type="text"],
#mc_embed_signup input.email {
    background-color: #252525;
    border-radius: 16px;
    border: 1px solid #242424;
    padding: 18px 12px;
    color: #fff;
    width: 70%;
    margin-right: 20px;
}
input[type="submit"] {
    background-color: #FED94B;
    border-radius: 8px;
    border: 0;
    padding: 18px 20px;
    color: #252525;
    width: calc( 30% - 25px);
    font-weight: 500;
}
label {
    color: #fff;
    width: 100%;
    display: block;
}
#page-wrapper {
    padding-top: 100px;
}


/* HERO */
#hero {
    position: relative;
}
#hero:after {
    content: '';
    position: absolute;
    top: -300px;
    right: -150px;
    border: 18px solid #FED94B;
    width: 830px;
    height: 830px;
    border-radius: 50%;
    z-index: -1;
}
#hero:before {
    content: '';
    position: absolute;
    top: -45%;
    left: 0;
    width: 100%;
    height: 121%;
    background: #111111;
    transform: skewY(6deg);
    z-index: -2;
}
#hero p {
    max-width: 85%;
    margin-top: 30px;
}
#hero .col-sm-5 img {
    top: -60px;
    position: relative;
    transform: scale(1.15);
    right: -40px;
}
.sign {
    margin: 42px auto 34px;
    display: block;
}
#hero .col-sm-7 > div {
    max-width: 85%;
}
.join-form p {
    margin-bottom: 20px;
    font-size: 18px;
    text-align: center;
    max-width: 100%!important;
}
#hero .col-sm-7 {
    flex: 0 0 64%;
    max-width: 64%;
}
#hero .col-sm-5 {
    flex: 0 0 36%;
    max-width: 36%;
}
.form {
    max-width: 450px;
    margin: auto;;
}
.form small {
    opacity: 0.7;
    display: block;
    width: 100%;
    color: #fff;
    margin-top: 8px;
}
#twoway {
    margin-top: 130px;
}
#twoway h1 {
    text-align: center;
    margin-bottom: 60px;
}
.react {
    margin-top: 30px;
}
.react > div {
    align-items: center;
}
.react p {
    margin-bottom: 0;
}
.react h2, .speak h2 {
    margin-bottom: 40px;
}
.speak {
    margin-top: -60px;
}
#feed {
    margin-top: 130px;
    position: relative;
}
#feed img {
    margin-top: -100px;
}
.trapezoid {
    top: -65%;
    right: 27%;
    position: absolute;
    width: 880px;
    height: 0;
    border-right: 40px solid transparent;
    border-left: 140px solid transparent;
    border-bottom: 1920px solid #111111;
    transform: rotate(-90deg);
}
#feed .col-sm-6 {
    display: flex;
    align-items: center;
}
#feed .col-sm-6 p {
    margin-top: -15%;
}
#feed:after {
    content: '';
    position: absolute;
    width: 215px;
    height: 215px;
    border: 30px solid #FED94B;
    border-radius: 50%;
    top: -145px;
    right: -100px;
}
#feed:before {
    content: '';
    position: absolute;
    width: 185px;
    height: 185px;
    border: 20px solid #FED94B;
    border-radius: 50%;
    bottom: -145px;
    left: -100px;
    background-color: #1c1c1c;
}
#fan {
    margin-top: 130px;
}
#fan h1 {
    margin-bottom: 100px;
}
#fan h2 {
    margin-bottom: 40px;
}
#fan .row {
    align-items: center;
}
#fan img {
    max-width: 80%;
}
#join {
    margin-top: 230px;
    position: relative;
}
#join .trapezoid {
    transform: rotate(90deg);
    border-right-width: 90px;
    border-left-width: 60px;
    border-bottom-color: #1c1c1c;
    top: -115%;
    z-index: -1;
    width: 730px;
    right: 31%;
}
#join img {
    margin-top: -110px;
}
#join .join-form {
    margin-top: 140px;
}
#join:after {
    content: '';
    position: absolute;
    width: 720px;
    height: 720px;
    border: 18px solid #FED94B;
    top: -50%;
    right: -10%;
    border-radius: 50%;
    z-index: -2;

}
#join:before {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    border: 62px solid #FED94B;
    bottom: -50%;
    left: -10%;
    border-radius: 50%;
    z-index: 0;

}
#join .col-sm-5 {
    padding-right: 0;
}


/* FOOTER */
#footerlinktochildthemewp {
    display: none;
}
#wrapper-footer {
    margin-top: 360px;
    position: relative;
    font-family: 'Inter-Bold';
}
#wrapper-footer p,
#wrapper-footer a {
    font-family: 'Inter-Bold';
    font-size: 16px;
    line-height: 20px;
    color: #fff;
}
#wrapper-footer p {
    opacity: 0.7;
}
#wrapper-footer .container-fluid, #main-nav {
    padding-left: 60px;
    padding-right: 60px;
}
#wrapper-footer img {
    width: 100%;
    margin-top: -10px;
}
.site-info {
    display: flex;
    justify-content: space-between;
}
#wrapper-footer .trapezoid {
    top: -930px;
    right: 46%;
    position: absolute;
    width: 150px;
    height: 0;
    border-right: 0px solid transparent;
    border-left: 20px solid transparent;
    border-bottom: 1920px solid #111111;
    transform: rotate(90deg);
}


/* TERMS */
#terms .site-main > .container {
    max-width: 900px!important;
    position: relative;
}
.terms-page #wrapper-footer {
    margin-top: 100px;
}
.terms-page h1 {
    text-transform: initial;
    font-size: 28px!important;
    line-height: 32px!important;
}
.terms-page #page-wrapper {
    padding-top: 50px;
}
.terms-page p, .terms-page li {
    font-size: 14px;
    line-height: 20px!important;
    color: rgba(255,255,255,0.8);
    font-family: 'Inter-Regular';
}
.terms-page p span,
.terms-page span {
    font-weight: bold;
}
.terms-page p > span {
    display: block;
    margin-bottom: 10px;
}
.terms-page p strong {
    margin-bottom: 10px;
    display: block;
    font-size: 16px;
    color: rgba(255,255,255,1);
    margin-top: 24px;
}
.terms-page strong ~ br {
    display: none;
}
::marker {
    color: #FED94B;
    font-weight: 700;
}
ul ::marker {
    color: #FED94B;
    font-weight: 700;
    font-size: 22px;
}
.terms-page li {
    margin-bottom: 12px;
    padding-left: 8px;
}
.terms-page ul li {
    padding-left: 0px;
}
.date {
    position: absolute;
    top: -50px;
    right: 0;
    opacity: 0.5;
    font-weight: 400;
    text-align: right;
}
.page-template-page-privacy #wrapper-footer,
.page-template-page-terms #wrapper-footer {
    margin-top: 140px;
}
#wrapper-footer .trapezoid {
    border-right: 4px solid transparent!important;
}


/* RESPONSIVE */
@media screen and (max-width:1400px) {

    #hero:after {
        top: -450px;
        right: -420px;
    }
}

/* RESPONSIVE */
@media (max-width:991px) and (min-width:575px) {

    .speak {
        margin-top: 30px;
    }
    #fan {
        margin-top: 240px;
    }
}

/* MOBILE */
@media screen and (max-width:574px) {

    #hero:after,
    .navbar-dark .navbar-toggler,
    #hero .col-sm-5,
    #feed:after,
    #feed:before,
    #join:after,
    #join:before,
    #hero:before,
    .react h2,
    #join .form small {
        display: none;
    }
    #hero .col-sm-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .trapezoid {
        display: none;
    }
    .site-main > .row {
        margin: 0;
        padding: 0 15px;
    }
    #hero p,
    #hero .col-sm-7 > div {
        max-width: 100%;
    }
    h1 {
        text-align: center;
        font-size: 32px!important;
        line-height: 36px!important;
    }
    h2 {
        font-size: 26px!important;
        line-height: 30px!important;
        text-align: center;
    }
    h6 {
        font-size: 20px!important;
        line-height: 32px!important;
    }
    #page-wrapper {
        padding-top: 43px;
    }
    p {
        font-size: 18px;
    }
    input[type="text"],
    #mc_embed_signup input.email {
        width: 100%;
    }
    input[type="submit"] {
        width: auto;
        padding: 8px 20px;
        display: block;
        margin: 20px auto 0;
    }
    .form {
        display: flex;
        flex-direction: column;
    }
    .form small {
        order: -1;
        margin-bottom: 12px;
        text-align: center;
    }
    #twoway {
        margin-top: 40px;
    }
    #twoway h1 {
        margin-bottom: 30px;
    }
    #twoway h6 {
        margin-bottom: 20px;
    }
    #twoway .row .col-sm-6:nth-child(2) {
        order: -1;
        margin-bottom: 30px;
    }
    .speak {
        margin-top: 30px;
    }
    .react img {
        max-width: 190px;
        margin: -30px auto 10px;
        order: -1
    }
    #feed {
        background-color: #111;
        position: relative;
    }
    #feed:after {
        content: '';
        position: absolute;
        top: -40px;
        left: 0;
        width: 100%;
        height: 100px;
        background: #111111;
        transform: skewY(-5deg);
        z-index: -2;
        display: block;
        border: 0;
        border-radius: inherit;
        right: inherit;
    }
    #feed::before {
        content: '';
        position: absolute;
        bottom: -40px;
        left: 0;
        width: 100%;
        height: 100px;
        background: #111111;
        transform: skewY(10deg);
        z-index: -2;
        display: block;
        border: 0;
        border-radius: inherit;
        right: inherit;
    }
    #feed img {
        margin-top: 0;
    }
    #feed .col-sm-6 p {
        margin-top: 20px;
    }
    #feed h6 {
        text-align: left;
        margin-top: 35px;
        margin-bottom: 10px;
        font-family: 'Qanelas-Regular';
        font-size: 18px!important;
    }
    #fan h1 {
        margin-bottom: 30px;
    }
    #fan img {
        margin: auto;
        display: block;
        margin-bottom: 40px;
    }
    #join {
        overflow: hidden;
        padding-bottom: 140px;
    }
    #join .col-sm-6.offset-sm-1 {
        order: -1;
    }
    #join img {
        margin-top: 0;
        margin-bottom: 60px;
    }
    #join,
    #join .join-form {
        margin-top: 40px;
    }
    #join .col-sm-5 {
        background-color: #1c1c1c;
        margin-left: -15px;
        margin-right: -15px;
        width: calc( 100% + 30px);
        padding-right: 30px;
        padding-left: 30px;
    }
    #join .col-sm-5:after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: -15px;
        width: calc( 100% + 30px );
        height: 200px;
        background: #1c1c1c;
        transform: skewY(-10deg);
        z-index: -2;
        display: block;
        border: 0;
        border-radius: inherit;
        right: inherit;
    }
    #join .col-sm-5:before {
        content: '';
        position: absolute;
        top: -290px;
        left: -15px;
        width: calc( 100% + 30px );
        height: 360px;
        background: #1c1c1c;
        transform: skewY(5deg);
        z-index: -2;
        display: block;
        border: 0;
        border-radius: inherit;
        right: inherit;
    }
    #wrapper-footer {
        overflow: hidden;
        margin-top: 50px;
        padding-top: 50px;
    }
    #wrapper-footer .trapezoid {
        display: block;
        top: inherit;
        bottom: -845px;
        width: 300px;
        border-bottom-color: #1c1c1c;
        border-left: 40px solid transparent;
    }
    .site-info {
        flex-flow: column;
        text-align: center;
    }
    .site-info a {
        order: -1;
        max-width: 240px;
        margin: auto;
        margin-bottom: 40px;
    }
    #wrapper-footer p:first-child {
        font-weight: 600;
        font-size: 16px;
    }
    #wrapper-footer p:last-child {
        font-weight: 400;
        font-size: 14px;
    }
    #wrapper-footer .container-fluid {
        padding: 0;
    }
    .terms-page h1 {
        text-align: left;
    }
    .terms-page #wrapper-footer {
        margin-top: 20px;
    }
    #terms .site-main > .container {
        padding-left: 30px;
        padding-right: 30px;
    }
    #wrapper-footer a {
        font-size: 14px;
    }
    #wrapper-footer .trapezoid {
        border-right: 73px solid transparent!important;
    }
    .page-template-page-privacy #wrapper-footer,
    .page-template-page-terms #wrapper-footer {
        margin-top: 50px;
    }
    .date {
        position: relative;
        top: 0;
    }
    #wrapper-footer p,
    #wrapper-footer a {
        font-family: 'Inter-Regular';
    }
}

/*This file was exported by "Export WP Page to Static HTML" plugin which created by ReCorp (https://myrecorp.com) */