/*---------------
	Grid.css
---------------*/

html {
    box-sizing: border-box;
    -ms-overflow-style: scrollbar
}

*, *:before, *:after {
    box-sizing: inherit
}

/* sd_flex container */
.sd .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important
}

.sd .row-middle {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important
}

.sd .n_row:nth-child(2n) {
    flex-direction: row-reverse !important
}

.sd .column {
    display: flex !important;
    flex-direction: column !important
}

.sd .nowrap {
    flex-wrap: nowrap !important
}

/*justify-content*/
.sd .row-start {
    justify-content: flex-start !important
}

.sd .row-end {
    justify-content: flex-end !important
}

.sd .row-center {
    justify-content: center !important
}

.sd .row-between {
    justify-content: space-between !important
}

.sd .row-around {
    justify-content: space-around !important
}

/*align-items*/
.sd .row-top {
    align-items: flex-start !important
}

.sd .row-bottom {
    align-items: flex-end !important
}

.sd .row-baseline {
    align-items: baseline !important
}

.sd .row-stretch {
    align-items: stretch !important
}

/* flex item */
.sd .w-100 {
    flex: 0 0 100px;
    max-width: 100px
}

.sd .w-150 {
    flex: 0 0 150px;
    max-width: 150px
}

.sd .w-200 {
    flex: 0 0 200px;
    max-width: 200px
}

.sd .w-250 {
    flex: 0 0 250px;
    max-width: 250px
}

.sd .w-300 {
    flex: 0 0 300px;
    max-width: 300px
}

.sd .w-350 {
    flex: 0 0 350px;
    max-width: 350px
}

.sd .w-400 {
    flex: 0 0 400px;
    max-width: 400px
}

.sd .w-450 {
    flex: 0 0 450px;
    max-width: 450px
}

.sd .w-500 {
    flex: 0 0 500px;
    max-width: 500px
}

.sd .w-550 {
    flex: 0 0 550px;
    max-width: 550px
}

.sd .w-600 {
    flex: 0 0 600px;
    max-width: 600px
}

/*align-self*/
.sd .col-top {
    align-self: flex-start
}

.sd .col-bottom {
    align-self: flex-end
}

.sd .col-middle {
    align-self: center
}

.sd .col-baseline {
    align-self: baseline
}

.sd .col-stretch {
    align-self: stretch
}

/*all col*/
.sd .col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    min-width: 0;
    position: relative
}

.sd .col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none
}

.sd .col-1 {
    flex-basis: calc(100%/12*1 - 0.5rem);
    max-width: calc(100%/12*1 - 0.5rem)
}

.sd .col-2 {
    flex-basis: calc(100%/12*2 - 0.5rem);
    max-width: calc(100%/12*2 - 0.5rem)
}

.sd .col-3 {
    flex-basis: calc(100%/12*3 - 0.5rem);
    max-width: calc(100%/12*3 - 0.5rem)
}

.sd .col-4 {
    flex-basis: calc(100%/12*4 - 0.5rem);
    max-width: calc(100%/12*4 - 0.5rem)
}

.sd .col-5 {
    flex-basis: calc(100%/12*5 - 0.5rem);
    max-width: calc(100%/12*5 - 0.5rem)
}

.sd .col-6 {
    flex-basis: calc(100%/12*6 - 0.5rem);
    max-width: calc(100%/12*6 - 0.5rem)
}

.sd .col-7 {
    flex-basis: calc(100%/12*7 - 0.5rem);
    max-width: calc(100%/12*7 - 0.5rem)
}

.sd .col-8 {
    flex-basis: calc(100%/12*8 - 0.5rem);
    max-width: calc(100%/12*8 - 0.5rem)
}

.sd .col-9 {
    flex-basis: calc(100%/12*9 - 0.5rem);
    max-width: calc(100%/12*9 - 0.5rem)
}

.sd .col-10 {
    flex-basis: calc(100%/12*10 - 0.5rem);
    max-width: calc(100%/12*10 - 0.5rem)
}

.sd .col-11 {
    flex-basis: calc(100%/12*11 - 0.5rem);
    max-width: calc(100%/12*11 - 0.5rem)
}

.sd .col-12 {
    flex-basis: 100%;
    max-width: 100%
}

/*display*/
@media (max-width:992px) {
    .sd .col-d {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }

    .sd .col-d-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .sd .col-d-1 {
        flex-basis: calc(100%/12*1 - 0.5rem);
        max-width: calc(100%/12*1 - 0.5rem)
    }

    .sd .col-d-2 {
        flex-basis: calc(100%/12*2 - 0.5rem);
        max-width: calc(100%/12*2 - 0.5rem)
    }

    .sd .col-d-3 {
        flex-basis: calc(100%/12*3 - 0.5rem);
        max-width: calc(100%/12*3 - 0.5rem)
    }

    .sd .col-d-4 {
        flex-basis: calc(100%/12*4 - 0.5rem);
        max-width: calc(100%/12*4 - 0.5rem)
    }

    .sd .col-d-5 {
        flex-basis: calc(100%/12*5 - 0.5rem);
        max-width: calc(100%/12*5 - 0.5rem)
    }

    .sd .col-d-6 {
        flex-basis: calc(100%/12*6 - 0.5rem);
        max-width: calc(100%/12*6 - 0.5rem)
    }

    .sd .col-d-7 {
        flex-basis: calc(100%/12*7 - 0.5rem);
        max-width: calc(100%/12*7 - 0.5rem)
    }

    .sd .col-d-8 {
        flex-basis: calc(100%/12*8 - 0.5rem);
        max-width: calc(100%/12*8 - 0.5rem)
    }

    .sd .col-d-9 {
        flex-basis: calc(100%/12*9 - 0.5rem);
        max-width: calc(100%/12*9 - 0.5rem)
    }

    .sd .col-d-10 {
        flex-basis: calc(100%/12*10 - 0.5rem);
        max-width: calc(100%/12*10 - 0.5rem)
    }

    .sd .col-d-11 {
        flex-basis: calc(100%/12*11 - 0.5rem);
        max-width: calc(100%/12*11 - 0.5rem)
    }

    .sd .col-d-12 {
        flex-basis: 100%;
        max-width: 100%
    }
}

