:root {
    --darkPrimary: #120f10;
    --pinkPrimary: #CC0263;
    --purplePrimary: #DB00FF;
    --lighterPrimary: #e8dced;
    --grayPrimary: #E4ECF3;
    --grayMedium: #f1f1f1;
    --white: #fbfbfb;
}



/* General */

html {scroll-behavior: smooth;}

body {
    font-family: 'Satoshi', sans-serif;
    color: var(--darkPrimary);
    font-size: 18px;
    margin: 0;
    line-height: 26px;
    background-color: var(--white);
}

h1 {
    font-size: 3.75rem;
    margin: 0 0 30px;
    font-weight: 600;
    line-height: normal;
}

h2 {
    font-size: 4rem;
    font-weight: 800;
    margin: 0; 
    line-height: normal;
    margin-bottom: 30px;
}

h3 {
    font-size: 2rem;
    letter-spacing: 1px;
    font-weight: 600;
    margin: 0 0 30px;
    line-height: normal;
}

h4 {
    font-size: 1.3em;
    margin: 0 0 20px;
}

p, ul {margin: 0 0 30px;}

.text-center {text-align: center;}

a, button {
    color: var(--darkPrimary);
    font-weight: 600;
    text-decoration: none !important;
}
 
 a:focus, a:hover, button:hover, button:focus {
    outline: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
}

.primary-button {
    padding: 17px 32px;
    text-align: center;
    font-weight: 700;
    margin: 0;
    text-decoration: none !important;
    border-radius: 32px;
    background-color: var(--darkPrimary);;
    color: var(--white);
    transition: .2s !important;
    display: inline-block;
    font-size: 1em;
    border: none;
    cursor: pointer;
}

#heroSection .primary-button {
    background: rgb(204,2,99);
    background: -moz-linear-gradient(135deg, rgba(204,2,99,1) 0%, rgba(219,0,255,0.4990371148459384) 100%);
    background: -webkit-linear-gradient(135deg, rgba(204,2,99,1) 0%, rgba(219,0,255,0.4990371148459384) 100%);
    background: linear-gradient(135deg, rgba(204,2,99,1) 0%, rgba(219,0,255,0.4990371148459384) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cc0263",endColorstr="#db00ff",GradientType=1);    border: 1px solid;
    border: 2px solid var(--pinkPrimary);
    box-shadow: inset 0 0 20px var(--pinkPrimary);
    color: var(--white);
    margin-top: 30px;
}


.primary-button:hover {
    transform: scale(1.1) !important;
}

.intro-text.color-inverse {
    font-weight: 500 !important;
}

.img-responsive {
    width: 100%;
}

.intro-text {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 30px;
}

.home .intro-text {
    font-size: 2.75em;
    line-height: 1.25em;
    max-width: 1080px;
}

.intro-text p {
    margin: 0 0 30px;
}

h3.number-list > span {
    width: 80px;
    padding: 19px 0;
    background-color: var(--white);
    border-radius: 50%;
    margin-right: 10px;
    display: inline-block;
    text-align: center;
}

.special-list {
    margin-bottom: 50px;
    padding-left: 40px;
}

.special-list li {
    font-size: 1.25rem;
    margin: 0 0 15px;
    list-style: square;
    line-height: 1.5rem;
}

.special-list li > span {
    display: block;
    font-size: .75em;
}

.reveal {
    position: relative;
    transform: scale(1.1);
    opacity: 0;
    transition: 0.5s all ease-out;
}
  
.reveal.active {
    transform: scale(1);
    opacity: 1;
}

.reveal.right {
    transform: translateX(200px);
}
  
.reveal.right.active {
    transform: translateX(0);
}

.delay01 {
    transition-delay: .3s;
    animation-delay: .3s;
}

.delay02 {
    transition-delay: .6s;
    animation-delay: .6s;
}

.delay03 {
    transition-delay: .9s;
    animation-delay: .9s;
}

.delay04 {
    transition-delay: 1.2s;
    animation-delay: 1.2s;
}

