/*
    Flexboxes responsive styles
*/

.flex-wrapper {
	display: -webkit-flex;
    display: flex;
    flex: 1 1 100%;
    flex-flow: row wrap;
    justify-content: flex-start;
    width: 100%;
}

.flex-col {
    flex-flow: column nowrap;
    align-content: stretch;
    height: 100%;
}

.flex-block {
    align-content: space-between;
    position: relative;
    box-sizing: border-box;
}

.flex-center-wrapper {
	display: -webkit-flex;
    display: flex;
    height: 100%;
    margin: auto;
    min-height: 100%;
    width: 100%;
}

.flex-center-wrapper-inner {
    margin: auto;
}

.flex-align-items-center {
    align-items: center;
}

.flex-vert-center-wrapper {
    width: 100%;
}

.flex-box {
    align-content: flex-start;
    position: relative;
    box-sizing: border-box;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-between {
    justify-content: space-between;
}

.flex-centered-block {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

    
.flex-xs-12 {
    width: 100%;
}
.flex-xs-11 {
    width: 91.6667%;
}
.flex-xs-10 {
    width: 83.3333%;
}
.flex-xs-9 {
    width: 75%;
}
.flex-xs-8 {
    width: 66.6667%;
}
.flex-xs-7 {
    width: 58.3333%;
}
.flex-xs-6 {
    width: 50%;
}
.flex-xs-5 {
    width: 41.6667%;
}
.flex-xs-4 {
    width: 33.3333%;
}
.flex-xs-3 {
    width: 25%;
}
.flex-xs-2 {
    width: 16.6667%;
}
.flex-xs-1 {
    width: 8.33333%;
}

/*Responsive */
    

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575px) { 

    .flex-reverse-xs {
        flex-direction: column-reverse;
    }
    
    /* Order sorting for xs devices   */
    .sort-order-xs-1 {
        order: 1;
    }
    .sort-order-xs-2 {
        order: 2;
    }
    .sort-order-xs-3 {
        order: 3;
    }
    .sort-order-xs-4 {
        order: 4;
    }
    .sort-order-xs-5 {
        order: 5;
    }
    .sort-order-xs-6 {
        order: 6;
    }

}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
    .flex-sm-12 {
        width: 100%;
    }
    .flex-sm-11 {
        width: 91.6667%;
    }
    .flex-sm-10 {
        width: 83.3333%;
    } 
    .flex-sm-9 {
        width: 75%;
    }
    .flex-sm-8 {
        width: 66.6667%;
    }
    .flex-sm-7 {
        width: 58.3333%;
    }
    .flex-sm-6 {
        width: 50%;
    }
    .flex-sm-5 {
        width: 41.6667%;
    }
    .flex-sm-4 {
        width: 33.3333%;
    }
    .flex-sm-3 {
        width: 25%;
    }
    .flex-sm-2 {
        width: 16.6667%;
    }
    .flex-sm-1 {
        width: 8.33333%;
    }    
    
    /* Order sorting for xs devices   */
    .sort-order-sm-1 {
        order: 1;
    }
    .sort-order-sm-2 {
        order: 2;
    }
    .sort-order-sm-3 {
        order: 3;
    }
    .sort-order-sm-4 {
        order: 4;
    }
    .sort-order-sm-5 {
        order: 5;
    }
    .sort-order-sm-6 {
        order: 6;
    }

}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
    .flex-md-12 {
        width: 100%; 
    }
    .flex-md-11 {
        width: 91.6667%;
    }
    .flex-md-10 {
        width: 83.3333%;
    }
    .flex-md-9 { 
        width: 75%;
    }
    .flex-md-8 {
        width: 66.6667%;
    }
    .flex-md-7 {
        width: 58.3333%;
    }
    .flex-md-6 {
        width: 50%;
    }
    .flex-md-5 {
        width: 41.6667%;
    }
    .flex-md-4 {
        width: 33.3333%;
    }
    .flex-md-3 {
        width: 25%;
    }
    .flex-md-2 {
        width: 16.6667%;
    }
    .flex-md-1 {
        width: 8.33333%; 
    }  
    
    /* Order sorting for xs devices   */
    .sort-order-md-1 {
        order: 1;
    }
    .sort-order-md-2 {
        order: 2;
    }
    .sort-order-md-3 {
        order: 3;
    }
    .sort-order-md-4 {
        order: 4;
    }
    .sort-order-md-5 {
        order: 5;
    }
    .sort-order-md-6 {
        order: 6;
    }  

}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px)  { 
    .flex-lg-12 {
        width: 100%; 
    }
    .flex-lg-11 {
        width: 91.6667%;
    }
    .flex-lg-10 {
        width: 83.3333%;
    }
    .flex-lg-9 { 
        width: 75%;
    }
    .flex-lg-8 {
        width: 66.6667%;
    }
    .flex-lg-7 {
        width: 58.3333%;
    }
    .flex-lg-6 {
        width: 50%;
    }
    .flex-lg-5 {
        width: 41.6667%;
    }
    .flex-lg-4 {
        width: 33.3333%;
    }
    .flex-lg-3 {
        width: 25%;
    }
    .flex-lg-2 {
        width: 16.6667%;
    }
    .flex-lg-1 {
        width: 8.33333%; 
    }    
    
}

/* Extra large devices (large desktops, 1400px and up)*/
@media (min-width: 1440px) { 
    .flex-xl-12 {
        width: 100%; 
    }
    .flex-xl-11 {
        width: 91.6667%;
    }
    .flex-xl-10 {
        width: 83.3333%;
    }
    .flex-xl-9 { 
        width: 75%;
    }
    .flex-xl-8 {
        width: 66.6667%;
    }
    .flex-xl-7 {
        width: 58.3333%;
    }
    .flex-xl-6 {
        width: 50%;
    }
    .flex-xl-5 {
        width: 41.6667%;
    }
    .flex-xl-4 {
        width: 33.3333%;
    }
    .flex-xl-3 {
        width: 25%;
    }
    .flex-xl-2 {
        width: 16.6667%;
    }
    .flex-xl-1 {
        width: 8.33333%; 
    }    

}



/* Extra large devices (large desktops, 1800px and up)*/
@media (min-width: 1800px) { 
    .flex-xxl-12 {
        width: 100%; 
    }
    .flex-xxl-11 {
        width: 91.6667%;
    }
    .flex-xxl-10 {
        width: 83.3333%;
    }
    .flex-xxl-9 { 
        width: 75%;
    }
    .flex-xxl-8 {
        width: 66.6667%;
    }
    .flex-xxl-7 {
        width: 58.3333%;
    }
    .flex-xxl-6 {
        width: 50%;
    }
    .flex-xxl-5 {
        width: 41.6667%;
    }
    .flex-xxl-4 {
        width: 33.3333%;
    }
    .flex-xxl-3 {
        width: 25%;
    }
    .flex-xxl-2 {
        width: 16.6667%;
    }
    .flex-xxl-1 {
        width: 8.33333%; 
    }    

}