/*FORMULAIRE BOOK*/

body{
  color:black;
  background-color:white;
  background-image:url(../images/hall/hallDAaccueil.jpg);
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position:110%;
  background-size: cover;
  font-family: "Avenir", sans-serif;
  font-size: 100%;
  font-weight: 500;
  width:100%;
  height:100%;
  top:0;
}

.column{
  display:flex;
  flex-direction: column;
}

.container{
  width: 1024px;
  margin:0 auto;
  display:flex;

}

main{
  padding-top: 0px;
}

/*BLOC1*/

.blocOne{
  flex-direction: column;
  justify-content: center;
  margin-left: 0px;
  margin-right: 0px;
  width: 50%;
}

.arrow{
  height:auto;
  color: white;
  display: flex;
  width: 50%;
  flex-direction: row-reverse;
}

.arrow img{
  flex-direction: row-reverse;
}

.text{
  flex-direction: column;
  color: white;
  width: 475px;
}

.title{
  font-size: 150%;
  width: 100%;
}

.textTitle{
  font-family: 'CaviarDreams','helvetica';
  margin-top:6%;
  border-left-style: solid;
  border-left-color: #FF9300;
  padding-left: 2%;
}

.smallText{
  font-size: 90%;
  font-weight: lighter;
}


/*BLOC2*/

.blocTwo{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top:11%;
  width: 100%;
  margin-right: 0px;
  margin-left: 0px;
}

form.formContainer{
  padding-left: 50px;
  padding-right: 60px;
  padding-top:10px;
  width:100%;
  height:100%;
  background-color: #f2f2f2;
  border-radius: 15px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom:20vh;
}

.flexbox{
  padding-bottom :5px;
}

select#subject{
  height: 1.5%;
  background:#F2F2F2;
  width:100%;
  font-size: 80%;
  background-color: white;
  border: solid #707070 thin;
}

input{
  border: solid #707070 thin;
  border-radius: 5%;
  height: 4vh;
  width:100%;
}

div.item{
  display:flex;
  margin:10px;
  width:100%;
}

label{
  width:100%;
}

.book{
  display:flex;
  flex-direction:column;
}

.resto input{
  margin:1%;
}

.choice{
justify-content: space-between;
margin-top:2%;
}

.restoChoice{
  display:flex;
}

.secondChoices{
  display: flex;
}

/* Customize the label (the container) */
.choiceContainer {
  display: flex;
  position: relative;
  padding-left: 5%;
  margin-bottom: 3%;
  cursor: pointer;
  font-size:70%;
  color: #707070;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.choiceContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 90%;
  width: 5.8%;
  background-color: white;
  border-color:#707070;
}

.secondChoices .checkmark{
  width: 9%;
}

/* On mouse-over, add a grey background color */
.choiceContainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.choiceContainer input:checked ~ .checkmark {
  background-color: #FF9300;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.choiceContainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.choiceContainer .checkmark:after {
  left: 30%;
  top: 4%;
  width: 25%;
  height: 60%;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*Fourth Flexbox*/
div.fourthFlexbox{
  display:flex;
  margin-bottom: 10%;
}

.message{
  display:flex;
  flex-direction:column;
  justify-content: center;
}

.writeHere{
  width:100%;
}

.containerButton{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type=submit]{
    background-color: #FF9300;
    height: 30px;
    width: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-color:#FF9300;
    display: flex;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
}


@media screen and (min-width:768px) and (max-width:1024px)
{

  main{
  padding-top: 100px;
  }

  .textTitle{
    font-size:120%;
  }

  .container{
    width:768px;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
  }

  .arrow img{
    display:none;
  }

  .smallText{
    margin-top:3%;
    width:80%;
  }

  .blocTwo{
    margin-top:4%;
  }

  form.formContainer{
    width:90%;
    margin-bottom: 20%;
  }


}

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

  main{
  padding-top: 100px;
  }

  .textTitle{
      font-size:120%;
  }

  .container{
    width:100%;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
  }

    .arrow img{
      display:none;
    }

    .smallText{
      margin-top:3%;
      width:66%;
    }

    .blocTwo{
      margin-top:4%;
    }

    .item{
      flex-direction: column;
    }

    form.formContainer{
      width:70%;
    }

}

/*FIN FORMULAIRE BOOK*/