.animation-left {
    position: relative;
    animation-name: animationLeft;
    opacity: 0;
    animation-duration: .5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes animationLeft {
    from {transform: translateX(-300px); opacity: 0;}
    to {transform: translateX(0); opacity: 1;}
}

.animation-scale {
    position: relative;
    animation-name: animationScale;
    opacity: 0;
    animation-duration: .3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes animationScale {
    from {transform: scale(1.25); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

.animation-right {
    animation-name: animationRight;
    opacity: 0;
    animation-duration: .3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes animationRight {
    from {transform: translateX(200px); opacity: 0;}
    to {transform: translateX(0); opacity: 1;}
}

.animation-bottom {
    position: relative;
    animation-name: animationBottom;
    opacity: 0;
    animation-duration: .3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes animationBottom {
    from {transform: translateY(200px); opacity: 0;}
    to {transform: translateY(0); opacity: 1;}
}

.animation-opacity {
    position: relative;
    animation-name: animationOpacity;
    opacity: 0;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes animationOpacity {
    from {opacity: 0;}
    to {opacity: 1;}
}




/* Layout */

main > section {
    padding: 150px 0 0;
    width: 100%;
    overflow: clip;
}

.container {
    width: 80%;
    margin: 0 10%;
    padding: 0 20px;
}

.container.no-margin-right {
    width: 90%;
    margin: 0 0 0 10%;
    padding-right: 0;
}

.container.no-margin-left {
    width: 90%;
    margin: 0 10% 0 0;
    padding-left: 0;
}


section > .container {
    position: relative;
    z-index: 1;
}

.bck-dark {
    background-color: var(--darkPrimary);
    color: var(--white);
}

.bck-dark .primary-button {
    background-color: var(--white);
    color: var(--darkPrimary);
}

.bck-gray-light {
    background-color: var(--grayMedium);
}

.bck-white {background-color: var(--white);}

.bck-gray {
    background-color: var(--lighterPrimary);
}

.flex-row {
    display: flex;
    flex-wrap: wrap; 
}

.flex-100 {
    width: 100%;
}

.flex-50 {
    width: 50%;
}

.flex-33 {
    width: 33.33%;
}

.flex-66 {
    width: 66.66%;
}

.align-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.height-100 {
    height: 100%;
}

.inner-margin {
    margin: 0 0 0 50px;
}

.no-padding-top {
    padding-top: 0 !important;
}

.xl-padding-bottom {padding-bottom: 150px !important;}

.md-padding-bottom {padding-bottom: 90px !important;}

.xl-margin-top {margin-top: 90px !important;}

.xl-margin-bottom {margin-bottom: 90px !important;}

.sm-margin-top {margin-top: 50px !important;}

.md-margin-top {margin-top: 60px !important;}

.md-margin-bottom {margin-bottom: 60px !important;}

.xs-margin-top {margin-top: 10px !important;}

.xs-margin-bottom {margin-bottom: 20px !important;}





/* Header */

.navbar {
    height: 90px;
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 10;
    transition: .2s ease-out;
    background-color: transparent;
}

.navbar.nav-active {
    background-color: var(--darkPrimary);
    transition: .2s ease-out;
}

.navbar .container {
    width: 90%; 
    margin: 0; 
    padding: 0 5%;
    height: 100%;
}

.navbar.active > .container { height: 90px !important; }

.navbar #openNav { 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 8;
    width: 60px;
    height: 30px;
    cursor: pointer;
    transition: .2s ease-out;
}

.navbar #openNav:hover { 
    transform: scale(.8);
}

.navbar #openNav > span { 
    position: absolute; 
    height: 4px; 
    border-radius: 2px;
    background: rgb(204,2,99);
    background: -moz-linear-gradient(90deg, rgba(204,2,99,1) 0%, rgba(219,0,255,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(204,2,99,1) 0%, rgba(219,0,255,1) 100%);
    background: linear-gradient(90deg, rgba(204,2,99,1) 0%, rgba(219,0,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cc0263",endColorstr="#db00ff",GradientType=1);
    transition: .2s; border-radius: 2px;
}

.navbar #openNav > .menu-line-01 { 
    top: 0;
    width: 45px;
    margin-left: 10px;
}

.navbar #openNav > .menu-line-02 { 
    top: 12px;
    width: 60px;
}

.navbar #openNav > .menu-line-03 { 
    top: 24px;
    width: 45px;
    margin-left: 5px;
}

.navbar.active #openNav > .menu-line-01{
    transform: translateY(12px) rotate(45deg);
    height: 8px;
    margin-left: 0;
}

.navbar.active #openNav > .menu-line-02 { width: 0;}

.navbar.active #openNav > .menu-line-03 { 
    transform: translateY(-12px) rotate(-45deg);
    height: 8px;
    margin-left: 0;
}

.navbar #logo {
    display: block;
    width: 50px;
    position: relative;
    z-index: 8;
    transition: .2s ease-out;
}

.navbar #logo:hover {
    transform: scale(.8) !important;
}

