/* CSS Dokument */

@import url('/assets/css/coco.min.css');
@import url('/assets/css/lightcase.css');
@import url('/assets/css/form.css');
@import url('/assets/css/floating.css');
@import url('/assets/css/slick.css');
@import url('/assets/css/slick-theme.css');

@font-face {
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Kanit-italic-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/assets/fonts/Kanit-200.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/Kanit-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ALLGEMEIN */

* { margin: 0; padding: 0; box-sizing: border-box!important; -webkit-box-sizing: border-box!important; outline: none; }
::selection { background: #98751e; color: #ffffff; /* WebKit/Blink Browsers */ }
::-moz-selection { background: #98751e; color: #ffffff; /* Gecko Browsers */ }

html          { font-family: 'Kanit', sans-serif; font-size: 16px; font-weight: 200; }

h1            { color: #dd0000; font-size: 2.75rem; font-weight: 200; line-height: 1; margin: 0 0 2rem; text-transform: uppercase; }
h1 span       { color: #eeeeee; font-size: 1.125rem; font-style: italic; font-weight: 500; }
h2            { font-size: 1.75rem; font-weight: 500; margin: 0 0 1.5rem; }
h3            { color: #dd0000; margin: 0 0 1rem; text-transform: uppercase; }
a             { color: #dd0000; display: inline-block; text-decoration: none; }
p             { font-size: 1.25rem; margin: 0 0 1rem; }
hr            { border: none; border-bottom: 1px solid #dd0000; }
img           { display: block; max-width: 100%; }
ul            { list-style: none; margin-bottom: 1.000rem; }
ul li         { list-style-type: disc; font-size: 1.25rem; margin-left: 0.938em; line-height: 1.8; }

.flex         { width: 100%; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: start; }
.flx-between  { justify-content: space-between; }
.content      { margin: 0 auto; max-width: 68rem; width: 96%; }
.space        { padding: 2rem; }

.centered     { text-align: center; }
.bold         { font-style: italic; font-weight: 500; letter-spacing: 1px; }
.colour        { color: #dd0000; font-size: 2rem; font-weight: 300; font-style: normal; }
.button       { background: #dd0000; color: #eeeeee; font-size: 1.125rem; font-weight: 500; margin: 0 0 2rem; min-width: 7rem; padding: 0.75rem 1rem; text-align: center; text-transform: uppercase; }

/*  Seitenstruktur */

#page         { height: 100vh; overflow: hidden; }
#sidebar      { background: url('/data/site/wr-back.jpg') center bottom; background-size: cover; color: #eeeeee; height: 100%; overflow: hidden; position: fixed; width: 38.2%; z-index: 0; }
#main         { background: #b4b4b4; border-left: 1rem solid #dd0000; box-shadow: 0 0 15px 10px #404040; min-height: 100%; position: absolute; right: 0; width: 61.8%; z-index: 10; }

#back-top			{ position: fixed; bottom: 0.5rem; z-index: 999; display: none; right: 1rem; }
#back-top a		{ background: #403969; color: #fff; display: inline-block; margin: 0 auto; padding: 0.5rem; text-align: center; transition: 0.5s all ease; }

header        { padding: 2rem 0 0; }

.logo         { padding: 3rem 3rem 1rem ; }
.magazine     { height: 100%; }
.cover        { margin: 0 auto; width: 85%; animation: float 5s ease-in-out infinite; }
.issue        { bottom: 1rem; color: #403969; position: absolute; }

.intro ,
.contact      { background: #b4b4b4; color: #343434; font-weight: 200; }
.dimensions,
.archive,
.policy       { background: #eeeeee; color: #343434; font-weight: 300; }

.archive .coverbox 						{ margin: 0.75rem 1%; width: 18%; display: block }
.archive .coverbox .cstatus		{ width: 100%; display: block; text-align: center; font-size: 1.000rem; }
.archive .coverbox .cstatus a	{ background: #403969; color: #fff; }
.archive .coverbox .cstatus a:hover	{ background: #dd0000; color: #fff; }
/*
.archive a    { margin: 0.75rem 1%; width: 18%; }
*/


.highlights   { margin: 1rem 0 2rem; }
.highlights a { margin: 0.75rem 0; width: 15%; }

footer        { background: #403969; color: #ffffff; }
footer a      { color: #eeeeee; margin: 0 auto; }

@media only screen and (max-width: 1024px) {
		.archive .coverbox 						{ width: 31%; }
	/*
		.archive a      { width: 31% !important; }
	*/
	}

@media only screen and (max-width: 820px) {
	
	h1              { font-size: 1.75rem; }
	h1 span         { font-size: 1rem; }
	
	#page           { height: auto; overflow: auto; }
	#sidebar        { position: relative; width: 100%; padding: 0 0 8rem; }
	#main           { border: none; position: relative; width: 100%; }
	

	.highlights a   { width: 30%; }
	
	}


@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}