/* CSS Document */
* {
	position: relative;
	box-sizing: border-box;
}
html, body {
	min-width: 320px;
	width: 100%;
	min-height: 100%;
	margin: 0px;
	padding: 0px;
	position: absolute;
	background-color: #d34522;
	font-family: "Lucida Grande", "Lucida Sans", Verdana, sans-serif;
}
body {
	background-image:  url(../images/pepper-bg.svg); /*, url(../images/bg.png);*/
    background-size: 96px 30px;
	background-attachment: fixed, fixed;
	background-position: top center, top center;
	background-repeat: repeat-x, repeat;
	box-shadow: rgba(0,0,0,0.75) 0px 0px 100px inset;
}
header {
	width: 100%;
	position: fixed;
	top: 0px;
	z-index: 1000;
}
#header {
    width: 100%;
	height: 90px;
    display: block;
    background-color: #d34522;
	background-image:  url(../images/pepper-bg.svg); /*, url(../images/bg.png);*/
    background-size: 96px 30px;
	background-attachment: local, local;
	background-position: top center, top center;
	background-repeat: repeat-x, repeat;
	box-shadow: rgba(0,0,0,0.75) 0px 50px 100px -50px inset;
}
nav {
	width: 100%;
	height: 60px;
	background-color: #ffdbb0;
	box-shadow: rgba(0,0,0,0.25) 0px 8px 8px;
}
nav a {
	margin: 16px 15px;
	color: #591a8b;
	text-decoration: none;
	font-size: 24px;
	font-weight: bold;
	display: inline-block;
	text-align: left;
}
nav a:hover {
	text-decoration: underline;
}
nav button {
	background: none;
	border: none;
	color: #591a8b;
	text-decoration: none;
	font-size: 24px;
	font-weight: bold;
}
#nav-option-dropdowns *:last-child {
	float: right;
}
#nav-dropdown {
    float: left;
	width: 48px;
	height: 48px;
	margin: 8px;
    padding: 0;
    border-width: 0;
    border-radius: 0;
	background-size: cover;
	background-image: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve" fill="rgb(88,26,138)"><rect x="3" y="3" width="10" height="2"/><rect x="3" y="11" width="10" height="2"/><rect x="3" y="7" width="10" height="2"/></svg>');
}



#logo {
	width: 0;
	height: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transition: all 0.25s 0s ease-in-out;
	transition: all 0.25s 0s ease-in-out;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    -webkit-transform-origin: center top;
    transform-origin: center top;
}
#logo a {
	width: 220px;
	height: 220px;
	margin: 0;
	display: inline-block;
	text-align: center;
	border-radius: 110px;
	box-shadow: rgba(0,0,0,0.5) 0px 8px 16px;
	-webkit-transition: top 0.25s 0s;
	transition: top 0.25s 0s;
	position: relative;
	top: 0px;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-transform-origin: center top;
    transform-origin: center top;
}

#logo a:hover {
	top: -10px;
}
#logo img {
	width: 100%;
	height: 100%;
}
#menus, #about {
	float: left;
}
#about  {
	float: right;
}
#nav-links {
	max-width: 1000px;
	width: 100%;
	min-height: 64px;
	display: block;
	margin: 0px auto;
	z-index: 0;
}

@media screen and (max-width:959px) {
	#nav-links a {
		border-bottom: solid 2px rgba(0,0,0,0.25);
		float: left;
		width: 100%;
		text-align: center;
		padding: 16px 0px;
		margin: 0px;
		color: #fff;
	}
	#menus, #about {
		width: 100%;
		float: left;
	}
	#nav-links {
		width: 100%;
		min-height: 100%;
        display: block;
        background-color: #d34522;
		/*background-image: url(../images/bg.png);*/
		background-position: top center;
		box-shadow: rgba(0,0,0,0.75) 0px 50px 100px -50px inset;
		position: absolute;
		top: 64px;
		left: -100%;
		-webkit-transition: left 0.25s 0s ease-in-out;
		transition: left 0.25s 0s ease-in-out;
		padding: 0px;
		margin: 0px;
		float: left;
		z-index: 0;
	}
}


