/*
	Theme Name: Medienbausatz
	Author: Jakob Ellmaier Vorlage: Stefan Maier
	Author URI: http://medienbausatz.at.at
	Tags: Blank, HTML5, CSS3

	*/

    /*------------------------------------*\
    MAIN
    \*------------------------------------*/

    /* global box-sizing */
    *,
    *:after,
    *:before {
    	box-sizing:border-box;
    	-webkit-font-smoothing:antialiased;
    	font-smoothing:antialiased;
    	text-rendering:optimizeLegibility;
    }
    /* html element 62.5% font-size for REM use */
    html {
    	font-size:70%;
    }
    body {
    	text-align:center;
    	font:300 11px/1.4 "Troia", Helvetica, Arial, sans-serif;
    	color:#444;
        background: rgba(50,200,205, 0.7)

    }
    /* clear */
    .clear:before,
    .clear:after {
    	content:' ';
    	display:table;
    }

    .clear:after {
    	clear:both;
    }
    .clear {
    	*zoom:1;
    }
    img {
    	max-width:100%;
    	vertical-align:bottom;
    }
    a,a:link {
    	color: rgba(50,200,205, 0.7);
    	text-decoration:none;
    }
    a:hover {
    	color:#444;
    }
    a:focus {
    	outline:0;
    }
    a:hover,
    a:active {
    	outline:0;
    }
    input:focus {
    	outline:0;
    	border:1px solid #04A4CC;
    }


    .search button {
    	display:none;
    }

    /*------------------------------------*\
    STRUCTURE
    \*------------------------------------*/

    /* wrapper */
    .wrapper {
    	position:relative;
    }
    /* header */
    .header {
    	background: #FFF;
    }
    /* logo */
    .logo {

    }
    .logo-img {
    	height:35px;

    }
    /* nav */
    .sidebar nav {
    	margin-right:-4em;
    	font-size:0.8em;
    }

    /* sidebar */
    .sidebar {
    	margin-left:0;
    	float:right;

    }
    .sidebar ul, .sidebar ul ul {
    	padding:0;
    }
    .cf:after,
    .cf:before {
    	content: '';
    	display: table;
    }
    .cf:after {
    	clear: both;
    }
    .cf {
    	zoom: 1;
    }

    .header ul {
        margin:0;
    }



    /*------------------------------------*\
    PAGES
    \*------------------------------------*/

    .type-page.width-bg{
        background: #fff;
        padding:3em;
        -webkit-box-shadow: 0 2px 8px 2px rgba(100,100,100, 0.2);
        -moz-box-shadow: 0 2px 8px 2px rgba(100,100,100, 0.2);
        box-shadow: 0 2px 8px 2px rgba(100,100,100, 0.2);
    }
    .type-page h1 {
        margin-top: -0.35em;
    }
    .type-post{
        background: #fff;
        padding:3em;
        -webkit-box-shadow: 0 2px 8px 2px rgba(100,100,100, 0.2);
        -moz-box-shadow: 0 2px 8px 2px rgba(100,100,100, 0.2);
        box-shadow: 0 2px 8px 2px rgba(100,100,100, 0.2);
    }

    /*------------------------------------*\
    GALLERY
    \*------------------------------------*/

    .gallery{
        margin-bottom: -2em;
    }

    .gallery img{
        max-width: 100%; 
        height: auto;
    }

    .gallery .fbgrid{
        width: 31.5%; 
    }

    .gallery .fbgrid-v{
        width: 64.1%; 
    }

    .gallery .fbgrid-h{
        width: 97%;         
    }


    .gallery-item{
        position: relative;
        float: left;
        display:inline-block;
        margin-right: 1.5%;
        margin-bottom: 1.5%;
        margin-top: 0px;
        margin-left: 0px;
    }

    .gallery .cross{
        position: absolute;
        top: 50%;
        text-align: center; 
        /* left: 0; */
        width: 100%;
        height: 100%;
        display: table-cell;
        /* background:url('./img/cross.png')no-repeat center center; */
        pointer-events: none
    }

    .gallery .cross p{
        color: #fff;
        margin: -34px 0 0 -8px;
        font-size: 52px;
    }

    .gallery .item-3 .cross{
        display:none;
    }

    .gallery .hidden{
        display:none;
    }

    @media only screen and (max-width: 600px) {
        .gallery .fbgrid{
            width: 46%; 
        }

        .gallery .cross p{
            font-size: 42px;
            margin: -24px 0 0 -4px;
        }

        .gallery .item-3 .cross{
            display:inline-block;
        }

        .gallery .item-4{
            display:none;
        }

        .gallery .fbgrid-v{
            width: 95%;  
        }

        .gallery .fbgrid-h{
            width: 95%;          
        }
        .gallery-item{
            margin-right: 3%;
            margin-bottom: 3%;
        }
    }
    
    /*------------------------------------*\
	TYPOGRAPHY
	\*------------------------------------*/

