@font-face {
	font-family: Recoleta;
	src: url(../srcmedia/typo/Recoleta-Regular.woff2);
}

body {
    overflow-x: hidden;
    width: 100vw;
    font-style: normal;
    font-weight: normal;
    background-color: #F5F0EA;
}

/* Navigation Bar */

#navBarColorBlock {
    color: black;
    fill: black;
}

#navBarColorBlock {
    color: black;
    fill: black;
}


#navBarColorBlock .navlinkunder, #navBarColorBlock .navUnderSub {
	background-color: black;
}


#HamIconOpen {
    fill: black;
}

#CanardsLink {
    transform: scaleX(1);
}

#HamIconOpen {
    fill:black;
}

#NavLogo{
	fill: black;
}
.navlinkunder {
	background-color: black;
}

#laFermeSubMenu {
    background-color: white;
}




/* Content */


.ContentWraper h1 {
    font-family: 'Recoleta';
    font-style: normal;
    font-weight: normal;
    font-size: 104px;
    line-height: 108%;

    text-align: center;
    padding-bottom: 30px;
}

.SectionOne {
    width: 100vw;
    height: 90vh;
    min-height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    background-color: #DEB490;

    padding: 0 13vw 0 13vw;
    
}

    #Seigle {
        position: absolute;
        width: 150px;
        height: auto;
        left: 15%;
        top: 20%;
    }

    #Canard {
        width:300px;
        position: absolute;
        right: 10%;
        bottom: 15%
    }

    .SectionOne .InfoWraper {
        margin: auto;
        width: 100%;
        max-width: 700px;
    }

    .SectionOne h2{
        font-family: 'Recoleta';
        font-style: normal;
        font-weight: normal;
        font-size: 40px;
        line-height: 115%;

        text-align: center;

    }

.SectionTwo {
    margin: 200px 13vw 300px 13vw;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

    .SectionTwo .InfoWraper {
        max-width: 1000px;
        position: relative;
    }    

.SectionTwo h2 {
        font-family: "Work Sans";
        font-style: normal;
        font-weight: normal;
        font-size: 36px;
        line-height: 128%;

        text-align: center;
        letter-spacing: -0.02em;

        padding-bottom: 125px;
    }

    h3 {
        font-family: "Work Sans";
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        line-height: 133%;

        text-align: center;
        letter-spacing: -0.02em;

        padding-bottom: 30px;
    }


    

    form {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;

    }

        #FormFiller {
            opacity: 1;
            transition: 0.25s ease;
        }    
        
        #FormFiller.Hide {
                opacity: 0;
            }

    .form-element {
        width: 400px;
        max-width: 80%;
        margin: auto;

        border: 2px solid black;
        border-radius: 20px;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    

        .inputWraper {
            width: 90%;
            display: flex;
            justify-content: center;
            border-bottom: 2px solid black;
            margin-bottom: 15px;
        }

        .form-element input {
            border: none;
            background: none;

            margin: auto;
            text-align: center;
            padding: 25px 45px 10px 45px;

            font-family: 'Work Sans';
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 89%;
            letter-spacing: -0.02em;

        }

            .form-element input:focus {
                outline: none;
            }

        .ButtonWrapper {
            border: 2px solid black;
            background: none;
            margin-top: 30px;

            text-transform: uppercase;
            width: fit-content;
            text-align: center;
            margin-top: 40px;
            padding: 10px 20px;
            border-radius: 50px;
            transition: ease-in 0.1s;
            cursor: pointer;


        }

            .ButtonWrapper:hover {
                background: black;
            }

            .ButtonWrapper:hover span {
                color: white;
            }

            .ButtonContent {
                color: black;
                font-size: 14px;
                font-weight: 500;
                font-family: 'Work Sans', sans-serif;
                letter-spacing: 0.08em;
                
            }


        #Confirmed {
            position: relative;
            bottom: 100px;
            width: 100%;
            
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            margin-top: 25px;
            overflow: hidden;

            opacity: 0;
            transition: 0.25s ease 0.25s;
            z-index: -1;
            
        }

        #Confirmed.Show {
            opacity: 1;
        }

            #Checker {

                width: 50px;
                
                transition: 0.5s cubic-bezier(.51,1.85,.67,.96) 0.5s;
                transform: translateY(20px) scale(0);
            }    

            #Checker.Show {
                
                transform: translateY(0) scale(1);

                
            }



/* -------Responsiveness-------- */









/* Under 1440px response */

@media only screen and (max-width: 1440px) {
	
    #Canard {
        right: 5%;
        bottom: 10%
    }
    

	
	/* Footer */
	

	
}

/* Under 1024px response */

@media only screen and (max-width: 1024px) {
	
    #Canard {
        width: 270px;
    }
    

	
	/* Footer */
	

	
}


 /* ------------------------
 Under 770px response */

@media only screen and (max-width: 770px) {
	
	.ContentWraper h1 {
        font-size: 13.5vw;
    }

    .SectionOne h2 {
        font-size: 6vw;
       
    }

    #Seigle {
        width: 130px;
        left: 5%;
    }

    #Canard {
        width: 230px;
        bottom: 5%;
    }

    .SectionTwo {
        margin-top: 150px;
        margin-bottom: 150px;
    }

    .SectionTwo h2 {
        font-size: 6vw;
        padding-bottom: 100px;
    }

    .SectionTwo h3 {
        font-size: 20px;
    }






	/* Footer */

	footer {
		padding: 100px 12vw;
	}


	
}

/* Large mobile (425px) */

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

    .ContentWraper h1 {
        font-size: 56px;
    }

    .SectionOne h2 {
        font-size: 26px;
    }

    #Seigle {
        display: none;;
    }

    #Canard {
        width: 54vw;
        bottom: 10%;
        right: 5%;
    }

    .SectionTwo h2 {
        font-size: 26px;
    }

    .SectionTwo h3 {
        font-size: 20px;
    }

    .form-element {
        width: 100%;
    }


}