/* 
------JeLoueMonSiteWeb.Com------
--------------2022--------------
---------------v6---------------
-------------ENGINE-------------
-------------TULIA-------------- 
----------MOBILE-FIRST----------
*/

/* 
----------
CONFIG 
----------
*/

:root {
    --light-text: #EEE;
    --dark-text: #6C778D;
    --primary: #0071B9;
    --secondary: #F27A7A;
    --primary-font: "Futura";
    --secondary-font: "Futura";
    --primary-bg: #F0F0EC;
    --secondary-bg: #F0F0EC;
    --dark-bg: #222;
    --radius: 16px;
    --gap: 20px;
}

/* 
----------
FONTS 
----------
*/

@font-face {
    font-display: fallback;
    font-family: 'Futura';
    font-style: normal;
    font-weight: 300;
    src: 
        url(./fonts/futurapt/woff2/FuturaPTLight.woff2) format('woff2'),
        url(./fonts/futurapt/ttf/FuturaPTLight.ttf) format('truetype'),
        url(./fonts/futurapt/otf/FuturaPTLight.otf) format('opentype');
}

@font-face {
    font-display: fallback;
    font-family: 'Futura';
    font-style: normal;
    font-weight: 400;
    src: 
        url(./fonts/futurapt/woff2/FuturaPTMedium.woff2) format('woff2'),
        url(./fonts/futurapt/ttf/FuturaPTMedium.ttf) format('truetype'),
        url(./fonts/futurapt/otf/FuturaPTMedium.otf) format('opentype');
}

@font-face {
    font-display: fallback;
    font-family: 'Futura';
    font-style: normal;
    font-weight: 300;
    src: 
        url(./fonts/roboto/woff2/Roboto-Light.woff2) format('woff2'),
        url(./fonts/roboto/ttf/Roboto-Light.ttf) format('truetype'),
        url(./fonts/roboto/otf/Roboto-Light.otf) format('opentype');
    unicode-range: U+003F;
}

@font-face {
    font-display: fallback;
    font-family: 'Futura';
    font-style: normal;
    font-weight: 400;
    src: 
        url(./fonts/roboto/woff2/Roboto-Regular.woff2) format('woff2'),
        url(./fonts/roboto/ttf/Roboto-Regular.ttf) format('truetype'),
        url(./fonts/roboto/otf/Roboto-Regular.otf) format('opentype');
    unicode-range: U+003F;
}


/* 
----------
STANDARD 
----------
*/

body  {
	background: var(--primary-bg);
	font-family: var(--primary-font);
	margin: 0;
	padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

main {
    padding-bottom: 50px;
}

section {
    margin: auto;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--primary-font);
    color: var(--dark-text);
	font-weight: 400;
	margin: 60px 0;
}

h1 {
	font-size: 38px;
}

h2 {
	font-size: 34px;
}

h3 {
	font-size: 28px;
}

p {
	color: var(--dark-text);
	font-family: var(--primary-font);
	font-size: 15px;
	margin: 20px 0;
}

p:first-child {
    margin-top: 0;
}

p:last-child {
    margin-bottom: 0;
}

a {
	color: var(--secondary);
}

img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

label {
    color: var(--dark-text);
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin: 20px 0 5px;
    text-transform: uppercase;
}

input[type="text"], 
input[type="mail"] {
	border-radius: var(--radius);
    border: 1px solid #CCC;
    color: var(--dark-text);
    font-size: 35px;
    outline: none;
    padding: 12px;
    width: calc(100% - 26px);
}

textarea {
	border-radius: var(--radius);
	border: 1px solid #CCC;
	color: #444;
	font-size: 20px;
	min-height: 190px;
	outline: none;
	padding: 5px;
	width: calc(100% - 12px);
}

textarea:hover {
	border: 1px solid var(--primary);
}

input::placeholder, 
textarea::placeholder  {
	color: #CCC;
}

input.error, 
textarea.error {
	border-color: #C00;
	box-shadow: 0 0 5px #C004;
}

.btn,
.btn-primary,
button,
input[type="submit"] {
	background: var(--primary);
	border-radius: var(--radius);
	border: none;
	color: var(--dark-text);
	cursor: pointer;
	display: block;
	font-family: var(--primary-font);
	font-size: 32px;
    font-weight: 400;
	padding: 7px 15px;
	text-decoration: none;
    width: 100%;
    margin: 20px 0;
}