/*
	@font-face {
		font-family:'Troia';
		src:url('fonts/troia/TroiaRg.otf') format('opentype');
		font-weight:normal;
		font-style:normal;
	}
    */

    @font-face { 
        font-family:'Troia';
        src:url('fonts/troia/troiarg-webfont.eot') format('eot'), 
        url('fonts/troia/troiarg-webfont.woff') format('woff'), 
        url('fonts/troia/TroiaRg.ttf') format('truetype'), 
        url('fonts/troia/TroiaRg.otf') format('opentype'),
        url('fonts/troia/troiarg-webfont.svg') format('svg'); 
        font-weight:normal;
        font-style:normal;
    }

    @font-face { 
        font-family:'Troia';
        src:url('fonts/troia/troiabld-webfont.eot') format('eot'), 
        url('fonts/troia/troiabld-webfont.woff') format('woff'), 
        url('fonts/troia/TroiaBld.ttf') format('truetype'), 
        url('fonts/troia/TroiaBld.otf') format('opentype'),
        url('fonts/troia/troiabld-webfont.svg') format('svg'); 
        font-weight:bold;
        font-style:normal;
    }

    @font-face { 
        font-family:'Troia';
        src:url('fonts/troia/troiabld-webfont.eot') format('eot'), 
        url('fonts/troia/troiabld-webfont.woff') format('woff'), 
        url('fonts/troia/TroiaBld.ttf') format('truetype'), 
        url('fonts/troia/TroiaBld.otf') format('opentype'),
        url('fonts/troia/troiabld-webfont.svg') format('svg'); 
        font-weight:900;
        font-style:normal;
    }



    /*------------------------------------*\
    RESPONSIVE
    \*------------------------------------*/


    @media only screen and (max-width:900px) {
    	.impressum {display:none;}
        .wrapper {
            width: 100%;
        }
    	.fixed-wrapper  {
    		position:relative;
    		-webkit-transition: all 1s ease-in-out;
    		transition: all 0.5s ease-in-out;
            width: 100%;
    		z-index:10;

    	}
    	.fixed-wrapper.expand {
    		margin-left:260px;
    	}
    	.sidebar {
            margin-top: 40px;
    		position:absolute;
    		width:250px;
    		left:-275px;
    		top:0;
    		z-index:100;

    	}
    	.white-container {
    		margin-left:10px;
            min-width: 90%;
            margin-right:10px;
    	}
    	.header { 	
    		background:#fff;
    		position:relative;
    		z-index:9;
            -webkit-box-shadow: 0 2px 8px 2px rgba(100,100,100, 0.2);
            -moz-box-shadow: 0 2px 8px 2px rgba(100,100,100, 0.2);
            box-shadow: 0 2px 8px 2px rgba(100,100,100, 0.2);
    	}
    	#expand {
    		display:inline-block;
    		position:absolute;
    		left:0;
    		bottom:0;
    		width:61px;
    		height:44px;
    		margin-bottom:10px;
            margin-left:10px;
    		background:url('./img/menu.png')  0px -45px no-repeat;
    	}

    	#expand.active {
    		background:url('./img/menu.png') top left no-repeat;
    	}

    	a.fb {
    		background:url('./img/tw_grey.png') no-repeat bottom center;
    	}

    	a.twitter {
    		background:url('./img/fb_grey.png')no-repeat bottom center;
    	}
        a.homelink {
            display:inline-block;
            font-size:2rem;
            letter-spacing: 0.1rem;
            color: rgba(50,200,205, 0.7);
            font-weight:bold;
            padding-bottom:12px;
            text-transform:lowercase;
        }

    }
    @media only screen and (min-width:900px){
        .wrapper {
            width: 100%;
        }
    	.white-container {
    		margin-left:260px;
            margin-right: 20px;
    	}
    	a.impressum {
    		display:inline-block;
    		font-size:2rem;
            letter-spacing: 0.1rem;
    		color: #fff; 
    		font-weight:bold;
    		padding-bottom:12px;
    		text-transform:lowercase;
    	}
    	a.fb {
    		background:url('./img/tw_white.png') no-repeat bottom center;
    	}
    	a.twitter {
    		background:url('./img/fb_white.png')no-repeat bottom center;
    	}
    	#expand {
    		display:none;
    		visibility: hidden;
    	}
    	.sidebar {
    		position:relative;
    		float:left;
    		width:250px;
            left: -35px;
    		margin-top:60px;
            margin-left:10px;
    	}
    	.header { 
    		background:transparent;
    		float:right;
    	}
    	li.logo {
    		display:none!important;
    		visibility: hidden;
    	}
        .homelink {
            display:none!important;
            visibility: hidden;
        }
    }
    @media only screen and (min-width:800px) and (max-width:900px){
        .type-page{ 
            padding:4em!important;
        }
    }
    @media only screen and (min-width:1080px) {
    	.type-page{ 
    		padding:4em!important;
    	}
    	.wrapper {
    		width:90%;
    		max-width:1100px;
    	}
    }
    @media only screen and (max-width:450px) {
        .homelink {
            display:none!important;
            visibility: hidden;
        }
    }


    /*------------------------------------*\
    HEADER
    \*------------------------------------*/
   
    a.fb,a.twitter {
    	display:inline-block;
    	height:40px;
    	width:37px;
    	margin-bottom:1px;
    }

    .header {
    	margin-bottom:1em;
        padding-right: 2em;
        padding-left: 2em;
        top: -1em;
    }
    .header ul {
        text-align:right;
        list-style-type: none;
    }

    .header ul li {
    	line-height:0.5;
    	display:inline-block;
    	vertical-align: bottom;
    	padding:0;
    	margin-bottom:1em;
        margin-top:2em;
    	margin-left:2em;
                list-style-type: none;

    }
    



    /*------------------------------------*\
    MENU
    \*------------------------------------*/



    .sidebar nav ul {
        text-align:right;
        list-style-type: none;
        margin-right: 2em;

    }
    .sidebar nav ul li {
        position:relative;
        margin-bottom: 4em;
    }
    .menu-container {
        position: relative;
        background: #fff;
        display:inline-block;
        -webkit-box-shadow: 0 0 10px 1px rgba(100,100,100, 0.1);
        -moz-box-shadow: 0 0 10px 1px rgba(100,100,100, 0.1);
        box-shadow: 0 2px 8px 1px rgba(100,100,100, 0.1);
        -webkit-transform: rotate(7deg);
        -moz-transform: rotate(7deg);
        -o-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg);
        border-radius: 0 50px 50px 0;
    }
    .menu-container a{
        border-radius: 0 8px 8px 0;
        background: #fff;
        color: rgba(50,200,205, 0.7);
        padding: .6rem 2rem .4rem 2rem;
        margin: 0;
        font-size: 2.8em;
        letter-spacing: 0.08em;
        display: inline-block;
        font-weight: 900;
        text-transform: lowercase;
    }
    .menu-container a:hover{
        padding-right: 1.9rem;
        color: rgba(50,200,205, 0.6);
    }

    /* from https://css-tricks.com/almanac/properties/b/box-shadow/ */
    .menu-container:before
    {
      z-index: -2;
      position: absolute;
      content: "";
      bottom: 14px;
      right: auto;
      left: 15px;
      width: 85%;
      height: 20px;
      max-width:300px;
      -webkit-box-shadow: 0 15px 5px #888;
      -moz-box-shadow: 0 15px 5px #888;
      box-shadow: 0 18px 4px rgba(20,20,20, 0.2);
      -webkit-transform: rotate(-4deg);
      -moz-transform: rotate(-4deg);
      -o-transform: rotate(-4deg);
      -ms-transform: rotate(-4deg);
      transform: rotate(-4deg);
    }
    .menu-container:after
    {   
        z-index: 2;
        position: absolute;
        content: "";
        bottom: -12px;
        right: -18px;
        left: auto;
        background: url('./img/menu_over.png') no-repeat;
        width: 28px;
        height:70px;
    }
    }

  
    body, html {
    	height: 100%;
    }
    .wrapper {
    	height:auto;
    	min-height:70vh;
    	display:inline-block;
    	text-align:left;
    }

    /*------------------------------------*\
    MISC
    \*------------------------------------*/

    ::-moz-selection {
    	background:#04A4CC;
    	color:#FFF;
    	text-shadow:none;
    }

    ::selection {
    	background:#04A4CC;
    	color:#FFF;
    	text-shadow:none;
    }
    ::-webkit-selection {
    	background:#04A4CC;
    	color:#FFF;
    	text-shadow:none;
    }
    ::-moz-selection {
    	background:#04A4CC;
    	color:#FFF;
    	text-shadow:none;
    }

    /*------------------------------------*\
    WORDPRESS CORE
    \*------------------------------------*/

    .alignnone {
    	margin:5px 20px 20px 0;
    }
    .aligncenter,
    div.aligncenter {
    	display:block;
    	margin:5px auto 5px auto;
    }
    .alignright {
    	float:right;
    	margin:5px 0 20px 20px;
    }
    .alignleft {
    	float:left;
    	margin:5px 20px 20px 0;
    }
    a img.alignright {
    	float:right;
    	margin:5px 0 20px 20px;
    }
    a img.alignnone {
    	margin:5px 20px 20px 0;
    }
    a img.alignleft {
    	float:left;
    	margin:5px 20px 20px 0;
    }
    a img.aligncenter {
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    }
    .wp-caption {
    	background:#FFF;
    	border:1px solid #F0F0F0;
    	max-width:96%;
    	padding:5px 3px 10px;
    	text-align:center;
    }
    .wp-caption.alignnone {
    	margin:5px 20px 20px 0;
    }
    .wp-caption.alignleft {
    	margin:5px 20px 20px 0;
    }
    .wp-caption.alignright {
    	margin:5px 0 20px 20px;
    }
    .wp-caption img {
    	border:0 none;
    	height:auto;
    	margin:0;
    	max-width:98.5%;
    	padding:0;
    	width:auto;
    }
    .wp-caption .wp-caption-text,
    .gallery-caption {
    	font-size:11px;
    	line-height:17px;
    	margin:0;
    	padding:0 4px 5px;
    }
    .sticky {

    }
    .bypostauthor {

    }

    .date {
    	padding: 0.2em  2em   0.2em 0em;
    	border-bottom: 0.2em solid rgba(50,200,205, 0.7);
    }
    article {
    	font-size:1.5rem;
        margin-bottom: 2em;
    }
    article h2 {
    	font-size:3rem;
    	font-weight:bold;
    }

    a.read-more, a.post-edit-link {
    	display:inline-block;
    	padding: 0.2em 0.8em;
    	color:#fff!important;
    	background: rgba(50,200,205, 0.7);
    }
/*------------------------------------*\
    PRINT
    \*------------------------------------*/

    @media print {
    	* {
    		background:transparent !important;
    		color:#000 !important;
    		box-shadow:none !important;
    		text-shadow:none !important;
    	}
    	a,
    	a:visited {
    		text-decoration:underline;
    	}
    	a[href]:after {
    		content:" (" attr(href) ")";
    	}
    	abbr[title]:after {
    		content:" (" attr(title) ")";
    	}
    	.ir a:after,
    	a[href^="javascript:"]:after,
    	a[href^="#"]:after {
    		content:"";
    	}
    	pre,blockquote {
    		border:1px solid #999;
    		page-break-inside:avoid;
    	}
    	thead {
    		display:table-header-group;
    	}
    	tr,img {
    		page-break-inside:avoid;
    	}
    	img {
    		max-width:100% !important;
    	}
    	@page {
    		margin:0.5cm;
    	}
    	p,
    	h2,
    	h3 {
    		orphans:3;
    		widows:3;
    	}
    	h2,
    	h3 {
    		page-break-after:avoid;
    	}
    }