@charset 'utf-8';
/* CSS Document */

/*  how to use variables
	Set variable 		name: value ;
	Call variable 		var(name)
*/


:root {
	/* Color Pallette */
	--back: rgba(234,231,220,1.00);
	--back2: rgba(216,195,165,1.00);
	--base2: rgba(142,141,138,1.00);
	--base: rgba(255.255.255,1.00);
	--hightlight: rgba(233,128,116,1.00);
	--hightlight2: rgba(232,90,79,1.00);
    --hightlight3: rgba(232,90,79,.15);
	
	/* Sizes */
	--1-1: 100%;
	--3-4: 75%;
	--2-3: 66%;
	--1-2: 50%;
	--1-3: 33%;
	--1-4: 25%;
	--1-8: 12%;
	
	/* Radius sizes */
	--radL: 25px;
	--radM: 15px;
	--radS: 5px;
	
	/* form Label Sizes */
    --labelXL: 26px;
	--labelL: 16px;
	--labelM: 16px;
	--labelS: 12px;
	
	/* form font Sizes */
    --fontXL: 26px;
	--fontL: 16px;
	--fontM: 14px;
	--fontS: 12px;
	
	/* form feild Sizes */
	--fieldL: 300px;
	--fieldM: 200px;
	--fieldS: 100px;
	--fieldSx: 50px;
}

.basepage{
	background-color: var(--back);
    font-family: Georgia;
    }

.LandingDesktop{
	display:flex;
	flex-wrap: wrap;
    justify-content:flex-start;
}

.menuSystem {
    width: 100%;
}
.formFullContainer{
    width: 980px;
    height: auto;
}

.formHalfContainer{
    width: 420px;
    height: auto;

}
.formForthContainer{
    width: 310px;
    height: auto;
}

/* Form Full size 1024px X Auto */
.formFull{
	width: 940px;
	height: auto;
	background-color: var(--back);
	border-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-color: var(--hightlight2);
	border-width: 3px;
	border-left-color: var(--back);
	border-radius: var(--radL);
    position: relative;
    padding: 8px;
}
.formFull_Label{
	color: var(--base);
	font-size: var(--labelXL);
	text-align: center;
	background-color: var(--back);
	position: absolute;
	top: -18px;
    left: 0px;
	width: var(--1-4);
	height: 45px;
	}
.formFull_Status{
	color: var(--base);
	font-size: var(--labelS);
	text-align: center;
	position: absolute;
    bottom: 0px;
    right: 0px;
	width: var(--1-4);
	}

.formFull_Footer{
	color: var(--base);
	font-size: var(--labelS);
	text-align: center;
	background-color: var(--back);
	position: absolute;
    bottom: -12px;
    left:0px;
	width: var(--1-4);
	height: 20px;
	}

.form34{
	width: 510px;
	height: auto;
	background-color: var(--back);
	border-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-color: var(--hightlight2);
	border-width: 3px;
	border-left-color: var(--back);
	border-radius: var(--radL);
    position: relative;
    padding: 8px;
}





/* Form Half size 380px X Auto */
.formHalf{
	width: 380px;
	height: auto;
	background-color: var(--back);
	border-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-color: var(--hightlight2);
	border-width: 3px;
	border-left-color: var(--back);
	border-radius: var(--radL);
    position:relative;
    padding: 8px;
}
.formHalf_Label{
	color: var(--base);
	font-size: var(--labelXL);
	text-align: center;
	background-color: var(--back);
	position: absolute;
	top: -18px;
    left: 0px;
	width: var(--1-2);
	height: 45px;
	}
.formHalf_Status{
	color: var(--base);
	font-size: var(--labelS);
	text-align: center;
	position: absolute;
    bottom: 0px;
    right: 0px;
	width: var(--1-4);
	}

.formHalf_Footer{
	color: var(--base);
	font-size: var(--labelS);
	text-align: center;
	background-color: var(--back);
	position: absolute;
    bottom: -12px;
    left:0px;
	width: var(--1-4);
	height: 20px;
	}