.btn-secondary {
	background: var(--secondary);
	border: none;
	color: var(--light-text);
	font-size: 15px;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--primary-font);
    padding: 7px 15px;
    text-decoration: none;
}

button.confirmed {
    background: #8FE395;
}

button.canceled {
    background: #F27A7A;
}

hr {
	border-bottom: 1px solid var(--primary-bg);
	border-left: none;
	border-right: none;
	border-top: 1px solid #DDD;
	margin: 30px 0
}

.block {
	background: var(--secondary-bg);
	border-radius: var(--radius);
	box-shadow: 0 0 15px #CCC;
	overflow: hidden;
	position: relative;
}

.success_box {
	background: #090;
    border-radius: var(--radius);
    color: var(--light-text);
	display: none;
	height: 30px;
	margin: 20px auto;
	overflow: hidden;
	padding: 10px;
	width: 100%;
}

.error_box {
	background: #900;
    border-radius: var(--radius);
    color: var(--light-text);
	display: none;
	height: 30px;
	margin: 20px auto;
	overflow: hidden;
	padding: 10px;
	width: 100%;
}

.center {
    text-align: center; 
}

.justify {
    text-align: justify; 
}

.left { 
    text-align: left; 
}

.right { 
    text-align: right; 
}

.pointer {
    cursor: pointer; 
}

.hide-sm {
    display: none;
}

/* 
----------
GRID 
----------
*/

.flex-frame1 {
	max-width: 1600px;	
}

.flex-frame2 {
	max-width: 1200px;	
}

.flex-frame3 {
	max-width: 900px;	
}

.flex-frame4 {
	max-width: 500px;	
}

.flex-frame1,
.flex-frame2,
.flex-frame3,
.flex-frame4 {
	width: calc(100% - 40px);
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    overflow: hidden;
}

.frame1 {
	max-width: 1600px;	
}

.frame2 {
	max-width: 1200px;	
}

.frame3 {
	max-width: 900px;	
}

.frame4 {
	max-width: 500px;	
}

.frame1,
.frame2,
.frame3,
.frame4 {
    display: grid;
    gap: 35px;
    grid-auto-rows: auto;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
    overflow: hidden;
    width: calc(100% - 70px);
}

.frame1 > *,
.frame2 > *,
.frame3 > *,
.frame4 > * {
    grid-column: auto / span 4;
    overflow: hidden;
}

.col1 {
    grid-column: auto / span 1 !important;
}

.col2 {
    grid-column: auto / span 1 !important;
}

.col3 {
    grid-column: auto / span 1 !important;
}

.col4 {
    grid-column: auto / span 2 !important;
}

.col5 {
    grid-column: auto / span 2 !important;
}

.col6 {
    grid-column: auto / span 2 !important;
}

.col7 {
    grid-column: auto / span 2 !important;
}

.col8 {
    grid-column: auto / span 2 !important;
}

.col9 {
    grid-column: auto / span 3 !important;
}

.col10 {
    grid-column: auto / span 3 !important;
}

.col11 {
    grid-column: auto / span 3 !important;
}

.row1 {
    grid-row: auto / span 1;
}

.row2 {
    grid-row: auto / span 2;
}

.row3 {
    grid-row: auto / span 3;
}

.row4 {
    grid-row: auto / span 4;
}

.row5 {
    grid-row: auto / span 5;
}

.row6 {
    grid-row: auto / span 6;
}

.row7 {
    grid-row: auto / span 7;
}

.row8 {
    grid-row: auto / span 8;
}

.row9 {
    grid-row: auto / span 9;
}

.row10 {
    grid-row: auto / span 10;
}

.row11 {
    grid-row: auto / span 11;
}

.row12 {
    grid-row: auto / span 12;
}

/* 
----------
PROTOTYPE 
----------
*/

header {
    display: flex;
    flex-direction: column;
}

.logo {
    max-width: 375px;
    margin: 40px auto;
}

.pickUpTime {
    background: var(--primary);
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding: 8px 40px;
}

.pickUpTime p {
    color: var(--light-text);
    font-size: 25px;
    margin: 0;
}

.pickUpTime img {
    height: 35px;
    width: 35px;
}

.bigText {
    font-size: 35px;
    font-weight: 300;
}

header, 
main {
    opacity: 0;
    transition: .3s ease opacity;
}

