/* The navigation bar */
body{
	background-color: white;
}

.navbar {
  overflow: hidden;
  background-color: white;
  border-bottom: 1px solid black;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */

}

/* Links inside the navbar */
.navbar a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  justify-content: center;
  font-size: 25px;
  font-family: 'futurabook';
  font-weight: normal;
  font-style: normal; 
}



.about{
	margin-top: 4%; margin-bottom: 0.5%; text-align: center;
	justify-content: center; font-size: 40px; text-decoration: underline; 
  font-style: normal; 
	font-weight: bold;
  font-family: 'futurabook';
    
}
.about-text{
	margin-top: 0.5%; margin-bottom: 2%; margin-left: 5%; margin-right: 5%; 
	justify-content: center; font-size: 30px; font-family: 'futurabook';
  font-weight: normal;
  font-style: normal; 
    
}

.about-text a{
  color: black;
    
}

.about-text b{
  color: black;
  font-family: 'futurabook';
  font-weight: normal;
  font-style: normal; 
}

textarea {
	width: 95%; 
	margin-left: 2.5%;
	margin-bottom: 1%;
	font-size: 24px;
	overflow: auto;
	background-color: white;
	font-family: 'futurabook';
  font-weight: normal;
  font-style: normal; 
}


textarea[disabled]
{
 width: 95%; 
  margin-left: 2.5%;
  margin-bottom: 1%;
  font-size: 24px;
  overflow: auto;
  background-color: white;
  font-family: 'futurabook';
  color: black;
}

textarea
{
 width: 95%; 
  margin-left: 2.5%;
  margin-bottom: 1%;
  font-size: 24px;
  overflow: auto;
  background-color: white;
  font-family: 'futurabook';
  color: black;
}

.continue .clear {
	display: inline;
	text-align: center;
}

.continue {
	margin-left: 2.5%;
	font-size: 25px;
	background-color: transparent;
	font-weight: bold;
	font-family: 'futurabold';

}

.rentb {
  font-size: 25px;
  background-color: transparent;
  font-weight: bold;
  font-family: 'futurabook';
  
}


.clear{
	float: right;
	margin-right: 2%;
	font-size: 25px;
	background-color: transparent;
	font-weight: bold;
	font-family: 'futurabold';
}

span{
	font-size: 40.5px;
	font-family: 'futurabold';
  font-weight: normal;
  font-style: normal; 
	font-weight: bold;
}

.menu-btn {
	float: left;
	align-self: center;
	cursor:pointer;
	justify-content: center;
	margin-top: 0.5%;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  font-family: 'futurabold';
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  margin-bottom: 5%;
}

.about-link {
	margin-top: 25%;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.continue:hover {
  border: 3px solid black;
  transition: 0.3s;
  transition: 0.3s;
}


.clear:hover {
  border: 3px solid black;
  transition: 0.3s;
}


.thecore {
  margin-top: 6.5%; margin-bottom: 1%; margin-left: 2.5%; text-align: center;
  justify-content: center; font-size: 60px; text-decoration: underline; font-family: 'futurabold';
  font-weight: normal;
  font-style: normal; 
    
}

#loader{
  display:none;
}

#loader.active{
  display: flex; 
  margin-top: 7%;
}


.lds-ring {
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 54px;
  height: 54px;
  margin: 8px;
  border: 6px solid black;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: black transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}




/* The Modal (background) */
.rentModal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: white; /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  font-size: 30px;
  text-align: center;
  font-family: 'futurabook';
  font-style: normal; 
}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: white; /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  font-size: 30px;
  text-align: center;
  font-family: 'futurabook';
  font-style: normal; 
}

/* Modal Content/Box */
.modal-content {
  background-color: white;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  font-family: 'futurabook';
  font-style: normal; 
  font-size: 30px;
}

.modal-content a{
  color: black;
  font-family: 'futurabook';
  font-style: normal; 
}

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

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

.go {
  background-color: white;
  border: 2px solid black;
  font-size: 25px;
  text-align: center;
  text-decoration: none;
  font-weight: bolder;
  padding: 10px;
  margin-bottom: 1%;
  font-family: 'futurabook';
  font-weight: bold;
  font-style: normal; 
}