.navbar #menu { 
    position: absolute;
    z-index: 3;
    left: 100%;
    width: 100%;
    height: calc(100vh - 180px);
    padding-top: 90px;
    padding-bottom: 90px;
    background: var(--darkPrimary);
    top: 0;
    transition: .3s ease-out;
}

.navbar.active #menu { 
    display: block;
    left: 0; 
}

.navbar nav ul { 
    flex-direction: column; 
    margin: 0; 
    width: 100%;
}

.navbar nav ul li { 
    list-style: none; 
    margin: 25px 0 0 5%; 
}

.navbar nav ul li a {
    font-size: 4em; 
    line-height: normal; 
    margin: 0; 
    padding: 0;
    color: var(--pinkPrimary);
    background: -webkit-linear-gradient(0deg, var(--pinkPrimary), #db00ff73 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: -2s ease-out;
}

.navbar nav ul li a:hover {
    color: var(--white);
    background: none;
    -webkit-text-fill-color: var(--white);
}

.menu-btn {
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation-name: menuButton;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
    animation-delay: 1s;
    background: transparent;
  }
 
 .menu-btn.menu-back img {
    width: 60%;
    margin: auto;
    transition: .2s;
 }
 
 .menu-btn.menu-back:hover img, .menu-btn.menu-back:focus img {
    width: 35%;
 }

.social-buttons > a {
    color: #6d087b;
    display: flex;
    align-items: center;
    font-size: 2rem; 
    margin: 50px 0;
}

.social-buttons > a:hover {filter: grayscale(1) brightness(7);}

 .social-buttons > a img {
    height: 60px;
    margin-right: 15px;
    width: 60px;
    margin-right: 20px;
}



/* Hero */

#heroSection {
    height: 100vh;
    padding: 0 !important;
    position: relative;
    background: black url('../img/bck-hero.jpg') center no-repeat;
    background-size: cover;
}

.hero-bck {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-bck > img:first-of-type {
    mix-blend-mode: overlay;
    position: absolute;
    width: 40%;
}

.hero-bck > img:last-of-type {
    mix-blend-mode: multiply;
    position: absolute;
    height: 90%;
    top: 10%;
}

#heroSection .hero-content {
    text-align: center;
    padding: 220px 0 0;
}

.hero-headline {
    font-size: 6rem;
    font-weight: 800;
    display: block;
    line-height: normal;
    padding-bottom: 5px;
    -webkit-text-stroke: 1px var(--white);
    color: transparent;
}

.hero-headline > strong {
    color: var(--white);
}

#heroSection .hero-content > h1 {
    font-weight: 500;
    margin-top: 50px;
    text-transform: uppercase;
    letter-spacing: .25rem;
}

#heroSection .hero-content > h1 span {
    display: block;
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: 400;
}

#heroSection .hero-content > h1 span:last-of-type {
    font-size: 2rem;
    font-weight: 600;
}

#parallaxBck {
    overflow-y: unset;
    position: relative;
    width: 100%;
    min-height: 250px;
    padding-top: 0 !important;
    background: black;
    padding-bottom: 150px;
}

.large-text {
    position: absolute;
    line-height: 6vw;
    font-size: 8vw;
    font-weight: 900;
    display: flex;
    align-items: center;
    width: max-content;
    color: transparent;
    min-height: 100px;
}

.text01 {
    top: 10px;
}

.text02 {
    top: 100px;
    right: 0;
    font-size: 10vw;
    z-index: 1;
}

