/*CONTAINERS*/

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

.wrap {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.wrap-2 {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.group-hero {
  top: -65vh;
}

.group-hero sup {
  vertical-align: text-top;
  font-size: x-small;
}

.group-data {
  top :-5vh;
}

/*CONTENT*/

.product-card {
  display: block;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex: 100%;
  height: auto;
  padding: 2rem;
}

.service-container {
  text-align: left;
  width: 38%;
  padding: 2rem;
}

.text-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  width: 62%;
}

.content {
  padding: 2rem;
  color: var(--night);
}

ul {
  font-size: 1.7rem;
  line-height:1.8;
  color: var(--night);
  list-style-position: inside;
}

h4 {
  padding-top: 2rem;
  padding-bottom: 1rem;
}

#hero-image {
  transition: 0.5s cubic-bezier(.18,-0.01,.24,.95);
  cursor: pointer;
}

#hero-image:hover {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.05);
}

[id^=ressources] .content {
  display: flex;
  flex-wrap: wrap;
}

[id^=ressources] .content a {
  font-size: 7rem;
  color: var(--off)
}

[id^=ressources] .content a:hover {
  color: var(--hover)
}

/*ACCORDION*/

input {
  display: none;
}

label[for|="title"] {
  display: block;
  width: 40px;
  height: 40px;
  color: var(--off);
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  background: white;
  top: 1.5rem;
  position: relative; /* ADDING THIS IS REQUIRED */
}

label[for|="title"]:hover {
  color: var(--hover);
}

label[for|="title"]::after {
    content: '\002B';
    font-size: 55px;
    font-weight: 100;
    position: absolute;
    top: -13px;
    left: 5px;
    transition: 0.5s cubic-bezier(.18,-0.01,.24,.95);
}

input:checked + label[for|="title"]::after {
    transform: rotateZ(-45deg);
}

input + label[for|="title"] + .content {
  transition: 0.5s cubic-bezier(.18,-0.01,.24,.95);
  opacity: 0;
  height: 0;
  overflow: hidden;
}

input:checked + label[for|="title"] + .content {
  opacity: 1;
  height: auto;
}

input + label[for|="title"] + .image-container {
  transition: 0.5s cubic-bezier(.18,-0.01,.24,.95);
  opacity: 1;
}

input:checked + label[for|="title"] + .image-container {
  opacity: 0;
  height: 0;
}

/*FORM*/

form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

*:focus {outline:none !important}

.formform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

select {
  font-family:inherit;
  padding: 1rem;
  border: none;
  background: #f8f8f8;
  margin: 1rem;
  resize: vertical;
  color: var(--night);
  font-size: 1.7rem;
  width: 56%;
}

select:hover{
  background-color: white;
}

select:focus {
	box-shadow:-10px -10px 40px rgba(217,217,217,0.5),
						 3px 3px 10px rgba(0,0,0,0.1);
}

input[type=submit] {
  background: var(--off);
  color: white;
  padding: 1.5rem 2rem;
  margin: 2rem 1rem;
  border: none;
  font-family:inherit;
  font-size: 1.7rem;
  border-radius: 5rem;
  cursor: pointer;
  transition: 0.5s cubic-bezier(.18,-0.01,.24,.95);
}

input[type=submit]:hover {
  background-color: var(--hover);
  box-shadow:  7px 15px 30px rgba(0, 0,0, 0.2);
  color: white;
}

input[type=submit]:focus {
  box-shadow:5px 5px 25px rgba(0,0,0,0.2);
}

/*TABLE*/

b {
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--night);
  width: 34%;
}

th {
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 3.5rem;
}

td {
  text-align: left;
}

#prices {
  font-size: 1.7rem;
  border-collapse: collapse;
  width: 100%;
}

#prices td, #prices th {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

#prices tr:hover {background-color: #f8f8f8;}

#prices th {
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-right: 20px;
  text-align: left;
}

/*RESPONSIVE*/

@media screen and (max-width: 840px) {
  .group-hero {
    top :-45vh;
  }

  .product-card {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .service-container {
    text-align: center;
    width: 100%;
  }

  .text-container {
    width: 100%;
    justify-content: center;
  }

  .small-image-container img {
    max-height: 25vh;  /* limit height for long SOMs images (ex OPOS8MM) */
  }

  .content {
    padding: 1rem;
  }

  b {
    width: 100%;
  }

  select {
    width: 100%;
    margin: 1rem 0rem 1rem 0rem;
  }
}

@media screen and (max-width: 600px) {
  .group-hero {
  top: -40vh;
  }
/*
  .group-footer {
    height: 55vh;
    top: 10vh;
  }
*/
  .group-data {
    top: 5vh;
  }
}

@media screen and (min-height: 720px) {
  .group-data {
    top: 0vh;
  }
}

@media screen and (max-height: 720px) {
  /* remove "order kit" button when not enough height */
  #kit-button {
    display: none;
  }
}