@font-face { font-family: 'acherusgrotesque-regular'; src: url("../fonts/acherusgrotesque-regular-webfont.woff2") format("woff2"), url("../fonts/acherusgrotesque-regular-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body { font-family: 'acherusgrotesque-regular',sans-serif; color: #999; background-color: white; height: 100vh; }

h1, h2, h3 { margin: 0; padding: 0; font-weight: normal; }

a { text-decoration: none; color: inherit; }

a:hover { color: #F5A9F2; transition: 1s; }

a:focus, a:active { color: #999; }

.fl { float: left; }

.fr { float: right; }

.container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; margin: 0 auto; width: 40vw; position: relative; height: 99vh; border: 2px solid #bbb; padding: 1% 1% 2% 1%; }

header { -webkit-box-flex: .25; -moz-box-flex: .25; width: 100%; height: 23%; -webkit-flex: .25; -ms-flex: .25; flex: .25; flex: .25; }

.border_box { border: 2px solid #bbb; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 52.5%; margin: -3% -2% 0; position: relative; }

.border_box.fl { padding: 2.5% 1% 0% 3%; margin-left: -3%; height: 100%; border-top: none; border-left: none; }

.border_box.fr { padding: 2.5% 3% 0 1%; margin-right: -3%; height: 100%; border-top: none; border-right: none; }

header .title_right, header .title_left { width: 100%; padding: 2%; border: 2px solid #bbb; border-bottom: none; height: 100%; }

header .title_left h1 { padding: 7% 0 0 3%; }

.title, h1 { font-size: 2.25em; line-height: 1.1em; }

header .title { text-align: right; position: absolute; right: 8%; bottom: 10%; }

.nav_container { -webkit-box-flex: .625; -moz-box-flex: .625; width: 100%; height: 59%; -webkit-flex: .625; -ms-flex: .625; flex: .625; flex-direction: column; color: #F5A9F2; margin: -.25% 0 -1.75%; }

.nav.fl, .nav.fr { border: 2px solid #bbb; flex-direction: column; width: 52.5%; height: 100%; margin: -1.5% -1.75% -4%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex: 1; border-bottom: none; }

.nav.fl { border-left: none; padding: 2% 2.5% 0% 3%; margin-left: -3%; }

.nav.fr { border-right: none; padding: 2% 3% 0% 2.5%; margin-right: -3%; }

nav .title { position: absolute; }

.left1 .title { width: 98%; top: 20%; text-align: center; }

.left2 .title, .left3 .title { bottom: 10%; right: 5%; color: #999; }

.right1 .title { bottom: 20%; left: 10%; }

.right2 .title { left: 12%; top: 10%; }

nav .border_box { height: 57%; width: 100%; margin: 0; padding: 2.5% 2.5% 2.5%; }

.color_box { position: relative; width: 100%; }

.left1, .right1 { position: relative; height: 100%; width: 100%; border: 2px solid #bbb; padding: 1%; }

.left2, .right2 { position: relative; height: 38%; border: 2px solid #bbb; width: 103%; }

.right2 { margin: 5% 0; margin-left: -3%; }

.left2 { margin: 5% 0 5% 0; }

.left1 a:hover, .right1 a:hover, .right2 a:hover { color: #999; }

.title_left h1 a:hover, .linkbox a:hover, .left2 a:hover { color: #F5A9F2; }

footer { border-top: 2px solid #bbb; margin: 0 -3%; padding-bottom: 0; -webkit-box-flex: .175; -moz-box-flex: .175; height: 15%; -webkit-flex: .175; -ms-flex: .175; flex: .175; }

.title_right { text-align: right; }

.linkbox { position: absolute; bottom: 11%; padding: 0; right: 6%; line-height: 1rem; background-color: white; font-size: .85rem; }

.linkbox p { padding: 0; margin: .65rem 0 0; }

.overlay { position: absolute; bottom: 98%; left: 1%; right: 0; overflow: hidden; width: 98%; height: 0; transition: .75s ease; }

.color_box:hover .overlay, .color_box:focus .overlay, .color_box:active .overlay { bottom: 1%; height: 96%; }

.color_box .touchBtn .text a { color: #999; }

.color_box.left1 .touchBtn .text a { color: #cacaca; }

.color_box.left1 .touchBtn { height: 100%; bottom: 0; background-color: #fc28fc; transition: .75s ease; }

.color_box.left2 .touchBtn { height: 100%; bottom: 0; background-color: #fffd38; transition: .75s ease; }

.color_box.left3 .touchBtn { height: 100%; bottom: 0; background-color: blue; transition: .75s ease; }

.color_box.right1 .touchBtn { height: 100%; bottom: 0; background-color: #2dfffe; transition: .75s ease; }

.color_box.right2 .touchBtn { height: 100%; bottom: 0; background-color: #85fd31; transition: .75s ease; }

.color_box.right4 .touchBtn { height: 94%; bottom: 0; background-color: transparent; transition: .75s ease; }

.color0 { background-color: white; }

.color1 { background-color: #ff50ff; }

.color2 { background-color: #fffd38; }

.color3 { background-color: #2dfffe; }

.color4 { background-color: #85fd31; }

.color5 { background-color: blue; }

.color6 { background-color: red; }

.text { color: white; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; font-size: 5vh; line-height: 1em; }

footer ul { float: left; margin: 0; }

.social { position: relative; width: 100%; height: 100%; font-size: 1.25em; }

.social div { position: absolute; }

.fb { top: 50%; left: 50%; }

.fb a:hover { color: #3c5a99; }

.sc { top: 30%; left: 5%; }

.sc a:hover { color: #ff7700; }

.yt { top: 15%; right: 5%; }

.yt a:hover { color: red; }

.ig { top: 95%; left: 28%; }

.ig a:hover { color: #833ab4; }

.infobox { position: absolute; bottom: -13%; right: 0; }

.infobox ul li { font-size: 1em; font-style: italic; font-family: times, serif; font-weight: lighter; text-align: right; padding: 0 1rem 0 0.5rem; }

.infobox ul li a { display: inline-block; width: 50px; text-align: center; }

.tooltip { position: relative; display: inline-block; line-height: 1em; }

.tooltip .ttext { visibility: hidden; width: 120px; background-color: #F5A9F2; color: #000; text-align: center; border-radius: 6px; padding: 5px 5px; position: absolute; z-index: 1; opacity: 0; transition: opacity 1s; }

.tooltip .ttext { width: 120px; bottom: 135%; left: 25%; margin-left: -60px; }

.tooltip:hover .ttext { visibility: visible; font-family: 'acherusgrotesque-regular',sans-serif; font-size: .75rem; opacity: 1; background-color: #FDEBFC; color: #999; }

.tooltip .ttext::after { content: ""; position: absolute; top: 100%; left: 64%; border-width: 5px; border-style: solid; border-color: #FDEBFC transparent transparent transparent; }
/*.socialwrapper {display: none;}*/
@media screen and (max-width: 1124px) { .container { width: 66vw; }
  .border_box { margin-top: -1.75%; }
  .border_box.fl, .nav.fl { margin-left: -1.75%; }
  .border_box.fr, .nav.fr { margin-right: -1.75%; }
  .border_box, .nav.fl, .nav.fr { width: 51.25%; }
  .nav_container { margin-top: 0.75%; }
  footer { margin: 0 -1.75%; } }

@media screen and (max-width: 1024px) { .infobox { bottom: -2.5%; }
  .ig { top: 85%; } }

@media screen and (max-width: 880px) { .container { width: 96vw; }
  .border_box, .nav.fl, .nav.fr { width: 50.5%; }
  .nav_container { margin-top: 0.75%; }
  .border_box.fl, .nav.fl { margin-left: -1%; }
  .border_box.fr, .nav.fr { margin-right: -1%; }
  .left2, .right2 { width: 102%; }
  .right2 { margin-left: -2%; }
  footer { margin: 0 -1.25%; } }

@media screen and (max-width: 630px) { header .title_left h1, header .title_right .title, nav .title { font-size: 1em; } }

@media screen and (max-width: 420px) { .container { width: 97vw; height: 97.5vh; padding-top: 1.5%; }
  nav, header, footer { font-size: 1.5rem; }
  footer ul li { font-size: 1rem; }
  header { min-height: 4.5em; }
  header .border_box.fl { padding: 2.5% 1.5% 0% 2%; }
  header .border_box.fr { padding: 2.5% 2% 0% 1.5%; }
  .color_box.right4 { position: absolute; height: 94%; width: 93%; }
  .nav_container { margin: 1% 0 0; }
  .nav.fl, .nav.fr { height: 101.5%; }
  .nav.fl { padding: 2% 1.5% 0% 3%; }
  .nav.fr { padding: 2% 2.25% 0% 2.5%; }
  nav .border_box { margin-left: -.75%; }
  .text { font-size: 3.65vh; }
  .sc { top: 25%; }
  .fb { top: 42.5%; }
  .ig { top: 77%; left: 23%; }
  .social { font-size: 4vw; }
  .social { background-color: white; width: 96%; margin: 0 auto; }
  footer { width: 103%; }
  footer ul { padding: 0; }
  .infobox ul li { padding: 0 0 0 1rem; }
  .left2, .right2 { padding: 0; width: 101%; }
  .right2 { margin: 5% 0% 5% -2%; }
  .left2 { margin: 5% 0 5% -1%; } }

@media screen and (max-width: 320px) { .linkbox { font-size: .75rem; line-height: .8rem; bottom: 2%; }
  .overlay { left: 2%; } }

@media screen and (max-width: 240px) { body { font-size: .9rem; }
  header .title_left h1, header .title_right .title, nav .title { font-size: 1rem; }
  .linkbox { font-size: 3.5vw; } }

@media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation: landscape) { .container { height: 250vh; } }