.text03 {
    top: 200px;
    font-size: 6vw;
}

.text02.large-text span {
    color: var(--white);
}

.large-text span {
    -webkit-text-stroke: 1px var(--white);
}




/* Portfolio */

#aboutMeSection .img-container {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 45%;
    z-index: -1;
    height: 75vh;
    background: rgb(234,234,234);
    background: -moz-linear-gradient(135deg, rgba(234,234,234,1) 0%, rgba(251,251,251,1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(234,234,234,1) 0%, rgba(251,251,251,1) 100%);
    background: linear-gradient(135deg, rgba(234,234,234,1) 0%, rgba(251,251,251,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eaeaea",endColorstr="#fbfbfb",GradientType=1);
}

#aboutMeSection .img-container img {
    position: absolute;
    bottom: 0;
    right: -20%;
    height: 100%;
    width: auto;
}




/* Portfolio */

#portfolioSection {
    background-color: var(--darkPrimary);
    color: var(--white);
}

#portfolioSlider {
    height: 600vh; 
    position: relative; 
    top: 0;
}

.slide {
    height: 100vh;
    position: relative;
}

.slide::before {
    content: '';
    position: absolute;
    display: block;
    z-index: 0;
    width: 100vw;
    left: -45%;
    border-bottom: 1px solid var(--white);
    top: 50%;
}

.slide > .slide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.slide > .slide-content > span {
    font-size: 3rem;
    display: block;
    width: fit-content;
    margin-bottom: 20px;
    border: 2px solid var(--white);
    padding: 30px 14px;
    margin-left: -16px;
    font-weight: 300;
}

.slide > .slide-content h3 {
    font-size: 3.25rem;
    font-weight: 800;
}

.slide > .slide-content .portfolio-description { margin: 30px 0 10px;}

.slide > .slide-content .portfolio-description .portfolio-title { 
    display: block;
    font-size: 2rem;
    margin-bottom: 15px;
}

.slide > .slide-content > a {
    padding: 17px 32px;
    border: 2px solid var(--white);
    display: flex;
    max-width: fit-content;
    border-radius: 32px;
    color: var(--white);
    text-transform: uppercase;
    margin-top: 30px;
    transition: .2s ease-out;
}

.slide > .slide-content > a:hover {
    transform: scale(1.1);
}

#portfolioImgContainer {
    height: 100vh;
    position: sticky; 
    top: 0;
}


#portfolioImgContainer > .slider-container {
    height: 60vh;
    margin: 200px 0 0 100px;
    overflow: hidden;
    position: relative;
}

#portfolioImgContainer > .slider-container img {
    position: absolute;
    z-index: 1;
    top: 50%;
    opacity: 0;
}

#portfolioImgContainer > .slider-container img.img-animation {
    animation: .5s cubic-bezier(0,1.2,1,1) forwards imgAnimation;
    z-index: 2;
}

@keyframes imgAnimation {
    from {
        filter: brightness(3);
        top: 50%;
        opacity: 0;
    }
    to {
        filter: brightness(1);
        top: 0;
        opacity: 1;
    }
}


/* Illustration */

#illustrationSection img {
    position: relative;
    top: -100px;
}




/******* Pages *******/

.portfolio-page > .navbar {background-color: var(--darkPrimary);}

section.hero-portfolio {
    height: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 150px 0 60px;
}

section.hero-portfolio .hero-content {
    max-width: 600px;
}

section.hero-portfolio .hero-content {
    max-width: 600px;
}

section.hero-portfolio .hero-content h1 {
    color: var(--white);
}

