/*  -----------------
    COMMON PROPERTIES
    ----------------- */

.artwork__container,
.cart__container,
.contact__container,
.default__container,
.gallery__container,
.galleryone__container,
.login__container,
.privacy__container,
.technique__container,
.unsubscribe__container {
	position: relative;
	max-width: 1200px;
	margin: auto;
	transition: 300ms ease-in-out;
}

.contact__container,
.default__container,
.login__container,
.technique__container {
    background-image: url('../Imgs_Site/background.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cart__container .card,
.gallery__container .card {
	padding: 1rem;
}

.artwork__container .card__title,
.cart__container .card__title,
.contact__container .card__title,
.default__container .card__title,
.gallery__container .card__title,
.login__container .card__title,
.privacy__container .card__title,
.technique__container .card__title,
.unsubscribe__container .card__title {
    margin: 0;
    padding: 1rem;
	display: block;
    text-align: center;
    color: var(--blue);
    font-weight: 600;
    font-size: 2.5rem;
}

/*  -------
    ARTWORK
    ------- */

.artwork__container .label__howorder {
    display: block;
    text-align: center;
    padding: 1rem;
    background-color: var(--orange);
    margin: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--yellow);
}

.artwork__container .card__image {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2rem;
    margin: 2rem;
}

.artwork__container .card__image img {
    display: block;
    width: 100%;   
}

@media screen and (min-width: 600px) {
    .artwork__container .card__image {
        grid-template-columns: repeat(2, 1fr);  
    }
}

@media screen and (min-width: 1000px) {
    .artwork__container .card__image {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1200px) {
    .cart__container .cart__list-container {
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-template-rows: auto;
    }
}

/*  ------- 
    CONTACT
    ------- */

.contact__container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact__container .card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr;
    grid-gap: 2rem;
    background-color: var(--white);
    margin: 3rem;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.3);
}

.contact__container .card__title {
    font-family: 'Dancing Script', cursive;
    color: var(--blue);
    margin: auto;
    font-size: 3rem;
    font-weight: bold;
}

.contact__container .card__data {
    position: relative;
    display: grid;
    margin-bottom: 1rem;
}

.contact__container .card__image {
    display: flex;
    align-items: center;
}

.contact__container .card__image img {
    width: 100%;
}

.contact__container .card__question {
    display: grid;
    grid-template-columns: 6fr 1fr;
}

.contact__container .image__question {
    width: 100%;
}

.contact__container .textbox__question {
    width: 3rem;
    height: 3rem;
}

.contact__container .textbox__comment {
    height: 4rem;
}

.contact__container .card__firstName,
.contact__container .card__lastName,
.contact__container .card__phone,
.contact__container .card__mail,
.contact__container .card__comment {
    display: grid;
    position: relative;
}

.contact__container .label__firstName,
.contact__container .label__lastName,
.contact__container .label__phone,
.contact__container .label__mail, 
.contact__container .label__comment {
    position: absolute;
    pointer-events: none;
    font-size: 1.1rem;
    top: 0.4rem;
    left: 0.15rem;
    color: var(--red);
    transition: 200ms ease;
}

.contact__container .textbox__firstName:focus ~ .label__firstName,
.contact__container .textbox__firstName:valid ~ .label__firstName,
.contact__container .textbox__lastName:focus ~ .label__lastName,
.contact__container .textbox__lastName:valid ~ .label__lastName,
.contact__container .textbox__phone:focus ~ .label__phone,
.contact__container .textbox__phone:valid ~ .label__phone,
.contact__container .textbox__mail:focus ~ .label__mail,
.contact__container .textbox__mail:valid ~ .label__mail,
.contact__container .textbox__comment:focus ~ .label__comment,
.contact__container .textbox__comment:valid ~ .label__comment {
    font-size: 0.9rem;
    color: var(--orange);
    top: -0.6rem;
    left: 0.08rem;
}

.contact__container .card__frame {
    grid-area: sec3;
    width: 100%;
}

@media screen and (min-width: 1200px) {
    .contact__container .card {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
    }
}

/*  -------------------
    DEFAULT - CAROUSSEL
    ------------------- */

.default__container .carousel__container1 {
    width: 100vw;
    max-width: 1000px;
    overflow: hidden;
    position: relative;
    margin: 0 auto 3rem auto;
}

