/*** **	Ossus.ch **/
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }

body { font-family: -apple-system, "Helvetica-Neue", Helvetica, Roboto, sans-serif; font-size: 1em; font-weight: 300; color: black; line-height: 1.6; background-color: white; }

h1, h2, h3, h4 { font-weight: 500; }

a { text-decoration: none; }

/** Layout */
#full { position: relative; min-height: 100%; padding: 0; -webkit-tap-highlight-color: transparent; background-color: white; background-image: -webkit-radial-gradient(white, white 50%, white 80%, #fafafa); background-image: radial-gradient(  white, white 50%, white 80%, #fafafa); }
@media screen and (min-width: 980px) { #full { background: url(../images/Ossus-1200.png) center center no-repeat; background-size: 40%; -webkit-transition: background-size 1s; -moz-transition: background-size 1s; transition: background-size 1s; }
  #full.blank { background-image: none; } }

#container { padding: 20px 15px; }
@media screen and (min-width: 980px) { #container { padding: 2em; } }

#content { max-width: 28em; margin: 0 auto; }

#circus-logo-190, #circus-logo-300 { display: none; position: absolute; top: 50%; left: 50%; -webkit-transition: top 1s; -moz-transition: top 1s; transition: top 1s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#circus-logo-190 { width: 190px; height: 66px; margin: -33px 0 0 -95px; }
#full.shown #circus-logo-190 { top: 73px; }
@media screen and (max-width: 460px) { #circus-logo-190 { display: block; } }
@media screen and (max-width: 460px) and (-webkit-max-device-pixel-ratio: 1.5) { #circus-logo-190 { background: url(../images/Ossus-190.png) center center no-repeat; } }
@media screen and (max-width: 460px) and (-webkit-min-device-pixel-ratio: 1.5) { #circus-logo-190 { background: url(../images/Ossus-190@2x.png) center center no-repeat; background-size: 190px 66px; } }

#circus-logo-300 { width: 300px; height: 94px; margin: -47px -150px; }
#full.shown #circus-logo-300 { top: 87px; }
@media screen and (min-width: 460px) and (max-width: 980px) { #circus-logo-300 { display: block; } }
@media screen and (min-width: 460px) and (max-width: 980px) and (-webkit-max-device-pixel-ratio: 1.5) { #circus-logo-300 { background: url(../images/Ossus-300.png) center center no-repeat; } }
@media screen and (min-width: 460px) and (max-width: 980px) and (-webkit-min-device-pixel-ratio: 1.5) { #circus-logo-300 { background: url(../images/Ossus-300@2x.png) center center no-repeat; background-size: 300px 94px; } }

#circus-wrap { display: none; margin: 0; padding: 167px 20px 20px; text-align: center; }
@media screen and (max-width: 460px) { #circus-wrap { padding-top: 123px; } }

#circus { display: inline-block; margin: 0; padding: 0; opacity: 0; -webkit-transition: opacity, 1s; -moz-transition: opacity, 1s; transition: opacity, 1s; cursor: pointer; list-style-type: none; }
@media screen and (min-width: 980px) { #circus { position: absolute; top: 50%; left: 50%; width: 560px; height: 560px; margin: -280px -280px; text-align: center; } }
#full.shown #circus { opacity: 1; cursor: default; }
#circus li { margin-top: 1.2em; text-align: left; }
@media screen and (min-width: 980px) { #circus li { position: absolute; width: 160px; height: 80px; text-align: center; } }
#circus li > a { font-size: 1.1em; color: black; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
@media screen and (min-width: 460px) { #circus li > a { font-size: 1.3em; } }
#circus li > a:hover { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
#circus li > a img { width: 25px; height: 25px; margin-right: 0.8em; border-radius: 4px; vertical-align: -20%; }
@media screen and (min-width: 460px) { #circus li > a img { width: 50px; height: 50px; border-radius: 8px; vertical-align: -50%; } }
@media screen and (min-width: 980px) { #circus li > a img { margin-right: 0; } }
@media screen and (min-width: 980px) { #circus li > a span { display: block; margin-top: 0.5em; } }

#full .detail { position: absolute; top: 42%; left: 50%; width: 280px; margin-left: -140px; text-align: center; }
#full .detail h1 { margin: 0 0 0.25em; padding: 0; text-align: center; }
@media screen and (max-width: 980px) { #full .detail { display: none; } }