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

.contact__container,
.default__container,
.login__container,
.privacy__container,
.portfolio__container,
.service__container,
.unsubscribe__container {
    width: 100vw;
    max-width: 1200px;
    margin: auto;
}

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

.contact__container {
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
    align-items: center;
    background-image: url('../Imgs_Carousel/carousel5.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contact__container .card {
    display: grid;
    padding: 2rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "sec1" "sec2" "sec3" "sec4" "sec5" "sec6";
    height: auto;
    margin: 3rem;
    background-color: var(--menuText);
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);
}

.contact__container .card__contact {
    width: 80%;
    max-width: 30rem;
}

.contact__container .card__title {
    color: var(--logoBlue);
    font-size: var(--titleSize);
    display: block;
    text-align: center;
}

.contact__container .section1 {
    grid-area: sec1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact__container .section2 {
    grid-area: sec2;
}

.contact__container .section3 {
    grid-area: sec3;
}

.contact__container .section4 {
    grid-area: sec4;
}

.contact__container .section5 {
    grid-area: sec5;
    display: flex;
    justify-content: center;
}

.contact__container .section6 {
    grid-area: sec6;
}

.contact__container .card__question {
    display: grid;
    grid-template-columns: 6fr 1fr;
    max-width: 30rem;
    align-items: center;
}

.contact__container .image__question {
    width: 100%;
}

.contact__container .textbox__question {
    min-height: 2rem;
    max-width: 3rem;
}

.contact__container .card__lastName,
.contact__container .card__firstName,
.contact__container .card__mail,
.contact__container .card__phone,
.contact__container .card__company,
.contact__container .card__description {
    display: grid;
    position: relative;
    min-height: 2.5rem;
}

.contact__container .tb__description {
    height: 8rem;
}

.contact__container .lbl__lastName,
.contact__container .lbl__firstName,
.contact__container .lbl__mail,
.contact__container .lbl__phone,
.contact__container .lbl__company,
.contact__container .lbl__description {
    position: absolute;
    pointer-events: none;
    font-size: 1.1rem;
    top: 0.35rem;
    left: 0.15rem;
    color: var(--logoBlue);
    transition: 200ms ease all;
}

.contact__container .tb__lastName:focus ~ .lbl__lastName,
.contact__container .tb__lastName:valid ~ .lbl__lastName,
.contact__container .tb__firstName:focus ~ .lbl__firstName,
.contact__container .tb__firstName:valid ~ .lbl__firstName,
.contact__container .tb__mail:focus ~ .lbl__mail,
.contact__container .tb__mail:valid ~ .lbl__mail,
.contact__container .tb__phone:focus ~ .lbl__phone,
.contact__container .tb__phone:valid ~ .lbl__phone,
.contact__container .tb__company:focus ~ .lbl__company,
.contact__container .tb__company:valid ~ .lbl__company,
.contact__container .tb__description:focus ~ .lbl__description,
.contact__container .tb__description:valid ~ .lbl__description {
    font-size: 0.9rem;
    color: var(--logoOrange);
    top: -0.6rem;
    left: 0.15rem;
}

@media screen and (min-width: 700px) {
    .contact__container .card {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "sec1 sec1" "sec2 sec3" "sec4 sec4" "sec5 sec5" "sec6 sec6";
        grid-gap: 1rem;
    }

}

@media screen and (min-width: 1200px) {
    .contact__container .card {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "sec1 sec1 sec1" "sec2 sec3 sec4" "sec5 sec5 sec5" "sec6 sec6 sec6";
        grid-gap: 2rem;
    }

    .contact__container .tb__description {
        height: 11.5rem;
    }
}

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

.default__container {
    position: relative;
}

.default__container .card__img {
    width: 100%;
}

.default__container .card__main-title {
    position: absolute;
    top: 1rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: var(--mainTitleSize);
    font-family: 'Calistoga', cursive;
    color: var(--logoBlue);
    transform: scale(0);
    transform-origin: bottom;
    transition: 500ms ease-in-out;
}

.default__container .card__main-title.appear {
    animation: scale_title 1000ms forwards;
}

@keyframes scale_title {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.default__container .card__title {
    position: relative;
    display: block;
    text-align: center;
    margin: 2rem;
    font-size: var(--titleSize);
    font-weight: 600;
    color: var(--logoOrange);
    opacity: 0;
    transform: translateY(2rem);
    transition: 500ms ease-in-out;
}

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

.default__container .card__paragraphe-ctn {
    display: grid;
    grid-template-columns: 1fr 15fr;
    grid-template-areas: "border paragraphe";
    opacity: 0;
    transform: translateY(2rem);
    transition: 500ms ease-in-out;
}

.default__container .card__border {
    grid-area: border;
    background-color: var(--logoGreen);
    margin: 0 0 2rem 0;
    clip-path: polygon(0% 0%, 60% 0, 100% 50%, 60% 100%, 0% 100%);
}

.default__container .card__paragraphe {
    grid-area: paragraphe;
    position: relative;
    display: block;
    text-align: justify;
    margin: 0 2rem 2rem 1rem;
    font-size: var(--textSize);
    color: var(--logoBlue);
}

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

.default__container .card__tech {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 1rem;
}

.default__container .card__tech-html,
.default__container .card__tech-css,
.default__container .card__tech-js,
.default__container .card__tech-vs,
.default__container .card__tech-sql {
    margin: 0 0.5rem;
    height: calc(100vw / 9);
    transform: translateX(-100%);
    transition: 600ms ease-in-out;
    opacity: 0;
}

.default__container .card__tech-html.appear {
    transition-delay: 200ms;
    transform: translateX(0);
    opacity: 1;
}

.default__container .card__tech-css.appear {
    transition-delay: 400ms;
    transform: translateX(0);
    opacity: 1;
}

.default__container .card__tech-js.appear {
    transition-delay: 600ms;
    transform: translateX(0);
    opacity: 1;
}

.default__container .card__tech-vs.appear {
    transition-delay: 800ms;
    transform: translateX(0);
    opacity: 1;
}

.default__container .card__tech-sql.appear {
    transition-delay: 1000ms;
    transform: translateX(0);
    opacity: 1
}

.default__container .card__facebook {
    margin: 0 2rem;
    display: grid;
    grid-template-columns: 3fr 6fr 2fr;
    align-items: center;
}

.default__container .card__icon-large {
    position: absolute;
    margin-left: 2rem;
    width: 80%;
    opacity: 0.07;
}

.default__container .card__icon-popup {
    display: block;
    margin: 0 0 2rem 2rem;
    width: 0;
    transition: all 300ms ease-in-out;
}

.default__container .card__icon-popup.appear {
    width: 20%;
}

.default__container .card__icon-popup_fb {
    display: block;
    width: 0;
    transition: all 300ms ease-in-out;
}

.default__container .card__icon-popup_fb.appear {
    width: 90%;
}

.default__container .card__facebook-text {
    display: block;
    text-align: right;
    color: var(--logoBlue);
    font-size: var(--textSize);
    font-weight: 600;
}

.default__container .facebook__logo {
    width: calc(100vw / 11);
    transform: translateX(100%);
    transition: all 300ms ease-in-out;
    display: block;
    margin: auto;
}

.default__container .facebook__logo.appear {
    transform: translateX(0);
}

.default__container .card__Signature {
    position: relative;
    display: block;
    font-style: italic;
    font-size: var(--titleSize);
    font-family: 'Dancing Script', cursive;
    color: var(--logoOrange);
    margin: 1rem 0 1rem 2rem;
    opacity: 0;
    transform: translateY(2rem);
    transition: 500ms ease-in-out;
}

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

@media screen and (min-width: 740px) {
    .default__container .card__paragraphe-ctn {
        grid-template-columns: 2rem auto;
    }

    .default__container .top__container,
    .default__container .bottom__container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
    }

    .default__container .top__container {
        grid-template-areas: "sec1 sec2" "sec3 sec4";
    }

    .default__container .section1 {
        grid-area: sec1;
    }

    .default__container .section2 {
        grid-area: sec2;
    }

    .default__container .section3 {
        grid-area: sec3;
    }

    .default__container .section4 {
        grid-area: sec4;
    }

    .default__container .bottom__container {
        grid-template-areas: "sec5 sec5" "sec6 sec7";
    }

    .default__container .section5 {
        grid-area: sec5;
    }

    .default__container .section6 {
        grid-area: sec6;
    }

    .default__container .section7 {
        grid-area: sec7;
    }

    .default__container .card__icon-large {
        left: 30%;
        width: 40%;
    }
}

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

.default__container .slideshow__container {
    max-width: 1000px;
    position: relative;
    margin: 1rem auto;
    padding: 2rem 4rem;
    background-color: var(--logoBlue);
}

.default__container .slide {
    height: 14rem;
}

.default__container .prev,
.default__container .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 1rem;
    color: var(--border);
    font-size: 1.75rem;
    transition: 300ms ease;
    color: var(--menuText);
}

