body {
	width:100%;
	height:100;
}

#wwm-game {
	width:85%;
	margin:auto;
	padding-top:45%;
	position: relative;
	font-size:1.8vw;
	font-family: 'PT Sans', sans-serif;

	/*height: 0;
	overflow: hidden;
	padding-top: calc(591.44px / 1127.34px * 100%);
	background: white;
	position: relative;
	
		font-family: 'Exo 2', sans-serif;*/
}

#wwm-game-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}#wwm-izi-disclaimer {	width:100%;	height:100%;	position:absolute;	background-image:url(res/anti-disclaimer.png);	background-position:center;	background-repeat:no-repeat;	background-size:contain;	cursor:pointer;	display:none;}

#wwm-first-screen {
	height: 100%;
	display:grid;
	grid-template-columns: 1fr 1fr;
}
#wwm-second-screen {
	height: 100%;
	display:none;
	grid-template-columns: 2fr 1fr;
}
#wwm-third-screen {
	height: 100%;
	display:none;
	grid-template-columns: 5fr 3fr;
}
#wwm-fourth-screen {
	height: 100%;
	display:none;
	grid-template-columns: 1fr 1fr;
}

#wwm-word-types {
	width:100%;
	grid-template-columns: 1fr 1fr;
	display:grid;
}

#wwm-izi-logo {
	width:100%;
	height:8vw;
	margin-top:2vw;
	
	background-image:url(res/logo.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	cursor:pointer;
}

#wwm-i-logo {
	width:100%;
	height:6vw;
	margin-top:1vw;
	
	background-image:url(res/i.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	cursor:pointer;
}

.wwm-word-type {
	background-repeat:no-repeat;
	background-size:contain;
	height:10vw;
	background-position:center;
	cursor:pointer;
}

#wwm-wtp4 {
	background-image:url(res/ab-action.png);
}
#wwm-wtp3 {
	background-image:url(res/ab-conditions.png);
}
#wwm-wtp2 {
	background-image:url(res/ab-emotions.png);
}
#wwm-wtp1 {
	background-image:url(res/ab-quality.png);
}

#wwm-explain-baloon {
	width:100%;
	height:75%;
	padding-top:10%;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	background-image:url(res/ex4.png);
}

#wwm-sp-ftext {
    padding-top: 1vw;
    padding-bottom: 2vw;
}
#wwm-sp-stext {
    padding-top: 3vw;
}

.wwm-panel-left {
	/*background: #FFFAFA;*/
	width:100%;
	height:100%;
}
.wwm-panel-right {
	/*background: #F5F5F5;*/
	width:100%;
	height:100%;
}

.wwm-next-btn {
	background-image:url(res/btn-next.png);
	background-repeat:no-repeat;
	background-size:contain;
    width: 90%;
	height:5vw;
	margin:auto;
	cursor:pointer;
	background-position:center;
}

.wwm-again-btn {
	background-image:url(res/btn-again.png);
	background-repeat:no-repeat;
	background-size:contain;
    width: 90%;
	height:5vw;
	margin:auto;
	cursor:pointer;
	background-position:center;
}
.wwm-review-btn {
	background-image:url(res/btn-review.png);
	background-repeat:no-repeat;
	background-size:contain;
    width: 90%;
	height:5vw;
	margin:auto;
	cursor:pointer;
	background-position:center;
}

.wwm-center {	
	text-align:center;
}

#wwm-head-top {
	font-size:1.4em;
	font-family: 'Exo 2', sans-serif;
	font-weight:bold;
}
#wwm-head-bot {
	font-size:2em;
	font-family: 'Exo 2', sans-serif;
	font-weight:bold;
}

#wwm-head-small {
	font-size:0.8em;
	margin:1em auto 2em auto;
}

#wwm-start-text {
    padding-top: 5vw;
}

#wwm-main-grid {
	display:grid;
	width:100%;
	grid-template-columns: 2fr 1fr;
}

#wwm-addinfo {
	font-size:0.7em;
}

#wwm-error-panel {
	font-size:1.5em;
	height:8vw;
    line-height: 8vw; 
    text-align: center;
	font-family: 'Exo 2', sans-serif;
}

#wwm-end-b {
	width:100%;
	height:25vw;
	margin:5vw auto 2vw auto; 
	background-image:url(res/end-b.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}

#wmm-gym-fail { 
	width:100%;
	height:20vw;
	background-image:url(res/gym-fail.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}

#wmm-sc-sm {
	font-size:0.5em;
}

#wmm-gym-ok { 
	display:none;
	width:100%;
	height:20vw;
    margin-top: -3vw;
	background-image:url(res/gym-ok.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}