.endAnimation header, 
.endAnimation main {
    opacity: 1;
}

/* 
----------
ASIDE
----------
*/

aside {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

aside.open {
    opacity: 1;
    pointer-events: initial;

}

.nameBox.open {
    display: flex;
    align-items: center;
    background: var(--primary-bg);
    justify-content: center;
    padding: 20px;
    width: calc(100% - 40px);
}

.confirmNewName {
    color: var(--light-text);
}

/* 
----------
ANIMATION
----------
*/

aside.animation {
    background: var(--primary-bg);
    opacity: 1;
    transition: .3s ease opacity;
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 2;
}

.endAnimation aside.animation {
    opacity: 0;
    pointer-events: none;
}

.animationContainer {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: 220px;
}

@keyframes logoA {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }

    10% {
        transform: translateY(0);
        opacity: 1;
    }

    75% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh);
        opacity: 1;
    }
}

.logoA {
	animation-name: logoA;
	animation-duration: 2s;
	animation-timing-function: ease;
    animation-iteration-count: 1;
    position: absolute;
    width: 150px;
    object-fit: contain;
    left: 0%;
    transform: translateY(-100vh);
    opacity: 0;
}

@keyframes logoB {
    0% {
        transform: translateX(100vw);
        opacity: 0;
    }
    
    10% {
        transform: translateX(0);
        opacity: 1;
    }

    75% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh);
        opacity: 1;
    }
}

.logoB {
    animation-name: logoB;
	animation-duration: 2s;
	animation-timing-function: ease;
    animation-iteration-count: 1;
    position: absolute;
    width: 85px;
    object-fit: contain;
    transform: translateX(100vw);
    right: 0;
    opacity: 0;
}


.model {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 221px;
    object-fit: contain;
    opacity: .5;
    filter: invert() 

}

/* 
----------
ANGRY CUSTOMER
----------
*/

.angryCustomer {
    background: #F27A7A;
}

.angryCustomer .pickUpTime,
.angryCustomer h1, 
.angryCustomer .bigText,
.angryCustomer .confirmed  {
    opacity: 0;
}

.angryCustomer .messageAngry  {
    opacity: 1;
}

.angryCustomer header {
    background: var(--primary-bg);
    height: 160px;
    margin-bottom: 34px;
}

.angryCustomer .canceled {
    background: #8FE395;   
}

.angryMessage {
    display: none;
}

.angryCustomer .angryMessage {
    position: absolute;
    display: block;
    text-align: center; 
    width: 100%;
    left: 0;
    top: 36%
}


.angryCustomer .angryMessage img {
    margin-bottom: 8%;
    width: 80px
}

.angryCustomer .angryMessage p {
    font-size: 35px;
    line-height: 45px;
    font-weight: 300;
    color: var(--light-text) 
}

.angryCustomer .angryMessage strong {
    font-weight: 400;
}

/* 
----------
STARS
----------
*/

.star {
    position: fixed;
    z-index: -1;
}

.star path {
    fill: #ebebe9;
}

.angryCustomer .star path {
    fill: #F67070
}

#star1 {
    top: -20px;
    transform: rotate(27deg);
    left: -90px;
} 

#star2 {
    top: 280px;
    transform: rotate(-18deg);
    right: -212px;
}

#star3 {
    bottom: -180px;
    transform: rotate(25deg);
    left: -90px;
}

/* 
----------
THEME RESPONSIVE 
----------
*/

.resize-animation-stopper * {
    animation: none !important;
    transition: none !important;
}

@media screen and (max-width:320px) {
    .sm-hide {
        display: none;
    }

    .frame1,
    .frame2,
    .frame3,
    .frame4 {
        grid-template-columns: repeat(1, 1fr);
    }

    .frame1 > *,
    .frame2 > *,
    .frame3 > *,
    .frame4 > * {
        grid-column: auto / span 1 !important;
    }

    .sm-col1 {
        grid-column: auto / span 1 !important;
    }

    .sm-col2 {
        grid-column: auto / span 1 !important;
    }

    .sm-col3 {
        grid-column: auto / span 1 !important;
    }

    .sm-col4 {
        grid-column: auto / span 1 !important;
    }
}

@media screen and (min-width: 321px) and (max-width: 640px) {
    .sm-hide {
        display: none;
    }

    .sm-col1 {
        grid-column: auto / span 1 !important;
    }

    .sm-col2 {
        grid-column: auto / span 2 !important;
    }

    .sm-col3 {
        grid-column: auto / span 3 !important;
    }

    .sm-col4 {
        grid-column: auto / span 4 !important;
    }
}

