/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* FONT FACE */

@font-face {
  font-family: 'Changa One';
  font-style: normal;
  font-weight: 400;
  src: local('Changa One'), local('ChangaOne'), url(https://wolfie.crackedlabs.org/css/fonts/ChangaOne.woff) format('woff');
}

@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans Narrow'), local('PTSans-Narrow'), url(https://wolfie.crackedlabs.org/css/fonts/PTSans-Narrow.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans Narrow Bold';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Narrow Bold'), local('PTSans-NarrowBold'), url(https://wolfie.crackedlabs.org/css/fonts/PTSans-NarrowBold.woff) format('woff');
}

/* BASE */

.wrapper {width: 90%;margin: 0 5%;}

/* FONTS FAMILIES */

body {font-family:PT Sans Narrow, Helvetica, Helvetica Neue, Arial;}
h1, h2 {font-family:Changa One, Helvetica, Helvetica Neue, Arial;font-weight:normal;}
strong, .mainbox section span {font-family:PT Sans Narrow Bold, Helvetica, Helvetica Neue, Arial;}
nav a,.header-container-img p {font-family: Changa One, Helvetica, Helvetica Neue, Arial;font-weight:normal;}

/* FONT SIZES */

body {font-size: 22px; line-height:31px;}

.header-container h1 {font-size:34px;line-height:34px;}

.main article h1 {font-size:34px;line-height:48px;}
.mainbox {font-size:22px;line-height:31px;}
.header-container-img h2 {font-size:24px; line-height:34px;}
/*-webkit-text-stroke: 0px #F3FF32;*/

nav a,.header-container-img p {font-size: 24px; line-height:24px;}
.header-container-img p {font-size:20px;line-height:34px;}
.language-switcher a {font-size:20px;line-height:20px;}
.footer-container {font-size:18px;line-height:24px;}

/* COLORS */

