body {
   margin: 0 0;
   padding: 0 0;
   font-family: 'Roboto', sans-serif;
   width: 100%;
   height: 100%;
}



.transform-cube {
   margin: 20px auto;
   width: 80px;
   height: 80px;
   position: relative;
   -webkit-transform: rotateZ(45deg);
   transform: rotateZ(45deg);
}

.transform-cube .tcube {
   float: left;
   width: 50%;
   height: 50%;
   position: relative;
   -webkit-transform: scale(1.1);
   -ms-transform: scale(1.1);
   transform: scale(1.1);
}

.transform-cube .tcube:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #ffad32;
   -webkit-animation: tcube-anima 3.0s infinite linear both;
   animation: tcube-anima 3.0s infinite linear both;
   -webkit-transform-origin: 100% 100%;
   -ms-transform-origin: 100% 100%;
   transform-origin: 100% 100%;
}

.transform-cube .tcube2 {
   -webkit-transform: scale(1.1) rotateZ(90deg);
   transform: scale(1.1) rotateZ(90deg);
}

.transform-cube .tcube3 {
   -webkit-transform: scale(1.1) rotateZ(180deg);
   transform: scale(1.1) rotateZ(180deg);
}

.transform-cube .tcube4 {
   -webkit-transform: scale(1.1) rotateZ(270deg);
   transform: scale(1.1) rotateZ(270deg);
}

.transform-cube .tcube2:before {
   background-color: #ff9000;
   -webkit-animation-delay: 0.3s;
   animation-delay: 0.3s;
}

.transform-cube .tcube3:before {
   background-color: #c56300;
   -webkit-animation-delay: 0.6s;
   animation-delay: 0.6s;
}

.transform-cube .tcube4:before {
   background-color: #a7640d;
   -webkit-animation-delay: 0.9s;
   animation-delay: 0.9s;
}

@-webkit-keyframes tcube-anima {

   0%,
   10% {
      -webkit-transform: perspective(140px) rotateX(-180deg);
      transform: perspective(140px) rotateX(-180deg);
      opacity: 0;
   }

   25%,
   75% {
      -webkit-transform: perspective(140px) rotateX(0deg);
      transform: perspective(140px) rotateX(0deg);
      opacity: 1;
   }

   90%,
   100% {
      -webkit-transform: perspective(140px) rotateY(180deg);
      transform: perspective(140px) rotateY(180deg);
      opacity: 0;
   }
}

@keyframes tcube-anima {

   0%,
   10% {
      -webkit-transform: perspective(140px) rotateX(-180deg);
      transform: perspective(140px) rotateX(-180deg);
      opacity: 0;
   }

   25%,
   75% {
      -webkit-transform: perspective(140px) rotateX(0deg);
      transform: perspective(140px) rotateX(0deg);
      opacity: 1;
   }

   90%,
   100% {
      -webkit-transform: perspective(140px) rotateY(180deg);
      transform: perspective(140px) rotateY(180deg);
      opacity: 0;
   }
}





.robo100 {
   font-family: 'Roboto', sans-serif;
   font-weight: 100;
}

.robo300 {
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
}

.robo400 {
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
}

.robo500 {
   font-family: 'Roboto', sans-serif;
   font-weight: 500;
}




.letter1 {
   letter-spacing: 1px;
}

.letter2 {
   letter-spacing: 2px;
}

.letter3 {
   letter-spacing: 3px;
}

.letter4 {
   letter-spacing: 4px;
}


h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
a,
span {
   margin: 0 0;
   padding: 0 0;
}

a {
   text-decoration: none
}

ul {
   list-style: none;
}


.imgitem {
   max-width: 100%;
   height: auto;
   aspect-ratio: attr(width) / attr(height);
}

.side-builder {
   position: fixed;
   width: 0;
   height: 100%;
   z-index: 99999999;
   top: 0;
   right: 0;
   background-color: #111;
   overflow-x: hidden;
   transition: 0.5s;
   text-align: center;
}

.side-nav {
   position: fixed;
   width: 0;
   height: 100%;
   z-index: 99999999;
   top: 0;
   left: 0;
   background-color: #111;
   overflow-x: hidden;
   transition: 0.5s;
   text-align: center;
}

.ul-disc {
   list-style: disc;
   list-style-position: inside;
}

.ul-circle {
   list-style: circle;
   list-style-position: inside;
}

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

.text-nounderline {
   text-decoration: none;
}

.nomargin {
   margin: 0;
}

input:focus::-moz-placeholder,
input:focus::-moz-placeholder {
   color: #7c7c7c;
}

input:focus:-moz-placeholder,
input:focus:-moz-placeholder {
   color: #7c7c7c;
}

input:focus:-webkit-input-placeholder,
input:focus:-webkit-input-placeholder {
   color: #7c7c7c;
}



.setlab input:checked+.labtext {
   color: #85a221;
}



.switch-frame {
   position: relative;
   display: inline-block;
   width: 80px;
   height: 24px;
}

.switch-frame input {
   display: none;
}

.switch-slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   height: 24px;
   -webkit-transition: .4s;
   transition: .4s;
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2) inset;
}

.switch-slider:before {
   position: absolute;
   content: "";
   height: 17px;
   width: 12px;
   left: 3px;
   bottom: 3px;
   border-radius: 4px;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
   z-index: 9999;
}

/*
 input:checked + .switch-slider {
   background-color: #2ab934;
 }
 */


input:checked+.switch-slider:before {
   -webkit-transform: translateX(62px);
   -ms-transform: translateX(62px);
   transform: translateX(62px);
}

.switch-on {
   display: none;
}

.switch-on,
.switch-off {
   color: white;
   position: absolute;
   transform: translate(-50%, -50%);
   top: 50%;
   left: 50%;
   font-size: 10px;
   font-family: Verdana, sans-serif;
   height: 24px;
   line-height: 24px;
}

input:checked+.switch-slider .switch-on {
   display: block;
}

input:checked+.switch-slider .switch-off {
   display: none;
}


input:focus {
   outline: none;
   outline-width: 0;
}


.flag-size {
   width: 40px;
   height: 100%;
   background-repeat: no-repeat;
   background-size: 24px 20px;
   text-align: center;
   background-position: center;
}


@-webkit-keyframes krotating

/* Safari and Chrome */
   {
   from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
   }

   to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

@keyframes krotating {
   from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);

   }

   to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);

   }
}

.rotating {
   -webkit-animation: krotating 2s linear infinite;
   -moz-animation: krotating 2s linear infinite;
   -ms-animation: krotating 2s linear infinite;
   -o-animation: krotating 2s linear infinite;
   animation: krotating 2s linear infinite;
}

.recaptcha {
   display: block;
   z-index: -1;
}

.text-rotate90 {
   transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
}

.cs-pborder-noselect {
   box-sizing: border-box;
   border-bottom: 1px solid #323232;
   border-top: 2px solid transparent;
   border-left: 2px solid transparent;
   border-right: 2px solid transparent;
   padding-bottom: 1px;
}

.cs-border-empty {
   box-sizing: border-box;
   border-bottom-color: transparent;
   border-top-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
}

.cs-pborder-select {
   border: 2px solid #85a221;
}

.cs-pborder-select-hover:hover {
   border: 2px solid #85a221;
}



.cs-background-supporter {
   background: linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(253, 29, 29, 1) 40%, rgba(131, 58, 180, 1) 100%);
   box-shadow: 0 0 6px rgba(253, 29, 29, 0.7);
}


.cs-attention {
   background: #85a221;
   background: -moz-linear-gradient(0deg, rgba(49, 149, 164, 1) 0%, rgba(154, 184, 52, 1) 100%);
   background: -webkit-linear-gradient(0deg, rgba(49, 149, 164, 1) 0%, rgba(154, 184, 52, 1) 100%);
   background: linear-gradient(0deg, rgba(49, 149, 164, 1) 0%, rgba(154, 184, 52, 1) 100%);
}


.bg-black {
   background: #010202;
}

