/*
//	[ kimera framework V 2.6.beta ] [gapkit project beta 0.5.6 ]
//	Credits: Alberto Marà & Shape group - All right reserved
//	https://github.com/ShapeGroup/kimera-frontend-framework/wiki
//	https://www.facebook.com/kimeraframework/
*/

/*
//	fx
*/

.smooth
{
  -webkit-transition: transform ease-out .25s;
  transition: transform ease-out .25s;
}

.gpuboost
{
    /*forced gpu render - animation boost*/

    animation-timing-function: steps(16, end);
    /* will-change: filter, transform; */
    backface-visibility: hidden;
    /* transform: translateZ(0); */
    transform-style: flat;
    /* perspective: 1000px; */

    -webkit-animation-timing-function: steps(16, end);
    /* -webkit-will-change: filter, transform; */
    -webkit-backface-visibility: hidden;
    /* -webkit-transform: translateZ(0); */
    -webkit-transform-style: flat;
    /* -webkit-perspective: 1000px; */
}

/*
//	document
*/


style,
script
{
  width:0;
  height: 0;
  overflow: hidden;
  display: none;
  position: fixed;
  z-index: -1;
}

html
{
  margin: 0;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

body
{
  width: 100%;
  z-index: 1;
  font-size: 1rem;
  font-size-adjust: none;
  margin: 0;
}

body.mode-web
{
  min-height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
body.mode-web.hidescrollbar
{
  overflow-y: auto;
}

body.mode-app
{
  height: 100%;
  display: -webkit-box;
  display: flex;
  overflow: hidden;  
  -webkit-touch-callout: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

*,
*:hover,
*:active,
*:focus
{
  -webkit-tap-highlight-color: transparent; 
  -webkit-focus-ring-color: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline-width: 0px;
  outline-color: transparent;
}

[src$=".svg"]
{image-rendering:crisp-edges;}
svg
{
  display: flex;
  width: 100%;
  height: 100%;
  image-rendering:crisp-edges;
}
svg>image
{
  width: 100%;
  height: 100%;
}
image,img
{
  max-width: 100%;
}



/*
//	page loader
*/

.loader
{
  -webkit-transition: 0s;
  z-index: 9999999999;
  position: fixed;
  top: 0;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}
.loader.active
{
  -webkit-transition:all 0.33s;
  transition:all 0.33s;
  opacity: 1;
  z-index: 9999999999;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.loader.off
{
  -webkit-transition:opacity 0.66s;
  transition:opacity 0.66s;
  opacity: 0;
}
.loader>.spinner-box
{
    opacity: 0;
    margin: 0 auto;
}


/*
//	text : common
*/

hr
{
  margin: 0;
}

a,
p,
font,
center,
h1,
h2,
h3,
h4,
h5,
h6,
article,
acronym,
p,
u,
b,
i,
q,
cite,
s,
strong,
em,
mark,
address,
text,
summary,
sub,
sup,
small,
big,
time,
meter,
pre,
tt,
kbd,
samp,
code,
output,
var,
del,
ins,
dfn,
caption,
li,
dt,
dd,
th
{
  text-rendering: optimizeSpeed;
  text-decoration: none;
  white-space: normal;
  word-wrap: break-word;
  margin: 0;
  vertical-align: middle;
}

a,[href]
{
  cursor: pointer;
  display: inline-block;
}

sub
{
  font-size: 75%;
  vertical-align: text-bottom;
}

sup
{
  font-size: 75%;
  vertical-align: text-top;
}


b,
strong
{
  font-weight: bold;
  vertical-align: baseline;
}

pre,*>pre,
code,*>code,
kbd,*>kbd,
samp,*>samp,
output,*>output
{
  white-space: pre !important;
}

ul,
ol,
dl,
li
{
    margin: 0;
    text-decoration: none;
}

blockquote
{
  margin: 0;
  position:relative;
}

.period+.period,
.text-group+.text-group
{
  margin-top: 60px;
}

.period>*+*,
.text-group>*+*
{
  margin-top: 20px;
}
.period>*:first-child,
.text-group>*:first-child {
  margin-top: 0;
}

.period ul,
.text-group ul
{
  list-style: disc;
  padding: 25px;
  margin: 0;
  position: relative;
}
.period li>ul,
.text-group li>ul
{
  list-style: circle;
  padding: 12px 0 0 0;
}
.period li,
.text-group li
{
  display: list-item;
  padding-bottom: 0;
}
.period li:last-child,
.text-group li:last-child
{
  padding-bottom: 0 !important;
}
.period ul>li,
.text-group ul>li
{
  padding: 0px 25px 10px 25px;
}
.period ol,
.text-group ol
{
  counter-reset: li;
  list-style: none;
  margin: 22px 0 22px 0;
  padding: 0;
  position: relative;
}
.period li>ol,
.text-group li>ol
{
  list-style: none;
  padding: 14px 0 0 0;
  margin: 0;
}
.period li,
.text-group li
{
  padding-bottom: 0;
}
.period ol>li,
.text-group ol>li
{
  padding: 6px 22px 6px 40px;
  margin-left: 4px;
}
.period ol>li:before,
.text-group ol>li:before
{
  content: counter(li);
  counter-increment: li;
  position: absolute;
  margin-left: -38px;
  font-style: oblique;
  font-size: .8em;
}


/*
//	cross elements
*/



table
{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  display: table !important;
  text-align: left;
}
thead *
{
  font-weight: bold;
  letter-spacing: 2px;
}
th,
td
{
  display: table-cell;
  padding: 5px;
}
th
{
  padding-bottom: 15px;
}
th>*,
td>*
{
  vertical-align: middle;
}
tfoot td:first-child
{
  padding-top: 15px;
  padding-bottom: 15px;
}
tfoot *
{
  font-size: 88%;
  font-weight: bolder;
  letter-spacing: 2px;
  font-style: oblique;
}

dl
{
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
dt
{
  width: 20%;
  display: block;
}
dd
{
  width: 80%;
  display: block;
}

div>ul,
span>ul,
div>ol,
span>ol
{
  padding: 0;
  list-style: none;
}
div>ul>li,
div>ol>li
{
  display: block;
}
span>ul>li,
span>ol>li
{
  display: inline-block;
}


/*
//	box model : main elements
*/


div,
*>div,
div>*:not(span):not(dl),
header,
hgroup,
aside,
article,
canvas,
frameset,
iframe,
main,
section,
article,
footer,
form,
details,
picture,
picture>*,
figure,
figure>*,
iframe
{
  margin:0;
  display: block;
  width: 100%;
}

span,
*>span
{
  
  display: inline-flex;
  /* display: inline-block; */
  flex-flow: row;
  vertical-align: middle;
}
span>*:not(div)
{
  line-height: 0;
}
span>div
{
  line-height:inherit;
}
span>*
{
  align-self: center;
}

/*
//	views model : web
*/


body.mode-web.scroll-y
{
  opacity: 0;
  min-height: 100%;
}
body.mode-web.scroll-x
{
  display: inline-block;
  vertical-align: top;
}

body.mode-web.scroll-x >div,
body.mode-web.scroll-x >span
{
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  height: 100vh;
  margin-right: -6px;
}
body.mode-web.scroll-x >div
{
  width: 100%;
}
body.mode-web.scroll-x >span
{
  width: auto;
}


/*
//	views model : app
*/

body.mode-app .view-controller
{
  position: fixed;
  z-index: 2000;
}
body.mode-app .view-controller[class*="[autostep]"]
{
  width: 100%;
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  white-space: nowrap;
  transition: transform 0.5s;
}

body.mode-app .view-controller[class*="[autoset]"]
{
  display: table;
  width: 100%;
}
body.mode-app .view-controller[class*="[autoset]"]>*
{
  display: table-cell;
  width: max-content;
}

body.mode-app .view-group
{
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  font-size: 0;
  /* height: 100%;
  width: 100%; */
  white-space: nowrap;
  z-index: 100;
  -webkit-transition: transform .2s ease-out;
  transition: transform .2ss ease-out;
  /*forced gpu render */
}
body.mode-app .view
{
  height: 100%;
  display: inline-block;
  vertical-align: top;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: unset;
  position: relative;
}
body.mode-app .view+.view
{
  margin-left: -4px;
}

body.mode-app .stop-right,
body.mode-app .stop-left
{
  position: fixed;
  height: 100%;
  border: 3px solid red;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 3500 !important;
  border-radius: 50%;
}

.stop-right { right: 0px; box-shadow: 0 -10px 50px red, 0 -5px 20px red; -webkit-animation: stopview-right 1.5s 0s 1 forwards; animation: stopview-right 1.5s 0s 1 forwards; }
.stop-left { left: 0px; box-shadow: 0 10px 50px red, 0 5px 20px red; -webkit-animation: stopview-left 1.5s 0s 1 forwards; animation: stopview-left 1.5s 0s 1 forwards; }

@-webkit-keyframes stopview-right
{
0% { opacity: 0; right:-50px }
8% { opacity: 1; right: -3px }
40% { opacity: 1; right: -3px }
100% { opacity: 0; right:-50px }
}
@keyframes stopview-right
{
0% { opacity: 0; right:-50px }
8% { opacity: 1; right: -3px }
40% { opacity: 1; right: -3px }
100% { opacity: 0; right:-50px }
}
@-webkit-keyframes stopview-left
{
0% { opacity: 0; left:-50px }
8% { opacity: 1; left: -3px }
40% { opacity: 1; left: -3px }
100% { opacity: 0; left:-50px }
}
@keyframes stopview-left
{
0% { opacity: 0; left:-50px }
8% { opacity: 1; left: -3px }
40% { opacity: 1; left: -3px }
100% { opacity: 0; left:-50px }
}


/*
//	views model : elements
*/


.mode-app .dots,
.mode-app .steps
{
  position: fixed;
  bottom:0;
}
.mode-app .dots,
.mode-app .steps
{
  position: relative;
  z-index: 1000;
  text-align: center;
  bottom: 0;
  margin: -50px auto 50px auto;
  max-width: 100%;
}
.steps>.step::before
{
  content: "\00a0";
  display: -webkit-box;
  display: flex;
  width: 20px;
  height: 3px;
  margin: 40% auto auto -20px;
  z-index: -1;
  position: relative;
  background: #ccc;
}
.step:first-child::before
{
  display: none;
}
.step
{
  margin-right: 16px;
}
.steps>.active::before
{
  background: white;
}
.dot,
.step
{
  transition: all .150s;
  transition-delay: .05s;
  -webkit-transition: all .150s;
  -webkit-transition-delay: .05s;
  vertical-align: middle;
  display: inline-block;
  z-index: 500;
}


/*
//	box model : scrolling
*/


*>.scroll-y,
.scroll-y
{
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
  max-height: inherit;
  min-height: 100%;
}
*>.scroll-x,
.scroll-x
{
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  max-height: 100%;
  max-width: unset;
  scroll-behavior: smooth;
}
.scroll-x>*
{
  white-space: nowrap;
}
*>.scroll-x>*:not(span),
.scroll-x>*:not(span)
{
  max-height: unset;
  max-width: 100%;
}
.hide-bar-y,
.hide-bar-x
{
  overflow: hidden;
  position: relative;
}
.hide-bar-y
{
  height: inherit;
  max-height: inherit;
}
.hide-bar-x
{
  height: 100%;
}

.hide-bar-x>*
{
  padding-bottom: 17px;
  margin-bottom: -17px;
}
.hide-bar-y>*
{
  right: -17px;
  margin-left: -17px;
  width: auto;
  min-width: 100%;
  position: relative;
}

.snap-y,
.snap-x
{
  overflow: hidden;
  position: relative;
}
.snap-y
{
  display: flex;
}

.snap-x .snapcenter
{
  width: 0;
  margin: 0 auto;
}


.snaplabels
{
  -webkit-transition: transform ease-out .5s;
  transition: transform ease-out .5s;
}

.snap-x .snaptype-blocks 
{
  width: 0;
  margin: 0 auto;
  height: 100%;
}
.snap-x .snaptype-wide
{
  width: auto;
  height: 100%;
}

.snap-x .snaptype-wide .snaps,
.snap-x .snaptype-blocks .snaps
{
  display: flex;
  white-space: nowrap!important;
  height: 100%;
  /*add gpu boost*/
}

.snap-x .snaplabels
{
  display: flex;
  white-space: nowrap !important;
}

.snap-y .snapgroup
{
   display: inline-block;
  /*add gpu boost*/
}


.snap-x .snapgroup>div,
.snap-x .snapgroup-wide>div
{
  min-width: 100%;
  max-height: 100%;
}
.snap-x .snapgroup>span,
.snap-x .snapgroup-wide>span
{
  max-height: 100%;
}
.snap-x>.snapgroup>*
{
  height: 100%;
  vertical-align: middle;
  display: inline-block;
}
.snap-x>.snapgroup>*:first-child
{
  margin: 0;
}


.snap-y .snapgroup>div
{
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.snap-y .snapgroup>span
{
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}
.snap-y>.snapgroup>*
{
  width: 100%;
}

[class*=snap] .dots,
[class*=snap] .steps
{
  position: absolute;
  z-index: 1000;
  text-align: center;
  bottom: 10px; left: 0; right: 0;
  margin: 0 auto 0 auto;
  max-width: 90%;
}

[class*=snap] .next,
[class*=snap] .prev
{
  position: absolute;
  z-index: 5000;
  text-align: center;
  max-width: 0;
  max-height: 0;
}

.snap-x .prev
{
  left: 0%;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.snap-x .next
{
  right: 0;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

.snap-y .next,
.snap-y .prev
{
  right: 0%;
  top: 0%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}


/*
//	box model : layout options
*/


.float-left
{
  float: left;
}
.float-right
{
  float: right;
}
.clear-fix
{
  position: relative;
  content: "\00a0";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

.autocrop
{
  /*
  flex is disbled for now.
  display: -webkit-box;
  display: flex;
  */
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.autocrop>img
{
  -webkit-box-sizing: unset !important;
  box-sizing: unset !important;

  min-height: 100%;
  min-width: 100%;

  -o-object-fit: cover;
  object-fit: cover;
  transform-origin: center;
  transform: translate(-50%,-50%);
  top: 50%;
  left:50%;
  position: absolute;
}

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

.ellipsis-child
{
  overflow: hidden;
  position: relative;
}
.ellipsis-child>*
{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; 
}

.hide
{
  display: none !important;
  visibility: hidden;
}
.show
{
  display: block;
  visibility: visible;
}
.hidden
{
  visibility: hidden;
}
.visible
{
  visibility: visible !important;
}

.disabled,
:disabled
{
  opacity: .65 !important;
  pointer-events: none !important;
}

[class*="ratio"]
{
  background-color: black;
  position: relative;
  width: 100% !important;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.ratio-wide
{
  padding: 56.25% 0 0 0 !important;
}
.ratio-crt
{
  padding: 75% 0 0 0 !important;
}
.ratio-dsrl
{
  padding: 66.66% 0 0 0 !important;
}
.ratio-square
{
  padding-top: 100%;
}
[class*="ratio"]>*
{
  position: absolute !important;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-box-sizing: unset !important;
  box-sizing: unset !important;
}

[class*="Parallax-"]
{
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
}
[class*="mask"]
{
  overflow: hidden;
}

[class*="Parallax-"]>* {
    position: absolute;
    -webkit-transform-style: flat;
    transform-style: flat;
}

.spoiler
{
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
.spoiler
{
  overflow: visible;
}

.spoiler.active>div:nth-child(2)
{
  overflow: hidden;
  height: 100%;
  max-height: 9999px;
  max-height: max-content;
  opacity: 1;
  visibility: visible;
  -webkit-transition: all .35s;
  transition: all .35s;
}
.spoiler.off>div:nth-child(2)
{
  overflow: hidden;
  max-height: 0;
  height: 0%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .35s;
  transition: all .35s;
}


[class*="absolute-"]
{
  position: absolute;
}
.absolute-top
{
  top: 0%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%)!important;
  transform: translate(-50%, 0%)!important;
}

[class*="absolute-"][class*="top-left"]
{
  top: 0%;
  left: 0%;
}
[class*="absolute-"][class*="top-right"]
{
  top: 0%;
  right: 0%;
}
.absolute-center
{
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
[class*="absolute-"][class*="center-left"]
{
  left: 0%;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
[class*="absolute-"][class*="center-right"]
{
  right: 0%;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.absolute-bottom
{
  bottom: 0%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%)!important;
  transform: translate(-50%, 0%)!important;
}
[class*="absolute-"][class*="bottom-left"] {
  bottom: 0%;
  left: 0%;
}
[class*="absolute-"][class*="bottom-right"]
{
  bottom: 0%;
  right: 0%;
}


/*
*	Videos
*/


video
{
  display: block;
  vertical-align: middle;
}
video.player
{
  position: relative;
  width: 100%;
  height: 100%;
}
*>video.background
{
  position: relative;
}
video.background
{
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -0;
  -o-object-fit: cover;
     object-fit: cover;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
video.background+*
{
  position: relative;
}
video.backscreen {
  height: auto;
  min-height: 100%;
  width: auto;
  min-width: 100%;
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}


/*
*	Audio
*/

audio
{
  display: block;
  width: 100%;
}


/*
//	fit elements
*/

.fit-up,
.fit-height
{
  position: absolute;
  max-height: 100%;
}
.fit-height
{
  left:0;
  top: 0;
}


/*
//	tabs
*/


[class*="tabs-"]
{
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
[class*="tabs-"]>nav>a,
[class*="tabs-"]>span
{
  cursor: pointer;
  margin-left: -6px;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
[class*="tabs-"]>nav>p
{
  position: absolute;
}
[class*="tabs-y"]>div:nth-child(even)
{
  max-height: 100%;
  height: 0;
  overflow: hidden;
  -webkit-transition: all .25s;
  transition: all .25s;
}
[class*="tabs-y"]>div:nth-child(even).off
{
  opacity: 0;
}
[class*="tabs-y"]>div:nth-child(even).active
{
  opacity: 1;
}

[class*="tabs-x"]>div.active
{
  visibility: visible;
  opacity: 1;
  height: auto;
  -webkit-transition: all .6s;
  transition: all .6s;
}
[class*="tabs-x"]>div
{
  visibility: hidden;
  opacity: 0;
  height: 0;
  -webkit-transition: opacity .6s;
  transition: opacity .6s;
  overflow: hidden;
}


/*
//	cards
*/


[class*="card"]
{
  position: relative;
  overflow: visible;
  display: block;
  width: 100% !important;
  cursor: pointer;
}

[class*="card"]>.expansive.activation,
[class*="card"]>.expansive.deactivation
{
  -webkit-transition: all .4s ease !important;
  transition: all .4s ease !important;
  position: fixed;
  z-index: 9000;
}
[class*="card"]>.expansive.active
{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
  cursor:auto;
}


[class*="card"]>.auto-hide-show>.hidden
{
  -webkit-transition: all .45s ease;
  transition: all .45s ease;
  max-height: 0;
  opacity: 0;
}
[class*="card"]>.auto-hide-show>.show
{
  -webkit-transition: all .45s ease;
  transition: all .45s ease;
  max-height: unset;
  opacity: 1;
}

/*
//	top
*/


.top
{
  position: fixed;
  z-index: 2000;
  cursor: pointer;
  margin: 0;
}


/*
//	limiter
*/


[class*="limiter-"]
{
  margin: 0 auto;
  max-width: 100%;
}
.limiter-over2k
{
  display: inline-block;
  overflow: hidden;
}

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

    /*mobile phone*/
    .limiter-all,
    .limiter-mobile
    {
      max-width: 100%;
    }
}

@media only screen and (min-width: 901px) and (max-width: 1023px) {

    /*mobile tablet)*/
    .limiter-all,
    .limiter-mobile
    {
      max-width: 960px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1365px)
{


    /*desktop (office)*/
    .limiter-all,
    .limiter-desktop
    {
      max-width: 1180px;
    }
}

@media only screen and (min-width: 1365px) and (max-width: 1919px)
{

    /*desktop (classic)*/
    .limiter-all,
    .limiter-desktop
    {
      max-width: 1300px;
    }
}

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

    /*desktop (pro display)*/
    .limiter-all,
    .limiter-bigscreen
    {
      max-width: 1920px;
    }
}

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

    /*desktop (pro display)*/
    .limiter-all
    {
      max-width: 1500px;
    }
    .limiter-over2k
    {
      max-width: 1500px;
      margin: auto auto auto auto;
      overflow: hidden;
    }
}


/*
//	grids
*/

.grid-y
{
  display: grid;
  align-items: baseline;
}

.grid-y.gap-01{grid-gap:1px;}
.grid-y.gap-02{grid-gap:2px;}
.grid-y.gap-03{grid-gap:3px;}
.grid-y.gap-04{grid-gap:4px;}
.grid-y.gap-05{grid-gap:5px;}
.grid-y.gap-06{grid-gap:6px;}
.grid-y.gap-07{grid-gap:7px;}
.grid-y.gap-08{grid-gap:8px;}
.grid-y.gap-09{grid-gap:9px;}
.grid-y.gap-10{grid-gap:10px;}
.grid-y.gap-11{grid-gap:11px;}
.grid-y.gap-12{grid-gap:12px;}
.grid-y.gap-13{grid-gap:13px;}
.grid-y.gap-14{grid-gap:14px;}
.grid-y.gap-15{grid-gap:15px;}
.grid-y.gap-16{grid-gap:16px;}
.grid-y.gap-17{grid-gap:17px;}
.grid-y.gap-18{grid-gap:18px;}
.grid-y.gap-19{grid-gap:19px;}
.grid-y.gap-20{grid-gap:20px;}
.grid-y.gap-21{grid-gap:21px;}
.grid-y.gap-22{grid-gap:22px;}
.grid-y.gap-23{grid-gap:23px;}
.grid-y.gap-24{grid-gap:24px;}
.grid-y.gap-25{grid-gap:25px;}
.grid-y.gap-26{grid-gap:26px;}
.grid-y.gap-27{grid-gap:27px;}
.grid-y.gap-28{grid-gap:28px;}
.grid-y.gap-29{grid-gap:29px;}
.grid-y.gap-30{grid-gap:30px;}
.grid-y.gap-31{grid-gap:31px;}
.grid-y.gap-32{grid-gap:32px;}
.grid-y.gap-33{grid-gap:33px;}
.grid-y.gap-34{grid-gap:34px;}
.grid-y.gap-35{grid-gap:35px;}
.grid-y.gap-36{grid-gap:36px;}
.grid-y.gap-37{grid-gap:37px;}
.grid-y.gap-38{grid-gap:38px;}
.grid-y.gap-39{grid-gap:39px;}
.grid-y.gap-40{grid-gap:40px;}
.grid-y.gap-41{grid-gap:41px;}
.grid-y.gap-42{grid-gap:42px;}
.grid-y.gap-43{grid-gap:43px;}
.grid-y.gap-44{grid-gap:44px;}
.grid-y.gap-45{grid-gap:45px;}
.grid-y.gap-46{grid-gap:46px;}
.grid-y.gap-47{grid-gap:47px;}
.grid-y.gap-48{grid-gap:48px;}
.grid-y.gap-49{grid-gap:49px;}
.grid-y.gap-50{grid-gap:50px;}
.grid-y.gap-51{grid-gap:51px;}
.grid-y.gap-52{grid-gap:52px;}
.grid-y.gap-53{grid-gap:53px;}
.grid-y.gap-54{grid-gap:54px;}
.grid-y.gap-55{grid-gap:55px;}
.grid-y.gap-56{grid-gap:56px;}
.grid-y.gap-57{grid-gap:57px;}
.grid-y.gap-58{grid-gap:85px;}
.grid-y.gap-59{grid-gap:59px;}
.grid-y.gap-60{grid-gap:60px;}
.grid-y.gap-61{grid-gap:61px;}
.grid-y.gap-62{grid-gap:62px;}
.grid-y.gap-63{grid-gap:63px;}
.grid-y.gap-64{grid-gap:64px;}
.grid-y.gap-65{grid-gap:65px;}
.grid-y.gap-66{grid-gap:66px;}
.grid-y.gap-67{grid-gap:67px;}
.grid-y.gap-68{grid-gap:68px;}
.grid-y.gap-69{grid-gap:69px;}
.grid-y.gap-70{grid-gap:70px;}
.grid-y.gap-71{grid-gap:71px;}
.grid-y.gap-72{grid-gap:72px;}
.grid-y.gap-73{grid-gap:73px;}
.grid-y.gap-74{grid-gap:74px;}
.grid-y.gap-75{grid-gap:75px;}
.grid-y.gap-76{grid-gap:76px;}
.grid-y.gap-77{grid-gap:77px;}
.grid-y.gap-78{grid-gap:78px;}
.grid-y.gap-79{grid-gap:79px;}
.grid-y.gap-80{grid-gap:80px;}
.grid-y.gap-81{grid-gap:81px;}
.grid-y.gap-82{grid-gap:82px;}
.grid-y.gap-83{grid-gap:83px;}
.grid-y.gap-84{grid-gap:84px;}
.grid-y.gap-85{grid-gap:85px;}
.grid-y.gap-86{grid-gap:86px;}
.grid-y.gap-87{grid-gap:87px;}
.grid-y.gap-88{grid-gap:88px;}
.grid-y.gap-89{grid-gap:89px;}
.grid-y.gap-90{grid-gap:90px;}
.grid-y.gap-91{grid-gap:91px;}
.grid-y.gap-92{grid-gap:92px;}
.grid-y.gap-93{grid-gap:93px;}
.grid-y.gap-94{grid-gap:94px;}
.grid-y.gap-95{grid-gap:95px;}
.grid-y.gap-96{grid-gap:96px;}
.grid-y.gap-97{grid-gap:97px;}
.grid-y.gap-98{grid-gap:98px;}
.grid-y.gap-99{grid-gap:99px;}
.grid-y.gap-100{grid-gap:100px;}


.grid-x
{
  display: -webkit-box;
  display: flex;
  position: relative;
  min-width: 100%;
  width: auto;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.forcedmaxheight
{
  height: 100vh;
  min-height: 100%;
  max-height: 100%;
}
.maxheight
{
  height: 100%;
}

.grid-x.autoset>*
{
  display: -webkit-box;
  display: flex;
  align-items: center;
  margin: 0 auto;
}

.grid-x.gap-01>* {padding:1px 0 0 1px;}	.grid-x.gap-01{margin:-1px 0 0 -1px;}
.grid-x.gap-02>* {padding:2px 0 0 2px;}	.grid-x.gap-02{margin:-2px 0 0 -2px;}
.grid-x.gap-03>* {padding:3px 0 0 3px;}	.grid-x.gap-03{margin:-3px 0 0 -3px;}
.grid-x.gap-04>* {padding:4px 0 0 4px;}	.grid-x.gap-04{margin:-4px 0 0 -4px;}
.grid-x.gap-05>* {padding:5px 0 0 5px;}	.grid-x.gap-05{margin:-5px 0 0 -5px;}
.grid-x.gap-06>* {padding:6px 0 0 6px;}	.grid-x.gap-06{margin:-6px 0 0 -6px;}
.grid-x.gap-07>* {padding:7px 0 0 7px;}	.grid-x.gap-07{margin:-7px 0 0 -7px;}
.grid-x.gap-08>* {padding:8px 0 0 8px;}	.grid-x.gap-08{margin:-8px 0 0 -8px;}
.grid-x.gap-09>* {padding:9px 0 0 9px;}	.grid-x.gap-09{margin:-9px 0 0 -9px;}
.grid-x.gap-10>* {padding:10px 0 0 10px;}	.grid-x.gap-10{margin:-10px  0 0 -10px;}
.grid-x.gap-11>* {padding:11px 0 0 11px;}	.grid-x.gap-11{margin:-11px  0 0 -11px;}
.grid-x.gap-12>* {padding:12px 0 0 12px;}	.grid-x.gap-12{margin:-12px  0 0 -12px;}
.grid-x.gap-13>* {padding:13px 0 0 13px;}	.grid-x.gap-13{margin:-13px  0 0 -13px;}
.grid-x.gap-14>* {padding:14px 0 0 14px;}	.grid-x.gap-14{margin:-14px  0 0 -14px;}
.grid-x.gap-15>* {padding:15px 0 0 15px;}	.grid-x.gap-15{margin:-15px  0 0 -15px;}
.grid-x.gap-16>* {padding:16px 0 0 16px;}	.grid-x.gap-16{margin:-16px  0 0 -16px;}
.grid-x.gap-17>* {padding:17px 0 0 17px;}	.grid-x.gap-17{margin:-17px  0 0 -17px;}
.grid-x.gap-18>* {padding:18px 0 0 18px;}	.grid-x.gap-18{margin:-18px  0 0 -18px;}
.grid-x.gap-19>* {padding:19px 0 0 19px;}	.grid-x.gap-19{margin:-19px  0 0 -19px;}
.grid-x.gap-20>* {padding:20px 0 0 20px;}	.grid-x.gap-20{margin:-20px  0 0 -20px;}
.grid-x.gap-21>* {padding:21px 0 0 21px;}	.grid-x.gap-21{margin:-21px  0 0 -21px;}
.grid-x.gap-22>* {padding:22px 0 0 22px;}	.grid-x.gap-22{margin:-22px  0 0 -22px;}
.grid-x.gap-23>* {padding:23px 0 0 23px;}	.grid-x.gap-23{margin:-23px  0 0 -23px;}
.grid-x.gap-24>* {padding:24px 0 0 24px;}	.grid-x.gap-24{margin:-24px  0 0 -24px;}
.grid-x.gap-25>* {padding:25px 0 0 25px;}	.grid-x.gap-25{margin:-25px  0 0 -25px;}
.grid-x.gap-26>* {padding:26px 0 0 26px;}	.grid-x.gap-26{margin:-26px  0 0 -26px;}
.grid-x.gap-27>* {padding:27px 0 0 27px;}	.grid-x.gap-27{margin:-27px  0 0 -27px;}
.grid-x.gap-28>* {padding:28px 0 0 28px;}	.grid-x.gap-28{margin:-28px  0 0 -28px;}
.grid-x.gap-29>* {padding:29px 0 0 29px;}	.grid-x.gap-29{margin:-29px  0 0 -29px;}
.grid-x.gap-30>* {padding:30px 0 0 30px;}	.grid-x.gap-30{margin:-30px  0 0 -30px;}
.grid-x.gap-31>* {padding:31px 0 0 31px;}	.grid-x.gap-31{margin:-31px  0 0 -31px;}
.grid-x.gap-32>* {padding:32px 0 0 32px;}	.grid-x.gap-32{margin:-32px  0 0 -32px;}
.grid-x.gap-33>* {padding:33px 0 0 33px;}	.grid-x.gap-33{margin:-33px  0 0 -33px;}
.grid-x.gap-34>* {padding:34px 0 0 34px;}	.grid-x.gap-34{margin:-34px  0 0 -34px;}
.grid-x.gap-35>* {padding:35px 0 0 35px;}	.grid-x.gap-35{margin:-35px  0 0 -35px;}
.grid-x.gap-36>* {padding:36px 0 0 36px;}	.grid-x.gap-36{margin:-36px  0 0 -36px;}
.grid-x.gap-37>* {padding:37px 0 0 37px;}	.grid-x.gap-37{margin:-37px  0 0 -37px;}
.grid-x.gap-38>* {padding:38px 0 0 38px;}	.grid-x.gap-38{margin:-38px  0 0 -38px;}
.grid-x.gap-39>* {padding:39px 0 0 39px;}	.grid-x.gap-39{margin:-39px  0 0 -39px;}
.grid-x.gap-40>* {padding:40px 0 0 40px;}	.grid-x.gap-40{margin:-40px  0 0 -40px;}
.grid-x.gap-41>* {padding:41px 0 0 41px;}	.grid-x.gap-41{margin:-41px  0 0 -41px;}
.grid-x.gap-42>* {padding:42px 0 0 42px;}	.grid-x.gap-42{margin:-42px  0 0 -42px;}
.grid-x.gap-43>* {padding:43px 0 0 43px;}	.grid-x.gap-43{margin:-43px  0 0 -43px;}
.grid-x.gap-44>* {padding:44px 0 0 44px;}	.grid-x.gap-44{margin:-44px  0 0 -44px;}
.grid-x.gap-45>* {padding:45px 0 0 45px;}	.grid-x.gap-45{margin:-45px  0 0 -45px;}
.grid-x.gap-46>* {padding:46px 0 0 46px;}	.grid-x.gap-46{margin:-46px  0 0 -46px;}
.grid-x.gap-47>* {padding:47px 0 0 47px;}	.grid-x.gap-47{margin:-47px  0 0 -47px;}
.grid-x.gap-48>* {padding:48px 0 0 48px;}	.grid-x.gap-48{margin:-48px  0 0 -48px;}
.grid-x.gap-49>* {padding:49px 0 0 49px;}	.grid-x.gap-49{margin:-49px  0 0 -49px;}
.grid-x.gap-50>* {padding:50px 0 0 50px;}	.grid-x.gap-50{margin:-50px  0 0 -50px;}
.grid-x.gap-51>* {padding:51px 0 0 51px;}	.grid-x.gap-51{margin:-51px  0 0 -51px;}
.grid-x.gap-52>* {padding:52px 0 0 52px;}	.grid-x.gap-52{margin:-52px  0 0 -52px;}
.grid-x.gap-53>* {padding:53px 0 0 53px;}	.grid-x.gap-53{margin:-53px  0 0 -53px;}
.grid-x.gap-54>* {padding:54px 0 0 54px;}	.grid-x.gap-54{margin:-54px  0 0 -54px;}
.grid-x.gap-55>* {padding:55px 0 0 55px;}	.grid-x.gap-55{margin:-55px  0 0 -55px;}
.grid-x.gap-56>* {padding:56px 0 0 56px;}	.grid-x.gap-56{margin:-56px  0 0 -56px;}
.grid-x.gap-57>* {padding:57px 0 0 57px;}	.grid-x.gap-57{margin:-57px  0 0 -57px;}
.grid-x.gap-58>* {padding:85px 0 0 58px;}	.grid-x.gap-58{margin:-85px  0 0 -58px;}
.grid-x.gap-59>* {padding:59px 0 0 59px;}	.grid-x.gap-59{margin:-59px  0 0 -59px;}
.grid-x.gap-60>* {padding:60px 0 0 60px;}	.grid-x.gap-60{margin:-60px  0 0 -60px;}
.grid-x.gap-61>* {padding:61px 0 0 61px;}	.grid-x.gap-61{margin:-61px  0 0 -61px;}
.grid-x.gap-62>* {padding:62px 0 0 62px;}	.grid-x.gap-62{margin:-62px  0 0 -62px;}
.grid-x.gap-63>* {padding:63px 0 0 63px;}	.grid-x.gap-63{margin:-63px  0 0 -63px;}
.grid-x.gap-64>* {padding:64px 0 0 64px;}	.grid-x.gap-64{margin:-64px  0 0 -64px;}
.grid-x.gap-65>* {padding:65px 0 0 65px;}	.grid-x.gap-65{margin:-65px  0 0 -65px;}
.grid-x.gap-66>* {padding:66px 0 0 66px;}	.grid-x.gap-66{margin:-66px  0 0 -66px;}
.grid-x.gap-67>* {padding:67px 0 0 67px;}	.grid-x.gap-67{margin:-67px  0 0 -67px;}
.grid-x.gap-68>* {padding:68px 0 0 68px;}	.grid-x.gap-68{margin:-68px  0 0 -68px;}
.grid-x.gap-69>* {padding:69px 0 0 69px;}	.grid-x.gap-69{margin:-69px  0 0 -69px;}
.grid-x.gap-70>* {padding:70px 0 0 70px;}	.grid-x.gap-70{margin:-70px  0 0 -70px;}
.grid-x.gap-71>* {padding:71px 0 0 71px;}	.grid-x.gap-71{margin:-71px  0 0 -71px;}
.grid-x.gap-72>* {padding:72px 0 0 72px;}	.grid-x.gap-72{margin:-72px  0 0 -72px;}
.grid-x.gap-73>* {padding:73px 0 0 73px;}	.grid-x.gap-73{margin:-73px  0 0 -73px;}
.grid-x.gap-74>* {padding:74px 0 0 74px;}	.grid-x.gap-74{margin:-74px  0 0 -74px;}
.grid-x.gap-75>* {padding:75px 0 0 75px;}	.grid-x.gap-75{margin:-75px  0 0 -75px;}
.grid-x.gap-76>* {padding:76px 0 0 76px;}	.grid-x.gap-76{margin:-76px  0 0 -76px;}
.grid-x.gap-77>* {padding:77px 0 0 77px;}	.grid-x.gap-77{margin:-77px  0 0 -77px;}
.grid-x.gap-78>* {padding:78px 0 0 78px;}	.grid-x.gap-78{margin:-78px  0 0 -78px;}
.grid-x.gap-79>* {padding:79px 0 0 79px;}	.grid-x.gap-79{margin:-79px  0 0 -79px;}
.grid-x.gap-80>* {padding:80px 0 0 80px;}	.grid-x.gap-80{margin:-80px  0 0 -80px;}
.grid-x.gap-81>* {padding:81px 0 0 81px;}	.grid-x.gap-81{margin:-81px  0 0 -81px;}
.grid-x.gap-82>* {padding:82px 0 0 82px;}	.grid-x.gap-82{margin:-82px  0 0 -82px;}
.grid-x.gap-83>* {padding:83px 0 0 83px;}	.grid-x.gap-83{margin:-83px  0 0 -83px;}
.grid-x.gap-84>* {padding:84px 0 0 84px;}	.grid-x.gap-84{margin:-84px  0 0 -84px;}
.grid-x.gap-85>* {padding:85px 0 0 85px;}	.grid-x.gap-85{margin:-85px  0 0 -85px;}
.grid-x.gap-86>* {padding:86px 0 0 86px;}	.grid-x.gap-86{margin:-86px  0 0 -86px;}
.grid-x.gap-87>* {padding:87px 0 0 87px;}	.grid-x.gap-87{margin:-87px  0 0 -87px;}
.grid-x.gap-88>* {padding:88px 0 0 88px;}	.grid-x.gap-88{margin:-88px  0 0 -88px;}
.grid-x.gap-89>* {padding:89px 0 0 89px;}	.grid-x.gap-89{margin:-89px  0 0 -89px;}
.grid-x.gap-90>* {padding:90px 0 0 90px;}	.grid-x.gap-90{margin:-90px  0 0 -90px;}
.grid-x.gap-91>* {padding:91px 0 0 91px;}	.grid-x.gap-91{margin:-91px  0 0 -91px;}
.grid-x.gap-92>* {padding:92px 0 0 92px;}	.grid-x.gap-92{margin:-92px  0 0 -92px;}
.grid-x.gap-93>* {padding:93px 0 0 93px;}	.grid-x.gap-93{margin:-93px  0 0 -93px;}
.grid-x.gap-94>* {padding:94px 0 0 94px;}	.grid-x.gap-94{margin:-94px  0 0 -94px;}
.grid-x.gap-95>* {padding:95px 0 0 95px;}	.grid-x.gap-95{margin:-95px  0 0 -95px;}
.grid-x.gap-96>* {padding:96px 0 0 96px;}	.grid-x.gap-96{margin:-96px  0 0 -96px;}
.grid-x.gap-97>* {padding:97px 0 0 97px;}	.grid-x.gap-97{margin:-97px  0 0 -97px;}
.grid-x.gap-98>* {padding:98px 0 0 98px;}	.grid-x.gap-98{margin:-98px  0 0 -98px;}
.grid-x.gap-99>* {padding:99px 0 0 99px;}	.grid-x.gap-99{margin:-99px  0 0 -99px;}
.grid-x.gap-100>*{padding:100px 0 0 100px;}	.grid-x.gap-100{margin:-100px 0 0 -100px;}



/* media query - cut */ /*smartphone & low ppi */
@media only screen and (max-width : 900px)
{

  .grid-y[class*='col-'][class*='01]'] { grid-template-columns: repeat(1, 1fr); }
  .grid-y[class*='col-'][class*='02]'] { grid-template-columns: repeat(2, 1fr); }
  .grid-y[class*='col-'][class*='03]'] { grid-template-columns: repeat(3, 1fr); }
  .grid-y[class*='col-'][class*='04]'] { grid-template-columns: repeat(4, 1fr); }
  .grid-y[class*='col-'][class*='05]'] { grid-template-columns: repeat(5, 1fr); }
  .grid-y[class*='col-'][class*='06]'] { grid-template-columns: repeat(6, 1fr); }
  .grid-y[class*='col-'][class*='07]'] { grid-template-columns: repeat(7, 1fr); }
  .grid-y[class*='col-'][class*='08]'] { grid-template-columns: repeat(8, 1fr); }
  .grid-y[class*='col-'][class*='09]'] { grid-template-columns: repeat(9, 1fr); }
  .grid-y[class*='col-'][class*='10]'] { grid-template-columns: repeat(10, 1fr); }

  .grid-x>[class*="box-"][class*="-00]"],
	.grid-x>[class*="box-"][class*="hide]"]{display:none!important;}
	.grid-x>[class*="box-"][class*="01]"]{width:1%;}
	.grid-x>[class*="box-"][class*="02]"]{width:2%;}
	.grid-x>[class*="box-"][class*="03]"]{width:3%;}
	.grid-x>[class*="box-"][class*="04]"]{width:4%;}
	.grid-x>[class*="box-"][class*="05]"]{width:5%;}
	.grid-x>[class*="box-"][class*="06]"]{width:6%;}
	.grid-x>[class*="box-"][class*="07]"]{width:7%;}
	.grid-x>[class*="box-"][class*="08]"]{width:8%;}
	.grid-x>[class*="box-"][class*="09]"]{width:9%;}
	.grid-x>[class*="box-"][class*="10]"]{width:10%;}
	.grid-x>[class*="box-"][class*="11]"]{width:11%;}
	.grid-x>[class*="box-"][class*="12]"]{width:12%;}
	.grid-x>[class*="box-"][class*="13]"]{width:13%;}
	.grid-x>[class*="box-"][class*="14]"]{width:14%;}
	.grid-x>[class*="box-"][class*="15]"]{width:15%;}
	.grid-x>[class*="box-"][class*="16]"]{width:16.66%;}
	.grid-x>[class*="box-"][class*="17]"]{width:17%;}
	.grid-x>[class*="box-"][class*="18]"]{width:18%;}
	.grid-x>[class*="box-"][class*="19]"]{width:19%;}
	.grid-x>[class*="box-"][class*="20]"]{width:20%;}
	.grid-x>[class*="box-"][class*="21]"]{width:21%;}
	.grid-x>[class*="box-"][class*="22]"]{width:22%;}
	.grid-x>[class*="box-"][class*="23]"]{width:23%;}
	.grid-x>[class*="box-"][class*="24]"]{width:24%;}
	.grid-x>[class*="box-"][class*="25]"]{width:25%;}
	.grid-x>[class*="box-"][class*="26]"]{width:26%;}
	.grid-x>[class*="box-"][class*="27]"]{width:27%;}
	.grid-x>[class*="box-"][class*="28]"]{width:28%;}
	.grid-x>[class*="box-"][class*="29]"]{width:29%;}
	.grid-x>[class*="box-"][class*="30]"]{width:30%;}
	.grid-x>[class*="box-"][class*="31]"]{width:31%;}
	.grid-x>[class*="box-"][class*="32]"]{width:32%;}
	.grid-x>[class*="box-"][class*="33]"]{width:33.3334%;}
	.grid-x>[class*="box-"][class*="34]"]{width:34%;}
	.grid-x>[class*="box-"][class*="35]"]{width:35%;}
	.grid-x>[class*="box-"][class*="36]"]{width:36%;}
	.grid-x>[class*="box-"][class*="37]"]{width:37%;}
	.grid-x>[class*="box-"][class*="38]"]{width:38%;}
	.grid-x>[class*="box-"][class*="39]"]{width:39%;}
	.grid-x>[class*="box-"][class*="40]"]{width:40%;}
	.grid-x>[class*="box-"][class*="41]"]{width:41%;}
	.grid-x>[class*="box-"][class*="42]"]{width:42%;}
	.grid-x>[class*="box-"][class*="43]"]{width:43%;}
	.grid-x>[class*="box-"][class*="44]"]{width:44%;}
	.grid-x>[class*="box-"][class*="45]"]{width:45%;}
	.grid-x>[class*="box-"][class*="46]"]{width:46%;}
	.grid-x>[class*="box-"][class*="47]"]{width:47%;}
	.grid-x>[class*="box-"][class*="48]"]{width:48%;}
	.grid-x>[class*="box-"][class*="49]"]{width:49%;}
	.grid-x>[class*="box-"][class*="50]"]{width:50%;}
	.grid-x>[class*="box-"][class*="51]"]{width:51%;}
	.grid-x>[class*="box-"][class*="52]"]{width:52%;}
	.grid-x>[class*="box-"][class*="53]"]{width:53%;}
	.grid-x>[class*="box-"][class*="54]"]{width:54%;}
	.grid-x>[class*="box-"][class*="55]"]{width:55%;}
	.grid-x>[class*="box-"][class*="56]"]{width:56%;}
	.grid-x>[class*="box-"][class*="57]"]{width:57%;}
	.grid-x>[class*="box-"][class*="58]"]{width:58%;}
	.grid-x>[class*="box-"][class*="59]"]{width:59%;}
	.grid-x>[class*="box-"][class*="60]"]{width:60%;}
	.grid-x>[class*="box-"][class*="61]"]{width:61%;}
	.grid-x>[class*="box-"][class*="62]"]{width:62%;}
	.grid-x>[class*="box-"][class*="63]"]{width:63%;}
	.grid-x>[class*="box-"][class*="64]"]{width:64%;}
	.grid-x>[class*="box-"][class*="65]"]{width:65%;}
	.grid-x>[class*="box-"][class*="66]"]{width:66.667%;}
	.grid-x>[class*="box-"][class*="67]"]{width:67%;}
	.grid-x>[class*="box-"][class*="68]"]{width:68%;}
	.grid-x>[class*="box-"][class*="69]"]{width:69%;}
	.grid-x>[class*="box-"][class*="70]"]{width:70%;}
	.grid-x>[class*="box-"][class*="71]"]{width:71%;}
	.grid-x>[class*="box-"][class*="72]"]{width:72%;}
	.grid-x>[class*="box-"][class*="73]"]{width:73%;}
	.grid-x>[class*="box-"][class*="74]"]{width:74%;}
	.grid-x>[class*="box-"][class*="75]"]{width:75%;}
	.grid-x>[class*="box-"][class*="76]"]{width:76%;}
	.grid-x>[class*="box-"][class*="77]"]{width:77%;}
	.grid-x>[class*="box-"][class*="78]"]{width:78%;}
	.grid-x>[class*="box-"][class*="79]"]{width:79%;}
	.grid-x>[class*="box-"][class*="80]"]{width:80%;}
	.grid-x>[class*="box-"][class*="81]"]{width:81%;}
	.grid-x>[class*="box-"][class*="82]"]{width:82%;}
	.grid-x>[class*="box-"][class*="83]"]{width:83%;}
	.grid-x>[class*="box-"][class*="84]"]{width:84%;}
	.grid-x>[class*="box-"][class*="85]"]{width:85%;}
	.grid-x>[class*="box-"][class*="86]"]{width:86%;}
	.grid-x>[class*="box-"][class*="87]"]{width:87%;}
	.grid-x>[class*="box-"][class*="88]"]{width:88%;}
	.grid-x>[class*="box-"][class*="89]"]{width:89%;}
	.grid-x>[class*="box-"][class*="90]"]{width:90%;}
	.grid-x>[class*="box-"][class*="91]"]{width:91%;}
	.grid-x>[class*="box-"][class*="92]"]{width:92%;}
	.grid-x>[class*="box-"][class*="93]"]{width:93%;}
	.grid-x>[class*="box-"][class*="94]"]{width:94%;}
	.grid-x>[class*="box-"][class*="95]"]{width:95%;}
	.grid-x>[class*="box-"][class*="96]"]{width:96%;}
	.grid-x>[class*="box-"][class*="97]"]{width:97%;}
	.grid-x>[class*="box-"][class*="98]"]{width:98%;}
	.grid-x>[class*="box-"][class*="99]"]{width:99%;}
	.grid-x>[class*="box-"][class*="100]"]{width:100%;}
	.grid-x>[class*="box-"][class*="auto]"]{width: 0; -webkit-box-flex: 1 !important; -ms-flex: auto !important; flex: auto !important;}

	[class*="space-"][class*="none]"]  {padding:0px;}
	[class*="space-"][class*="-00]"]  {padding:0px;}
	[class*="space-"][class*="05]"]  {padding:5px;}
	[class*="space-"][class*="10]"]  {padding:10px;}
	[class*="space-"][class*="15]"]  {padding:15px;}
	[class*="space-"][class*="20]"]  {padding:20px;}
	[class*="space-"][class*="25]"]  {padding:25px;}
	[class*="space-"][class*="30]"]  {padding:30px;}
	[class*="space-"][class*="35]"]  {padding:35px;}
	[class*="space-"][class*="40]"]  {padding:40px;}
	[class*="space-"][class*="45]"]  {padding:45px;}
	[class*="space-"][class*="50]"]  {padding:50px;}
	[class*="space-"][class*="55]"]  {padding:55px;}
	[class*="space-"][class*="60]"]  {padding:60px;}
	[class*="space-"][class*="65]"]  {padding:65px;}
	[class*="space-"][class*="70]"]  {padding:70px;}
	[class*="space-"][class*="75]"]  {padding:75px;}
	[class*="space-"][class*="80]"]  {padding:80px;}
	[class*="space-"][class*="85]"]  {padding:85px;}
	[class*="space-"][class*="90]"]  {padding:90px;}
	[class*="space-"][class*="95]"]  {padding:95px;}
	[class*="space-"][class*="100]"]	{padding:100px;}

	[class*="align-"][class*="left]"]     {text-align:left;}
	[class*="align-"][class*="justify]"]  {text-align:justify;}
	[class*="align-"][class*="center]"]   {text-align:center;}
	[class*="align-"][class*="right]"]    {text-align:right;}
  
  [class*="float-"][class*="off]"]   {float: unset;}
  [class*="float-"][class*="left]"]  {float: left;}
  [class*="float-"][class*="right]"] {float: right;}

  [class*="viewon-"][class*="off]"]	{display:none;}

	img.max-resolution		{display:none;}
	img.medium-resolution	{display:none;}
	img.small-resolution	{display:inline-block;}
  

}

/* media query - cut */ /*tablet & medium ppi  */
@media only screen and (min-width : 901px) and (max-width : 1919px)
{

  .grid-y[class*='col-'][class*='-01-'] { grid-template-columns: repeat(1, 1fr); }
  .grid-y[class*='col-'][class*='-02-'] { grid-template-columns: repeat(2, 1fr); }
  .grid-y[class*='col-'][class*='-03-'] { grid-template-columns: repeat(3, 1fr); }
  .grid-y[class*='col-'][class*='-04-'] { grid-template-columns: repeat(4, 1fr); }
  .grid-y[class*='col-'][class*='-05-'] { grid-template-columns: repeat(5, 1fr); }
  .grid-y[class*='col-'][class*='-06-'] { grid-template-columns: repeat(6, 1fr); }
  .grid-y[class*='col-'][class*='-07-'] { grid-template-columns: repeat(7, 1fr); }
  .grid-y[class*='col-'][class*='-08-'] { grid-template-columns: repeat(8, 1fr); }
  .grid-y[class*='col-'][class*='-09-'] { grid-template-columns: repeat(9, 1fr); }
  .grid-y[class*='col-'][class*='-10-'] { grid-template-columns: repeat(10, 1fr); }

  .grid-x>[class*="box-"][class*="-00-"],
	.grid-x>[class*="box-"][class*="-hide-"]{display:none!important;}
	.grid-x>[class*="box-"][class*="-01-"]{width:1%;}
	.grid-x>[class*="box-"][class*="-02-"]{width:2%;}
	.grid-x>[class*="box-"][class*="-03-"]{width:3%;}
	.grid-x>[class*="box-"][class*="-04-"]{width:4%;}
	.grid-x>[class*="box-"][class*="-05-"]{width:5%;}
	.grid-x>[class*="box-"][class*="-06-"]{width:6%;}
	.grid-x>[class*="box-"][class*="-07-"]{width:7%;}
	.grid-x>[class*="box-"][class*="-08-"]{width:8%;}
	.grid-x>[class*="box-"][class*="-09-"]{width:9%;}
	.grid-x>[class*="box-"][class*="-10-"]{width:10%;}
	.grid-x>[class*="box-"][class*="-11-"]{width:11%;}
	.grid-x>[class*="box-"][class*="-12-"]{width:12%;}
	.grid-x>[class*="box-"][class*="-13-"]{width:13%;}
	.grid-x>[class*="box-"][class*="-14-"]{width:14%;}
	.grid-x>[class*="box-"][class*="-15-"]{width:15%;}
	.grid-x>[class*="box-"][class*="-16-"]{width:16.66%;}
	.grid-x>[class*="box-"][class*="-17-"]{width:17%;}
	.grid-x>[class*="box-"][class*="-18-"]{width:18%;}
	.grid-x>[class*="box-"][class*="-19-"]{width:19%;}
	.grid-x>[class*="box-"][class*="-20-"]{width:20%;}
	.grid-x>[class*="box-"][class*="-21-"]{width:21%;}
	.grid-x>[class*="box-"][class*="-22-"]{width:22%;}
	.grid-x>[class*="box-"][class*="-23-"]{width:23%;}
	.grid-x>[class*="box-"][class*="-24-"]{width:24%;}
	.grid-x>[class*="box-"][class*="-25-"]{width:25%;}
	.grid-x>[class*="box-"][class*="-26-"]{width:26%;}
	.grid-x>[class*="box-"][class*="-27-"]{width:27%;}
	.grid-x>[class*="box-"][class*="-28-"]{width:28%;}
	.grid-x>[class*="box-"][class*="-29-"]{width:29%;}
	.grid-x>[class*="box-"][class*="-30-"]{width:30%;}
	.grid-x>[class*="box-"][class*="-31-"]{width:31%;}
	.grid-x>[class*="box-"][class*="-32-"]{width:32%;}
	.grid-x>[class*="box-"][class*="-33-"]{width:33.3334%;}
	.grid-x>[class*="box-"][class*="-34-"]{width:34%;}
	.grid-x>[class*="box-"][class*="-35-"]{width:35%;}
	.grid-x>[class*="box-"][class*="-36-"]{width:36%;}
	.grid-x>[class*="box-"][class*="-37-"]{width:37%;}
	.grid-x>[class*="box-"][class*="-38-"]{width:38%;}
	.grid-x>[class*="box-"][class*="-39-"]{width:39%;}
	.grid-x>[class*="box-"][class*="-40-"]{width:40%;}
	.grid-x>[class*="box-"][class*="-41-"]{width:41%;}
	.grid-x>[class*="box-"][class*="-42-"]{width:42%;}
	.grid-x>[class*="box-"][class*="-43-"]{width:43%;}
	.grid-x>[class*="box-"][class*="-44-"]{width:44%;}
	.grid-x>[class*="box-"][class*="-45-"]{width:45%;}
	.grid-x>[class*="box-"][class*="-46-"]{width:46%;}
	.grid-x>[class*="box-"][class*="-47-"]{width:47%;}
	.grid-x>[class*="box-"][class*="-48-"]{width:48%;}
	.grid-x>[class*="box-"][class*="-49-"]{width:49%;}
	.grid-x>[class*="box-"][class*="-50-"]{width:50%;}
	.grid-x>[class*="box-"][class*="-51-"]{width:51%;}
	.grid-x>[class*="box-"][class*="-52-"]{width:52%;}
	.grid-x>[class*="box-"][class*="-53-"]{width:53%;}
	.grid-x>[class*="box-"][class*="-54-"]{width:54%;}
	.grid-x>[class*="box-"][class*="-55-"]{width:55%;}
	.grid-x>[class*="box-"][class*="-56-"]{width:56%;}
	.grid-x>[class*="box-"][class*="-57-"]{width:57%;}
	.grid-x>[class*="box-"][class*="-58-"]{width:58%;}
	.grid-x>[class*="box-"][class*="-59-"]{width:59%;}
	.grid-x>[class*="box-"][class*="-60-"]{width:60%;}
	.grid-x>[class*="box-"][class*="-61-"]{width:61%;}
	.grid-x>[class*="box-"][class*="-62-"]{width:62%;}
	.grid-x>[class*="box-"][class*="-63-"]{width:63%;}
	.grid-x>[class*="box-"][class*="-64-"]{width:64%;}
	.grid-x>[class*="box-"][class*="-65-"]{width:65%;}
	.grid-x>[class*="box-"][class*="-66-"]{width:66.667%;}
	.grid-x>[class*="box-"][class*="-67-"]{width:67%;}
	.grid-x>[class*="box-"][class*="-68-"]{width:68%;}
	.grid-x>[class*="box-"][class*="-69-"]{width:69%;}
	.grid-x>[class*="box-"][class*="-70-"]{width:70%;}
	.grid-x>[class*="box-"][class*="-71-"]{width:71%;}
	.grid-x>[class*="box-"][class*="-72-"]{width:72%;}
	.grid-x>[class*="box-"][class*="-73-"]{width:73%;}
	.grid-x>[class*="box-"][class*="-74-"]{width:74%;}
	.grid-x>[class*="box-"][class*="-75-"]{width:75%;}
	.grid-x>[class*="box-"][class*="-76-"]{width:76%;}
	.grid-x>[class*="box-"][class*="-77-"]{width:77%;}
	.grid-x>[class*="box-"][class*="-78-"]{width:78%;}
	.grid-x>[class*="box-"][class*="-79-"]{width:79%;}
	.grid-x>[class*="box-"][class*="-80-"]{width:80%;}
	.grid-x>[class*="box-"][class*="-81-"]{width:81%;}
	.grid-x>[class*="box-"][class*="-82-"]{width:82%;}
	.grid-x>[class*="box-"][class*="-83-"]{width:83%;}
	.grid-x>[class*="box-"][class*="-84-"]{width:84%;}
	.grid-x>[class*="box-"][class*="-85-"]{width:85%;}
	.grid-x>[class*="box-"][class*="-86-"]{width:86%;}
	.grid-x>[class*="box-"][class*="-87-"]{width:87%;}
	.grid-x>[class*="box-"][class*="-88-"]{width:88%;}
	.grid-x>[class*="box-"][class*="-89-"]{width:89%;}
	.grid-x>[class*="box-"][class*="-90-"]{width:90%;}
	.grid-x>[class*="box-"][class*="-91-"]{width:91%;}
	.grid-x>[class*="box-"][class*="-92-"]{width:92%;}
	.grid-x>[class*="box-"][class*="-93-"]{width:93%;}
	.grid-x>[class*="box-"][class*="-94-"]{width:94%;}
	.grid-x>[class*="box-"][class*="-95-"]{width:95%;}
	.grid-x>[class*="box-"][class*="-96-"]{width:96%;}
	.grid-x>[class*="box-"][class*="-97-"]{width:97%;}
	.grid-x>[class*="box-"][class*="-98-"]{width:98%;}
	.grid-x>[class*="box-"][class*="-99-"]{width:99%;}
	.grid-x>[class*="box-"][class*="-100-"]{width:100%;}
	.grid-x>[class*="box-"][class*="-auto-"]{ width: 0; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }

	[class*="space-"][class*="-hide-"]	{padding:0px;}
	[class*="space-"][class*="-05-"]	{padding:5px;}
	[class*="space-"][class*="-10-"]	{padding:10px;}
	[class*="space-"][class*="-15-"]	{padding:15px;}
	[class*="space-"][class*="-20-"]	{padding:20px;}
	[class*="space-"][class*="-25-"]	{padding:25px;}
	[class*="space-"][class*="-30-"]	{padding:30px;}
	[class*="space-"][class*="-35-"]	{padding:35px;}
	[class*="space-"][class*="-40-"]	{padding:40px;}
	[class*="space-"][class*="-45-"]	{padding:45px;}
	[class*="space-"][class*="-50-"]	{padding:50px;}
	[class*="space-"][class*="-55-"]	{padding:55px;}
	[class*="space-"][class*="-60-"]	{padding:60px;}
	[class*="space-"][class*="-65-"]	{padding:65px;}
	[class*="space-"][class*="-70-"]	{padding:70px;}
	[class*="space-"][class*="-75-"]	{padding:75px;}
	[class*="space-"][class*="-80-"]	{padding:80px;}
	[class*="space-"][class*="-85-"]	{padding:85px;}
	[class*="space-"][class*="-90-"]	{padding:90px;}
	[class*="space-"][class*="-95-"]	{padding:95px;}
	[class*="space-"][class*="-100-"]	{padding:100px;}

	[class*="align-"][class*="-left-"]		{text-align:left;}
	[class*="align-"][class*="-justify-"]	{text-align:justify;}
	[class*="align-"][class*="-center-"]	{text-align:center;}
	[class*="align-"][class*="-right-"]		{text-align:right;}
  
  [class*="float-"][class*="-off-"]   {float: unset;}
  [class*="float-"][class*="-left-"]  {float: left;}
  [class*="float-"][class*="-right-"] {float: right;}

  [class*="viewon-"][class*="-off-"]	{display:none;}

	img.max-resolution		{display:none;}
	img.medium-resolution	{display:inline-block;}
	img.small-resolution	{display:none;}

}

/* media query - cut */ /*bigscreen & high ppi  */
@media only screen and (min-width : 1920px)
{

  .grid-y[class*='col-'][class*='[01-'] { grid-template-columns: repeat(1, 1fr); }
  .grid-y[class*='col-'][class*='[02-'] { grid-template-columns: repeat(2, 1fr); }
  .grid-y[class*='col-'][class*='[03-'] { grid-template-columns: repeat(3, 1fr); }
  .grid-y[class*='col-'][class*='[04-'] { grid-template-columns: repeat(4, 1fr); }
  .grid-y[class*='col-'][class*='[05-'] { grid-template-columns: repeat(5, 1fr); }
  .grid-y[class*='col-'][class*='[06-'] { grid-template-columns: repeat(6, 1fr); }
  .grid-y[class*='col-'][class*='[07-'] { grid-template-columns: repeat(7, 1fr); }
  .grid-y[class*='col-'][class*='[08-'] { grid-template-columns: repeat(8, 1fr); }
  .grid-y[class*='col-'][class*='[09-'] { grid-template-columns: repeat(9, 1fr); }
  .grid-y[class*='col-'][class*='[00-'] { grid-template-columns: repeat(10, 1fr); }
  
  .grid-x>[class*="box-[00-"],
	.grid-x>[class*="box-[hide"]{display:none!important;}
	.grid-x>[class*="box-[01"]{width:1%;}
	.grid-x>[class*="box-[02"]{width:2%;}
	.grid-x>[class*="box-[03"]{width:3%;}
	.grid-x>[class*="box-[04"]{width:4%;}
	.grid-x>[class*="box-[05"]{width:5%;}
	.grid-x>[class*="box-[06"]{width:6%;}
	.grid-x>[class*="box-[07"]{width:7%;}
	.grid-x>[class*="box-[08"]{width:8%;}
	.grid-x>[class*="box-[09"]{width:9%;}
	.grid-x>[class*="box-[10"]{width:10%;}
	.grid-x>[class*="box-[11"]{width:11%;}
	.grid-x>[class*="box-[12"]{width:12%;}
	.grid-x>[class*="box-[13"]{width:13%;}
	.grid-x>[class*="box-[14"]{width:14%;}
	.grid-x>[class*="box-[15"]{width:15%;}
	.grid-x>[class*="box-[16"]{width:16.66%;}
	.grid-x>[class*="box-[17"]{width:17%;}
	.grid-x>[class*="box-[18"]{width:18%;}
	.grid-x>[class*="box-[19"]{width:19%;}
	.grid-x>[class*="box-[20"]{width:20%;}
	.grid-x>[class*="box-[21"]{width:21%;}
	.grid-x>[class*="box-[22"]{width:22%;}
	.grid-x>[class*="box-[23"]{width:23%;}
	.grid-x>[class*="box-[24"]{width:24%;}
	.grid-x>[class*="box-[25"]{width:25%;}
	.grid-x>[class*="box-[26"]{width:26%;}
	.grid-x>[class*="box-[27"]{width:27%;}
	.grid-x>[class*="box-[28"]{width:28%;}
	.grid-x>[class*="box-[29"]{width:29%;}
	.grid-x>[class*="box-[30"]{width:30%;}
	.grid-x>[class*="box-[31"]{width:31%;}
	.grid-x>[class*="box-[32"]{width:32%;}
	.grid-x>[class*="box-[33"]{width:33.3334%;}
	.grid-x>[class*="box-[34"]{width:34%;}
	.grid-x>[class*="box-[35"]{width:35%;}
	.grid-x>[class*="box-[36"]{width:36%;}
	.grid-x>[class*="box-[37"]{width:37%;}
	.grid-x>[class*="box-[38"]{width:38%;}
	.grid-x>[class*="box-[39"]{width:39%;}
	.grid-x>[class*="box-[40"]{width:40%;}
	.grid-x>[class*="box-[41"]{width:41%;}
	.grid-x>[class*="box-[42"]{width:42%;}
	.grid-x>[class*="box-[43"]{width:43%;}
	.grid-x>[class*="box-[44"]{width:44%;}
	.grid-x>[class*="box-[45"]{width:45%;}
	.grid-x>[class*="box-[46"]{width:46%;}
	.grid-x>[class*="box-[47"]{width:47%;}
	.grid-x>[class*="box-[48"]{width:48%;}
	.grid-x>[class*="box-[49"]{width:49%;}
	.grid-x>[class*="box-[50"]{width:50%;}
	.grid-x>[class*="box-[51"]{width:51%;}
	.grid-x>[class*="box-[52"]{width:52%;}
	.grid-x>[class*="box-[53"]{width:53%;}
	.grid-x>[class*="box-[54"]{width:54%;}
	.grid-x>[class*="box-[55"]{width:55%;}
	.grid-x>[class*="box-[56"]{width:56%;}
	.grid-x>[class*="box-[57"]{width:57%;}
	.grid-x>[class*="box-[58"]{width:58%;}
	.grid-x>[class*="box-[59"]{width:59%;}
	.grid-x>[class*="box-[60"]{width:60%;}
	.grid-x>[class*="box-[61"]{width:61%;}
	.grid-x>[class*="box-[62"]{width:62%;}
	.grid-x>[class*="box-[63"]{width:63%;}
	.grid-x>[class*="box-[64"]{width:64%;}
	.grid-x>[class*="box-[65"]{width:65%;}
	.grid-x>[class*="box-[66"]{width:66.667%;}
	.grid-x>[class*="box-[67"]{width:67%;}
	.grid-x>[class*="box-[68"]{width:68%;}
	.grid-x>[class*="box-[69"]{width:69%;}
	.grid-x>[class*="box-[70"]{width:70%;}
	.grid-x>[class*="box-[71"]{width:71%;}
	.grid-x>[class*="box-[72"]{width:72%;}
	.grid-x>[class*="box-[73"]{width:73%;}
	.grid-x>[class*="box-[74"]{width:74%;}
	.grid-x>[class*="box-[75"]{width:75%;}
	.grid-x>[class*="box-[76"]{width:76%;}
	.grid-x>[class*="box-[77"]{width:77%;}
	.grid-x>[class*="box-[78"]{width:78%;}
	.grid-x>[class*="box-[79"]{width:79%;}
	.grid-x>[class*="box-[80"]{width:80%;}
	.grid-x>[class*="box-[81"]{width:81%;}
	.grid-x>[class*="box-[82"]{width:82%;}
	.grid-x>[class*="box-[83"]{width:83%;}
	.grid-x>[class*="box-[84"]{width:84%;}
	.grid-x>[class*="box-[85"]{width:85%;}
	.grid-x>[class*="box-[86"]{width:86%;}
	.grid-x>[class*="box-[87"]{width:87%;}
	.grid-x>[class*="box-[88"]{width:88%;}
	.grid-x>[class*="box-[89"]{width:89%;}
	.grid-x>[class*="box-[90"]{width:90%;}
	.grid-x>[class*="box-[91"]{width:91%;}
	.grid-x>[class*="box-[92"]{width:92%;}
	.grid-x>[class*="box-[93"]{width:93%;}
	.grid-x>[class*="box-[94"]{width:94%;}
	.grid-x>[class*="box-[95"]{width:95%;}
	.grid-x>[class*="box-[96"]{width:96%;}
	.grid-x>[class*="box-[97"]{width:97%;}
	.grid-x>[class*="box-[98"]{width:98%;}
	.grid-x>[class*="box-[99"]{width:99%;}
	.grid-x>[class*="box-[100"]{width:100%;}
	.grid-x>[class*="box-[auto"] {width: 0; -webkit-box-flex: 1 !important; -ms-flex: auto !important; flex: auto !important;}

	[class*="space-[00"]		{padding:0px;}
	[class*="space-[05"]		{padding:5px;}
	[class*="space-[10"]		{padding:10px;}
	[class*="space-[15"]		{padding:15px;}
	[class*="space-[20"]		{padding:20px;}
	[class*="space-[25"]		{padding:25px;}
	[class*="space-[30"]		{padding:30px;}
	[class*="space-[35"]		{padding:35px;}
	[class*="space-[40"]		{padding:40px;}
	[class*="space-[45"]		{padding:45px;}
	[class*="space-[50"]		{padding:50px;}
	[class*="space-[55"]		{padding:55px;}
	[class*="space-[60"]		{padding:60px;}
	[class*="space-[65"]		{padding:65px;}
	[class*="space-[70"]		{padding:70px;}
	[class*="space-[75"]		{padding:75px;}
	[class*="space-[80"]		{padding:80px;}
	[class*="space-[85"]		{padding:85px;}
	[class*="space-[90"]		{padding:90px;}
	[class*="space-[95"]		{padding:95px;}
	[class*="space-[100"]	  {padding:100px;}

	[class*="align-[left"]		{text-align:left;}
	[class*="align-[justify"]	{text-align:justify;}
	[class*="align-[center"]		{text-align:center;}
	[class*="align-[right"]		{text-align:right;}

  [class*="float-"][class*="[off-"]   {float: unset;}
  [class*="float-"][class*="[left-"]  {float: left;}
  [class*="float-"][class*="[right-"] {float: right;}

  [class*="viewon-"][class*="[off-"]	{display:none;}

	img.max-resolution		{display:inline-block;}
	img.medium-resolution	{display:none;}
	img.small-resolution	{display:none;}

}


.align-left		  {text-align:left;}
.align-justify	{text-align:justify;}
.align-center		{text-align:center;}
.align-right		{text-align:right;}

.space-00,.space-none		{padding:0px;}
.space-05		{padding:5px;}
.space-10		{padding:10px;}
.space-15		{padding:15px;}
.space-20		{padding:20px;}
.space-25		{padding:25px;}
.space-30		{padding:30px;}
.space-35		{padding:35px;}
.space-40		{padding:40px;}
.space-45		{padding:45px;}
.space-50		{padding:50px;}
.space-55		{padding:55px;}
.space-60		{padding:60px;}
.space-65		{padding:65px;}
.space-70		{padding:70px;}
.space-75		{padding:75px;}
.space-80		{padding:80px;}
.space-85		{padding:85px;}
.space-90		{padding:90px;}
.space-95		{padding:95px;}
.space-100	{padding:100px;}



/*
//	outbox systems
*/

.outbox
{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom:0;
  height: 100%;
  -webkit-box-align: center;
  align-items: center;
  z-index: -1;
  display: none;
}

.outbox .overlay
{
  height: 100vh;
  width: 100%;
  background:rgba(0,0,0,.5);
  z-index: 0;
  display: flex;
  align-items: center; 
}

.outbox.off,
.outbox.active
{
  display: flex;
  z-index: 5000;
}
.outbox.active
{
  -webkit-animation: outbox-active .2s 0s 1 forwards;
          animation: outbox-active .2s 0s 1 forwards;
}
.outbox.off
{
  -webkit-animation: outbox-off .2s .15s 1 forwards;
          animation: outbox-off .2s .15s 1 forwards;
}

/* .outbox>.side-top,
.outbox>.side-left,
.outbox>.side-right,
.outbox>.side-bottom
{
  max-width: 100%;
  max-height: 100%;
  position: fixed;
} */

@-webkit-keyframes outbox-active
{
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes outbox-active
{
  from { opacity: 0; }
  to { opacity: 1; }
}
@-webkit-keyframes outbox-off
{
  from { opacity: 1; }
  to{ opacity: 0; }
}
@keyframes outbox-off
{
  from { opacity: 1 }
  to{ opacity: 0 }
}

.side-left
{
  height: 100%;
  min-width: 20vw;
  position: absolute;
  left: 0;
}
.outbox.active>.overlay>.side-left
{
  -webkit-animation: sideleft-active .25s .0s 1 forwards;
  animation: sideleft-active .25s .0s 1 forwards;
}
.outbox.off>.overlay>.side-left
{
  -webkit-animation: sideleft-off .25s 0s 1 forwards;
  animation: sideleft-off .25s 0s 1 forwards;
}
@-webkit-keyframes sideleft-active
{
  from { -webkit-transform: translateX(-100%); }
  to { -webkit-transform: translateX(0vw); }
} 
@keyframes sideleft-active
{
  from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
  to { -webkit-transform: translateX(0); transform: translateX(0); }
}
@-webkit-keyframes sideleft-off
{
  from { -webkit-transform: translateX(0); }
  to { -webkit-transform: translateX(-100%); }
} 
@keyframes sideleft-off
{
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

.side-right
{
  height: 100%;
  min-width: 20vw;
  position: absolute;
  right: 0;
}
.outbox.active>.overlay>.side-right
{
  -webkit-animation: sideright-active .25s .0s 1 forwards;
  animation: sideright-active .25s .0s 1 forwards;
}
.outbox.off>.overlay>.side-right
{
  -webkit-animation: sideright-off .25s 0s 1 forwards;
  animation: sideright-off .25s 0s 1 forwards;
}
@-webkit-keyframes sideright-active
{
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(0); }
}
@keyframes sideright-active
{
  from { -webkit-transform: translateX(100%); transform: translateX(100%); }
  to { -webkit-transform: translateX(0); transform: translateX(0); }
}
@-webkit-keyframes sideright-off
{
  from { -webkit-transform: translateX(0%); }
  to { -webkit-transform: translateX(100%); }
}
@keyframes sideright-off
{
  from { -webkit-transform: translateX(0%); transform: translateX(0%); }
  to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

.side-top
{ 
  min-height: 20vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.outbox.active>.overlay>.side-top
{
  -webkit-animation: sidetop-active .2s linear 0s 1;
  animation: sidetop-active .2s linear 0s 1;
}
.outbox.off>.overlay>.side-top
{
  -webkit-animation: sidetop-off .2s linear 0s 1 forwards;
  animation: sidetop-off .2s linear 0s 1 forwards;
}
@-webkit-keyframes sidetop-active
{
  from { -webkit-transform: translateY(-100%); }
  to { -webkit-transform: translateY(0); }
}
@keyframes sidetop-active
{
  from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
  to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes sidetop-off
{
  from { -webkit-transform: translateY(0); }
  to { -webkit-transform: translateY(-100%); }
}
@keyframes sidetop-off
{
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

.side-bottom
{
  min-height: 20vh;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.outbox.active>.overlay>.side-bottom
{
  -webkit-animation: sidebottom-active .2s linear 0s 1;
  animation: sidebottom-active .2s linear 0s 1;
}
.outbox.off>.overlay>.side-bottom
{
  -webkit-animation: sidebottom-off .2s linear 0s 1 forwards;
  animation: sidebottom-off .2s linear 0s 1 forwards;
}
@-webkit-keyframes sidebottom-active
{
  from { -webkit-transform: translateY(100%); }
  to { -webkit-transform: translateY(0); }
}
@keyframes sidebottom-active
{
  from { -webkit-transform: translateY(100%); transform: translateY(100%); }
  to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes sidebottom-off
{
  from { -webkit-transform: translateY(0); }
  to { -webkit-transform: translateY(100%); }
}
@keyframes sidebottom-off
{
  from { -webkit-transform: translateY(0); transform: translateY(0); }
  to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

.side-center
{
  width: 1px;
  overflow: visible;
  margin: 0 auto;
}
.side-center>div:first-child
{
  margin: 0 auto;
  position: relative;
  transform: translateX(-50%);
}
.outbox.active>.overlay>.side-center
{
  -webkit-animation: sidecenter-active .2s .0s 1 forwards;
  animation: sidecenter-active .2s .0s 1 forwards;
}
.outbox.off>.overlay>.side-center
{
  -webkit-animation: sidecenter-off .2s 0s 1 forwards;
  animation: sidecenter-off .2s 0s 1 forwards;
}
@-webkit-keyframes sidecenter-active
{
  from { opacity: 0; -webkit-transform: scale(10); }
  to { opacity: 1; -webkit-transform: scale(1); }
}
@keyframes sidecenter-active
{
  from { opacity: 0; -webkit-transform: scale(1.5); transform: scale(1.5); }
  to { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
}
@-webkit-keyframes sidecenter-off
{
  from { opacity: 1; -webkit-transform: scale(1); }
  to { opacity: 0; -webkit-transform: scale(0.8); }
}
@keyframes sidecenter-off {
  from { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
  to { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); }
}

.vfxtransition-in,
.vfxtransition-out
{
  transition: all .25s .05s;
}
.vfxtop
{
  margin-top: 20vw;
}
.vfxbottom
{
  margin-top: -20vw;
}
.vfxleft
{
  margin-left: 20vw;
}
.vfxright
{
  margin-left: -20vw;
}


/*
//	Ui systems
*/


.clearized
{
  background: none !important;
  background-color: transparent !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.nobkg
{
  background: none !important;
  background-color: transparent !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.noradius,
.noradius>*
{
  border-radius: 0 !important;
}
.noborder
{
  border-color: transparent !important;
}
.noshadow
{
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}


/* Ui > general settings */

div[class*="button"]
{
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

div>span[class*="button"],
span[class*="button"]
{
  width: auto; 
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

[class*="button"]
{
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  vertical-align: middle;
  line-height: 100%;
}

[class*="button"],
[class*="button"]:focus,
[class*="button"] *,
[class*="button"]:focus *
{
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=search],
input[type=number]
{
  user-select:text;
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

[class*="button"]:not(.button-group)::after
{
  content: "\00a0";
  display: inline-block;
  height: 100%;
  width: 0;
}
[class*="button"]:not(.button-group) *
{
  color: inherit;
}

[class*="button"]>*
{
  height: 100%;
}

[class*="button-action"],
[class*="button-action"] *
{
  cursor: pointer;
}

/*
  obsolted, see next voice
  *[class^=button]:not(.button-group)>a
  {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    margin: 0 auto;
    line-height: 0;
    display: inline-grid;
    align-items: center;
    width: 100%;
  }
*/

input{ box-shadow:none;}

[class*="button"] label
{
  position: relative;
  height: 100%;
  padding: 0;
}
[class*="button"] label, label
{cursor: default;}


[class*="button"] input,
[class*="button"] button,
[class*="button"] select,
[class*="button"]>a
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: inherit;
  background: none;
  border:0;
  font-family:inherit;
  font-size:inherit;
  letter-spacing:inherit;
  color: inherit;

  -webkit-appearance: textfield;
  appearance:         textfield;
}
[class*="button"] select,
[class*="button"] input[type="number"]
{
  visibility: hidden;
  -moz-appearance: textfield;
}
[class*="button-text"] input[type="number"]
{
  visibility: visible;
}
[class*="button"] input[type="file"]
{
  opacity: 0;
  z-index: 1000;
}


[class*=button-text]:not(label),
textarea
{
  cursor: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

span[class*=button-text]>input[type=text]
{
  position: relative;
  margin: 0;
  line-height: 0;
  padding: 0;
}

input[type="time"],
input[type="date"]
{
  text-align: center;
  pointer-events: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* UI > before & after*/


p.before,
p.after
{
  display: inline;
  position: relative;
}
p.before
{
  text-align: left;
  float: left;
  /* width: 80%;
  left: 5%; */
}
p.after
{
  text-align: right;
  float: right;
  /* width: 80%;
  right: 5%; */
}


[class*="button"]>img:not(.before):not(.after),
[class*="button"]>img.center
{
  max-height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
[class*="button"]>img.before {

  max-height: 50%;
  position: absolute;
  left: 30px;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
}
[class*="button"]>img.after {
  max-height: 50%;
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  width: auto;
  height: 100%;
}


/* Ui > group */

[class*=button-group]
{
  white-space: nowrap;
  flex-direction: row;
  text-overflow: ellipsis;
  background: transparent;
  display: inline-flex;
  padding: 0;
}
[class*=button-group]:not(.setmobile)
{
  border: 0;
}

[class*=button-group]>*
{
  position: relative;
  width: auto;
}
[class*=button-group]>*:not(:first-child)
{
  border-left: 0;
}
[class*=button-group]>*:not(:first-child):not(:last-child)
{
  border-radius: 0;
}
[class*=button-group]>*:first-child
{
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
[class*=button-group]>*:last-child
{
  -webkit-border-top-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

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

    .setmobile
    {
      flex-wrap: wrap;
      overflow: hidden;
    }
    .setmobile>*
    {
      -webkit-border-radius: 0;
      border-radius: 0;
      width: 100%;
      border-top: 0;
      border-left: 0;
      border-right: 0;
    }
    .setmobile>*:last-child
    {
      border-bottom: 0;
    }

}
@media only screen and (min-width: 1000px)
{
  [class*=button-group].setmobile
  {
    border: 0;
  }
}


/* Ui > textarea*/

*>textarea,
textarea
{
  overflow-x: hidden;
  overflow-y: auto;
  vertical-align: top;
  text-align: left !important;
  width: 100%!important;
  max-width: 100%!important;
  min-width: 100%!important;
  height: auto;
  border: 0;
  background: transparent;
}

/* Ui > date*/

[class*=button-date] input
{
  visibility: none;
}
.datepicker
{
  cursor: pointer;

  overflow: hidden;
  position: relative;
  min-width: 300px;
  max-width: 90%;
  max-height: 90%;
  text-align: center;
}
.datepicker>div:nth-child(1),
.datepicker>div:nth-child(2),
.datepicker>div:nth-child(3)
{
  display: block;
  clear: both;
  min-height: 20px;
}


/* Ui > rage*/

[class*=button-range] .sliders,
[class*=button-range] .sliders::before
{
  width: 65%;
  margin: 0 auto;
}
[class*=button-range] .sliders
{
  height: 10px;
  position: relative;
}
[class*=button-range] .sliders::before
{
  content: "";
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}


[class*=button-range] input
{
  margin: 0;
  width: 100%;
  pointer-events: none;
  visibility: hidden;
}


[class*=button-range] b,
[class*=button-range] input+span
{
  display: block;
  position: absolute;
  margin: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

[class*=button-range] input+span
{
  z-index: 1;
  pointer-events: none;
}

[class*=button-range] b
{
  pointer-events: painted;
  cursor: pointer;
  z-index: 2;
  left: 0%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  border-radius: 50%;
}

[class*=button-range] .labels
{
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: absolute;
  width: 90%;
  height: 100%;
  top: 0;
}
[class*=button-range] .labels,
[class*=button-range] .labels *
{
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
[class*=button-range] .labels *:first-child
{
  text-align: left;
  -ms-flex-item-align: center;
  align-self: center;
}
[class*=button-range] .labels *:last-child
{
  text-align: right;
  -ms-flex-item-align: center;
  align-self: center;
}

[class*=button-range] .monitor
{
  display: inline-grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

[class*=button-range] .monitor.off
{
  -webkit-animation: monitor-close .400s forwards;
  animation: monitor-close .400s forwards;
}
@-webkit-keyframes monitor-close
{
    0%    { opacity: 1; }
    100%  { opacity: 0; }
}
@keyframes monitor-close
{
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.monitor.active
{
  -webkit-animation: monitor-open .25s forwards;
  animation: monitor-open .25s forwards;
}
@-webkit-keyframes monitor-open
{
    0%    { opacity: 0; }
    100%  { opacity: 1; }
}
@keyframes monitor-open
{
    0%    { opacity: 0; }
    100%  { opacity: 1; }
}

/* Ui > select */

[class*=button-select]
{
  text-align: left;
  cursor: pointer;
}
.selectorbox
{
  overflow: hidden;
  min-width: 300px;
  max-width: 90%;
  max-height: 90%;
}
.selectorbox>div:nth-child(2)
{
  max-height: 450px;
}

/* Ui > time*/

[class*=button-time] input
{
  -webkit-opacity:0;
  opacity: 0;
}

.timebox
{
  overflow: hidden;
  position: relative;
  min-width: 315px;
  max-width: 315px;
  max-height: 90%;
  text-align: center;
}

.clock
{
	position: relative;
	border-radius: 50%;
}
.clock .pm,
.clock .am
{
  cursor: pointer;
}
.clock .pivot
{
  position: absolute;
  margin-top: 50%;
  margin-left: 50%;
  width: 0px;
}

.display
{
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
	border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: center;
      align-self: center;
}
.display span
{
  margin: 0 auto;
}

[class*=rayline-]
{
	position: absolute;
	top: 50%;
	left: 50%;
	height: 0px;
	width: 50%;
	-webkit-transform-origin: center left;
}

[class*=rayline-]::after
{
  content: "\00a0";
  position: absolute;
  width: 0px;
  height: 0px;
	margin: 0;
  top:50%;
  transform: translateY(-50%);
  cursor: move;
  pointer-events:all;
}



/* Ui > number*/

[class*=button-number]
{
  position: relative;
  cursor: pointer;
}
span[class*=button-number]
{
  min-width: 130px;
}

[class*=button-number]>div
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
          align-items: center;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
  position: absolute;
  padding-left: 50%;
  left: 0;
}
[class*=button-number]>.mask>.slide
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* transition: transform .07s linear; edge fuck*/
  z-index: 1000
}
[class*=button-number]>.mask>.slide>[class*="number-"]
{
  position: relative;
}
[class*=button-number]>.mask>.slide>[class*="number-"]>span
{
  letter-spacing: 0px;
}

[class*=button-number]>a
{
  position: absolute;
  width: 20%;
  top: 50%;
  z-index: 1500;
  line-height: 0;
}
[class*=button-number] a:first-of-type
{
  left: 0%;
  text-align: left;
  transform: translate(0%, -50%);
}
[class*=button-number] a:last-of-type
{
  left: 100%;
  text-align: right;
  transform: translate(-100%, -50%);
}

/* Ui > file*/

.filelistbox
{
  overflow: hidden;
  min-width: 300px;
  max-width: 90%;
  max-height: 90%;
}

[class*=button-file] p,
[class*=button-file] input
{
  position: absolute;
  max-width: 100%;
  text-align: left;
  cursor: pointer;
  left: 0;
  padding: inherit;
}
[class*=button-file] input
{
  z-index: 1500;
}

[class*=button-file] p>a
{
  position: absolute;
  top: 0;
  right: 0;
  padding: inherit;
  color: inherit;
  z-index: 1500;
}

/* Ui > check & radio*/

[class*=button-checkbox],
[class*=button-radio]
{
  cursor: pointer;
  display: inline-block;
  position: relative;
  text-align: center;
}
[class*=button-checkbox]>input[type="checkbox"],
[class*=button-radio]>input[type="radio"]
{
  pointer-events: all;
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2000;
}
[class*=button-checkbox] *,
[class*=button-radio] *
{
  pointer-events: none;
  z-index: 1;
}
[class*=button-checkbox] span,
[class*=button-radio] span
{
  padding: 0;
  line-height: 0;
  position: absolute;
}
[class*=button-checkbox] span.after,
[class*=button-radio] span.after
{
  transform: translate(-100%, 0%);
  right: 0;
}
[class*=button-checkbox] span.before,
[class*=button-radio] span.before
{
  transform: translate(100%, 0%);
  left: 0;
}

[class*=button-checkbox] input[type="checkbox"]:checked+span,
[class*=button-radio] input[type="radio"]:checked+span
{
  background-color: #ccc;
}

[class*=button-checkbox] div,
[class*=button-radio] div
{
  position: absolute;
  width: 100%;
  left: 0;
  height: 100%;
  -webkit-border-radius: inherit;
  border-radius: inherit;
}

/*
*	nav
*/

nav.type-x>ul
{
  display: grid;
  grid-auto-flow: column;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}
nav.type-x>ul>li
{
  text-align: center;
}
nav.type-x>ul>li>a,
nav.type-y>ul>li>a
{
  z-index: 2000;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}
nav.type-x>ul>li>a *,
nav.type-y>ul>li>a *
{
  margin: 0 auto;
}

nav.type-y>ul
{
  display: grid;
  grid-auto-flow: row;
  padding: 0;
  margin: 0;
  list-style: none;
  height: 100%;
  width: 100%;
}
[class*="flange-"]
{
  position: absolute;
  z-index: 2500;
  visibility: hidden;
}
[class*="flange-"].active
{
  visibility: visible;
}
.flange-top
{
  left: 0%;
}
.flange-bottom
{
  left: 0%;
}
.flange-left
{
  left: 0;
  top: 0;
}
.flange-right
{
  left: 100%;
  top: 0;
}