/* css reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display: block;
}
body{
    line-height: 1;
}
ol,ul{
    list-style: none;
}
blockquote,q{
    quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after{
    content: '';
    content: none;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
html,body{
    overflow-x: hidden;
}
*{
    outline: none;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
/*input,textarea{
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}*/
textarea{
    resize: none;
}
/*::selection{
    background: transparent;
}
::-moz-selection{
    background: transparent;
}*/
::-webkit-scrollbar{
    display: none;
}
img{
    max-width: 100%;
    display: block; /*remove fantom padding*/
}
/* var */
:root{
    /* color */

    /* Bootstrap 4 Colors */
    --danger-color: #ff4444;
    --danger-color-dark: #cc0000;
    --warning-color: #ffbb33;
    --warning-color-dark: #ff8800;
    --success-color: #00c851;
    --success-color-dark: #007e33;
    --info-color: #33b5e5;
    --info-color-dark: #0099cc;

    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    /* MDB Colors */
    --default-color: #2bbbad;
    --default-color-dark: #00695c;
    --primary-color: #4285f4;
    --primary-color-dark: #0d47a1;
    --secondary-color: #aa66cc;
    --secondary-color-dar: #9933cc;

    /* Dark Theme */
    --elegant-color: #2e2e2e;
    --elegant-color-dark: #212121;
    --stylish-color: #4b515d;
    --stylish-color-dark: #3e4551;
    --unique-color: #3f729b;
    --unique-color-dark: #1c2331;
    --special-color: #37474f;
    --special-color-dark: #263238;

    /* Primary Palette */
    --darkblue: #142b44;
    --navblue: #1d508d;
    --lpblue: #297cbb;
    --Linkblue: #228ad6;
    --teal: #0fdebd;
    --green: #16c98d;
    --yellow: #feef6d;
    --orange: #ffc83f;
    --red: #fa5e5b;
    --plum: #bf538d;

    /*theme color*/
    --theme-blue: #48a9c5;
    --theme-blue-dark: #0085ad;
    --bs-dark: #212529;
    --bs-secondary: #6c757d;
    --bs-light: #f8f9fa;

    /* main text color full name*/
    --black: rgb(0, 0, 0);
    --dark: rgb(21, 21, 21);
    --chrome: rgb(56, 56, 56);
    --gray: rgb(104, 104, 104);
    --silver: rgb(148, 148, 148);
    --light: rgb(192, 192, 192);
    --subwhite: rgb(236, 236, 236);
    --white: rgb(255, 255, 255);

    /* main text color short name */
    --b: rgb(0, 0, 0);
    --d: rgb(21, 21, 21);
    --c: rgb(56, 56, 56);
    --g: rgb(104, 104, 104);
    --s: rgb(148, 148, 148);
    --l: rgb(192, 192, 192);
    --sw: rgb(236, 236, 236);
    --w: rgb(255, 255, 255);

    /* Bootstrap Shadow */
    --shadow_1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --shadow_2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --shadow_3: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    --shadow_4: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

    /* Weight */
    --fw-bold: 700;
    --fw-medium: 500;
    --fw-regular: 400;
    --fw-light: 300;
}
/* topology */
html{
    font-size: 21px;
}
body{
    /*line-height: 1.5;*/ /*standart*/
    line-height: 1.618;
}
small {
    font-size: 0.8rem;
    display: inline-block;
}
h1{
    font-size: calc(1.5rem + 1.5vw);
    line-height: 1.2;
}
h2{
    font-size: calc(1.325rem + .9vw);
    line-height: 1.2;
}
h3{
    font-size: calc(1.3rem + .6vw);
    line-height: 1.2;
}
h4{
    font-size: calc(1.275rem + .3vw);
    line-height: 1.2;
}
h5{
    font-size: 1.25rem;
    line-height: 1.2;
}
h6{
    font-size: 1rem;
    line-height: 1.2;
}
@media screen and (max-width: 1024px){
    html{
        font-size: 18px;
    }
}
/* style & grid */
body{
    font-family: 'Oswald', sans-serif;
    color: var(--bs-dark);
    font-weight: var(--fw-regular);
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}
footer{
    margin-top: auto;
}
button,a,input,textarea,input::placeholder,textarea::placeholder{
    font-weight: var(--fw-regular);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--bs-dark);
    border: none;
    border-radius: 3px;
    background: none;
    padding: 0;
    font-family: 'Oswald', sans-serif;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