.default__container .slide__title {
    display: block;
    font-size: var(--titleSize);
    font-weight: bold;
    margin-bottom: 1.25rem;
    color: var(--menuText);
}

.default__container .slide__text {
    display: block;
    font-size: var(--textSize);
    text-align: justify;
    color: var(--menuText);
}

.default__container .next {
    right: 0;
}

.default__container .prev {
    left: 0;
}

.default__container .prev:hover,
.default__container .next:hover {
    color: var(--logoOrange);
}
    
.default__container .dot__container {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.default__container .dot {
    cursor: pointer;
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    background-color: var(--logoBlue);
    transition: background-color .6s ease;
    margin: 0.5rem;
}

.default__container .active,
.default__container .dot:hover {
    background-color: var(--logoOrange);
}

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

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

/*  -------- 
    CAROUSEL
    -------- */

.default__container .carousel__container {
    width: 100vw;
    max-width: 1000px;
    overflow: hidden;
    position: relative;
    margin: 2rem auto;
    transform: translateX(-100%);
    transition: transform 300ms ease-in;
}

.default__container .carousel__container.appear {
    transform: translateX(0);
}

.default__container .carousel__slide {
    display: flex;
}

.default__container .carousel__image {
    width: 100vw;
}

.default__container #prev__btn,
.default__container #next__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    font-size: 1.75rem;
    color: var(--logoBlue);
    border: transparent;
    opacity: 1;
    outline: none;
    background-color: transparent;
    transition: 300ms ease-in-out;
    cursor: pointer;
}