.default__container .carousel__slide1 {
    display: flex;
}

.default__container .carousel__image1 {
    width: 100vw;
}

.default__container #prev__btn1,
.default__container #next__btn1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.75rem;
    color: var(--red);
    border: none;
    opacity: 1;
    background-color: transparent;
    cursor: pointer;
    transition: 300ms ease-in-out;
}

.default__container #prev__btn1:hover,
.default__container #next__btn1:hover {
    color: var(--orange);
}

.default__container #prev__btn1 {
    left: 0.5rem;
}

.default__container #next__btn1 {
    right: 0.5rem;
}

.default__container .carousel__navigation1 {
    text-align: center;
    width: 50%;
    position: absolute;
    left: 25%;
    bottom: 0;
}

.default__container .nav__btn1 {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin: 0.25rem;
    border: none;
    transition: all 300ms ease-in-out;
    cursor: pointer;
}

.default__container .nav__btn1:hover {
    background-color: var(--red);
}

/*  -----------------
    DEFAULT - CONTENT
    ----------------- */

.default__container {
    overflow: hidden;
}

.default__container .card__presentation {
    display: flex;
    flex-direction: column;
    padding: 0 2rem 2rem 2rem;
}

.default__container .card__hello {
    display: block;
    font-family: 'Dancing Script', cursive;
    font-size: 4rem;
    color: var(--blue);
    padding: 1rem;
}

.default__container .card__presentation img,
.default__container .card__culturebeauce img,
.default__container .card__memoryfounders img {
    display: block;
    width: 100%;
    opacity: 0;
    transition: 300ms ease-in-out;
}

.default__container .card__presentation img {
    transform: translateX(-100%);
}

.default__container .card__presentation img.appear {
    opacity: 1;
    transform: translateX(0);
}

.default__container .card__culturebeauce img {
    transform: translateX(100%);
}

.default__container .card__culturebeauce img.appear {
    opacity: 1;
    transform: translateX(0);
}

.default__container .card__memoryfounders img {
    transform: translateX(-100%);
}

.default__container .card__memoryfounders img.appear {
    opacity: 1;
    transform: translateX(0);
}

.default__container .card__presentation,
.default__container .card__culturebeauce,
.default__container .card__memoryfounders {
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.default__container .card__paragraphe {
    opacity: 0;
    transform: translateY(3rem);
    transition: 500ms ease-in-out;
}

.default__container .card__paragraphe.appear {
    opacity: 1;
    transform: translateY(0);
}

.default__container .card__subtitle {
    display: block;
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    padding: 1rem;
    color: var(--blue);
}

.default__container .card__text {
    display: block;
    text-align: justify;
    margin-bottom: 1rem;
    padding: 1rem;
    font-size: 1rem;
    color: var(--red);
    font-weight: 600;
    background-color: var(--yellow);
}

.default__container .card__link {
    text-decoration: none;
    color: var(--red);
    transition: 300ms ease-in-out;
}

.default__container .card__link:hover {
    color: var(--orange);
}

.default__container .card__splitter {
    display: block;
    width: calc(100% - 2rem);
    margin: 1rem;
    filter: drop-shadow(0.5rem 0.5rem 1.5rem var(--yellow));
}

@media screen and (min-width: 600px) {
    .default__container .card__presentation,
    .default__container .card__culturebeauce, 
    .default__container .card__memoryfounders {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-gap: 4rem;
        padding: 4rem;
    }
}

/*  ------- 
    GALLERY
    ------- */

.gallery__container table {
    display: block;
    text-align: right;
    border: 1px solid var(--orange);
    margin: 0.5rem;
    padding: 0.5rem;
}

.gallery__container td {
    color: var(--blue);
    padding: 0.25rem 0.5rem;
}

.gallery__container .card__sort {
    display: grid;
    grid-template-columns: 1fr;
}

.gallery__container .text__sort {
    font-size: 0.9rem;
    display: inline-block;
    width: 9.5rem;
}

.gallery__container .drop__sort {
    display: inline-block;
    margin-bottom: 0.5rem;
    width: 7rem;
}

.gallery__container .card__list {
    display: grid;
    grid-template-columns: 1fr;  
    padding: 0.25rem;
}

.gallery__container .card__gallery {
    margin: 0.5rem;
    padding-bottom: 1rem;
    border: 3px solid var(--blue);
    border-radius: 1rem;
    box-shadow: 5px 5px 5px #888888;
}

.gallery__container .image,
.gallery__container .description,
.gallery__container .size,
.gallery__container .price,
.gallery__container .priceSpecial {
    display: block;
    text-align: center;
}

.gallery__container .image {
    position: relative;
    padding: 2rem;
    width: 100%;
    opacity: 0;
    transition: 300ms ease-in-out;
}

.gallery__container .image.appear {
    transition-delay: 300ms;
    opacity: 1;
}

.gallery__container .image:hover {
    padding: 0.5rem;
}

.gallery__container .description,
.gallery__container .size {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--blue);
}

