/*
Theme Name: BlankSlate Child
Theme URI: https://github.com/tidythemes/blankslate
Template: blankslate
Author: TidyThemes
Author URI: https://github.com/tidythemes
Description: Donations: https://calmestghost.com/donate. BlankSlate is the definitive WordPress boilerplate starter theme. We've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability and no intrusive visual CSS styles have been added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/tidythemes/blankslate/issues. Thank you.
Tags: accessibility-ready,one-column,two-columns,custom-menu,featured-images,microformats,sticky-post,threaded-comments,translation-ready
Version: 2024.35
Updated: 2023-01-28 18:15:37

*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400&display=swap');

@font-face {
    font-family: 'Helvetica', sans-serif;
   }


:root {
    --background: rgb(230, 233, 235);
    --cont-low: rgb(66, 66, 66);
    --cont-med: #414d59;
    --cont: #e25813;
    --blog-bkg: white;
}

body {
    background-color: var(--background);
    color: rgb(66, 66, 66);
    font-family: 'Poppins';
    letter-spacing: 1px;
    line-height: 1.5em;
}

a {
    text-decoration: none;
    padding: 1em;
    background-color: var(--cont-low);
    color: white;
    border-radius: 50px;
    margin-right: 1em;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

a:hover {
   background-color: rgb(100, 100, 100);
}

#header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#menu {
    margin: auto;
}

#menu ul {
    display: flex;
    flex-direction: row;
}

#menu li {
    list-style-type: none;
    margin: 1em;
}

#branding {
    display: none;
}

#search {
    display: none;
}

.wp-content-wrap {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.wp-content-text {
    width: 60%;
    margin-left: 2em;
    margin-bottom: 4em;
}

.wp-profile-img {
    width: 12%;
    height: auto;
}

.portfolio-divider {
    border-top: 2px solid var(--blog-bkg);
    padding: 2em;
    width: 33%;
    margin: auto;
}

.portfolio-section-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 2em;
    font-weight: 600;
    margin-bottom: 2em;
}

.portfolio-card-wrap {
    width: 100%;
    margin-bottom: 4em;
}

.portfolio-single {
    display: flex;
    background: var(--blog-bkg);
    width: 50%;
    height: 200px;
    margin: auto;
    border-radius: 15px;
    margin-bottom: 2em;
    box-shadow: 5px 5px 10px 2px rgba(104, 114, 139, 0.253);
}

.portfolio-single:hover {
    cursor: pointer;
    scale: 1.007;
}

.portfolio-img-container {
    width: 100%;
    max-width: 500px;
    min-height: 100%;
    display: flex;
    flex-direction: row;
}

.portfolio-img {
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    border-radius: 10px 0px 0px 10px;
    object-fit: cover;
}

.portfolio-content {
    padding: 1em 1em 1em 0;
    align-self: center;
}

.entry-title {
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgb(66, 66, 66)
}

.portfolio-tags {
    font-size: 0.8em;
    font-style: italic;
    font-weight: 600;
    color: grey;
    margin-bottom: 0.8em;
}

.entry-content {
    line-height: 1.5em;
    letter-spacing: 0.3px;
    color: rgb(66, 66, 66);
}

.blog-diagonal {
    width: 125px;
    min-height: 100%;
    background-color: var(--blog-bkg);
    clip-path: polygon(0% 0%, 50% 0%, 0% 100%);
    transform: rotate(180deg) translateX(100%);
    /* background-color: red;
    width: 50px;
    height: 100%; */
}

.diagonal2 {
    width: 125px;
    min-height: 100%;
    background-color: var(--blog-bkg);
    clip-path: polygon(0% 0%, 50% 0%, 0% 100%);  
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: translateX(-100%) scale(-1, 1);
}

@media only screen and (max-width: 1664px) {
    .portfolio-single {
        width: 60%;
    }
}

@media only screen and (max-width: 1391px) {
    .portfolio-single {
        width: 70%;
    }
}

@media only screen and (max-width: 1198px) {
    .portfolio-single {
        width: 80%;
    }
}

@media only screen and (max-width: 980px) {
    .portfolio-single {
        width: 90%;
    }
}

@media only screen and (max-width: 903px) {
    .portfolio-img-container {
        min-width: 350px;
        max-width: 350px;
    }
}

@media only screen and (max-width: 590px) {
    .portfolio-single {
        flex-direction: column;
        height: 60%;
    }
    .blog-diagonal {
        display: none;
    }
    .blog-diagonal2 {
        display: none;
    }
    .portfolio-img {
        border-radius: 10px 10px 0px 0px;
        height: 10%;
    }
    .portfolio-content {
        padding: 1em 1em 1em 1em;
        align-self: flex-start;
    }
    .portfolio-img-container {
        min-width: 100%;
        max-height: 250px;
        min-height: 10%;
    }
}