.bg-black-dark {
   background: #111212;
}

.bg-black-light {
   background: #1f2020;
}

.border-black {
   border-color: #010202;
}

.border-black-dark {
   border-color: #111212;
}

.border-black-light {
   border-color: #191a1a;
}

.cs-background-green-dark {
   background: #748a28;
}

.no-background {
   background-color: transparent;
}

/*.dark-mode .cm-body{ background:#2b2c30; }*/

.dark-mode .cm-body {
   background: #181819;
}

.light-mode .cm-body {
   background: #f4f5f7;
}

/*.dark-mode .fill-body{ background:#2b2c30; }*/
.dark-mode .fill-body {
   background: #181819;
}

.light-mode .fill-body {
   background: #f4f5f7;
}



.cs-body {
   background: #181819;
}

.resultbox {
   width: 34px;
   height: 34px;
   line-height: 34px;
   margin-top: 3px;
   text-align: center;
}


.cs-background-black1 {
   background: #1e1f1f;
}


.light-mode .cm-background0 {
   background: #111212;
}

.dark-mode .cm-background0 {
   background: #111212;
}

.light-mode .cm-background1 {
   background: #feffff;
}

.dark-mode .cm-background1 {
   background: #1e1f1f;
}

.dark-mode .cm-background2 {
   background: #262626;
}

.light-mode .cm-background2 {
   background: #e6e6e6;
}

.light-mode .cm-background3 {
   background: #828080;
}

.dark-mode .cm-background3 {
   background: #1e1f1f;
}

.dark-mode .cm-background4 {
   background: #262626;
}

.light-mode .cm-background4 {
   background: #f8f8f8;
}

.light-mode .cm-background5 {
   background: #f1f2f2;
}

.dark-mode .cm-background5 {
   background: #262626;
}


.dark-mode .cm-text0 {
   color: #ffffff;
}

.light-mode .cm-text0 {
   color: #000000;
}

.light-mode .cm-text1 {
   color: #1e1f1f;
}

.dark-mode .cm-text1 {
   color: #f0f0f0;
}

.light-mode .cm-text2 {
   color: #808080;
}

.dark-mode .cm-text2 {
   color: #f0f0f0;
}

.light-mode .cm-text3 {
   color: #484848;
}

.dark-mode .cm-text3 {
   color: #b1b1b1;
}

.cm-text3-dark {
   color: #b1b1b1;
}

.light-mode .cm-border-grey {
   border-color: #c0c1c1;
}

.dark-mode .cm-border-grey {
   border-color: #404141;
}

.dark-mode .cm-border0 {
   border-color: #ffffff;
}

.light-mode .cm-border0 {
   border-color: #000000;
}

.dark-mode .cm-border0-hover:hover {
   border-color: #ffffff;
}

.light-mode .cm-border0-hover:hover {
   border-color: #000000;
}

.light-mode .cm-border3 {
   border-color: #dcdcdc;
}

.dark-mode .cm-border3 {
   border-color: #3f3f3f;
}

.cm-border2-dark {
   border-color: #242424;
}

.cm-border3-dark {
   border-color: #3f3f3f;
}

.cm-border4-dark {
   border-color: #323330;
}

.light-mode .cm-border4 {
   border-color: #dcdcdc;
}

.dark-mode .cm-border4 {
   border-color: #323330;
}

.light-mode .cm-outline4 {
   outline-color: #dcdcdc;
   outline-style: solid;
}

.dark-mode .cm-outline4 {
   outline-color: #323330;
   outline-style: solid;
}

.light-mode .cm-outline3 {
   outline-color: #dcdcdc;
   outline-style: solid;
}

.dark-mode .cm-outline3 {
   outline-color: #3f3f3f;
   outline-style: solid;
}


.outline1 {
   outline-width: 1px;
}

.outline2 {
   outline-width: 2px;
}

.outline3 {
   outline-width: 3px;
}

.cm-background-black0 {
   background: #1a1a1a;
}




.placeholder-input:focus {
   border-width: 2px;
   border-color: #1b98e0;
}


.placeholder-input:not(:placeholder-shown)~.placeholder-label,
.placeholder-input:focus~.placeholder-label {
   padding-left: 10px;
   padding-right: 10px;
   color: #1b98e0;
   top: 0px;
   bottom: 10px;
   left: 20px;
   font-size: 11px;
   opacity: 1;
}



.placeholder-input:not(:focus):not(:placeholder-shown)~.placeholder-label {
   color: #808080;
}

.placeholder-label {
   background-color: transparent;
   position: absolute;
   pointer-events: none;
   font-size: 13px;
   left: 20px;
   top: 18px;
   transition: 0.2s ease all;
   -webkit-transition: 0.2s ease all;
}



.cm-background-black0 {
   background: #1a1a1a;
}


.cs-background-grey {
   background: #1e1f1f;
}

.cs-border-grey {
   border-color: #1e1f1f;
}

.cs-background-grey-dark {
   background: #383937;
}

.cs-background-real-yellow {
   background: #fff600;
}

.cs-border-real-yellow {
   border-color: #fff600;
}

.cs-text-real-yellow {
   color: #fff600;
}

.cs-background-green {
   background: #85a221;
}


.no-select-btn,
.no-select {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
}

.no-select-btn:hover,
.no-select-btn:focus {
   box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4) inset;
}

.no-select-btn:active {
   box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8) inset;
}



.cs-btn {
   height: 40px;
   line-height: 40px;
   padding-left: 20px;
   padding-right: 20px;
   white-space: nowrap;
}


.cs-btn-green {
   background: #85a221;
}

.cs-btn-green:hover {
   background: #a6c63a;
}

.cs-btn-green:active {
   background: #859f2d;
}

.cs-background-green-hover:hover {
   background-color: #85a221;
}

.cs-text-green {
   color: #85a221;
}

.cs-text-green-hover:hover {
   color: #85a221;
}

.cs-border-green {
   border-color: #85a221;
}

.cs-border-green-nobk {
   border-color: #85a221;
}

.border-grey-dark-nobk {
   border-color: #484848;
}

.cs-border-input {
   border-color: #323330;
}

.cs-text-grey {
   color: #323330;
}

.cs-background-input {
   background: #242523;
}

.cs-border {
   border-color: #535450;
}


.background-grey10 {
   background: #1c1c1c;
}

.bbf {
   display: none;
}


.pointer {
   cursor: pointer;
}

.popup-overlay {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.7);
}


.visible {
   visibility: visible;
}

.invisible {
   visibility: hidden;
}


.notifi-message {
   position: fixed;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   max-width: 600px;
   opacity: 1;
   text-align: center;
   border-radius: 6px;
   padding: 10px 10px;
   white-space: nowrap;
   z-index: 9999999;
   box-sizing: border-box;
   transition-property: opacity;
   transition-duration: 1s;
   transition-delay: .2s;

}

/******* TOOLTIP begin ********/

/**/
.tooltip {
   position: relative;
}


.tooltip .tooltip-top,
.tooltip .tooltip-bottom {
   padding: 0px 10px;
}

.tooltip .tooltip-left,
.tooltip .tooltip-right {
   padding: 10px 10px;
}

.tooltip .tooltip-top,
.tooltip .tooltip-left,
.tooltip .tooltip-right,
.tooltip .tooltip-bottom {
   position: absolute;
   visibility: hidden;
   opacity: 0;
   width: auto;
   background-color: rgba(10, 10, 10, 0.7);
   text-align: center;
   border-radius: 6px;
   white-space: nowrap;
   z-index: 9999;
   box-sizing: border-box;
   transition-property: opacity;
   transition-duration: 1s;
   transition-delay: .2s;
}

.tooltip .tooltip-top {
   bottom: 105%;
   left: 50%;
   transform: translateX(-50%) translateY(-5px);
}

.tooltip .tooltip-left {
   top: 50%;
   right: 105%;
   transform: translateX(5px) translateY(-50%);
}

.tooltip .tooltip-right {
   top: 50%;
   left: 105%;
   transform: translateX(-5px) translateY(-50%);
}