.hero-bck-container {
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

section.challenge-area {
    background: var(--white);
}

section.quotes-area {
    padding: 120px 0;
    position: relative;
    margin-top: 60px;
    overflow-y: initial;
}

section.quotes-area .quotes-text {
    font-size: 1.8em;
    line-height: 1.25em;
    max-width: 540px;
    padding-right: 60px;
    font-weight: 500;
    position: relative;
}

section.quotes-area .quotes-text::before {
    z-index: -1;
    height: 90px;
    content: '';
    position: absolute;
    width: 100%;
    left: -60px;
    top: -50px;
    background: url(../img/quote-right.svg) no-repeat;
    background-size: contain;
    opacity: .15;
}

section.quotes-area > .img-container {
    position: absolute;
    width: calc(50% - 80px);
    right: 0;
    bottom: 120px;
    max-height: 450px;
    margin-top: 0;
    overflow: hidden;
    align-items: center;
    display: flex;
}

.portfolio-content {
    max-width: calc(100% - 100px);
    padding-right: 100px;
}

.portfolio-content li:not(:last-of-type) {
    margin-bottom: 20px;
}

article {
    margin: 60px 0 90px;
}

.description-container {
    font-size: 0.9em;
    margin: 30px 0 0;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.3);
}

.description-container > li {
    list-style: none;
    margin: 5px 0;
}

.description-container > li > span:first-of-type {
    font-weight: 600;
    min-width: 80px;
    display: inline-block;
}




/****** Footer *******/

footer {
    padding: 120px 0 0;
}

footer h2 {
    background: -webkit-linear-gradient(45deg, var(--pinkPrimary), var(--purplePrimary) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

footer .footer-blocks > * {
    padding: 60px 4%;
    width: 20%;
}

footer .footer-blocks > #footerBlock01 {
    width: 30%;
    padding: 60px 4% 60px 10%;
}

footer .footer-blocks > #footerBlock01 > * {
    padding: 0 20px;
}

footer a {
    color: var(--white) !important;
    text-decoration: none;
    display: block;
    transition: .2s;
}

footer a:hover {
    color: var(--pinkPrimary) !important;
}

footer #footerBlock02 a {
    margin-top: 10px;
}

footer h3 {
    text-align: left;
    font-size: 1.4em;
    margin-bottom: 40px;
}

footer ul {
   list-style: none;
   padding-left: 0;
}

footer ul > li {
    margin: 0 0 40px;
 }

.form-container form > * {
    margin-bottom: 30px;
}

.form-container form input, .form-container form textarea {
    border: none;
    border-bottom: 1px solid var(--lighterPrimary);
    background: no-repeat;
    width: 100%;
    padding: 10px 0; 
    color: var(--white);
    font-size: 1em;
}

.form-container form input::placeholder, .form-container form textarea::placeholder {
    opacity: .85;
}

.form-container form input:focus-visible, .form-container form textarea:focus-visible {
    outline-offset: 0;
    outline: var(--grayPrimary) auto 0;
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--grayPrimary);
}

footer .title-arrow {
    width: 24px;
    height: 24px;
    display: inline-block;
    float: right;
    background: url('../img/icon-arrow-down-right.svg') center no-repeat;
    background-size: 24px;
}







/******* Media queries *******/

