.container{
    margin-left:auto;
    margin-right:auto;
    padding-left:15px;
    padding-right:15px
}
.container-fluid{
    width:100%;
    padding-left:15px;
    padding-right:15px
}
.row{
    display:flex;
    flex-wrap:wrap;
}
/**
 * col-xs-
 * col-sm-
 * col-md-
 * col-lg-
 * col-xl-
*/
.col-12,.col-xl-12,.col-lg-12,.col-md-12,.col-sm-12,.col-xs-12,
.col-11,.col-xl-11,.col-lg-11,.col-md-11,.col-sm-11,.col-xs-11,
.col-10,.col-xl-10,.col-lg-10,.col-md-10,.col-sm-10,.col-xs-10,
.col-9,.col-xl-9,.col-lg-9,.col-md-9,.col-sm-9,.col-xs-9,
.col-8,.col-xl-8,.col-lg-8,.col-md-8,.col-sm-8,.col-xs-8,
.col-7,.col-xl-7,.col-lg-7,.col-md-7,.col-sm-7,.col-xs-7,
.col-6,.col-xl-6,.col-lg-6,.col-md-6,.col-sm-6,.col-xs-6,
.col-5,.col-xl-5,.col-lg-5,.col-md-5,.col-sm-5,.col-xs-5,
.col-4,.col-xl-4,.col-lg-4,.col-md-4,.col-sm-4,.col-xs-4,
.col-3,.col-xl-3,.col-lg-3,.col-md-3,.col-sm-3,.col-xs-3,
.col-2,.col-xl-2,.col-lg-2,.col-md-2,.col-sm-2,.col-xs-2,
.col-1,.col-xl-1,.col-lg-1,.col-md-1,.col-sm-1,.col-xs-1{}

.col-12{
    flex:0 0 100%;
    width:100%;
    max-width:100%;
}
.col-11{
    flex:0 0 91.66666667%;
    width:91.66666667%;
    max-width:91.66666667%;
}
.col-10{
    flex:0 0 83.33333333%;
    width:83.33333333%;
    max-width:83.33333333%;
}
.col-9{
    flex:0 0 75%;
    width:75%;
    max-width:75%;
}
.col-8{
    flex:0 0 66.66666667%;
    width:66.66666667%;
    max-width:66.66666667%;
}
.col-7{
    flex:0 0 58.33333333%;
    width:58.33333333%;
    max-width:58.33333333%;
}
.col-6{
    flex:0 0 50%;
    width:50%;
    max-width:50%;
}
.col-5{
    flex:0 0 41.66666667%;
    width:41.66666667%;
    max-width:41.66666667%;
}
.col-4{
    flex:0 0 33.33333333%;
    width:33.33333333%;
    max-width:33.33333333%;
}
.col-3{
    flex:0 0 25%;
    width:25%;
    max-width:25%;
}
.col-2{
    flex:0 0 16.66666667%;
    width:16.66666667%;
    max-width:16.66666667%;
}
.col-1{
    flex:0 0 8.33333333%;
    width:8.33333333%;
    max-width:8.33333333%;
}

