@font-face {
    font-family: 'UPB';
    src: url('fonts/UPB-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'UPB';
    src: url('fonts/UPB-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'UPB';
    src: url('fonts/UPB-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Work';
    src: url('fonts/WorkSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Work';
    src: url('fonts/WorkSans-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

html, body {
	background: #ffffff;
	min-width: 900px;
	font-family: UPB, Work, Canva, sans-serif;
	font-size: 30px;
}
#paRappa {
	max-width: 1056px;
	padding: 32px 72px;
	padding: 3% 6%;
	margin: 0px auto;
}
.section {
	width: 100%;
	margin: 0px auto;
	text-align: center;
}

#menuHolder {
	position: fixed;
	z-index: 100;
	top: 0px;
	width: 100%;
	min-width: 900px;
	height: 50px; 
	
	background-color: #ffffff; 
	background-color: rgba(255, 255, 255, 0.9); 
	
	-webkit-box-shadow: 0 8px 6px -6px #878787;
     -moz-box-shadow: 0 8px 6px -6px #878787;
     box-shadow: 0 8px 6px -6px #878787;
}
#menu {
	font-size: 50%;
	line-height: 50px; 
	text-align: center;
	
	width: 100%;
	max-width: 1056px;
	min-width: 900px;
	margin: 0px auto;
	text-align: center;
	
	font-size: 60%;
}
#menu a {
	display: inline-block;
	margin: 0px 20px;
	
	text-decoration: none;
	color: #444444;
}
#menu a:hover {
	color: #ff0000;
}
#menu a.menuSpacer {
	margin-left: 70px;
}


#ssHolder {
	width: 100%; 
	overflow: hidden; 
	border: solid #cccccc 1px;
	position: relative; 
	top: 30px; 
	left: 0px; 
	margin-bottom: 70px; 
}
#ssScroller {
	height: 100%;
	position: absolute;
	white-space: nowrap;
}
.ssImg {
	height: 100%;
	transition: opacity;
	-webkit-transition: opacity;
	transition: all 0.2s ease-out;
}
.inactive {
	opacity: 0.5;
	cursor: pointer;
}
.active {
	opacity: 1;
}


/* MOBILE CSS */
@media screen and (max-width: 1100px) {
	html, body {
		font-size: 27px;
	}
	#menu {
		font-size: 60%;
	}
	#menu a.menuSpacer {
		margin-left: 65px;
	}
}
@media screen and (max-width: 1000px) {
	html, body {
		font-size: 25px;
	}
	#menu {
		font-size: 65%;
	}
	#menu a.menuSpacer {
		margin-left: 30px;
	}
}
@media screen and (max-width: 900px) {
	html, body {
		font-size: 22px;
	}
	#menu {
		font-size: 65%;
	}
	#menu a.menuSpacer {
		margin-left: 20px;
	}
}