/* Form forth size 280px X Auto */
.formForth{
	width: 280px;
	height: auto;
	background-color: var(--back);
	border-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-color: var(--hightlight2);
	border-width: 3px;
	border-left-color: var(--back);
	border-radius: var(--radL);
    position:relative;
    padding: 8px;
}


.button{
    background-color: var(--hightlight);
    width: 200px;
    height: 30px;
    border-radius: 10px;
    color: var(--base);
    font-weight: 400;
    font-size: var(--fontM);
    
}

.buttonS{
    background-color: var(--hightlight);
    width: 100px;
    height: 30px;
    border-radius: 10px;
    color: var(--base);
    font-weight: 400;
    font-size: var(--fontM);
    
}
.buttonXS{
    background-color: var(--hightlight);
    width: 65px;
    height: 25px;
    border-radius: 5px;
    color: var(--base);
    font-weight: 400;
    font-size: var(--fontS);
    
}

.buttonMin{
    background-color: var(--hightlight);
    width: 30px;
    height: 20px;
    border-radius: 5px;
    color: var(--base);
    font-weight: 400;
    font-size: var(--fontM);
    
}

.buttonLink{
    background-color: rgba(0,0,0,0.15);
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--base);
    font-weight: 400;
    border: thin solid rgba(0,0,0,0.5);
    cursor: pointer;
    
}






.errorInfo{
	background-color: var(--hightlight3);
	border-radius: var(--radM);
    padding: 8px;
    text-align: center;
    color: var(--base);
    font-style: italic;
}



.formInput_L{
	background-color: var(--back);
	border-style: none;
	border-bottom-style: solid;
	border-bottom-color: var(--base2);
	width: var(--fieldL);
	font-size: var(--fontL);
}

.formInput_L:focus{
	background-color: var(--back2);
	border-style: none;
	border-bottom-style: solid;
	border-bottom-color: var(--base2);
	width: var(--fieldL);
	font-size: var(--fontL);
}


.formInput_L_Label {
	color: var(--base2);
	font-size: var(--labelL);
}

.formInput_M{
	background-color: var(--back);
	border-style: none;
	border-bottom-style: solid;
	border-bottom-color: var(--base2);
	width: var(--fieldM);
	font-size: var(--fontM);
}

.formInput_M:focus{
	background-color: var(--back2);
	border-style: none;
	border-bottom-style: solid;
	border-bottom-color: var(--base2);
	width: var(--fieldM);
	font-size: var(--fontM);
}

.formInput_M_Label {
	color: var(--base2);
	font-size: var(--labelM);
}

.formInput_S{
	background-color: var(--back);
	border-style: none;
	border-bottom-style: solid;
	border-bottom-color: var(--base2);
	width: var(--fieldS);
	font-size: var(--fontS);
}

.formInput_S:focus{
	background-color: var(--back2);
	border-style: none;
	border-bottom-style: solid;
	border-bottom-color: var(--base2);
	width: var(--fieldS);
	font-size: var(--fontS);
}

.formInput_S_Label {
	color: var(--base2);
	font-size: var(--labelS);
}

.formInput_textarea_M{
    background-color: rgba(0,0,0,0.05);
	border-style: solid;
	border-color: var(--base2);
	width: var(--fieldM);
	font-size: var(--fontM);
}
.formInput_textarea_M:focus{
    background-color: var(--back2);
	border-style: solid;
	border-color: var(--base2);
	width: var(--fieldM);
	font-size: var(--fontM);
}

.formInput_textarea_L{
    background-color: rgba(0,0,0,0.05);
	border-style: solid;
	border-color: var(--base2);
	width: var(--fieldL);
	font-size: var(--fontL);
}

.formInput_textarea_L:focus{
    background-color: var(--back2);
	border-style: solid;
	border-color: var(--base2);
	width: var(--fieldL);
	font-size: var(--fontL);
    
}

a {
    font-style: normal;
}