.Rebellion-Section {

padding: 10vh 0;
width: 100%;
position: relative;
box-sizing: border-box;
&:first-of-type {
    padding-top: $action-bar-height-mobile + 50;

    @media screen and (min-width: $on-small) {
        padding-top: $action-bar-height + 50;
    }
}

}

.Rebellion-Wrapper-Wide{

max-width: -webkit-calc(#{$content-width-wide} - (#{$spacing-unit}));
max-width:         calc(#{$content-width-wide} - (#{$spacing-unit}));
margin-right: auto;
margin-left: auto;
padding-right: $spacing-unit;
padding-left: $spacing-unit;
@extend %clearfix;

}

.Rebellion-Wrapper-Narrow{

max-width: -webkit-calc(#{$content-width-narrow} - (#{$spacing-unit}));
max-width:         calc(#{$content-width-narrow} - (#{$spacing-unit}));
margin-right: auto;
margin-left: auto;
padding-right: $spacing-unit;
padding-left: $spacing-unit;
@extend %clearfix;

}

.Rebellion-Main {

display: flex;
flex: 1 0 auto;
flex-direction: column;
display: block; //Defaults to 'inline' in IE 11

}

.Rebellion-Big-Picture {

background-position: center;
background-size: cover;
height: 100vh;
padding: 0;

}

.Rebellion-Half-Picture {

background-position: center;
background-size: cover;
padding: 0;
height: 45vh;

}

.Rebellion-Near-Bottom {

position: absolute;
bottom: 10%;
left: 0;
right: 0;

}

.Rebellion-Flex-Line {

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;

}

.Rebellion-Button {

display: inline-block;
background-color: $accent-color;
color: $accent-text-color;
padding: 0.5em 1em;
border-radius: $rounding;
font-family: $header-font-stack;
transition: background-color 0.3s  ease-in-out;
font-weight: normal;
&:hover {
    text-decoration: none; 
    background-color: $accent-color-dark;
}
&:visited {
    color: $accent-text-color;
}

}

.Rebellion-PullQuote {

background-color: $brand-color;
color: $brand-text-color;
font-family: $header-font-stack;
text-align: center;
padding: 130px 0 100px 0;

h1 {
    text-align: left;
    margin: 1em 0;
    font-size: $base-font-size * 1.25 ;
}

@media screen and (min-width: 400px) {
    h1 { font-size: $base-font-size * 1.5;}
}

@media screen and (min-width: 800px) {
    h1 { font-size: $base-font-size * 2; }
}

}

.Rebellion-Post-Info {

display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: stretch;
padding-top: $spacing-unit*4;
font-size: $small-font-size;

> .box {
    padding: 0 $spacing-unit*2;
    flex: 0 1 300px;
}

}

.Rebellion-Blog-List{

li {
    list-style-type: none;
    counter-increment: list;
    position: relative;
    margin-left: 2.5em;
}

li:before {
    font-weight: bold;
    position: absolute;
    left: -2.6em;
    width: 2em;
    text-align: right;
    color: $text-color;
    font-family: $header-font-stack;
    font-size: 2em;
}

}

.Rebellion-Blog-Item {

display: flex;
flex-direction: column;
align-items: center;
background-color: $background-color;
box-shadow: 0 5px 10px $shadow-color;
padding: $spacing-unit;
padding-bottom: $spacing-unit /2;
margin: $spacing-unit;
max-width: $content-width-wide;
width: 90%;

& > img {
    margin: $spacing-unit 0 $spacing-unit/2 0;
}

.top {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;

    .date {
        flex-basis: 60px;
        flex-grow: 0;
        flex-shrink: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-family: $header-font-stack;
        padding-right: $spacing-unit;

        .day-number {
            font-size: $base-font-size * 2;
            border-bottom: 4px solid $xr-green;
            line-height: 1;
        }

        .month {
            font-size: $small-font-size; //$base-font-size * 0.8;
            color: $text-color-light;
        }
    }

    .description {
        line-height: 1;
        width: 100%;
        font-size: $small-font-size;

        h3, h4 {
            margin-top: 5px;
        }

        .bottom-line {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }
    }
}

}