.challengeButtons .draw:nth-of-type(1){color: #6AA6CD; box-shadow: inset 0 0 0 2px #6AA6CD;}
.challengeButtons .draw:nth-of-type(2){color: #6CA0C7; box-shadow: inset 0 0 0 2px #6CA0C7;}
.challengeButtons .draw:nth-of-type(3){color: #6F9AC1; box-shadow: inset 0 0 0 2px #6F9AC1;}
.challengeButtons .draw:nth-of-type(4){color: #7294BB; box-shadow: inset 0 0 0 2px #7294BB;}
.challengeButtons .draw:nth-of-type(5){color: #758FB5; box-shadow: inset 0 0 0 2px #758FB5;}
.challengeButtons .draw:nth-of-type(6){color: #7889AF; box-shadow: inset 0 0 0 2px #7889AF;}
.challengeButtons .draw:nth-of-type(7){color: #7889AF; box-shadow: inset 0 0 0 2px #7889AF;}
.challengeButtons .draw:nth-of-type(8){color: #7B83AA; box-shadow: inset 0 0 0 2px #7B83AA;}
.challengeButtons .draw:nth-of-type(9){color: #7E7DA4; box-shadow: inset 0 0 0 2px #7E7DA4;}
.challengeButtons .draw:nth-of-type(10){color: #81789E; box-shadow: inset 0 0 0 2px #81789E;}
.challengeButtons .draw:nth-of-type(11){color: #847298; box-shadow: inset 0 0 0 2px #847298;}
.challengeButtons .draw:nth-of-type(12){color: #876C92; box-shadow: inset 0 0 0 2px #876C92;}
.challengeButtons .draw:nth-of-type(13){color: #8A678C; box-shadow: inset 0 0 0 2px #8A678C;}
.challengeButtons .draw:nth-of-type(14){color: #8D6187; box-shadow: inset 0 0 0 2px #8D6187;}
.challengeButtons .draw:nth-of-type(15){color: #905B81; box-shadow: inset 0 0 0 2px #905B81;}
.challengeButtons .draw:nth-of-type(16){color: #93557B; box-shadow: inset 0 0 0 2px #93557B;}
.challengeButtons .draw:nth-of-type(17){color: #955075; box-shadow: inset 0 0 0 2px #955075;}
.challengeButtons .draw:nth-of-type(18){color: #984A6F; box-shadow: inset 0 0 0 2px #984A6F;}
.challengeButtons .draw:nth-of-type(19){color: #9B4469; box-shadow: inset 0 0 0 2px #9B4469;}
.challengeButtons .draw:nth-of-type(20){color: #9E3E64; box-shadow: inset 0 0 0 2px #9E3E64;}
.challengeButtons .draw:nth-of-type(21){color: #A1395E; box-shadow: inset 0 0 0 2px #A1395E;}
.challengeButtons .draw:nth-of-type(22){color: #A43358; box-shadow: inset 0 0 0 2px #A43358;}
.challengeButtons .draw:nth-of-type(23){color: #A72D52; box-shadow: inset 0 0 0 2px #A72D52;}
.challengeButtons .draw:nth-of-type(24){color: #AA284C; box-shadow: inset 0 0 0 2px #AA284C;}
.challengeButtons .draw:nth-of-type(25){color: #AD2246; box-shadow: inset 0 0 0 2px #AD2246;}
.challengeButtons .draw:nth-of-type(26){color: #B3163B; box-shadow: inset 0 0 0 2px #B3163B;}
.challengeButtons .draw:nth-of-type(27){color: #B61135; box-shadow: inset 0 0 0 2px #B61135;}
.challengeButtons .draw:nth-of-type(28){color: #B61135; box-shadow: inset 0 0 0 2px #B61135;}
.challengeButtons .draw:nth-of-type(29){color: #BC0529; box-shadow: inset 0 0 0 2px #BC0529;}
.challengeButtons .draw:nth-of-type(30){color: #BF0024; box-shadow: inset 0 0 0 2px #BF0024;}

.challengeButtons {
	border: solid 1px #FFFFFF;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
	background-image: url(../_img/challenges-container-bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-color: rgb(95,95,95);

	background-opacity: .3;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.draw {
  background: none;
  border: 0;
  display: inline-block;
  box-sizing: border-box;
  margin-bottom: 10px;
  margin-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-top: 15px;
  box-shadow: inset 0 0 0 2px #FFFFFF;
  color: #FFFFFF;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
  background-color: rgba(0, 0, 0, .6);
}
.draw::before, .draw::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

.draw {
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
}
.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover {
  color: #ffd700 !important;
  background-color: rgba(0, 0, 0, .75);
}

.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: #ffd700;
  border-right-color: #ffd700;
  -webkit-transition: width 0.1s ease-out, height 0.1s ease-out 0.1s;
  transition: width 0.1s ease-out, height 0.1s ease-out 0.1s;
}
.draw:hover::after {
  border-bottom-color: #ffd700;
  border-left-color: #ffd700;
  -webkit-transition: border-color 0s ease-out 0.25s, width 0.1s ease-out 0.25s, height 0.1s ease-out 0.5s;
  transition: border-color 0s ease-out 0.25s, width 0.1s ease-out 0.25s, height 0.1s ease-out 0.5s;
}

.technicalChallengesList {
  isolation: isolate;
}

body {
	padding-top: 25px;
	background-image: url("../_img/bg-galaxy.jpg");
	background-size: cover;
	background-repeat: no-repeat;
 }
 

#marthDairSVG {
	float: left;
}

#marthDairPathSvg  {
  stroke-width: 20;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  fill-opacity:0;
  animation: dash 1.5s linear forwards;
}

#marthDairFoxPathSvg {
  stroke-width: 20;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  fill-opacity:0;
  animation: dash 1.5s linear forwards;
}

@keyframes dash {
	0%   {stroke-dashoffset: 1000; fill-opacity: 0;}
	50%  {stroke-dashoffset: 0; fill-opacity: 0;}
	100% {stroke-dashoffset: 0; fill-opacity: 1;  stroke-width: 0;}
}

.webmVideo {
	margin: 15px;
	display: block;
	border: 2px solid #FFFFFF;
	max-width: 400px;
}

.pageHeader {
	font-size: 32pt;
	line-height: auto;
	font-weight: bold;
	margin-bottom: 10px;
	color: #FFFFFF;
	line-height: initial;
	text-align: center;
	display: block;
 	text-shadow:
    -2px -2px 0 #000000,
    2px -2px 0 #000000,
    -2px 2px 0 #000000,
    2px 2px 0 #000000;  
}

.challengeDescription {
	font-size: 16pt;
	padding-left: 10px;
	padding-right: 10px;
}

.prevButton, .nextButton {
	font-size: 12pt;
	display: inline-block;
	font-weight: bold;
	text-align: center;
	color: #FFFFFF;
}

.prevButton:hover, .nextButton:hover {
	color: #6aa6cd;
}

.challengeInfoWrap {
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 50px;
	margin-top: 25px;
	background-color: rgba(0, 0, 0, .6);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.challengeVectorWrap {
	padding-left: 20px;
}

.challengeDescriptionUL {
	color: #FFFFFF;
	font-size: 14pt;
	list-style: none;
	font-weight: bold;
}

.tech {
	color: #F8DF7A;
	display: inline-block;
}

.tech img{
	height: 26px;
	width: 26px;
	padding-bottom: 4px;
	padding-top: 4px;
	padding-left: 4px;
	padding-right: 4px;
	margin-bottom: 4px;
	margin-right: 2px;
}



@media only screen and (max-width: 40em) {
	body {
		padding-top: 5px !important;
		background-image: none !important;
	}
	
	.challengeVectorWrap {
		display: none;
	}
	
	.challengeInfoWrap {
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		margin-top: 15px;
	}
	
	.webmVideo {
		display: block;
		margin: auto;
		border: 2px solid #FFFFFF;
		max-width: 90%;
	}
	
	li a.prevButton, li a.nextButton {
		padding: 0px !important;
		display: inline-block;
		max-width: 48px !important;
			margin: 0px !important;
	}
	
	.prevButton img, .nextButton img {
		margin: 0px !important;
	}
	
	.menu.expanded {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.menu.expanded li{
		width: auto !important;
	}
	
	.backWrap {
		margin-right: 10px;
	}
	
	.not-impressed-text {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.moderatelyImpressed {
		height: auto !important;
		max-width: 130px !important;
	}
	
	.moderatelyImpressedText {
		margin-top: 0px !important;
		padding-left: 3px;
		font-size: 12pt !important;
	}
	
	.amazed {
		display: block !important;
		margin: auto !important;
		float: none !important;
		width: 125px !important;
	}
	
	.goldText {
		font-size: 14pt !important;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.draw {
		padding-left: 15px;
		padding-right: 15px;
	}
	
}
	
	

@media only screen and (min-width: 40em) and (max-width: 60em) {
	body {
		padding-top: 5px !important;
		background-image: none !important;
	}
	
	.challengeVectorWrap {
		display: none;
	}
	
	.challengeInfoWrap {
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		margin-top: 15px;
		width: 100%;
	}
	
}