.gallery__container .price {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--orange);
}

.gallery__container .priceSpecial {
    font-size: 1.4rem;
    color: var(--red);
    font-weight: 600;
}

.gallery__container .card__navigation {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
}

.gallery__container .button__navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 9rem;
    height: 2rem;
    margin: 0 0.5rem;
    text-decoration: none;
    border: 1px solid var(--blue);
    color: var(--blue);
    transition: 300ms ease-in-out;
}

.gallery__container .button__nav:hover {
    background-color: var(--blue);
    color: var(--white);
}

.btnGoUp {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    transition: 500ms ease;
    transform: translateX(100%);
    opacity: 0;
    z-index: 1;
}

.btnGoUp__show {
    opacity: 1;
    transform: translateX(0);
}

.gallery__container .fa-chevron-up {
    color: var(--white);
    margin: 0.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--orange);
    transition: 300ms ease-in-out;
}

.gallery__container .fa-chevron-up:hover {
    background-color: var(--orangeHover);
}

@media screen and (min-width: 600px) {
    .gallery__container .card__list {
        grid-template-columns: repeat(2, 1fr);  
    }
}

@media screen and (min-width: 1000px) {
    .gallery__container .card__sort {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery__container .card__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*  -----------
    GALLERY ONE
    ----------- */

.galleryone__container .card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
}

.galleryone__container .image__container {
    display: flex;
    justify-content: center;
}

.galleryone__container .image__container,
.galleryone__container .detail__container {
    padding: 2rem;
}

.galleryone__container .image__container img {
    width: 100%;
    max-width: 40rem;
}

.galleryone__container .label__decription,
.galleryone__container .label__size,
.galleryone__container .label__price,
.galleryone__container .label__priceSpecial {
    display: block;
    text-align: center;
    margin: 1rem 0;
}

.galleryone__container .label__decription {
    color: var(--blue);
    font-size: 2rem;
    font-weight: 600;
}

.galleryone__container .label__size {
    color: var(--blue);
    font-size: 1.25rem;
}

.galleryone__container .label__price {
    color: var(--orange);
    font-size: 2rem;
    font-weight: 600;
}

.galleryone__container .label__priceSpecial {
    color: var(--red);
    font-size: 2rem;
    font-weight: 600;
}

.galleryone__container .button__addCart {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    border: 1px solid var(--orange);
    height: 5rem;
    transition: 300ms ease-in-out
}

.galleryone__container .button__addCart:hover {
    background-color: var(--orange);
}

.galleryone__container .button__icon {
    position: absolute;
    width: 4rem;
}

@media screen and (min-width: 1000px) {
    .galleryone__container .card {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .galleryone__container .label__decription,
    .galleryone__container .label__size,
    .galleryone__container .label__price,
    .galleryone__container .label__priceSpecial {
        text-align: left;
    }
}

/*  -----
    LOGIN
    ----- */

.login__container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login__container .card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr;
    grid-gap: 2rem;
    background-color: var(--white);
    height: auto;
    margin: 3rem;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.3);
}

.login__container .card__data {
    display: grid;
}

.login__container .card__image img {
    width: 100%;
}

.login__container .card__avatar {
    margin: auto;
    width: 10rem;
}

.login__container .card__title {
    font-family: 'Dancing Script', cursive;
    color: var(--blue);
    margin: auto;
    font-size: 3rem;
    font-weight: bold;
}

.login__container .card__icon {
    width: 1rem;
}

