@media only screen and (max-width: 600px) {
   .content1 {
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
   }
   .parent {
      width: 70% !important;
      margin-right: 0% !important;
      text-align: center;
   }
   .ele-heading-title {
      text-align: center;
   }
}

.ele-heading-title {
   color: #000000;
   text-transform: uppercase;
   font-size: 35px;
   font-weight: 600;
   letter-spacing: 5px;
   margin: 0;
   line-height: 1;
}
.ele-widget-container {
   padding: 50px 0px 30px 0px;
   border-style: solid;
   border-width: 0px 0px 1px 0px;
   border-color: #0000000d;
}
.content-area {
   width: 100%;
}
.content1 {
   display: flex;
   margin: 2% 0 2% 0;
}
.selection h3 {
   /* font-family: 'Roboto'; */
   letter-spacing: 2px;
   text-transform: uppercase;
   font-size: 16px;
   margin: 0;
}
.parent {
   width: 35%;
   position: relative;
   top: 0;
   left: 0;
   margin-right: 5%;
}
#image1 {
   position: relative;
   top: 0;
   left: 0;
   width: 600px;
}
#image2 {
   position: absolute;
   top: 0;
   left: 0;
   width: 600px;
}

#btnPdf {
   margin: 2% 0 0 0;
}
#dl {
   background-color: #000000;
   display: inline-block;
   line-height: 1;
   font-size: 16px;
   padding: 12px 33px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   text-transform: uppercase;
   letter-spacing: 2px;
   width: 100%;
   /* font-family: 'Roboto'; */
   color: #fff;
   text-align: center;
   -webkit-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
}
#btnPdf a {
   -webkit-box-shadow: none;
   box-shadow: none;
   text-decoration: none;
}
#dl:hover {
   cursor: pointer;
}
.selection {
   border: 0.5px rgb(214, 209, 209) solid;
   /* padding: 1% 0 5% 2%;
   width: 90%; */
   padding: 1rem;
}
.btnSelect {
   justify-content: space-between;
   margin-bottom: 1rem;
}
.imgCouleur {
   display: flex;
   flex-wrap: wrap;
   /* margin-bottom: -5%; */
}
.squarex {
   width: 55px;
   height: 55px;
   transition: transform 0.2s;
   appearance: none;
   border: none !important;
   border-radius: 5px;
}

.squarex:hover {
   cursor: pointer;
   transform: scale(1.1);
}
.circle {
   background: black;
   border-radius: 100%;
   height: 30px;
   width: 30px;
   margin: 0;
}
.imgc {
   padding: auto;
   margin: 0.5% 0.5% 0% 0.5%;
   transition: transform 0.1s;
   margin-bottom: 1rem;
}
.imgc p {
   margin-bottom: -3%;
   text-align: center;
   margin: 0;
}

.imgc img {
   width: 55px;
   height: 55px;
}
.imgc img:hover {
   cursor: pointer;
   transform: scale(1.1);
}

.containerBtn {
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 22px !important;
   display: inline;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* Hide the browser's default radio button */
.containerBtn input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
   position: absolute;
   top: 0;
   left: 0;
   height: 25px;
   width: 25px;
   background-color: #eee;
   border-radius: 50%;
}

.checkmark::before {
   content: none !important;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
   border: 2px black solid;
}
.containerBtn #one {
   background-color: #941f1f;
}
.containerBtn #two {
   background-color: #561420;
}

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

/* Show the indicator (dot/circle) when checked */
.containerBtn input:checked ~ .checkmark:after {
   display: block;
}

/* Style the indicator (dot/circle) */
.containerBtn .checkmark:after {
   top: 9px;
   left: 9px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
}

/* PDF PAGE */
#pdfContent {
   display: none;
}
.PDF-entry header {
   width: 40%;
   margin: 2% 0 10% 30%;
}

.PDF-entry header p {
   text-transform: uppercase;
   font-weight: 700;
}

#sec {
   display: flex;
   margin: 0 0 0 10%;
}
.parentpdf {
   width: 55%;
   position: relative;
   top: 0;
   left: 0;
   margin-right: 5%;
   flex-shrink: 0;
}
.parentpdf > div {
   border: none !important;
}

.parentpdf > div svg,
.parentpdf > div img {
   border: none !important;
}

.couleurspdf {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}
.couleurspdf p {
   letter-spacing: 2.7px;
}
.txtpdf {
   letter-spacing: 2.7px;
   font-size: smaller;
}
.square {
   width: 100px;
   height: 100px;
}

.squareStyle {
   text-align: center;
}

.squareStyle__number {
   border: black 1px solid;
   margin: 0 0 -3% 0;

   font-size: large;
}

.footerpdf {
   display: flex;
   justify-content: space-around;
   margin-top: 19%;
   align-items: center;
}
#pdflogofooter img {
   max-width: 210px;
   margin-left: 8.5%;
}
.copy {
   text-align: right;
   line-height: normal;
   letter-spacing: 2.7px;
   font-size: small;
}

.img-preview {
   max-height: 600px;
   overflow: hidden;
}

.img-preview svg {
   width: 100%;
   height: auto;
}

@media print {
   .parentpdf > div svg,
   .parentpdf > div img {
      border: none !important;
   }
}