@import url("styles.css");

main {
	background-color: var(--darkgrey);
}

.category_headline {
  margin: 0px 0px;
  padding: 60px 0px 30px 0px;
}




.order_all {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.order_image {
  width: 250px;
  border-radius: 50%;
  border: 5px solid var(--white);
}


.order_container {
  font-family: Eurostile_Normal;
  display: flex;
  justify-content: center;
  margin: 20px auto 60px auto;
  overflow: hidden;
  background-color: var(--grey);


  /* colors */
  --color-blue: #2552d0;
  --color-light-blue: #3266e3;
  --color-gray: #e5e7eb;
  --color-dark-gray: #9da3ae;
  --color-pink: #edadd2;

  border-radius: 5px;
  border: 1px solid var(--lightgrey);
  width: 80vw;
}
.order_left {
  width: 40vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0px 20px 30px;
}

.order_right {
  /* container */
  --c-width: 60;
  --c-max-width: 700px;

  width: 40vw;
  max-width: var(--c-max-width);
  display: block;
  align-content: center;
  padding: 0px 40px 0px 40px;
  border-left: 1px solid var(--white);
  margin: 30px 0;

}

.country {
}

.country label{
  font-family: Eurostile_Normal;
  font-weight: 100 !important;
  font-size: 1rem !important;
}

.country select {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  border-radius: 5px;
  font-size: 16px;
  display: block;
  width: 70%;
  padding: 6px;
  background-color: var(--white_desat);
  border: none;
  border: 4px solid var(--white_desat);
  outline: none;
  border-radius: 5px;
  color: var(--black);
  font-family: Eurostile_Normal;


}

.orders_text {
    font-family: Eurostile_Normal;
    text-align: justify;
    font-size: 0.9rem;
    font-weight: 100;
    line-height: 1.3rem;
    color: var(--white);
    padding: 30px 40px 30px 0px;
}

.orders_text li {
	line-height: 2;
}

.list_details {
	padding: 20px 0px;
}

.orders_text_bold {
  font-family: Eurostile_Bold, sans-serif;
}

h1 {
  font-family: Eurostile_Bold, sans-serif;
  font-weight: 400;
  font-size: min(2.5vw, 2rem);;
  text-align: center;
  line-height: 1.3;
  color: var(--orange);
  padding: 10px 0px 50px 0px;
  text-transform: uppercase;
}



.order_form {
}

.order_form label {
  display: block;
  padding: 12px 0 6px 0px;
  letter-spacing: -0.2px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;

}

.order_form input,
.order_form textarea {
  font-size: 16px;
  display: block;
  width: 100%;
  padding: 6px;
  background-color: var(--white_desat);
  border: none;
  border: 4px solid var(--white_desat);
  outline: none;
  border-radius: 5px;
  color: var(--darkgrey);
  font-family: Eurostile_Normal;
}

.order_form input:focus,
.order_form textarea:focus {
  background-color: var(--white_desat_bright);
  color: var(--darkgrey);
}

.checkbox {
  display: flex;
  justify-content: left;
  align-items: center;
}

.checkbox label {
  padding: 20px 10px 20px 0px;
  width: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Eurostile_Normal, sans-serif;
  font-size: 0.9rem;
  font-weight: 100;
}

.checkbox input {
  display: flex;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  width: 100px;
}

.order_form button {
  display: block;
  margin-top: 12px;
  margin-bottom: 12px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 5px;
  border-color: transparent;
  background-color: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: 18px;
  font-family: Eurostile_Normal, sans-serif;
  border-radius: 5px;
  cursor: pointer;

  transition: 300ms all;
}

.order_form button:hover {
  background-color: var(--light-orange);
}

.formcarry-alert {
  padding: 12px;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  margin-top: 12px;
  display: none;
}

.formcarry-alert.visible {
  display: block;
}

.formcarry-alert.success {
  background: #69cf9d;
}

.formcarry-alert.error {
  background: #de524c;
}


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

.order_container {

	  width: 93vw;
	  max-width: var(--c-max-width);
	  padding: 30px;
	  border-radius: 5px;
    flex-direction: column;
    align-items: center;
 
	}

	.order_container h1 {
		font-size: min(5.3vw, 2rem);
	}

.order_left {
  width: auto;
  display: flex;
  padding: 20px 0px 20px 0px;
}

.orders_text {
    padding: 0px 0px 10px 0px;
}

.order_right {
  /* container */
  --c-width: 60;
  --c-max-width: 700px;

  width: 90vw;
  max-width: var(--c-max-width);
  display: block;
  align-content: center;
  padding: 5px 10px 0px 10px;
  border-left: 0px solid var(--white);

}

}