/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,a,abbr,acronym,address,big,cite,code,del,
dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,
sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,
label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
html,
body {
  height: 100%;
}
body {
  line-height: 1;
  background-color: #000;
  /*max-height:100vh;overflow:hidden;*/
  font-family: "cofo-gothic-variable", sans-serif;
  font-variation-settings: "wght" 400;
  font-size:24px;line-height:1.3em
}
.resizeimg {height:auto;max-width:100%}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

.caps {text-transform: uppercase;letter-spacing: 0.01em;}
a {color:#E187B8}
b, .bold {font-variation-settings: "wght" 700;}
.mob {display:none}
p {margin-bottom:16px}


h1 {font-weight: normal;font-size:32px;line-height:1.3em;margin-bottom: 2vw;}

.animatein {visibility: hidden;}

.pageholder {position: relative;width:100%;overflow-x:hidden}
.pageintro {position:relative;width:100vw;height:auto;display:flex;justify-content: center;align-items: center;overflow-x:hidden}

.videocontainer {position: absolute;top:0;left:0;width:100vw;height:100%}
.videocontainer video, .tables video {position:absolute;top:0;left:0;width:100vw;height:100%;object-fit:cover;object-position: 50% 50%;}
.tables video {width:100%}
.logolinks {position:absolute;top:0;left:0;box-sizing: border-box;padding:2vw;width:100%;display: flex;justify-content: space-between;height:calc(60px + 4vw);z-index:2000;align-items: center;}
.logolink {width:100px;height:40px;background: top left no-repeat;background-size:contain;}
.leftlogos {display:flex;align-items: flex-start;flex:1 1 75%;justify-content: flex-end;align-items: center;}
.ikonlogo {font-size:12px;line-height:1em;text-align: center;color:#fff;display:flex;flex-direction: column;align-items: center;height:60px;justify-content: center;padding-left:1rem;border-left:1px solid #fff;margin-left: 1rem;}
.ikonlogo p {margin-bottom:8px}
.ikonlogo a {display:block;height:25px}

.buttonlinks {position:absolute;bottom:5vw;left:0;width:100%;display:flex;justify-content: center;}
.buttonlinks a {margin:0 2.5vw}

.buttonlink {color: #fff;text-decoration: none;display: flex;
padding: 15px 40px;justify-content: center;align-items: center;background: rgba(255, 127, 221, 0.28);font-variation-settings: "wght" 500;position:relative;border:1px solid #5F4DA0}

.logoholder {position:relative;flex:0 0 100vw;max-width:100vw;text-align: center;display: flex;justify-content: center;}
.logo {background:50% 50% no-repeat url(/img/content/logo.svg);height:50vh;width:48vw;margin:0 1vw}
.refraction {flex:0 0 2.5vw;overflow: hidden;box-sizing: border-box;}
.refraction .logo {margin:0;flex:0 0 48vw}
.refraction.left1 {padding-left:0.8vw}
.refraction.left2 {padding-left:1.4vw}
.refraction.left3 {padding-left:2vw}
.refraction.right1, .refraction.right2, .refraction.right3 {display:flex;justify-content: flex-end;}
.refraction.right1 {padding-right:0.8vw}
.refraction.right2 {padding-right:1.4vw}
.refraction.right3 {padding-right:2vw}

.glass {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  /*border-radius: 2rem;*/
  box-shadow: /*0 8px 32px rgba(31, 38, 135, 0.2), */
              inset 0 4px 20px rgba(255, 255, 255, 0.3);
}
.glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  /*border-radius: 10px;*/
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
              inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  /*filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);*/
}

.glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 200%;
  height: 100%;
  background: linear-gradient(120deg,
              rgba(255,255,255,0) 30%,
              rgba(255,255,255,0.4) 50%,
              rgba(255,255,255,0) 70%);
  transform: skewX(-20deg);
}
.glass:hover {text-decoration: underline;}
.glass:hover::before {
  left: 100%;
  opacity:0;
  transition: left 0.8s ease, opacity 0.8s;
}

.linebuttons {display:flex;justify-content: space-between;position: relative;}
.linebuttons:before {content:'';position:absolute;top:50%;left:0;width:100%;height:1px;background:#fff;z-index:1}
.linebuttons a {position:relative;z-index:10;border-color:#fff;background:#F15B4A;padding:2rem;width:40%;box-sizing: border-box;transition:background 0.5s}
.linebuttons a.videobutton {background:#FF7FDD;}
.linebuttons a:hover {background:#FFB766}


.pagebody {background:#3F43AE;color:#fff;text-align:center}
.pagesection {padding:5vw 0;position:relative}
.pagesection.sponsorship {padding:0 5vw 5vw 5vw}
.borderbottom {border-bottom:1px solid #E187B8}
.tables {padding:5vw 15vw}
.tables:before {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,127,221,0.5);z-index:1;mix-blend-mode: multiply;}
.tables h1, .tables div {position: relative;z-index:20}

.tableselect {background:#fff;color:#5F4DA0;display:inline-flex;flex-direction:row;font-size:18px;line-height:1.3em;padding:1vw;justify-content: center;}
.tableselect .tabletype {margin:1vw 2vw;display:flex;flex-direction: column;align-items: center;}
.tablehead {display:flex;align-items:center;justify-content: center;width:15vw;height:15vw;border-radius: 50%;font-size:32px;background:50% 50% no-repeat;background-size: cover;color:#fff;margin-bottom:24px}
.tablehead p {margin-bottom:24px}
.gold .tablehead {background-image: url(/img/content/bgs/gold.png);}
.silver .tablehead {background-image: url(/img/content/bgs/silver.png);}
.bronze .tablehead {background-image: url(/img/content/bgs/bronze.png);}
.tableselect .buttonlink.glass {background-color:#F15B4A}

.soldout {opacity:0.25;pointer-events: none;}

.footer {padding:2.5vw;box-sizing: border-box;width:100%;display:flex;justify-content: space-between;background:#3F43AE}
.footer a {margin:0;flex:140px 0 0}

@media (max-aspect-ratio: 1/1) {
  /* styles apply when viewport is narrower than a square */
  .refraction {display: none !important;}
  .logo {background-image: url(/img/content/logomob.svg);flex:0 0 75vw}
  
  
}


@media (min-width: 2200px) {
  
}

/* biggest desktop */
@media only screen and (max-width: 1420px) {
  
}

@media only screen and (max-width: 1160px) {
  body, .tableselect {font-size:16px;line-height:1.3em}
  .tableselect .tabletype {margin:2vw}
  h1 {font-size:26px;line-height:1.3em}
  .tablehead {width:16vw;height:16vw}
}



/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
  h1 {margin-bottom:20px}
  .tables {padding:5vw}
  .tablehead {width:24vw;height:24vw;font-size:26px}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
  .mob {display:block;}
  
  .buttonlinks {flex-direction: column;align-items: center;}
  .buttonlinks a {width:80vw;margin-top:20px;box-sizing: border-box;}
  .footer {padding:5vw}
  
  .tables {padding:10vw 5vw}
  .tableselect {flex-direction: column;display:flex;margin:0 5vw;width:90vw;box-sizing: border-box;}
  .tableselect .tabletype {margin:20px 0}
  .tablehead {width:160px;height:160px}
  
  .pagesection {padding:15vw 0}
  
  /*.logolink {width:80px;height:32px}*/
  .logolink {width:65px;height:26px}
  
  .linebuttons a {padding:1rem 2rem}
}