@font-face {
    font-family: 'right-sans-compact-regular';
    src: url('../fonts/right-sans/pprightsans-compactregular-webfont.woff2') format('woff2'),
         url('../fonts/right-sans/pprightsans-compactregular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


body {
	background-color: #A0CBDE;
		width:1680px;
	overflow-x: scroll;
	overflow-y:hidden;
}

/*BUTTONS*/

section.button-switch-1{
	height:40px;
	width:150px;
	margin-left: 5vw;
	margin-top: 80vh;
	position: absolute;
}

button {
	border-radius: 100%;
	border-color:#F05500;
	background-color: #FCF4DD;
	border-width: 2.5pt;
	margin-right: 10px;
	width:40px;
	height:40px;
	float:left;
	}

		button:hover{ 
		background-color: #F05500;
	 }

.about-class{
	background-color: #A0CBDE;
	border-width: 0pt;
	width:0px;
	height:0px;
		margin-left:-4vw;
}

.about-class:hover{
	background-color: #A0CBDE;
}



				/*ABOUT SECTION*/


.close-up{
	display: none;
}

.about-section{
	position: relative;
}

.close-up-show{
	display: block;
	width:400px;
	position: absolute;
	z-index:2;
	filter: drop-shadow(0 0 0.75rem black);

}

.close-up-no-show{
	display: none;
}

.exit-class{
	display:none;
}

.exit-show{
	display:block;
	position:absolute;
	left:425px;
	z-index: 2;
}

.test-section{
	display: none;
	position: absolute;
	width:350px;
	height:310px;
	left:30px;
	top:165px;
	z-index: 2;
	overflow-y: scroll;

}

.test{
	display: block;
}



img.receipt-image{
	display: none;
	margin-top: 10vh;
	margin-left: 35vw;
	position: absolute;
	z-index: 1;
}

img.

.receipt{
	opacity: 100%;
}


.invertmode {
	filter: invert(1);
}



/*TEXT*/

header {
	display: none;
}

h2{
	color:#F05500;
	font-family: 'right-sans-compact-regular';
	font-weight: 500;
	letter-spacing: .1vw;
	font-size:36px;
	text-decoration: underline;
	text-underline-offset: 10px;
	text-decoration-thickness: 1px;
}

h3{
	color:#F05500;
	font-family: 'right-sans-compact-regular';
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	font-size:24px;
text-align: center;
}

p{
	color:#F05500;
	font-family:'right-sans-compact-regular';
	font-weight:300;
	font-size:17px;
	letter-spacing: .5px;
	line-height: 28px;
  margin-top: 0 ;
  margin-bottom: 0 ;
}

a {
	text-decoration: none;
}

a:link, a:visited{
	color:#F05500;
}

a:hover {
	opacity:70%;
}

.white-text{
	color:white;
}

.description{
	font-family: helvetica;
	font-weight:100;
	font-size:11px;
	line-height: 8px;
  margin-top: 0 ;
  margin-bottom: 10px;
}

.description-white{
	font-family:helvetica;
		font-weight:100;
	font-size:11px;
	line-height: 13px;
  margin-top: -3px ;
  margin-bottom: 12px;
  color:white;
}

.white-text:hover{
	color:#BEC7EE;;
}


.description-title{
	text-align:center;
	font-weight:100;
	font-size:11px;
	line-height: 10px;
	margin-top:-20px;
	}


	.description-title-2{
		color:white;
		text-align:center;
		font-weight:100;
	font-size:11px;
	line-height: 10px;
	margin-top:-20px;
	}

.menu-title-2{
	color:white;
	text-align: center;
	margin-top:35px;
}

.price {
	margin-top: 0;
	margin-bottom:17px;
}

.price-white{
	color:white;
	margin-top: 0;
	margin-bottom:35.5px;
}

.personal-box{
	height:600px;
	width:180px;
	margin-left: 19px;
	margin-top:30px;
	float: left;
}

.personal-date-box{
	height:600px;
	width:70px;
	margin-top:30px;
	margin-left:15px;
	float:left;
}



img.check{
	margin-left: 8vw;
	margin-top: 8.2vh;
	width: 220px;
	position: absolute;
}


section.menu {
	background-color: #FCF4DD;
	height: 729px;
	width:526px;
	margin-top:8.2vh;
	margin-left:38.6vw;
	float: left;
	position: relative;

}


section.menu-personal {
	float: left;
	background-color:#F05500;
	height:729px;
	width:300px;
	margin-top:8.2vh;
	margin-left:2.4vw;
	position: relative;

}

figure.menu-border{
	border: 5px;
	border-color: #F05500;
	border-style: solid;
	height:700px;
	width:498px;
	margin-left:.6vw;
	margin-top:1.1vh;
	border-radius: 2.3vw;
}


.menu-title{
	text-align:center;
	line-height: 4.5vh;

}


hr.menu-underline{
	border-style: solid;
	color: #2646C6;
	border: 1px;
	margin-top:2vh;
}

.practice{
	height: 210px;
	width: 300px;
	margin-left: 70px;
	float:left;
	margin-top:-17px;
}
.date-practice{
	height:210px;
	width:100px;
	float:left;
	margin-top:-17px;

} 

.project-one{
	height:70px;
	width: 300px;
	margin-left: 70px;
	float: left;
	margin-top:-17px;

}

.date-project-one{
	height:70px;
	width:100px;
	float: left;
	margin-top:-17px;
}

.project-two{
	height:100px;
	width: 300px;
	margin-left: 70px;
	float: left;
	margin-top:-17px;
}

.date-project-two{
	height:100px;
	width:100px;
	float: left;
	margin-top:-17px;
}












/* HERE IS MY BREAKPOINT FOR TABLET*/

	@media screen and (max-width: 1200px) {


		body{

		}

		.menu{
					margin-left: 20px;
		}

		h2{
	color:#F05500;
	font-family: 'right-sans-compact-regular';
	font-weight: 500;
	letter-spacing: .1vw;
	font-size:36px;
	text-decoration: underline;
	text-underline-offset: 10px;
	text-decoration-thickness: 1px;
}

h3{
	font-size:24px;
text-align: center;
}

p{

	font-size:17px;

}

.white-text{
	color:white;
}

.description{
	font-family: helvetica;
	font-weight:100;
	font-size:11px;
	line-height: 8px;
  margin-top: 0 ;
  margin-bottom: 10px;
}

.description-white{
	font-family:helvetica;
		font-weight:100;
	font-size:11px;
	line-height: 13px;
  margin-top: -3px ;
  margin-bottom: 12px;
  color:white;
}



	}

	/* HERE IS MY BREAKPOINT FOR SMARTPHONES */

	@media screen and (max-width: 600px) {

			body{
			height:1180px;
			width:600px;
			overflow-x: hidden;
			overflow-y: scroll;
			position: relative;
		}

h2{
	font-size:36px;
}

h3{
	font-size:24px;
}

p{

	font-size:15px;
}

.menu-title{
	color: #F05500;
}


img.check{
	margin-left: -25vw;
	margin-top: -25vh;
	width: 220px;
	position: absolute;
	z-index:1;
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

section.menu {
	background-color: #FCF4DD;
	height: 730px;
	width:400px;
	margin-top:8vh;
	margin-left:8vw;
	float: left;
	position: relative;

}

figure.menu-border{
	border: 5px;
	border-color: #F05500;
	border-style: solid;
	height:698px;
	width:370px;
	margin-left:2.3vw;
	margin-top:1.4vh;
	border-radius: 2.3vw;
}

	section.menu-personal {
	float: left;
	background-color:#F05500;
	height:729px;
	width:400px;
	margin-top:2vh;
	margin-left:8vw;
	position: relative;

}


	/*THIS IS THE WHITE MENU CONTENT*/

.practice{
	height: 210px;
	width: 250px;
	margin-left: 12px;
	float:left;
	margin-top:-17px;
}

.date-practice{

	height:210px;
	width:100px;
	float:left;
	margin-top:-17px;

}

.project-one{
	height:70px;
	width: 250px;
	margin-left:12px;
	float: left;
	margin-top:-17px;

}

.date-project-one{
	height:70px;
	width:100px;
	float: left;
	margin-top:-17px;
}

.project-two{
	height:100px;
	width: 250px;
	margin-left:12px;
	float: left;
	margin-top:-17px;
}

.date-project-two{
	height:100px;
	width:100px;
	float: left;
	margin-top:-17px;
}

.personal-box{
	height:600px;
	width:230px;
	margin-left: 45px;
	margin-top:35px;
	float: left;
}

.personal-date-box{
	margin-top:35px;

}

section.button-switch-1{
	height:40px;
	width:150px;
	margin-left: 60vw;
	margin-top: 2vh;
	position: absolute;
	object-position: left bottom;
}



			/*BUTTON ADJUSTMENT*/


img.receipt-image{

	display: none;
	margin-top: 11vh;
	margin-left: 2.5vw;
	position: fixed;
	z-index: 1;
}