body, html {
   width: 100%;
   margin: 0;
   padding: 0;
   font-size: 18px;
   font-family: 'Bebas Neue', sans-serif;
}


.class1 {
   float: left;
   overflow:auto;
   width: 160px;
   height: 100vh;
   position: fixed;
   margin: 0;
   display: grid;
   place-items: center;
   background: linear-gradient(250deg, rgba(59,120,57,1) 0%, rgba(33,29,20,1) 100%);
}

.classtel {
   display:none;
}
.points {
   width: 5rem;
   height: 100%;
   border: solid;
   border-width: 0.15rem;
   border-radius: 50%;
   border-color: black;
   margin: 1rem;
   padding: 0.3rem;
   background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}
.point_buttons {
   width: 5rem;
   height: 5rem;
   border-width: 0;
   border-radius: 50%;
   margin: 0px;
   padding: 0px;
   display: grid;
   box-shadow:2px 10px 10px 1px #72c100;
   place-items: center;
   transition:0.5s;
   background-color: #cac3b7;
}
.point_buttons:hover {
   cursor: pointer;
   transform: scale(1.1);
   transition:0.5s;
}
.point_buttons img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.class2 {
   display:inline-table;
   position:absolute;
   float:right;
   height: 100%;
   width:70%;
   right:10%;
   padding: 0;
}