.header-container {width:100%;padding-top:20px;}
.footer-container,.main aside {border-top: 2px solid #333333;}
.header-container,.footer-container,.main aside {background: #454545;}
.title a {color: white;text-decoration:none;}

.language-switcher a {background:white;color:black;text-decoration:none;}
.language-switcher a:hover {background:#E77A29;color:white;}

.header-container-img {
	border-bottom:2px solid #333333;
	background: #c0c0c0;
	background: -moz-linear-gradient(#ffffff 0%, #C0C0C0 100%);
	background: -webkit-linear-gradient(#ffffff 0%, #C0C0C0 100%);
	background: linear-gradient(#ffffff 0%, #C0C0C0 100%);
}

.header-container-img h2 {margin:25px 0 25px 0;}
.header-container-img p {margin-top:0;}
.header-container-img h2 span {background:#F3FF32;padding:0 2px;}
.header-container-img p span {background:#E77A29;color:white;padding:0 2px;}

.mainbox {
	background: #E6711A;
	background: -moz-linear-gradient(#E6711A 0%, #E87E31 100%);
	background: -webkit-linear-gradient(#E6711A 0%, #E87E31 100%);
	background: linear-gradient(#E6711A 0%, #E87E31 100%);
}

.main a {color:#333;}
.main a:hover {color:#E67928;}
.mainbox a {color:#fff;}
.mainbox a:hover {color:#000;}

.footer-container a {color:white;}

iframe, a.vid img {box-shadow: 0px 0px 6px #fff;}
a.vid img:hover {box-shadow: 0px 0px 6px #000;}

/* SECTION listing1 */

section.listing1 {clear:both;}
section.listing1.highlight {background:#eee;}
section.listing1 > span {display:block;}
section.listing1 span span, section.listing1 .top {background:#333;color:white;padding: 0 4px;text-transform:uppercase;font-size:22px;}
section.listing1 div {}
section.listing1 p, section.listing1 li {font-size:22px;line-height:31px;}
section.listing1 h2 {font-size:24px;line-height:34px;margin:bottom:0;}
section.listing1 h3 {margin-bottom:0;}

section.listing1 ul {margin-top:0;padding-left:20px;}

section.listing1 img {display:none;float:right;margin-left:2%;margin-bottom:3%;border:1px solid #333;}

/* SECTION listing2 */

section.listing2 {}
section.listing2.highlight {background:#eee;}
section.listing2 > span {display:block;}
section.listing2 span span, section.listing2 .top {background:#333;color:white;padding: 0 4px;text-transform:uppercase;font-size:22px;}
section.listing2 div {}
section.listing2 p {font-size:22px;line-height:31px;}
section.listing2 h2 {font-size:24px;line-height:34px;margin:bottom:0;}
section.listing2 h3 {margin-bottom:0;}

span.tag {background:#333;color:white;border-radius:8px;font-size:20px;line-height:28px;padding:0 5px 0 5px;}

/* SECTION MAINBOX */

.mainbox section {margin-bottom:1.5em;}
.mainbox section span {background:#333;color:white;padding: 0 4px;font-size:22px;}
.mainbox p.teaser {margin-top:5px;margin-bottom:5px;}

.mainbox article {}

/* MOBILE: HEADER */

nav ul {margin: 0;padding: 0;}
nav a {display: block;margin-bottom: 10px;padding: 5px 0;text-align:center;text-decoration: none;text-transform:uppercase;}
nav a {background:#333333;color: white;}
nav a:hover, nav a.active {color:#E77A29}

.language-switcher {display:none;}

.title,.header-container-img .wrapper {text-align:center;}

/* MOBILE: MAIN */

.main {padding-bottom: 1em;}
.main article {padding-top:1.5em;}
.mainbox article {padding-top:1em;}
.main aside {color: white;padding: 0px 5% 10px;}
.footer-container footer {color: white;padding: 20px 0;text-align:center;}
.footer-container footer > * {margin-bottom:10px;}

/* IE Fixes */
.ie7 .title {padding-top: 20px;}

@media only screen and (min-width: 480px) {

	body {font-size: 24px; line-height:34px;}
	.header-container-img h2 {font-size:34px;line-height:44px;}

/* >480: MENU */

    .nav-container {background-color:#333333;}
	nav {display:block;}
	nav ul {float:right;text-align:right;}
	nav li {display:inline-block;}
	nav a {display:inline;margin: 0 0;padding: 3px 10px 3px 10px;}
    nav li:first-child a {margin-left: 0;padding-left:0;}
    nav li:last-child a {margin-right: 0;padding-right:0;}
	
	.title {text-align:left;}
	
	.language-switcher {display:block;list-style:none;margin:0;padding:0;float:right;}
	/*.language-switcher li {display:inline-block;padding-left:3px;}*/
	.language-switcher a {padding:0 5px;border-radius:8px;}
	
	
	section.listing1 {position:relative;}
	section.listing1 > span {position:absolute;left:0;top:0;width:160px;padding-right:20px;}
        section.listing1 > span.top {display:inline-block;position:relative;width:auto;}
	section.listing1 div {margin-left:160px;}

	section.listing2 {position:relative;}
	section.listing2 > span {position:absolute;left:0;top:0;width:160px;padding-right:20px;}
        section.listing2 > span.top {display:inline-block;position:relative;width:auto;}
	section.listing2 div {margin-left:160px;}

/* IE Fixes */
    nav ul li,.language-switcher li {*display: inline;}
    .oldie nav a {margin: 0 10px;}
}

@media only screen and (min-width: 768px) {

    .header-container,.main aside {-webkit-box-shadow: 0 5px 10px #aaa;-moz-box-shadow: 0 5px 10px #aaa;box-shadow: 0 5px 10px #aaa;}

/* >768: MENU*/

	.header-container-img .wrapper {text-align:left;}
	.header-container-img h2 {width:470px;margin-top:50px;float:right;text-align:left;}
	.header-container-img p {width:470px;clear:right;float:right;text-align:left;}
	.home-portrait {margin-top:48px;}

/* >768: MAIN */

    .imgheader .main article.first {border-top:4px solid #333333;}
	.main article {}
    .main aside {float: right;width: 28%;}

	.footer-container {padding-bottom:1em;}
	.footer-container footer {text-align:left;position:relative;}
	#footer-links {position:absolute;top:1em;right:0;}
	#footer-rights {}
	
}

@media only screen and (min-width: 1140px) {

/* >1140 */

    .wrapper {margin: 0 auto;width: 1026px; /* 1140px - 10% for margins */}
	
	.header-container-img h2 {width:600px;}
	.header-container-img p {width:600px;font-size:24px;}

/* 34, 2, 34, 2, 28 */
.mainbox .col1 {float:left;width:34%;}
.mainbox .col2 {float:left;width:34%;margin-left:2%;}
.mainbox .col3 {float:left;width:28%;margin-left:2%;}

.listing1 .col1 {float:left;width:67%;margin-left:0}
.listing1 .col2 {width:28%;margin-left:2%;float:left;border-left:2px solid #333;padding-left:2%;margin-top:85px;}

.listing2 .col1 {float:left;width:67%;margin-left:0}
.listing2 .col2 {width:28%;margin-left:2%;float:left;border-left:2px solid #333;padding-left:2%;margin-top:85px;}

section.listing1 img {display:block;}

}

















/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@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;
    }
}