body{
    margin:0;
    z-index:1;
}

@import url('https://fonts.googleapis.com/css2?family=Asap:wght@100;300;600&display=swap');

html {
	margin: 0;
	cursor: url('http://claydd.org/imgs/mouse.png'), auto;
}


a:hover{
	cursor: url('http://claydd.org/imgs/mouse.png'), auto;
}

#loading-animation{
	background-image:url('http://claydd.org/imgs/loading.gif');
	background-size:contain;
	background-repeat:no-repeat;
	position:fixed;
	top:8vh;
	left:25vw;
	height:600px;
	width:100%;
}

#progress-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 5rem;
	width: 0%;
	background: linear-gradient(to bottom, #d68d6f 1%, #cd734f, #934528);
	transition: width 0.5s ease-out;
	border-top:1px solid #d68d6f;
	border-bottom:2px solid #462213;
  }
  

.logo img{
	max-width:330px;
}

.site-branding{
	position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
	z-index: 9;
}

.site-branding button{
	background-color:transparent !important;
	border:0 !important;
}

.toggle-menu h1{
	position: fixed;
    right: 1.5rem !important;
    z-index: 9;
    top: 0.1rem;
    text-align: right;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.logo img{
	width: 75%;
    margin: 0 auto;
}

img{
	width:100%;
}

.show-mobile{
	display:none;
}

.show-desktop{
	display: block;
}

@media only screen and (max-width: 700px) {
	.toggle-menu h1 {
		font-size:2rem !important;
	}
	.show-mobile{
		display:block;
	}

	.show-desktop{
		display: none;
	}

  .logo img{
	width: 100%;
}
.toggle-menu {
	right:35vw;
	top:2rem;
	font-size:4rem;
	text-align:center;
}
.donation-button {
    left: 0.5rem !important;
    width: 50vw !important;
	}

#loading-animation{
	left:0;
	top:15vh;
}


}




a:hover{
	cursor: url('http://claydd.org/imgs/mouse.png'), auto;
}

button:hover{
	cursor: url('http://claydd.org/imgs/mouse.png'), auto;
}

a:visited{
	color:#000 !important;
}

h1{
	position:fixed;
	bottom:3rem;
	width:100%;
	text-align:center;
	font-family: 'Comic Neue', cursive;
	font-weight:700;
	text-transform:uppercase;
}

.red { color: red; }
  .orange { color: orange; }
  .yellow { color: yellow; }
  .green { color: green; }
  .blue { color: blue; }
  .indigo { color: indigo; }
  .violet { color: violet; }


h2 a{
	color:#000;
}

h2 a:hover{
	font-style:italic;
}

 a:visited{
	color:#000;
}



.social-menu{
	text-align: center;
	padding-top:1rem;
}

.social-menu a {
    text-decoration: none;
    font-size: 3rem;
    font-family: 'Comic Neue', cursive;
    color: black;
	font-weight:600;
}


.logo {
  position: fixed;
  top:0.5rem;
	width:100vw;
}

.menu-container {
  position: absolute;
  left: 0;
	top:0;
  z-index: 1;
  background-color:#fff;
  width:100vw;
  height: 100vh;
}


.menu-columns{
max-width: 60vw;
    margin: 0 auto;
    top: 2rem;
    padding-top: 6rem;
}

.menu-item{
	padding-bottom:2rem;
}


.site-branding{
	position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
	z-index: 9;
}

.logo{
	position:fixed;
	top:0.5rem;
	left:0.5rem;
	display:block;
}

.logo svg{
	width:100%;
}

.donation-button{
	position:fixed;
	bottom:1rem;
}

.donation-button img{
	max-width:40vw;
}