/* CSS Document */
body {
  	background-image: url("../images/backgrounds/background.png");
	background-color: black;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 50px;
}

.all-panels {
	min-height: 300px;
	margin-top: 50px;
	width: 100%;
	border-radius: 30px;
	background-color: white;
}

.side-label {
	display:flex;
	align-items: center;
    justify-content: center;
    width: 60px;
  	background-color: #3D7A79;
	background: linear-gradient(to bottom right, #3d7a79 39%, #009999 76%);
  	border-top-left-radius: 30px;	
  	border-bottom-left-radius: 30px;
}

/* Used in all panels for panel label */
.side-label h1 { 
  	letter-spacing: 10px;
 	transform: rotate(-90deg);
  	color:white;
	font-family:"Neuvetica-Bold", Helvetica, Arial, "sans-serif";
	font-size:24px;
}

.contactinfo {
	margin-top: 20px;
	font-family:"Neuvetica-Thin", Helvetica, Arial, "sans-serif";
	color: white;
	text-align: center;
}


/* adjust for smaller screen size */
@media only screen and (max-width: 800px), only screen and (orientation:portrait){
	body {
		background-image: none;
		background-color: black;
		background-repeat: no-repeat;
		background-size: cover;
		margin: 10px;
	}

	.all-panels {
		min-height: 200px;
		margin-top: 10px;
		width: 100%;
		border-radius: 15px;
		background-color: white;
	}

	.side-label {
		display:flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		background-color: #3D7A79;
		background: linear-gradient(to bottom right, #3d7a79 39%, #009999 76%);
		border-top-left-radius: 15px;	
		border-bottom-left-radius: 15px;
	}

	/* Used in all panels for panel label */
	.side-label h1 { 
		letter-spacing: 10px;
		transform: rotate(-90deg);
		color:white;
		font-family:"Neuvetica-Bold", Helvetica, Arial, "sans-serif";
		font-size:20px;
	}

	.contactinfo {
		margin-top: 20px;
		font-family:"Neuvetica-Thin", Helvetica, Arial, "sans-serif";
		color: white;
		text-align: center;
	}
}


.div-fade {
  transition: opacity 0.5s ease-in;
}

.fadeOut { opacity: 0; }
.fadeIn { opacity: 1; }

@font-face {
  font-family: Neuvetica-Thin; 
  font-weight: normal;	 
  src: url('../fonts/Neuvetica-Thin.woff'),
       url('../fonts/Neuvetica-Thin.woff2');
}

@font-face {
  font-family: Neuvetica-Medium; 
  font-weight: normal;	 
  src: url('../fonts/Neuvetica-Medium.woff'),
       url('../fonts/Neuvetica-Medium.woff2');
}

@font-face {
  font-family: Neuvetica-Bold; 
  font-weight: normal;	 
  src: url('../fonts/Neuvetica-Bold.woff'),
       url('../fonts/Neuvetica-Bold.woff2');
}

@font-face {
  font-family: Better-Pallet; 
  font-weight: normal;	 
  src: url('../fonts/Better-Pallet.woff'),
       url('../fonts/Better-Pallet.woff2');
}