@font-face {
    font-family: 'Montserrat';
    src: url(../fonts/Montserrat-Regular.ttf);
}
body{
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	color:#51606A;
	padding:0px;
	margin:0px;
}
p{
	line-height:25px;
}
a,
a:link,
a:visited,
a:active{
	text-decoration:none;
	color:#51606A;
	outline:0;
}
.blue{
	color:#216AC6;
}
.wrapper{
	display:inline-block;
	width:100%;
	text-align:center;
	padding:75px 0px 75px 0px;
}
.container{
	display:inline-block;
	position:relative;
	width:980px;
}
.title {
	font-size:46px;
	font-weight:bold;
	margin-bottom:30px;
}
.number {
	font-size:32px;
	padding-right:15px;
}
#header.wrapper{
	padding:0px;
	position:fixed;
	z-index:1000;
	background-color:rgba(255, 255, 255, 1);
	height:75px;
}
#header.wrapper.fill{
	-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.25);
	box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.25);
	background-color:rgba(255, 255, 255, 0.90);
}
#header .container{
	text-align:left;
}
#header #logo-wrap{
	display:inline-block;	
}
#header .logo{
	margin-left:10px;
	line-height:75px;
	height:75px;
	display:table-cell;
	vertical-align:middle;
	-webkit-transform: translateZ(0);
	cursor:pointer;
}
#header .hamburger{
	display:none;
	outline:0;
	vertical-align:middle;
}
#header svg{
    height:45px;
	width:auto;
	display:inline-block;
	vertical-align:middle;
}
#links{
	display:inline-block;
	float:right;
	margin-right:10px;
	line-height:75px;
}
#links ul{
	list-style:none;
	margin:0px;
	padding:0px;
}
#links ul > li{
	list-style:none;
	display:inline-block;
	margin-left:7px;
}
#links ul > li a{
	transition: all 0.5s ease 0s;
	padding:5px 15px 5px 15px;
	border-radius: 5px;
	background-color:transparent;
	cursor:pointer;
}
#links ul > li a:hover{
	background: #efefef;
}
#banner {
	position:relative;
	display:inline-block;
	height:500px;
	width:100%;
	padding:0px;
	padding-top:75px;
	border:1px soild red;
	overflow:hidden;
}
#banner .wrapper{
	height:500px;
	display:none;
	padding:0px;
	margin-top:75px;
}

