/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 27 oct. 2014, 13:35:11
    Author     : jeremydesvaux
*/
		body {
		  margin: 0;
		  padding: 0;
		  font-size: 1.2em;
		  color: white;
		  background: #333;
		  font-family: "Courier New", Courier, monospace;
		}

		h1 {
			margin: 0;
			padding: 0;
		}

        ul{
            padding-left: 20px;
        }

        #app-container{
            position: absolute;
            top: 50%;
            left: 50%;
            overflow: hidden;
            background: #fff;
        }

		/* Version iPhone : Web app */
		.page {
		    /*display: none; */
		    z-index: 9;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            opacity: 0;
		}

        .page.onStage{
            opacity: 1;
            z-index: 10;
        }

		.page .header {
			width: 100%;
			background: #333;
			margin: 0;
			padding: 30px;
			overflow: hidden;
		}

		.page .header h1 {
			float: left;
			margin-top: 3px;
			font-size: 14px;
            line-height: 39px;
		}

		.page .header img {
			float: left;
			width: 45px;
			margin-right: 30px;
		}

		.page .container {
            position: absolute;
            top: 105px;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 30px;
            overflow: hidden;
            font-size: 14px;
            line-height: 140%;
            transition: top .3s ease;
		}

        .ball{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 250px;
            height: 250px;
            margin-top: -125px;
            margin-left: -125px;
        }

        #home h1{
            line-height: 1.3em;
        }
        #home .container{
            background: #fff;
        }
        #about{
            background: #333;
        }
        #about.onStage{
            top: 0;
            bottom: 0;
        }
        #about .container{
            padding-top: 0;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }
        #result h1{
            text-transform: uppercase;
        }

        .msg {
			position: fixed;
			bottom: 30px;
			left: 30px;
			color: #333;
			padding: 20px;
			font-size: 12px;
			border: 1px solid #333;
            width: 80%;
            max-width: 300px;
            box-sizing: border-box;
		}

		a {
			color: white;
			text-decoration: none;
			border-bottom: 1px solid #555;
		}
		
		a:hover {
			border-bottom: 1px solid #fff;
		}
		
		ul li {
			padding-bottom: 5px;
		}



.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    } 40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInX;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInX;
	backface-visibility: visible !important;
	animation-name: flipInX;
}

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInUp {
	0% {
		opacity: 0;
		-moz-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInUp {
	0% {
		opacity: 0;
		-o-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}