@import url("https://fonts.googleapis.com/css?family=Patrick+Hand");
  @import url('https://fonts.cdnfonts.com/css/purple-purse');

                
body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(images/back.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
opacity:0.4;
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

.header{font-family: Patrick Hand,Arial, Helvetica, sans-serif;	font-size: 50px;	 text-align: center; color:#144d75;	line-height:150% ; background:#dbde9c; border-style: solid;
  border-color: grey; margin: auto; width:60%;}
.caps{color:#7a210a; font-weight:bold;}
.smalltext{font-size:30px; color:#7a210a}
.pptext {font-family: 'Purple Purse', sans-serif; font-size: 25px; color: green;  padding-bottom: 85px;}

.sub {font-family: Patrick Hand,Arial, Helvetica, sans-serif;	font-size: 40px;	 text-align: center; color:#fff;	line-height:150% ; background-color:rgba(36, 124, 58, 0.5); border-style: solid;
  border-color: grey; margin: auto; width:50%;}
.sub a {font-family: Patrick Hand,Arial, Helvetica, sans-serif;	font-size: 20px;	 text-align: center; color:#247c3a; line-height:150% }
.sub a:hover {font-family: Patrick Hand,Arial, Helvetica, sans-serif;	font-size: 20px;	 text-align: center; color:#155463; line-height:150% }


.area {font-family: Patrick Hand,Arial, Helvetica, sans-serif;	font-size: 30px;	 text-align: center; color:#fff;	line-height:150% ; background-color:rgba(20, 17, 17, 0.5); border-style: solid;
  border-color: grey; margin: 10px auto 0px auto; width:40%;}

.howto {font-family: Arial, Helvetica, sans-serif;	font-size: 16px;	 text-align: center; color:#01015f;	line-height:150% ; background-color:rgba(230, 229, 255, 0.5);border-style: solid;
  border-color: grey; margin: auto; width:60%; text-align:left; padding: 10px; width:45%;}

.topbox {font-family: Arial, Helvetica, sans-serif;	font-size: 18px;	 text-align: center; background-color:rgba(219, 222, 156, 0.5); line-height:150% ;  border-style: solid;
  border-color: grey; margin: 4px}

.contbox {font-family: Arial, Helvetica, sans-serif;	font-size: 16px;	 text-align: center; color:#114063;	line-height:150%; background-color:rgba(212, 197, 192, 0.5); border-style: solid;
  border-color: grey; margin: 4px; padding:1px; }

.picbox {font-family: Arial, Helvetica, sans-serif;	font-size: 14px;	 text-align: center; color:#144d75;	line-height:150%; ; margin: 4px; padding:1px; }
.pix { display: block;  margin-left: auto;  margin-right: auto;  width: 90%;}
#lose {display:block;}
#replace {display:none;}
.gallery { margin: 10px 50px;


	}
.gallery img {
	transition: 1s;
	padding: 5px;
width: 200px;
	}
.gallery img:hover {
	filter: grayscale(100%);
	transform: scale(1.1);


}



/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF FIVE  */
.span_5_of_5 {
	width: 100%;
}
.span_4_of_5 {
	width: 79.68%;
}
.span_3_of_5 {
	width: 59.36%;
}
.span_2_of_5 {
	width: 39.04%;
}
.span_1_of_5 {
	width: 18.72%;
}
/* FOR MEDIUM SMALL SCREENS*/
@media only screen and (max-width: 1200px) {
.howto{width:56%}
/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF FIVE  */
.span_5_of_5 {
	width: 100%;
}
.span_4_of_5 {
	width: 79.68%;
}
.span_3_of_5 {
	width: 59.36%;
}
.span_2_of_5 {
	width: 39.04%;
}
.span_1_of_5 {
	width: 18.72%;
}
#replace {display:block;}
#lose {display:none;}
.header{font-size:35px}
.smalltext{font-size:25px}
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.howto{width:80%}
.area {font-family: Patrick Hand,Arial, Helvetica, sans-serif;	font-size: 30px;	 text-align: center; background-color:rgba(20, 17, 17, 0.5);	line-height:150% ;  border-style: solid;
  border-color: grey; margin: 10px auto 0px auto; width:40%;}


	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5 { width: 100%; }
. click{display:none}
.header{font-size:30px; width:85%;}
.area{font-size:25px; width:75%}
#lose {display:block;}
#replace {display:none;}
}
}