.price{
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 2.5%;
  font-family: 'futurabook';
  font-weight: bold;
}

.flex{
  display: flex; justify-content: center;
}

b{
  font-family: 'futurabold';
}

.row{
  display: flex;
  grid-column-gap: 1px;
  margin-bottom: 1%;
}

@media only screen and (min-width : 320px) {
  .sidenav {padding-top: 60px;}
  .sidenav a {font-size: 13px; margin-bottom: 15%}
  .menu-btn {margin-top: 1.5%;}
  .about-text {font-size: 21.5px;}
  .about {font-size: 25px; margin-top: 24%}
  .modal-content{font-size: 25px;}
  .price{margin-bottom: 5%; font-size: 20px;}
  .go{font-size: 23px;}
  .continue{font-size: 20px}
  .clear{font-size: 20px}
  .modal a{font-size: 20px;}
  .modal-content{font-size: 20px;}
  .rentb{margin-bottom: 8%; font-size: 22px;}
  .use{font-size: 24px;}
  .flex {margin-top: 20%;}
  .thecore{margin-top: 5.5%; font-size: 40px;}
  .lds-ring div {border: 5px solid black; border-color: black transparent transparent transparent; 
    width: 25px; 
    height: 25px;}
  .navbar a {font-size: 20px}
  span{font-size: 30px}
  textarea{font-size: 22px;}
  textarea[disabled]{font-size: 22px;}
  .rentb{margin-bottom: 8%; font-size: 24px; border: 2px solid black;}
  .use{font-size: 26px; margin-bottom: 10%}
}

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 350px) {
  .sidenav {padding-top: 60px;}
  .sidenav a {font-size: 15px; margin-bottom: 15%}
  .menu-btn {margin-top: 1.5%;}
  .about-text {font-size: 21.5px;}
  .about {font-size: 25px; margin-top: 12.5%}
  .flex {margin-top: 18%;}
  .lds-ring div {border: 6px solid black; border-color: black transparent transparent transparent; 
    width: 32px; 
    height: 32px;}
  .thecore{margin-top: 5.5%; font-size: 42px;}
  .modal-content{font-size: 25px;}
  .price{margin-bottom: 5%; font-size: 20px;}
  .go{font-size: 23px;}
  .continue{font-size: 22px}
  .clear{font-size: 22px}
  .modal a{font-size: 20px;}
  .modal-content{font-size: 20px;}
  .row{grid-column-gap: 20px;, margin-bottom: 10%;}
  .navbar a {font-size: 20px}
  span{font-size: 30px}
  textarea{font-size: 24px;}
  textarea[disabled]{font-size: 24px;}
  .rentb{margin-bottom: 8%; font-size: 24px; border: 2px solid black;}
  .use{font-size: 26px; margin-bottom: 10%}
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
.sidenav {padding-top: 60px;}
  .sidenav a {font-size: 23px; margin-bottom: 7%}
  .flex {margin-top: 11%;}
  .menu-btn {margin-top: 1.5%;}
  .about-text {font-size: 23px;}
  .about {font-size: 28px;margin-top: 12%}
  .lds-ring div {border: 7px solid black; border-color: black transparent transparent transparent; 
    width: 35px; 
    height: 35px;}
  .thecore{margin-top: 7%; font-size: 45px;}
  .modal-content{font-size: 25px;}
  .price{margin-bottom: 5%; font-size: 20px;}
  .go{font-size: 23px;}
  .modal a{font-size: 25px;}
  .modal-content{font-size: 25px;}
  .row{grid-column-gap: 20px;}
  .navbar a {font-size: 25px}
  span{font-size: 35px}
  textarea{font-size: 24px;}
  textarea[disabled]{font-size: 24px;}
  .rentb{margin-bottom: 6%; font-size: 28px; border: 2px solid black;}
  .use{font-size: 28px;}
}