@media screen {
	#nav-dropdown {
		display: block;
	}
}
@media screen and (min-width:960px) {
	#nav-dropdown {
		display: none;
	}
	#nav-links {
		display: block;
		float: none;
	}
}


.container {
	max-width: 1000px;
	width: 100%;
	min-width: 320px;
	margin: auto;
}
.page {
	width: 100%;	
	min-height: 100%;
	margin: auto;
	float: left;
	background-color: #ffdbb0;
	box-shadow: rgba(0,0,0,0.25) 0px 8px 16px;
}

.banner {
	top: 120px;
	max-width: 1000px;
	width: 100%;
	height: 550px;
	
	float: left;
	background-image: url(../images/oscarscafe.jpg);
	background-position: top center;
	background-size: cover;
}
article {
	max-width: 960px;
	width: 100%;
	min-width: 320px;
	min-height: 100%;
	margin: auto;
}
@media screen {
	.banner {
		height: 350px;
	}
	article {
		width: 100%;
	}
}
@media screen and (min-width:640px) {
	.banner {
		height: 450px;
	}
}
@media screen and (min-width:960px) {
	.banner {
		height: 550px;
	}
	article {
		width: 960px;
	}
}
.large-item {
	/*width: 280px;*/
	/*height: 480px;*/
	display: inline-block;
	margin: 0px 0px 20px;
	padding: 0px 20px;
	background: #fff;
	box-shadow: rgba(0,0,0,0.25) 0px 8px 16px;
}
.large-item h1 {
	width: 100%;
	height: 62px;
	margin: auto;
	border-bottom: solid 2px;
	line-height: 70px;
	text-align: center;
	font-size: 32px;
	font-weight: bold;
}
.large-item img {
	width: 240px;
	height: 175px;
	margin: 8px auto 0px;
	display: block;
	box-shadow: rgba(0,0,0,0.5) 0px 4px 8px;
}
.large-item h5 {
	margin: 20px auto 0px;
	width: 100%;
	height: 135px;
	text-align: justify;
	color: #666;
	font-size: 14px;
	font-weight: normal;
}

.large-item button {
	width: 100%;
	height: 40px;
	margin: 20px auto;
	border: none;
	display: block;
	font-size: 24px;
	font-weight: bold;
	box-shadow: rgba(0,0,0,0.25) 0px 0px 8px;
	cursor: pointer;
}
.large-item button:hover {
	text-decoration: underline;
}
.large-item button:active {
	box-shadow: rgba(0,0,0,0.25) 0px 0px 8px, rgba(0,0,0,0.25) 0px 0px 0px 20px inset;
}





.small-item {
	width: 100%;
	/*width: 300px;*/
	height: 230px;
	display: inline-block;
	padding: 0px 20px;
	margin: 0px 0px 20px;
	background-image: url(../images/pepper-bg.svg) , url(../images/pepper-bg.svg);
    background-size: 96px 30px;
	background-position: center 2px;
	background-repeat: repeat-x;
	box-shadow: rgba(0,0,0,0.25) 0px 8px 16px;
}


