/*
Theme Name:		Duckgraphy_test
Theme URI: 		http://ph-klein.net/

Author: 		Philipp Klein
Author URI: 	http://ph-klein.net/

Description: 	Couldn't find a theme I like, so I started making one myself
Version: 		0.0.0.2


License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html

All files, unless otherwise stated, are released under the GNU General Public License
version 3.0 (http://www.gnu.org/licenses/gpl-3.0.html)
==================================================*/

/* ==== Table of Contents ====
 * ---------------------------
 *     CSS_01 - Browser Reset
 *         - Browser rest (not sure of ti is needed)
 *
 *     CSS_02 - Header
 *         - Styling of the header slideshow
 *
 *     CSS_03 - Section Setup
 *     CSS_03a - Section Header
 *     CSS_03b - Section Posts
 */

/* ===========================================================================
 *     CSS_01 - Browser Reset
 * ===========================================================================
 *
 * Credits:
 *
 * http://meyerweb.com/eric/tools/css/reset/ 
 * v2.0 | 20110126
 * License: none (public domain) */
html, body, div, span, applet, 
object, iframe,h1, h2, h3, h4, h5, h6, p, 
blockquote, pre,a, abbr, acronym, address, 
big, cite, code,del, dfn, em, img, ins, kbd, q, 
s, samp,small, strike, strong, sub, sup, tt, var,b, u, 
center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, 
caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, 
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 14px;	
    font-family: Verdana, Geneva, sans-serif;	vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}
body {	line-height: 1;}
ol, ul {	list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}
table {	border-collapse: collapse;	border-spacing: 0;}

@media all and (min-width: 960px) {
    body{
        font-size: 18px;
    }
}
 
@media all and (max-width: 959px) and (min-width: 600px) {
    body{
        font-size: 16px;
    }
}
 
@media all and (max-width: 599px) and (min-width: 320px) {
    body{
        font-size: 12px;
    }
 
}


/* ===========================================================================
 *     CSS_02 - Header Section                                         
 * ===========================================================================
 * Header and Footer bar                                                    */
#header{position:fixed; left:0; top:0;}
#footer{position:fixed; left:0;	bottom:0;}
.overlay-bar{height : 48px; width : 100vw; background-color : #111; z-index:99999; display:flex;}
.overlay-bar > i{color:#ddd; font-weight:900; font-family:"FontAwsome";}

/* Side Navigation Menu                                                     */
.sidenav { height: calc(100% - 96px); width: 0; position: fixed; z-index: 10; top: 48px; left: 0; background-color: #111; overflow-x: hidden;
           transition: 0.5s; padding-top: 60px;}
.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s;}
.sidenav a:hover { color: #f1f1f1;}
.sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px;}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* ===========================================================================
 *     CSS_03 - Customizations for FullPage.js
 *
 * Credits: Luka Cavka
 * Found on https://slicejack.com/fullpage-js-slide-fade-effect/
 * ===========================================================================
 *
 * Section fade Effect                                                      */
.fullpage-wrapper {	width: 100%!important; transform: none!important;}
.fp-section { width: 100%!important; position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; z-index: 0; transition: all .7s ease-in-out;}
.fp-section.active { visibility: visible; opacity: 1; z-index: 1;}

/* Slide fade Effect                                                        */
.fp-slidesContainer {width: 100%!important;	transform: none!important;}
.fp-slide {	width: 100%!important;	position: absolute;	left: 0; top: 0;	visibility: hidden;	opacity: 0;	z-index: 0;	transition: all .7s ease-in-out;}
.fp-slide.active {	visibility: visible;	opacity: 1;	z-index: 1;
}
 
.site-header{
    height:100vh;
    width: 100vw;
}

#header-slideshow{
    height:100%;
    width: 100%;
    position: relative;
	padding-top:48px;
	padding-bottom:48px;
}
#fullpage{top:0;}



