/**
  * Container base styles.
  */

.container,
.container-full-width,
.container-pp,
.container-pl,
.container-tp,
.container-tl {
    @include container;
}


/**
  * Media queries for containers, set container size per media query.
  */

@media (min-width: $phone-landscape-size) {
    .container,
    .container-tl,
    .container-tp,
    .container-pl {
        max-width: $phone-landscape-size - $breakmargin;
    }
}

@media (min-width: $tablet-portrait-size) {
    .container,
    .container-tl,
    .container-tp {
        max-width: $tablet-portrait-size - $breakmargin;
    }
}

@media (min-width: $tablet-landscape-size) {
    .container,
    .container-tl {
        max-width: $tablet-landscape-size - $breakmargin;
    }
}

@media (min-width: $desktop-size) {
    .container {
        max-width: $desktop-size - $breakmargin;
    }
}

/**
  * Rows & Columns
  */

.row {
    margin-right: -1.5rem;
    margin-left: -1.5rem;
    @media(min-width: $size-switch) {
        margin-right: -1rem;
        margin-left: -1rem;
    }
    &:before {
        content: " ";
        display: table;
    }
    &:after {
        content: " ";
        display: table;
        clear: both;
    }
    .col-pp-10,
    .col-pp-20,
    .col-pp-25,
    .col-pp-30,
    .col-pp-33,
    .col-pp-40,
    .col-pp-50,
    .col-pp-60,
    .col-pp-70,
    .col-pp-66,
    .col-pp-75,
    .col-pp-80,
    .col-pp-90,
    .col-pp-100,
    .col-pl-10,
    .col-pl-20,
    .col-pl-25,
    .col-pl-30,
    .col-pl-33,
    .col-pl-40,
    .col-pl-50,
    .col-pl-60,
    .col-pl-66,
    .col-pl-70,
    .col-pl-75,
    .col-pl-80,
    .col-pl-90,
    .col-pl-100,
    .col-tp-10,
    .col-tp-20,
    .col-tp-25,
    .col-tp-30,
    .col-tp-33,
    .col-tp-40,
    .col-tp-50,
    .col-tp-60,
    .col-tp-66,
    .col-tp-70,
    .col-tp-75,
    .col-tp-80,
    .col-tp-90,
    .col-tp-100,
    .col-tl-10,
    .col-tl-20,
    .col-tl-25,
    .col-tl-30,
    .col-tl-33,
    .col-tl-40,
    .col-tl-50,
    .col-tl-60,
    .col-tl-66,
    .col-tl-70,
    .col-tl-75,
    .col-tl-80,
    .col-tl-90,
    .col-tl-100,
    .col-dt-10,
    .col-dt-20,
    .col-dt-25,
    .col-dt-30,
    .col-dt-33,
    .col-dt-40,
    .col-dt-50,
    .col-dt-60,
    .col-dt-66,
    .col-dt-70,
    .col-dt-75,
    .col-dt-80,
    .col-dt-90,
    .col-dt-100 {
        position: relative;
        width: 100%;
        float: left;
        padding-right: 1.5rem;
        padding-left: 1.5rem;
        @media(min-width: $size-switch) {
            padding-right: 1rem;
            padding-left: 1rem;
        }
    }
    .col-pp-10 {
        width: 10%;
    }
    .col-pp-20 {
        width: 20%;
    }
    .col-pp-25 {
        width: 25%;
    }
    .col-pp-30 {
        width: 30%;
    }
    .col-pp-33 {
        width: 33.3333%;
    }
    .col-pp-40 {
        width: 40%;
    }
    .col-pp-50 {
        width: 50%;
    }
    .col-pp-60 {
        width: 60%;
    }
    .col-pp-66 {
        width: 66.6666%;
    }
    .col-pp-70 {
        width: 70%;
    }
    .col-pp-75 {
        width: 75%;
    }
    .col-pp-80 {
        width: 80%;
    }
    .col-pp-90 {
        width: 90%;
    }
    .col-pp-100 {
        width: 100%;
    }
    @media(min-width: $phone-landscape-size) {
        .col-pl-10 {
            width: 10%;
        }
        .col-pl-20 {
            width: 20%;
        }
        .col-pl-25 {
            width: 25%;
        }
        .col-pl-30 {
            width: 30%;
        }
        .col-pl-33 {
            width: 33.3333%;
        }
        .col-pl-40 {
            width: 40%;
        }
        .col-pl-50 {
            width: 50%;
        }
        .col-pl-60 {
            width: 60%;
        }
        .col-pl-66 {
            width: 66.6666%;
        }
        .col-pl-70 {
            width: 70%;
        }
        .col-pl-75 {
            width: 75%;
        }
        .col-pl-80 {
            width: 80%;
        }
        .col-pl-90 {
            width: 90%;
        }
        .col-pl-100 {
            width: 100%;
        }
    }
    @media(min-width: $tablet-portrait-size) {
        .col-tp-10 {
            width: 10%;
        }
        .col-tp-20 {
            width: 20%;
        }
        .col-tp-25 {
            width: 25%;
        }
        .col-tp-30 {
            width: 30%;
        }
        .col-tp-33 {
            width: 33.3333%;
        }
        .col-tp-40 {
            width: 40%;
        }
        .col-tp-50 {
            width: 50%;
        }
        .col-tp-60 {
            width: 60%;
        }
        .col-tp-66 {
            width: 66.6666%;
        }
        .col-tp-70 {
            width: 70%;
        }
        .col-tp-75 {
            width: 75%;
        }
        .col-tp-80 {
            width: 80%;
        }
        .col-tp-90 {
            width: 90%;
        }
        .col-tp-100 {
            width: 100%;
        }
    }
    @media(min-width: $tablet-landscape-size) {
        .col-tl-10 {
            width: 10%;
        }
        .col-tl-20 {
            width: 20%;
        }
        .col-tl-25 {
            width: 25%;
        }
        .col-tl-30 {
            width: 30%;
        }
        .col-tl-33 {
            width: 33.3333%;
        }
        .col-tl-40 {
            width: 40%;
        }
        .col-tl-50 {
            width: 50%;
        }
        .col-tl-60 {
            width: 60%;
        }
        .col-tl-66 {
            width: 66.6666%;
        }
        .col-tl-70 {
            width: 70%;
        }
        .col-tl-75 {
            width: 75%;
        }
        .col-tl-80 {
            width: 80%;
        }
        .col-tl-90 {
            width: 90%;
        }
        .col-tl-100 {
            width: 100%;
        }
    }
    @media(min-width: $desktop-size) {
        .col-dt-10 {
            width: 10%;
        }
        .col-dt-20 {
            width: 20%;
        }
        .col-dt-25 {
            width: 25%;
        }
        .col-dt-30 {
            width: 30%;
        }
        .col-dt-33 {
            width: 33.3333%;
        }
        .col-dt-40 {
            width: 40%;
        }
        .col-dt-50 {
            width: 50%;
        }
        .col-dt-60 {
            width: 60%;
        }
        .col-dt-66 {
            width: 66.6666%;
        }
        .col-dt-70 {
            width: 70%;
        }
        .col-dt-75 {
            width: 75%;
        }
        .col-dt-80 {
            width: 80%;
        }
        .col-dt-90 {
            width: 90%;
        }
        .col-dt-100 {
            width: 100%;
        }
    }
}