#banner .banner{
	position: absolute;
	top:0px;
	left:0px;
}
#banner .wrapper.banner-02{
	background-image: url(../images/80DayMayday2.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat:no-repeat;
}
#banner .wrapper.banner-01{
	background-image: url(../images/banner_01.png);
    background-size:contain;
	background-position:center center;
}
#banner .wrapper.banner-deckofcards{
	background-color:#274456;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='674' height='561.7' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.04'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");

}
#banner .container,
#banner .container{
	top:0px;
	left:0px;
	width:100%;
	height:500px;
	display:flex;
	align-items: center;
    justify-content: center;
}
#banner .banner-deckofcards .ban-02 img{
	width:450px;
	height:auto;
}
#banner .banner-deckofcards .ban-01 h1{
	color:#fff;
}
#banner .banner-deckofcards .ban-01 p{
	color:#A9C7D6;
}
#banner .banner-deckofcards .ban-01 p a{
	color:#A9C7D6;
}
#banner .ban-01{
	display:inline-block; 
	vertical-align:middle; 
	margin-right:75px;
	width:375px;
}
#banner .ban-02{
	display:inline-block; 
	vertical-align:middle;
}
#banner .banner-01 .ban-02 img{
	width:300px;
}
#banner h1{
	font-size: 36px;
	font-weight:bold;
	color:#333;
}
#banner .app_store
{
    display:inline-block;
    background-image:url(../images/app_store.png);
    background-size:contain;
    width:150px;
    height:50px;
    background-repeat:no-repeat;
    margin-top:25px;
	position:relative;
}
#banner .app_store:link, 
#banner .app_store:visited,
#banner .app_store:focus,
#banner .app_store:active
{
    color:#333;	
}
#banner .play_store
{
    display:inline-block;
    background-image:url(../images/play_store.png);
    background-size:contain;
    width:150px;
    height:50px;
    background-repeat:no-repeat;
    margin-top:25px;
	margin-right:15px;
}
#banner .button a{
	transition: all 0.5s ease 0s;
	display:none;
	margin-top:10px;
	padding:8px 12px 8px 12px;
	color:#fff;
	background-color:#956FB0;
	border:2px solid #fff;
	border-radius:10px;
	cursor:pointer;
	-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.5);
	box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.5);
}
#banner .button a:hover{
	background-color:#222;
}
#banner .card-button a{
	transition: all 0.5s ease 0s;
	display:inline-block;
	margin-top:10px;
	cursor: pointer;
	height:45px;
	line-height:45px;
	color: #fff;
	border-radius: 10px;
	text-align: center;
	font-weight:bold;
	padding:0px 45px;
	-webkit-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	background-color: #32AA8E;
}
#who.wrapper{
	background-color:#222;
	color:#FFF;
	border-top:1px solid #fff;
}
#who .button a{
	transition: all 0.5s ease 0s;
	display:inline-block;
	margin-top:20px;
	padding:7px 12px 7px 12px;
	border:1px solid #666;
	color:#fff;
	border-radius:50px;
	cursor:pointer;
}
#who .button a:hover{
	background-color:#ff0033;
	border:1px solid #ff0033;
	color:#fff;
}
#what.wrapper{
	background-color:#efefef;
}
#what .app{
	display:inline-block;
	vertical-align:top;
	text-align:left;
	width:100%;
	margin:0px 0px 50px 0px;
}
#what .icon
{
    display:inline-block;
    float:left;
    margin-right:50px;
    width:272px;
    height:272px;
}
#what #smashmath .icon{
	background-image: url(../images/smashmath.png);
    background-repeat:no-repeat;
    background-size:contain;
	background-position:center center;
}
#what #mayday80 .icon {
    background-image: url(../images/mayday80.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#what #transformtracker .icon {
    background-image: url(../images/transform_tracker.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#what #lift4u .icon {
    background-image: url(../images/lift4u.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#what #brickwork .icon {
    background-image: url(../images/brickwork.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#what #deckofcards .icon {
    background-image: url(../images/deckofcards.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#what #marslander .icon{
	background-image: url(../images/marslander.png);
    background-repeat:no-repeat;
    background-size:contain;
	background-position:center center;
}
#what #granfundo .icon{
	background-image: url(../images/granfundo.png);
    background-repeat:no-repeat;
    background-size:contain;
	background-position:center center;
}
#what #wheelwords .icon{
	background-image: url(../images/wheelwords.png);
    background-repeat:no-repeat;
    background-size:contain;
	background-position:center center;
}
#what .apptitle
{
    font-size:24px;
    margin:5px 0px 15px 0px;
}
#what .description
{
    display:inline;
    line-height:20px;
}
#what .app_store
{
    display:inline-block;
    background-image:url(../images/app_store.png);
    background-size:contain;
    width:175px;
    height:50px;
    background-repeat:no-repeat;
    margin-top:25px;
	position:relative;
}
#what .app_store:link, 
#what .app_store:visited,
#what .app_store:focus,
#what .app_store:active
{
    color:#333;	
}
#what .play_store
{
    display:inline-block;
    background-image:url(../images/play_store.png);
    background-size:contain;
    width:175px;
    height:50px;
    background-repeat:no-repeat;
    margin-top:25px;
}
#what .web img{
	display:inline-block;
	vertical-align:middle;
	width:20px;
	height:20px;
	margin-left:10px;
}
#what .web label{
	display:inline-block;
	vertical-align:middle;
}
#where .contact input,
#where .contact textarea{
	display:inline-block;
	padding:7px 12px;
	margin:10px 0px;
	width:400px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	color:#51606A;
	outline:0;
	border:1px solid #ccc;
	border-radius:0px;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
}
#where .contact textarea{
	height:127px;
}
#where .contact{
	display:inline-block;
	vertical-align:top;
	width:420px;
	padding:10px 10px;
}
#where .button input{
	transition: all 0.5s ease 0s;
	display:inline-block;
	margin-top:20px;
	padding:7px 12px 7px 12px;
	background-color:#ff0033;
	border:1px solid #ff0033;
	color:#fff;
	border-radius:50px;
	cursor:pointer;
}
#where .button input:hover{
	background-color:#fff;
	border:1px solid #999;
	color:#51606A;
}
#footer.wrapper{
	background-color:#222;
	color:#fff;
	font-size:12px;
}
#menu
{
	border-radius:8px;
	background-color:#ff0033;
	position:fixed;
	z-index:1000;
	bottom: 20px;
	right: 25px;
	text-align:center;
	cursor:pointer;
	transition: all 0.5s ease 0s;
	display:none;
}	
#menu:hover{
	background-color:#ff0033;
}
.hamburger {
	padding: 10px 10px;
	display: inline-block;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	overflow: visible; 
	border:0;
	margin:0;
	outline:0;
}
.hamburger:hover {
    opacity: 0.7; 
}
.hamburger-box {
	width: 40px;
	height: 24px;
	display: inline-block;
	position: relative; 
}
.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px; 
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: 40px;
	height: 4px;
	background-color: #fff;
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease; 
}
.hamburger-inner::before, .hamburger-inner::after {
	content: "";
	display: block; 
}
.hamburger-inner::before {
	top: -10px; 
}
.hamburger-inner::after {
	bottom: -10px; 
}
.hamburger-elastic .hamburger-inner {
	top: 2px;
	transition-duration: 0.275s;
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}
.hamburger-elastic .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease; 
}
.hamburger-elastic .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}
.hamburger-elastic.is-active .hamburger-inner {
	transform: translate3d(0, 10px, 0) rotate(135deg);
	transition-delay: 0.075s; 
 }
