/* font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,700');
/*@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,500,700&display=swap');*/
/* fontawersome */
/* @import url('https://use.fontawesome.com/releases/v5.6.3/css/all.css'); */
@import url('fontawersome.css');

/* 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;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
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;
}

/* var */
:root {
    /*theme color*/
    --theme_v_light: #7F1FA9;
    --theme_v: rgb(74, 57, 94);
    --theme_v_sub: rgb(94, 27, 114);
    --theme_orange: rgb(231, 75, 0);
    --theme_orange_light: rgb(251, 95, 0);
    --theme_yellow: #F0A146;
    --theme_yellow_light: rgb(253, 192, 82);
    --theme_green: rgb(66, 185, 159);
    --theme_teal:rgb(0, 154, 151);

    /* color */
    /* Bootstrap 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;

    /* 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;

    /* 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);

    /* material shadow */
    --shadow_1: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    --shadow_2: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    --shadow_3: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    --shadow_4: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    --shadow_5: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
    --shadow_6: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);

    /* weight */
    --bold: 700;
    --normal: 500;
    --thin: 300;
}

/* style & grid */
body {
    /*розмір шрифта*/
    font-size: 18px;
    line-height: 1.4em;
    font-family: "Roboto", sans-serif;
    color: var(--chrome);
    background: var(--white);
    font-weight: var(--normal);
    width: 100vw;
    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(--normal);
    font-size: 1em;
    line-height: 1.4em;
    color: var(--chrome);
    border: none;
    border-radius: 3px;
    background: none;
    padding: 0;
    font-family: "Roboto", 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(--silver);
    padding: 5px 10px;
}
input:focus,textarea:focus {
    border: 1px solid var(--chrome);
}
input::placeholder,textarea::placeholder {
    color: var(--silver);
}
button,a.button {
    border: 0;
    height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 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(--thin);
}
strong {
    font-weight: var(--bold);
}
.wrapper {
    display: block;
    margin: 0 auto;
    
}

/* topology */
h1 {
    font-size: 2.5em;
    line-height: 1.4em;
}
h2 {
    font-size: 2em;
    line-height: 1.4em;
}
h3 {
    font-size: 1.75em;
    line-height: 1.4em;
}
h4 {
    font-size: 1.5em;
    line-height: 1.4em;
}
h5 {
    font-size: 1.25em;
    line-height: 1.4em;
}
h6 {
    font-size: 1em;
    line-height: 1.4em;
}

/* 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: flex;
    }
}
/* 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: flex;
    }
}
/* 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: flex;
    }
}
/* 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: flex;
    }
}
/* 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: flex;
    }
}
/* xl */
@media screen and (min-width: 1200px) {
    .wrapper {
        max-width: 1170px;
        width: calc(100% - 20px);
    }
}
/* lg */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper {
        max-width: 970px;
        width: calc(100% - 20px);
    }
}
/* md */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper {
        max-width: calc(100% - 20px);
        width: calc(100% - 20px);
    }
}
/* sm */
@media screen and (min-width: 560px) and (max-width: 767px) {
    .wrapper {
        max-width: calc(100% - 20px);
        width: calc(100% - 20px);
    }
}
/* xs */
@media screen and (max-width: 559px) {
    .wrapper {
        max-width: calc(100% - 20px);
        width: calc(100% - 20px);
    }
}
/* font icon */
i.fa,i.fab,i.fal,i.far,i.fas {
    display: inline-block;
    font-size: 1.2em;
}