@media screen and (min-width:640px) {

    .frame1,
    .frame2,
    .frame3,
    .frame4 {
        grid-template-columns: repeat(8, 1fr);
    }

    .frame1 > *,
    .frame2 > *,
    .frame3 > *,
    .frame4 > * {
        grid-column: auto / span 8;
    }

    .col3 {
        grid-column: auto / span 2 !important;
    }
    
    .col4 {
        grid-column: auto / span 2 !important;
    }

    .col5 {
        grid-column: auto / span 4 !important;
    }
    
    .col6 {
        grid-column: auto / span 4 !important;
    }

    .col7 {
        grid-column: auto / span 4 !important;
    }

    .col8 {
        grid-column: auto / span 6 !important;
    }

    .col9 {
        grid-column: auto / span 6 !important;
    }

    .col10 {
        grid-column: auto / span 7 !important;
    }

    .col11 {
        grid-column: auto / span 7 !important;
    }

    button.confirmed {
        margin-top: 100px;
    }

    .angryCustomer .angryMessage {
        top: 25%
    }
    
    
    .angryCustomer .angryMessage img {
        margin-bottom: 0;
    }

  }

  @media screen and (min-width: 641px) and (max-width: 1024px) {
    .md-hide {
        display: none;
    }

    .md-col1 {
        grid-column: auto / span 1 !important;
    }

    .md-col2 {
        grid-column: auto / span 2 !important;
    }

    .md-col3 {
        grid-column: auto / span 3 !important;
    }

    .md-col4 {
        grid-column: auto / span 4 !important;
    }

    .md-col5 {
        grid-column: auto / span 5 !important;
    }

    .md-col6 {
        grid-column: auto / span 6 !important;
    }

    .md-col7 {
        grid-column: auto / span 7 !important;
    }

    .md-col8 {
        grid-column: auto / span 8 !important;
    }
}

  @media screen and (min-width:1024px) {

    .frame1,
    .frame2,
    .frame3,
    .frame4 {
        grid-template-columns: repeat(12, 1fr);
    }

    .frame1 > *,
    .frame2 > *,
    .frame3 > *,
    .frame4 > * {
        grid-column: auto / span 12;
    }
    
    .col2 {
        grid-column: auto / span 2 !important;
    }
    
    .col3 {
        grid-column: auto / span 3 !important;
    }

    .col4 {
        grid-column: auto / span 4 !important;
    }
    
    .col5 {
        grid-column: auto / span 5 !important;
    }

    .col6 {
        grid-column: auto / span 6 !important;
    }

    .col7 {
        grid-column: auto / span 7 !important;
    }

    .col8 {
        grid-column: auto / span 8 !important;
    }

    .col9 {
        grid-column: auto / span 9 !important;
    }

    .col10 {
        grid-column: auto / span 10 !important;
    }

    .col11 {
        grid-column: auto / span 11 !important;
    }

    header {
        position: relative;
    }

    .burger {
        display: none
    }

    header nav {
        background: var(--secondary-bg);
        height: initial;
        left: 0;
        opacity: 1;
        position: relative;
        top: 0;
    }

    header nav > div {
        flex-direction: row;
        justify-content: space-around !important;
    }

    header.nav_fixed {
        padding-bottom: 63px;
    }

    header.nav_fixed nav {
        background: url('./images/logo-mobile.svg') no-repeat 50px center / auto 80% var(--secondary-bg) ;
        position: fixed;
    }

    header nav a {
        color: var(--dark-text);
        font-size: 18px;
        font-weight: 200;
        opacity: 1;
        transform: none;
    }

    .btn_header {
        bottom: 63px;
        height: 23px;
        left: initial;
        position: absolute;
        right: 20px;
        top: 0;
    }

  }

