/**
* Wordfind.js 0.0.1
* (c) 2012 Bill, BunKat LLC.
* Wordfind is freely distributable under the MIT license.
* For all details and documentation:
*     https://github.com/bunkat/wordfind
*/

@font-face {
  font-family: Handlee_Regular;
  src: url(../fonts/Handlee-Regular.eot);
  src: url(../fonts/Handlee-Regular.eot?#iefix) format("embedded-opentype"),
    url(../fonts/Handlee-Regular.woff2) format("woff2"),
    url(../fonts/Handlee-Regular.woff) format("woff"),
    url(../fonts/Handlee-Regular.ttf) format("truetype"),
    url(../fonts/Handlee-Regular.svg#Handlee-Regular) format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.puzzleWrap {
    width: 100%;
    margin: 50px auto 0;
    position: relative;
    z-index: 999;
}
.modal-backdrop {
    z-index: 9;
}

.contentText {
  font: 22pt sans-serif;
  margin: 20px 20px 0px 45px;
  color: #6891ad;
}

/**
* Styles for the puzzle
*/
#puzzle {
    padding: 0;
    margin: 0px auto;
    width: max-content;
    border: 1px solid #971518;
	background:url(../images/planebg.webp) repeat-y;
	background-size: contain;
}

#puzzle div {
  width: 100%;
  margin: 0 auto;
}

/* style for each square in the puzzle */
#puzzle .puzzleSquare {
  height: 50px;
  width: 50px;
  text-transform: uppercase;
  border: 0;
  outline: none;
  font: 1em sans-serif;
  color: #193d6c;
  border:1px solid #db620a;
  background: transparent;
  font-family: Handlee_Regular;
  font-weight:600;
  font-size:28px;
}

button::-moz-focus-inner {
  border: none;
  outline: none;
}

/* indicates when a square has been selected */
#puzzle .selected {
  color: #ffffff;
  background:#db620a;
}
#puzzle .selected:focus {
  border: none;
}

/* indicates that the square is part of a word that has been found */
#puzzle .found {
   color: #ffffff;
  background:#db620a;
}
#puzzle .puzzleSquare.found{border:1px solid #000000;}

#puzzle .solved {
  color: #ffffff;
  background:#db620a;
}

/* indicates that all words have been found */
#puzzle .complete {
  background-color: green;
  color:#000000;
}

/**
* Styles for the word list
*/
.words {
  color: #6891ad;
  text-align:center;
}

.words ul {
  list-style-type: none;
  padding-left: 0px;
  display:none;
}

.words li {
  padding: 0 0 7px;
  font: 1em sans-serif;
}

/* indicates that the word has been found */
.words .wordFound {
  text-decoration: line-through;
  color: #ee5426;
}

/**
* Styles for the button
*/
#solve {
  margin: 30px 5px 0px 5px;
  background: transparent;
  color: #ee5426;
  padding: 5px 10px;
  border: 2px solid #ee5426;
  border-radius: 25px;
  transition: opacity 0.25s ease-in;
  cursor:pointer;
  font-family: Handlee_Regular;font-size:18px;font-weight:600;
}
#hint {
  margin: 30px 5px 0px 5px;
  background: transparent;
  color: #ee5426;
  padding: 5px 10px;
  border: 2px solid #ee5426;
  border-radius: 25px;
  transition: opacity 0.25s ease-in;
  cursor:pointer;
  font-family: Handlee_Regular;font-size:18px;font-weight:600;
}

#hint:focus, #solve:focus {
  outline:none;
}


.leftword p{font-size:18px;color:#000000;text-align:center;margin-bottom:20px;}
.leftword p span{border:1px solid #ee5426;padding:0px 5px;}
.bottomtext p, .bottomtext  div, .bottomtext  h4 
{font-family: Handlee_Regular;font-size:24px;font-weight:600;margin-bottom:10px;text-transform: capitalize;}

.bottomtext{margin-bottom:40px;}
.bottomtext p span, .bottomtext .contentTextHead {color: #ee5426;}
.bottomtext .contentTextHead {text-align: center; margin:0 auto;}
.paradivgame p{margin-bottom:20px;}
.paradivgame p{  font-family: Handlee_Regular;font-size:28px;font-weight:600; color: #193d6c;}
.modal-header{padding:15px 15px 0px 15px;margin-bottom:0px !important;}
.contentText {
    margin: 0px;
}
.modal.fade .modal-dialog {
    transform: translateY(0vh) !important;
}

.modal-body{padding:5px 15px 15px 15px;}
.modal {
    position: absolute;
    top: auto;
    right: 0;
    bottom: -54%;
    left: 0;
    z-index: 1050;
    overflow: hidden;
    outline: 0;
}
.feedbacktop {
    padding-bottom: 250px;
}
.contentText{text-transform:inherit !important;}
.contentText {
    font-family: Handlee_Regular;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: capitalize;
    line-height: 24px;
    text-align: justify;
}
.feedbacktopswip {
    padding-top: 200px;
    padding-bottom: 300px;
}

.outspace{width:39%;margin:0px auto;        padding-bottom: 10px;}
.leftword p {
    margin-bottom: 0px;
}
#solve {
    margin: 15px 5px 0px 5px;
    padding: 4px 8px;
    font-size: 16px;
}
    #hint {
        margin: 0px 0px 0px 0px;
        padding: 3px 20px;
        font-size: 16px;
    }

@media (max-width: 530px) {
	#puzzle .puzzleSquare {
    width: 14.28%;
	height:auto;
	padding-top: 4px;
	}
	#puzzle {
    width: 85%;
}
#puzzle .puzzleSquare {
    font-size: 20px;
}
.bottomtext p {
margin: 10px 0px 0px 0px;
}

.bottomtext p {
    font-size: 22px;
}
.paradivgame p{ font-size:18px;        margin-bottom: 11px;}


.modal.fade .modal-dialog {
    transform: translateY(0vh) !important;
}

.modal-body{padding:5px 10px 0px 10px;}
    .modal {
        top: 494px;
        height: 40vh;
    }
.contentText{text-transform:inherit !important;}
.contentText {
    font-family: Handlee_Regular;
    font-size: 18px !important;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: capitalize;
    line-height: 22px;
    text-align: justify;
}
.puzzleWrap {
    margin: 0px auto 0;
}
.leftword p {
    margin-bottom: 0px;
}
#solve {
    margin: 15px 5px 0px 5px;
    padding: 4px 8px;
    font-size: 16px;
}
    #hint {
        margin: 0px 0px 0px 0px;
        padding: 3px 20px;
        font-size: 16px;
    }
.bottomtext h4 {
    font-size: 22px;
}
    .leftword p {
        font-size: 16px;
        line-height: 33px;
    }
	.feedbacktopswip {
    padding-top: 100px;
    padding-bottom: 40px;
}

.outspace{width:85%;margin:0px auto;        padding-bottom: 10px;}

	}