/* Sanitize.css
 * ============*/

/**
 * Add border box sizing in all browsers (opinionated).
 */

 *,
 ::before,
 ::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
 /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
 
 ::before,
 ::after {
   text-decoration: inherit; /* 1 */
   vertical-align: inherit; /* 2 */
 }
 
 /**
  * 1. Use the default cursor in all browsers (opinionated).
  * 2. Change the line height in all browsers (opinionated).
  * 3. Use a 4-space tab width in all browsers (opinionated).
  * 4. Remove the grey highlight on links in iOS (opinionated).
  * 5. Prevent adjustments of font size after orientation changes in
  *    IE on Windows Phone and in iOS.
  * 6. Breaks words to prevent overflow in all browsers (opinionated).
  */
 
 html {
   cursor: default; /* 1 */
   line-height: 1.5; /* 2 */
   -moz-tab-size: 4; /* 3 */
   tab-size: 4; /* 3 */
   -webkit-tap-highlight-color: transparent /* 4 */;
   -ms-text-size-adjust: 100%; /* 5 */
   -webkit-text-size-adjust: 100%; /* 5 */
   word-break: break-word; /* 6 */
 }
 

 /**
  * 1. Add the correct sizing in Firefox.
  * 2. Show the overflow in Edge 18- and IE.
  */
 
 hr {
   height: 0; /* 1 */
   overflow: visible; /* 2 */
 }
 
 /* Text-level semantics
  * ========================================================================== */
 
 /**
  * Remove the gray background on active links in IE 10.
  */
 
 a {
   background-color: transparent;
 }
 
 /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
 
 b,
 strong {
   font-weight: bolder;
 }

 /**
  * Remove the border on images within links in IE 10-.
  */
 
 img {
   border-style: none;
 }
  
 /**
  * Remove the inner border and padding of focus outlines in Firefox.
  */
 
 ::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 /**
  * Restore the focus outline styles unset by the previous rule in Firefox.
  */
 
 :-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
 /* User interaction
  * ========================================================================== */
 
 /*
  * 1. Remove the tapping delay in IE 10.
  * 2. Remove the tapping delay on clickable elements
       in all browsers (opinionated).
  */
 
 a {
   -ms-touch-action: manipulation; /* 1 */
   touch-action: manipulation; /* 2 */
 }


 /* =====
 Main CSS
 ======== */


:root {
    --font-family-base: 'Montserrat', Helvetica, Verdana, Arial, sans-serif;

    --body-font-size: 16px;
    --spacer-default: var(--body-font-size);
    --spacer-large: calc(var(--spacer-default) * 2);
    --spacer-xlarge: calc(var(--spacer-default) * 3);
    --spacer-xxlarge: calc(var(--spacer-large) * 2);
    --spacer-xxxlarge: calc(var(--spacer-xlarge) * 2);

    --global-max-width: 1280px;

    --color1: #000;
    --color2: #FFF;
    --color3: #241f21;
    --color4: #282829;
    --color5: #f5c9bf;
    --body-bg-color: var(--color2);
    --primary-color: var(--color5);
    --secondary-color: var(--color4);
    --secondary-contrast: var(--color2);

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    --font-loading-animation: .7s;

}

@keyframes loading {
    0% {
        height: 0;
        opacity: 0;
        }
    50% {
        height: 0;
        opacity: 0;
    }
    100% {
        height: 100%;
        opacity: 1;
    }
}

@keyframes font-loading {
    0% {
        color: transparent;
        }
    100% {
        color: transparent;
    }
}

html {
    overflow-y: scroll;
}

html,
body {
    height: 100%;
    width: 100%;
}

body {
    background: var(--body-bg-color);
    font-family: var(--font-family-base);
    font-size: var(--body-font-size);
    line-height: 1.1;
}

h1 {
    margin: 0;
}

hr {
    color: var(--color3);
}

img {
    height: auto;
}

.main {
    animation-name: loading;
    animation-duration: .5s;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    margin: auto;
    overflow: hidden;
    max-width: var(--global-max-width);
    width: 100%;
}