@media screen and (max-width: 767px) {   
    
    body {font-size: 18px; line-height: 24px;}
    
    .container { width: calc(100% - 40px); margin: 0;}

    .container.no-margin-left {margin-left: 0;}

    .xl-margin-bottom { margin-bottom: 30px !important;}

    .xl-margin-top { margin-top: 30px !important;}

    .md-margin-top { margin-top: 20px !important;}

    .xs-margin-top { margin-top: 0 !important;}

    .xl-padding-bottom { padding-bottom: 30px !important;}

    .intro-text {font-size: 1em; max-width: 100%;}

    .word-carrusel {flex-direction: column; margin-top: 30px; margin-bottom: 60px;}

    .hero-headline {font-size: 2.5rem;}

    #heroSection .hero-content {padding: 150px 0 0;}

    #heroSection .hero-content > h1 span {font-size: 1.125rem;}

    #heroSection .hero-content > h1 span:last-of-type {font-size: 1.25rem;}

    h1 { font-size: 2.4em; margin: 0 0 20px;}

    h2 {font-size: 3rem; margin: 0 20px 20px;}

    .home h2 {font-size: 2.75rem; margin: 0 0 20px;}

    .home .intro-text { font-size: 1.75rem; line-height: 1.25em; max-width: 100%;}

    h3 { font-size: 1.4em; margin-bottom: 20px; text-align: center;}

    h4 {margin-bottom: 20px;}

    p {margin: 0  0 20px;}

    .intro-text p { margin: 0 0 20px;}

    .menu-btn.menu-back img { width: 50%; margin: 0 0 0 auto; }

    main > section {padding: 50px 0 0;}

    .flex-row {flex-direction: column;}

    .flex-50, .flex-33, .flex-66 {width: 100%;}

    .inner-margin { margin: 20px 0;}
    
    .navbar #menu > .container {justify-content: space-around; align-items: flex-start;}

    .navbar #menu nav ul li { margin: 5% 0;}

    .navbar #menu nav ul li a { font-size: 2em; font-weight: 800;}

    #heroSection .hero-content > h1 { font-size: 1em; letter-spacing: 1px;}

    #parallaxBck { min-height: 150px; padding-bottom: 100px !important;}

    #parallaxBck > img { bottom: 0; z-index: 0; width: 65%; height: auto;}

    .large-text { font-size: 20vw !important; height: 60px !important; min-height: inherit;}

    .text01 {top: 0;}

    .text02 {top: 60px;}

    .text03 {top: 120px;}

    .special-list li { font-size: 1em;  line-height: 1.35em;}

    #aboutMeSection .img-container { position: relative; bottom: -30px; width: 100%; height: 60vh;}

    #portfolioSection .container.no-margin-right { width: calc(100% - 20px); margin: 0 0 0 20px;}

    #portfolioImgContainer {display: none;}

    .slide::before { left: -20px; top: 100%;}

    .slide > .slide-content h3 { font-size: 3rem; text-align: left; }

    .slide > .slide-content > span {margin-left: 0;}

    .slide > .slide-content .portfolio-description { margin: 10px 0 10px;}

    .slide > .slide-content .portfolio-description .portfolio-title {font-size: 1.5rem;}
    
    article { margin: 30px 0 40px;}

    .illusttation-pic-container { position: relative; min-height: 300px; width: 100%; top: 100vh;}

    .illusttation-pic-container > img { top: 120vh; width: 90vw;}

    #illustrationSection img {top: 0; margin-bottom: 20px;}

    section.hero-portfolio > .container > .flex-row,  #heroSection .container > .flex-row {justify-content: center;}

    .special-list { margin: 0 0 30px; padding-left: 20px;}

    section.quotes-area .quotes-text { font-size: 1.25em; line-height: 1.2em; max-width: 100%; padding-right: 0; font-weight: 500; position: relative; text-align: center;}

    section.quotes-area .quotes-text::before { height: 60px; width: 100%; left: 0; top: -80px; background: url(../img/quote-right.svg) no-repeat center center; background-size: contain; }

    section.quotes-area { padding: 120px 0 0; margin-top: 20px;}

    section.quotes-area > .img-container { position: relative; width: 100%; right: 0; margin-top: 50px !important; bottom: 0; }

    .container.no-margin-right { width: calc(100% - 40px); margin: 0 20px; padding: 0; }

    .portfolio-content { max-width: 100%; padding-right: 0;}

    article .img-responsive { margin: 10px 0 !important;}

    .challenge-area .special-list {margin-bottom: 0;}

    .solution-area > .text-center {margin-left: 20px; margin-right: 20px;}

    h3.number-list > span {width: 54px; padding: 10px 0;}

    section.hero-portfolio > .container > .flex-row, 
    #heroSection .container > .flex-row {justify-content: center;}

    footer .footer-blocks > * { padding: 40px 20px 0 !important; width: calc(100% - 40px) !important;}

    footer .footer-blocks > #footerBlock01 > * { padding: 0;}

    footer .intro-text {margin-bottom: 0;}

    footer .md-margin-bottom {margin-bottom: 0 !important;}

    footer h3 {margin-bottom: 20px;}

    footer ul > li { margin: 0 0 20px;}

    footer .footer-blocks > #footerBlock03 {padding-bottom: 60px !important;}

}



