/*  ################################################################

  File Name: style.css
  Template Name: tkish
  Created By:adringroup.com
  
  1) FONTS
  2) RESET
  3) SKELETON

################################################################# */

@import "fonts.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, button, input, select, option, textarea {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    direction: rtl;
    list-style: none;
    font-family: 'vazir-t',Tahoma;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

:focus {
    outline: 0;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

strong, b {
    font-weight: 600;
}

a, a > * {
    text-decoration: none;
}

em {
    font-style: italic;
}

textarea {
    resize: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
}

:focus {
    outline: 0;
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}





/* ==================================================================
	General
================================================================== */

@-webkit-viewport {
    width: device-width;
}

@-moz-viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

html,
body {
    color: #111;
    font-style: normal;
    background-color: #eee;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    white-space: normal;
    position: relative;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
}


/* Align */
.float-left {
    float: left;
}

.float-right {
    float: right;
}

.float-center {
    margin-left: auto;
    margin-right: auto;
    display: block;
    clear: both;
    position: relative;
}

.text-left {
    text-align: left;
}
select.text-left {
   text-align-last:left;
}

.text-right {
    text-align: right;
}

select.text-right {
   text-align-last:right;
}

.text-center {
    text-align: center;
}
select.text-center {
   text-align-last:center;
}


.v-align-center {
    vertical-align: middle;
}

.v-align-bottom {
    vertical-align: bottom;
}

.v-align-top {
    vertical-align: top;
}
/* Direction */
.dir-rtl {
    direction: rtl !important;
}

.dir-ltr {
    direction: ltr !important;
}
/* H1...H6 tag*/

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-family: 'vazir-l';
    display: block;
    font-weight: normal !important;
}

a:hover, a > *:hover, a:focus {
    text-decoration: none;
    outline: 0;
    1color: #444444;
}

/*text-decoration*/
.text-decoration {
    text-decoration: line-through;
}

.text-underline {
    text-decoration:underline;
}


/*border*/
.no-border {
    border: none;
  
}


*[class^='border'] {
border-style:solid;
}
*[class^='border'].b-color-1 {
    border-color:#ddd
}
*[class^='border'].b-color-2 {
     border-color:#ccc
}

*[class^='border'].b-color-3 {
     border-color:#fff
}
*[class^='border'].b-color-4 {
     border-color:#999
}
*[class^='border'].b-color-5 {
     border-color:#04e662;
}
*[class^='border'].b-color-6 {
     border-color:#2d5be4;
}

*[class^='border'].b-color-7 {
     border-color:#f2d03b;
}


*[class^='border'].b-size-1 {
 border-width:1px;
}
*[class^='border'].b-size-2 {
 border-width:2px;
}
*[class^='border'].b-size-3 {
 border-width:3px;
}

.border-left {
    border-right: none;
    border-top: none;
    border-bottom: none;
}

.border-right {
    border-left: none;
    border-top: none;
    border-bottom: none;
}

