/*     RESET margin & padding     */

body, html, p, img, h1, h2, h3{
  padding: 0;
  margin: 0;
}

 /*     BASIC     */


html{
    height: 100%;
    background: linear-gradient(#2a7fb7, #17537b);
    overflow: hidden;
}

body{
    font-family: Gill Sans, sans-serif;
    color: white;
    height: 100%;
}

/*     A LINKS     */


#aTxtEntry, #aResultDivEntry, #aAfterLocation{
  color: white;
}
#aTxtEntry:visited, #aResultDivEntry:visited, #aAfterLocation:visited{
  color: white;
}
#aTxtEntry:hover, #aResultDivEntry:hover, #aAfterLocation:hover{
  color: lightgrey;
}
#aTxtEntry:active, #aResultDivEntry:active, #aAfterLocation:active{
  color: grey;
}


#aResultDivEntry, #aAfterLocation{
  margin-top: 1.5%;
}


/*     HIDING CONTENT AT THE START     */

#divTxtEntry{
  display:none;
}

#wrapperColors{
    display:none;
    opacity:0;
}


#resultDivEntry{
  display:none;
}


#destinationDrag{
    display:none;
    opacity:0;
}

#locationSpa{
    display:none;
    opacity:0;
}

#end{
    display:none;
    opacity:0;
}



/*     PAGE INTRO     */


#divIntro{
    text-align:center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#introTitle{
    font-size: 4em;
    margin-bottom: 20px;
}

#aStartQ{
    border-radius: 10px;
    text-decoration: none;
    padding: 2%;
    background-color: white;
    color: #2a7fb7;
    display: inline;
}





/*     PAGE COLORS     */


#wrapperColors{
    width: 70%;
    height: 70%;
    margin: 5% auto;
    text-align:center;
}

#wrapperColors h2{
    font-size: 3em;
}

#divAllColors{
    width: 100%;
    height: 90%;
}

.divColors{
    width: 20%;
    height: 41%;
    margin: 2%;
    padding: 0.5%;
    float: left;
    background-color: white;
}

.divSpecificColor{
    width: 100%;
    height: 100%;
}

#divColor1{
    background-color: #5491c7;
}
#divColor2{
    background-color: #ed3b3b;
}
#divColor3{
    background-color: #66bc58;
}
#divColor4{
    background-color: #000000;
}
#divColor5{
    background-color: #ece44e;
}
#divColor6{
    background-color: #6d579f;
}
#divColor7{
    background-color: #ec873b;
}
#divColor8{
    background-color: #feffff;
}




/*     PAGE TXT ENTRY     */

#divTxtEntry{
    width: 55%;
    height: 70%;
    margin: 10% auto;
    text-align:center;
}

#divTxtEntry textarea{
  width: 100%;
  height: 45%;
  margin: 1.5% 0;
}


#resultDivEntry{
    width: 55%;
    height: 70%;
    margin: 10% auto;
    text-align:center;
}

#resultDivEntry p{
  font-size: 1.4em;
}



/*     PAGE LOCATION     */

#aAfterLocation{
  display:none;
}

#locationSpa{
    width: 55%;
    height: 70%;
    margin: 20% auto;
    text-align:center;
}

#pWhereYouFrom{
  font-size: 2em;
}


#divError{
    display: none;
    font-size: 2em;
}

#loading1{
    animation-name: loadingFirstDot;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}


@keyframes loadingFirstDot {
    from{
    opacity: 0;
  }
  24%{
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
    to{
    opacity: 1;
  }
}
#loading2{
    animation-name: loadingSecondDot;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}


@keyframes loadingSecondDot {
    from{
    opacity: 0;
  }
  49%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
    to{
    opacity: 1;
  }
}
#loading3{
    animation-name: loadingThirdDot;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}


@keyframes loadingThirdDot {
    from{
    opacity: 0;
  }
  74%{
    opacity: 0;
  }
  75%{
    opacity: 1;
  }
    to{
    opacity: 1;
  }
}





/*     PAGE DESTINATION DRAG DROP     */




#zoneCharacter{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #b6ced8;
  padding: 10px;
  color: #2b2b2b;
  text-align:center;
}

#you{
    animation-name: animMe;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}


.divDestination{
  width: 50%;
  height: 50%;
  background-repeat: no-repeat;
  background-position: center;
  position:absolute;
}

#divDestination1{
  background-image: url(../img/destination1.jpg);
  top:0;
  left:0;
}

#divDestination2{
  background-image: url(../img/destination2.jpg);
  top:0;
  right:0;
}

#divDestination3{
  background-image: url(../img/destination3.jpg);
  bottom:0;
  left:0;
}

#divDestination4{
  background-image: url(../img/destination4.jpg);
  bottom:0;
  right:0;
}

.h3Dest{
  color: white;
  background-color: #2b2b2b;
  padding: 10px;
  position: absolute;
}

#h3Dest1{
  top: 1%;
  left: 1%;
}

#h3Dest2{
  top: 1%;
  right: 1%;
}

#h3Dest3{
  bottom: 1%;
  left: 1%;
}

#h3Dest4{
  bottom: 1%;
  right: 1%;
}


#sectionEnd{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  display: none;
  text-align:center;
}




@keyframes animMe {
    from{
    margin-right: 0%; transition-timing-function: ease-in-out;
  }
  25%{
    margin-right: 4%;
  }
  50%{
    margin-right:0%;
  }
  75%{
    margin-right: -4%;
  }
    to{
    margin-right: 0%; transition-timing-function: ease-in-out;
  }
}







/*     PAGE CONCLUSION     */


#end{
    text-align: center;
    width: 50%;
    margin: 5% auto;
}

#end h1{
    font-size: 2em;
}

#end h2{
    font-size: 2.5em;
}

#end p{
    font-size: 1.3em;
}

#end img{
    max-width: 100%;
}







/*     ANIMATION TRANSITION     */



.appear{
    animation-name: appear;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


@keyframes appear {
    from{
    opacity: 0;
} 
    to{
    opacity:1;
  }
}



.disappear{
    animation-name: disappear;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


@keyframes disappear {
    from{
    opacity: 1;
} 
    99%{
    opacity: 0;
    }
    to{
    display:none;
    opacity:0;
  }
}

/*     NO DISPLAY CLASS - (for once the transition is completed)     */

.noDisplay{
    display: none !important;
}