tr{//border:3px solid blue;}
td{//border:2px dashed red;}
.step {
   position: absolute;
   right:15%;
   display: none;
   height:100%;
   width:70%;
}
h1 {
   font-size: 3rem;
   text-align: center;
   margin-top: 100;
   margin-bottom: 0;
   margin-left:10px;
   background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

h2 {
   font-size: 2rem;
   text-align: left;
   margin-top: 100;
   margin-bottom: 0;
   margin-left:10px;
   background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.inputsname {
   text-align:center;
   font-size: 1rem;
   font-weight: bold;
   display: flex;
   margin-left: 3%;
   align-items: center;
}
.inputs {
	background-color:transparent;
	border-bottom: 1px solid grey;
	border-radius:10px;
	border-top:none;
	font-weight:normal;
	width:100%;
	padding:5px;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   -webkit-appearance: none;
}

.buttons {
   display: flex;
   justify-content: center;
}
.bn_button {
   width: 7rem;
   height: 3rem;
   margin: 1rem 0.5rem;
   padding: 2rem 2.5rem;
   align-items: center;
   background: linear-gradient(250deg, rgba(59,120,57,1) 0%, rgba(33,29,20,1) 100%);
   border: 0;
   border-radius: 0.8rem;
   color: white;
   box-sizing: border-box;
   display: all;
   font-family: "Bebas Neue", sans-serif;
   font-size: 2rem;
   justify-content: center;
   line-height: 1rem;
   max-width: 10%;
   min-width: 10rem;
   text-decoration: none;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   white-space: nowrap;
   cursor: pointer;
   z-index:1;
   margin-bottom:100px;
}
.bn_button:active,
.bn_button:hover {
   scale: 1.1;
   transition: ease-in-out .6s;
}

.check_box:hover .check {
   stroke-dashoffset: 0;
}

.check_box {
   position: relative;
   display: inline-block;
   width: 4rem;
   height: 4rem;
}
.check_box .background {
   fill: rgb(196, 26, 26);
   transition: ease all 0.6s;
   -webkit-transition: ease all 0.6s;
}
.check_box .stroke {
   fill: none;
   stroke: #fff;
   stroke-miterlimit: 10;
   stroke-width: 0.2rem;
   stroke-dashoffset: 100;
   stroke-dasharray: 100;
   transition: ease all 0.6s;
   -webkit-transition: ease all 0.6s;
}
.check_box .check {
   fill: none;
   stroke: #fff;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 0.2rem;
   stroke-dashoffset: 22;
   stroke-dasharray: 22;
   transition: ease all 0.6s;
   -webkit-transition: ease all 0.6s;
}
.check_box input[type=checkbox] {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   margin: 0;
   opacity: 0;
   -appearance: none;
   -webkit-appearance: none;
}
.check_box input[type=checkbox]:hover {
   cursor: pointer;
}
.check_box input[type=checkbox]:checked + svg .background {
   fill: #6cbe45;
}
.check_box input[type=checkbox]:checked + svg .stroke {
   stroke-dashoffset: 0;
}
.check_box input[type=checkbox]:checked + svg .check {
   stroke-dashoffset: 0;
}

/*----- The Modal (background) -----*/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: blue;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.back {
 position:absolute;
 top:0px;
 left:0;
 cursor:pointer;
 scale:0.8;
 transition:0.5s;
}

.back:hover {
 scale:1.0;
 transition:0.5s;
}

.next {
 position:absolute;
 bottom:0px;
 left:0;
 cursor:pointer;
 scale:0.8;
 transition:0.5s;
}

.next:hover {
 scale:1.0;
 transition:0.5s;
}

/*----------------------*/

       /*
        Max width before this PARTICULAR table gets nasty
        This query will take effect for any screen smaller than 760px
        and also iPads specifically.
        */
       @media only screen and (max-width: 800px), (min-device-width: 800px) and (max-device-width: 1024px) {

            /* Force table to not be like tables anymore */
            table, tbody {
                display: block;

            }
			table {box-shadow: none;}

                /* Hide table headers (but not display: none;, for accessibility) */
                thead tr {
					display:none;
                    position: absolute;
                    top: -9999px;
                    left: -9999px;
                }
            td:before {
                    /* Now like a table header */
                    position: absolute;
                    /* Top/left values mimic padding */
                    top: 0px;
                    left: 2px;
                    white-space: wrap;
                    font-weight: bold;
					text-align: center;
                    background-color: #5D7B9D;
                    color: white;
                }

            td:hover {
                /* Behave like a "row" */
            }
   body, html {
     font-size: px;
   }
.class1 {
display:none;
}

.classtel {
   position:fixed;
   top:0px;
   height:80px;
   width: 100%;
   z-index:9999;
   padding:10px;
   padding-left:20%;
   text-align:center;
   display: inline-table;
   place-items: center;
   background: linear-gradient(120deg, rgba(33,29,20,1) 1%, rgba(59,120,57,1) 50%, rgba(33,29,20,1) 100%);
}

.line {
display:none;
}
   .class2 {
      width:auto;
      font-size:24px;
      position: absolute;
      left:2px;
      top:100px;
      right:30px;
      padding:0px;
   }

.inputsname {
   text-align:center;
   font-size: 1rem;
   font-weight: bold;
   display: flex;
   margin-left: 1%;
   align-items: center;
}
.inputs {
	background-color:transparent;
	border-bottom: 1px solid grey;
	border-radius:10px;
	border-top:none;
	font-weight:normal;
	width:100%;
	padding:5px;
}

.points {
   width: 2rem;
   height: 2rem;
   border: solid;
   border-width: 0.15rem;
   border-radius: 50%;
   border-color: black;
   margin: 1rem;
   padding: 0.3rem;
   background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}
.point_buttons {
   width: 2rem;
   height: 2rem;
   border-width: 0;
   border-radius: 50%;
   margin: 0;
   padding: 0;
   display: all;
   place-items: center;
   background-color: #cac3b7;
}

.inputsname {
   text-align:center;
   font-size: 1rem;
   font-weight: bold;
   display: flex;
   margin-left: 3%;
   align-items: center;
}
.inputs {
	background-color:transparent;
	border-bottom: 1px solid grey;
	border-radius:10px;
	border-top:none;
	font-weight:normal;
	width:100%;
	padding:10px;
}

.bn_button {
   width: 3rem;
   height: 3rem;
   margin: 1rem 0.5rem;
   padding: 2rem 2.5rem;
   align-items: center;
   background: linear-gradient(250deg, rgba(59,120,57,1) 0%, rgba(33,29,20,1) 100%);
   border: 0;
   border-radius: 0.8rem;
   color: white;
   box-sizing: border-box;
   display: all;
   font-family: "Bebas Neue", sans-serif;
   font-size: 2rem;
   justify-content: center;
   line-height: 1rem;
   max-width: 5%;
   min-width: rem;
   text-decoration: none;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   white-space: nowrap;
   cursor: pointer;
   z-index:1;
   margin-bottom:100px;
}
.back {
 position:fixed;
 top:0px;
 left:0px;
 width:80px;
 cursor:pointer;
 scale:0.8;
 transition:0.5s;
}

.back:hover {
 scale:1.0;
 transition:0.5s;
}

.next {
 position:fixed;
 top:0px;
 left:auto;
 right:2px;
 width:80px;
 cursor:pointer;
 scale:0.8;
 transition:0.5s;
}

.next:hover {
 scale:1.0;
 transition:0.5s;
}

}