logobridge/_sass/_layout.scss

/* Site Header
 * ============================================== */
    .site-header {
        min-height: 400px;
        background-color: $brand-color;
        background-image: url('');
        background-size: cover;
        background-position: center -150px;
        background-attachment: fixed;
        color: #fff;
        padding-top: 3em;

        @include media-query($on-palm) {
            min-height: 250px;
            background-position: center -250px;
        }
    }

    .site-header a {
    color: #FFF;
    text-decoration: underline;
    }

.button-download {
    background: #E2E2E2;
    color: #000;
    border: #E2E2E2;
    border-radius: 10px;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 24px;
    box-sizing: border-box;
    cursor: pointer;
}

    .button-free {
    display: inline-block;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600;
    text-transform: uppercase;
    border: 3px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 12px 20px;

    &:hover {
    background-color: #fff !important;
    color: #000 !important;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }
    }

    .button-submit {
    display: inline-block;
    text-decoration: none !important;
    color: #fff !important;
    background-color: #257BAD; 
    font-size: 16px !important;
    font-weight: 600;
    text-transform: uppercase;
    border: 3px solid #257BAD;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 12px 20px;
    margin-left: 15px;
    cursor: pointer;

    &:hover {
    background-color: transparent !important;
    color: #257BAD !important;
    border: 3px solid #257BAD;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }
    }

    .button-premium {
    display: inline-block;
    text-decoration: none !important;
    color: #fff !important;
    background-color: #257BAD; 
    font-size: 16px !important;
    font-weight: 600;
    text-transform: uppercase;
    border: 3px solid #257BAD;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 12px 20px;
    margin-left: 15px;

    &:hover {
    background-color: #fff !important;
    color: #000 !important;
    border: 3px solid #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }

    @include media-query($on-phone) {
        margin-top: 20px;
        margin-left: 0px;
        }
    }

    .site-header .hitline {
    font-size: 48px !important;
    }

    .site-header p {
    font-size: 20px;
    }

    .site-header h1 {
        display: block;
        color: #D8D8D8;
        font-size: 48px !important;
        line-height: 40px;
        letter-spacing: 2px;
        text-align: center;
        padding-top: 20px;
        clear: both;
        font-family: 'Overpass';

        @include media-query($on-palm) {
            font-size:48px !important;
            letter-spacing: 0px;
        }
    }

    .site-nav {
        float: right;
        font-size: 28px;
        line-height: 56px;
        margin-right: 50px;
        padding-bottom: 100px;

        .page-link {
            line-height: $base-line-height;
            font-weight: bold;
            letter-spacing: 0.05em;

            &:not(:first-child) {
                margin-left: 20px;
            }
        }

        .page-link:hover {
            opacity: 0.8;
        }

        @include media-query($on-palm) {
            padding-bottom: 10px;
        }
    }

/* Site Footer
 * ============================================== */
    .footer {
        padding-bottom: 2em;
        margin: auto;
        font-size: 16px;
        font-family: "Overpass";
        color: #000;
    }

/* Individual Posts
 * ============================================== */
    .page-content {
        padding: $spacing-unit 0;
        text-align: justify;
    }

    .page-heading {
        font-size: 20px;
        padding-top: 2px;
    }

/* Archive
 * ============================================== */
    .post-list {
        margin-left: 0;
        list-style: none;

        > li {
            display: block;
            padding: 0.1em 1.5em;
        }

    }

    .post-link {
        font-family: 'Overpass';
        font-weight: 300;
        font-size: 1.5em;
        letter-spacing: -1px;
        color: #454545;
        display: block;
        width: 100%;

        @include media-query($on-palm) {
            font-size: 1.33em;
        }
    }

    .post-meta {
        font-size: $small-font-size;
        color: $grey-color-light;
        text-transform: uppercase;
        display: inline-block;
    }

/* Post Format
 * ============================================== */
    .post-header {
        margin-bottom: $spacing-unit;
    }

    .post-title {
        font-size: 42px;
        letter-spacing: -1px;
        line-height: 1;


        @include media-query($on-laptop) {
            font-size: 36px;
        }
    }

    .post-content {
        margin-bottom: $spacing-unit;
        /*
        h2 {
            font-size: 32px;

            @include media-query($on-laptop) {
                font-size: 28px;
            }
        }

        h3 {
            font-size: 26px;

            @include media-query($on-laptop) {
                font-size: 22px;
            }
        }

        h4 {
            font-size: 20px;

            @include media-query($on-laptop) {
                font-size: 18px;
            }
        } */
    }
    
/* Spacings and Generic
 * ============================================== */
    .bold {
      font-weight: 600;
    }

    .pt-1 {
       padding-top: 1rem;
    }

     .pb-1 {
       padding-bottom: 1rem;
    }
    
    .pt-2 {
       padding-top: 2rem;
    }

    .pt-3 {
        padding-top: 3rem;
    }

    .pb-2 {
       padding-bottom: 2rem;
    }

    .mb-3 {
        margin-bottom: 30px;
    }

    .non-justify {
    text-align: initial;
    }

    .heading {
    font-size: 36px;
    }

    .align-left {
    text-align: left;
    }

     .align-right {
    text-align: right;
    }

    .center {
    text-align: center;
    }

    .bg-mute {
    background-color: #F4F4F4;
    min-height: 500px;
    margin-top: 2rem;
    padding-top: 4rem;
    font-size: 20px;
    }

    .bg-mute hr {
    padding-left: 50px;
    padding-right: 50px;
    border: 1px solid #D8D8D8;
    max-width: 500px;
    margin: 0 auto;
    }

    .grayscale {
    opacity: 0.65;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    }

    .box {
    padding: 40px;
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: -22.5px;
    margin-top: 25px;
    }

.hover-box:hover .button-download {
     background-color: #000;
     color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

.hover-box:hover .box {
        border: 1px solid #000;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.col {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    line-height: 1.4;

    @include media-query($on-phone) {
         flex-basis: auto;
    }

    @include media-query($on-test) {
         flex-basis: auto;
    }
}