@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .lg-hide {
        display: none;
    }

    .lg-col1 {
        grid-column: auto / span 1 !important;
    }

    .lg-col2 {
        grid-column: auto / span 2 !important;
    }

    .lg-col3 {
        grid-column: auto / span 3 !important;
    }

    .lg-col4 {
        grid-column: auto / span 4 !important;
    }

    .lg-col5 {
        grid-column: auto / span 5 !important;
    }

    .lg-col6 {
        grid-column: auto / span 6 !important;
    }

    .lg-col7 {
        grid-column: auto / span 7 !important;
    }

    .lg-col8 {
        grid-column: auto / span 8 !important;
    }

    .lg-col9 {
        grid-column: auto / span 9 !important;
    }

    .lg-col10 {
        grid-column: auto / span 10 !important;
    }

    .lg-col11 {
        grid-column: auto / span 11 !important;
    }

    .lg-col12 {
        grid-column: auto / span 12 !important;
    }
}

@media screen and (min-width:1280px) {
    .xl-hide {
        display: none;
    }

    .xl-col1 {
        grid-column: auto / span 1 !important;
    }

    .xl-col2 {
        grid-column: auto / span 2 !important;
    }

    .xl-col3 {
        grid-column: auto / span 3 !important;
    }

    .xl-col4 {
        grid-column: auto / span 4 !important;
    }

    .xl-col5 {
        grid-column: auto / span 5 !important;
    }

    .xl-col6 {
        grid-column: auto / span 6 !important;
    }

    .xl-col7 {
        grid-column: auto / span 7 !important;
    }

    .xl-col8 {
        grid-column: auto / span 8 !important;
    }

    .xl-col9 {
        grid-column: auto / span 9 !important;
    }

    .xl-col10 {
        grid-column: auto / span 10 !important;
    }

    .xl-col11 {
        grid-column: auto / span 11 !important;
    }

    .xl-col12 {
        grid-column: auto / span 12 !important;
    }
}

/* ----------MODULES-STYLE---------- */

/* MEDIAS TEMPORARY */
.m_media {
    position: relative;
}

.m_media img {
    position: absolute;
}

.m_media {
    min-height: 150px;
}

/* GRID TEST */
.m_test {
    background: var(--dark-bg);
    height: 40px;
}

.m_test.col1::after {
    content: "1";
    color: var(--light-text);
    display: block;
    font-family: Arial;
    font-size: 30px;
    font-weight: 800;
    opacity: .2;
    text-align: center;
}

.m_test.col2::after {
    content: "2";
    color: var(--light-text);
    display: block;
    font-family: Arial;
    font-size: 30px;
    font-weight: 800;
    opacity: .2;
    text-align: center;
}

.m_test.col3::after {
    content: "3";
    color: var(--light-text);
    display: block;
    font-family: Arial;
    font-size: 30px;
    font-weight: 800;
    opacity: .2;
    text-align: center;
}

.m_test.col4::after {
    content: "4";
    color: var(--light-text);
    display: block;
    font-family: Arial;
    font-size: 30px;
    font-weight: 800;
    opacity: .2;
    text-align: center;
}

.m_test.col5::after {
    content: "5";
    color: var(--light-text);
    display: block;
    font-family: Arial;
    font-size: 30px;
    font-weight: 800;
    opacity: .2;
    text-align: center;
}

.m_test.col6::after {
    content: "6";
    color: var(--light-text);
    display: block;
    font-family: Arial;
    font-size: 30px;
    font-weight: 800;
    opacity: .2;
    text-align: center;
}

.m_test.col7::after {
    content: "7";
    color: var(--light-text);
    display: block;
    font-family: Arial;
    font-size: 30px;
    font-weight: 800;
    opacity: .2;
    text-align: center;
}

.m_test.col8::after {
    content: "8";
    color: var(--light-text);
    display: block;
    font-family: Arial;
    font-size: 30px;
    font-weight: 800;
    opacity: .2;
    text-align: center;
}

.m_test.col9::after {
    content: "9";
    color: var(--light-text);
    display: block;
    font-family: Arial;
    font-size: 30px;
    font-weight: 800;
    opacity: .2;
    text-align: center;
}

.m_test.col10::after {
    content: "10";
    color: var(--light-text);
    display: block;
    font-family: Arial;
    font-size: 30px;
    font-weight: 800;
    opacity: .2;
    text-align: center;
}

.m_test.col11::after {
    content: "11";
    color: var(--light-text);
    display: block;
    font-family: Arial;
    font-size: 30px;
    font-weight: 800;
    opacity: .2;
    text-align: center;
}

.m_test.col12::after {
    content: "12";
    color: var(--light-text);
    display: block;
    font-family: Arial;
    font-size: 30px;
    font-weight: 800;
    opacity: .2;
    text-align: center;
}