.small-item h1 {
	width: 100%;
	height: 80px;
	margin: auto;
	border-bottom: solid 2px;
	line-height: 100px;
	text-align: center;
	font-size: 36px;
	font-weight: bold;
}
.small-item h5 {
	max-width: 280px;
	width: 100%;
	height: 90px;
	margin: 10px auto;
	font-size: 16px;
	font-weight: normal;
	text-align: center;
}
.small-item a {
	max-width: 280px;
	width: 100%;
	height: 40px;
	margin: auto;
	display: block;
	line-height: 20px;
	text-align: center;
	text-decoration: underline;
	font-size: 20px;
	font-weight: bold;
}
.small-item a:hover {
	color: rgba(255,255,255,0.75);
}
.collection {
	width: 33.3333%;
	display: block;
	padding: 0px 10px;
	float: left;
}
.red-text {color: #d34522;}
.yellow-text {color: #ffb200;}
.green-text {color: #00a237;}
.purple-text {color: #591a8b;}
.black-text {color: #2b061c;}
.red-bg {background-color: #d34522; color: #fff;}
.yellow-bg {background-color: #ffb200; color: #fff;}
.green-bg {background-color: #00a237; color: #fff;}
.purple-bg {background-color: #591a8b; color: #fff;}
.black-bg {background-color: #2b061c; color: #fff;}
@media screen and (max-width:959px) {
	.collection {
		width: 50%;
	}
	.collection:nth-child(3) {
		clear: both;
	}
    .collection.fill-width {
		width: 100% !important;
	}
	nav {
		min-height: 64px;
	}
}
@media screen and (max-width:639px) {
	.collection {
		width: 100%;
		padding: 0px;
	}
	.large-item h5 {
		height: auto;
	}
}


article a {
	color: inherit;
	text-decoration: inherit;
}



@media screen {
	#logo a {
		width: 165px;
		height: 165px;
		display: block;
		border-radius: 110px;
		box-shadow: rgba(0,0,0,0.5) 0px 8px 16px;
		text-align: center;
	}
	#header {
		height: 70px;
	}
	.banner {
		top: 90px;
	}
}
@media screen and (min-width:960px) {
	/*#logo a {
		width: 220px;
		height: 220px;
		display: block;
		border-radius: 110px;
		box-shadow: rgba(0,0,0,0.5) 0px 8px 16px;
		text-align: center;
	}
	#header {
		height: 100px;
	}
	.banner {
		top: 120px;
	}*/
}




footer {
	width: 100%;
	height: 90px;
	float: left;
	text-align: center;
	font-size: 16px;
	font-weight: normal;
	padding: 35px 20px;
	background-image: url(../images/pepper-green.svg) ,-webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5));
	background-image: url(../images/pepper-green.svg) ,-moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5));
	background-image: url(../images/pepper-green.svg) ,-ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5));
	background-image: url(../images/pepper-green.svg) ,-o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5));
	background-image: url(../images/pepper-green.svg) ,-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.5));
    background-size: 96px 30px, auto auto;
	background-position: top center, top center;
	background-repeat: repeat-x, no-repeat;
}





/* framework */
@media screen {
.width-xs-12 {
	width: 100%;
	float: left;
	display: inline-block;
}
}
@media screen and (min-width:640px) {
.width-sm-6 {
	width: 50%;
	float: left;
	display: inline-block;
}
    .margins-sm-6 {
        margin-left:25%;
        margin-right:25%;
    }
}
@media screen and (min-width:960px) {
.width-md-4 {
	width: 33.3333%;
	float: left;
	display: inline-block;
}
}

[class^="icon"] {
	width: 48px;
	height: 48px;
	display: block;
	border-radius: 24px;
	background-color: rgba(0,0,0,0.5);
	background-size: cover;
	border: none;
	cursor: pointer;
    -webkit-transform-origin: center;
    -webkit-transform: translateY(-24px);
    transform-origin: center;
    transform: translateY(-24px);
}
.icon-previous {
	background-image: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve" fill="rgb(255,255,255)"><polygon points="12,4 10,2 4,8 10,14 12,12 8,8 "/></svg>');
}
.icon-next {
	background-image: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve" fill="rgb(255,255,255)"><polygon points="4,4 6,2 12,8 6,14 4,12 8,8 "/></svg>');
}

.menus {
	-webkit-transform-origin: center;
	transform-origin: center;
	-webkit-transition: all 0.25s 0s;
	transition: all 0.25s 0s;
}
.menus:active, .menus:hover {
	-webkit-transform: scale(1.05,1.05);
	transform:scale(1.05,1.05);
	z-index: 1;
	box-shadow: rgba(0,0,0,0.5) 0px 0px 32px;
}