.clear { clear: both; display: block; }
.f_right { float: right; }
.f_left { float: left; }
.hidden { display: none; }

.p1 { position: absolute; top: 70px; }
.p2 { position: absolute; top: 135px; }
.p3 { position: absolute; top: 195px; }
.p4 { position: absolute; top: 255px; }
.p5 { position: absolute; top: 318px; }
.p6 { position: absolute; top: 385px; }
.p7 { position: absolute; top: 442px; }
.p8 { position: absolute; top: 504px; }
#opc1, #opc2, #opc3, #opc4 , #opc5, #opc6, #opc7, #opc8 {display: none; width: 100%;}
#main{width:100%;height:460px;padding: 0px;background-color: #ffffff;}
#complete {
border: 2px ridge #78b7d5;
width: 680px;
height: 500px;
padding: 0px;
background-color: #ffffff;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
font-family:Arial, Helvetica, sans-serif;
}
#left_side,#middle_side {width: 30%; border: 0px solid #00ff00;text-align:center;float: left;margin: 0px auto 0px auto !important;}
#left_side2,#middle_side2 {width: 40%; text-align:center;float: left;margin: 0px auto 0px auto !important;}
#right_side{width: 40%;border: 0px solid #0000ff;text-align: left;float: right;margin: 0px auto 0px auto;}
#object1, #object2, #object3, #object4, #object5, #object6, #object7, #object8{
color: #000;
cursor: pointer;
text-align: center;
font-size: 70%;
padding: 0px;
margin: 10px auto 10px auto;
vertical-align:middle;
border-radius: 2px;
height: 50px;
width: 120px;
}
.numberPad { padding-top: 8px; }
.objectLanded{height: 50px;width: 50px;border: 2px dashed #1E90FF;}
.completeObject {
border: 1px solid #000000;
background-color: #ccc;
color: #ffffff;
cursor: pointer;
text-align: center;
font-size: 80%;
padding: 0px;
margin: 10px auto 0px auto;
border-radius: 4px;
height: 50px;
width: 100px;
}
.lime {color:#17A589;}
.red {color:#E74C3C;}
.orange {color:#F5B041;}
.imatge {width: 35%;}
#target1, #target2, #target3, #target4, #target5, #target6, #target7, #target8 {background-color: #eee;color: #ffffff;cursor: pointer;
text-align: center;border: 1px dotted #000000; padding: 0px;margin: 10px auto 0px auto;border-radius: 4px;height: 50px;width: 100px;}
#feedback {border: 0px solid #ff0000;float: left;text-align: center;padding: 10px 0px 0px 25%;color: #000000;font-size: 1.4em;width: 50%;}
.iconet{font-size:180%; color:green; line-height:120%;}
.icontext{font-size:80%; color:#111;}

.buttonex{font-size:90%;background-color:transparent;color:#036;cursor:pointer; border:1px solid #036; padding:5px; border-radius:4px;}
.buttonex:hover{background-color:#eee;}
#logo{float:right;width:auto;padding: .5vw 0 0 .5vw; line-height:50%;text-align:right; z-index:1000;}
.apartado {background-color:#69C;; color:#FFF; width:45%; font-weight:600; 
	padding-right:1.2%; padding-left:1.1%; border-radius: 1.2vw; border: solid 1px #9bF; margin-left:-1%; margin-top:1.5vw; margin-bottom:1vw;}
.button {background-color: white;  border: solid 2px; margin-right: 2vw; padding:.3em .5em; text-align:center; text-decoration: none;	cursor: pointer; font-size:70%; opacity: 1; }
.button:hover {background-color: #EAECEE;  
   opacity: .71; transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -webkit-transition: opacity .15s ease-in-out;}
.save {position: absolute; right:17%; color:#73C6B6; cursor:pointer; background:#99e699; color:#006600; border-color:#73C6B6; border-radius: 6px;}

/*Layer*/
#capa {width:300px; position: absolute; right:1vw; top:.5vw; z-index: 9; background-color: #f1f1f1; text-align: center; border: 0px solid #d3d3d3; display: none; border-radius:4px; opacity:0.9; transition: opacity .2s ease-in-out; box-shadow: 5px 10px 18px #888888;}

#capaheader {font-size: 90%; padding: .3vw; cursor: move; z-index: 10; background-color: #2196F3;  color: #fff;}
#capa:hover {opacity:1;}

/*Save bar*/
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #DAF7A6;
  color: #5F9007;
  text-align: center;
  border:solid 2px #5F9007;
  border-radius: 5px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 47%;
  bottom: 30px;
  font-size: 1.2vw;
}
#snackbar.show {visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;  animation: fadein 0.5s, fadeout 0.5s 2.5s;}
@-webkit-keyframes fadein {  from {bottom: 0; opacity: 0;}   to {bottom: 30px; opacity: 1;}}
@keyframes fadein {  from {bottom: 0; opacity: 0;}  to {bottom: 30px; opacity: 1;}}
@-webkit-keyframes fadeout {  from {bottom: 30px; opacity: 1;}   to {bottom: 0; opacity: 0;}}
@keyframes fadeout {  from {bottom: 30px; opacity: 1;}  to {bottom: 0; opacity: 0;}}

#container {width: 89%;  height: 71vh;  margin: 0 auto;  border: 1px solid #bbb; text-align: center;}
.padre {width: 100%;  height: 40vh;  display: flex;}
.pare {width: 100%;  height: auto; background-color: #EAECEE; display: flex;}
.objects {width: 100%;  height: 20vh; padding:3vw; text-align: center;}
.tipo {flex-grow: 1; padding:1.7vw; line-height: 4.5vw; }
#fuego {background-color: #D6E4EC;}
#agua {background-color: #E0D6EC;}
#tierra {background-color: #B0D5EC;}
#resultado { text-align: center;  font-size: 30px;}
.pc {margin: .7vw; height: auto; width: 4vw;}
.pa {width: 6vw; background-color:white; border: solid 1px #555555; border-radius: 4px; margin: 1.5vw; padding: 1em 1em; text-align:center; text-decoration: none; cursor: move; font-size:102%;}
.ipa {height: 2.1vw; vertical-align:middle;}

.poster {float:right;
  width: 32vw;
  height: 32vw;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 30px;
  border-radius: .5em;
  overflow: hidden;
  margin-left:2.5em;
  margin-bottom:2em;
}
.poster__img {width: 100%;  height: 100%;  object-fit: cover;  grid-row: 1 / 3;  grid-column: 1;}
th,td {padding: .1vw;}
.missing-words {position: relative;}
.missing-words__answers {
  background: #e1f2fb;
  border-radius: 4px;
  margin-bottom: 3vh;
  padding: .5vw 0 0 2vw;
  text-shadow: none;
  transform: translateZ(0);
  opacity:.7;
}
.missing-words__answers:hover {transition: transform .5s ease-in; opacity:1;}
.missing-words__answers-item {
  background: none;
  display: inline-block;
  min-height: 4vh;
  margin: 0 10px 10px 0;
  padding: 0;
  transition: transform .25s ease-in;
  vertical-align: top;
}
.missing-words__answers-item:nth-child(3n+1) {transform: rotate(-5deg);}
.missing-words__answers-item:nth-child(3n+1):hover {transform: rotate(0);}
.missing-words__answers-item:nth-child(3n+2) {transform: rotate(5deg);}
.missing-words__answers-item:nth-child(3n+2):hover {transform: rotate(0);}
/**
 * Quiz draggable items.
 */
.missing-words__draggable {
  background: #fef3d0;
  box-shadow: inset 1px 1px 0 white, 1px 1px 2px rgba(0, 0, 0, 0.2);
  color: #197dac;
  cursor: grab;
  display: block;
  font-size: 1.1vw;
  font-weight: 600;
  line-height: 1.2vw;
  padding: .5vw 1vw;
  position: relative;
  white-space: nowrap;
}
.missing-words__draggable:after {
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 100%;
  right: 0;
  transition: all .50s;
  width: 100%;
}
.missing-words__draggable:hover {cursor: hand;}
.missing-words__draggable:hover:after {  height: 3px;  opacity: .5;  bottom: -3px;}
.missing-words__draggable:active {  cursor: grabbing;}

/**
 * Droppable area items can be dragged over.
 * Class of `.answered` is added when answer is correct/matches so styling can
 * be changed/overwritten.
 */
.missing-words__blank {
  background: white;
  border: 2px solid #4cb0df;
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  display: inline-block;
  height: 4.7vw;
  letter-spacing: 1px;
  text-align: center;
  vertical-align: middle;
  width: 90%;
}
.missing-words__blank + .missing-words__blank { margin-top: 0px;}
.missing-words__blank.answered {  background: #3A995B; border-color:#62E860; transition: all .25s;}
.missing-words__blank.answered .missing-words__draggable {
  background: none;
  box-shadow: none;
  color: white;
  cursor: default;
  height: auto !important;
  padding: 10px 5px;
  white-space: normal;
  width: auto !important;
  vertical-align: middle;
}
.missing-words__blank.answered .missing-words__draggable:after {  display: none;}

/**
 * Depending on if the quiz is in a `table` or a `ul` there's some specific
 * styling for each.
 */
.missing-words__table, .missing-words__list {  color: #406d80;  letter-spacing: 1px;  line-height: .2em;}

/**
 * Quiz `table` specific styling.
 */
.missing-words__table tr:first-child td:first-child {border-radius: 4px 0 0 0;}
.missing-words__table tr:first-child td:last-child {border-radius: 0 4px 0 0; }
.missing-words__table tr:last-child td:first-child {border-radius: 0 0 0 4px;}
.missing-words__table tr:last-child td:last-child {border-radius: 0 0 4px 0;}
.missing-words__table th, .missing-words__table td {border-color: white !important;}
.missing-words__table th.has-rip,.missing-words__table td.has-rip {padding: .4vw;}
.missing-words__table td { background-color: #e1f2fb; vertical-align: middle; padding: .5vw 1vw .5vw 1vw;}
.missing-words__table td.has-rip {}

/*Draggable bars*/
@-webkit-keyframes wiggle {
    0%   { -webkit-transform: rotate(0deg); }
    25%  { -webkit-transform: rotate(3deg); }
    75%  { -webkit-transform: rotate(-3deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@keyframes wiggle {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(3deg); }
    75%  { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}

#board {height: 100%;  background-color: #fff; overflow: hidden; text-align:center;}
#board .column {
    width: 24%;
    float: left;
    position: relative;
    height: 100%;
    border: 0;
    border-right-color: #999;
    margin-top:1vw;
}
#board .first {background-color: #fff;}
#board .second {background-color: #D6E4EC; border:solid 1px #777;}    
#board .third {background-color: #E0D6EC; border:solid 1px #888;} 
#board .fourth {background-color: #dfdfdf;} 
#board .column:last-child {border-right-color: transparent; }
#board .column.over, #board .column.over:last-child {border: dashed 1px #555; background-color: #efefef;}
#board ul.card-list {list-style-type: none; margin: 0; padding: 2em;}
#board ul.card-list .card {
    -webkit-transition: opacity 300ms ease;
    -moz-transition: opacity 300ms ease;
    -ms-transition: opacity 300ms ease;
    -o-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}
#board ul.card-list .card:hover {
    -webkit-animation: wiggle 400ms;
    animation: wiggle 400ms;
}
#board ul.card-list .card.dragging {opacity: 0.5;}
.flex {display: flex; flex-wrap: wrap;}
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

/*No utilitzat*/
#board #cardDetail {
    position: fixed;
    z-index: 10000;
    -webkit-transition: all 600ms ease-in;
    -moz-transition: all 600ms ease-in;
    -ms-transition: all 600ms ease-in;
    -o-transition: all 600ms ease-in;
    transition: all 600ms ease-in;
}
#board #cardDetail .front,
#board #cardDetail .back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    text-align: center;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 600ms ease-in;
    -moz-transition: all 600ms ease-in;
    -ms-transition: all 600ms ease-in;
    -o-transition: all 600ms ease-in;
    transition: all 600ms ease-in;
}
#board #cardDetail .front {
    background-color: #fff;
    border: solid 1px #bebebe;
    z-index: 10000;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
#board #cardDetail .back {
    background-color: #68C0E8;
    border: solid 1px #0082BE;
    -webkit-transform: rotateY(-179deg);
    -moz-transform: rotateY(-179deg);
    -ms-transform: rotateY(-179deg);
    -o-transform: rotateY(-179deg);
    transform: rotateY(-179deg);
}
#board #cardDetail.flipped .front {
    -webkit-transform: perspective(1000px) rotateY(180deg);
    -moz-transform: perspective(1000px) rotateY(180deg);
    -ms-transform: perspective(1000px) rotateY(180deg);
    -o-transform: perspective(1000px) rotateY(180deg);
    transform: perspective(1000px) rotateY(180deg);
}
#board #cardDetail.flipped .back {
    z-index: 20000;
    -webkit-transform: perspective(1000px) rotateY(0deg);
    -moz-transform: perspective(1000px) rotateY(0deg);
    -ms-transform: perspective(1000px) rotateY(0deg);
    -o-transform: perspective(1000px) rotateY(0deg);
    transform: perspective(1000px) rotateY(0deg);
}
#board #cardDetail .content { padding: 1em;}
#board #cardDetail .flip-trigger {position: absolute; right: 10px; bottom: 10px; color: #333;}
#board #cardDetail .flip-trigger:active, 
#board #cardDetail .flip-trigger:hover, 
#board #cardDetail .flip-trigger:focus { color: #0082BE;}
#modalOverlay {
    display: none;
    background-color: #444;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1000;
}