/*
Theme Name: Denise Maitan - 2021
Author: quicksheep
Author URI: http://quicksheep.com
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 2021.01
*/


body {
    font-family: roboto;
    font-weight: 400;
    font-size: 56.25%;
    line-height: 1.6;
}
body * {
    box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}
h1 {
    font-family: 'roboto condensed';
    font-size: 530%;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;

}

h2 {
    font-family: 'roboto condensed';
    font-size: 540%;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
h2.alt {
    font-size: 420%;
    margin-bottom: 40px;

}
h3,
.intro {
    font-family: 'roboto';
    font-size: 220%;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 30px;

}
p {
    font-family: roboto;
    font-size: 200%;
    font-weight: 300;

}
img {
    background: grey;
    min-width: 50px;
    min-height: 50px;
    width: 100%;
    height: auto;

}
nav a,
button {
    font-family: 'roboto';
    font-size: 160%;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 6px;
    margin: 5px 10px;
    display: inline-block;
}

.mint {
    background: #cfe8ea;
}

.inner {
   text-align: left; 
   margin: 0 auto;
   max-width: 1600px;
}
.section {
    padding: 120px 0;
    text-align: center;
}

#site-header {

    position: absolute;
    top: 0;
    lefT: 0;
    width: 100%;
    text-align: center;
}

#site-header nav {
    margin: 0 auto;
    max-width: 90%;
    padding: 0;
    height: 100px;


    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    align-items: center;
    align-content: center;
}
#site-header nav a {
    color: white;
}
    #site-title {
        color: white;
        font-family: 'roboto condensed';
        font-weight: 700;
        font-size: 350%;
    }
    #main-menu {

    }
    #main-menu li {
        displaY: inline;
    }
#hero-layer {
    background-color: #3EA4AA;
    height: 800px;
    min-height: 100vh;
    display: grid;
    justify-content: center;
    align-items: center;
}
#hero-layer * {
    color: white;
}
    #hero-content {
        width: 500px;
        text-align: left;
        margin-left: -50%;
    }
    #demo-reel-buttons {

    }
        #demo-reel-buttons button {
            margin-left: 0;
            margin-top: 20px;
            margin-right: 20px;

        }
        #vfx-reel {

        }
        button.pink {
            background: #EE3C7C !important;
            color: white !important;
        }
        button {
            background: white;
            color: black !important;
            paddinG: 15px 20px !important;
            cursor: pointer;
            
        }
#portfolio {

}
    #portfolio-filters {
        text-align: center;
        border: none;


    }
    #portfolio-items {
        border: none;
        
    }
    #portfolio-items .inner {
       text-align: center;
       transition: all 1s ease-in-out;
    }
    .masonry {
        padding: 50px 0;
    }

#about {

}
#about .inner {
    displaY: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-areas: 'a a a a b b b b b b';
    grid-gap: 40px;
    align-items: center;

}
#about .image {
    grid-area: a;
}
#about .text {
    grid-area: b;
}
    #social-links {
        margin-top: 30px;
    }
    #social-links a {
        margin-lefT: 0;
        margin-right: 30px;
        padding-left: 0;
        text-transform: uppercase;
        color: #3EA4AA;
    }  
#extended-about {
    
}
#extended-about .inner {
    widtH: 800px;
    text-align: center;
} 
    #fact-list {
        text-align: left;

    }
    #fact-list .fact {
        text-align: left;
         display: flex;
         flex-direction: row;
        justify-content: flex-start;
        margin-top: 40px;

    }
    #fact-list .fact .number {
        width: 80px;
        height: 80px;
        line-height: 80px;
        margin-right: 20px;

        border-radius: 125px;
        background-color: #3EA4AA;
        color: white;

        font-family: 'roboto condensed';
        font-weight: 700;
        font-size: 430%;
        text-align: center;
    }
    #fact-list .fact .text {
        font-family: roboto;
        font-size: 260%;
        font-weight: 300;
        display: block;
        text-align: left;
    }
    strong {
        font-weighT: 700;
    }
#contact-form {
}
#contact-form .inner {
    displaY: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-areas: 'a a a a b b b b b b';
    grid-gap: 40px;
}
#contact-form .text {
    grid-area: a;
}
#contact-form .form {
    grid-area: b;
}


.thumbnailInner,
.thumbnailInner2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}   
.thumbnailInner {
    background-color: grey;
    background-size: cover;
    background-position: center center;
}       
.thumbnailInner2 {
    displaY: grid;
    justify-content: center;
    align-items: center;
    align-content: flex-end;
    border: 6px solid white;
}
.thumbnailInner2 * {
    font-size: 120%;
}

.not-ready .thumbnailInner2:before {
    content: '';
    background: red;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    z-index: 100;
}
.masonryItem {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 33.33333333%;
    height: 0;
    padding-top: 33.33333333%;

    float: left;
}

.masonryItem--height2 {
    width: 33.33333333%;
    padding-top: 66.66666666%;
}
.masonryItem--width2 {
    width: 66.66666666%;
    padding-top: 33.33333333%;
 
}