*{margin:0;
	padding: 0;
	box-sizing: border-box;}

::selection {
  background: #000;
  color: #ffeb3b; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

#answerButton {background-color: transparent;
    border: 3px solid #000;
    padding: 12px 20px;
    font-family: arial;
    font-weight: bold;
    font-size: 16pt;
    cursor: pointer;}


#board {width: 550px;
	height: 550px;
	margin: 0 auto;
	}

.menu{font-weight:100;background:#ffeb3bdb;width:190px;height:100%;padding-right:50px;position:fixed;z-index:100;-webkit-box-shadow:3px 0px 7px 0px rgba(0,0,0,0.2);box-shadow:3px 0px 7px 0px rgba(0,0,0,0.2);left:-130px;transition:all .3s;-webkit-transition:all .3s;color:#222}.menu:hover,.menu:focus{transform:translate3d(130px, 0, 0);animation-timing-function:1s ease-in}.menu .title{top:50%;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);transform:rotate(-90deg);right:10px;color: black; opacity: 0.6; font-size:20px; font-family: arial; letter-spacing: 5px; text-transform: uppercase;}.menu .nav{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);font-weight:100}.menu .nav li{padding-bottom:30px;list-style-type:none}.menu .nav li a{display:block;text-decoration:none;color:inherit;transition:all .3s;-webkit-transition:all .3s; padding-left: 20px; font-family: arial; text-transform: uppercase; font-size: 12px;}.menu .nav li a:hover{opacity: 0.6;}

#gameType {width: 300px;
	position: absolute;
	right: 80px;
	top: 50%;
    transform: translateY(-50%);}

#podgrupa {margin-top: 15px;}

.opt {width: 100%;
	margin: 20px auto;}

label {font-family: arial;
	font-size: 15pt;
	text-align: center;
	color: #000;}

input {background-color: transparent;
    border: none;
    border-bottom: 3px solid #000;
    font-family: arial;
    font-size: 12pt;
    cursor: pointer;}

select {background-color: #ffeb3b;
    margin-top: 18px;
    transition: 0.3s;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    margin-bottom: 45px;
    text-align: center;
	border: 2px solid #ffeb3b;
	box-shadow: 2px 2px 14px rgba(0,0,0,0.6);
	color: #000;
	text-align: center;
    padding: 7px 10px;
    border-radius: 4px;}

#intro1 {height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#logo {width: 250%;}

form {position: absolute;
	bottom: 100px;
	width: 100%;
	text-align: center;}

#start {background-color: transparent;
	clear: both;
	border: 3px solid #000;
	padding: 12px 20px;
	font-family: arial;
	font-weight: bold;
	font-size: 13pt;
	cursor: pointer;}

body{position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#ajax-panel{
border: 2px solid #ffeb3b;
	width: 350px;
	height: 350px;
	bottom: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 auto;
	padding: 7px 10px;
	border-radius: 4px;
	background-color: rgba(255,255,255,0.9);
	box-shadow: 2px 2px 14px rgba(0,0,0,0.6);
	transition: 0.3s;
}

#answerWriten {margin-bottom: 10px;
	padding: 3px 5px;
	border: none;
	border-bottom: 2px solid #000;
	text-align:center;}

#skipTurn {border: 2px solid #ffeb3b;
	width: 550px;
	position: absolute;
	bottom: 25px;
	cursor: pointer;
	padding: 7px 10px;
	border-radius: 4px;
	background-color: rgba(255,255,255,0.8);
	margin-bottom: 10px;
	box-shadow: 2px 2px 14px rgba(0,0,0,0.6);
	transition: 0.3s;}

#ajax-panel p, #ajax-panel label {	color: #000;
	font-family: arial;
	font-size: 18pt;
	margin-bottom: 12px;}

#answer {border: 2px solid #000;
	font-weight: bold;
	width: 50%;
	padding: 7px 10px;
	border-radius: 4px;
	background-color: rgba(255,255,255,0.4);
	margin-bottom: 10px;
	box-shadow: 2px 2px 14px rgba(0,0,0,0.6);
	transition: 0.3s;}


#odg {display: none;}
.playField, .blueField, .yellowField, .redField, .greenField { user-select: none; border:1.1px solid black; transition: 0.3s; color:transparent;}
.empty {
	border: 1.1px solid black;}


.playField:hover {background-color: #00bcd4}

[id='145'] {background-color: #0ada0a !important;}
[id='50'] {background-color: #ffeb3b !important;}
[id='09'] {background-color: #4949d6 !important;}
[id='914'] {background-color: #e00f0f !important;}

#skipTurn{
	display: none;
}

#intro {
		background-color: #fcee23;
      animation: colorchange 20s; 
      -webkit-animation: colorchange 20s;
    }

    @keyframes colorchange
    {
      0%   {background: #00a651;}
      25%  {background: #fcee23;}
      50%  {background: #ed1c24;}
      75%  {background: #2e3192;}
      100% {background: #00a651;}
    }

    @-webkit-keyframes colorchange
    {
      0%   {background: #00a651;}
      25%  {background: #fcee23;}
      50%  {background: #ed1c24;}
      75%  {background: #2e3192;}
      100% {background: #00a651;}
    }


 body {
	color: white ;
	background-image: url('images/pozadina2.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

div{
	display: inline-block;
	width: 6.66%;
	height: 6.66%;
}

.yellowField{
	background-color: #ffeb3b;
}

.greenField{
	background-color: #0ada0a;
}

.blueField{
	background-color: #4949d6;
}

.redField{
	background-color: #e00f0f;
}

.empty{
	background-color: #ffffffa8;
	color: transparent;
	user-select: none;
}

.playField{
	background-color: #00bcd463;
}

#PlaceForResult, #PlaceForCurrentTurn, #moveMessage {display: none;}

#diceSection{
	position: absolute;
	bottom: 150px;
	right: 100px;
}

#turnsection {position: absolute;
	right: 190px;
	width: 150px;
	bottom: 320px;
	text-align: center;}

h3 {font-family: arial;
	font-weight: bold;
	color: black;}



#diceButton {background: transparent;
	border:none;
	position: absolute;
	right: 200px;
	bottom: 150px;
	opacity: 0.7;
	transition: 0.4s;
	cursor: pointer;}

#diceButton:hover {opacity: 1;}

.yellowPiece, .redPiece, .bluePiece, .greenPiece{
	background-size: 80%;
	background-position: center center;
	background-repeat: no-repeat;
}

.yellowPiece {background-image: url('images/fig_zuta.svg');}

.redPiece{
	background-image: url('images/fig_crvena.svg');
}

.bluePiece{
	background-image: url('images/fig_plava.svg');
}

.greenPiece{
	background-image: url('images/fig_zelena.svg');
}


#diceSection p {color: black;}
#logoPic {position: absolute;
   top: 50%;
   left: 50%;
   width: 140px;
   height: 140px;
   margin-top: -70px;
   margin-left: -70px; }

#AppIme {width: 400px;
	position: absolute;
	top: 2%;}


 #setBoardButton {font-family: 'Arial';
	font-weight: bold;
	border:none;
	cursor: pointer;
	width: 550px;
	font-size: 28pt;
	position: absolute;
	padding: 7px 10px;
	background-color: #ffeb3b;
	border:2px solid black;
	margin-bottom: 10px;
	box-shadow: 2px 2px 14px rgba(0,0,0,0.6);
	}

#setBoardButton:active {border: none;}