.tooltip .tooltip-bottom {
   top: 105%;
   left: 50%;
   transform: translateX(-50%) translateY(5px);
}

.tooltip .tooltip-top::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border: 5px solid;
   border-color: rgba(10, 10, 10, 0.7) transparent transparent transparent;
}

.tooltip .tooltip-left::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 100%;
   margin-top: -5px;
   border: 5px solid;
   border-color: transparent transparent transparent rgba(10, 10, 10, 0.7);
}

.tooltip .tooltip-right::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 100%;
   margin-top: -5px;
   border: 5px solid;
   border-color: transparent rgba(10, 10, 10, 0.7) transparent transparent;
}

.tooltip .tooltip-bottom::after {
   content: "";
   position: absolute;
   bottom: 100%;
   left: 50%;
   margin-left: -5px;
   border: 5px solid;
   border-color: transparent transparent rgba(10, 10, 10, 0.7) transparent;
}

.tooltip:hover .tooltip-top,
.tooltip:hover .tooltip-left,
.tooltip:hover .tooltip-right,
.tooltip:hover .tooltip-bottom {
   visibility: visible;
   opacity: 1;
}


/******* TOOLTIP end ********/

.container {
   display: flex;
   width: 100%;
   max-width: 1920px;
}

.btn {
   display: block;
   border: none;
   white-space: nowrap;
   text-align: center;
   box-sizing: border-box;
}

.field {
   display: flex;
   border: none;
   white-space: nowrap;
   padding-left: 20px;
   padding-right: 20px;
   box-sizing: border-box;
}

.area {
   display: flex;
   border: none;
   padding: 20px;
   box-sizing: border-box;
}

.pad5 {
   padding: 5px;
}

.pad10 {
   padding: 10px;
}

.pad20 {
   padding: 20px;
}

.pad40 {
   padding: 40px;
}

.pad50 {
   padding: 50px;
}

.pad60 {
   padding: 60px;
}

.pad80 {
   padding: 80px;
}

.pad100 {
   padding: 100px;
}

.hpad5 {
   padding-left: 5px;
   padding-right: 5px;
}

.hpad10 {
   padding-left: 10px;
   padding-right: 10px;
}

.hpad20 {
   padding-left: 20px;
   padding-right: 20px;
}

.hpad40 {
   padding-left: 40px;
   padding-right: 40px;
}

.hpad50 {
   padding-left: 50px;
   padding-right: 50px;
}

.hpad60 {
   padding-left: 60px;
   padding-right: 60px;
}

.hpad80 {
   padding-left: 80px;
   padding-right: 80px;
}

.hpad100 {
   padding-left: 100px;
   padding-right: 100px;
}

.vpad5 {
   padding-top: 5px;
   padding-bottom: 5px;
}

.vpad10 {
   padding-top: 10px;
   padding-bottom: 10px;
}

.vpad20 {
   padding-top: 20px;
   padding-bottom: 20px;
}

.vpad40 {
   padding-top: 40px;
   padding-bottom: 40px;
}

.vpad50 {
   padding-top: 50px;
   padding-bottom: 50px;
}

.vpad60 {
   padding-top: 60px;
   padding-bottom: 60px;
}

.vpad80 {
   padding-top: 80px;
   padding-bottom: 80px;
}

.vpad100 {
   padding-top: 100px;
   padding-bottom: 100px;
}

.tpad5 {
   padding-top: 5px;
}

.tpad10 {
   padding-top: 10px;
}

.tpad15 {
   padding-top: 15px;
}

.tpad20 {
   padding-top: 20px;
}

.tpad40 {
   padding-top: 40px;
}

.tpad50 {
   padding-top: 50px;
}

.tpad60 {
   padding-top: 60px;
}

.tpad80 {
   padding-top: 80px;
}

.tpad100 {
   padding-top: 100px;
}

.lpad5 {
   padding-left: 5px;
}

.lpad10 {
   padding-left: 10px;
}

.lpad20 {
   padding-left: 20px;
}

.lpad40 {
   padding-left: 40px;
}

.lpad50 {
   padding-left: 50px;
}

.lpad60 {
   padding-left: 60px;
}

.lpad80 {
   padding-left: 80px;
}

.lpad100 {
   padding-left: 100px;
}

.rpad5 {
   padding-right: 5px;
}

.rpad10 {
   padding-right: 10px;
}

.rpad20 {
   padding-right: 20px;
}

.rpad40 {
   padding-right: 40px;
}

.rpad50 {
   padding-right: 50px;
}

.rpad60 {
   padding-right: 60px;
}

.rpad80 {
   padding-right: 80px;
}

.rpad100 {
   padding-right: 100px;
}

.bpad5 {
   padding-bottom: 5px;
}

.bpad10 {
   padding-bottom: 10px;
}

.bpad20 {
   padding-bottom: 20px;
}

.bpad40 {
   padding-bottom: 40px;
}

.bpad50 {
   padding-bottom: 50px;
}

.bpad60 {
   padding-bottom: 60px;
}

.bpad80 {
   padding-bottom: 80px;
}

.bpad100 {
   padding-bottom: 100px;
}

.border-box {
   box-sizing: border-box;
}

.mar5 {
   margin: 5px;
}

.mar10 {
   margin: 10px;
}

.mar20 {
   margin: 20px;
}

.mar40 {
   margin: 40px;
}

.mar60 {
   margin: 60px;
}

.mar80 {
   margin: 80px;
}

.mar100 {
   margin: 100px;
}

.hmar5 {
   margin-left: 5px;
   margin-right: 5px;
}

.hmar10 {
   margin-left: 10px;
   margin-right: 10px;
}

.hmar20 {
   margin-left: 20px;
   margin-right: 20px;
}

.hmar40 {
   margin-left: 40px;
   margin-right: 40px;
}

.hmar60 {
   margin-left: 60px;
   margin-right: 60px;
}

.hmar80 {
   margin-left: 80px;
   margin-right: 80px;
}

.hmar100 {
   margin-left: 100px;
   margin-right: 100px;
}

.vmar5 {
   margin-top: 5px;
   margin-bottom: 5px;
}

.vmar10 {
   margin-top: 10px;
   margin-bottom: 10px;
}

.vmar20 {
   margin-top: 20px;
   margin-bottom: 20px;
}

.vmar40 {
   margin-top: 40px;
   margin-bottom: 40px;
}

.vmar60 {
   margin-top: 60px;
   margin-bottom: 60px;
}

.vmar80 {
   margin-top: 80px;
   margin-bottom: 80px;
}

.vmar100 {
   margin-top: 100px;
   margin-bottom: 100px;
}

.tmar5 {
   margin-top: 5px;
}

.tmar10 {
   margin-top: 10px;
}

.tmar20 {
   margin-top: 20px;
}

.tmar40 {
   margin-top: 40px;
}

.tmar50 {
   margin-top: 50px;
}

.tmar60 {
   margin-top: 60px;
}

.tmar80 {
   margin-top: 80px;
}

.tmar100 {
   margin-top: 100px;
}

.lmar5 {
   margin-left: 5px;
}

.lmar10 {
   margin-left: 10px;
}

.lmar20 {
   margin-left: 20px;
}

.lmar40 {
   margin-left: 40px;
}

.lmar60 {
   margin-left: 60px;
}

.lmar80 {
   margin-left: 80px;
}

.lmar100 {
   margin-left: 100px;
}

.rmar5 {
   margin-right: 5px;
}

.rmar10 {
   margin-right: 10px;
}

.rmar20 {
   margin-right: 20px;
}

.rmar40 {
   margin-right: 40px;
}

.rmar60 {
   margin-right: 60px;
}

.rmar80 {
   margin-right: 80px;
}

.rmar100 {
   margin-right: 100px;
}

.bmar5 {
   margin-bottom: 5px;
}

.bmar10 {
   margin-bottom: 10px;
}

.bmar20 {
   margin-bottom: 20px;
}

.bmar40 {
   margin-bottom: 40px;
}