.header-text{
    z-index:2;
    position:absolute;
    display: block;
    top: 10%;
    left:5%;
    transform: translate(0%, 0%);
    background-color: rgba(32,32,32,0.4);
    padding: 20px;
    border-style: solid;
    border-width: medium;
    border-color: rgba(32,32,32,0.6);
    border-radius: 5px;
}
.blog-name{

    color: white;
    font-size: 7vw;
    

}
.blog-description{

    color:white;
    font-size:2vw;
    padding-top: 1vw;
}

.icon{
    color: #ddd;  
}


.header-slide{
    height:100%;
    width: 100%;

    object-fit: cover;
	transition: all 1s ease;
	position:relative;
	display: block;
	z-index:1;
}

.direction-button{
    z-index: 3;
    position:absolute;
    display: block;
    height:10vh;
    width: 5vw; 
}
.direction-button > i{
    color: #222;  
        height:10vh;
    width: 5vw;
}

.slideshow-left{
    top: 50%;
    left:0%;
    transform: translate(0%, 0%);
    height:10vh;
    width: 5vw;
}
.slideshow-right{
    top: 50%;
    left:100%;
    transform: translate(-100%, 0%);
}


/* CSS_03 - Section Setup --- */
/* Make a section cover the full viewport area */
.post-area{
	height :100%;
	width : 100%;
	position:relative;
	display: grid;
	padding-top:48px;
	padding-bottom:48px;

}

.category-section{
    height:100vh;
    width:100vw;
}



/* Grid stuff */


.section-grid-item1{grid-area: section-grid-item1;}
.section-grid-item2{grid-area: section-grid-item2;}
.section-grid-item3{grid-area: section-grid-item3;}
.section-grid-item4{grid-area: section-grid-item4;}
.section-grid-item5{grid-area: section-grid-item5;}
.section-grid-item6{grid-area: section-grid-item6;}
.section-grid-item7{grid-area: section-grid-item7;}
.section-grid-item8{grid-area: section-grid-item8;}

/* Define layouts for Post Area Grid 
 *    Layout is based on how many pictures are displayed
 */