#wmm-fin-score {
	font-size:5em;
	color:#477bbe;
	text-align:center;
	padding-bottom: 0.5em;
}

#wwm-fscore-taunt {
	padding-top:1em;
	padding-bottom:1em;
	font-size:1.2em;
	text-align:center;
	font-family: 'Exo 2', sans-serif;
}

#wwm-gym {
	z-index:1000;
	width:50%;
	height:15vw;
	margin:auto;
	background-image:url(res/gym-1-0.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    transform-origin: 50% 95%;
}

#wwm-review-head {
	text-align:center;
	margin:auto;
	font-weight:bold;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
}

#wwm-review-head-text {
	font-weight:bold;
	font-size:1.2em;
	
}

#wwm-review-comm {
	position:relative;
}

#wwm-send-comm-btn {
	cursor:pointer;
	position:absolute;
	bottom:-1vw;
	right:-3vw;
    width: 8vw;
	height:8vw;
	background-image:url(res/send-review1.png);
	background-repeat:no-repeat;
	background-size:contain;
    background-position: center;
}

.wwm-rhead-small {
	font-size:0.8em;
	font-weight:500;
}

#wwm-review-head-img {
    width: 70%;
	height:5vw;
	margin:auto;
	background-image:url(res/logo.png);
	background-repeat:no-repeat;
	background-size:contain;
    background-position: right;
}
#wwm-review-stars {
	display:grid;
	width:100%;
	grid-template-columns:5vw 1fr 5vw 1fr;
}

.wwm-check {
    width: 5vw;
	height:5vw;
	background-image:url(res/review-check.png);
	background-repeat:no-repeat;
	background-size:contain;
    background-position: top;
}

#wwm-close-btn {
	position: absolute;
	top:0;
	right:0;
	width:5vw;
	height:5vw;
	background-image:url(res/btn_quit.png);
	background-repeat:no-repeat;
	background-size:contain;
    background-position: center;
	
}

.wwm-stars {
    padding-top: 0.2em;
    font-size: 1.5em;
}

.wwm-stars-wrapper {
	display:grid;
	grid-template-columns: repeat(10, 1fr);
}

#wwm-review-textarea {
    width: 90%;
    height: 5em;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.5em;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    margin: 1em 0;
    padding: 1em 5%;
}

.wwm-star {
	width:3vw;
	height:3vw;
	background-image:url(res/star-white.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	cursor:pointer;
}
.wwm-star-active,.wwm-star:hover {
	background-image:url(res/star-green.png);
}

#wwm-thanks-baloon {
	position:absolute;
	top:50%;
    left: 50%;
    margin-left: -15vw;
	margin-top:-15vw;
	width:30vw;
	height:30vw;
	background-image:url(res/disclaimer-empty.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    text-align: center;
    font-size: 1.5em;
    line-height: 10em;
	display:none;
	cursor:pointer;
}

#wwm-review-screen {
	display:none;
}

#wwm-review-text {
	display:grid;
	grid-template-columns:1fr 1fr;
}

#wwm-type-chooser {
	width:100%;
	height:100%;
	background-image:url(res/main-back.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	display:grid;
	grid-template-columns: 1fr 1fr;
	position:relative;
}

.wwm-type {
	opacity:0.1;
	width:100%;
	height:100%;
	cursor:pointer;
}

#wwm-type-qua {
	/*background:red;*/
}
#wwm-type-emo {
	/*background:green;*/
}
#wwm-type-act {
	/*background:blue;*/
}
#wwm-type-con {
	/*background:yellow;*/
}

#wwm-new-word {
	position:absolute;
	top:50%;
    margin-top: -4vw;
    height: 8vw;
	background:white;
	border-radius:1vw;
    width: 70%;
    margin-left: 15%;
    text-align: center;
    line-height: 8vw;
    font-weight: bold;
}

#wwm-counters {
	margin-top:8vw;
	display:grid;
	grid-template-columns: 1fr 1fr;
}

#wwm-time-counter {
	width:100%;
	height:10vw;
	text-align:center;
	background-image:url(res/time/time-f.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    line-height: 10vw;
    font-size: 4vw;
}

#wwm-score-counter {
	width:100%;
	height:10vw;
	text-align:center;
	background-image:url(res/score.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    line-height: 12.3vw;
    font-size: 6vw;
}