/**
  * Offsets for columns
  */

@media(max-width: $phone-landscape-size - 1) {
    .offset-pp-10 {
        margin-left: 10%;
    }
    .offset-pp-20 {
        margin-left: 20%;
    }
    .offset-pp-25 {
        margin-left: 25%;
    }
    .offset-pp-30 {
        margin-left: 30%;
    }
    .offset-pp-33 {
        margin-left: 33.3333%;
    }
    .offset-pp-40 {
        margin-left: 40%;
    }
    .offset-pp-50 {
        margin-left: 50%;
    }
    .offset-pp-60 {
        margin-left: 60%;
    }
    .offset-pp-66 {
        margin-left: 66.6666%;
    }
    .offset-pp-70 {
        margin-left: 70%;
    }
    .offset-pp-75 {
        margin-left: 75%;
    }
    .offset-pp-80 {
        margin-left: 80%;
    }
    .offset-pp-90 {
        margin-left: 90%;
    }
}

@media(min-width: $phone-landscape-size) and (max-width: $tablet-portrait-size - 1) {
    .offset-pl-10 {
        margin-left: 10%;
    }
    .offset-pl-20 {
        margin-left: 20%;
    }
    .offset-pl-25 {
        margin-left: 25%;
    }
    .offset-pl-30 {
        margin-left: 30%;
    }
    .offset-pl-33 {
        margin-left: 33.3333%;
    }
    .offset-pl-40 {
        margin-left: 40%;
    }
    .offset-pl-50 {
        margin-left: 50%;
    }
    .offset-pl-60 {
        margin-left: 60%;
    }
    .offset-pl-66 {
        margin-left: 66.6666%;
    }
    .offset-pl-70 {
        margin-left: 70%;
    }
    .offset-pl-75 {
        margin-left: 75%;
    }
    .offset-pl-80 {
        margin-left: 80%;
    }
    .offset-pl-90 {
        margin-left: 80%;
    }
}

