* {
	text-decoration: none;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}

a {
	color: rgba(35,152,104,1);
}

.menuHide {
	display: none;
}

.hide {
	display: none;
}

html {
	background: rgb(52,232,158);
background: linear-gradient(125deg, rgba(52,232,158,1) 0%, rgba(35,152,104,1) 50%, rgba(52,232,158,1) 100%);
	min-width: 100vw;
	min-height: 100vh;
}

nav {
	position: fixed;
	top: 0;
	width: 100%;
	background: #FFD200;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FFD200, #F7971E);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #FFD200, #F7971E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	box-shadow: 2px 2px 5px grey;
	padding: 20px 2% 2%;
	vertical-align: center;
	z-index: 10;
}

#socialLi {
	padding: 10px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

#socialLi a {
	width: 20%;
}
#socialLi {
	width: 20%;
}
.socialMenu img {
	width: 100%;
}

#hamburger {
	position: fixed;
	top: 0;
	right: 20px;
	width: 40px;
	text-align: right;
	font-size: 45px;
	padding: 10px;
	color: #fff;
	background: rgba(255, 210, 0, 0.8);
	box-shadow: 2px 2px 2px grey;
	z-index: 12;
}

#hamburger p {
	font-size: 11px;
	text-align: center;
}

#mainNav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#mainNav li {
	width: 100%;
	text-align: center;
}

#mainNav li a {
	padding: 5px;
	font-size: 30px;
	color: #fff;
}

#mainNav li a:hover {
	background: rgba(256, 256, 256, 0.2);
}

#welcome {
	margin: 75px 2% 2% 2%;
	text-align: center;
	font-size: 1.1em;
	color: rgb(255, 254, 214);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#welcome h1 {
	width: 100%;
	margin: 2%;
}

#welcome a {
	width: 50%;
	margin: 5%;
}
#welcome a button {
	padding: 2%;
	width: 100%;
	font-size: 1.15em;
	background: #FFD200;
	border-radius: 10px;
	color: #404040;
}

#welcome div {
	width: 50%;
	height: auto;
}

#welcome div img {
	width: 100%;
}

#recent h3 {
	width: 100%;
	color: #fff;
	text-align: center;
	margin: 1.5%;
}

#recentBadges, #recentVideos {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

#recentBadges a {
	width: 25%;
}

.recentBadge {
	width: 100%;
}

#recentBadges a figure img {
	width: 100%;
}

figcaption {
	text-align: center;
	color: #fff;
}

.youTube {
	width: 80%;
	margin: 2%;
	color: #fff;
	text-align: center;
}


#badgeContain {
	padding: 5%;
}

#badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

#badges div {
	width: 30%;
	margin: 1%;
}

.badgeImage {
	width: 100%;
}

#badgeInfo {
	background: #fff;
	margin: 5% 0 10% 0;
	color: #424242;
}

#badgeInfo > h3 {
	text-align: center;
	padding: 5%;
	font-size: 2em;
}

#badgeInfo img {
	width: 50%;
	height: auto;
	margin: 0 25%;
}

#badgeInfo p {
	width: 90%;
	margin: 5%;
}

.taskInfo {
	padding: 2%;
	background: rgba(252, 227, 106, 0.5);
	margin: 2%;
}

#des {
background-image: linear-gradient( 109.6deg,  rgba(255,24,134,1) 11.2%, rgba(252,232,68,1) 52%, rgba(53,178,239,1) 100.2% );
padding: 2.5%;
color: #fff;
}

#des p {
	background: #fff;
	color: #424242;
	padding: 1%;
}

.badgeTask {
	background: #FFD200;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FFD200, #F7971E);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #FFD200, #F7971E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	box-shadow: 2px 2px 5px grey;
	padding: 2%;
	margin: 1%	;
	text-align: center;
	font-weight: bold;
}

.ywn {
	text-align: center;
	padding: 2%;
}

.ywn h3 {
	font-size: 1.1em;
	margin: 0;
	padding: 0;
}

strong {
	font-size: 1.2em
}

.taskImage {
	max-width: 100%;
}

.credit {
	display: block;
	font-size: 0.75em;
	width: 100%;
	text-align: center;
}

#talavera {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

#talavera figure {
	width: 45%;
}

#talavera img {
	width: 100%;
	margin: 0;
}

#talavera figcaption {
	font-size: 0.7em;
	text-align: center;
}

#bookRecos {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
}

#bookRecos img {
	width: 75%;
}

#interview, #writingGames {
	padding: 2%;
	background: rgba(256,256,256,0.5);
	border: solid 5px rgba(35,152,104,1);
	margin: 2.5%;
}

#writingGames li {
	margin: 3%;
}

#structured {
	list-style-type: circle;
}


.beatv-task-buttons {
	width: 100%;
	font-size: 1.2em;
	font-weight: bold;
	background: #bea;
	padding: 2%;
}

.taskInfo img {
	width: 45%;
	margin: 2.5%;
}

input[type=checkbox]:checked + label.strikethrough{
  text-decoration: line-through;
}

#complete {
	border: 1px solid #424242;
	padding: 2%;
	width: 90%;
	margin: 3%;
	background: rgba(252, 227, 106, 0.5);
}

#complete h3 {
	background: #fff;
}

#complete p {
	font-size: 1.1em;
	background: #fff;
	padding: 2%;
}

#complete button {
	width: 100%;
	font-size: 1.1em;
	background: rgba(35,152,104,1);
	color: #fff;
}

#redeem {
background-image: linear-gradient( 109.6deg,  rgba(255,24,134,1) 11.2%, rgba(252,232,68,1) 52%, rgba(53,178,239,1) 100.2% );
padding: 5%;
margin: 0 0 5% 0;
}


/* Resize YouTube Videos*/
.youTube-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  z-index: 0;
}
.youTube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	#welcome img {
		width: 50%;
	}

	#mainNav li {
		width: 100%;
	}
	#mainNav li a {
		width: 30%;
	}
	#socialLi {
		width: 30%;
	}
	#socialLi img {
		width: 30%;
	}

	#badgeInfo {
		width: 85%;
		margin: 5% 7.5% 10% 7.5%;
	}

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

	#hamburger {
		display: none;
	}

	.menuHide {
		display: inline;
	}

	nav {
		padding: 0;
	}

	#badges div {
		width: 22%;
	}

	#mainNav {
	flex-wrap: nowrap;
	justify-content: space-around;
	}

	#mainNav li {
		width: 20%;
		text-align: center;
	}

	#mainNav li a {
		font-size: 1.2em;
	}

	#socialLi a div img {
		width: 80%;
		margin: 0;
	}

	#welcome {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	#welcome h1 {
		width: 100%;
		font-size: 1.5em;
		text-align: center;
	}

	#welcome h2 {
		width: 100%;
		font-size: 1em;
		text-align: center;
	}

	#welcome img {
		width: 25%;
	}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	main {
		width: 75%;
		margin: auto;
	}
	#welcome {
		margin: 90px 0 0;
	}
	#mainNav li a {
		font-size: 1.5em;
	}

	#badges div {
		width: 18%;
	}

	#badgeInfo > img {
		width: 25%;
		margin: 0 37.5%;
	}

	#des {
		width: 50%;
		margin: 1% 22.5%;
	}
	.youTube {
		width: 45%;
	}


}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}