.col-xs-12{
    flex:0 0 100%;
    width:100%;
    max-width:100%;
}
.col-xs-11{
    flex:0 0 91.66666667%;
    width:91.66666667%;
    max-width:91.66666667%;
}
.col-xs-10{
    flex:0 0 83.33333333%;
    width:83.33333333%;
    max-width:83.33333333%;
}
.col-xs-9{
    flex:0 0 75%;
    width:75%;
    max-width:75%;
}
.col-xs-8{
    flex:0 0 66.66666667%;
    width:66.66666667%;
    max-width:66.66666667%;
}
.col-xs-7{
    flex:0 0 58.33333333%;
    width:58.33333333%;
    max-width:58.33333333%;
}
.col-xs-6{
    flex:0 0 50%;
    width:50%;
    max-width:50%;
}
.col-xs-5{
    flex:0 0 41.66666667%;
    width:41.66666667%;
    max-width:41.66666667%;
}
.col-xs-4{
    flex:0 0 33.33333333%;
    width:33.33333333%;
    max-width:33.33333333%;
}
.col-xs-3{
    flex:0 0 25%;
    width:25%;
    max-width:25%;
}
.col-xs-2{
    flex:0 0 16.66666667%;
    width:16.66666667%;
    max-width:16.66666667%;
}
.col-xs-1{
    flex:0 0 8.33333333%;
    width:8.33333333%;
    max-width:8.33333333%;
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xl{display:none}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width:575px)
{
    .container{width:100%}
    .text-left-xs{text-align:left}
    .text-center-xs{text-align:center}
    .text-right-xs{text-align:right}
    
    .visible-xs{display:block}
    .hidden-xs{display:none}
}
/* Small devices (landscape phones, less than 768px) */
@media (min-width:576px)
{
    .row{margin-left:-15px;margin-right:-15px}
    .col-12,.col-xl-12,.col-lg-12,.col-md-12,.col-sm-12,
    .col-11,.col-xl-11,.col-lg-11,.col-md-11,.col-sm-11,
    .col-10,.col-xl-10,.col-lg-10,.col-md-10,.col-sm-10,
    .col-9,.col-xl-9,.col-lg-9,.col-md-9,.col-sm-9,
    .col-8,.col-xl-8,.col-lg-8,.col-md-8,.col-sm-8,
    .col-7,.col-xl-7,.col-lg-7,.col-md-7,.col-sm-7,
    .col-6,.col-xl-6,.col-lg-6,.col-md-6,.col-sm-6,
    .col-5,.col-xl-5,.col-lg-5,.col-md-5,.col-sm-5,
    .col-4,.col-xl-4,.col-lg-4,.col-md-4,.col-sm-4,
    .col-3,.col-xl-3,.col-lg-3,.col-md-3,.col-sm-3,
    .col-2,.col-xl-2,.col-lg-2,.col-md-2,.col-sm-2,
    .col-1,.col-xl-1,.col-lg-1,.col-md-1,.col-sm-1{padding-left:15px;padding-right:15px}
    .container{padding-left:30px;padding-right:30px;}
}
@media (min-width:576px) and (max-width:767px)
{
    .container{width:576px}
    .text-left-sm{text-align:left}
    .text-center-sm{text-align:center}
    .text-right-sm{text-align:right}
    
    .visible-sm{display:block}
    .hidden-sm{display:none}
}
/* Medium devices (tablets, less than 992px) */
@media (min-width:768px) and (max-width:991px)
{
    .container{width:768px}
    .text-left-md{text-align:left}
    .text-center-md{text-align:center}
    .text-right-md{text-align:right}
    
    .visible-md{display:block}
    .hidden-md{display:none}
    
}
/* Large devices (desktops, less than 1200px) */
@media (min-width:992px) and (max-width:1199px)
{
    .container{width:992px}
    .text-left-lg{text-align:left}
    .text-center-lg{text-align:center}
    .text-right-lg{text-align:right}
    
    .visible-lg{display:block}
    .hidden-lg{display:none}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)
{
    .container{width:1200px}
    .text-left-xl{text-align:left}
    .text-center-xl{text-align:center}
    .text-right-xl{text-align:right}
    
    .visible-xl{display:block}
    .hidden-xl{display:none}
}