.bmar50 {
   margin-bottom: 50px;
}

.bmar60 {
   margin-bottom: 60px;
}

.bmar80 {
   margin-bottom: 80px;
}

.bmar100 {
   margin-bottom: 100px;
}


.text-black {
   color: #000000;
}

.text-grey-black {
   color: #262626;
}

.text-grey-dark {
   color: #484848;
}

.text-grey {
   color: #808080;
}

.text-grey-light {
   color: #cbcbcb;
}

.text-grey-white {
   color: #f0f0f0;
}

.text-white {
   color: #ffffff;
}

.text-blue {
   color: #1b98e0;
}

.text-blue-dark {
   color: #355c7d;
}

.text-green {
   color: #85a221;
}

.text-teal {
   color: #39aea9;
}

.text-red {
   color: #e0321b;
}

.text-yellow {
   color: #fcb13f;
}

.text-violet {
   color: rgba(131, 58, 180, 1);
}

.text-cs {
   color: #f28433;
}


.text-black-hover:hover,
.text-black-hover:focus {
   color: #000000;
}

.text-grey-black-hover:hover,
.text-grey-black-hover:focus {
   color: #262626;
}

.text-grey-dark-hover:hover,
.text-grey-dark-hover:focus {
   color: #484848;
}

.text-grey-hover:hover,
.text-grey-hover:focus {
   color: #808080;
}

.text-grey-light-hover:hover,
.text-grey-light-hover:focus {
   color: #cbcbcb;
}

.text-grey-white-hover:hover,
.text-grey-white-hover:focus {
   color: #f0f0f0;
}

.text-white-hover:hover,
.text-white-hover:focus {
   color: #ffffff;
}

.text-blue-hover:hover,
.text-blue-hover:focus {
   color: #1b98e0;
}

.text-blue-dark-hover:hover,
.text-blue-dark-hover:focus {
   color: #355c7d;
}

.text-green-hover:hover,
.text-green-hover:focus {
   color: #85a221;
}

.text-teal-hover:hover,
.text-teal-hover:focus {
   color: #39aea9;
}

.text-red-hover:hover,
.text-red-hover:focus {
   color: #e0321b;
}

.text-yellow-hover:hover,
.text-yellow-hover:focus {
   color: #fcb13f;
}

.text-cs-hover:hover,
.text-cs-hover:focus {
   color: #f28433;
}

.text-uppercase {
   text-transform: uppercase;
}

.text-lowercase {
   text-transform: lowercase;
}

.text-capitalize {
   text-transform: capitalize
}

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

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

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

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

.text-nowrap {
   white-space: nowrap;
}

.border-all {
   border-style: solid;
}

.border-top {
   border-top-style: solid;
}

.border-left {
   border-left-style: solid;
}

.border-right {
   border-right-style: solid;
}

.border-bottom {
   border-bottom-style: solid;
}

.select-shadow {
   box-shadow: 0px 0px 14px rgba(221, 122, 49, 1) inset;
}

.select-shadow-hover:hover,
.select-shadow-hover:focus {
   box-shadow: 0px 0px 14px rgba(221, 122, 49, 1) inset;
}

.border-black {
   border-color: #000000;
}

.border-grey-black {
   border-color: #323232;
}

.border-grey-dark {
   border-color: #484848;
}

.border-grey {
   border-color: #808080;
}

.border-grey-light {
   border-color: #cbcbcb;
}

.border-grey-white {
   border-color: #f0f0f0;
}

.border-white {
   border-color: #ffffff;
}

.border-blue {
   border-color: #1b98e0;
}

.border-blue-dark {
   border-color: #355c7d;
}

.border-green {
   border-color: #85a221;
}

.border-green-dark {
   border-color: #67780c;
}

.border-teal {
   border-color: #39aea9;
}

.border-red {
   border-color: #e0321b;
}

.border-yellow {
   border-color: #fcb13f;
}

.border-cs {
   border-color: #f28433;
}

.border-black-hover:hover,
.border-black-hover:focus {
   border-color: #000000;
}

.border-grey-black-hover:hover,
.border-grey-black-hover:focus {
   border-color: #323232;
}

.border-grey-dark-hover:hover,
.border-grey-dark-hover:focus {
   border-color: #484848;
}

.border-grey-hover:hover,
.border-grey-hover:focus {
   border-color: #808080;
}

.border-grey-light-hover:hover,
.border-grey-light-hover:focus {
   border-color: #cbcbcb;
}

.border-grey-white-hover:hover,
.border-grey-white-hover:focus {
   border-color: #f0f0f0;
}

.border-white-hover:hover,
.border-white-hover:focus {
   border-color: #ffffff;
}

.border-blue-hover:hover,
.border-blue-hover:focus {
   border-color: #1b98e0;
}

.border-blue-dark-hover:hover,
.border-blue-dark-hover:focus {
   border-color: #355c7d;
}

.border-green-hover:hover,
.border-green-hover:focus {
   border-color: #85a221;
}

.border-green-dark-hover:hover,
.border-green-dark-hover:focus {
   border-color: #67780c;
}

.border-teal-hover:hover,
.border-teal-hover:focus {
   border-color: #39aea9;
}

.border-red-hover:hover,
.border-red-hover:focus {
   border-color: #e0321b;
}

.border-yellow-hover:hover,
.border-yellow-hover:focus {
   border-color: #fcb13f;
}

.border-cs-hover:hover,
.border-cs-hover:focus {
   border-color: #f28433;
}

.border-black-focus:focus {
   border-color: #000000;
}

.border-grey-black-focus:focus {
   border-color: #323232;
}

.border-grey-dark-focus:focus {
   border-color: #484848;
}

.border-grey-focus:focus {
   border-color: #808080;
}

.border-grey-light-focus:focus {
   border-color: #cbcbcb;
}

.border-grey-white-focus:focus {
   border-color: #f0f0f0;
}

.border-white-focus:focus {
   border-color: #ffffff;
}

.border-green-focus:focus {
   border-color: #85a221;
}

.border-green-dark-focus:focus {
   border-color: #67780c;
}

.border-blue-focus:focus {
   border-color: #1b98e0;
}

.border-teal-focus:focus {
   border-color: #39aea9;
}

.border-red-focus:focus {
   border-color: #e0321b;
}

.border-yellow-focus:focus {
   border-color: #fcb13f;
}

.border-dashed {
   border-style: dashed;
}

.background-black {
   background-color: #000000;
}

.background-black-dark {
   background-color: #161616;
}

.background-grey-black {
   background-color: #262626;
}

.background-grey-dark {
   background-color: #484848;
}

.background-grey {
   background-color: #808080;
}

.background-grey-light {
   background-color: #cbcbcb;
}

.background-grey-white {
   background-color: #f0f0f0;
}

.background-white {
   background-color: #ffffff;
}

.background-blue {
   background-color: #1b98e0;
}

.background-blue-dark {
   background-color: #355c7d;
}

.background-green {
   background-color: #85a221;
}

.background-green-dark {
   background-color: #67780c;
}

.background-teal {
   background-color: #39aea9;
}

.background-red {
   background-color: #e0321b;
}

.background-yellow {
   background-color: #fcb13f;
}

.background-trans {
   background: transparent;
}

.background-cs {
   background-color: #85a221;
}


.background-gradient-red-yellow {
   background: linear-gradient(90deg, rgba(224, 50, 27, 1) 0%, rgba(252, 177, 63, 1) 70%);
}

.background-gradient-yellow-green {
   background: linear-gradient(90deg, rgba(252, 177, 63, 1) 0%, rgba(133, 162, 33, 1) 70%);
}


.background-black-hover:hover,
.background-black-hover:focus {
   background-color: #000000;
}

.background-grey-black-hover:hover,
.background-grey-black-hover:focus {
   background-color: #262626;
}

.background-grey-dark-hover:hover,
.background-grey-dark-hover:focus {
   background-color: #484848;
}

.background-grey-hover:hover,
.background-grey-hover:focus {
   background-color: #808080;
}

