/*
    Created on : 22.08.2015, 16:17:47
    Author     : johnturbo

--------------------------------------------------------------------------------
TABLE OF CONTENTS
--------------------------------------------------------------------------------
* General Structure
* General Classes
* Headings
* Links
* Lists
* Tables
* Inputs
* Popups
* Header
* Navigation
* Main Content
  > Text
  > Images
* Footer

--------------------------------------------------------------------------------
COLORS
--------------------------------------------------------------------------------
*/
:root {
    --primary-orange: #ff6600;
    --primary-lightorange: #ffa162;
    --primary-verylightorange: #ffd0b1;
    --secondary-green: #3c9e15;
    --primary-background-color: #eee;
    --secondary-background-color: #ddd;
    --tertiary-background-color: #ccc;
    --highlight-background: #fff;
    --font-color: #000;
    --shadow-color: #999;
    --logo-shadow-color: #222;
    --quote-color: #333;
}
@media (prefers-color-scheme: dark) {
    :root {
        --primary-orange: #ff6600;
        --primary-lightorange: #cc4400;
        --primary-verylightorange: #aa3300;
        --secondary-green: #8feb6a;
        --primary-background-color: #222;
        --secondary-background-color: #333;
        --tertiary-background-color: #444;
        --highlight-background: #000;
        --font-color: #dddddf;
        --shadow-color: #000;
        --logo-shadow-color: #000;
        --quote-color: #ccc;
    }
}


/*
--------------------------------------------------------------------------------
IMPORTS
--------------------------------------------------------------------------------
*/
@font-face {
    font-family: 'Chicle';
    src: url(../fonts/Chicle/Chicle-Regular.ttf);
}

@font-face {
    font-family: 'Raleway';
    src: url(../fonts/Raleway/static/Raleway-Regular.ttf);
}


/*
--------------------------------------------------------------------------------
General Structure
--------------------------------------------------------------------------------
*/
body {
    font-family: 'Raleway', sans-serif;
    margin: 0;
    font-size: 100%;
    color: var(--font-color);
    padding-top: 100px;
    background-color: var(--primary-background-color);
}
* {
    box-sizing: border-box;
}
div {
    box-sizing: border-box;
    display: block;
}
p {
    line-height: 1.5;
}
blockquote {
    border-left: 2px solid var(--quote-color);
    padding-left: 15px;
}
figure {
    margin: 0;
}
label {
    display: block;
    font-family: 'Chicle', cursive;
    margin-bottom: 5px;
}
figcaption {
    font-style: italic;
    text-align: center;
    background-color: var(--highlight-background);
    margin-top: -3px !important;
    padding: 4px;
    border-radius: 0 0 5px 5px;
}