.default__container #prev__btn:hover,
.default__container #next__btn:hover {
    color: var(--logoOrange);
}

.default__container #prev__btn {
    left: 0;
}

.default__container #next__btn {
    right: 0;
}

.default__container .carousel__navigation {
    position: relative;
    display: flex;
    justify-content: center;
}

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

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

.login__container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../Imgs_Carousel/carousel6.jpg');
    background-size: cover;
    min-height: 40rem;
}

.login__container .card {
    display: grid;
    grid-template-rows: 7fr 3fr 3fr 3fr 2fr;
    width: 20rem;
    height: 30rem;
    background-color: var(--menuText);
    padding: 1rem;
    margin: 1rem auto;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);
}

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

.login__container .card__title {
    margin: auto;
    font-size: 2.25em;
    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 .lbl__user,
.login__container .lbl__pass {
    position: absolute;
    pointer-events: none;
    font-size: 1.1rem;
    top: 1.5rem;
    left: 2.1rem;
    color: var(--logoBlue);
    transition: 200ms ease all;
}

.login__container .tb__user:focus ~ .lbl__user,
.login__container .tb__user:valid ~ .lbl__user,
.login__container .tb__pass:focus ~ .lbl__pass,
.login__container .tb__pass:valid ~ .lbl__pass {
    font-size: 0.8rem;
    color: var(--logoOrange);
    top: 0.5rem;
    left: 2.1rem;
}

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

.privacy__container {
    position: relative;
    padding: 2rem;
}

.privacy__container .card__title {
    margin: 0;
    display: block;
    text-align: center;
    font-size: calc(20px + 100vw / 70);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--logoOrange);
}

.privacy__container .card__subTitle {
    display: block;
    text-align: center;
    font-size: calc(16px + 100vw / 70);
    font-weight: 600;
    color: var(--logoOrange);
}

.privacy__container .card__paragraphe {
    display: block;
    text-align: justify;
    font-size: calc(10px + 100vw / 70);
    color: var(--logoBlue);
    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: calc(10px + 100vw / 70);
    color: var(--logoBlue);
}

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

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

.privacy__container .fa-square {
    text-align:center;
    margin-top: 0.25rem;
    color: var(--logoBlue);
    font-size: calc(3px + 100vw / 70);
}