header {
    background: var(--primary-color);
    box-shadow: 0 var(--spacer-xxxlarge) 0 var(--primary-color), -1000px 0 0 var(--primary-color), 1000px 0 0 var(--primary-color), -1000px var(--spacer-xxxlarge) 0 var(--primary-color), 1000px var(--spacer-xxxlarge) 0 var(--primary-color);
    color: var(--secondary-contrast);
    display: grid;
    grid-area: 1 / 1 / 2 / 3;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    height: calc(var(--spacer-default) * 25);
    padding: var(--spacer-large);
}

header::before {
    background: var(--secondary-color);
    content: "";
    grid-area: 1 / 1 / 2 / 3;
}

.header-title {
    animation-name: font-loading;
    animation-duration: var(--font-loading-animation);
    align-self: center;
    color: var(--secondary-contrast);
    grid-area: 1 / 1 / 2 / 2;
    font-size: calc(var(--body-font-size) * 5);
    letter-spacing: 0;
    padding-left: var(--spacer-xxlarge);
}

.header-img {
    box-sizing: content-box;
    grid-area: 1 / 2 / 1 / 2;
    justify-self: end;
    padding-right: var(--spacer-xxlarge);
    padding-top: var(--spacer-xlarge);
    width: calc(var(--spacer-default) * 8);
}

.content-row1-l {
    grid-area: 2 / 1 / 3 / 2;
    padding-left: calc(var(--spacer-xxlarge) + var(--spacer-large));
    padding-top: calc(var(--spacer-large) + var(--spacer-xlarge) + var(--spacer-xxlarge));
}

.content-row1-l-title {
    animation-name: font-loading;
    animation-duration: var(--font-loading-animation);
    color: var(--color3);
    font-size: calc(var(--body-font-size) * 3);
    letter-spacing: 0;
    position: relative;
}

.content-row1-l-title::before {
    background: var(--primary-color);
    bottom: 0;
    content: "";
    display: block;
    height: 90%;
    left: calc(var(--spacer-large) * -1);
    margin: auto;
    position: absolute;
    top: 0;
    width: 4px;
}

.content-row1-l-txt {
    animation-name: font-loading;
    animation-duration: var(--font-loading-animation);
    color: var(--color3);
    font-size: calc(var(--body-font-size) * 1.5);
    font-weight: 300;
    padding-top: var(--spacer-xlarge);
}

.content-row1-r {
    color: var(--secondary-contrast);
    display: grid;
    background: var(--secondary-color);
    grid-area: 2 / 2 / 3 / 3;
    grid-template-rows: auto;
    margin-right: var(--spacer-large);
    margin-top: var(--spacer-xlarge);
    padding: var(--spacer-xxlarge) 0 var(--spacer-xxlarge) 0;
}

.content-row1-r-item {
    align-items: center;
    display: grid;
    grid-template-rows: 1fr;
    padding: calc(var(--spacer-default) / 2) 0;
}

.article-img {
    grid-area: 1 / 1 / 2 / 2;
    margin-left: calc(var(--spacer-default) * 3 / -2);
    width: calc(var(--spacer-default) * 3);
}

.article-img-bg {
    background: var(--primary-color);
    border: 4px solid var(--color2);
    border-radius: 50%;
    grid-area: 1 / 1 / 2 / 2;
    height: calc(var(--spacer-default) * 8);
    margin-left: calc(var(--spacer-default) * 8 / -2);
    width: calc(var(--spacer-default) * 8);
}

.article-title {
    animation-name: font-loading;
    animation-duration: var(--font-loading-animation);
    color: var(--secondary-contrast);
    font-size: calc(var(--body-font-size) * 2);
    grid-area: 1 / 1 / 2 / 2;
    letter-spacing: 0;
    margin-left: calc(var(--spacer-default) * 7);
}

.content-row2-l {
    grid-area: 3 / 1 / 4 / 2;
    padding: calc(var(--spacer-xxlarge) + var(--spacer-default)) 0;
    position: relative;
    z-index: 1;
}

.content-row2-l::before {
    background: linear-gradient(90deg, var(--secondary-color) 6%, var(--primary-color) 0, var(--primary-color));
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 70%;
    z-index: -1;
}

.customers-side-note {
    background: var(--body-bg-color);
    height: 100%;
    margin-left: calc(var(--spacer-xxlarge) + var(--spacer-large));
    max-width: 400px;
    padding-right: var(--spacer-xxxlarge);
    padding-top: var(--spacer-large);
    width: 30vw;
}

