


#content-contacte{
	display:flex;
	flex-direction: column;
	height:fit-content;
	min-height: 100vh;
	padding-top: 10vh;

    width: 100%;
}


#columnes-contacte{
	display:flex;
	flex-direction: row;
	height:fit-content;
	width:100%;
	max-width:100%;
}

#contacte-left, #contacte-right{
	min-height: 100%;
	height:fit-content;
	margin: var(--padding);
	width: calc(50% - 2 * var(--padding));
	
}

#contacte-right{
    margin:0;
 
}


#title-contact{
	margin-bottom: 2vh;
}

.sender-details{
	display:flex;
	width:100%;
    max-width:100%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;

}
.long-inputs{
	display:flex;
	flex-direction:column;
	width:100%;

}

.email-form{
	width:100%;
	display:flex;
	flex-direction: column;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: stretch;
    position: relative;
    height: 100%;
    min-height: fit-content;
    /*padding-left: 0;*/
}

.contacte-emails{
	margin-top:0;
	width:100%;
}

.email-label{
	display:flex;
	flex-direction:column;
    min-width: 30%;
	margin-right:var(--padding);
    margin-bottom: var(--padding);
    margin-top: var(--padding);
	width: 40%;

}
.email-label:last-of-type{
    margin-right: 0;
}

.email-input{
    margin-top:0.5rem;
	width:100%;
    display:flex;

}
.message{
	height:30vh;
	resize: none;
    margin-bottom: 2vh;
}
.sender-name-label{
	width: calc(40% - 2 * var(--padding));
}

.sender-email-label{
	width:calc(60% - 2 * var(--padding));
}

.bottom-border-input{
	border: none;
	border-bottom:1px solid black;
}
.square-border-input{
	border: 1px solid black;
}
.phone-input{
	display:flex;
	flex-direction:row;
    width:100%;
    max-width:100%;
    flex-wrap: wrap;
    justify-content: space-between;
}
.phone-prefix-label{
	width:20%;
    min-width: max(20%, fit-content);
}
.phone-number-label{
    width:100%;
    margin-left:auto;
}

.phone-prefix{
	width:100%;
	display:flex;
	flex-direction:row;
}
.phone-prefix-input{
	width:100%;

}


.contact-header{
    padding: var(--padding);
    margin: var(--padding-vertical);
}

.message-label{
    width: 100%;
}



.submit-email{
        width:fit-content;
	margin-left: auto;
	margin-right: auto;
}



@media only screen and (max-width: 1025px) {
    #content-contacte{
        height:fit-content;
        min-height: fit-content;
        margin-bottom: 10vh;
        align-items: center;
        flex-direction: column;
    }

	#columnes-contacte{
		flex-direction:column;
		align-items: center;
	}
	#contacte-left, #contacte-right{
		width:var(--padded-width);
		align-items:center;
	}
	#contacte-left{
		padding-bottom: 5vh;
	}
	
	.message{
		height:20vh;
	}

}