.background-grey-light-hover:hover,
.background-grey-light-hover:focus {
   background-color: #cbcbcb;
}

.background-grey-white-hover:hover,
.background-grey-white-hover:focus {
   background-color: #f0f0f0;
}

.background-white-hover:hover,
.background-white-hover:focus {
   background-color: #ffffff;
}

.background-blue-hover:hover,
.background-blue-hover:focus {
   background-color: #1b98e0;
}

.background-green-hover:hover,
.background-green-hover:focus {
   background-color: #85a221;
}

.background-green-dark-hover:hover,
.background-green-dark-hover:focus {
   background-color: #67780c;
}

.background-teal-hover:hover,
.background-teal-hover:focus {
   background-color: #39aea9;
}

.background-red-hover:hover,
.background-red-hover:focus {
   background-color: #e0321b;
}

.background-yellow-hover:hover,
.background-yellow-hover:focus {
   background-color: #fcb13f;
}

.background-cs-hover:hover,
.background-cs-hover:focus {
   background-color: #f28433;
}


.opacity2 {
   background-color: rgba(0, 0, 0, 0.2);
}

.opacity4 {
   background-color: rgba(0, 0, 0, 0.4);
}

.opacity5 {
   background-color: rgba(0, 0, 0, 0.5);
}

.opacity6 {
   background-color: rgba(0, 0, 0, 0.6);
}

.opacity8 {
   background-color: rgba(0, 0, 0, 0.8);
}


.shadow2 {
   box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
}

.shadow4 {
   box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.4);
}

.shadow5 {
   box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
}

.shadow6 {
   box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.6);
}

.shadow8 {
   box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.8);
}

