#frenchBox {
display: none;
}


table {
	width: 80%;
    border-collapse: collapse;
	font-family: arial;
	font-weight: 500;
    box-shadow: 2px -2px 5px 1px darkgray;
}

.switchButton {
	    padding: 1rem 0.5rem 1rem 0.5rem;
	background-color: transparent;
	color: black;
	border: none;
    margin: 0;
     box-shadow: 2px -2px 5px 0px darkgray;
     letter-spacing: 1px;
}

.switchButton:nth-child(1){
    margin: 0 0 0 1rem;
    border-top-left-radius: 25px;
}
.switchButton:last-child{
    margin: 0 1rem 0 0;
    border-top-right-radius: 25px;
}

.switchButton:active,
.switchButton:focus {
	color: black;
	border: none;
	outline: none;
}





tr:nth-child(2n+3) {
	background: linear-gradient(to right, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%);
}

#baguette {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/320px-Flag_of_France.svg.png");
background-repeat: no-repeat;
background-size: cover;
	font-size: 1.5rem;

}
#bratwurst {
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/b/ba/Flag_of_Germany.svg/320px-Flag_of_Germany.svg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
	font-size: 1.5rem;
	color: white;
     padding: 0;

}
/*
tr:last-child{
	border-bottom: 1px solid black;
}

tr:nth-child(1) {
	border: 1px solid black;
	
}
*/
td {
	padding: 1vw;
	/*border-left: 1px solid black;
	border-right: 1px solid black;*/
	width: 50%;
}

th {
	padding: 0.5rem 0 0.5rem 0;
	/*border: 1px solid black;*/

}
.inputField {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(30%, 1fr) );
	width: 100%;
	margin: 0 0 2vw 0;
	grid-gap: 0;
}
.inputField2 {
	display: flex;
	justify-content: center;
    align-items: center;
	width: 80%;
	margin: 0 0 0 0;
	z-index: 400;
}




.g1 {
	padding-left: 15%;
	background-position: left center;
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Flag_of_France_and_Germany.svg/320px-Flag_of_France_and_Germany.svg.png");
	background-size: 10% 60%;
	background-repeat: no-repeat;
	margin-right: 1vw;
}

.g2 {
	padding-left: 15%;
	background-position: left center;
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/320px-Flag_of_France.svg.png");
	background-size: 10% 60%;
	background-repeat: no-repeat;
	margin-left: 1vw;
	margin-right: 1vw;
}

.g3 {
	padding-left: 15%;
	background-position: left center;
	background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/b/ba/Flag_of_Germany.svg/320px-Flag_of_Germany.svg.png");
	background-size: 10% 60%;
	background-repeat: no-repeat;
	margin-left: 1vw;
}

.g1, .g2, .g3 {

	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;


}
input {
	font-size: 2vw;
	width: 100%;
	height: 3vw;
	border: none;
}

input:focus {
	width: 100%;
	outline: none;
	box-shadow: 0px 5px 0px -1px blue;

}


section {
	display: flex;
	justify-content: center;
flex-wrap: wrap;
}



#frenchContact{
	width: 103%;
	height: 30rem;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	top: 10vh;
	left: -100%;
	/*transform: translate(0, -50%);*/
	background-image: url("../Assets/eiffel-tower-951509.jpg");
    background-size: cover;
    background-position: center;
	box-shadow: 0px 0px 15px -5px #000000;
    transition: left 1s ease-out;
    z-index: 20000;
}
#frenchContactTitle{
	position: relative;
	width: 80%;
	height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
    display: none;
}

#frenchContactForm{
	position: relative;
	width: 50%;
	height: 80%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
    flex-wrap: wrap;
}


#frenchContactMail{
width: 100%;
height: 10%;
font-size: 1rem;
padding: 0;
margin: 0;
border: 1px solid gold;
padding: 0 0 0 1rem;
background: rgba(0,0,0,0.5);
color: white;
}

#frenchContactMail::placeholder{
color: white;
}

#frenchContactMail:focus{
border: 1px solid gold;
outline: 0 !important;
}

#frenchContactText{
width: 100%;
height: 65%;
font-size: 1rem;
resize: none;
border: 1px solid gold;
padding: 1rem;
background: rgba(0,0,0,0.5);
color: white;
}

#frenchContactText::placeholder{
color: white;
}

#frenchContactText:focus{
border: 1px solid gold;
outline: 0 !important;
}

#frenchContactArrow{
	width: 2.5%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 0;
	padding: 0 0.5rem 0 0.5rem;
	background-color: #0499f2;
background-image: linear-gradient(315deg, #0499f2 0%, #26f596 74%);


	color: white;
	writing-mode: vertical-rl;
text-orientation: upright;
font-size: 1.5rem;
font-family: "Arial";
box-shadow: -10px 0px 15px -10px #000000;
}

#frenchContactArrow:hover{
cursor:pointer;
}

#frenchContactSend{
	position: relative;
	width: 30%;
	height: 10%;
	display: flex;
	justify-content: center;
	align-items: center;
    background: rgba(0,0,0,0.5);
    color: gold;
    border: 1px solid gold;
}

.svg-inline--fa.fa-w-8{
    font-size: 2rem;
    border: 2px solid white;
    border-radius: 50px;
    color: white;
    width: 2.5rem;
    height: 2.5rem;
    margin: 2rem 0 0 0;
}

#toTop{
margin: 2rem 0 0 0;
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 3rem;

width: 100%;
position: relative;
}

.fa-arrow-alt-circle-up.fa-w-16{
    color: blue;
}
.fa-arrow-alt-circle-up.fa-w-16:hover{
    cursor:pointer;
}