html {
    height: 100%;
}

body {
    position: relative;
    font-family: Montserrat, sans-serif;
    color: #1e1e24;
    padding-top: 4.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand {
    font-family: Lato, sans-serif;
    font-weight: 700;
    color: #1e1e24;
}

.thin {
    font-family: Lato, sans-serif;
    font-weight: 300;
}

/* ---------------------------------- Colors */

.prime-color {
    color: #2220b3;
}

.second-color {
    color: #ff7700;
}

.primeLight-color {
    color: #4DB5FF;
}

.logo-green {
    color: #00b3b3;
}

/* ---------------------------------- Text */

.text-black {
    color: rgb(30, 30, 36);
}

.text-black75 {
    color: rgba(30, 30, 36, 0.749);
}

.text-black50 {
    color: rgba(30, 30, 36, 0.502);
}

.text-black25 {
    color: rgba(30, 30, 36, 0.251);
}

.text-black10 {
    color: rgba(30, 30, 36, 0.102);
}

.text-black5 {
    color: rgba(30, 30, 36, 0.051);
}

.text-red {
    color: #b30000;
}

.text-white {
    color: #fafafa;
}

.navbar-text {
    color: #1e1e24;
}

/* ---------------------------------- Background Colours */

.bg-gradient-primary-to-secondary {
    background-color: #0061f2 !important;
    background-image: linear-gradient(135deg,
            #2220b3 0%,
            #ff770080 100%) !important;
}

.bg-prime {
    background-color: #2220b3 !important;
}

.bg-second {
    background-color: #ff770080 !important;
}

.bg-primeLight {
    background-color: #4DB5FF;
}

.bg-light {
    background-color: hsla(41, 79%, 46%, 0.847) !important;
}

.bg-logo-green {
    background-color: #00b3b3;
}

.bg-white {
    background-color: #fafafa;
}

/* ---------------------------------- Links */

.nav-link {
    color: rgba(31, 31, 36, 0.9) !important;
    font-size: 1.125rem;
}

.nav-link:hover {
    text-decoration: none;
    color: #ff7700 !important;
}

.dropdown-menu a:hover {
    background-color: #1e1e240d;
}

.page-link {
    color: #4DB5FF;
}

.page-link:hover {
    color: #4DB5FF;
}

.page-active {
    background-color: #2220b3 !important;
    border-color: #2220b3 !important;
}

.post-link {
    text-decoration: none;
    color: #1e1e24;
}

.post-link:hover {
    text-decoration: underline;
    color: #4745ac;
}

.cat-link {
    color: #1e1e24;
}

.cat-link:hover {
    text-decoration: underline;
    color: #4745ac;
}

footer,
footer a,
footer i {
    text-align: center;
    color: rgba(31, 31, 36, 0.65);
}

footer a:hover {
    text-decoration: underline;
    color: #ff7700 !important;
}

footer i:hover {
    text-decoration: none;
    color: #ff7700 !important;
}

footer i {
    padding: 1rem 0.5rem;
    font-size: 1.5rem;
}

.card {
    border: none;
    background-color: transparent;
}

.image-container {
    position: relative;
}

.image-flash {
    position: absolute;
    bottom: 5%;
    min-width: 30%;
    left: -4px;
}

.category-badge {
    color: #fafafa;
    background-color: #2220b3;
    text-transform: uppercase;
    padding: 6px;
}

.category-badge:hover {
    color: #1e1e24;
    background-color: #ff7700;
    border-color: #ff7700;
}

.recent-badge {
    color: #1e1e24;
    background-color: #ff7700;
    text-transform: uppercase;
    padding: 6px;
    transform: rotate(-15deg);
}

.first-row,
.second-row,
.third-row,
.fourth-row {
    padding: 4rem 0;
}

.third-row h4,
.third-row i {
    text-align: center;
    color: rgba(30, 30, 36, 0.5);
}

.third-row i {
    font-size: 3rem;
    color: #ff7700;
}

/* ------------------------------------------- Wrappers */

.container-wrapper {}

.opaque-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #00000080;
}

.message-container {
    position: fixed;
    z-index: 9999;
}

/* ------------------------------------------- Skew Wrappers */

/* https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms/ */

.skew-wrapper-orange {
    background: #ff7700;
    position: relative;
    z-index: 1;
}

.skew-wrapper-orange:after {
    background: inherit;
    bottom: 0;
    content: '';
    display: block;
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    transform: skewY(-1.5deg);
    transform-origin: 100%;
    z-index: -1;
}

.skew-wrapper-blue {
    background: #2220b3;
    position: relative;
    z-index: 1;
}

.skew-wrapper-blue:before {
    background: inherit;
    top: 0;
    content: '';
    display: block;
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    transform: skewY(1.5deg);
    transform-origin: 100%;
    z-index: -1;
}

.skew-wrapper-blue:after {
    background: inherit;
    bottom: 0;
    content: '';
    display: block;
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    transform: skewY(-1.5deg);
    transform-origin: 100%;
    z-index: -1;
}

/* ----------------------------  forms formatting */

.forms,
.forms h4,
.forms p {
    color: #fafafa !important;
}

.forms a:hover {
    color: #ff7700;
}

/* ---------------------------- allauth forms formatting */

.allauth-form-inner-content p {
    margin-top: 3rem;
    /* mt-4 */
    color: #1e1e24;
}

.allauth-form-inner-content h1 {
    color: #ff7700 !important;
}

.allauth-form-inner-content input {
    border-color: #1e1e24;
    border-radius: 5px;
}

.allauth-form-inner-content label:not([for="id_remember"]) {
    display: none;
}

.allauth-form-inner-content input::placeholder {
    color: rgba(31, 31, 36, 0.5);
}

.allauth-form-inner-content button,
.allauth-form-inner-content input[type="submit"] {
    /* btn */
    display: inline-block;
    font-weight: 400;
    color: #fafafa;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #00b3b3;
    border: 1px solid #00b3b3;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 5px;

    /* Forward effect Hover.css */
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.allauth-form-inner-content button:hover,
.allauth-form-inner-content input[type="submit"]:hover {
    color: #00b3b3;
    background-color: #fafafa;
    border-color: #00b3b3;

    transition-property: transform;
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
}

.allauth-form-inner-content a {
    color: var(--info);
}

.verification-sent,
.sign-out {
    margin: 3rem auto;
}

/*-------------------------------------- Buttons */

.form-btn {
    color: #fafafa;
    background-color: #00b3b3;
    border: 1px solid #00b3b3;
}

.form-btn:hover {
    color: #00b3b3;
    background-color: #fafafa;
    border-color: #00b3b3;
}

.btn-update {
    color: #00b3b3;
    background-color: var(--white);
    border-color: #00b3b3;
}

.btn-update:hover {
    color: var(--white);
    background-color: #00b3b3;
    border: 1px solid #00b3b3;
}

.btn-like {
    color: #b30000;
    border: none;
    background: transparent;
}

.btn-like:hover,
.btn-like:active {
    color: #b30000;
    background: transparent;
    border: none;
}

/* Float https://ianlunn.github.io/Hover/ */
.hvr-float {
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-float:hover,
.hvr-float:focus,
.hvr-float:active {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

/* Icon Pulse https://ianlunn.github.io/Hover/ */
@-webkit-keyframes hvr-icon-pulse {
    25% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

    75% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@keyframes hvr-icon-pulse {
    25% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

    75% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

.hvr-icon-pulse {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-icon-pulse .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-pulse:hover .hvr-icon,
.hvr-icon-pulse:focus .hvr-icon,
.hvr-icon-pulse:active .hvr-icon {
    -webkit-animation-name: hvr-icon-pulse;
    animation-name: hvr-icon-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

/* Icon Spin https://ianlunn.github.io/Hover/ */
.hvr-icon-spin {
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-icon-spin .hvr-icon {
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.hvr-icon-spin:hover .hvr-icon,
.hvr-icon-spin:focus .hvr-icon,
.hvr-icon-spin:active .hvr-icon {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Icon Grow https://ianlunn.github.io/Hover/ */
.hvr-icon-grow {
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.hvr-icon-grow .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-grow:hover .hvr-icon,
.hvr-icon-grow:focus .hvr-icon,
.hvr-icon-grow:active .hvr-icon {
    -webkit-transform: scale(1.3) translateZ(0);
    transform: scale(1.3) translateZ(0);
}

/* Icon Forward https://ianlunn.github.io/Hover/ */
.hvr-icon-forward {
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
}

.hvr-icon-forward .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-forward:hover .hvr-icon,
.hvr-icon-forward:focus .hvr-icon,
.hvr-icon-forward:active .hvr-icon {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
}

/* Forward */
.hvr-forward {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-forward:hover,
.hvr-forward:focus,
.hvr-forward:active {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
}