/* CSS Document */

@font-face {
    font-family: 'schulbuch';
    src: url('fonts/schulbuch.eot');
    src: url('fonts/schulbuch.eot') format('embedded-opentype'),
         url('fonts/schulbuch.woff2') format('woff2'),
         url('fonts/schulbuch.woff') format('woff'),
         url('fonts/schulbuch.ttf') format('truetype'),
         url('fonts/schulbuch.svg#schulbuch') format('svg');
	font-weight: normal;
}

@font-face {
    font-family: 'schulbuch';
    src: url('fonts/schulbuch_bold.eot');
    src: url('fonts/schulbuch_bold.eot') format('embedded-opentype'),
         url('fonts/schulbuch_bold.woff2') format('woff2'),
         url('fonts/schulbuch_bold.woff') format('woff'),
         url('fonts/schulbuch_bold.ttf') format('truetype'),
         url('fonts/schulbuch_bold.svg#schulbuch_bold') format('svg');
	font-weight: bold;
}

body    {
font-family: 'schulbuch';
font-kerning: normal;
font-weight: normal;
font-size:120%;
letter-spacing:0.01em;
color:#111;
background-color:#f6f6f6;
margin: 0px;
padding: 0px;
line-height:1.2;
width:100%;
height:100%;
}
@keyframes wheelHueColor {
    from, to { color: rgb(255,0,0); }
    20%      { color: rgb(255,255,0); }
    40%      { color: rgb(0,255,0); }
    60%      { color: rgb(0,255,255); }
    80%      { color: rgb(255,0,255); }
}
.colour-text {
color: rgb(255,0,0);
animation: wheelHueColor 10s infinite;
}
a:link {
text-decoration:underline;
color:#111;
}
a:visited {
text-decoration:none;
color:#111;
}
a:hover {
text-decoration:none;
color:#111;
}
a:active {
font-weight:none;
color:#111;
}
.canvas {
width:100%;
padding-bottom:0px;
margin:0px;
position:absolute;
overflow-x:hidden;
}
.header {
position:fixed;
text-align:center;
top:20px;
left:20px;
right:20px;
z-index:100;
}
.footer {
position:absolute;
text-align:left;
bottom:20px;
left:20px;
right:20px;
}
.topleft {
position:fixed;
top:20px;
left:20px;
right:20px;
z-index:100;
}
.frame {	
column-count:1;
column-gap:0em;
max-width:100%;
top:20px;
}
.image {
background-color: none;
max-width:1000px;
padding: 0 20px 20px 20px;
}
.about-text {
background-color:none;
text-align:left;
left:20px;
padding:10px 20px 40px 20px;
max-width:1000px;
}
.btn {
color:#fff;
border:none;
padding: 6px 12px;
cursor: pointer;
font-family: 'schulbuch';
font-size:1em;
display: inline-block;
background:#111;
border-radius:10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.btn:hover {
color:#111;
background:#f4fc37;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.item {
display: inline-block;
background: none;
width:100%;
height:100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.item .text-box {
text-align:left;
padding:10px 20px 10px 10px;
}
.item .text-front {
text-align:left;
padding:10px 10px 20px 0px;
max-width:88%;
}
img, iframe {
max-width: 100%;
height: auto;
display: block;
}
img.center {
margin-left: auto;
margin-right: auto;
}
.space {
background-color: none;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
margin-bottom: 60px;
max-width:1000px;
}

/* OLD */
.display-container {
position:relative;
}
.text-container {
position:absolute;
background-color:#fff;
padding-top:6px;
padding-bottom:6px;
padding-left:20px;
padding-right:12px;
bottom:0px;
left:0px;
right:0px;
}
/* /OLD */

@keyframes wheelHueColor {
    from, to { color: rgb(255,0,0); }
    20%      { color: rgb(255,255,0); }
    40%      { color: rgb(0,255,0); }
    60%      { color: rgb(0,255,255); }
    80%      { color: rgb(255,0,255); }
}
.shop {
color: rgb(255,0,0);
animation: wheelHueColor 10s infinite;
}

/* media */
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
body {-webkit-text-size-adjust: none;}
body    {
font-size:1.4em;
}
.masonry {
column-count:1;
column-gap:0em;
max-width:100%;
margin: 820px auto 0px auto;
padding-bottom:40px;
}
.item {
padding:20px;
}
.text-box {
font-size:40%;
margin-left:0px;
margin-right:0px;
}
.text-front {
font-size:80%;
margin-left:0px;
margin-right:0px;
}
.space {
margin-top:120px;		
}
}

@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */
body {-webkit-text-size-adjust: none;}
body    {
font-size:1.6em;
}
.masonry {
column-count:1;
column-gap: 0em;
max-width: 100%;
margin: 720px auto 0px auto;
padding-bottom:40px;
}
.item {
padding:20px;
}
.text-box {
font-size:40%;
margin-left:0px;
}
.text-front {
font-size:60%;
margin-left:0px;
}
.space {
margin-top:120px;		
}
}

@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
body {-webkit-text-size-adjust: none;}
body    {
font-size:1.8em;
}
.masonry {
column-count:1;
column-gap: 0em;
max-width: 100%;
margin: 620px auto 0px auto;
padding-bottom:40px;
}
.item {
padding:20px;
}
.text-box {
font-size:40%;
margin-left:0px;
}
.text-front {
font-size:60%;
margin-left:0px;
}
.space {
margin-top:140px;
}
}
	
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
body {-webkit-text-size-adjust: none;}
body    {
font-size:1.8em;
}
.masonry {
column-count:2;
column-gap: 0em;
max-width: 100%;
margin: 520px auto 0px auto;
padding-bottom:40px;
}
.item {
padding:20px;
}
.text-box {
font-size:40%;
margin-left:0px;
}
.text-front {
font-size:60%;
margin-left:0px;
}
.space {
margin-top:140px;		
}
}

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
body {-webkit-text-size-adjust: none;}
body    {
font-size:2em;
}
.masonry {
column-count:2;
column-gap: 0em;
max-width: 100%;
margin: 420px auto 0px auto;
padding-bottom:40px;
}
.item {
padding:20px;
}
.text-box {
font-size:40%;
}
.text-front {
font-size:60%;
}
.space {
margin-top:140px;		
}
}

@media (min-width:1281px) { /* hi-res laptops and desktops */
body {-webkit-text-size-adjust: none;}
body    {
font-size:2em;
}
.masonry {
column-count:2;
column-gap: 0em;
max-width: 100%;
margin: 450px auto 0px auto;
padding-bottom:40px;
}
.column {
background-color:#111;
position:fixed;
column-count:1;
column-gap:0em;
max-width:10%;
top:0;
right:0;
overflow:auto;
z-index:100;
}
.item {
padding:20px;
}
.text-box {
font-size:40%;
}
.text-front {
font-size:60%;
}	
.space {
margin-top:140px;		
}
}

/* /media */