/*tablet*/
@media (max-width:768px) {
    .sd .col-t {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }

    .sd .col-t-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .sd .col-t-1 {
        flex-basis: calc(100%/12*1 - 0.5rem);
        max-width: calc(100%/12*1 - 0.5rem)
    }

    .sd .col-t-2 {
        flex-basis: calc(100%/12*2 - 0.5rem);
        max-width: calc(100%/12*2 - 0.5rem)
    }

    .sd .col-t-3 {
        flex-basis: calc(100%/12*3 - 0.5rem);
        max-width: calc(100%/12*3 - 0.5rem)
    }

    .sd .col-t-4 {
        flex-basis: calc(100%/12*4 - 0.5rem);
        max-width: calc(100%/12*4 - 0.5rem)
    }

    .sd .col-t-5 {
        flex-basis: calc(100%/12*5 - 0.5rem);
        max-width: calc(100%/12*5 - 0.5rem)
    }

    .sd .col-t-6 {
        flex-basis: calc(100%/12*6 - 0.5rem);
        max-width: calc(100%/12*6 - 0.5rem)
    }

    .sd .col-t-7 {
        flex-basis: calc(100%/12*7 - 0.5rem);
        max-width: calc(100%/12*7 - 0.5rem)
    }

    .sd .col-t-8 {
        flex-basis: calc(100%/12*8 - 0.5rem);
        max-width: calc(100%/12*8 - 0.5rem)
    }

    .sd .col-t-9 {
        flex-basis: calc(100%/12*9 - 0.5rem);
        max-width: calc(100%/12*9 - 0.5rem)
    }

    .sd .col-t-10 {
        flex-basis: calc(100%/12*10 - 0.5rem);
        max-width: calc(100%/12*10 - 0.5rem)
    }

    .sd .col-t-11 {
        flex-basis: calc(100%/12*11 - 0.5rem);
        max-width: calc(100%/12*11 - 0.5rem)
    }

    .sd .col-t-12 {
        flex-basis: 100%;
        max-width: 100%
    }
}

/*phone*/
@media (max-width:576px) {
    .sd .row-p {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap
    }

    .sd .col-p {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }

    .sd .col-p-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .sd .order-p-1 {
        order: 1
    }

    .sd .order-p-2 {
        order: 2
    }

    .sd .col-p-1 {
        flex-basis: calc(100%/12*1 - 0.5rem);
        max-width: calc(100%/12*1 - 0.5rem)
    }

    .sd .col-p-2 {
        flex-basis: calc(100%/12*2 - 0.5rem);
        max-width: calc(100%/12*2 - 0.5rem)
    }

    .sd .col-p-3 {
        flex-basis: calc(100%/12*3 - 0.5rem);
        max-width: calc(100%/12*3 - 0.5rem)
    }

    .sd .col-p-4 {
        flex-basis: calc(100%/12*4 - 0.5rem);
        max-width: calc(100%/12*4 - 0.5rem)
    }

    .sd .col-p-5 {
        flex-basis: calc(100%/12*5 - 0.5rem);
        max-width: calc(100%/12*5 - 0.5rem)
    }

    .sd .col-p-6 {
        flex-basis: calc(100%/12*6 - 0.5rem);
        max-width: calc(100%/12*6 - 0.5rem)
    }

    .sd .col-p-7 {
        flex-basis: calc(100%/12*7 - 0.5rem);
        max-width: calc(100%/12*7 - 0.5rem)
    }

    .sd .col-p-8 {
        flex-basis: calc(100%/12*8 - 0.5rem);
        max-width: calc(100%/12*8 - 0.5rem)
    }

    .sd .col-p-9 {
        flex-basis: calc(100%/12*9 - 0.5rem);
        max-width: calc(100%/12*9 - 0.5rem)
    }

    .sd .col-p-10 {
        flex-basis: calc(100%/12*10 - 0.5rem);
        max-width: calc(100%/12*10 - 0.5rem)
    }

    .sd .col-p-11 {
        flex-basis: calc(100%/12*11 - 0.5rem);
        max-width: calc(100%/12*11 - 0.5rem)
    }

    .sd .col-p-12 {
        flex-basis: 100%;
        max-width: 100%
    }
}

/*only phone*/
@media (min-width:576px) {
    .sd .only-p {
        display: none !important
    }
}