/*  ---------
    PORTFOLIO
    --------- */

.portfolio__container {
    position: relative;
    padding: 1rem;
    background-image: url('../Imgs_Carousel/carousel2.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.portfolio__container .card {
    margin-bottom: 2rem;
}

.portfolio__container .card__title {
    margin: 0;
    text-align: center;
    font-size: calc(24px + 100vw / 70);
    font-weight: 600;
    color: var(--logoOrange);
    background-color: var(--logoBlue);
    padding: 0.5rem;
}

.portfolio__container .card__description {
    text-align: justify;
    padding: 1rem;
    font-size: var(--textSize);
    color: var(--logoBlue);
    background-color: #fff;
}

.portfolio__container img {
    width: 100%;
    border: 5px solid var(--logoSilver);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.portfolio__container .card__img {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1rem;
    grid-template-areas: 
        "dev-lg dev-lg" "dev-md dev-sm";
}

.portfolio__container .card__img_large {
    grid-area: dev-lg;
    transition: 300ms ease-in-out;
}

.portfolio__container .card__img_medium {
    grid-area: dev-md;
    margin-right: 1rem;
    transition: 300ms ease-in-out;
}

.portfolio__container .card__img_small {
    grid-area: dev-sm;
    transition: 300ms ease-in-out;
}

.portfolio__container .card__link {
    display: block;
    margin-top: 0.5rem;
    text-align: center;
    text-decoration: none;
    background-color: var(--logoGreen);
    color: var(--menuText);
    font-size: 1rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    transition: 300ms ease-in-out;
}

.portfolio__container .card__link:hover {
    background-color: var(--logoGreenHov);
}

/*  -------
    SERVICE
    ------- */

.service__container {
    position: relative;
    padding: 2rem;
    background-image: url('../Imgs_Site/default.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.service__container .card__title {
    display: block;
    text-align: center;
    font-size: calc(24px + 100vw / 70);
    font-weight: 600;
    color: var(--logoOrange);
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(2rem);
    transition: 500ms ease-in-out;
}

.service__container .card__title.appear {
    opacity: 1;
    transform: translateY(0);
}

.service__container .card__text {
    font-size: calc(12px + 100vw / 70);
    font-weight: 600;
    color: var(--logoBlue);
    margin: 0.75rem 0 0 1rem;
    text-align: justify;
}

.service__container .card__ctn {
    display: grid;
    grid-template-columns: 1fr 10fr;
    opacity: 0;
    transform: translateX(-100%);
    transition: 600ms ease-in-out;
}

.service__container .card__ctn1 {
    transition-delay: 300ms;
}

.service__container .card__ctn2 {
    transition-delay: 600ms;
}

.service__container .card__ctn3 {
    transition-delay: 900ms;
}

.service__container .card__ctn4 {
    transition-delay: 1200ms;
}

.service__container .card__ctn5 {
    transition-delay: 1500ms;
}

.service__container .card__ctn6 {
    transition-delay: 1800ms;
}

.service__container .card__ctn7 {
    transition-delay: 2100ms;
}

.service__container .card__ctn.appear {
    opacity: 1;
    transform: translateX(0);
}

.service__container .fa-square {
    margin: 1.25rem 0 0 1rem;
    color: var(--logoBlue);
    font-size: calc(3px + 100vw / 70);
}

/*  -----------
    UNSUBSCRIBE
    ----------- */

.unsubscribe__container {
    padding: 2rem;
}

.unsubscribe__container h1 {
    color: var(--logoBlue);
    font-size: var(--titleSize);
}

.unsubscribe__container .label__unsubscribe {
    color: var(--logoOrange);
    font-size: 0.9rem;
}

/*  ------------------
    RETURN TO TOP PAGE
    ------------------ */

.chevron__up {
    color: var(--menuText);
    padding: 1rem;
    background-color: var(--logoBlue);
    transition: all 300ms ease-in-out;
}

.chevron__up:hover {
    background-color: var(--logoBlueHov);
}

.button__top {
    position: fixed;
    right: 1rem;
    bottom: 25%;
    transition: 500ms ease;
    transform: translateX(100%);
    opacity: 0;
}

.button__top-show {
    opacity: 0.65;
    transform: translateX(0);
}