/*-----------------
1. Google font
------------------*/

@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

/*-------------------
2. Theme Default CSS
--------------------*/

body {
    font-family: 'Lora', serif;
    background: #111111;
    font-style: normal;
    font-weight: normal;
    line-height: 1.765;
    color: #757575;
}

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

.bg-light {
    background: white;
}

.bg-primary {
    background: #39b54a !important;
}

.text-primary {
    color: #39b54a !important;
}

.text-light {
    color: white !important;
}

.text-dark {
    color: #757575;
}

.full-width {
    width: 100%
}

.active {
    color: #39b54a;
}

.w-30 {
    width: 30%;
}

/*-------------------
2. Buttons
--------------------*/

.btn {
    font-family: "montserrat-medium", sans-serif;
    font-size: 0.7rem;
    border: none;
    border-radius: 0rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    padding: 0.8rem 2rem 0.8rem 2rem;
}

.btn:hover, .btn:focus, .btn:active, .btn.active {
    background-color: #39b54a;
    box-shadow: #39b54a;
    border: none;
}

.btn-primary {
    background: #39b54a;
}

.btn.btn-primary:disabled {
    background-color: #39b54a;
}

.btn-outline-primary {
    color: #39b54a;
    border: 1px solid #39b54a;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active .btn-outline-primary.active {
    background-color: #39b54a;
    box-shadow: #39b54a;
    border: none;
}

/*-------------------
2. typography & general theme styles
--------------------*/

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "montserrat-medium", sans-serif;
    color: #000000;
    text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
    margin-top: 2rem;
    margin-bottom: 1.8rem;
}

h5, .h5, h6, .h6 {
    margin-top: 1rem;
}

h1, .h1 {
    font-size: 3.6rem;
    line-height: 1.25;
    letter-spacing: -.1rem;
}

h2, .h2 {
    font-size: 3rem;
    line-height: 1.3;
}

h3, .h3 {
    font-size: 2.4rem;
    line-height: 1.25;
}

h4, .h4 {
    font-size: 2.1rem;
    line-height: 1.286;
}

h5, .h5 {
    font-size: 1.2rem;
    line-height: 1.313;
}

h6, .h6 {
    font-size: 1.3rem;
    line-height: 1.385;
    text-transform: uppercase;
    letter-spacing: .16rem;
}

/*-------------------
2. Links
--------------------*/

a {
    color: white;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

a:hover, a:focus, a:active {
    color: #39b54a;
}

a:hover, a:active {
    outline: 0;
}

/*-------------------
2. Font awesome
--------------------*/

.fa-check {
    margin-right: 2rem;
}

/*-------------------
2. Forms
--------------------*/

textarea {
    resize: none;
}

.form-control {
    margin-bottom: 1rem;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.form-control:focus {
    background-color: transparent;
    box-shadow: none;
    opacity: 0.5;
    border-bottom: 1px solid #39b54a;
    border-radius: 0;
}

.form_content {
    font-family: "montserrat-light", sans-serif;
    color: rgba(255, 255, 255, 0.4);
}

.form_content h3 {
    margin-top: 0;
    margin-bottom: 2rem;
    color: #FFFFFF;
}


/*-------------------
2. Header
--------------------*/


.header-logo {
    font-family: 'Montserrat', sans-serif;
    position: absolute;
    left: 40px;
    top: 30px;
    color: #fff;
    font-size: 25px;
    display: block;
    text-transform: uppercase;
    font-weight: 900;
}

/*-------------------
2. Navbar
--------------------*/

.navbar {
    font-family: 'Montserrat', sans-serif;
}

.navbar-brand {
    float: left;
    color: #fff;
    padding-left: 0;
    font-size: 20px;
    display: block;
    text-transform: uppercase;
    font-weight: 900;
}

.navbar-toggler {
    color: white;
    font-size: 20px;
    display: block;
    text-transform: uppercase;
    font-weight: 900;
}

.navbar.solid {
    background: #111111;
    transition: background-color 1s ease 0s;
}

/*.navbar-collapse {*/
/*    background: #111111;*/
/*}*/

/*-------------------
2. Base Section
--------------------*/

section {
    text-align: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

section h1 {
    color: white;
}

/*section img {*/
/*    max-width: 100%;*/
/*    height: auto;*/
/*}*/

.subhead {
    line-height: 1.7rem;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    color: #39b54a;
    margin-top: 0;
    margin-bottom: 0;
}

.subhead-dark {
    color: black;
}

.subhead-light {
    color: white;
}


/*-------------------
2. Hero Section
--------------------*/

#hero {
    background-repeat: no-repeat;
    background-position: 100% 100%;
    /*position: relative;*/
    height: 600px;
    background-size: cover;
    background-image: url('https://images.pexels.com/photos/274192/pexels-photo-274192.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
}

/*.s_hero {*/
/*    color: white;*/
/*    padding-top: 5rem;*/
/*    padding-bottom: 1rem;*/
/*}*/

.s_hero h1 {
    margin-top: 0rem;
    margin-bottom: 1rem;
}

.overlay {
    margin-top: 4rem;
    margin-bottom: 1rem;
    background-color: rgba(0, 0, 0, 0.4);
}

/*-------------------
2. About Section
--------------------*/
.s_about {
    background-color: #39b54a !important;
    color: #010507;
    position: relative;
}

/*-------------------
2. Contact Section
--------------------*/

.s_contact {
    display: block;
    background-color: #151515;
    background-image: url('/static/public/images/contact-bg.jpg');
    background-repeat: no-repeat;
    background-position: center, center;
    position: relative;
}

.s_contact .row {
    background-color: rgba(0, 0, 0, 0.4);
}

.contact_primary {
    padding: 4rem 4rem;
}

.contact_secondary {
    padding: 4rem 4rem;
    background-color: rgba(0, 0, 0, 0.4);
}

.contact_info {
    margin-bottom: 2rem;
}

.contact_info h5 {
    margin-top: 0;
    color: #39b54a;
}

/*-------------------
2. Register Section
--------------------*/

section.s_register {
    padding-top: 0;
    padding-bottom: 0;
}

/*-------------------
2. Login Section
--------------------*/

section.s_login {
    padding-top: 0;
    padding-bottom: 0;
}