@keyframes rotating1 {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  
  25% {
    -ms-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  75% {
    -ms-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}
@keyframes rotating2 {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  
  25% {
    -ms-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  75% {
    -ms-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
  }
}
@keyframes rotating3 {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  
  25% {
    -ms-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  75% {
    -ms-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
  }
}
@keyframes rotating4 {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  
  25% {
    -ms-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  75% {
    -ms-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
  }
}

.rotating1 {
  -webkit-animation: rotating1 2s linear infinite;
  -moz-animation: rotating1 2s linear infinite;
  -ms-animation: rotating1 2s linear infinite;
  -o-animation: rotating1 2s linear infinite;
  animation: rotating1 2s linear infinite;
}
.rotating2 {
  -webkit-animation: rotating2 2s linear infinite;
  -moz-animation: rotating2 2s linear infinite;
  -ms-animation: rotating2 2s linear infinite;
  -o-animation: rotating2 2s linear infinite;
  animation: rotating2 2s linear infinite;
}
.rotating3 {
  -webkit-animation: rotating3 2s linear infinite;
  -moz-animation: rotating3 2s linear infinite;
  -ms-animation: rotating3 2s linear infinite;
  -o-animation: rotating3 2s linear infinite;
  animation: rotating3 2s linear infinite;
}
.rotating4 {
  -webkit-animation: rotating4 2s linear infinite;
  -moz-animation: rotating4 2s linear infinite;
  -ms-animation: rotating4 2s linear infinite;
  -o-animation: rotating4 2s linear infinite;
  animation: rotating4 2s linear infinite;
}


#wwm-no-support {
	color: #5980bb;
	font-weight: bold;
}
.wwm-st-titles {
	font-size:0.8em;
	text-align:center;
	width:100%;
}

@media only screen and (max-device-width: 768px) {			#wwm-izi-disclaimer {		height:90vw;	}
	#wwm-game {
		width: 92vw;
		margin: 4vw;
		font-size: 4vw;
	}
	#wwm-word-types {
		grid-template-columns: 1fr;
	}
	#wwm-explain-baloon { 
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display:none;
		height: 100vw;
	}
	#wwm-sp-ftext {
		margin-right: 3em;
	}
	.wwm-word-type {
		height:6em;
	}
	#wwm-izi-logo {
		height: 4em;
	}
	.wwm-next-btn {
		height: 4em;
	}
	#wwm-i-logo {
		height: 3em;
	}
	#wwm-head-small {
		margin: 1em auto 1em auto;
	}
	#wwm-close-btn {
		width: 3em;
		height: 3em;
	}
	body {
		margin:0;
	}
	#wwm-first-screen {
		grid-template-columns: 1fr;
	}
	#wwm-second-screen {
		grid-template-columns: 1fr;
	}
	#wwm-third-screen {
		grid-template-columns: 1fr;
	}
	#wwm-fourth-screen {
		grid-template-columns: 1fr;
	}
	#wwm-addinfo {
		display:none;
	}
	#wwm-gpl {
		order:2;
		height:100%;
	}
	#wwm-gpr {
		order:1;
	}
	#wwm-main-grid {
		grid-template-columns: 1fr;
	}
	#wwm-main-grid .wwm-next-btn {
		display:block !important;
	}
	#wwm-gpr .wwm-next-btn {
		display:none;
	}
	#wwm-type-chooser { 
		width: 90vw;
		height: 90vw;
	}
	#wwm-score-counter {		
		height: 20vw;
		line-height: 26vw;
		font-size: 12vw;
	}
	#wwm-time-counter {		
		height: 20vw;
		line-height: 20vw;
		font-size: 10vw;
	}
	#wwm-gym {
		height: 35vw;
		margin: -35vw auto 0 auto;
	}
	#wwm-new-word {
		width: 80%;
		margin-left:10%;
		font-size: 7vw;				display: grid;		grid-template-columns: 1fr;		align-items: center;
		margin-top: -10vw;
		height: 20vw;
	}
	#wwm-counters {
		margin-top:14vw;
	}
	
	#wmm-gym-fail {
		height:30vw;
	}
	#wmm-gym-ok {
		height:30vw;
	}
	#wmm-fin-score {
		padding-bottom:0.2em;
	}
	#wwm-end-b {
		height:50vw;
	}
	#wwm-again-btn {
		height: 4em;
	}
	#wwm-review-btn {
		height: 4em;
	}
	#wwm-review-head {
		grid-template-columns: 1fr;
	}
	#wwm-review-head-img {
		background-position:center;
		height:10vw;
	}
	#wwm-review-stars {
		grid-template-columns: 10vw 1fr;
	}
	#wwm-review-text {
		grid-template-columns:1fr;
	}
	#wwm-send-comm-btn {		
		width: 15vw;
		height: 15vw;
	}
	.wwm-check {
		width:10vw;
		height:10vw;
	}
	.wwm-star {
		width:7vw;
		height:7vw;
	}
	#wwm-thanks-baloon {		
		top: 50vw;
		left: 50%;
		margin-left: -35vw;
		margin-top: -35vw;
		width: 70vw;
		height: 70vw;
	}
}