/*
Theme Name: Frameland 2.0
Author: Bram Ruiter
Author URI: http://bramruiter.nl
Description: 
Version: 2.0

LIGHTyell	FDFAD8
BRIGHTyel	fff05a 
LINKEDpur	581EF6
SPOILERrd	F0215D

Frameland © 2018 Bram Ruiter
*/

/* MAIN */

* 				{ -webkit-font-smoothing: antialiased; }
body, html 			{ background: #fff; font-size: 1.1em; color: #222; font-family: "Roboto", sans-serif; margin: 0px; min-height: 100vh; }
.yellowtop			{ border-top: 10px solid #fff05a; margin: 0; position: fixed; width: 100vw; z-index: 100; diplay: block; }

div#wrap 			{ width: 100%; min-height: 100vh; display: inline-block; }

.cont-wrap			{ width: 70%; margin-left: 15%; display: inline-block; margin-top: 0%; }

a 				{ color: #222; text-decoration: none; }

p				{ line-height: 1.6em; font-size: 1.1em; text-align: left; letter-spacing: -0.009em; }

/* TEXT OPTIONS */

.category,
.belowtitle			{ margin: 0; }
	.timeago		{ opacity: 0.5; padding-right: 5px; }
	.author	a		{ font-weight: #222; }

.category			{ font-family: "Roboto Condensed", sans-serif; text-transform: uppercase; color: #581EF6; font-size: 1em; }
.cat-fest			{ height: 20px; }
.cat-fest img			{ height: 100%, width: 100%; }

.navigation			{ width: 100%; display: block; margin-top: 40px; font-size: 3em; }
.navigation a			{ transition: 0.2s; }
.navigation a:hover		{ opacity: 0.5; }
.nav-previous			{ float: left; }
.nav-next			{ float: right; }

.quote				{ font-size: 1em; line-height: 1.5em; margin-bottom: 25px; font-style: normal; border-left: 2px solid #fff05a; padding: 5px 30px; }
.footnum			{ vertical-align: super; font-style: normal; font-family: "Inconsolata"; font-size: 0.8em; padding-left: 3px; }
.footnote			{ position: absolute; line-height: 1.3em; width: 8%; font-size: 0.8em; margin-left: -10%; text-align: left; display: block; }
.footnote-num			{ font-style: normal; font-family: "Inconsolata"; font-size: 1em; width: 100%; display: block; padding-right: 25%; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px #fff05a solid; }
	
/* TITLES */

h1, h2, h3, h4			{ -webkit-margin-before: 0; -webkit-margin-after: 0; font-family: "Roboto Condensed", sans-serif; color: #222; font-weight: 700; }
h1 				{ font-size: 3em; line-height: 1em; margin: 10px 0; }
h2 				{ font-size: 2em; line-height: 1em; margin: 10px 0; }

h3	 			{ font-family: "Roboto Condensed", sans-serif; color: #222; font-size: 1.5em; line-height: 1em; font-weight: 700; }

h4	 			{ font-family: "Roboto Condensed", sans-serif; font-size: 1em; color: #222; font-weight: 400; padding-bottom: 10px; border-bottom: 2px #581EF6 solid; width: 100%; margin-bottom: 20px; }

/* HEADER */
	
header 				{ width: 100%; margin: 10px 0 50px 0; border-bottom: 1px #eee solid; font-size: 0.9em; }
header ul			{ list-style-type: none; -webkit-padding-start: 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em; }
header ul > li			{ display: inline-block; }

header li.header-logo		{ width: 15%; text-align: center; }
header li.header-logo img	{ width: 50px; vertical-align: middle; }
header li.header-logo a		{ transition: 0.2s; width: 100%; display: block; }
header li.header-logo a:hover	{ opacity: 0.5; }

header li.header-search		{ width: calc(15% - 1px); border-left: 1px solid #eee; }

header li.header-menu		{ width: calc(70% - 30px); text-align: left; border-left: 1px solid #eee; padding: 29px 0px 29px 20px; }
header li.header-menu a		{ transition: 0.2s; padding: 0px 10px 0 0px; }
header li.header-menu a:hover	{ opacity: 0.5; }

.mobile-head			{ display: none; }

/* SEARCHFORM */

input[type=text] {
    display: block;
    width: 100%; height: 100%;
    box-sizing: border-box;
	font-size: 1em;
    border: 0;
    border-radius: 0px;
    background-color: #fff;
    background-image: url('/img/icons/searchglass_222.png');
    background-position: 20px 30px; 
    background-repeat: no-repeat;
    background-size: 20px 20px;
    float: none;
    padding: 30px 0 30px 60px;
    -webkit-transition: width 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

input[type=text]:focus {
    	background-color: #eee;
	color: #000;
    	border: 0;
   	background-position: 20px 30px;
	outline-color: unset;
	outline-style: none;
	outline-width: 0px;
}

/* FRONTPAGE LAYOUT */


   /* COLLECT */

	.arch-entry a,
	.latest-rec-entry a	{ display: block; transition: 0.2s; padding: 20px; border-top-right-radius: 20px; }

	.rest-single a		{ display: flex; transition: 0.2s; padding: 20px; border-top-right-radius: 20px; }
	.top-single a		{ display: inline-block; transition: 0.2s; padding: 20px; border-top-right-radius: 20px; }

	.latest-rec-entry a:hover,
	.arch-entry a:hover,
	.top-single a:hover,
	.rest-single a:hover	{ height: 100%; background-color: #eee; }


	/* MAIN */

	.top			{ width: 100%; display: inline-block; margin-bottom: 50px; }

	.top-single		{ width: 65%; margin-left: 0%; display: inline-block; float: left; }

	.top-info		{ text-transform: uppercase; font-size: 1em; }

	.top-txt		{ width: 100%; display: block; }
	.top-excerpt		{ opacity: 0.5; }
	

	.top-img		{ float: none; width: 100%; transition: 0.2s; height: 100%; margin-bottom: 20px; }
	.top-img img		{ width: 100%; height: 100%; border-top-right-radius: 20px; }


   /* RECOMMENDATION */

	.latest-rec		{ width: 30%; display: inline-block; float:right; }
	.latest-rec-entry	{ width: 100%; display: block; }
	.latest-rec-entry img	{ width: 100%; height: 100%; padding-top: 10px; border-top-right-radius: 20px; }

	.latest-rec-title	{ font-family: "Roboto Condensed"; font-weight: 700; font-size: 1.2em; }
	.latest-rec-auth	{ opacity: 0.5; font-size: 1em; }

   /* BANNER */

	.banner			{ text-align: center; width: 100%; margin-bottom: 50px; }
	.banner img		{ height: 50px; }
	.banner a		{ background-image: linear-gradient(to bottom right, #fff05a, #581EF6); box-shadow: inset 0 0px 0 #fff05a; display: block; transition: 0.4s; padding: 30px; border-top-right-radius: 20px; }
	.banner a:hover		{ box-shadow: inset 0 -115px 0 #fff05a; }

   /* REST */

	.rest			{ width: 100%; margin-bottom: 30px; margin-top: 30px; }

	.rest-single		{ width: 100%; margin-left: 0%; display: inline-block; margin-bottom: 20px; }

	.rest-title		{ float: left; width: 36%; margin-right: 5%; }

	.rest-excerpt		{ float: left; width: 32%; margin-right: 0%; opacity: 0.5; margin-top: -1em; }

	.rest-img		{ float: left; width: 26%; height: 100%; margin-right: 5%; }
	.rest-img img		{ width: 100%; height: 100%; border-top-right-radius: 20px; }
	.rest-img-mobile	{display:none}	

  /* ARCH */

	.arch			{ width: calc(100% + 1%); display: inline-block; }
	.arch-entry		{ width: 24%; display: inline-block; vertical-align: top; }
	.arch-image img		{ width: 100%; height: 100%; padding-top: 10px; border-top-right-radius: 20px; }
	.arch-image		{ display: block; }
	.arch-image-mobile	{ display: none; }
	.arch-image-mobile img	{ width: 100%; height: 100%; padding-top: 10px; margin-bottom: 10px; border-top-right-radius: 20px; }

	.arch-title		{ font-family: "Roboto Condensed"; font-weight: 700; }
	.arch-info		{ font-size: 0.8em; }	

	.arch-top		{ font-family: "Roboto Condensed"; font-weight: 700; font-size: 2em; }
	.arch-meta		{ width: 40%; margin-bottom: 25px; text-align: left; opacity: 0.5; }

/* ARTICLE LAYOUT */

	.single			{ width: 70%; display: block; z-index: 50; margin: 0 0 50px 15%; }

	.single	a 		{ color: #581EF6; text-decoration: underline; transition: 0.2s; }
	.single a:hover 	{ opacity: 0.5; }

	.single-thumb 		{ margin: 50px 0 1em 0%; width: 100%; }
	.single-image		{ margin: 0%; width: 100%; }
	.single-thumb img,
	.single-image img	{ width: 100%; height: 100%; border-top-right-radius: 20px; }	

	.single-text-wrap	{ display: inline-block; width: 100%; }
	.single-text-l 		{ width: 45%; float: left;  }
	.single-text-r 		{ width: 45%; float: right;  }

	.single-image-long	{ margin-left: 0; width: 50%; height: 50%; background: #fff9bf; padding: 2% 25%;  }
	.single-image img	{ width: 100%; height: 100%; }

	.caption		{ margin-top: -1em; z-index: 0; font-size: 0.8em; margin-bottom: 25px; text-align: right; opacity: 0.5; }

	.single-image-abs-l	{ width: 45%; float: left; margin: 0 40px 20px -5%; }
	.single-image-abs-r	{ width: 45%; float: right; margin: 0 -5% 20px 40px; }
	
	.double-image-wrap	{ width: 100%; display: inline-block; margin-bottom: 30px; }
	.double-image-l		{ width: 49.5%; float: left; }
	.double-image-r		{ width: 49.5%; float: right; }

	.spoilers		{ padding: 10px; margin: 50px 0px; border: 2px solid #F0215D; border-radius: 5px; font-size: 0.8em; color: #F0215D; text-align: center; }
 
	.single-info		{ width: 100%; font-size: 0.8em; margin: 50px 0; line-height: 1.5em; border: 2px solid #eee; border-radius: 5px; text-align: center; padding: 20px 0; }

	.team-entry		{ border: 2px #eee solid; padding: 20px; margin-left: 0%; border-top-right-radius: 20px; width: calc(100% - 40px); margin-bottom: 50px; }
	.team-entry img		{ width: 100%; height: 100%; margin: 0 0 0 0; }

   /* RELATED */

	.crp_related 		{ width: 100%; display: inline-block; padding-bottom: 25px; } 
	.crp_related a		{ text-decoration: none; transition: 0.2s; color: #222; }
	.crp_related a:hover	{ display: block; }
	.crp_related ul		{ list-style-type: none; -webkit-padding-start: 0px; width: 103%; }
	.crp_related h3		{ font-family: "Roboto Condensed", sans-serif; color: #222; font-weight: 400; padding-bottom: 10px; border-bottom: 2px #eee solid; width: 100%; 	margin-bottom: 25px; }
	.crp_related li		{ float: left; width: 31%; padding-right: 2%; }
	.crp_title 		{ font-size: 1em; font-weight: 400; margin-top: 50px; margin-bottom: 50px; }
	.crp_thumb		{ width: 100%; height: 100%; }

/* AUTHOR */

	div.author		{ width: 100%; display: inline-block; border-top: 2px #f1f1f1 solid; padding-top: 50px; margin-top: 30px; }
	div.author-image	{ width: 15%; float: right; margin-left: 20px; }
	div.author-image img	{ width: 100%; border-radius: 50%; }
	div.author-profile	{ width: 50%; float: right; font-size: 0.8em; line-height: 1.3em; }

/* FOOTER */

	.footwrap 		{ display: inline-block; margin-left: 20px; padding: 50px 0; }
	.footwrap a		{ color: #222; text-decoration: underline; transition: 0.2s; }
	.footwrap a:hover	{ opacity: 0.5; }
	.footwrap img		{ height: 25px; }

/* IFRAME */

	.iframe-box 		{ position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
	.iframe 		{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	.iframe-caption		{ margin-top: 10px; z-index: 0; font-size: 0.8em; font-family: "Inconsolata", sans-serif; margin-bottom: 30px; text-align: right;  }

/* responsive */

@media only screen and (max-width: 1000px) {

	body			{ font-size: 1em; }
	header			{ display: block; }
	.cont-wrap		{ width: 80%; margin-left: 10%; display: inline-block; margin-top: 3%; }

	.arch-entry		{ width: 32%; display: inline-block; vertical-align: top; }

	header 			{ width: 100%; margin: 10px 0 50px 0; border-bottom: 1px #eee solid; font-size: 1em; }
	header ul > li		{ display: inline-block; }

	header li.header-logo	{ width: 10%; text-align: center;  }
	header li.header-search { width: 20%; margin-right: 0%; }
	header li.header-menu	{ width: calc(70% - 10px); border-left: 0px; font-size: 0.9em; vertical-align: middle; padding: 0;  }

	input[type=text] 	{ background-position: 20px 20px; padding: 20px 0 20px 60px; font-size: 0.8em; }
	input[type=text]:focus 	{ background-position: 20px 20px; }

	.top-left,
	.top-right		{ width: 100%; float:none; margin-left: 0; }
	.top-single,
	.latest-rec,
	.rest-single,
	.footwrap		{ width: 100%; float:none; margin-left: 0; margin-bottom: 50px; }

	.rest-single		{ display: inline-block; }
	.latest-rec-entry	{ margin-bottom: 20px; }
	.rest-title		{ float: none; width: 100%; margin-right: 0%; }
	.rest-excerpt		{ display: none; }
	.rest-img		{ display: none; }
	.rest-img-mobile	{ display: block; width: 100%; margin-bottom: 10px; }
	.rest-img-mobile img	{ width: 100%; height: 100%; border-top-right-radius: 20px; }
	.rest-single a		{ display: block; }

	.single			{ width: 100%; margin: 0; }
	.single-thumb 		{ margin: 50px 0 1em 0%; width: 100%; }
	.single-image		{ margin: 50px 0 0px 0%; width: 100%; }

	.belowtitle		{ margin-bottom: 20px; }
}

@media only screen and (max-width: 750px) {

	body			{ font-size: 0.9em; }
	.cont-wrap		{ width: 90%; margin-left: 5%; display: inline-block; margin-top: 3%; }

	header 			{ width: 100%; margin: 30px 0 50px 0%; border-bottom: 1px #eee solid; font-size: 1.1em; }
	header ul > li		{ display: inline-block; }

	header li.header-logo	{ width: 100%; text-align: center; margin-bottom: 15px; padding: 0; }
	header li.header-search { width: 100%; text-align: center; margin-bottom: 0px; margin-right: 0; padding: 0; }
	header li.header-menu	{ width: 100%; text-align: center; border-right: 0px; margin-bottom: 15px; margin-left: 0%; padding: 0; }

	input[type=text] 	{ background-position: 20px 15px; padding: 15px 0 15px 60px; }
	input[type=text]:focus 	{ background-position: 20px 15px; }

	.arch-image		{ display: none; }
	.arch-image-mobile	{ display: block; }
	.arch-entry		{ width: 100%; display: inline-block; margin-bottom: 30px; }
	.arch-title		{ font-size: 1.3em; padding-top: 10px; }
	.arch-info		{ font-size: 1em; padding-top: 10px; }
	.arch-meta		{ width: 100% }

	.top-left,
	.top-right		{ width: 100%; float:none; margin-left: 0; }
	.top-single,
	.latest-rec,
	.rest-single,
	.footwrap		{ width: 100%; float:none; margin-left: 0; margin-bottom: 50px; }

	.rest-single		{ display: inline-block; }
	.latest-rec-entry	{ margin-bottom: 20px; }
	.rest-title		{ float: none; width: 100%; margin-right: 0%; }
	.rest-excerpt		{ display: none; }
	.rest-img		{ display: none; }
	.rest-img-mobile	{ display: block; width: 100%; margin-bottom: 10px; }
	.rest-img-mobile img	{ width: 100%; height: 100%; border-top-right-radius: 20px; }
	.rest-single a		{ display: block; }

	.single			{ width: 100%; margin: 0; }
	.single-thumb 		{ margin: 50px 0 1em 0%; width: 100%; }
	.single-image		{ margin: 50px 0 0px 0%; width: 100%; }

	.banner img		{ height: 25px; }

	.belowtitle		{ margin-bottom: 20px; }

	.arch-entry a,
	.latest-rec-entry a,
	.rest-single a,
	.top-single a		{ padding: 0; }

	h1, h2			{ font-size: 1.5em; }
}