.hamburger-elastic.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0; 
}
.hamburger-elastic.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-270deg);
    transition-delay: 0.075s; 
}
@media (max-width: 700px) 
{
	.container{
		display:inline-block;
		width:100%;
		position:relative;
		padding-left:20px;
		padding-right:20px;
		box-sizing: border-box;
	}
	.number {
		display:block;
		padding-right:0px;
	}
	#header .container{
		text-align:center;
		padding:0px;
	}
	#header .logo{		
		margin-left:0px;
	}
	#header .logo svg{
		width:90%;
	}
	#header .hamburger{
		display:inline-block;
	}
	#where .contact input,
	#where .contact textarea{
		display:block;
		width:100%;
		box-sizing: border-box;
	}
	#where p {
		margin-bottom:50px;
	}
	#where .contact{
		display:block;
		vertical-align:top;
		width:100%;
		padding:0px 0px;
		box-sizing: border-box;
	}
	#what .app{
		text-align:center;
		width:100%;
		margin:0px 0px 50px 0px;
	}
	#what .icon
	{
		float:none;
		margin-right:0px;
		margin-bottom:15px;
		width:100%;
		height:250px;
	}
	#menu{
		display:inline-block;
	}
	#links{
		float:none;
		margin-right:0px;
		position:fixed;
		z-index:2000;
		bottom:0px;
		left:0px;
	}
	#links.show{
		width:100%;
	}
	#links ul > li{
		margin:0px;
		padding:0px;
	}
	#links ul > li a{
		margin:0px;
		padding:0px;
		position:absolute;
		display:inline-block;
		z-index:500;
		height:1px;
		width:1px;
		border-radius:65px;
		line-height:1px;
		text-align:center;
		background-color:#000;
		color:#fff;
		-ms-transition: all 0.3s ease 0s;
		-moz-transition: all 0.3s ease 0s;
		-webkit-transition: all 0.3s ease 0s;
		transition: all 0.3s ease 0s;
		bottom:30px;
		right:40px;
		overflow:hidden;
	}
	#links.show .where a{
		bottom:100px;
		right:20px;
	}
	#links.show .what a{
		bottom:79px;
		right:87px;
	}
	#links.show .who a{
		bottom:17px;
		right:120px;
	}
	#links.show a {
		width:65px;
		height:65px;
		line-height:65px;
		transition-timing-function: cubic-bezier(.18,.89,.32,1.28);
	}
	#links ul > li a:hover{
		opacity: 0.7; 
		background-color:#ff0033;
	}
	#links.show{
		display:inline-block;
	}
    #banner .wrapper.banner-02 {
        background-image: url(../images/80DayMayday2.jpg);
        background-size: cover;
        background-position: left center;
		background-repeat:no-repeat;
    }
    #banner .wrapper.banner-01 {
        background-image: url(../images/banner_01.png);
        background-size: cover;
        background-position: center center;
    }
	#banner .banner-deckofcards .ban-02 img{
		width:100%;
		height:auto;
	}
	#banner .main{
		display:flex; 
		flex-direction: column-reverse;
	}
	#banner .ban-01{
		display:inline-block;
		margin-right:0px;
		margin-top:15px;
		width:100%;
	}
	#banner .ban-01 h1{
		font-size: 14px;
		font-weight:normal;
		padding:0px 10px;
	}
	#banner .ban-01 p{
		display:none;
	}
	#banner .ban-02{
		display:inline-block; 
		width:100%;
	}
    #banner .banner-01 .ban-02 img {
        width:90%;
    }
    #banner .banner-02 .ban-02 {
        display:none;
    }
    #banner .banner-02 .ban-01 img {
        width: 95%;
    }
    #banner .banner-01 .app_store,
    #banner .banner-01 .play_store {
        display: none;
    }
	#banner .button a{
		display:inline-block;
	}
}