.login__container .card__user,
.login__container .card__password {
    display: grid;
    grid-template-columns: 1fr 7fr 1fr;
    align-items: center;
    justify-items: center;
    position: relative;
}

.login__container .label__user,
.login__container .label__password {
    position: absolute;
    pointer-events: none;
    font-size: 1.1rem;
    top: 0.5rem;
    left: 3.6rem;
    color: var(--red);
    transition: 200ms ease all;
}

.login__container .textbox__user:focus ~ .label__user,
.login__container .textbox__user:valid ~ .label__user,
.login__container .textbox__password:focus ~ .label__password,
.login__container .textbox__password:valid ~ .label__password {
    font-size: 0.8rem;
    color: var(--orange);
    top: -0.5rem;
    left: 3.6rem;
}

@media screen and (min-width: 1200px) {
    .login__container .card {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
    }
}

/*  -------
    PRIVACY
    ------- */

.privacy__container {
    padding: 1rem;
}

.privacy__container .card__title {
    margin: 0;
    display: block;
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--blue);
}

.privacy__container .card__subTitle {
    display: block;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--orange);
}

.privacy__container .card__paragraphe {
    display: block;
    text-align: justify;
    font-size: 1.25rem;
    color: var(--blue);
    margin: 1rem 0;
}

.privacy__container .card__ctn {
    display: grid;
    grid-template-columns: 1fr 10fr;
}

.privacy__container .card__bullet,
.privacy__container .card__bullet-hov {
    font-size: 1.25rem;
    color: var(--red);
}

.privacy__container .card__bullet-hov {
    text-decoration: none;
    transition: 300ms ease-in-out;
}

.privacy__container .card__bullet-hov:hover {
    color: var(--orange);
    text-decoration: underline;
}

.privacy__container .fa-square {
    text-align:center;
    margin-top: 0.25rem;
    color: var(--orange);
    font-size: 0.75rem;
}


/*  ---------------------
    TECHNIQUE - SLIDESHOW
    --------------------- */

.technique__container .slideshow__container1 {
    max-width: 1000px;
    margin: auto;
    position: relative;
}

.technique__container .slide__image {
    display: block;
    width: 100%;
    margin: 1rem 0;
}

.technique__container .prev1,
.technique__container .next1 {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 1rem;
    color: var(--yellow);
    font-size: 1.5rem;
    transition: 300ms ease;
    border-radius: 0 0.25rem 0.25rem 0
}

.technique__container .next1 {
    right: 0;
}

.technique__container .prev1 {
    left: 0;
}

.technique__container .prev1:hover,
.technique__container .next1:hover {
    color: var(--orange);
}
    
.technique__container .dot__container1 {
    display: flex;
    justify-content: center;
}

.technique__container .dot1 {
    cursor: pointer;
    height: 1rem;
    width: 1rem;
    background-color: var(--yellow);
    border-radius: 50%;
    transition: 600ms ease-in-out;
    margin: 0.5rem;
}

.technique__container .active1,
.technique__container .dot1:hover {
    background-color: var(--orange);
}

.technique__container .fade {
    animation-name: fade;
    animation-duration: 3s;
}

@keyframes fade {
    from {
        opacity: 0.25;
    } 
    to {
        opacity: 1;
    }
}

/*  -------------------
    TECHNIQUE - CONTENT
    ------------------- */

.technique__container .card__technique {
    padding: 2rem;
}

.technique__container .card__text {
    display: block;
    text-align: justify;
    color: var(--red);
    background-color: var(--yellow);
    margin: 1rem;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.technique__container .fa-square {
    font-size: 0.6rem;
    color: var(--blue);
    align-items: center;
    padding: 0.5rem 0.25rem;
}

.technique__container .card__text-container {
    display: flex;
    padding: 0.5rem 2rem;
    font-weight: 600;
    align-items: center;
}

.technique__container .card__text-bullet {
    display: block;
    color: var(--red);
}

.technique__container .video__container {
    height: auto;
    width: 100%;
}

.technique__container .card__video {
    width: 100%;
    height: calc((100vw) * 0.5625);
    max-height: 657px;
}

/*  ---------------------
    UNSUBSCRIVE - CONTENT
    --------------------- */

.unsubscribe__container {
    padding: 2rem;
}

.unsubscribe__container .card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.unsubscribe__container .label__unsubscribe {
    color: var(--orange);
}