symposion_app/static/src/scss/app.scss

@import url('https://fonts.googleapis.com/css?family=Space+Mono:400,700');

$primary: #0F7C11;
$secondary: #FFFFFF;

$font-family-base: "Space Mono" !default;
$headings-font-family: "Space Mono";

$font-size-base: 1rem;
$h1-font-size: $font-size-base * 4.75;
$h2-font-size: $font-size-base * 2.5;
$h3-font-size: $font-size-base * 1.875;

$line-height-base: 1.6875;
$headings-line-height: 1.05;

$padding-left-default: 5.3125rem;

body {
    overflow-x: hidden;
}

.navbar-brand {
    width: 200px;

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

.text-page {
    h2 {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }
    
    h1 {
        padding-bottom: 6rem;
    }
}

.text-upper {
    text-transform: uppercase;
}

.navbar-collapse {
    margin-left: $padding-left-default;
}


.navbar-toggler {
    border: 0 !important;
    
    &.green-toggler {
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(15,124,17, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
        }
    }

    &.white-toggler {
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
        }
    }
} 


html {
    font-size: 16px;
}

footer {
    margin-top: 12rem;
    padding-left: $padding-left-default;
    color: $primary;
    font-size: 0.81rem
}

#hero {
    width: 100%;
    padding-left: $padding-left-default;
    padding-right: 5.3125rem;
}

.green-block {
    margin-top: 16rem;
    margin-bottom: 8rem;
    padding-top: 24rem;
}

li.nav-item {
    height: 2.75rem;

    &.active > a.nav-link {
        font-weight: 700;
    
        &:before {
            content: "•";
            margin-right: -4px;
        }
    }
}

main.container-fluid {
    padding: 0;
}

@import "nav.scss";
@import "bootstrap.scss";


.content {
    //padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: $padding-left-default / 3 !important;
    padding-right: $padding-left-default / 3 !important; 

    @include media-breakpoint-up(md) {
        padding-left: $padding-left-default !important;
        padding-right: 5.3125rem !important;    
    }
}

.homepage-venue {
    padding-bottom: 0px;
    margin-bottom: 0px;
    
    @include media-breakpoint-up(sm) {
        text-align: right;

        h2 {
            float: left;
        }
    }   
}

.sidescroll-container {
    overflow-y: hidden;
}


.sidescroll {    
    margin-bottom: -30px;
    padding-bottom: 30px;
    background: linear-gradient(0deg, $primary 50%, $secondary 50%) !important;

    @include media-breakpoint-up(md) {
        padding-left: $padding-left-default !important;   
    }

    display: flex;
    flex-wrap: nowrap;
    cursor: grab;

    div ~ div {
        margin-left: 15px;
    }

    div {
        min-width: 30%;

        @include media-breakpoint-down(sm) {
            min-width: 80%;
        }    

        img {
            max-width: 100%;
            height: auto;
        }
    }
   
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
        display: none;
    }
}

#map {
    width: 100%;
    height: 480px;
    filter: grayscale(100%);
}

.btn-lg {
    padding: 0.8rem 4.5rem;
    font-size: 1rem;
    line-height: 1.5;
}

.btn {
    padding: 0.4rem 2.25rem;
    font-size: 1rem;
    border-radius: 0;
    text-transform: uppercase;
}

.jumbotron {
    border-radius: 0;
    background-color: rgba(204, 213, 197, 0.1);
    border: 1px $primary solid;
    color: $primary;
    padding: 5rem 6rem ;
}

.col-form-label, .form-check-label {
    font-weight: bold;
}

.form-text.text-muted {
    color: $primary !important;
    margin-bottom: 1rem;
}

fieldset {
    blockquote {
        font-size: 80%;
    }
}

.form-control {
    border-radius: 0;
    border: 2px $primary solid;

    &:focus {
        border: 2px $primary solid;
    }
}

label.form-check-label {
    display: flex;
    align-items: center
}

h3 {
    text-transform: uppercase;
}


main {
    a {
        color: #f5843e;
        font-weight: 600;
    }
}

.card {
    min-width: 20rem;
}

ul.messagelist {
    margin-bottom: 0;
}

label.list-label {
    font-weight: bold;
}

.nav-pills>.nav-item {
    background-color: #f3f3f3;

    a {
        color: $primary;
    }
}