.checkout_center{
width: 800px;
}
.checkout_center legend{
font-size: 25px;
font-weight: bold;
color: #3aa4ff;
}
.checkout_center .red{
color: red;
}

/*********  Switcher de plan  **********/
.checkout_center .plan_toggler_block{
text-align: left;
margin-left: 20px;
}
.checkout_center .toggle, .plan_toggler {
  display: inline-block;
  vertical-align: middle;
  margin: 10px;
}

.checkout_center .plan_toggler {
  color: #ddd;
  transition: .2s;
  font-weight: bold;
}

.checkout_center .toggler--is-active {
  color: #3aa4ff;
}

.checkout_center .b {
  display: block;
}

.checkout_center .toggle {
  position: relative;
  width: 80px;
  height: 35px;
  border-radius: 100px;
background-color: #3aa4ff;
  overflow: hidden;
  box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
}
.checkout_center .plan_check {
  position: absolute;
  display: block;
  cursor: pointer;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 6;
}
.checkout_center .plan_check:checked ~ .plan_switch {
  right: 2px;
  left: 57.5%;
  transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: left, right;
  transition-delay: .08s, 0s;
}
.checkout_center .plan_switch {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  right: 57.5%;
  background-color: #fff;
  border-radius: 36px;
  z-index: 1;
  transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: left, right;
  transition-delay: 0s, .08s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/***********  Block information  ************/
.checkout_center .info_sup{
max-width: 1100px;
padding: 10px;
margin: 20px auto;
}
.checkout_center .info_top{
border: 1px solid var(--base_color);
background-color: #ddf4fd;
}

/************  Les colonnes  ************/
.checkout_center .column{
max-width: 300px;
min-height: 600px;
border: 1px solid var(--base_color);
margin: 10px 10px 10px 55px ;
padding: 10px;
text-align: center;
float: left;
position: relative;
box-shadow: -5px -5px 7px #d5e0e0;
}
.checkout_center .column:hover{
min-height: 620px;
margin: 0px 10px 0px 55px ;
box-shadow: -10px -10px 7px #d5e0e0;
}
.checkout_center .column_header{
background-image: -moz-linear-gradient(0deg, #3c96ff 0%, #2dfbff 100%);
background-image: -webkit-linear-gradient(0deg, #3c96ff 0%, #2dfbff 100%);
background-image: -ms-linear-gradient(0deg, #3c96ff 0%, #2dfbff 100%);
}
.checkout_center .column_header h2{
color: white;
font-style: bolder;
padding: 5px;
margin: 0px;
}
.checkout_center .monthly_plan{
display: none;
}
.checkout_center .column_header p{
width:95%;
margin: 0px;
text-align: right;
color: black;
}
.checkout_center .column_header span{
font-weight: bolder;
font-size: 30px;
}
.checkout_center .column_header .price_info{
font-weight: lighter;
font-size: 14px;
}
.checkout_center .column_content{
}
.checkout_center .column_options{
margin-top:10px;
padding: 10px;
background-color: #ddf4fd;
}
.checkout_center .column_options:nth-child(2n+1) {
background-color: #f4ffff;
}
.checkout_center .column_footer{
padding: 10px;
min-width:280px;
background-image: -moz-linear-gradient(0deg, #3c96ff 0%, #2dfbff 100%);
background-image: -webkit-linear-gradient(0deg, #3c96ff 0%, #2dfbff 100%);
background-image: -ms-linear-gradient(0deg, #3c96ff 0%, #2dfbff 100%);
color: white;
font-size: 25px;
position: absolute;
bottom: 10px;
box-shadow: -5px -5px 3px #c6cfd1;
cursor: pointer;
}
.checkout_center .column_footer button{
border: none;
color: white;
background-color: transparent;
font-size: 25px;
}
.checkout_center .info_prix{
background-color: #ddf4fd;
font-size: 12px;
}

.checkout_center .info_climat{
border: 1px solid #17be53;
background-color: #9ded95;
}
.checkout_center .info_climat img{
max-width: 20px;
margin-right: 10px;
}

.link_plan{
display: block;
width: 100%;
background-image: -moz-linear-gradient(0deg, #3c96ff 0%, #2dfbff 100%);
background-image: -webkit-linear-gradient(0deg, #3c96ff 0%, #2dfbff 100%);
background-image: -ms-linear-gradient(0deg, #3c96ff 0%, #2dfbff 100%);
color: white !important;
font-size: 25px;
text-align: center;
padding: 10px 0px;
}

.link_plan:hover{
box-shadow: -10px 10px 7px #d5e0e0;
}

/* tablets horizontale */
@media (min-width: 768px) and (max-width: 1024px) {
  .checkout_center{
  width: 700px;
  }
}

/* only small tablets vertical*/
@media (min-width: 768px) and (max-width: 991px) {
  .checkout_center{
  width: 700px;
  }
  .checkout_center .column{
  max-width: 300px;
  margin: 10px auto;
  float: none;
  }
  .checkout_center .column_footer{
  min-width:280px;
  }
}

/* Only horizontal mobile */
@media only screen and (max-width: 767px) {
  .checkout_center{
  width: 400px;
  }
  .checkout_center .column{
  max-width: 300px;
  margin: 10px auto;
  float: none;
  }
}
/* Only vertical mobile  */
@media (min-width: 320px) and (max-width: 480px) {
  .checkout_center{
  width: 300px;
  }
  .checkout_center legend{
  font-size: 20px;
  }
  .checkout_center .toggle {
    position: relative;
    width: 40px;
    height: 20px;
  }
  .checkout_center .plan_toggler_block label{
  font-size: 18px;
  }
  .checkout_center .column{
  width: 250px;
  margin: 10px auto;
  float: none;
  }
  .checkout_center .column_options{
  font-size: 16px;
  }
  .checkout_center .column_footer{
  min-width:230px;
  }
}