/* Fonts */
@font-face {
    font-family: 'canarobold';
    src: url('../font/canaro-bold-webfont.woff2') format('woff2'),
         url('../font/canaro-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'canarolight';
    src: url('../font/canaro-light-webfont.woff2') format('woff2'),
         url('../font/canaro-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'canarosemibold';
    src: url('../font/canaro-semibold-webfont.woff2') format('woff2'),
         url('../font/canaro-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Tags */
body { margin:0; padding: 0; font-family: 'canarosemibold', sans-serif; background: #0f062f; }

canvas { z-index: 0; width: 100%; height: 100% }

ul { list-style-type: none; }

a { text-decoration: none; }

/* Type */
.giant { font-family: 'canarobold', sans-serif; font-weight: bold; font-size: 1.875em; }
.huge { font-family: 'canarosemibold', sans-serif; font-weight: normal; font-size: 1.625em; margin-bottom: 0; }
.big { font-family: 'canarobold', sans-serif; font-weight: bold; font-size: 1em; }
.bigger { font-family: 'canarosemibold', sans-serif; font-weight: normal; font-size: 1.125em; }
.medium { font-family: 'canarosemibold', sans-serif; font-weight: normal; font-size: 0.875em; }
.lightmedium { font-family: 'canarolight', sans-serif; font-weight: 300; font-size: 0.875em; }

a { cursor: pointer; }

a.white:link, a.white:visited { color: #fff; }
a.white:hover, a.white:active { color: #ea5b0c ; }

a.orange:link, a.orange:visited { color: #ea5b0c; }
a.orange:hover, a.orange:active { color: #fff; }

.close { font-family: 'canarolight', sans-serif; font-weight: 300; font-size: 0.750em; }
.close:link, .close:visited { color: #fff; }
.close:hover, .close:active { color: #ea5b0c; }

/* Color */
.orange { color: #ea5b0c; }
.white { color: #fff; }
.wfade { color: rgba(255, 255, 255, 0.4); }
.transp { color: transparent; }
.galpgrd { background: -webkit-linear-gradient(left, #e63212 0%, #ea5a0c 50%, #f7a500 100%); background: -webkit-linear-gradient(left, #e63212 0%, #ea5a0c 50%, #f7a500 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Structure */
.topbar { position:fixed; left: 0; top: -100px; width: 100%; padding-top: 20px; padding-bottom: 20px; background: rgba(0,0,0,0.3); }
.topbar-inner { padding-top: 20px; padding-bottom: 20px; }
.topbar-mobile { postion: fixed; left: 0; top: 0; width: 100%; padding-top: 20px; padding-bottom: 20px; background: rgba(0,0,0,0.3); }

.column:first-child { padding-left: 40px; }
.column:last-child { padding-right: 40px; }

footer { position:fixed; left:0; bottom: -180px; width:100%; padding:40px 0; }
footer .column { height: inherit; }

.curtain { position: absolute; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background: rgba(15, 6, 47, 0.9); }

#starfield { opacity: 0; }

/* Elements */
/*start box */
.start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:100; text-align: center; }
.start img { width: 15%; }

/*lang dropdown*/
#langs { width:191px; display:inline-block;	text-align:right; vertical-align:top; margin:17px -2px 0 -2px; }

#langs>li {	text-transform:uppercase; border:1px solid transparent;	display:inline-block; margin:0 -2px; font-size:13px; vertical-align:top; color:white; }

#langs>li>a { padding:10px 25px; display:block; color: white; }

.dropdown { margin-bottom: 0; }
.dropdown ul { display: none; }

.dropit { list-style: none; padding: 0;	margin: 0; }
.dropit .dropit-trigger { position: relative; }
.dropit .dropit-submenu { position: absolute; top: 200%; right: 15px; z-index: 1000; display: none; min-width: 150px; list-style: none; padding: 0; margin: 0; }
.dropit .dropit-open .dropit-submenu { display: block; }

/*zoom slider*/
.zoom-container { position: absolute; right: 40px; top: 50%; height: 50%; width: 10px; transform: translateY(-60%); z-index: 1000; opacity: 0; }
svg path { width: 20px; height: 20px; margin: 0 0 20px 0; fill: #fff; }
#slider-vertical { height: 100%; position: relative; left: 9px; margin: 10px 0;}
.ui-slider-vertical { width: 1px; }
.ui-widget.ui-widget-content { border: none !important; }
.ui-corner-all { border-radius: none !important; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: none; background: #ea5b0c; border-radius: 50%; width: 10px; height: 10px; }
.ui-state-default:hover { cursor: pointer; }
.info { width: 20px; text-align: center; margin-top: 10px; }
.info svg:hover path { cursor: pointer; fill: #ea5b0c; }

/* fake star */
#star {  }
.star-box { position: absolute; left:50%; top: 50%; width: 100%; height: 100%; background:url(/apps/frontend/public/static/img/star.png) center center no-repeat; background-size: cover; transform: translate(-50%, -50%); z-index: 100; }
#star .close { position: absolute; top: 15%; left: 75%; z-index: 200; }
#star .star-caption { position: relative; left: 50%; top: 55%; transform: translate(-50%,-50%); width: 30%; height: 50%; }
.star-caption .star-message { text-align: center; color: #0f062f; font-size: 1em; font-family: 'canarolight', sans-serif; font-weight: 300; height: 70%; overflow: auto; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.star-caption .star-speaker { color: #0f062f; text-align:center; font-size: 1.5em; font-family: 'canarobold', sans-serif; font-weight: bold; margin: 5px 0; }
.star-caption .star-info { color: #0f062f; text-align:center; font-size; 0.750em; font-family: 'canarolight', sans-serif; font-weight: 300; }
.tilter * {
    pointer-events: none;
}

.tilter:hover,
.tilter:focus {
    color: #fff;
    outline: none;
}

.tilter__figure,
.tilter__image {
    margin: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.tilter__figure > * {
    transform: translateZ(0px);
}


/*external links*/
.links { padding-top: 70px; }
.links a { margin-right: 30px; }

/* sound icon */
.sound-control { padding-top: 100px; }
#sound-icon { cursor: pointer; }

/*star counter*/
.claim { text-align: center; }
.counter-container { font-family: 'canarolight', sans-serif; font-weight: 300; color: #fff; text-align: center; }
.digit {
	font-family: 'canarobold', sans-serif; font-weight: bold; position: relative; font-size: 3rem; font-weight: bold; background-color: rgba(0,0,0,0.5); color: #ea5b0c; line-height: 1; padding: 0 1.5rem; border-radius: 0.8rem; }
.digit:before { content: ''; display: block; background: black; opacity: 0.40; height: 1px; width: 100%; position: absolute; top: 50%; left: 0; }
.digit:after { content: ''; display: block; background: black; opacity: 0.30; height: 50%; width: 100%; position: absolute; top: 50%; left: 0; border-bottom-left-radius: 0.8rem; border-bottom-right-radius: 0.8rem; }

/*form*/
.form-container { margin-top: 20px; width: 33%; margin-left: 33%; }
.star-form .error { border: 1px solid #f00; }

input, textarea, select { width: 100%; font-family: 'canarolight', sans-serif; font-weight: 300; color: #fff; }
select, select option { background-color: #0e062f; }

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="submit"], button.cancel { font-family: 'canarobold', sans-serif; font-weight: bold; font-size: 12px; }
button.cancel { width: 28%; float: left; padding: 0; margin-right: 3%; }
input[type="submit"] { width: 69%; float: left; padding: 0; }
input[type="text"], input[type="email"], textarea { background: transparent; }
.cancel {background: #fff; color: #ea5b0c; border: none; }
.cancel:hover { background: #ea5b0c; color: #fff; border: none; }
input[type="submit"]{ background: #ea5b0c; color: #fff; border: none; }
input[type="submit"]:hover { background: #fff; color: #ea5b0c; border: none; }

.submit-success { margin-top: 20px; width: 33%; margin-left: 33%; text-align: center; }
button.short { width: 20%; float: none; }

/* Utils */
.center { text-align: center; }
.right { text-align: right; }

.m40 {margin-top: 40px;}
.m100 { margin-top: 100px; }

.hidden { display: none; }

#topbar, footer { display: none; }
#topbar-mobile, footer.mobile { display: block; }

html.loading { cursor: wait !important; }
html.loading:hover, html.loading:focus, html.loading * { cursor: wait !important; }

/* MQs */
@media (min-width: 768px) {
    #topbar, footer { display: block; }
    #topbar-mobile, footer.mobile { display: none; }
}