@media(min-width: $tablet-portrait-size) and (max-width: $tablet-landscape-size - 1) {
    .offset-tp-10 {
        margin-left: 10%;
    }
    .offset-tp-20 {
        margin-left: 20%;
    }
    .offset-tp-25 {
        margin-left: 25%;
    }
    .offset-tp-30 {
        margin-left: 30%;
    }
    .offset-tp-33 {
        margin-left: 33.3333%;
    }
    .offset-tp-40 {
        margin-left: 40%;
    }
    .offset-tp-50 {
        margin-left: 50%;
    }
    .offset-tp-60 {
        margin-left: 60%;
    }
    .offset-tp-66 {
        margin-left: 66.6666%;
    }
    .offset-tp-70 {
        margin-left: 70%;
    }
    .offset-tp-75 {
        margin-left: 75%;
    }
    .offset-tp-80 {
        margin-left: 80%;
    }
    .offset-tp-90 {
        margin-left: 90%;
    }
}

@media(min-width: $tablet-landscape-size) and (max-width: $desktop-size - 1){
    .offset-tl-10 {
        margin-left: 10%;
    }
    .offset-tl-20 {
        margin-left: 20%;
    }
    .offset-tl-25 {
        margin-left: 25%;
    }
    .offset-tl-30 {
        margin-left: 30%;
    }
    .offset-tl-33 {
        margin-left: 33.3333%;
    }
    .offset-tl-40 {
        margin-left: 40%;
    }
    .offset-tl-50 {
        margin-left: 50%;
    }
    .offset-tl-60 {
        margin-left: 60%;
    }
    .offset-tl-66 {
        margin-left: 66.6666%;
    }
    .offset-tl-70 {
        margin-left: 70%;
    }
    .offset-tl-75 {
        margin-left: 75%;
    }
    .offset-tl-80 {
        margin-left: 80%;
    }
    .offset-tl-90 {
        margin-left: 90%;
    }
}

@media(min-width: $desktop-size) {
    .offset-dt-10 {
        margin-left: 10%;
    }
    .offset-dt-20 {
        margin-left: 20%;
    }
    .offset-dt-25 {
        margin-left: 25%;
    }
    .offset-dt-30 {
        margin-left: 30%;
    }
    .offset-dt-33 {
        margin-left: 33.3333%;
    }
    .offset-dt-40 {
        margin-left: 40%;
    }
    .offset-dt-50 {
        margin-left: 50%;
    }
    .offset-dt-60 {
        margin-left: 60%;
    }
    .offset-dt-66 {
        margin-left: 66.6666%;
    }
    .offset-dt-70 {
        margin-left: 70%;
    }
    .offset-dt-75 {
        margin-left: 75%;
    }
    .offset-dt-80 {
        margin-left: 80%;
    }
    .offset-dt-90 {
        margin-left: 90%;
    }
}


/**
  * Push classes for columns
  */