/*
--------------------------------------------------------------------------------
General Classes
--------------------------------------------------------------------------------
*/
.right {
    float: right;
}
.full-width {
    width: 100%;
}
.admin-bar .header {
    top: 32px;
}
.shadow {
    transition: all 0.3s ease-in-out;
}
.shadow:hover {
    box-shadow: 1px 1px 5px 2px var(--shadow-color);
}
.clear {
    clear: both;
}
a.inline {
    display: initial !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

/*
--------------------------------------------------------------------------------
Headings
--------------------------------------------------------------------------------
*/
h1, h2, h3, h4, h5, h6 {
    font-family: 'Chicle', cursive;
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 30px;
}
h3 {
    font-size: 26px;
}
h4 {
    font-size: 22px;
}
h5 {
    font-size: 20px;
    font-weight: normal;
}
h6 {
    font-size: 18px;
    font-weight: normal;
}

.content h1, .content h2 {
    margin-top: 50px;
}
.content h1:first-of-type {
    margin-top: 10px;
}

.content h3, .content h4, .content h5, .content h6 {
    margin-top: 30px;
}
.box_container h1, .box_container h2 {
    display: block;
    border-bottom: 2px solid var(--primary-orange);
    padding-bottom: 10px;
}


/*
--------------------------------------------------------------------------------
Links
--------------------------------------------------------------------------------
*/
a {
    text-decoration: none;
    color: var(--font-color);
    -webkit-transition: all 1s; /* Safari */
    transition: all 1s;
}
a:hover {
    color: var(--secondary-green);
}

/*
--------------------------------------------------------------------------------
Lists
--------------------------------------------------------------------------------
*/

/*
--------------------------------------------------------------------------------
Tables
--------------------------------------------------------------------------------
*/

/*
--------------------------------------------------------------------------------
Inputs
--------------------------------------------------------------------------------
*/
input, textarea {
    background-color: var(--highlight-background);
    border: 1px solid var(--primary-orange);
    border-radius: 3px;
    display: block;
    min-width:200px;
    padding: 5px 7px;
}
textarea {
    width: 100%;
}
input[type=submit] {
    max-width: 300px;
    cursor: pointer;
}
input[type=checkbox] {
    min-width: inherit;
    display: inline-block;
}
input[type=checkbox] + label {
    display: inline-block;
}

/*
--------------------------------------------------------------------------------
Popups
--------------------------------------------------------------------------------
*/


/*
--------------------------------------------------------------------------------
Header
--------------------------------------------------------------------------------
*/
.header {
    display: block;
    width: 100%;
    background-color: var(--primary-lightorange);
    height: 50px;
    position: fixed;
    top: 0;
    z-index: 100;
}
.header .box {
    padding-top: 0;
    padding-bottom: 0;
}
.header h1.title {
    font-size:  36px;
    text-shadow: 2px 2px var(--highlight-background);  
    margin: 0;
    margin-top: 5px;
}
.mainmenu {
    background-color: var(--primary-verylightorange);
    position: fixed;
    top: 50px;
    width: 100%;
    font-family: 'Chicle', cursive;
    z-index: 15;
    text-shadow: 1px 1px var(--highlight-background);
}
.mainmenu .box {
    padding: 0;
    padding-left: 15px;
}
.mainmenu ul {
    padding: 0;
    margin: 0;
    height: 35px;
}
.mainmenu ul li {
    padding: 2px 4px;
    margin: 5px 3px 0 0;
    list-style: none;
    display: inline-block;
}
.mainmenu ul li:first-of-type {
    padding-left: 0;
}
.logo {
    position: fixed;
    height:120px;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    top: 0;
    -webkit-filter: drop-shadow(5px 5px 5px var(--logo-shadow-color));
    filter: drop-shadow(5px 5px 5px var(--logo-shadow-color));
    z-index: 100;
}
.logo:hover {
    transition: all 0.5s ease-in-out;
    -webkit-filter: drop-shadow(5px 5px 5px var(--secondary-green));
    filter: drop-shadow(5px 5px 5px var(--secondary-green));
}
.social {
    float: right;
    margin-top: -33px;
    font-family: 'Chicle', cursive;
    font-size: 18px;
    vertical-align: center;
    text-shadow: 1px 1px var(--highlight-background);  
}
.social a + a {
    margin-left: 15px;
}

/*
--------------------------------------------------------------------------------
Main Content
--------------------------------------------------------------------------------
*/
.box_container {
    z-index: 10;
}
.box {
    display: block;
    margin: 0 auto;
    padding: 15px;
    max-width: 1100px;
    z-index: 10;
}
.box .brand_new {
    display: inline-block;
    width: calc(50% - 8px);
    position: relative;
    z-index: 10;
}
.box .brand_new a {
    display: block;
    position: relative;
    height: 300px;
    padding: 15px;
    border: 2px solid var(--primary-orange);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: var(--tertiary-background-color);
}
.box .brand_new .date {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1px 5px 5px 3px;
    background-color: var(--primary-orange);
    color: var(--highlight-background);
}
.box .brand_new a h2 {
    display: block;
    background-color: rgba(255,102,0,0.8);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 5px;
    border: none;
    text-shadow: 1px 1px var(--highlight-background);
}
.box .brand_new p {
    text-align: justify;
}
.box .brand_new:nth-child(2) {
    display: inline-block;
    float: right;
}
.box .recent_container {
    display: flex;
}
.box .recent {
    display: inline-block;
    width: calc(25% - 12px);
    position: relative;
    z-index: 10;
    margin-right: 16px;
    vertical-align:top;
}
.box .recent:last-of-type {
    margin-right: 0px;
}
.box .recent a {
    display: block;
    position: relative;
    height: 200px;
    padding: 15px;
    border: 2px solid var(--primary-orange);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: var(--tertiary-background-color);
}
.box .recent a h2 {
    display: block;
    background-color: rgba(255,102,0,0.8);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 5px;
    border: none;
    text-shadow: 1px 1px var(--highlight-background);
    font-size: 22px;
}
.box .recent p {
    text-align: justify;
}
.box .content {
    width: calc(70% - 25px);
    float: left;
    display: inline-block;
}
.box .content blockquote, .box .content figure {
    margin-top: 40px;
    margin-bottom: 40px;
}
.box .content .wp-block-image img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
}
.box .sidebar {
    width: 30%;
    float: right;
    vertical-align: top;
    display: inline-block;
    border-left: 1px solid var(--primary-orange);
    padding-left: 25px;
    margin-top: 25px;
}
.box .sidebar > ul {
    padding: 0;
    margin: 0;
}
.box .sidebar ul li.widget {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.instapics {
    display: block;
    width: 100%;
}
.instapic {
    width: 16.66%;
    display: inline-block;
    border-left: 2px solid var(--primary-background-color);
    border-right: 2px solid var(--primary-background-color);
}
.instapic:first-of-type {
    border-left: none;
}
.instapic:last-of-type {
    border-right: none;
}
.instapic a img {
    width: 100%;
}
.blog_post {
    display: block;
    padding: 10px;
    background-color: var(--highlight-background);
    border-radius: 3px;
    margin-bottom: 15px;
}
.post_image {
    height: 250px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 15px;
}
.readmore {
    margin-bottom: 0;
}
.tagcloud a {
    padding: 2px 3px;
    border-radius: 2px;
    border: 1px solid var(--primary-orange); 
    display: inline-block;
    margin: 3px 1px;
    background-color: var(--highlight-background);
}
.tagcloud a:hover {
    background-color: var(--primary-orange);
    color: var(--highlight-background);
}
.commentlist {
    margin: 0;
    padding: 0;
    list-style: none;
}
.commentlist li {
    padding: 10px;
    border-radius: 5px;
    margin: 0;
}
.commentlist li + li {
    margin-top: 15px;
}
.commentlist li:nth-child(even) {
    background-color: var(--primary-lightorange);
}
.commentlist li:nth-child(odd) {
    background-color: var(--primary-verylightorange);
}
.commentlist .comment-body {
    font-weight: bold;
}
.comment-author, .comment-meta, .reply {
    font-weight: normal;
}
.wp-block-embed iframe {
    width: 100%;
    min-height: 360px;
}

/*
--------------------------------------------------------------------------------
Widgets
--------------------------------------------------------------------------------
*/
.widget ul {
    padding: 0
}
.widget ul li {
    list-style: none;
    padding: 15px 0;
    border-top: 1px solid var(--primary-orange);
}
.widget ul li:first-of-type {
    border: none;
}
.widget_recent_entries ul li {
    font-weight: bold;
}
.widget_recent_entries ul li span.post-date {
    display: block;
    font-weight: normal;
}
h2.widgettitle {
    margin-bottom: 2px;
}
.rating {
    width: 80%;
    margin-left: -2px;
}
.rating.overall {
    width: 100%;
}
label.overall {
    margin-top: 10px;
    font-size: 120%;
}
.rating .rating_point {
    width: calc(16.66% - 4px);
    display: inline-block;
    height: 35px;
    background-image: url('../icons/rating1.png');
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: var(--highlight-background);
    border-radius: 10px;
    margin: 2px;
    box-shadow: 1px 1px 5px 2px var(--primary-verylightorange);
}
.rating.overall .rating_point {
    height: 45px;
}
.rating .rating_point.empty {
    background-image: url('../icons/rating0.png');
    background-color: var(--secondary-background-color);
}
#rating {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--primary-orange);
}
#score {
    font-family: 'Chicle', cursive;
    font-size: 30px;
    margin: 0;
    padding: 0;
}

/*
--------------------------------------------------------------------------------
Responsiveness
--------------------------------------------------------------------------------
*/
@media (min-width: 1101px) {

}

@media (min-width: 768px) and (max-width: 1100px) {

}

@media (max-width: 767px) {
    .social {
        display: none;
    }
    .logo {
        left: auto;
    }
    .box .recent_container {
        display: block;
    }
    .box .brand_new, .box .recent {
        display: block;
        width: 100%;
    }
    .box .sidebar, .box .content {
        width: 100%;
        display: block;
    }
    .instapic {
        width: 33.33%;
        display: inline-block;
    }
    .right {
        float: none;
    }
    .footer div {
        display: block;
    }
    .footer div.right {
        margin-top: 10px;
    }
}

/*
--------------------------------------------------------------------------------
Footer
--------------------------------------------------------------------------------
*/
.footer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid var(--primary-orange);
}
.footer div {
    display: inline-block;
}