.customers-side-note-title {
    animation-name: font-loading;
    animation-duration: var(--font-loading-animation);
    color: var(--color3);
    font-size: calc(var(--body-font-size) * 2.5);
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

.customers-side-note-txt {
    animation-name: font-loading;
    animation-duration: var(--font-loading-animation);
    color: var(--color3);
    font-size: calc(var(--body-font-size) * 1.5);
    font-weight: 700;
}

.customers-side-note hr {
    margin: calc(var(--spacer-default) * 2) 0;
}

.content-row2-r {
    background: var(--primary-color);
    /* box-shadow:  -32vw 0 0 var(--primary-color), -34vw 0 0 var(--secondary-color), 0 calc(var(--spacer-xxlarge) + var(--spacer-default)) 0 var(--secondary-color);*/
    box-shadow:  0 calc(var(--spacer-xxlarge) + var(--spacer-default)) 0 var(--secondary-color);
    grid-area: 3 / 2 / 4 / 3;
    margin-right: var(--spacer-large);
    padding: var(--spacer-xxlarge) 0 var(--spacer-xxlarge) 0;
}

.customers {
    padding: var(--spacer-default) 0;
}

.customers-title {
    animation-name: font-loading;
    animation-duration: var(--font-loading-animation);
    color: var(--color3);
    font-size: calc(var(--body-font-size) * 1.5);
    font-weight: 700;
    margin-bottom: 2px;
}

.customers-txt {
    animation-name: font-loading;
    animation-duration: var(--font-loading-animation);
    color: var(--color3);
    font-size: calc(var(--body-font-size) * 1.5);
}

footer {
    color: var(--color3);
    display: grid;
    font-size: calc(var(--body-font-size) * 2);
    font-weight: 700;
    grid-area: 4 / 1 / 5 / 3;
    justify-content: center;
    padding-bottom: var(--spacer-xxxlarge);
    padding-top: calc(var(--spacer-xxlarge) * 2);
}

@media (max-width: 992px) {
    :root {    
        --body-font-size: 14px;
    }
}

@media (max-width: 768px) {
    :root {    
        --body-font-size: 12px;    
    }
}

@media (max-width: 576px) {
    :root {    
        --body-font-size: 12px;
        --spacer-default: 10px;
    }

    .main {
        grid-template-columns: 1fr;
    }

    header {
        box-shadow: 0px var(--spacer-xlarge) 0 var(--primary-color);
        grid-area: 1 / 1 / 2 / 2;
        grid-template-columns: 1fr;
        padding: 0;
    }

    .header-title {
        padding-left: var(--spacer-xlarge);
    }

    .header-img {
        display: none;
    }

    .content-row1-l {
        grid-area: 2 / 1 / 3 / 2;
        padding: calc(var(--spacer-large) + var(--spacer-xlarge)) var(--spacer-xlarge) var(--spacer-large);
    }

    .content-row1-l-title::before {
        display: none;
    }

    .content-row1-r {
        grid-area: 3 / 1 / 4 / 2;
        margin: 0;
        padding-bottom: var(--spacer-xxxlarge);
        padding-top: var(--spacer-large);
    }

    .article-img {
        margin-left: calc(var(--spacer-default) * 5 / -15.5);
        width: calc(var(--spacer-default) * 5);
    }
    
    .article-img-bg {
        height: calc(var(--spacer-default) * 10);
        margin-left: calc(var(--spacer-default) * 10 / -3.5);
        width: calc(var(--spacer-default) * 10);
    }

    .article-title {
        margin-left: calc(var(--spacer-default) * 12);
    }

    .content-row2-l {
        grid-area: 4 / 1 / 5 / 2;
        padding: 0;
    }

    .customers-side-note {
        margin-left: 0;
        margin-top: calc(var(--spacer-xlarge) * -1);
        padding: var(--spacer-xlarge) 0 calc(var(--spacer-xlarge) * 2) var(--spacer-xlarge);
        width: 65vw;
    }

    .content-row2-r {
        box-shadow: 0px -240px 0 var(--primary-color);
        grid-area: 5 / 1 / 6 / 2;
        margin: 0;
        padding: var(--spacer-large) var(--spacer-xlarge) var(--spacer-xxlarge);
    }

    footer {
        grid-area: 7 / 1 / 8 / 2;
        padding-top: var(--spacer-xxxlarge);
    }
}