@media screen and (max-width: 1279px) {

    .navbar {height: 60px;}

    .navbar > .container, .navbar.active > .container { flex-direction: row; height: 60px !important;}

    .navbar > .container #logo { height: 36px;}

    .navbar > .container #logo img { width: 40px;}

    .navbar #openNav, .navbar #openNav > span {margin: 0 !important; transform: scale(0.9);}

    .navbar.active #openNav > .menu-line-02 { width: 0 !important;}

    .navbar #menu {height: calc(100vh - 120px); padding-top: 60px; padding-bottom: 60px;}

    .navbar .social-buttons {padding-left: 40px;}

    .navbar .social-buttons a {margin: 10% 0; font-size: 1.5rem;}

    .navbar .social-buttons a > img {width: 40px; height: 40px;}

    .hero-bck > img:first-of-type {width: 80%;}

    .typewrite {display: block;}

    section.hero-portfolio { height: auto; min-height: inherit; padding: 60px 0;}

    #background01 { background-color: #00c3e3;}

    #background02 { background-color: #ff805a;}

    #background03 { background-color: #54aadd;}

    #background04 { background-color: #4cc18e;}

    #background05 { background-color: #33a4e9;}

    #background06 { background-color: #0f52a2;}

    #background07 { background-color: #6a7788;}

    .hero-bck-container {display: none;}

    h3.number-list { text-align: left; margin-bottom: 30px;}

}



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

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

    .container { width: 90%; margin: 0 5%; padding: 0;}

    .container.no-margin-right { width: 95%; margin: 0 0 0 5%;}

    .navbar .social-buttons { bottom: 80px !important;}

    .navbar #menu > .flex-row > * { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0; align-items: flex-start;}

    .navbar nav ul {padding-left: 0;}

    .navbar #menu nav ul li { margin: 15% 0;}

    .navbar #menu nav ul li a { font-size: 3.5em; font-weight: 800;}

    main > section {padding: 80px 0 0;}

    .inner-margin { margin: 20px 0 30px 30px;}

    .xl-margin-bottom { margin-bottom: 60px !important;}

    .xl-padding-bottom {padding-bottom: 50px !important;}

    .intro-text {font-size: 1.1em; line-height: 1.4em; max-width: 90%;}

    .special-list li {font-size: 1.1em; line-height: 1.4em;}

    #heroSection .container > .flex-row {justify-content: left;}

    .hero-headline {font-size: 5rem;}

    h2 { font-size: 2.8em;}

    .navbar nav ul li a { padding: 0;}

    .hero-bck-container > img {height: 100%; position: relative; right: 25%; transform: none !important;}

    .text01 {font-size: 6em;}

    .text02 {font-size: 8em;}

    .text03 {font-size: 5em;}

    #aboutMeSection .img-container {width: 100%; height: 50vh;}

    .slide, #portfolioImgContainer {height: 60vh;}

    .slide::before {left: -17%;}

    #portfolioSlider { height: 360vh; position: relative; top: 0;}

    #portfolioImgContainer > .slider-container { height: calc(60vh - 150px);}

    section.hero-portfolio .hero-content { max-width: 70%;}

    section.hero-portfolio {min-height: 50vh;}

    .hero-bck-container {height: calc(50vh + 200px);}

    #parallaxBck > img {bottom: -150px; right: -60px; height: 90%; z-index: 0;}

    #portfolioSection .container.no-margin-right { width: calc(95% - 30px); margin-left: calc(5% + 30px);}

    #skillsSection .flex-33 {width: 45%;}

    section.quotes-area .quotes-text { font-size: 1.2em; padding-right: 30px;}

    .challenge-area .flex-50 {width: 80%;}

    .portfolio-content { max-width: calc(100% - 30px); padding-right: 30px;}

    section.quotes-area { padding: 80px 0; margin-top: 30px;}

    section.quotes-area > .img-container {width: calc(50% - 50px); bottom: 80px;}

    h3.number-list > span {width: 54px; padding: 6px 0;}

    footer {padding: 60px 0 0;}

    footer .intro-text {margin-bottom: 0;}

    footer .footer-blocks > #footerBlock01 {width: 35%; padding: 60px 4% 60px 5%;}

    footer .footer-blocks > #footerBlock01 > * { padding: 0;}

    footer .title-arrow { display: none;}
    
    footer .container {margin-bottom: 0 !important;}

}



@media screen and (min-width: 1280px) and (max-width: 1600px) {
    .hero-headline {font-size: 4.5rem;}
    .slide > .slide-content h3 { font-size: 2.75rem;}
}