@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

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

.sans {font-family: 'Open Sans', sans-serif;}

.main_panel h4 { font-size:22px; margin:30px 0 10px; }

.border:before,.border:after,.border span:before,.border span:after,.border button:before,.border button:after { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

#wrapper,.question .answers,.tribes span,#charm_modal{ -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; }

#wrapper.transitionOut { opacity:0;}

html,body { margin:0; padding:0; font-family: 'celtichandregular';  color:#fff; line-height:1.6em; }
body {overflow-y:auto;}
h1,h2,h3,h4,h5,.border {  letter-spacing:0.1em; }
.main_panel {display:-ms-flexbox!important; display:-webkit-flex!important; display:flex!important; align-items: center;  justify-content:center; flex-direction:column; min-height:100vh; max-width:1350px; margin:0 auto; padding:0; box-sizing:border-box;}
#particles-js { width:100vw; height:100vh; display:block; background:#000; position:fixed; z-index:-1; }
.particles-js-canvas-el { width:100vh!important; width:100vw!important;}

.main_panel > h2 { font-size:32px; margin-top:0;}
.main_panel > h1 { font-size:48px;}

.header { text-align:center;}

a.logout,a.back { position:fixed; bottom:-45px; font-size:18px!important; min-width:130px; text-align:center; }
a.logout:hover,a.back:hover { }
a.logout { right:-32px; }
a.back { left:-32px;}

.forgot { float:right; font-size:12px; opacity:.7; letter-spacing:0;}
.remember-box { display:block; clear:both; font-size:13px; letter-spacing:0;}
.remember-box input[type=checkbox] { margin:0 10px 0 0;}

.register-trigger,.login-trigger { display:block; text-align:center; margin:25px 0; font-size:16px;}

.login-pane,.register-pane { width:100%; max-width:340px; margin:0 auto; display:block;}
.login-pane h2,.register-pane h2 { text-align:center; display:block; margin-top:30px; font-size:22px;}
.login-pane input[type=text],input[type=password],.register-pane input[type=text],.register-pane input[type=email],.login-pane input[type=email] { background:none; border:none; color:#fff; border-bottom:solid 1px rgba(255,255,255,.4); width:100%; padding:10px 0; margin-bottom:10px;}
.login-pane ::placeholder, .register-pane ::placeholder { color:rgba(255,255,255,.6);}
.login-pane input,.register-pane input { outline:none!important;}
.login-pane .border:before,.login-pane .border:after,.register-pane .border:before,.register-pane .border:after { z-index:1;}
.login-pane .border button { z-index:5; background:#000;}
.login-pane .help-block,.register-pane .help-block { font-family: 'Open Sans', sans-serif; font-size:14px; letter-spacing:0; text-align:center; padding:5px; margin-bottom:10px; display:block; background-color:tomato; }
.login-pane .help-block strong { font-weight:normal;}

.main_panel .login-pane.card { width:450px;}
.login-pane .card-header.sans { text-align:center; margin-bottom:30px;}

.login-pane .alert {font-family: 'Open Sans', sans-serif; text-align:center; margin-bottom:20px;}

.buttons { display:-ms-flexbox!important; flex-wrap: wrap; display:-webkit-flex!important; display:flex!important; align-items: center;  justify-content:center; flex-direction:row; width:100%; margin:40px 0;}

.buttons a { font-size:24px; margin:0 30px;}

.top-bar { z-index:50; font-family: 'Open Sans', sans-serif; position:absolute; top:15px; right:15px;}

.top-bar a { display:inline-block; float:left; font-size:12px; opacity:.7; margin-left:20px; }
.top-bar a:hover { opacity:1;}
.top-bar .social img { width:25px; height:25px;}

a { color:#fff; text-decoration:none; }
a.button { font-size:22px;}

.border { background:#000; position:relative; padding:10px; margin:50px 0;   }
.border:before { position:absolute; top:-32px; left:0; right:0; content:""; margin:0 auto; display:block; border:solid 3px #fff; border-radius:50%; width:100px; height:100px; z-index:-1; }
.border:after { position:absolute; top:-36px; left:0; right:0; content:""; margin:0 auto; display:block; border:solid 1px #fff; border-radius:50%; width:112px; height:112px; z-index:-1; opacity:.7; }

.border:hover:after { height:120px; width:120px; top:-42px;}
.border:hover:before { height:90px; width:90px; top:-27px;}

.header.border { top:-25px; padding:30px 0; width:220px; background:none; font-size:38px; line-height:42px;}
.header.border:before { width:200px; height:200px;  top:-32px!important;}
.header.border:after { width:212px; height:212px; top:-36px!important;}

.border span,.border button { width:auto;  min-width:180px; display:block; text-align:center; }
.border span:before,.border span:after,.border button:before,.border button:after { margin:0 auto; content:""; display:block; height:1px; width:100%; box-sizing:border-box; position:absolute; left:0; right:0;
background: -webkit-linear-gradient(left, rgba(255,255,255,0),rgba(255,255,255,.7), rgba(255,255,255,0));
background: -o-linear-gradient(left, rgba(255,255,255,0),rgba(255,255,255,.7), rgba(255,255,255,0));
background: -moz-linear-gradient(left, rgba(255,255,255,0),rgba(255,255,255,.7), rgba(255,255,255,0));
background: linear-gradient(left, rgba(255,255,255,0),rgba(255,255,255,.7), rgba(255,255,255,0));
}
span.border { display:block; padding:0; }
span.border button {font-family: 'celtichandregular'; z-index:50; padding:10px 0; font-size:18px; position:relative; box-sizing:border-box; cursor:pointer; outline:none!important; margin:0 auto;}
.border button { background:none; color:#fff; display:block; border:none;}
.border span:before,.border button:before { top:0;}
.border span:after,.border button:after { bottom:0;}

.border:hover span:before,.border:hover button:before,.border:hover span:after,.border:hover button:after { width:80%;}

.description,.best { max-width:calc(100% - 300px); margin:0 auto;}

.login-pane,.register-pane { display:none;}
.login-pane.show,.register-pane.show { display:block;}

.home_clein { position:fixed; z-index:-1; bottom:-50px; left:0; right:0; width:200px; margin:0 auto; }
.result_clein { width:300px; margin-bottom:30px;}

.main_panel p a { text-decoration:underline;}

.border input { cursor:pointer;}

.embed-container { max-width:950px;display:block;position: relative;padding-bottom:54.66666667%;width: 100%;}
.embed-container iframe, .embed-container object, .embed-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.webinar_desc { text-align:center; margin-top:40px;}

.logo { text-align:center; width:300px; height:300px; margin:0 auto 40px;  display:block;border-radius:50%;}
.intro { max-width:850px; font-size:22px; line-height:1.4em; letter-spacing:0.1em; text-align:center; margin-bottom:30px;}
.tribes { display:-ms-flexbox!important; display:-webkit-flex!important; display:flex!important; align-items: center;  justify-content:space-around; flex-direction:row; width:100%; flex-wrap: wrap; margin:30px 0; }
.tribes img { height:300px; max-width:360px;}
.tribes span { width:25%; text-align:center;  opacity:1; margin-top:0;}
.tribes span h3 { font-size:22px;}
.blue { color:#0e74eb;}
.green { color:#5ebb47;}
.yellow { color:#fff62a;}
.red {color:#bd0000;}

.border.blue,.border.green,.border.yellow,.border.red { color:#fff;}
.border.blue:before,.border.blue:after { border-color:#0e74eb;}
.border.yellow:before,.border.yellow:after { border-color:#fff62a;}
.border.green:before,.border.green:after { border-color:#5ebb47;}
.border.red:before,.border.red:after { border-color:#bd0000;}

.inner.blue { background:#0e74eb; color:#fff;}
.inner.green { background:#5ebb47; color:#fff;}
.inner.yellow { background:#fff62a; color:#000;}
.inner.red {background:#bd0000; color:#fff;}


.transitionOut .tribes span { opacity:0; margin-top:30px;}
.transitionOut .tribes span:nth-child(1) {transition-delay: 0.5s;}
.transitionOut .tribes span:nth-child(2) {transition-delay: 1s;}
.transitionOut .tribes span:nth-child(3) {transition-delay: 1.5s;}
.transitionOut .tribes span:nth-child(4) {transition-delay: 2s;}

.question.first { opacity:1;}
.question.show { display:block;}
.question { opacity:0; display:none;  width:100%;  }
.question > h2 { text-align:center; max-width:1000px; min-height:60px; margin-bottom:0;}
.question .answers { margin:0 auto; width:100%; display:block; position:relative; }
.answers a { display:block; clear:both; clear-after:both; width:auto; text-align:center; font-size:18px; padding:0; position:relative; margin:90px auto; }

.answers a  span { width:auto; display:inline-block; position:relative; padding:10px 0; }
.result img { width:300px;}

.charms { text-align:center;}
.charms .holder { perspective: 1000px; margin:10px; width:25%; display:inline-block; text-align:center;}
.charms a { position:relative; width:300px; height:300px; display:inline-block;  border-radius:50%; text-align:center; margin:0; box-sizing:border-box; }
.charms .holder:hover a { transform: rotateY(180deg);  }
.charms a {  transition: transform 0.8s; transform-style: preserve-3d; }
.charms a .card-front,.charms a .card-back { display:block; -webkit-backface-visibility: hidden; backface-visibility: hidden; width:300px; height:300px; position:absolute; top:0; left:0; right:0;  border-radius:50%; overflow:hidden; }
.charms a .inner { position:relative; height:300px; width:300px; overflow:hidden; }
.charms a .card-front { }
.charms a .card-front.grey { opacity:.7 }
.charms a .card-back { transform: rotateY(180deg); background:#444;  }
.charms a .card-back .inner {display:-ms-flexbox!important; display:-webkit-flex!important; display:flex!important; align-items: center;  justify-content:space-around; flex-direction:row;}
.charms a .card-back .inner > div { padding:10px;}
.charms a:after { content:""; display:block; position:absolute; top:-14px; bottom:-14px; left:-14px; right:-14px; box-sizing:border-box; border:solid 1px rgba(255,255,255,.9); border-radius:50%; display:none; }
.charms a span { position:absolute; font-size:24px; letter-spacing:0.1em; display:none!important;}
.charms a span.name {display:inline-block; bottom:0; padding-bottom:5px;}
.charms a span.manx {display:inline-block; top:0; padding-top:5px;}
.charm-main { width:400px; max-width:90%; margin-top:30px;}



.notice { margin-top:30px;}

#charm_modal.on { opacity:1; visibility:visible; z-index:10;}
#charm_modal .border { background:none;}
#charm_modal { opacity:0; visibility:hidden; background:rgba(0,0,0,.8); display:-ms-flexbox!important; display:-webkit-flex!important; display:flex!important; align-items: center;  justify-content:center; flex-direction:row; position:fixed; top:0; bottom:0; left:0; right:0;}
#charm_modal.veritcle { flex-direction:column;}
#charm_modal a { margin:0 30px;}
#charm_modal a:before,#charm_modal a:after { display:none;}
#charm_modal a span { background:none!important;}
.charm_unlock { display:inline-block; z-index:2; }
.charm_unlock span { position:relative; z-index:5; padding:10px 0; background:#000; margin-top:-12px;  font-size:28px;}
.charm_unlock:before,.charm_unlock:after { z-index:0;}
.charm_submit span { font-size:28px; }

#charm_modal .embed-container { padding-bottom:40%;}

@media (max-width: 1200px) {
.charms .holder { width:30%; display:inline-block; margin:0; }
.charms a,.charms a .inner,.charms a .card-front, .charms a .card-back { width:30vw; height:30vw; }
}

@media (max-width: 767px) {

.charms .holder:hover a { transform: rotateY(0deg);  }

.login-pane input[type=text], input[type=password], .register-pane input[type=text], .register-pane input[type=email], .login-pane input[type=email]  {font-size:14px!important;}

.main_panel > h3 + h2 { margin-top:0; font-size:24px;}

a.logout, a.back { bottom:-35px; }

.clear_break { display:block; height:1px; clear:both;}

.home_clein { position:absolute; bottom:-60px; width:170px; z-index:inherit;}
.charm-main { margin-bottom:30px;}

.charm_unlock span { margin-top:0; font-size:18px;}

#charm_modal  { flex-direction:column; }
#charm_modal .border { margin:20px 0;}

body { font-size:14px; }
.main_panel h4 { font-size:18px; margin-top:0!important; padding:0 15px;}
.description, .best { max-width:calc(100% - 30px)}
.header.border { top:25px; margin-top:25px!important; }
a.logout, a.back { position:absolute;}
.main_panel { padding:30px 0; height:auto; min-height:100vh; padding-bottom:100px; position:relative; overflow:hidden;  }
.logo { max-width:70%; height:auto; margin:30px 0;}
.intro { font-size:16px; width:calc(100% - 50px)}
.buttons { margin:50px 0;}
.buttons a { font-size:20px; margin:20px 0 20px;  }
.border {padding-top:0;}
.border span, .border button { min-width:inherit; z-index:1; background:#000; position:relative; padding:10px 10px;}
.border:before,.border:after { z-index:0;}

.tribes { padding:0 20px; }
.tribes span { width:50%;}
.tribes img { height:130px;}
.tribes span h3 { font-size:18px;}
.main_panel > h2 { font-size:18px; margin-top:30px; text-align:center;}

.question > h2 { font-size:18px; margin-top:30px; max-width:calc(100% - 40px)}
.question .answers { width:calc(100% - 40px)}
.answers a span {font-size:16px; line-height:1.2em;}

.result .description, .result .best { line-height:18px; font-size:14px; width:calc(100% - 40px); margin:0 auto; }

.charms { width:100%;}
.charms a { border-width:3px;}
.charms a:after {top:-8px; bottom:-8px; left:-8px; right:-8px;}
.charms .holder { width:48%; display:inline-block; margin:0; float:none;}
.charms a { display:block; margin:0 auto;}
.charms a,.charms a .inner,.charms a .card-front, .charms a .card-back { width:48vw; height:48vw; }
.charms a span { font-size:14px;}

}