@charset "utf-8";
/* CSS Document */

body{
    margin: 0;
    padding: 0;
}

.square {
    float: left;
	width:calc(100% / 9);
	height:30px;
	background-color:#000;
	margin:0px;
	padding-left:0px;
	padding-top:0px;
}

.long {
/*    width:100%;*/
    height: 70px;
	width:calc(100% / 12);
    padding-top: 40px;
}

.squaretext {
    font-family:Roboto;
    color:#fff;
    font-size: 80%;
    text-align: center;
    margin-top: 10px;
}

.dark {
    color:#000;
}

.squareovertext {
    font-family:Roboto;
    color:#fff;
    font-size: 200%;
    text-align: center;
    margin-top: 190px;
}

.squareovertext2 {
    font-family:Roboto;
    color:#fff;
    font-size: 200%;
    text-align: center;
    margin-top: 40px;
}

.overlay {
    width:calc(100.05% / 9);
    height: 420px;
    position: absolute;
    pointer-events: none;
    
    transition: opacity .25s ease-out;
   -moz-transition: opacity .25s ease-out;
   -webkit-transition: opacity .25s ease-out;
}

.overlay2 {
    margin-top: 420px;
    width:calc(100.05% / 9);
    height: 420px;
    position: absolute;
    pointer-events: none;
    
    transition: opacity .25s ease-out;
   -moz-transition: opacity .25s ease-out;
   -webkit-transition: opacity .25s ease-out;
}

.overlay3 {
    margin-top: 840px;
    width:calc(100%);
    height:110px;
    position: absolute;
    pointer-events: none;
    
    transition: opacity .25s ease-out;
   -moz-transition: opacity .25s ease-out;
   -webkit-transition: opacity .25s ease-out;
}

.msgBox {
    border-radius: 16px;
    background-color: rgba(66, 66, 66, 0.8);
    width:calc(100% / 2);
    height: 70px;
    margin-top: 340px;
    margin-left: calc((100% / 4));
    position:absolute;
    pointer-events: none;
    text-align: center;
    padding-top: 35px;
    padding-bottom: 55px;
    font-family: Roboto;
    font-size: 200%;
    color: white;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease-out;
   -moz-transition: opacity .25s ease-out;
   -webkit-transition: opacity .25s ease-out;
    
}

.squareRed {
    background-color: #F44336;
}

.squarePink {
    margin-left: calc(100% / 9);
    background-color: #E91E63;
}

.squarePurple {
    margin-left: calc(100% / 9 * 2);
    background-color: #9C27B0;
}

.squareDeepPurple {
    margin-left: calc(100% / 9 * 3);
    background-color: #673AB7;
}

.squareIndigo {
    margin-left: calc(100% / 9 * 4);
    background-color: #3F51B5;
}

.squareBlue {
    margin-left: calc(100% / 9 * 5);
    background-color: #2196F3;
}

.squareLightBlue {
    margin-left: calc(100% / 9 * 6);
    background-color: #03A9F4;
}

.squareCyan {
    margin-left: calc(100% / 9 * 7);
    background-color: #00BCD4;
}

.squareTeal {
    margin-left: calc(100% / 9 * 8);
    background-color: #009688;
}

.squareGreen {
    background-color: #4CAF50;
}

.squareLightGreen {
    margin-left: calc(100% / 9 * 1);
    background-color: #8BC34A;
}

.squareLime {
    margin-left: calc(100% / 9 * 2);
    background-color: #CDDC39;
}

.squareYellow {
    margin-left: calc(100% / 9 * 3);
    background-color: #FFEB3B;
}

.squareAmber {
    margin-left: calc(100% / 9 * 4);
    background-color: #FFC107;
}

.squareOrange {
    margin-left: calc(100% / 9 * 5);
    background-color: #FF9800;
}

.squareDeepOrange {
    margin-left: calc(100% / 9 * 6);
    background-color: #FF5722;
}

.squareBrown {
    margin-left: calc(100% / 9 * 7);
    background-color: #795548;
}

.squareBlueGrey {
    margin-left: calc(100% / 9 * 8);
    background-color: #607D8B;
}

.squareGrey {
    background-color: #9E9E9E;
}