@media(max-width: $phone-landscape-size - 1) {
    .push-pp-10 {
        left: 10%;
    }
    .push-pp-20 {
        left: 20%;
    }
    .push-pp-25 {
        left: 25%;
    }
    .push-pp-30 {
        left: 30%;
    }
    .push-pp-33 {
        left: 33.3333%;
    }
    .push-pp-40 {
        left: 40%;
    }
    .push-pp-50 {
        left: 50%;
    }
    .push-pp-60 {
        left: 60%;
    }
    .push-pp-66 {
        left: 66.6666%;
    }
    .push-pp-70 {
        left: 70%;
    }
    .push-pp-75 {
        left: 75%;
    }
    .push-pp-80 {
        left: 80%;
    }
    .push-pp-90 {
        left: 90%;
    }
}

@media(min-width: $phone-landscape-size) and (max-width: $tablet-portrait-size - 1){
    .push-pl-10 {
        left: 10%;
    }
    .push-pl-20 {
        left: 20%;
    }
    .push-pl-25 {
        left: 25%;
    }
    .push-pl-30 {
        left: 30%;
    }
    .push-pl-33 {
        left: 33.3333%;
    }
    .push-pl-40 {
        left: 40%;
    }
    .push-pl-50 {
        left: 50%;
    }
    .push-pl-60 {
        left: 60%;
    }
    .push-pl-66 {
        left: 66.6666%;
    }
    .push-pl-70 {
        left: 70%;
    }
    .push-pl-75 {
        left: 75%;
    }
    .push-pl-80 {
        left: 80%;
    }
    .push-pl-90 {
        left: 90%;
    }
}

@media(min-width: $tablet-portrait-size) and (max-width: $tablet-landscape-size - 1) {
    .push-tp-10 {
        left: 10%;
    }
    .push-tp-20 {
        left: 20%;
    }
    .push-tp-25 {
        left: 25%;
    }
    .push-tp-30 {
        left: 30%;
    }
    .push-tp-33 {
        left: 33.3333%;
    }
    .push-tp-40 {
        left: 40%;
    }
    .push-tp-50 {
        left: 50%;
    }
    .push-tp-60 {
        left: 60%;
    }
    .push-tp-66 {
        left: 66.6666%;
    }
    .push-tp-70 {
        left: 70%;
    }
    .push-tp-75 {
        left: 75%;
    }
    .push-tp-80 {
        left: 80%;
    }
    .push-tp-90 {
        left: 90%;
    }
}

@media(min-width: $tablet-landscape-size) and (max-width: $desktop-size - 1) {
    .push-tl-10 {
        left: 10%;
    }
    .push-tl-20 {
        left: 20%;
    }
    .push-tl-25 {
        left: 25%;
    }
    .push-tl-30 {
        left: 30%;
    }
    .push-tl-33 {
        left: 33.3333%;
    }
    .push-tl-40 {
        left: 40%;
    }
    .push-tl-50 {
        left: 50%;
    }
    .push-tl-60 {
        left: 60%;
    }
    .push-tl-66 {
        left: 66.6666%;
    }
    .push-tl-70 {
        left: 70%;
    }
    .push-tl-75 {
        left: 75%;
    }
    .push-tl-80 {
        left: 80%;
    }
    .push-tl-90 {
        left: 90%;
    }
}

@media(min-width: $desktop-size) {
    .push-dt-10 {
        left: 10%;
    }
    .push-dt-20 {
        left: 20%;
    }
    .push-dt-25 {
        left: 25%;
    }
    .push-dt-30 {
        left: 30%;
    }
    .push-dt-33 {
        left: 33.3333%;
    }
    .push-dt-40 {
        left: 40%;
    }
    .push-dt-50 {
        left: 50%;
    }
    .push-dt-60 {
        left: 60%;
    }
    .push-dt-66 {
        left: 66.6666%;
    }
    .push-dt-70 {
        left: 70%;
    }
    .push-dt-75 {
        left: 75%;
    }
    .push-dt-80 {
        left: 80%;
    }
    .push-dt-90 {
        left: 90%;
    }
}


/**
  * Pull classes for columns
  */