/* ONE picture */
@media only screen and (orientation: landscape) {
	.post-area-1{
			grid-template-areas: 	"section-grid-item1 section-grid-item1 section-grid-item1 section-grid-item1" 
									"section-grid-item1 section-grid-item1 section-grid-item1 section-grid-item1";
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr;
	}
}
@media only screen and (orientation: portrait) {
	.post-area-1{
			grid-template-areas: 	"section-grid-item1 section-grid-item1"
			                        "section-grid-item1 section-grid-item1"
									"section-grid-item1 section-grid-item1"
									"section-grid-item1 section-grid-item1";
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr 1fr;
	}
}
/* TWO picture */
@media only screen and (orientation: landscape) {
	.post-area-2{
			grid-template-areas: 	"section-grid-item1 section-grid-item1 section-grid-item2 section-grid-item2" 
									"section-grid-item1 section-grid-item1 section-grid-item2 section-grid-item2";
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr;
	}
}
@media only screen and (orientation: portrait) {
	.post-area-2{
			grid-template-areas: 	"section-grid-item1 section-grid-item1"
			                        "section-grid-item1 section-grid-item1"
									"section-grid-item2 section-grid-item2"
									"section-grid-item2 section-grid-item2";
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr 1fr;
	}
}
/* THREE picture */
@media only screen and (orientation: landscape) {
	.post-area-3{
			grid-template-areas: 	"section-grid-item1 section-grid-item1 section-grid-item2 section-grid-item2" 
									"section-grid-item1 section-grid-item1 section-grid-item3 section-grid-item3";
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr;
	}
}
@media only screen and (orientation: portrait) {
	.post-area-3{
			grid-template-areas: 	"section-grid-item1 section-grid-item1"
			                        "section-grid-item1 section-grid-item1"
									"section-grid-item3 section-grid-item2"
									"section-grid-item3 section-grid-item2";
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr 1fr;
	}
}
/* FOUR picture */
@media only screen and (orientation: landscape) {
	.post-area-4{
			grid-template-areas: 	"section-grid-item1 section-grid-item1 section-grid-item2 section-grid-item2" 
									"section-grid-item3 section-grid-item3 section-grid-item4 section-grid-item4";
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr;
	}
}
@media only screen and (orientation: portrait) {
	.post-area-4{
			grid-template-areas: 	"section-grid-item1 section-grid-item2"
			                        "section-grid-item1 section-grid-item2"
									"section-grid-item3 section-grid-item4"
									"section-grid-item3 section-grid-item4";
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr 1fr;
	}
}
/* FIVE picture */
@media only screen and (orientation: landscape) {
	.post-area-5{
			grid-template-areas: 	"section-grid-item1 section-grid-item1 section-grid-item2 section-grid-item2" 
									"section-grid-item3 section-grid-item3 section-grid-item4 section-grid-item5";
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr;
	}
}
@media only screen and (orientation: portrait) {
	.post-area-5{
			grid-template-areas: 	"section-grid-item1 section-grid-item2"
			                        "section-grid-item1 section-grid-item2"
									"section-grid-item3 section-grid-item4"
									"section-grid-item3 section-grid-item5";
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr 1fr;
	}
}
/* SIX picture */
@media only screen and (orientation: landscape) {
	.post-area-6{
			grid-template-areas: 	"section-grid-item1 section-grid-item2 section-grid-item3 section-grid-item3" 
									"section-grid-item4 section-grid-item4 section-grid-item5 section-grid-item6";
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr;
	}
}
@media only screen and (orientation: portrait) {
	.post-area-6{
			grid-template-areas: 	"section-grid-item1 section-grid-item3"
			                        "section-grid-item2 section-grid-item3"
									"section-grid-item4 section-grid-item5"
									"section-grid-item4 section-grid-item6";
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr 1fr;
	}
}
/* SEVEN picture */
@media only screen and (orientation: landscape) {
	.post-area-7{
			grid-template-areas: 	"section-grid-item1 section-grid-item1 section-grid-item2 section-grid-item3" 
									"section-grid-item4 section-grid-item5 section-grid-item6 section-grid-item7";
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr;
	}
}
@media only screen and (orientation: portrait) {
	.post-area-7{
			grid-template-areas: 	"section-grid-item1 section-grid-item2"
			                        "section-grid-item1 section-grid-item3"
									"section-grid-item4 section-grid-item6"
									"section-grid-item5 section-grid-item7";
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr 1fr;
	}
}
/* EIGHT picture */
@media only screen and (orientation: landscape) {
	.post-area-8{
			grid-template-areas: 	"section-grid-item1 section-grid-item2 section-grid-item3 section-grid-item4" 
									"section-grid-item5 section-grid-item6 section-grid-item7 section-grid-item8";
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr;
	}
}
@media only screen and (orientation: portrait) {
	.post-area-8{
			grid-template-areas: 	"section-grid-item1 section-grid-item2"
			                        "section-grid-item3 section-grid-item4"
									"section-grid-item5 section-grid-item6"
									"section-grid-item7 section-grid-item8";
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr 1fr;
	}
}



/* CSS_03b - Section Posts
 * defines how the posts will be displayed on the main page */
.post-container{position:relative; overflow:hidden;	background-color: snow;}
.post-title{color: white; font-size:2vw; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); z-index:3;}

.post-date{
    position: absolute;
    color: white;
    font-size: 1vw;
    top: 90%;
    left:90%;
    transform: translate(-100%, -100%);
	z-index:3;
    }

.post-overlay {
  	display: block;
 	background: linear-gradient(-20deg, rgba(63, 63, 63, 0.8), rgba(63, 63, 63, 0.0));
	height:100%;
	width:100%;
  	text-align: center;
  	opacity: 0;
  	visibility: hidden;
  	transition: all 0.4s ease;
	position:absolute;
	z-index:2;
}
.post-container:hover .post-overlay {
  	visibility: visible;
  	opacity: 1;
}

.post-container:hover .post-thumbnail{
  	transform: scale(1.2);
}


.post-thumbnail{
    height:100%;
    width: 100%;

    object-fit: cover;
	transition: all 1s ease;
	position:absolute;
	display: block;
	z-index:1;
}







body{
	background-color:#111;

}