.border-top {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.border-bottom {
    border-left: none;
    border-right: none;
    border-top: none;
}

.border-radius-1 {
    border-radius: 5px;
}

.border-radius-2 {
    border-radius: 10px;
}

.border-radius-3 {
    border-radius: 15px;
}

.border-radius-4 {
    border-radius: 20px;
}

.border-radius-5 {
    border-radius: 25px;
}

.border-radius-6 {
    border-radius: 30px;
}

.border-radius-7 {
    border-radius: 35px;
}

.border-radius-8 {
    border-radius: 40px;
}

.border-radius-9 {
    border-radius: 44px;
}

.border-radius-10 {
    border-radius: 50px;
}

.border-radius-circle {
    border-radius: 50%;
}

.border-radius-top-left-10 {
    border-top-left-radius: 50px;
}

.border-radius-top-left-right-10 {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

.border-radius-top-left-right-5 {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.border-radius-right-bottom-2 {
    border-bottom-right-radius: 10px;
    
}
.border-radius-bottom-left-right-2 {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
/*hr*/
.hr-1 {
    border: 1px solid #dadada !important;
    border-radius: 1px;
} 

/*no-border*/
.no-border-left {
    border-left: none;
}

.no-border-right {
    border-right: none;
}

.no-border-top {
    border-top: none;
}

.no-border-bottom {
    border-bottom: none;
}
/*no border last first*/

.no-border-bottom-last:last-child {
    border-bottom: none !important;
}

.no-border-last:last-child {
    border: none !important;
}

.no-border-first:first-child {
    border-top: none !important;
}

/*font-size*/

.l-h-1 {
    line-height: 180%;
}

.l-h-2 {
    line-height: 210%;
}

.l-h-3 {
    line-height: 220%;
}

.l-h-4 {
    line-height: 230%;
}

.font-size-6x0 {
    font-size: 60%;
}

.font-size-5x0 {
    font-size: 65%;
}

.font-size-4x0 {
    font-size: 70%;
}

.font-size-3x0 {
    font-size: 75%;
}

.font-size-2x0 {
    font-size: 80%;
}

.font-size-x0 {
    font-size: 85%;
}

.font-size-0 {
    font-size: 90%;
}

.font-size-1 {
    font-size: 105%;
}

.font-size-2 {
    font-size: 110%;
}

.font-size-3 {
    font-size: 115%;
}

.font-size-4 {
    font-size: 120%;
}

.font-size-5 {
    font-size: 125%;
}

.font-size-6 {
    font-size: 130%;
}

.font-size-7 {
    font-size: 135%;
}

.font-size-8 {
    font-size: 140%;
}

.font-size-9 {
    font-size: 145%;
}

.font-size-10 {
    font-size: 150%;
}

.font-size-11 {
    font-size: 155%;
}

.font-size-12 {
    font-size: 160%;
}

.font-size-13 {
    font-size: 165%;
}

.font-size-14 {
    font-size: 170%;
}

.font-size-15 {
    font-size: 175%;
}

.font-size-16 {
    font-size: 180%;
}

.font-size-17 {
    font-size: 185%;
}

.font-size-18 {
    font-size: 190%;
}

.font-size-19 {
    font-size: 195%;
}

.font-size-20 {
    font-size: 200%;
}
/*padding*/

.no-padding {
    padding: 0px;
}

.p-1 {
    padding: 5px;
}

.p-2 {
    padding: 10px;
}

.p-3 {
    padding: 15px;
}

.p-4 {
    padding: 20px;
}

.p-5 {
    padding: 25px;
}

.p-6 {
    padding: 30px;
}
/*padding top*/

:root {
}

.pt-1 {
    padding-top: 5px;
}

.pt-2 {
    padding-top: 10px;
}

.pt-3 {
    padding-top: 15px;
}

.pt-4 {
    padding-top: 20px;
}

.pt-5 {
    padding-top: 25px;
}

.pt-6 {
    padding-top: 30px;
}

.pt-7 {
    padding-top: 35px;
}

.pt-8 {
    padding-top: 40px;
}
/*padding bottom*/
.pb-1 {
    padding-bottom: 5px;
}

.pb-2 {
    padding-bottom: 10px;
}

.pb-3 {
    padding-bottom: 15px;
}

.pb-4 {
    padding-bottom: 20px;
}

.pb-5 {
    padding-bottom: 25px;
}

.pb-6 {
    padding-bottom: 30px;
}

.pb-7 {
    padding-bottom: 35px;
}

.pb-8 {
    padding-bottom: 40px;
}
/*padding left*/
.pl-1 {
    padding-left: 5px;
}

.pl-2 {
    padding-left: 10px;
}

.pl-3 {
    padding-left: 15px;
}

.pl-4 {
    padding-left: 20px;
}

.pl-5 {
    padding-left: 25px;
}

.pl-6 {
    padding-left: 30px;
}

.pl-7 {
    padding-left: 35px;
}

.pl-8 {
    padding-left: 40px;
}

.pl-9 {
    padding-left: 45px;
}

.pl-10 {
    padding-left: 50px;
}
/*padding right*/
.pr-1 {
    padding-right: 5px;
}

.pr-2 {
    padding-right: 10px;
}

.pr-3 {
    padding-right: 15px;
}

.pr-4 {
    padding-right: 20px;
}

.pr-5 {
    padding-right: 25px;
}

.pr-6 {
    padding-right: 30px;
}

.pr-7 {
    padding-right: 35px;
}

.pr-8 {
    padding-right: 40px;
}

.pr-9 {
    padding-right: 45px;
}

.pr-10 {
    padding-right: 50px;
}
/*margin*/

.no-margin {
    margin: 0px;
}

.m-1 {
    margin: 5px;
}

.m-2 {
    margin: 10px;
}

.m-3 {
    margin: 15px;
}

.m-4 {
    margin: 20px;
}

.m-5 {
    margin: 25px;
}

.m-6 {
    margin: 30px;
}
/*margin top*/

.mt--8 {
    margin-top: -40px;
}

.mt--7 {
    margin-top: -35px;
}

.mt--6 {
    margin-top: -30px;
}

.mt--5 {
    margin-top: -25px;
}

.mt--4 {
    margin-top: -20px;
}

.mt--3 {
    margin-top: -15px;
}

.mt--2 {
    margin-top: -10px;
}

.mt--1 {
    margin-top: -5px;
}

.mt-0 {
    margin-top: 0px;
}

.mt-1 {
    margin-top: 5px;
}

.mt-2 {
    margin-top: 10px;
}

.mt-3 {
    margin-top: 15px;
}

.mt-4 {
    margin-top: 20px;
}

.mt-5 {
    margin-top: 25px;
}

.mt-6 {
    margin-top: 30px;
}

.mt-7 {
    margin-top: 35px;
}

.mt-8 {
    margin-top: 40px;
}

.mt-9 {
    margin-top: 45px;
}

.mt-10 {
    margin-top: 50px;
}

.mt-11 {
    margin-top: 55px;
}

.mt-12 {
    margin-top: 60px;
}
/*margin bottom*/
.mb-0 {
    margin-bottom: 0px;
}

.mb-1 {
    margin-bottom: 5px;
}

.mb-2 {
    margin-bottom: 10px;
}

.mb-3 {
    margin-bottom: 15px;
}

.mb-4 {
    margin-bottom: 20px;
}

.mb-5 {
    margin-bottom: 25px;
}

.mb-6 {
    margin-bottom: 30px;
}

.mb-7 {
    margin-bottom: 35px;
}

.mb-8 {
    margin-bottom: 40px;
}

.mb-9 {
    margin-bottom: 45px;
}
/*margin left*/
.ml-1 {
    margin-left: 5px;
}

.ml-2 {
    margin-left: 10px;
}

.ml-3 {
    margin-left: 15px;
}

.ml-4 {
    margin-left: 20px;
}

.ml-5 {
    margin-left: 25px;
}

.ml-6 {
    margin-left: 30px;
}

/*margin right*/
.mr-1 {
    margin-right: 5px;
}

.mr-2 {
    margin-right: 10px;
}

.mr-3 {
    margin-right: 15px;
}

.mr-4 {
    margin-right: 20px;
}

.mr-5 {
    margin-right: 25px;
}

.mr-6 {
    margin-right: 30px;
}

.mr-7 {
    margin-right: 35px;
}

.mr-8 {
    margin-right: 40px;
}

.mr-9 {
    margin-right: 45px;
}
/*width*/
.width-0 {
    width: 0%;
}

.width-1 {
    width: 5%;
}

.width-2 {
    width: 10%;
}

.width-3 {
    width: 15%;
}

.width-4 {
    width: 20%;
}

.width-5 {
    width: 25%;
}

.width-6 {
    width: 30%;
}

.width-62 {
    width: 32%;
}

.width-7 {
    width: 35%;
}

.width-8 {
    width: 40%;
}

.width-9 {
    width: 45%;
}

.width-10 {
    width: 49%;
}

.width-11 {
    width: 55%;
}

.width-12 {
    width: 60%;
}

.width-13 {
    width: 65%;
}

.width-14 {
    width: 70%;
}

.width-15 {
    width: 75%;
}

.width-16 {
    width: 80%;
}

.width-17 {
    width: 85%;
}

.width-18 {
    width: 90%;
}

.width-19 {
    width: 95%;
}

.width-20 {
    width: 100%;
}

.width-21 {
    width: 103%;
}

.width-22 {
    width: 110%;
}
/*width small p */
.width-s-p-0 {
    width: 0%;
}

.width-s-p-1 {
    width: 5px;
}

.width-s-p-2 {
    width: 10px;
}

.width-s-p-3 {
    width: 15px;
}

.width-s-p-4 {
    width: 20px;
}

.width-s-p-5 {
    width: 25px;
}

.width-s-p-6 {
    width: 30px;
}

.width-s-p-7 {
    width: 35px;
}

.width-s-p-8 {
    width: 40px;
}

.width-s-p-9 {
    width: 45px;
}

.width-s-p-10 {
    width: 50px;
}

.width-s-p-11 {
    width: 55px;
}

.width-s-p-12 {
    width: 60px;
}

.width-s-p-13 {
    width: 65px;
}

.width-s-p-14 {
    width: 70px;
}

.width-s-p-15 {
    width: 75px;
}

.width-s-p-16 {
    width: 80px;
}

.width-s-p-17 {
    width: 85px;
}

.width-s-p-18 {
    width: 90px;
}

.width-s-p-19 {
    width: 95px;
}

.width-s-p-20 {
    width: 100px;
}

.width-s-p-21 {
    width: 105px;
}

/*width p */
.width-p-0 {
    width: 0px;
}

.width-p-1 {
    width: 50px;
}

.width-p-2 {
    width: 100px;
}

.width-p-3 {
    width: 150px;
}

.width-p-4 {
    width: 200px;
}

.width-p-5 {
    width: 250px;
}

.width-p-6 {
    width: 300px;
}

.width-p-7 {
    width: 350px;
}

.width-p-8 {
    width: 400px;
}

.width-p-9 {
    width: 450px;
}

.width-p-10 {
    width: 500px;
}

.width-p-11 {
    width: 550px;
}

.width-p-12 {
    width: 600px;
}

.width-p-13 {
    width: 650px;
}

.width-p-14 {
    width: 700px;
}

.width-p-15 {
    width: 750px;
}

.width-p-16 {
    width: 800px;
}

.width-p-17 {
    width: 850px;
}

.width-p-18 {
    width: 900px;
}

.width-p-19 {
    width: 950px;
}

.width-p-20 {
    width: 1000px;
}

.width-p-21 {
    width: 1050px;
}


/*height*/
.height-0 {
    height: 0%;
}

.height-1 {
    height: 5%;
}

.height-2 {
    height: 10%;
}

.height-3 {
    height: 15%;
}

.height-4 {
    height: 20%;
}

.height-5 {
    height: 25%;
}

.height-6 {
    height: 30%;
}

.height-7 {
    height: 35%;
}

.height-8 {
    height: 40%;
}

.height-9 {
    height: 45%;
}

.height-10 {
    height: 50%;
}

.height-11 {
    height: 55%;
}

.height-12 {
    height: 60%;
}

.height-13 {
    height: 65%;
}

.height-14 {
    height: 70%;
}

.height-15 {
    height: 75%;
}

.height-16 {
    height: 80%;
}

.height-17 {
    height: 85%;
}

.height-18 {
    height: 90%;
}

.height-19 {
    height: 95%;
}

.height-20 {
    height: 100%;
}

.height-24 {
    height: 120%;
}

/*height-s-p*/
.height-s-p-1 {
    height: 5px;
}

.height-s-p-2 {
    height: 10px;
}

.height-s-p-3 {
    height: 15px;
}

.height-s-p-4 {
    height: 20px;
}

.height-s-p-5 {
    height: 25px;
}

.height-s-p-6 {
    height: 30px;
}

.height-s-p-7 {
    height: 35px;
}

.height-s-p-8 {
    height: 40px;
}

.height-s-p-9 {
    height: 45px;
}

.height-s-p-10 {
    height: 50px;
}

.height-s-p-11 {
    height: 55px;
}

.height-s-p-12 {
    height: 60px;
}

.height-s-p-13 {
    height: 65px;
}

.height-s-p-14 {
    height: 70px;
}

.height-s-p-15 {
    height: 75px;
}

.height-s-p-16 {
    height: 80px;
}

.height-s-p-17 {
    height: 85px;
}

.height-s-p-18 {
    height: 90px;
}

.height-s-p-19 {
    height: 95px;
}

.height-s-p-20 {
    height: 100px;
}

/*height-p*/
.height-p-1 {
    height: 50px;
}

.height-p-2 {
    height: 100px;
}

.height-p-3 {
    height: 150px;
}

.height-p-4 {
    height: 200px;
}

.height-p-5 {
    height: 250px;
}

.height-p-6 {
    height: 300px;
}

.height-p-7 {
    height: 350px;
}

.height-p-8 {
    height: 400px;
}

.height-p-9 {
    height: 450px;
}

.height-p-10 {
    height: 500px;
}

.height-p-11 {
    height: 550px;
}

.height-p-12 {
    height: 600px;
}

.height-p-13 {
    height: 650px;
}

.height-p-14 {
    height: 700px;
}

.height-p-15 {
    height: 750px;
}

.height-p-16 {
    height: 800px;
}

.height-p-17 {
    height: 850px;
}

.height-p-18 {
    height: 900px;
}

.height-p-19 {
    height: 950px;
}

.height-p-20 {
    height: 1000px;
}

.height-p-21 {
    height: 1050px;
}

.height-p-22 {
    height: 1100px;
}

.height-p-23 {
    height: 1150px;
}

.height-p-24 {
    height: 1200px;
}

.height-p-25 {
    height: 1250px;
}

.height-p-26 {
    height: 1300px;
}

.height-p-27 {
    height: 1350px;
}

.height-p-28 {
    height: 1400px;
}

.height-p-29 {
    height: 1450px;
}

.height-p-30 {
    height: 1500px;
}

.height-p-31 {
    height: 1550px;
}

.height-p-32 {
    height: 1600px;
}

.height-p-33 {
    height: 1650px;
}

.height-p-34 {
    height: 1700px;
}

.height-p-35 {
    height: 1750px;
}

.height-p-36 {
    height: 1800px;
}
.height-p-37 {
    height: 1850px;
}
.height-p-38 {
    height: 1900px;
}
.height-p-39 {
    height: 1950px;
}
.height-p-40 {
    height: 2000px;
}
.height-p-41 {
    height: 2050px;
}
.height-p-42 {
    height: 2100px;
}
.height-p-43 {
    height: 2150px;
}
.height-p-44 {
    height: 2200px;
}
.height-p-45 {
    height: 2250px;
}
/* display*/
.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

.d-inline {
    display: inline;
}
/* position*/
.pos-ab {
    position: absolute;
}

.pos-rel {
    position: relative;
}

.pos-fix {
    position: fixed;
}

/* top left bot*/
.top-left-0 {
    top: 0px;
    left: 0px;
}

.top-left-1 {
    top: 0px;
    left: 5%;
}

.top-1-left-1 {
    top: 5%;
    left: 5%;
}

.top-1-left {
    top: 5%;
    left: 0%;
}

.top-2-left-1 {
    top: 10%;
    left: 5%;
}

.top-2-left-1 {
    top: 10%;
    left: 5%;
}

.top-20-left-20 {
    top: 100%;
    left: 100%;
}

.top-left-t-50 {
    top: 0%;
    left: 0%;
    transform: translate(0,-50%);
}


/* top right bot*/
.top-right-0 {
    top: 0px;
    right: 0px;
}

.top-right-1 {
    top: 0px;
    right: 5%;
}

.top-right-1 {
    top: 0px;
    right: 5%;
}

.top-1-right-1 {
    top: 5%;
    right: 5%;
}

.top-1-2-right-1-4 {
    top: 2%;
    right: 4%;
}

.top-1-right-2 {
    top: 5%;
    right: 10%;
}

.top-1-right-3 {
    top: 5%;
    right: 15%;
}

.top-1-right-4 {
    top: 5%;
    right: 20%;
}

.top-2-right-1 {
    top: 10%;
    right: 5%;
}

.top-2-right-4 {
    top: 10%;
    right: 20%;
}

.top-right--1 {
    top: 50%;
    right: -5%;
    transform: translate(0,-50%);
}

.top--1-right--1 {
    top: -5%;
    right: -5%;
    transform: translate(0,-50%);
}

.top-right--2 {
    top: 50%;
    right: -10%;
    transform: translate(0,-50%);
}

.top-20-right {
    top: 100%;
    right: 0%;
}

.top-20-right-1 {
    top: 100%;
    right: 5%;
}

.top-50-right-1 {
    top: 50%;
    right: 5%;
    transform: translate(0,-50%);
}

.top-right-t-50 {
    top: 0%;
    right: 0%;
    transform: translate(0,-50%);
}


/* bottom left bot*/
.bottom--1-left-1 {
    bottom: -5%;
    right: -5%;
}


.bottom-left-0 {
    bottom: 0px;
    left: 0px;
}

.bottom-left-1 {
    bottom: 0px;
    left: 5%;
}

.bottom-01-left-01 {
    bottom: 1%;
    left: 1%;
}

.bottom-03-left-03 {
    bottom: 3%;
    left: 3%;
}


.bottom-1-left-1 {
    bottom: 5%;
    left: 5%;
}

.bottom-1-left {
    bottom: 5%;
    left: 0%;
}

.bottom-2-left-1 {
    bottom: 10%;
    left: 5%;
}

.bottom-2-left-2 {
    bottom: 10%;
    left: 10%;
}

.bottom-3-left-2 {
    bottom: 15%;
    left: 10%;
}

.bottom-right-0 {
    bottom: 0px;
    right: 0px;
}

.bottom-right-1 {
    bottom: 0px;
    right: 5%;
}

.bottom-1-right-1 {
    bottom: 5%;
    right: 5%;
}
/* middle left bot*/
.left-middle-5 {
    top: 5%;
    left: 50%;
    transform: translate(-50%,0);
}
.left-middle {
    top: 50%;
    left: 0%;
    transform: translate(0,-50%);
}

.left-middle-02 {
    top: 50%;
    left: 2%;
    transform: translate(0,-50%);
}

.left-middle-03 {
    top: 50%;
    left: 3%;
    transform: translate(0,-50%);
}

.left-middle-04 {
    top: 50%;
    left: 4%;
    transform: translate(0,-50%);
}

.left-middle-1 {
    top: 50%;
    left: 5%;
    transform: translate(0,-50%);
}

.left-middle-2 {
    top: 50%;
    left: 10%;
    transform: translate(0,-50%);
}

.left-middle-3 {
    top: 50%;
    left: 15%;
    transform: translate(0,-50%);
}

.left-middle-3-3 {
    top: 50%;
    left: 18%;
    transform: translate(0,-50%);
}

.left-middle-4 {
    top: 50%;
    left: 20%;
    transform: translate(0,-50%);
}

.right-middle {
    top: 50%;
    right: 0%;
    transform: translate(0,-50%);
}

.right-middle-01 {
    top: 50%;
    right: 1%;
    transform: translate(0,-50%);
}

.right-middle-02 {
    top: 50%;
    right: 2%;
    transform: translate(0,-50%);
}

.right-middle-04 {
    top: 50%;
    right: 4%;
    transform: translate(0,-50%);
}

.right-middle-1 {
    top: 50%;
    right: 5%;
    transform: translate(0,-50%);
}

.right-2-middle-1 {
    top: 50%;
    right: 10%;
    transform: translate(0,-50%);
}

.right-3-middle-1 {
    top: 50%;
    right: 15%;
    transform: translate(0,-50%);
}


.right-middle--1 {
    top: 50%;
    right: -5%;
    transform: translate(0,-50%);
}

.top-middle {
    top: 0%;
    left: 50%;
    transform: translate(-50%,0);
}

.middle {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.bottom-middle {
    left: 50%;
    transform: translate(-50%,0);
    bottom: 0px;
}

.bottom-1-middle {
    left: 50%;
    transform: translate(-50%,0);
    bottom: 5%;
}
.bottom-2-middle {
    left: 50%;
    transform: translate(-50%,0);
    bottom: 10%;
}
.bottom-1-2-middle {
    left: 50%;
    transform: translate(-50%,0);
    bottom: 2%;
}
.bottom--50-middle {
    left: 50%;
    transform: translate(-50%,40%);
    bottom: 0%;
}

.bottom--50-middle-2 {
    left: 50%;
    transform: translate(-50%,50%);
    bottom: 0%;
}
/* bg alignment*/
.bg-top-center {
    background-position: top center !important;
}

.bg-center-center {
    background-position: center center !important;
}

.bg-center-bottom {
    background-position: center bottom !important;
}

.bg-top-right {
    background-position: center right !important;
}

.bg-top-right-1 {
    background-position: 95% center !important;
}
/* display*/
.d-none {
    display: none;
}

/* z-index*/

.z-index-0 {
    z-index: 0;
}

.z-index-1 {
    z-index: 100;
}

.z-index-2 {
    z-index: 1000;
}

.z-index-3 {
    z-index: 10000;
}

.z-index-4 {
    z-index: 100000;
}
/*cursor*/
.cursor {
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 1;
}

    .cursor:hover {
        opacity: .8;
    }

.cursor-2 {
    cursor: pointer;
}
/*nowrap*/
.nowrap {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.nowrap-2 {
    white-space: nowrap;
    overflow: hidden;
}

.nowrap-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*rotate*/
.rotate-90 {
    transform: rotate(90deg);
    transform-origin: center center;
}

.rotate-180 {
    transform: rotate(180deg);
}

/*font*/

.opacity-0 {
    opacity: 0;
}

.opacity-1 {
    opacity: 0.9;
}

.opacity-2 {
    opacity: 0.8;
}

.opacity-3 {
    opacity: 0.7;
}

.opacity-4 {
    opacity: 0.6;
}

.opacity-5 {
    opacity: 0.5;
}

.opacity-6 {
    opacity: 0.4;
}

.opacity-7 {
    opacity: 0.3;
}

.opacity-8 {
    opacity: 0.2;
}

.opacity-9 {
    opacity: 0.1;
}

.opacity-full {
    opacity: 0.0;
}
/*color*/
.t-green {
    color:#47dac0;  
}
.t-red {
    color:#f24e88;  
    
}
.t-blue {
    color:#03b4ff;  
}
.t-gray {
    color:#999;
}
.t-yellow {
    color:#e5c228;
}
.t-black {
    color:#111;
}
.t-white {
color:#fff;
}
.t-hover-white:hover {
color:#fff;
}
.t-hover-white:active {
color:#fff;
}
.t-hover-white:visited {
color:#fff;
}



.bg-green {
    background-color:#47dac0 !important;   
}
.bg-blue {
    background-color:#03b4ff !important;   
}
.bg-yellow {
    background-color:#e5c228 !important;   
}
.bg-gray {
    background-color:#bbb !important;   
}
.bg-gray-dark {
    background-color:#888 !important;    
}
.gray-very-dark {
    background-color:#444 !important;   
}
.bg-gray-light {
    background-color:#ccc !important;   
}
.bg-gray-very-light {
    background-color:#eee !important;   
}




.bg-red {
    background-color:#f24e88 !important;    
}
.bg-silver {
    background-color:#ddd !important;  
}
.bg-white {
    background-color:#fff !important;   
}
.bg-black {
    background-color:#111 !important;  
}
.bg-black-trans {
    background-color:rgba(0,0,0,.5) !important;  
}
.no-bg {
background:none !important;  
}

/*shadow*/
.shadow-box-1 {
    -webkit-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.75);
}

.shadow-box-2 {
    -webkit-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.75);
}

.shadow-box-3 {
    -webkit-box-shadow: 0px 5px 4px -4px rgba(133,133,133,1);
    -moz-box-shadow: 0px 5px 4px -4px rgba(133,133,133,1);
    box-shadow: 0px 5px 4px -4px rgba(133,133,133,1);
}

.shadow-box-4 {
    -webkit-box-shadow: 0px 3px 14px 0px rgba(41,41,41,1);
    -moz-box-shadow: 0px 3px 14px 0px rgba(41,41,41,1);
    box-shadow: 0px 3px 14px 0px rgba(41,41,41,1);
}

.shadow-box-5 {
    -webkit-box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
}

.shadow-box-6 {
    -webkit-box-shadow: 0px -3px 10px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px -3px 10px 0px rgba(0,0,0,0.15);
    box-shadow: 0px -3px 10px 0px rgba(0,0,0,0.15);
}

.shadow-box-7 {
    -webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.15);
}


/*clear*/
.clear {
    clear: both;
}

/*noresize*/
.no-resize {
    resize: none !important;
}

/*gradient*/
.gradient-1 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#070b26+0,0c1139+100 */
    1background: #070b26; /* Old browsers */
    1background: -moz-linear-gradient(left, #070b26 0%, #0c1139 100%); /* FF3.6-15 */
    1background: -webkit-linear-gradient(left, #070b26 0%,#0c1139 100%); /* Chrome10-25,Safari5.1-6 */
    1background: linear-gradient(to right, #070b26 0%,#0c1139 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    1filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#070b26', endColorstr='#0c1139',GradientType=1 ); /* IE6-9 */
    background-color: #eeeeee;
}

.gradient-2 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#131b4c+0,1d2975+100 */
    background: #131b4c; /* Old browsers */
    background: -moz-linear-gradient(left, #131b4c 0%, #1d2975 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #131b4c 0%,#1d2975 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #131b4c 0%,#1d2975 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131b4c', endColorstr='#1d2975',GradientType=1 ); /* IE6-9 */
}

.gradient-3 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#21317e+0,334abc+100 */
    background: #21317e; /* Old browsers */
    background: -moz-linear-gradient(left, #21317e 0%, #334abc 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #21317e 0%,#334abc 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #21317e 0%,#334abc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21317e', endColorstr='#334abc',GradientType=1 ); /* IE6-9 */
}

.gradient-4 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#285098+0,397bd2+100 */
    background: #285098; /* Old browsers */
    background: -moz-linear-gradient(left, #285098 0%, #397bd2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #285098 0%,#397bd2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #285098 0%,#397bd2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#285098', endColorstr='#397bd2',GradientType=1 ); /* IE6-9 */
}

.gradient-5 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#38789b+0,53b2e8+100 */
    background: #38789b; /* Old browsers */
    background: -moz-linear-gradient(left, #38789b 0%, #53b2e8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #38789b 0%,#53b2e8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #38789b 0%,#53b2e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38789b', endColorstr='#53b2e8',GradientType=1 ); /* IE6-9 */
}

.gradient-6 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#44889d+0,65cae8+100 */
    background: #44889d; /* Old browsers */
    background: -moz-linear-gradient(left, #44889d 0%, #65cae8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #44889d 0%,#65cae8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #44889d 0%,#65cae8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44889d', endColorstr='#65cae8',GradientType=1 ); /* IE6-9 */
}

.gradient-7 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#66bde8+0,3679ec+100 */
    background: #66bde8; /* Old browsers */
    background: -moz-linear-gradient(left, #66bde8 0%, #3679ec 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #66bde8 0%,#3679ec 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #66bde8 0%,#3679ec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66bde8', endColorstr='#3679ec',GradientType=1 ); /* IE6-9 */
}


/*placeholder*/
.placeholder-1::-webkit-input-placeholder {
    font-size: 150%;
    vertical-align: bottom;
    letter-spacing: 3px;
}

.placeholder-1::-moz-placeholder {
    font-size: 150%;
    letter-spacing: 3px;
    vertical-align: middle;
}

.placeholder-1:-ms-input-placeholder {
    font-size: 150%;
    letter-spacing: 3px;
    vertical-align: middle;
}

.placeholder-1::placeholder {
    font-size: 150%;
    letter-spacing: 3px;
    vertical-align: middle;
}

.placeholder-2::-webkit-input-placeholder {
    font-size: 80%;
    vertical-align: middle;
}

.placeholder-2::-moz-placeholder {
    font-size: 80%;
    vertical-align: middle;
}

.placeholder-2:-ms-input-placeholder {
    font-size: 80%;
    vertical-align: middle;
}

.placeholder-2::placeholder {
    font-size: 80%;
    vertical-align: middle;
}

.placeholder-3::-webkit-input-placeholder {
    font-size: 150%;
    vertical-align: middle;
    letter-spacing: 0px;
}

.placeholder-3::-moz-placeholder {
    font-size: 150%;
    letter-spacing: 0px;
    vertical-align: middle;
}

.placeholder-3:-ms-input-placeholder {
    font-size: 150%;
    letter-spacing: 0px;
    vertical-align: middle;
}

.placeholder-center::placeholder {
    font-size: 150%;
    letter-spacing: 0px;
    vertical-align: middle;
}


/*placeholder text center*/
.placeholder-center::-webkit-input-placeholder {
   text-align:center;
}

.placeholder-center::-moz-placeholder {
     text-align:center;
}

.placeholder-center:-ms-input-placeholder {
  text-align:center;
}

.placeholder-center::placeholder {
  text-align:center;
}


/*placeholder font size*/
.placeholder-font-size-5::-webkit-input-placeholder {
   font-size:110%;
}

.placeholder-font-size-5::-moz-placeholder {
     font-size:110%;
}

.placeholder-font-size-5:-ms-input-placeholder {
 font-size:110%;
}

.placeholder-font-size-5::placeholder {
 font-size:110%;
}
/*input radio*/

.input-radio-frame {
  1display: block;
  position: relative;
  padding-right: 35px;

  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input-radio-frame input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.input-radio-frame .checkmark {
  position: absolute;
  top: 0;
  right: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

.input-radio-frame:hover input ~ .checkmark {
  background-color: #ccc;
}

.input-radio-frame input:checked ~ .checkmark {
  background-color: #2f2482;
}

.input-radio-frame .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.input-radio-frame input:checked ~ .checkmark:after {
  display: block;
}

.input-radio-frame .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/*input checkbox*/
.input-checkbox-frame {
    1display: block;
    position: relative;
    padding-right: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .input-checkbox-frame input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.input-checkbox-frame .checkmark {
    position: absolute;
    top: 0;
    right: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

.input-checkbox-frame:hover input ~ .checkmark {
    background-color: #ccc;
}

.input-checkbox-frame input:checked ~ .checkmark {
    background-color: #2f2482;
}

.input-checkbox-frame .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.input-checkbox-frame input:checked ~ .checkmark:after {
    display: block;
}

.input-checkbox-frame .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/*line*/
.v-line {
    width: 2px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d8d8d8+0,a8a8a8+30,a8a8a8+70,a8a8a8+100&0+0,1+30,1+70,0+100 */
    background: -moz-linear-gradient(top, rgba(216,216,216,0) 0%, rgba(168,168,168,1) 30%, rgba(168,168,168,1) 70%, rgba(168,168,168,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(216,216,216,0) 0%,rgba(168,168,168,1) 30%,rgba(168,168,168,1) 70%,rgba(168,168,168,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(216,216,216,0) 0%,rgba(168,168,168,1) 30%,rgba(168,168,168,1) 70%,rgba(168,168,168,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d8d8d8', endColorstr='#00a8a8a8',GradientType=0 ); /* IE6-9 */
}

.h-line {
    height: 2px;
    background: -moz-linear-gradient(left, rgba(216,216,216,0) 0%, rgba(168,168,168,1) 30%, rgba(168,168,168,1) 70%, rgba(168,168,168,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(216,216,216,0) 0%,rgba(168,168,168,1) 30%,rgba(168,168,168,1) 70%,rgba(168,168,168,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(216,216,216,0) 0%,rgba(168,168,168,1) 30%,rgba(168,168,168,1) 70%,rgba(168,168,168,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d8d8d8', endColorstr='#00a8a8a8',GradientType=1 ); /* IE6-9 */
}




/*input type number*/

input[type=number].type-number-1::-webkit-inner-spin-button,
input[type=number].type-number-1::-webkit-outer-spin-button {
    opacity: 1;
}

input[type=number].type-number-1::-webkit-outer-spin-button,
input[type=number].type-number-1::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
    width: 10%;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

/*overflow x or y or xy*/
.overflow-y-hidden {
    overflow-y: hidden;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-xy-hidden {
    overflow: hidden;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.overflow-x-scroll {
    overflow-x: scroll;
}

.overflow-xy-scroll {
    overflow: scroll;
}

.overflow-y-visible {
    overflow-y: visible;
}

.overflow-x-visible {
    overflow-x: visible;
}

.overflow-xy-visible {
    overflow: visible;
}

.overflow-y-auto {
    overflow-y:auto ;
    overflow-x:hidden;
}

/* ==================================================================
	Scratcher
================================================================== */

.container {
    height: 100%;
    position: relative;
    margin: 0 auto;
    background-color: #fff;
    1display: block;
    overflow-x: hidden;
    overflow-y: visible;
    1width: 480px!important;
}

.content-scroll {
    overflow: scroll;
    overflow-x: hidden;
    1direction: ltr;
    1margin-right: -17px;
    text-align: center;
    height: 100% !important;
}

.touch-scroll {
    -webkit-overflow-scrolling: touch;
}

/* ==================================================================
	Slider
================================================================== */
/*owl-carousel*/
.owl-next,
.owl-prev {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    display: block !important;
    border: 0px solid black;
    background-color: rgba(0, 0, 0, 0.05);
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.owl-prev {
    left: 0px;
}

.owl-next {
    right: 0px;
}

    .owl-prev i, .owl-next i {
        font-size: 1.5rem;
    }

.owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}


    .owl-dots .owl-dots, .owl-dots {
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }


        .owl-dots .owl-dots {
            z-index: 100;
            position: absolute;
            margin-top: -80px;
            width: 100%;
        }


.dots-top .owl-dots {
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
}

.owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    *display: inline;
     margin:40px 0px;
}

    .owl-dots .owl-dot span {
        width: 12px;
        height:12px;
        margin: 0 5px;
        background: #fff;
        border:#e3000f 1px solid;
        display: block;
        -webkit-backface-visibility: visible;
        transition: opacity 200ms ease;
        border-radius: 50%;
    }

    .owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span {
        background: #e3000f;
          border:#e3000f 1px solid;
    }

.left-stage .owl-stage {

    margin-right: -50px;
}


/* ==================================================================
	Icons
================================================================== */


.button, .button-2 {
    opacity: 1;
    cursor: pointer;
    border: none;
    background: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

    .button:hover {
        opacity: .8;
    }


.icon-xl-size {
    width: 110px !important;
    height: 110px !important;
}

.icon-xl-size-2 {
    width: 80px !important;
    height: 80px !important;
}

.icon-l-size {
    width: 60px !important;
    height: 60px !important;
}

.icon-m-size {
    width: 50px !important;
    height: 50px !important;
}

.icon-s-size {
    width: 40px !important;
    height: 40px !important;
}

.icon-ss-size {
    width: 35px !important;
    height: 35px !important;
}

.icon-xs-size {
    width: 25px !important;
    height: 25px !important;
}

.icon-xxs-size {
    width: 15px !important;
    height: 15px !important;
}


.icon-cover {
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

.icon-contain {
    -webkit-background-size: contain !important;
    -moz-background-size: contain !important;
    -o-background-size: contain !important;
    background-size: contain !important;
}

/*icon size type or bg*/

.icon-bg-size-0 {
    -webkit-background-size: 100% !important;
    -moz-background-size: 100% !important;
    -o-background-size: 100% !important;
    background-size: 100% !important;
}

.icon-bg-size-1 {
    -webkit-background-size: 95% !important;
    -moz-background-size: 95% !important;
    -o-background-size: 95% !important;
    background-size: 95% !important;
}

.icon-bg-size-2 {
    -webkit-background-size: 90% !important;
    -moz-background-size: 90% !important;
    -o-background-size: 90% !important;
    background-size: 90% !important;
}

.icon-bg-size-3 {
    -webkit-background-size: 85% !important;
    -moz-background-size: 85% !important;
    -o-background-size: 85% !important;
    background-size: 85% !important;
}

.icon-bg-size-4 {
    -webkit-background-size: 80% !important;
    -moz-background-size: 80% !important;
    -o-background-size: 80% !important;
    background-size: 80% !important;
}

.icon-bg-size-5 {
    -webkit-background-size: 75% !important;
    -moz-background-size: 75% !important;
    -o-background-size: 75% !important;
    background-size: 75% !important;
}

.icon-bg-size-6 {
    -webkit-background-size: 70% !important;
    -moz-background-size: 70% !important;
    -o-background-size: 70% !important;
    background-size: 70% !important;
}

.icon-bg-size-7 {
    -webkit-background-size: 65% !important;
    -moz-background-size: 65% !important;
    -o-background-size: 65% !important;
    background-size: 65% !important;
}

.icon-bg-size-8 {
    -webkit-background-size: 60% !important;
    -moz-background-size: 60% !important;
    -o-background-size: 60% !important;
    background-size: 60% !important;
}

.icon-bg-size-9 {
    -webkit-background-size: 55% !important;
    -moz-background-size: 55% !important;
    -o-background-size: 55% !important;
    background-size: 55% !important;
}

.icon-bg-size-10 {
    -webkit-background-size: 50% !important;
    -moz-background-size: 50% !important;
    -o-background-size: 50% !important;
    background-size: 50% !important;
}

.icon-bg-size-11 {
    -webkit-background-size: 45% !important;
    -moz-background-size: 45% !important;
    -o-background-size: 45% !important;
    background-size: 45% !important;
}

.icon-bg-size-12 {
    -webkit-background-size: 40% !important;
    -moz-background-size: 40% !important;
    -o-background-size: 40% !important;
    background-size: 40% !important;
}

.icon-bg-size-13 {
    -webkit-background-size: 35% !important;
    -moz-background-size: 35% !important;
    -o-background-size: 35% !important;
    background-size: 35% !important;
}

.icon-bg-size-14 {
    -webkit-background-size: 30% !important;
    -moz-background-size: 30% !important;
    -o-background-size: 30% !important;
    background-size: 30% !important;
}

.icon-bg-size-15 {
    -webkit-background-size: 25% !important;
    -moz-background-size: 25% !important;
    -o-background-size: 25% !important;
    background-size: 25% !important;
}

.icon-bg-size-16 {
    -webkit-background-size: 20% !important;
    -moz-background-size: 20% !important;
    -o-background-size: 20% !important;
    background-size: 20% !important;
}

.icon-bg-size-17 {
    -webkit-background-size: 15% !important;
    -moz-background-size: 15% !important;
    -o-background-size: 15% !important;
    background-size: 15% !important;
}

.icon-bg-size-18 {
    -webkit-background-size: 10% !important;
    -moz-background-size: 10% !important;
    -o-background-size: 10% !important;
    background-size: 10% !important;
}

.icon-bg-size-19 {
    -webkit-background-size: 15% !important;
    -moz-background-size: 15% !important;
    -o-background-size: 15% !important;
    background-size: 15% !important;
}

.icon-bg-size-20 {
    -webkit-background-size: 10% !important;
    -moz-background-size: 10% !important;
    -o-background-size: 10% !important;
    background-size: 10% !important;
}

.icon-bg-size-21 {
    -webkit-background-size: 5% !important;
    -moz-background-size: 5% !important;
    -o-background-size: 5% !important;
    background-size: 5% !important;
}


 




.icon-arow-list {
    background: url('/webdir/img/arow_w.png');
}
.icon-back-b {
    background: url('/webdir/img/back_b.png');
}
.icon-back-w {
    background: url('/webdir/img/back_w.png');
}
.icon-citation-w {
    background: url('/webdir/img/citation_w.png');
}
.icon-comment-w{
    background: url('/webdir/img/comment_w.png');
}
.icon-menu-b{
    background: url('/webdir/img/menu.png');
}
.icon-notification-b{
    background: url('/webdir/img/notification.png');
}
.icon-refresh-b{
    background: url('/webdir/img/refresh.png');
}
.icon-refresh-w{
    background: url('/webdir/img/refresh_w.png');
}
.icon-save-w{
    background: url('/webdir/img/save_w.png');
}
.icon-search-s{
    background: url('/webdir/img/search_s.png');
}
.icon-send-w{
    background: url('/webdir/img/send_w.png');
}
.icon-shair-box{
    background: url('/webdir/img/shair_box.png');
}
.icon-share-w{
    background: url('/webdir/img/share_w.png');
}
.icon-slider{
    background: url('/webdir/img/slider.png');
}
    .icon-slider.active {
        background: url('/webdir/img/slider_active.png');
    }
.icon-user-w {
    background:url('/webdir/img/user_w.png')
}
.icon-zoom {
    background:url('/webdir/img/zoom.png')
}

.icon-close-w {
    background:url('/webdir/img/close_w.png')
}




/* ----------- iPhone 4 and 4S ----------- */

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
}



/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

    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, button, input, select, option, textarea {
        font-size: 98.5%;
    }


    .height-p-5 {
        height: 210px;
    }

    #login .height-p-4,
    #register .height-p-4,
    #acceptcode .height-p-4 {
        height: 140px;
    }

    .owl-dots .owl-dot {
        margin: 20px 0px;
    }

    #cart .width-10,
    #factor .width-10 {
        width: 55%;
    }
}



/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    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, button, input, select, option, textarea {
        font-size: 99.5%;
    }

    .height-p-5 {
        height: 260px;
    }

    #login .height-p-4,
    #register .height-p-4,
    #acceptcode .height-p-4 {
        height: 200px;
    }
}


/* ----------- iPhone X ----------- */
/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
    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, button, input, select, option, textarea {
        font-size: 99%;
    }

    .height-p-5 {
        height: 300px;
    }

    .owl-dots .owl-dot {
        margin: 50px 0px;
    }


    #login .height-p-4,
    #register .height-p-4,
    #acceptcode .height-p-4 {
        height: 250px;
    }
     

}



/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {

    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, button, input, select, option, textarea {
        font-size: 99%;
    }

    .height-s-p-8 {
        height: 36px;
    }

    .height-p-5 {
        height: 350px;
    }

    .owl-dots .owl-dot {
        margin: 50px 0px;
    }

    #login .height-p-4,
    #register .height-p-4,
    #acceptcode .height-p-4 {
        height: 250px;
    }
}

/* ----------- iPhone X MAX ----------- */
@media only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3) and (orientation: portrait) {
    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, button, input, select, option, textarea {
        font-size: 99%;
    }

    .height-s-p-8 {
        height: 36px;
    }

    .height-p-5 {
        height: 350px;
    }

    .owl-dots .owl-dot {
        margin: 50px 0px;
    }

    #login .height-p-4,
    #register .height-p-4,
    #acceptcode .height-p-4 {
        height: 250px;
    }
}

@media (orientation: landscape) {
    .hide-land {
        1display: none !important;
    }
}

/* ----------- Tablet ----------- */
 

/* Portrait */
@media only screen and (min-device-width: 768px) and (orientation: portrait) {
    #login img.width-10,
    #register img.width-10,
    #acceptcode img.width-10,
    #introview img.width-10 {
        width: 25%;
    }
}
 



 



/*----------------------M.O---------------------------*/
/* Center the loader */
.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 99999;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    border: 10px solid #c3c3c3;
    border-radius: 50%;
    border-top: 10px solid #3498db;
    width: 40px;
    height: 40px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
 

.stand-alone {
                position: fixed;
                top: 0;
                width: calc(100% - 40px);
                height: 100%;
                background: #4d4d4f;
                display: -webkit-flex;
                display: flex;
                -webkit-flex-flow: column;
                flex-flow: column;
                padding: 20px;
                z-index: 12;
            } 
            .stand-alone__header {
                font-size: 16px;
                color: #fff;
                text-align: center;
                line-height: 28px;
                direction: rtl;
            } 
            .stand-alone__main {
                border-radius: 8px;
                margin-top: 26px;
                display: -webkit-flex;
                display: flex;
                -webkit-flex-flow: column;
                flex-flow: column;
                padding: 17px;
                background-color: hsla(0,0%,81.6%,.3);
            }  
            .ios_main_icon {
                margin: 5px auto 10px; 
                background: url(/webdir/img/logo_app.png) no-repeat;
                background-size: 80px 80px;
                display: block;
                width: 80px;
                height: 80px;
            } 
            .stand-alone__main-item {
                margin-top: 12px;
                margin-bottom: 12px;
                direction: rtl;
                font-size: 14px;
                color: #fff;
                line-height: 25px;
            } 
            .ios_share_icon {
                background: url(/webdir/img/share_ios.png) no-repeat;
                background-size: 20px 20px;
                display: inline-block;
                width: 20px;
                height: 20px;
            }

            .ios_homescreen_ios {
                background: url(/webdir/img/addtoscreen_ios.png) no-repeat;
                background-size: 50px 59px;
                display: inline-block;
                width: 50px;
                height: 59px;
            }


              .and_share_icon {
                background: url(/webdir/img/share_and.png) no-repeat;
                background-size: 30px 30px;
                display: inline-block;
                width: 30px;
                height: 30px; 
            }

                .and_share_icon_menu {
                background: url(/webdir/img/share_and_menu.png) no-repeat;
                background-size: 30px 30px;
                display: inline-block;
                width: 30px;
                height: 30px; 
            }
/********************************************************************/

                    


  .draggablep-panel {
    left: 50%;
    top: auto;
    bottom: 20%;
    transform: translate(-50%,0%);
    z-index: 100000;
    width: 75%;
}

.close {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    color: #f00;
    text-shadow: 0 1px 0 #fff;
    position: absolute;
    left: 3%;
    top: 3%; 
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer
}