/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
GENERAL
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
* {
	outline: none;
}
.wrap {
	width: 90%;
	max-width: 1100px;
	margin: 0px auto;
}
.off-canvas-wrapper {
	background-color: #222;
}
.center {
    margin: auto;
    text-align: center;
}
#strikeout {
    color: white;
    display: inline-block;
    text-decoration: none;
    position: relative;
  }
#strikeout:after {
    content: '';
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 2px solid;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
FONTS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@font-face {
	font-family: Vincentia;
	src: url(Vincentia.otf);
}
@font-face {
	font-family: Javacom;
	src: url(Javacom.otf);
}
@font-face {
	font-family: HaloHandletter;
	src: url(HaloHandletter.otf);
}
@font-face {
	font-family: BordeauxMedium;
	src: url('BordeauxMedium.ttf');
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HEADER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
NAV-MOBILE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.title-bar {
	background-color: #111;
	height: 60px;
}
.mobile-logo {
	line-height: 60px;
	height: 60px;
	margin-top: -8px;
}
.title-bar-left {
	margin-top: -8px:
}
#mobile-menu {
	background-color: #222;
	padding: 10px;
}
#mobile-menu li {
	list-style: none;
}
#mobile-menu a {
	color: rgba(255,255,255,0.6);
	font-weight: bold;
	line-height: 2;
}
#mobile-menu a:hover {
	color: rgba(255,255,255,0.8);
}
.js-off-canvas-exit {
	background: rgba(0,0,0,0.5)
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
NAV-DESKTOP
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.nav-desktop {
	background-color: #222;
	height: 80px;
	padding: 0px;
}
.site-logo {
	color: white; /* #fff */
	line-height: 80px;
	height: 80px;
}
.nav-desktop .menu-desktop {
	line-height: 80px;
	background-color: transparent;
}
.nav-desktop .menu-desktop a {
	display: inline-block;
	color: white;
	line-height: 80px;
	padding-top: 0px;
	padding-bottom: 0px;
	font-family: 'BordeauxMedium';
}
.nav-desktop .menu-desktop a:hover {
	background-color: rgba(255,255,255,0.1);
}
#donate a{
display: block;
background: #ffed71;
color: black;
letter-spacing: 0.1em;
font-family: 'BordeauxMedium';
font-size: 16px;
}
#donate a:hover {
	background: #b7ac5c;
	color: white;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HERO
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.hero {
	background-color: #999;
	padding: 80px 0px;
	height: auto;
	/*background-image: url("../img/deep-crimson-red-seamless-grunge-textures-10.jpg"); */
}
.hero h1, .hero p {
	color: rgba(255,255,255,0.8);
	max-width: 100%;
}
.surprise {
	background-color: yellow;
	color: black;
}
.button.surprise:hover, .button.surprise:focus {
	background-color: orange; 
	color: #fff;
}
.imgwrap {
	width: 90%;
	max-width: 1100px;
	height: auto;
	margin: 0px auto;
	margin-top: -80px;
	padding-bottom: 60px;
	background-color: #999;
	/*background: url("../img/IMG_1038.jpg") no-repeat center; */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
MAIN SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.main {
	padding: 80px 0px;
	background-image: url("../img/sandpaper.png");
	min-height:70vh;
}
.blackbackground {
	background-image: none;
	background-color: black;
	color: #929292;
}
.blackbackground a {
	color: white;
}
.blackbackground a:hover {
	color: #e0e0e0;
}
.blackbackground h1,h2,h3,h4,h5 {
	font-family: 'BordeauxMedium';
	color: white;
}
.blackbackground h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover {
	color: #e0e0e0;
}
.blackbackground label {
	color: #929292;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
FOOTER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
footer {
	background-color: #222;
	padding: 40px 0px;
}
footer h4 {
	color: rgba(255,255,255,0.8);
	font-size: 1.3em;
	text-align: center;
}
footer hr {
	border-color: rgba(255,255,255,0.1);
	margin: 10px 0;
	}
footer a {
	display: block;
	color: rgba(255,255,255,0.6);
	font-size: 0.8em;
	text-align: center;
}
footer a span {
	font-weight: bold;
	color: rgba(255,255,255,0.3);
}
footer a:hover {
	color: rgba(255,255,255,0.8);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
MEDIA QUERY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (max-width: 639px) {
	.nav-desktop {
		display: none;
	}
}
@media (max-width: 875px) {
	.hero h1,
	.hero p {
		max-width: 100%;
	}
}