@media only screen and (min-width : 640px) {
.sidenav {padding-top: 60px;}
  .sidenav a {font-size: 25px; margin-bottom: 7%}
  .menu-btn {margin-top: 1.5%;}
  .about-text {font-size: 24px;}
  .about {font-size: 28px;margin-top: 8%}
  .lds-ring div {border: 7px solid black; border-color: black transparent transparent transparent; 
    width: 35px; 
    height: 35px;}
  .thecore{margin-top: 6%; font-size: 50px;}
  .modal-content{font-size: 25px;}
  .price{margin-bottom: 5%; font-size: 20px;}
  .go{font-size: 23px;}
  .modal a{font-size: 25px;}
  .modal-content{font-size: 25px;}
  .row{grid-column-gap: 60px;}
  .flex{margin-top: 6%}
  .navbar a {font-size: 25px}
  span{font-size: 35px}
  textarea{font-size: 24px;}
  textarea[disabled]{font-size: 24px;}
  .rentb{margin-bottom: 5%; font-size: 30px;}
  .use{font-size: 30px; margin-bottom: 8%}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
.sidenav {padding-top: 60px;}
  .sidenav a {font-size: 25px;}
  .menu-btn {margin-top: 1.5%;}
  .thecore{margin-top: 6%; font-size: 55px;}
  .modal-content{font-size: 25px;}
  .price{margin-bottom: 5%; font-size: 20px;}
  .go{font-size: 23px;}
  .continue{font-size: 24px}
  .clear{font-size: 24px}
  .about-text {font-size: 31px;}
  .about {font-size: 33px;margin-top: 4%}
  .modal a{font-size: 25px;}
  .modal-content{font-size: 25px;}
  .lds-ring div {border: 7px solid black; border-color: black transparent transparent transparent; 
    width: 38px; 
    height: 38px;}
  .flex{margin-top: 5%}
  .navbar a {font-size: 25px}
  span{font-size: 40px}
  textarea{font-size: 24px;}
  textarea[disabled]{font-size: 24px;}
  .rentb{margin-bottom: 5%; margin-right: 0.1%; font-size: 35px;}
  .use{font-size: 35px; margin-right: 0.1%; margin-bottom: 7%}
  .row{grid-column-gap: 60px;}
}


/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
.sidenav {padding-top: 60px;}
  .sidenav a {font-size: 25px;}
  .menu-btn {margin-top: 1.5%;}
  .lds-ring div {border: 8px solid black; border-color: black transparent transparent transparent;
   width: 38px; 
    height: 38px;}
  .thecore{margin-top: 6%; font-size: 58px;}
  .modal-content{font-size: 25px;}
  .price{margin-bottom: 5%; font-size: 23px;}
  .go{font-size: 25px;}
  .continue{font-size: 25px}
  .clear{font-size: 25px}
  .about-text {font-size: 32px;}
  .about {font-size: 34px;margin-top: 4%}
  .modal a{font-size: 25px;}
  .modal-content{font-size: 25px;}
  .row{display:block; grid-column-gap: 30px;}
  .flex{margin-top: 3.5%}
  .navbar a {font-size: 25px}
  span{font-size: 40.5px}
  textarea{font-size: 24px;}
  textarea[disabled]{font-size: 24px;}
  .rentb{margin-bottom: 5%; margin-right: 2%; font-size: 35px;}
  .use{font-size: 35px; margin-bottom: 7%}
  .row{grid-column-gap: 60px;}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
.sidenav {padding-top: 60px;}
  .sidenav a {font-size: 25px;}
  .menu-btn {margin-top: 1.5%;}
  .about-text {font-size: 33px;}
  .about {font-size: 35px;margin-top: 4%}
  .modal-content{font-size: 25px;}
  .price{margin-bottom: 5%; font-size: 23px;}
  .go{font-size: 25px;}
  .continue{font-size: 26px}
  .clear{font-size: 26px}
  .modal a{font-size: 30px;}
  .modal-content{font-size: 30px;}
  .row{display:block; grid-column-gap: 40px;}
  .flex{margin-top: 1%}
  .thecore{margin-top: 6%; font-size: 60px;}
  .lds-ring div {border: 8.5px solid black; border-color: black transparent transparent transparent; 
    width: 38px; 
    height: 38px;}
  textarea{font-size: 24px;}
  textarea[disabled]{font-size: 24px;}
  .rentb{margin-bottom: 4%; margin-right: 2%; font-size: 35px;}
  .use{font-size: 35px; margin-bottom: 6%}
}