@media(max-width: $phone-landscape-size - 1) {
    .pull-pp-10 {
        right: 10%;
    }
    .pull-pp-20 {
        right: 20%;
    }
    .pull-pp-25 {
        right: 25%;
    }
    .pull-pp-30 {
        right: 30%;
    }
    .pull-pp-33 {
        right: 33.3333%;
    }
    .pull-pp-40 {
        right: 40%;
    }
    .pull-pp-50 {
        right: 50%;
    }
    .pull-pp-60 {
        right: 60%;
    }
    .pull-pp-66 {
        right: 66.6666%;
    }
    .pull-pp-70 {
        right: 70%;
    }
    .pull-pp-75 {
        right: 75%;
    }
    .pull-pp-80 {
        right: 80%;
    }
    .pull-pp-90 {
        right: 90%;
    }
}

@media(min-width: $phone-landscape-size) and (max-width: $tablet-portrait-size - 1) {
    .pull-pl-10 {
        right: 10%;
    }
    .pull-pl-20 {
        right: 20%;
    }
    .pull-pl-25 {
        right: 25%;
    }
    .pull-pl-30 {
        right: 30%;
    }
    .pull-pl-33 {
        right: 33.3333%;
    }
    .pull-pl-40 {
        right: 40%;
    }
    .pull-pl-50 {
        right: 50%;
    }
    .pull-pl-60 {
        right: 60%;
    }
    .pull-pl-66 {
        right: 66.6666%;
    }
    .pull-pl-70 {
        right: 70%;
    }
    .pull-pl-75 {
        right: 75%;
    }
    .pull-pl-80 {
        right: 80%;
    }
    .pull-pl-90 {
        right: 90%;
    }
}

@media(min-width: $tablet-portrait-size) and (max-width: $tablet-landscape-size - 1) {
    .pull-tp-10 {
        right: 10%;
    }
    .pull-tp-20 {
        right: 20%;
    }
    .pull-tp-25 {
        right: 25%;
    }
    .pull-tp-30 {
        right: 30%;
    }
    .pull-tp-33 {
        right: 33.3333%;
    }
    .pull-tp-40 {
        right: 40%;
    }
    .pull-tp-50 {
        right: 50%;
    }
    .pull-tp-60 {
        right: 60%;
    }
    .pull-tp-66 {
        right: 66.6666%;
    }
    .pull-tp-70 {
        right: 70%;
    }
    .pull-tp-75 {
        right: 75%;
    }
    .pull-tp-80 {
        right: 80%;
    }
    .pull-tp-90 {
        right: 90%;
    }
}

@media(min-width: $tablet-landscape-size) and (max-width: $desktop-size - 1) {
    .pull-tl-10 {
        right: 10%;
    }
    .pull-tl-20 {
        right: 20%;
    }
    .pull-tl-25 {
        right: 25%;
    }
    .pull-tl-30 {
        right: 30%;
    }
    .pull-tl-33 {
        right: 33.3333%;
    }
    .pull-tl-40 {
        right: 40%;
    }
    .pull-tl-50 {
        right: 50%;
    }
    .pull-tl-60 {
        right: 60%;
    }
    .pull-tl-66 {
        right: 66.6666%;
    }
    .pull-tl-70 {
        right: 70%;
    }
    .pull-tl-75 {
        right: 75%;
    }
    .pull-tl-80 {
        right: 80%;
    }
    .pull-tl-90 {
        right: 90%;
    }
}

@media(min-width: $desktop-size) {
    .pull-dt-10 {
        right: 10%;
    }
    .pull-dt-20 {
        right: 20%;
    }
    .pull-dt-25 {
        right: 25%;
    }
    .pull-dt-30 {
        right: 30%;
    }
    .pull-dt-33 {
        right: 33.3333%;
    }
    .pull-dt-40 {
        right: 40%;
    }
    .pull-dt-50 {
        right: 50%;
    }
    .pull-dt-60 {
        right: 60%;
    }
    .pull-dt-66 {
        right: 66.6666%;
    }
    .pull-dt-70 {
        right: 70%;
    }
    .pull-dt-75 {
        right: 75%;
    }
    .pull-dt-80 {
        right: 80%;
    }
    .pull-dt-90 {
        right: 90%;
    }
}