input,textarea{
    border: 1px solid var(--bs-gray);
    padding: 8px 10px;
}
input:focus,textarea:focus{
    border: 1px solid var(--bs-dark);
}
input::placeholder,textarea::placeholder{
    color: var(--l);
}
button,a.button{
    border: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 8px 20px;
    box-shadow: var(--shadow_1);
}
button:hover,a.button:hover{
    box-shadow: var(--shadow_2);
}
button > *,a.button > *{
    display: flex;
    justify-content: center;
    align-items: center;
}
i{
    font-style: italic;
    font-weight: var(--fw-light);
}
strong{
    font-weight: var(--fw-bold);
}
.wrapper{
    display: block;
    margin: 0 auto;
}
.full-height {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}
/* xs */
@media screen and (min-width: 320px){
    .xs-5{
        width: 5%;
    }
    .xs-10{
        width: 10%;
    }
    .xs-15{
        width: 15%;
    }
    .xs-20{
        width: 20%;
    }
    .xs-25{
        width: 25%;
    }
    .xs-30{
        width: 30%;
    }
    .xs-33{
        width: calc(100% / 3);
    }
    .xs-35{
        width: 35%;
    }
    .xs-40{
        width: 40%;
    }
    .xs-45{
        width: 45%;
    }
    .xs-50{
        width: 50%;
    }
    .xs-55{
        width: 55%;
    }
    .xs-60{
        width: 60%;
    }
    .xs-65{
        width: 65%;
    }
    .xs-66{
        width: calc((100% / 3) * 2);
    }
    .xs-70{
        width: 70%;
    }
    .xs-75{
        width: 75%;
    }
    .xs-80{
        width: 80%;
    }
    .xs-85{
        width: 85%;
    }
    .xs-90{
        width: 90%;
    }
    .xs-95{
        width: 95%;
    }
    .xs-100{
        width: 100%;
    }
    .xs-fec{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .xs-fsc{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .xs-fcc{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .xs-fbc{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .xs-fac{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .xs-fvc{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .xs-fee{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .xs-fse{
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .xs-fce{
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .xs-fbe{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .xs-fae{
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
    }
    .xs-fve{
        display: flex;
        justify-content: space-evenly;
        align-items: flex-end;
    }
    .xs-fes{
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .xs-fss{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .xs-fcs{
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .xs-fbs{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .xs-fas{
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
    }
    .xs-fvs{
        display: flex;
        justify-content: space-evenly;
        align-items: flex-start;
    }
    .xs-fet{
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
    }
    .xs-fst{
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
    }
    .xs-fct{
        display: flex;
        justify-content: center;
        align-items: stretch;
    }
    .xs-fbt{
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }
    .xs-fat{
        display: flex;
        justify-content: space-around;
        align-items: stretch;
    }
    .xs-fvt{
        display: flex;
        justify-content: space-evenly;
        align-items: stretch;
    }
    .xs-fw{
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .xs-nw{
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -o-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .xs-hide{
        display: none;
    }
    .xs-visible{
        display: block;
    }
}
/* sm */
@media screen and (min-width: 560px){
    .sm-5{
        width: 5%;
    }
    .sm-10{
        width: 10%;
    }
    .sm-15{
        width: 15%;
    }
    .sm-20{
        width: 20%;
    }
    .sm-25{
        width: 25%;
    }
    .sm-30{
        width: 30%;
    }
    .sm-33{
        width: calc(100% / 3);
    }
    .sm-35{
        width: 35%;
    }
    .sm-40{
        width: 40%;
    }
    .sm-45{
        width: 45%;
    }
    .sm-50{
        width: 50%;
    }
    .sm-55{
        width: 55%;
    }
    .sm-60{
        width: 60%;
    }
    .sm-65{
        width: 65%;
    }
    .sm-66{
        width: calc((100% / 3) * 2);
    }
    .sm-70{
        width: 70%;
    }
    .sm-75{
        width: 75%;
    }
    .sm-80{
        width: 80%;
    }
    .sm-85{
        width: 85%;
    }
    .sm-90{
        width: 90%;
    }
    .sm-95{
        width: 95%;
    }
    .sm-100{
        width: 100%;
    }
    .sm-fec{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .sm-fsc{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .sm-fcc{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .sm-fbc{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .sm-fac{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .sm-fvc{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .sm-fee{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .sm-fse{
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .sm-fce{
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .sm-fbe{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .sm-fae{
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
    }
    .sm-fve{
        display: flex;
        justify-content: space-evenly;
        align-items: flex-end;
    }
    .sm-fes{
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .sm-fss{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .sm-fcs{
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .sm-fbs{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .sm-fas{
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
    }
    .sm-fvs{
        display: flex;
        justify-content: space-evenly;
        align-items: flex-start;
    }
    .sm-fet{
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
    }
    .sm-fst{
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
    }
    .sm-fct{
        display: flex;
        justify-content: center;
        align-items: stretch;
    }
    .sm-fbt{
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }
    .sm-fat{
        display: flex;
        justify-content: space-around;
        align-items: stretch;
    }
    .sm-fvt{
        display: flex;
        justify-content: space-evenly;
        align-items: stretch;
    }
    .sm-fw{
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .sm-nw{
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -o-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .sm-hide{
        display: none;
    }
    .sm-visible{
        display: block;
    }
}
/* md */
@media screen and (min-width: 768px){
    .md-5{
        width: 5%;
    }
    .md-10{
        width: 10%;
    }
    .md-15{
        width: 15%;
    }
    .md-20{
        width: 20%;
    }
    .md-25{
        width: 25%;
    }
    .md-30{
        width: 30%;
    }
    .md-33{
        width: calc(100% / 3);
    }
    .md-35{
        width: 35%;
    }
    .md-40{
        width: 40%;
    }
    .md-45{
        width: 45%;
    }
    .md-50{
        width: 50%;
    }
    .md-55{
        width: 55%;
    }
    .md-60{
        width: 60%;
    }
    .md-65{
        width: 65%;
    }
    .md-66{
        width: calc((100% / 3) * 2);
    }
    .md-70{
        width: 70%;
    }
    .md-75{
        width: 75%;
    }
    .md-80{
        width: 80%;
    }
    .md-85{
        width: 85%;
    }
    .md-90{
        width: 90%;
    }
    .md-95{
        width: 95%;
    }
    .md-100{
        width: 100%;
    }
    .md-fec{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .md-fsc{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .md-fcc{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .md-fbc{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .md-fac{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .md-fvc{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .md-fee{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .md-fse{
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .md-fce{
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .md-fbe{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .md-fae{
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
    }
    .md-fve{
        display: flex;
        justify-content: space-evenly;
        align-items: flex-end;
    }
    .md-fes{
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .md-fss{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .md-fcs{
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .md-fbs{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .md-fas{
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
    }
    .md-fvs{
        display: flex;
        justify-content: space-evenly;
        align-items: flex-start;
    }
    .md-fet{
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
    }
    .md-fst{
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
    }
    .md-fct{
        display: flex;
        justify-content: center;
        align-items: stretch;
    }
    .md-fbt{
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }
    .md-fat{
        display: flex;
        justify-content: space-around;
        align-items: stretch;
    }
    .md-fvt{
        display: flex;
        justify-content: space-evenly;
        align-items: stretch;
    }
    .md-fw{
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .md-nw{
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -o-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .md-hide{
        display: none;
    }
    .md-visible{
        display: block;
    }
}
/* lg */
@media screen and (min-width: 992px){
    .lg-5{
        width: 5%;
    }
    .lg-10{
        width: 10%;
    }
    .lg-15{
        width: 15%;
    }
    .lg-20{
        width: 20%;
    }
    .lg-25{
        width: 25%;
    }
    .lg-30{
        width: 30%;
    }
    .lg-33{
        width: calc(100% / 3);
    }
    .lg-35{
        width: 35%;
    }
    .lg-40{
        width: 40%;
    }
    .lg-45{
        width: 45%;
    }
    .lg-50{
        width: 50%;
    }
    .lg-55{
        width: 55%;
    }
    .lg-60{
        width: 60%;
    }
    .lg-65{
        width: 65%;
    }
    .lg-66{
        width: calc((100% / 3) * 2);
    }
    .lg-70{
        width: 70%;
    }
    .lg-75{
        width: 75%;
    }
    .lg-80{
        width: 80%;
    }
    .lg-85{
        width: 85%;
    }
    .lg-90{
        width: 90%;
    }
    .lg-95{
        width: 95%;
    }
    .lg-100{
        width: 100%;
    }
    .lg-fec{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .lg-fsc{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .lg-fcc{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .lg-fbc{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .lg-fac{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .lg-fvc{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .lg-fee{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .lg-fse{
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .lg-fce{
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .lg-fbe{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .lg-fae{
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
    }
    .lg-fve{
        display: flex;
        justify-content: space-evenly;
        align-items: flex-end;
    }
    .lg-fes{
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .lg-fss{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .lg-fcs{
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .lg-fbs{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .lg-fas{
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
    }
    .lg-fvs{
        display: flex;
        justify-content: space-evenly;
        align-items: flex-start;
    }
    .lg-fet{
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
    }
    .lg-fst{
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
    }
    .lg-fct{
        display: flex;
        justify-content: center;
        align-items: stretch;
    }
    .lg-fbt{
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }
    .lg-fat{
        display: flex;
        justify-content: space-around;
        align-items: stretch;
    }
    .lg-fvt{
        display: flex;
        justify-content: space-evenly;
        align-items: stretch;
    }
    .lg-fw{
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .lg-nw{
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -o-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .lg-hide{
        display: none;
    }
    .lg-visible{
        display: block;
    }
}
/* xl */
@media screen and (min-width: 1200px){
    .xl-5{
        width: 5%;
    }
    .xl-10{
        width: 10%;
    }
    .xl-15{
        width: 15%;
    }
    .xl-20{
        width: 20%;
    }
    .xl-25{
        width: 25%;
    }
    .xl-30{
        width: 30%;
    }
    .xl-33{
        width: calc(100% / 3);
    }
    .xl-35{
        width: 35%;
    }
    .xl-40{
        width: 40%;
    }
    .xl-45{
        width: 45%;
    }
    .xl-50{
        width: 50%;
    }
    .xl-55{
        width: 55%;
    }
    .xl-60{
        width: 60%;
    }
    .xl-65{
        width: 65%;
    }
    .xl-66{
        width: calc((100% / 3) * 2);
    }
    .xl-70{
        width: 70%;
    }
    .xl-75{
        width: 75%;
    }
    .xl-80{
        width: 80%;
    }
    .xl-85{
        width: 85%;
    }
    .xl-90{
        width: 90%;
    }
    .xl-95{
        width: 95%;
    }
    .xl-100{
        width: 100%;
    }
    .xl-fec{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .xl-fsc{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .xl-fcc{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .xl-fbc{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .xl-fac{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .xl-fvc{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .xl-fee{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .xl-fse{
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .xl-fce{
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .xl-fbe{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .xl-fae{
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
    }
    .xl-fve{
        display: flex;
        justify-content: space-evenly;
        align-items: flex-end;
    }
    .xl-fes{
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .xl-fss{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .xl-fcs{
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .xl-fbs{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .xl-fas{
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
    }
    .xl-fvs{
        display: flex;
        justify-content: space-evenly;
        align-items: flex-start;
    }
    .xl-fet{
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
    }
    .xl-fst{
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
    }
    .xl-fct{
        display: flex;
        justify-content: center;
        align-items: stretch;
    }
    .xl-fbt{
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }
    .xl-fat{
        display: flex;
        justify-content: space-around;
        align-items: stretch;
    }
    .xl-fvt{
        display: flex;
        justify-content: space-evenly;
        align-items: stretch;
    }
    .xl-fw{
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .xl-nw{
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -o-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .xl-hide{
        display: none;
    }
    .xl-visible{
        display: block;
    }
}
/* xl */
@media screen and (min-width: 1600px){
    .wrapper{
        max-width: 1320px;
        width: calc(100% - 40px);
    }
}
@media screen and (min-width: 1200px) and (max-width: 1599px){
    .wrapper{
        max-width: 1140px;
        width: calc(100% - 40px);
    }
}
/* lg */
@media screen and (min-width: 992px) and (max-width: 1199px){
    .wrapper{
        max-width: 960px;
        width: calc(100% - 40px);
    }
}
/* md */
@media screen and (min-width: 768px) and (max-width: 1024px){
    .wrapper{
        max-width: 720px;
        width: calc(100% - 40px);
    }
}
/* sm */
@media screen and (min-width: 560px) and (max-width: 767px){
    .wrapper{
        max-width: 540px;
        width: calc(100% - 40px);
    }
}
/* xs */
@media screen and (max-width: 559px){
    .wrapper{
        max-width: 100%;
        width: calc(100% - 40px);
    }
}
/* font icon */
i.fa,i.fab,i.fal,i.far,i.fas{
    display: inline-block;
    font-size: 1.2rem;
}