@media(min-width:576px)
{
    .col-sm-12{
        flex:0 0 100%;
        width:100%;
        max-width:100%;
    }
    .col-sm-11{
        flex:0 0 91.66666667%;
        width:91.66666667%;
        max-width:91.66666667%;
    }
    .col-sm-10{
        flex:0 0 83.33333333%;
        width:83.33333333%;
        max-width:83.33333333%;
    }
    .col-sm-9{
        flex:0 0 75%;
        width:75%;
        max-width:75%;
    }
    .col-sm-8{
        flex:0 0 66.66666667%;
        width:66.66666667%;
        max-width:66.66666667%;
    }
    .col-sm-7{
        flex:0 0 58.33333333%;
        width:58.33333333%;
        max-width:58.33333333%;
    }
    .col-sm-6{
        flex:0 0 50%;
        width:50%;
        max-width:50%;
    }
    .col-sm-5{
        flex:0 0 41.66666667%;
        width:41.66666667%;
        max-width:41.66666667%;
    }
    .col-sm-4{
        flex:0 0 33.33333333%;
        width:33.33333333%;
        max-width:33.33333333%;
    }
    .col-sm-3{
        flex:0 0 25%;
        width:25%;
        max-width:25%;
    }
    .col-sm-2{
        flex:0 0 16.66666667%;
        width:16.66666667%;
        max-width:16.66666667%;
    }
    .col-sm-1{
        flex:0 0 8.33333333%;
        width:8.33333333%;
        max-width:8.33333333%;
    }
}
@media(min-width:768px)
{
    .col-md-12{
        flex:0 0 100%;
        width:100%;
        max-width:100%;
    }
    .col-md-11{
        flex:0 0 91.66666667%;
        width:91.66666667%;
        max-width:91.66666667%;
    }
    .col-md-10{
        flex:0 0 83.33333333%;
        width:83.33333333%;
        max-width:83.33333333%;
    }
    .col-md-9{
        flex:0 0 75%;
        width:75%;
        max-width:75%;
    }
    .col-md-8{
        flex:0 0 66.66666667%;
        width:66.66666667%;
        max-width:66.66666667%;
    }
    .col-md-7{
        flex:0 0 58.33333333%;
        width:58.33333333%;
        max-width:58.33333333%;
    }
    .col-md-6{
        flex:0 0 50%;
        width:50%;
        max-width:50%;
    }
    .col-md-5{
        flex:0 0 41.66666667%;
        width:41.66666667%;
        max-width:41.66666667%;
    }
    .col-md-4{
        flex:0 0 33.33333333%;
        width:33.33333333%;
        max-width:33.33333333%;
    }
    .col-md-3{
        flex:0 0 25%;
        width:25%;
        max-width:25%;
    }
    .col-md-2{
        flex:0 0 16.66666667%;
        width:16.66666667%;
        max-width:16.66666667%;
    }
    .col-md-1{
        flex:0 0 8.33333333%;
        width:8.33333333%;
        max-width:8.33333333%;
    }
    
    .modal-dialog{width:600px;margin:30px auto}
    .modal-content{-webkit-box-shadow:0 5px 15px rgba(0, 0, 0, 0.5);box-shadow:0 5px 15px rgba(0, 0, 0, 0.5)}
    .modal-sm{width:300px}
}
@media(min-width:992px)
{
    .col-lg-12{
        flex:0 0 100%;
        width:100%;
        max-width:100%;
    }
    .col-lg-11{
        flex:0 0 91.66666667%;
        width:91.66666667%;
        max-width:91.66666667%;
    }
    .col-lg-10{
        flex:0 0 83.33333333%;
        width:83.33333333%;
        max-width:83.33333333%;
    }
    .col-lg-9{
        flex:0 0 75%;
        width:75%;
        max-width:75%;
    }
    .col-lg-8{
        flex:0 0 66.66666667%;
        width:66.66666667%;
        max-width:66.66666667%;
    }
    .col-lg-7{
        flex:0 0 58.33333333%;
        width:58.33333333%;
        max-width:58.33333333%;
    }
    .col-lg-6{
        flex:0 0 50%;
        width:50%;
        max-width:50%;
    }
    .col-lg-5{
        flex:0 0 41.66666667%;
        width:41.66666667%;
        max-width:41.66666667%;
    }
    .col-lg-4{
        flex:0 0 33.33333333%;
        width:33.33333333%;
        max-width:33.33333333%;
    }
    .col-lg-3{
        flex:0 0 25%;
        width:25%;
        max-width:25%;
    }
    .col-lg-2{
        flex:0 0 16.66666667%;
        width:16.66666667%;
        max-width:16.66666667%;
    }
    .col-lg-1{
        flex:0 0 8.33333333%;
        width:8.33333333%;
        max-width:8.33333333%;
    }
    
    .modal-lg {width:900px}
}
@media(min-width:1200px)
{
    .col-xl-12{
        flex:0 0 100%;
        width:100%;
        max-width:100%;
    }
    .col-xl-11{
        flex:0 0 91.66666667%;
        width:91.66666667%;
        max-width:91.66666667%;
    }
    .col-xl-10{
        flex:0 0 83.33333333%;
        width:83.33333333%;
        max-width:83.33333333%;
    }
    .col-xl-9{
        flex:0 0 75%;
        width:75%;
        max-width:75%;
    }
    .col-xl-8{
        flex:0 0 66.66666667%;
        width:66.66666667%;
        max-width:66.66666667%;
    }
    .col-xl-7{
        flex:0 0 58.33333333%;
        width:58.33333333%;
        max-width:58.33333333%;
    }
    .col-xl-6{
        flex:0 0 50%;
        width:50%;
        max-width:50%;
    }
    .col-xl-5{
        flex:0 0 41.66666667%;
        width:41.66666667%;
        max-width:41.66666667%;
    }
    .col-xl-4{
        flex:0 0 33.33333333%;
        width:33.33333333%;
        max-width:33.33333333%;
    }
    .col-xl-3{
        flex:0 0 25%;
        width:25%;
        max-width:25%;
    }
    .col-xl-2{
        flex:0 0 16.66666667%;
        width:16.66666667%;
        max-width:16.66666667%;
    }
    .col-xl-1{
        flex:0 0 8.33333333%;
        width:8.33333333%;
        max-width:8.33333333%;
    }
    
    .col-xl-offset-1{margin-left:8.33333333%}
}