.text-shadow2 {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.text-shadow4 {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.text-shadow5 {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.text-shadow6 {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

.text-shadow8 {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}

.text-shadow2-hover:hover {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.text-shadow4-hover:hover {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.text-shadow5-hover:hover {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.text-shadow6-hover:hover {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

.text-shadow8-hover:hover {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}

.filter-sepia {
   filter: sepia(100%);
}

.filter-grey {
   filter: grayscale(100%);
}

.filter-blur2 {
   filter: blur(2px);
}

.filter-blur4 {
   filter: blur(4px);
}

.filter-blur6 {
   filter: blur(6px);
}

.filter-blur8 {
   filter: blur(8px);
}

.filter-blur10 {
   filter: blur(10px);
}

.filter-blur20 {
   filter: blur(20px);
}

.filter-blur40 {
   filter: blur(40px);
}

.hidden {
   display: none;
}

.show-hidden-hover:hover .hidden {
   display: block;
}

.show {
   display: block;
}

.hide-hover:hover {
   display: none;
}

.overflow-hidden {
   overflow: hidden;
}

.text-ellipsis {
   text-overflow: ellipsis;
}

.wrap-any {
   word-wrap: anywhere;
}

.wrap-word {
   word-wrap: break-word;
}

.overlay-width {
   width: 0;
}

.overlay-height {
   height: 0;
}

.overlay-size {
   width: 0;
   height: 0;
}

.overlay-opacity0 {
   opacity: 0;
}

.overlay-opacity1 {
   opacity: 5;
}

.overlay-scale {
   transform: scale(0);
}

.overlay-sepia {
   filter: sepia(100%);
}

.overlay-grey {
   filter: grayscale(100%);
}

.overlay-hover:hover .overlay-width {
   width: 100%;
}

.overlay-hover:hover .overlay-height {
   height: 100%;
}

.overlay-hover:hover .overlay-size {
   width: 100%;
   height: 100%;
}

.overlay-hover:hover .overlay-opacity0 {
   opacity: 1;
}

.overlay-hover:hover .overlay-opacity1 {
   opacity: 0;
}

.overlay-hover:hover .overlay-scale {
   transform: scale(1);
}

.overlay-hover:hover .overlay-sepia {
   filter: sepia(0);
}

.overlay-hover:hover .overlay-grey {
   filter: grayscale(0);
}


.overlay-filter-grey {
   filter: grayscale(100%);
}

.overlay-filter-grey-hover:hover {
   filter: grayscale(0);
}


.border1 {
   border-width: 1px;
}

.border2 {
   border-width: 2px;
}

.border3 {
   border-width: 3px;
}

.border4 {
   border-width: 4px;
}

.font8 {
   font-size: 8px;
}

.font10 {
   font-size: 10px;
}

.font12 {
   font-size: 12px;
}

.font13 {
   font-size: 13px;
}

.font14 {
   font-size: 14px;
}

.font15 {
   font-size: 15px;
}

.font16 {
   font-size: 16px;
}

.font18 {
   font-size: 18px;
}

.font20 {
   font-size: 20px;
}

.font22 {
   font-size: 22px;
}

.font24 {
   font-size: 24px;
}

.font26 {
   font-size: 26px;
}

.font28 {
   font-size: 28px;
}

.font30 {
   font-size: 32px;
}

.font32 {
   font-size: 32px;
}

.font34 {
   font-size: 34px;
}

.font36 {
   font-size: 36px;
}

.font38 {
   font-size: 38px;
}

.font40 {
   font-size: 40px;
}

.font42 {
   font-size: 42px;
}

.font48 {
   font-size: 48px;
}

.font52 {
   font-size: 52px;
}

.font62 {
   font-size: 62px;
}

.text-bold {
   font-weight: bold;
}

.text-bold-hover:hover {
   font-weight: bold;
}

.shape-small {
   padding: 10px 15px;
   width: auto;
   height: 100%;
}

.shape-medium {
   padding: 10px 20px;
   width: auto;
   height: 100%;
}

.shape-large {
   padding: 18px 26px;
   width: auto;
   height: 100%;
}


.shape-rounded {
   border-radius: 100px;
}

.shape-right-rounded {
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
}

.shape-left-rounded {
   border-top-left-radius: 100px;
   border-bottom-left-radius: 100px;
}

.shape-round-corner {
   border-radius: 5px;
}

.corner-radius10 {
   border-radius: 10px;
}

.shape-left-round-corner {
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
}

.shape-right-round-corner {
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
}


.shape-top-left-round-corner {
   border-top-left-radius: 5px;
}

.shape-top-right-round-corner {
   border-top-right-radius: 5px;
}


.trans-property-background {
   transition-property: background;
}

.trans-property-opacity {
   transition-property: opacity;
}

.trans-property-color {
   transition-property: color;
}

.trans-property-width {
   transition-property: width;
}

.trans-property-height {
   transition-property: height;
}

.trans-property-all {
   transition-property: all;
}

.trans-duration02 {
   transition-duration: 0.2s;
}

.trans-duration04 {
   transition-duration: 0.4s;
}

.trans-duration06 {
   transition-duration: 0.6s;
}

.trans-duration08 {
   transition-duration: 0.8s;
}

.trans-duration1 {
   transition-duration: 1s;
}

.trans-duration2 {
   transition-duration: 2s;
}

.trans-duration3 {
   transition-duration: 3s;
}

.trans-duration4 {
   transition-duration: 4s;
}


.trans-delay02 {
   transition-delay: 0.2s
}

.trans-delay04 {
   transition-delay: 0.4s
}

.trans-delay06 {
   transition-delay: 0.6s
}

.trans-delay08 {
   transition-delay: 0.8s
}

.trans-delay1 {
   transition-delay: 1s
}

.trans-delay2 {
   transition-delay: 2s
}


.anima1 {
   animation-duration: 1s;
}

.anima2 {
   animation-duration: 2s;
}

.anima3 {
   animation-duration: 3s;
}

.anima4 {
   animation-duration: 4s;
}

.anima5 {
   animation-duration: 5s;
}

.anima6 {
   animation-duration: 6s;
}



.anima-width {
   transition: all 0.7s;
}


.cs-slidedownup {
   animation-name: animadown, animaup;
   transform: translateY(-60px);
   animation-fill-mode: forwards, forwards;
   animation-duration: 2s, 2s;
   animation-delay: 0s, 6s;
   animation-iteration-count: 1, 1;
   animation-timing-function: ease, ease;

   -webkit-animation-name: animadown, animaup;
   -webkit-transform: translateY(-60px);
   -webkit-animation-fill-mode: forwards, forwards;
   -webkit-animation-duration: 2s, 2s;
   -webkit-animation-delay: 0s, 6s;
   -webkit-animation-iteration-count: 1, 1;
   -webkit-animation-timing-function: ease, ease;

   -moz-animation-name: animadown, animaup;
   -moz-transform: translateY(-60px);
   -moz-animation-fill-mode: forwards, forwards;
   -moz-animation-duration: 2s, 2s;
   -moz-animation-delay: 0s, 6s;
   -moz-animation-iteration-count: 1, 1;
   -moz-animation-timing-function: ease, ease;
}


@keyframes animadown {

   50%,
   100% {
      transform: translateY(0px);
   }
}

@-webkit-keyframes animadown {

   50%,
   100% {
      -webkit-transform: translateY(0px);
   }
}

@-moz-keyframes animadown {

   50%,
   100% {
      -moz-transform: translateY(0px);
   }
}

@keyframes animaup {

   50%,
   100% {
      transform: translateY(-60px);
   }
}

@-webkit-keyframes animaup {

   50%,
   100% {
      -webkit-transform: translateY(-60px);
   }
}

@-moz-keyframes animaup {

   0%,
   100% {
      -moz-transform: translateY(-60px);
   }
}



.fade-in-up {
   animation-name: fadein, slideup;
}

.fade-in-left {
   animation-name: fadein, slideleft;
}

.fade-in-right {
   animation-name: fadein, slideright;
}

.fade-in-down {
   animation-name: fadein, slidedown;
}

.fade-in {
   animation-name: fadein;
}

.fade-out {
   animation-name: fadeout;
}

@keyframes fadein {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@keyframes fadeout {
   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

@keyframes slideup {
   0% {
      margin-top: 400px;
   }

   100% {
      margin-top: 0;
   }
}

@keyframes slideleft {
   0% {
      margin-right: 400px;
   }

   100% {
      margin-right: 0;
   }
}

@keyframes slideright {
   0% {
      margin-left: 400px;
   }

   100% {
      margin-left: 0;
   }
}

@keyframes slidedown {
   0% {
      margin-bottom: 400px;
   }

   100% {
      margin-bottom: 0;
   }
}


.anima-width-focus:focus {
   width: 100%;
}


.anima-bottom-top {
   animation-name: abtt;
   animation-fill-mode: both;
   transition-timing-function: cubic-bezier(0.3, 0.9, 0.3, 1.2);
}

.anima-top-bottom {
   animation-name: attb;
   animation-fill-mode: both;
   transition-timing-function: cubic-bezier(0.3, 0.9, 0.3, 1.2);
}

.anima-left-right {
   animation-name: altr;
   animation-fill-mode: both;
   transition-timing-function: cubic-bezier(0.3, 0.9, 0.3, 1.2);
}

.anima-right-left {
   animation-name: artl;
   animation-fill-mode: both;
   transition-timing-function: cubic-bezier(0.3, 0.9, 0.3, 1.2);
}


@keyframes altr {
   0% {
      opacity: 0;
      transform: translate(-10%, 0);
   }

   100% {
      opacity: 1;
      transform: translate(0, 0);
   }
}

@keyframes artl {
   0% {
      opacity: 0;
      transform: translate(10%, 0);
   }

   100% {
      opacity: 1;
      transform: translate(0, 0);
   }
}

@keyframes attb {
   0% {
      opacity: 0;
      transform: translate(0, -50%);
   }

   100% {
      opacity: 1;
      transform: translate(0, 0);
   }
}

@keyframes abtt {
   0% {
      opacity: 0;
      transform: translate(0, 50%);
   }

   100% {
      opacity: 1;
      transform: translate(0, 0);
   }
}


@keyframes zoom {
   0% {
      transform: scale(0)
   }

   100% {
      transform: scale(1)
   }
}

.col1 {
   position: relative;
   width: 100%;
   box-sizing: border-box;
}

.col2 {
   position: relative;
   width: 50%;
   box-sizing: border-box;
}

.col3 {
   position: relative;
   width: 33.33333%;
   box-sizing: border-box;
}

.col4 {
   position: relative;
   width: 25%;
   box-sizing: border-box;
}

.col5 {
   position: relative;
   width: 20%;
   box-sizing: border-box;
}

.col6 {
   position: relative;
   width: 16.66667%;
   box-sizing: border-box;
}

.col7 {
   position: relative;
   width: 14.28571%;
   box-sizing: border-box;
}

.col8 {
   position: relative;
   width: 12.5%;
   box-sizing: border-box;
}

.maxwidth100 {
   max-width: 100px;
}

.maxwidth200 {
   max-width: 200px;
}

.maxwidth300 {
   max-width: 300px;
}

.maxwidth400 {
   max-width: 400px;
}

.maxwidth500 {
   max-width: 500px;
}

.maxwidth600 {
   max-width: 600px;
}

.maxwidth700 {
   max-width: 700px;
}

.maxwidth800 {
   max-width: 800px;
}

.maxwidth900 {
   max-width: 900px;
}

.maxwidth1000 {
   max-width: 1000px;
}

.minwidth60 {
   min-width: 60px;
}

.minwidth80 {
   min-width: 80px;
}

.minwidth100 {
   min-width: 100px;
}

.minwidth200 {
   min-width: 200px;
}

.minwidth300 {
   min-width: 300px;
}

.minwidth400 {
   min-width: 400px;
}

.minwidth500 {
   min-width: 500px;
}

.minwidth600 {
   min-width: 600px;
}

.minwidth700 {
   min-width: 700px;
}

.minwidth800 {
   min-width: 800px;
}

.minwidth900 {
   min-width: 900px;
}

.minwidth1000 {
   min-width: 1000px;
}


.maxheight100 {
   max-height: 100px;
}

.maxheight200 {
   max-height: 200px;
}

.maxheight300 {
   max-height: 300px;
}

.maxheight400 {
   max-height: 400px;
}

.maxheight500 {
   max-height: 500px;
}

.maxheight600 {
   max-height: 600px;
}

.maxheight700 {
   max-height: 700px;
}

.maxheight800 {
   max-height: 800px;
}

.maxheight900 {
   max-height: 900px;
}

.maxheight1000 {
   max-height: 1000px;
}

.minheight100 {
   min-height: 100px;
}

.minheight200 {
   min-height: 200px;
}

.minheight300 {
   min-height: 300px;
}

.minheight400 {
   min-height: 400px;
}

.minheight500 {
   min-height: 500px;
}

.minheight600 {
   min-height: 600px;
}

.minheight700 {
   min-height: 700px;
}

.minheight800 {
   min-height: 800px;
}

.minheight900 {
   min-height: 900px;
}

.minheight1000 {
   min-height: 1000px;
}


.widthmin {
   min-width: 100%;
}

.widthmax {
   max-width: 100%;
}

.widthauto {
   width: auto;
}

.width100p {
   width: 100%;
}

.width80p {
   width: 80%;
}

.width60p {
   width: 60%;
}

.width50p {
   width: 50%;
}

.width40p {
   width: 40%;
}

.width20p {
   width: 20%;
}

.width20 {
   width: 20px;
}

.width30 {
   width: 30px;
}

.width40 {
   width: 40px;
}

.width50 {
   width: 50px;
}

.width60 {
   width: 60px;
}

.width80 {
   width: 80px;
}

.width100 {
   width: 100px;
}

.width200 {
   width: 200px;
}

.width300 {
   width: 300px;
}

.width400 {
   width: 400px;
}

.width500 {
   width: 500px;
}

.width600 {
   width: 600px;
}

.width700 {
   width: 700px;
}

.width800 {
   width: 800px;
}

.width900 {
   width: 900px;
}

.width1000 {
   width: 1000px;
}

.heightmin {
   min-height: 100%;
}

.heightmax {
   max-height: 100%;
}

.heightauto {
   height: auto;
}

.height100p {
   height: 100%;
}

.height80p {
   height: 80%;
}

.height60p {
   height: 60%;
}

.height50p {
   height: 50%;
}

.height40p {
   height: 40%;
}

.height20p {
   height: 20%;
}

.height10 {
   height: 10px;
}

.height20 {
   height: 20px;
}

.height30 {
   height: 30px;
}

.height40 {
   height: 40px;
}

.height50 {
   height: 50px;
}

.height60 {
   height: 60px;
}

.height80 {
   height: 80px;
}

.height100 {
   height: 100px;
}

.height200 {
   height: 200px;
}

.height300 {
   height: 300px;
}

.height400 {
   height: 400px;
}

.height600 {
   height: 600px;
}

.height800 {
   height: 800px;
}

.height1000 {
   height: 1000px;
}

.size100p {
   width: 100%;
   height: 100%;
}

.size10 {
   width: 10px;
   height: 10px;
}

.size20 {
   width: 20px;
   height: 20px;
}

.size30 {
   width: 30px;
   height: 30px;
}

.size40 {
   width: 40px;
   height: 40px;
}

.size50 {
   width: 50px;
   height: 50px;
}

.size60 {
   width: 60px;
   height: 60px;
}

.size80 {
   width: 80px;
   height: 80px;
}

.size100 {
   width: 100px;
   height: 100px;
}

.size200 {
   width: 200px;
   height: 200px;
}

.size400 {
   width: 400px;
   height: 400px;
}

.size600 {
   width: 600px;
   height: 600px;
}

.size800 {
   width: 800px;
   height: 800px;
}

.size1000 {
   width: 1000px;
   height: 1000px;
}

.line10 {
   line-height: 10px;
}

.line20 {
   line-height: 20px;
}

.line30 {
   line-height: 30px;
}

.line40 {
   line-height: 40px;
}

.line50 {
   line-height: 50px;
}

.line60 {
   line-height: 60px;
}

.line80 {
   line-height: 80px;
}

.line100 {
   line-height: 100px;
}


.frame-height {
   height: 800px;
}


.flex-row {
   display: flex;
   flex-direction: row;
}

.flex-column {
   display: flex;
   flex-direction: column;
}

.flex-wrap {
   display: flex;
   flex-wrap: wrap;
}

.flex-start {
   display: flex;
   justify-content: start;
}

.flex-center {
   display: flex;
   justify-content: center;
}

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

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

.flex-around {
   display: flex;
   justify-content: space-around;
}


.c0 {
   background: #ff0000;
}

.c1 {
   background: #ff00ff;
}

.c2 {
   background: #ffff00;
}

.c3 {
   background: #00ffff;
}

.c4 {
   background: #ff0ff0;
}

.c5 {
   background: #00ff00;
}

.hmiddle-bottom {
   position: absolute;
   left: 50%;
   bottom: 0;
   margin-right: -50%;
   transform: translate(-50%, 0);
}

.hmiddle-top {
   position: absolute;
   left: 50%;
   top: 0;
   margin-right: -50%;
   transform: translate(-50%, 0);
}

.center {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%);
}

.fixed-center {
   position: fixed;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%);
}

.vmiddle {
   position: relative;
   top: 0;
   bottom: 0;
   margin-top: auto;
   margin-bottom: auto;
}

.hmiddle {
   position: relative;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
}

.hleft {
   position: relative;
   left: 0;
   margin-right: auto;
}

.hright {
   position: relative;
   right: 0;
   margin-left: auto;
}

.htop {
   position: relative;
   top: 0;
   margin-bottom: auto;
}

.hbottom {
   position: relative;
   bottom: 0;
   margin-top: auto;
}


.left {
   left: 0;
   margin-right: auto;
}

.right {
   right: 0;
   margin-left: auto;
}

.top {
   top: 0;
   margin-bottom: auto;
}

.bottom {
   bottom: 0;
   margin-top: auto;
}

.inline {
   display: inline-block;
}

.block {
   display: block;
}

.flex {
   display: flex;
}


.svg-data {
   fill: none;
   stroke: #ff0000;
   stroke-width: 60;
   stroke-linecap: round;
   stroke-miterlimit: 10;

   background-position: 10px 14px;
   background-repeat: no-repeat;
}

.svg-red {
   stroke: #ff0000;
}


.img-size10 {
   background-size: 10px;
}

.img-size20 {
   background-size: 20px;
}

.img-size30 {
   background-size: 30px;
}

.img-size40 {
   background-size: 40px;
}

.absolute {
   position: absolute;
}

.relative {
   position: relative;
}

.fixed {
   position: fixed;
}

.float-left {
   float: left;
}

.float-right {
   float: right;
}



.modal-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   z-index: 9999;
}

.modal-img {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   animation-name: zoom;
   animation-duration: 0.8s;
   margin: auto;
   display: block;
   width: 80%;
   max-width: 800px;
}

.modal-close {
   position: absolute;
   top: 15px;
   right: 35px;
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
}


/* *** checkboc, radio, slider *** */


/* The container */
.input-frame {
   display: block;
   position: relative;
   padding-left: 35px;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   line-height: 30px;
}

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

/* Create a custom checkbox */
.checkbox {
   position: absolute;
   top: 0;
   left: 0;
   height: 20px;
   width: 20px;
   padding: 4px;
   border: 1px solid #b0b0b0;
   border-radius: 4px;
   color: #ffffff;
   line-height: 20px;
}

/* Create a custom checkbox */
.radio {
   position: absolute;
   top: 0;
   left: 0;
   height: 24px;
   width: 24px;
   padding: 4px;
   border: 1px solid #b0b0b0;
   border-radius: 50%;
   color: #ffffff;
   line-height: 20px;
   box-sizing: border-box;
}

/* On mouse-over, add a grey background color */
.input-frame:hover input+.checkmark {
   background-color: #c0c0c0;
}

/* When the checkbox is checked, add a blue background */
.input-frame input[type=radio]:checked+.checkmark {
   height: 12px;
   width: 12px;
   padding: 4px;
   border: 8px solid #2196F3;
   background-color: #ffffff;
}

/* When the checkbox is checked, add a blue background */
.input-frame input[type=checkbox]:checked+.checkmark {
   background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.input-frame input:not(:checked)~.ma-sharptick:before,
.input-frame input:not(:checked)~.ma-roundtick:before {
   display: none;
}

/* Show the checkmark when checked */
.input-frame input:checked~.ma-sharptick,
.input-frame input:checked~.ma-roundtick {
   display: block;
}



.slider-frame {
   width: 100%;
}

.slider {
   -webkit-appearance: none;
   width: 100%;
   height: 15px;
   border-radius: 5px;
   background: #d3d3d3;
   outline: none;
   opacity: 0.7;
   -webkit-transition: .2s;
   transition: opacity .2s;
}

.slider:hover {
   opacity: 1;
}

.slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background: #2196F3;
   cursor: pointer;
}

.slider::-moz-range-thumb {
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background: #2196F3;
   cursor: pointer;
}

.pheight {
   height: 100%;
}

.mob-wrap {
   display: flex;
}

.mob-relative {
   position: absolute;
}


.mob-rpad40 {
   padding-right: 40px;
}


.mob-rmar30 {
   margin-right: 30px;
}

.mob-right-off {
   position: relative;
   right: 0;
   margin-left: auto;
}

.mob-col2-on {
   width: auto;
}

.mob-font {
   font-size: 32px;
}

.mob-box-width {
   width: 215px;
}

.mob-box-font {
   font-size: 22px;
}

.amz-btn-width {
   width: 180px;
   padding: 0 20px;
}

.mob-comp-font {
   font-size: 20px;
}

.mob-title-fontsize {
   font-size: 26px;
}

.mob-font32-26 {
   font-size: 32px;
}


.mob-rpad10 {
   padding-right: 10px;
}

.mob-rmar10 {
   margin-right: 10px;
}

.mob-height220 {
   max-height: 220px;
}

.mob-rmar20 {
   margin-right: 20px;
}

.mob-bmar10 {
   margin-bottom: 0;
}

.mob-flex {
   display: flex;
}


.mob-set-col1 {
   position: relative;
   width: 50%;
   box-sizing: border-box;
}

.mob-sub-tmar60 {
   margin-top: 40px;
}

.mob-sub-vmiddle {
   top: 0;
   bottom: 0;
   margin-top: auto;
   margin-bottom: auto;
}

.mob-sub-top-right {
   top: 0;
   right: 0;
   margin-bottom: auto;
   margin-left: auto;
}

.mob-height-line30-40 {
   height: 40px;
   line-height: 40px;
}

.mob-rmar5 {
   margin-right: 5px;
}



.mob-best-maxwidth {
   left: -65px;
   max-width: 168px;
}

.mob-collectmaxwidth {
   max-width: 300px;
   width: 33.33333%;
}


.mob-listmaxwidth {
   width: 33.33333333%;
}


.mob-relative-account {
   position: absolute;
}

.mob-rmar20-bmar20-account {
   margin-right: 20px;
}


.mob-text-left-center {
   text-align: left;
}

.mob-height50-100 {
   height: 50px;
}


.mob-title-lpad10-0 {
   padding-left: 10px;
}

.mob-account-rmar10-0 {
   padding-right: 10px;
}


.mob-border-right-bottom {
   border-right-style: solid;
}

.mob-show {
   display: none;
}

.mob-infoshow {
   display: block;
}

.mob-maxwidth300 {
   max-width: 300px;
}

.mob-col3-col1 {
   box-sizing: border-box;
   width: 33.33333%
}

.mob-border-bottom {
   border: none;
}

.mob-wrap-400 {
   display: flex;
}

.mob-font18 {
   font-size: 18px;
}

.mob-col2-col6 {
   position: relative;
   width: 20%;
   box-sizing: border-box;
}

.mob-line30-50 {
   line-height: 50px;
}

/********** media *****************/

@media screen and (min-width:900px) {

   .mob-badge {
      max-width: 300px;
      width: 100%;
   }

}


@media screen and (max-width: 700px) {

   .mob-listmaxwidth {
      width: 50%;
   }

   .mob-account-rmar10-0 {
      margin-right: 0;
   }

   .mob-title-lpad10-0 {
      padding-left: 0;
   }

   .mob-height50-100 {
      height: 100px;
   }

   .mob-hmiddle-account {
      position: relative;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
   }

   .mob-relative-account {
      position: relative;
   }

   .mob-rmar20-bmar20-account {
      margin-right: auto;
      margin-bottom: 20px;
   }

   .mob-title-hmiddle {
      position: relative;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
   }

}



@media screen and (max-width: 800px) {

   .mob-listmaxwidth {
      width: 50%;
   }

}


@media screen and (min-width: 700px) and (max-width: 900px) {

   .mob-badge {
      max-width: 450px;
      width: 50%;
   }

   .mob-box-width {
      width: 23%;
   }

}


.mob-height200 {
   max-height: 200px;
}


.mob-on {
   display: none;
}

.mob-off {
   display: block;
}



@media screen and (max-width: 600px) {

   .mob-badge {
      max-width: 450px;
      width: 50%;
   }

}


@media screen and (max-width: 550px) {

   .mob-text-left-center {
      text-align: center;
   }

   .mob-listmaxwidth {
      width: 100%;
   }

   .mob-badge {
      max-width: 550px;
      width: 100%;
   }

   .mob-maxwidth300 {
      max-width: 100%;
   }

   .mob-show {
      display: block;
   }

   .mob-infoshow {
      display: none;
   }

   .mob-border-right-bottom {
      border-right-style: none;
      border-bottom-style: solid;
   }


   .mob-collectmaxwidth {
      max-width: 400px;
      width: 50%;
   }

   .mob-best-maxwidth {
      left: -92px;
      max-width: 220px;
   }

   .mob-line30-50 {
      line-height: 30px;
   }


   .mob-height-line30-40 {
      height: 30px;
      line-height: 30px;
   }

   .mob-on {
      display: block;
   }

   .mob-off {
      display: none;
   }

   .mob-sub-vmiddle {
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
   }

   .mob-sub-tmar60 {
      margin-top: 60px;
   }

   .mob-set-absolute {
      position: absolute;
   }

   .mob-set-col1 {
      position: relative;
      width: 100%;
      box-sizing: border-box;
   }

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

   .mob-flex {
      display: block;
   }

   .mob-bmar10 {
      margin-bottom: 10px;
   }

   .mob-abs-hmiddle {
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
   }

   .mob-height220 {
      max-height: auto;
   }

   .mob-height200 {
      max-height: 100%;
   }


   .mob-font24 {
      font-size: 24px;
   }

   .mob-font18 {
      font-size: 18px;
   }

   .mob-block {
      display: block;
   }

   .mob-rmar20 {
      margin-right: auto;
   }

   .mob-rmar10 {
      margin-right: auto;
   }


   .mob-rpad10 {
      padding-right: 0px;
   }

   .mob-font32-26 {
      font-size: 26px;
      margin-bottom: 10px;
   }

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

   .mob-wrap {
      display: block;
   }

   .mob-col1 {
      width: 100%;
   }

   .mob-col3-col1 {
      width: 100%;
   }

   .mob-hmiddle {
      position: relative;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
   }


   .mob-rpad40 {
      padding-right: 0px;
   }


   .mob-tmar20 {
      margin-top: 20px;
   }

   .mob-bmar20 {
      margin-bottom: 20px;
   }


   .mob-relative {
      position: relative;
   }

   .mob-hpad20 {
      padding-left: 20px;
      padding-right: 20px;
   }

   .mob-col2-on {
      width: 50%;
   }

   .mob-box-width {
      width: 47%;
   }

   .mob-block {
      display: block;
   }

   .mob-rmar30 {
      margin-right: auto;
   }

   .dark-mode .fill-body {
      background-color: #1e1f1f;
   }

   .light-mode .fill-body {
      background-color: #feffff;
   }

   .mob-rmar5 {
      margin-right: 0;
   }

   .mob-hpad20 {
      padding-left: 10px;
      padding-right: 10px;
   }

   .mob-col2-col6 {
      position: relative;
      width: 5%;
      box-sizing: border-box;
   }

   .mob-font {
      font-size: 22px;
   }

   .mob-size {
      width: 160px;
      height: 160px;
   }

   .mob-absolute {
      position: absolute;
   }


}



@media screen and (min-width:550px) and (max-width:700px) {


   .mob-badge {
      max-width: 450px;
      width: 50%;
   }


   .mob-box-width {
      width: 23%;
   }

   .mob-box-font {
      font-size: 16px;
   }

}




@media screen and (min-width:260px) and (max-width:400px) {

   .mob-text-left-center {
      text-align: center;
   }

   .mob-collectmaxwidth {
      max-width: 400px;
      width: 100%;
   }

   .mob-wrap-400 {
      display: block;
   }

   .mob-border-bottom {
      border-width: 1px;
      border-bottom-style: solid;
      border-color: #323330;
   }

   .mob-col3-col1 {
      box-sizing: border-box;
      width: 100%;
   }

   .mob-title-fontsize {
      font-size: 18px;
   }

   .mob-comp-font {
      font-size: 14px;
   }

   .amz-btn-width {
      width: 140px;
      padding: 0 10px;
   }

   .mob-box-width {
      width: 45%;
   }

   .mob-font18 {
      font-size: 14px;
   }

   .mob-box-font {
      font-size: 18px;
   }

   .mob-size {
      width: 150px;
      height: 150px;
   }

}



@media (min-width: 350px) {
   .infeed {
      height: 180px;
   }
}

@media (min-width: 500px) {
   .infeed {
      height: 130px;
   }
}

@media (min-width: 800px) {
   .infeed {
      height: 120px;
   }
}