/* Ensure the html element always takes up the full height of the browser window */

html {
background-image: url("../background/cntry.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
* {
   font-size: 30px;
	font-weight: bold;
	font-style: italic;
	font-family: Georgia, serif;
}
@-webkit-keyframes glowing {
	0% {border: yellow;-webkit-box-shadow: 0 0 3px yellow;}
	50% {border: orange;-webkit-box-shadow: 0 0 40px orange;}
	100% {border: pink;-webkit-box-shadow: 0 0 3px pink;}
}
@-moz-keyframes glowing {
	0% {border: yellow;-moz-box-shadow: 0 0 3px yellow;}
	50% {border: orange;-moz-box-shadow: 0 0 40px orange;}
	100% {border: pink;-moz-box-shadow: 0 0 3px yellow;}
}
@-o-keyframes glowing {
	0% {border: yellow;box-shadow: 0 0 3px yellow;}
	50% {border: orange;box-shadow: 0 0 40px orange;}
	100% {border: pink;box-shadow: 0 0 3px pink;}
}
@keyframes glowing {
	0% {border: gold;box-shadow: 0 0 30px darkred;}
	25% {border: yellow;box-shadow: 0 0 40px red;}
	50% {border: orange;box-shadow: 0 0 30px crimson;}
	75% {border: deeppink;box-shadow: 0 0 40px firebrick;}
	100% {border: red;box-shadow: 0 0 30px salmon;}
}
.calendar {
	-webkit-animation: glowing 500ms infinite;
	-moz-animation: glowing 500ms infinite;
	-o-animation: glowing 500ms infinite;
	animation: glowing 500ms infinite;
	background: url('../pics/calendar.png') no-repeat center center;
	color: black;
	padding: 0px 0px;
	border-radius: 40px;
	width: 250px;
	height: 100px;
}
.calendar:hover {
	background-color: firebrick;
	color: white;
	border: 4px solid cornsilk;
	transition: all .9s;
}
.category {
	background-color: transparent;
	color: black;
	border: 4px solid midnightblue;
	padding: 0px 0px;
	border-radius: 40px;
	font-size: 20px;
	width: 240px;
	height: 100px;
	transition: all .9s;
}
.category:hover {
	background-color: gold;
	border: 6px solid slategrey;
	color: black;
}
.qr_code {
	background: url('../pics/qrcode.png') no-repeat center center;
	color: black;
	border: 4px solid midnightblue;
	padding: 0px 0px;
	border-radius: 40px;
	font-size: 20px;
	width: 240px;
	height: 300px;
	transition: all .9s;
}
.qr_code:hover {
	background-color: gold;
	border: 6px solid slategrey;
	color: black;
}
.pastors {
	-webkit-animation: glowing 500ms infinite;
	-moz-animation: glowing 500ms infinite;
	-o-animation: glowing 500ms infinite;
	animation: glowing 500ms infinite;
	background: url('../pics/pastors.png') no-repeat center center;
	color: black;
	padding: 0px 0px;
	border-radius: 60px;
	width: 250px;
	height: 100px;
}
.pastors:hover {
	background-color: firebrick;
	color: white;
	border: 4px solid cornsilk;
	transition: all .9s;
}
.title {
	background: url('../pics/title.png') no-repeat center center;
	color:transparent;
	padding: 0px 0px;
    border: 4px solid cornsilk;
	border-radius: 60px;
	width: 900px;
	height: 150px;
}
.international {
	background: url('../pics/international.png') no-repeat center center;
	color:transparent;
	padding: 0px 0px;
    border: 4px solid transparent;
	border-radius: 60px;
	width: 700px;
	height: 150px;
}
.inclusion {
	-webkit-animation: glowing 500ms infinite;
	-moz-animation: glowing 500ms infinite;
	-o-animation: glowing 500ms infinite;
	animation: glowing 500ms infinite;
	background: url('../pics/inclusion.png') no-repeat center center;
	color: black;
	padding: 0px 0px;
	border-radius: 60px;
	width: 250px;
	height: 100px;
}
.inclusion:hover {
	background-color: firebrick;
	color: white;
	border: 4px solid cornsilk;
	transition: all .9s;
}
.clock {
	-webkit-animation: glowing 500ms infinite;
	-moz-animation: glowing 500ms infinite;
	-o-animation: glowing 500ms infinite;
	animation: glowing 500ms infinite;
	background: url('../pics/clock.png') no-repeat center center;
	color: black;
	padding: 0px 0px;
	border-radius: 60px;
	width: 110px;
	height: 110px;
}
.clock:hover {
	background-color: firebrick;
	color: white;
	border: 4px solid cornsilk;
	transition: all .9s;
}
.faq {
	-webkit-animation: glowing 500ms infinite;
	-moz-animation: glowing 500ms infinite;
	-o-animation: glowing 500ms infinite;
	animation: glowing 500ms infinite;
	background: url('../pics/faq.png') no-repeat center center;
	color: black;
	padding: 0px 0px;
	border-radius: 40px;
	width: 250px;
	height: 100px;
}
.faq:hover {
	background-color: cornsilk;
	color: white;
	border: 4px solid cornsilk;
	transition: all .9s;
}
.glow {
		-webkit-animation: glowing 500ms infinite;
	-moz-animation: glowing 500ms infinite;
	-o-animation: glowing 500ms infinite;
	animation: glowing 500ms infinite;
	background-color: antiquewhite;
	border: 6px solid midnightblue;
	color: black;
	padding: 0px 0px;
	border-radius: 40px;
	width: 195px;
	height: 120px;
}
.glow:hover {
	background-color: firebrick;
	color: white;
	border: 4px solid cornsilk;
	transition: all .9s;
}
.guest {
	-webkit-animation: glowing 450ms infinite;
	-moz-animation: glowing 450ms infinite;
	-o-animation: glowing 450ms infinite;
	animation: glowing 450ms infinite;
	background: url('../pics/guest.png') no-repeat center center;
	color: black;
	padding: 0px 0px;
	border-radius: 40px;
	width: 250px;
	height: 100px;
}
 /* Cities */
.online {
	background-color: transparent;
	border: 6px solid crimson;
	color: black;
	padding: 0px 0px;
	border-radius: 40px;
    font-size: 23px;
	font-weight: bold;
	font-style: italic;
	font-family: Georgia, serif;
	width: 250px;
	height: 100px;
    }
.online:hover {
	background-color: firebrick;
	color: white;
	border: 4px solid cornsilk;
}
.city {
	background-color: transparent;
	border: 4px solid midnightblue;
	color: black; font-family: Georgia;
	font-size: 23px;
	font-weight: bold;
	font-style: italic;
	font-family: Georgia, serif;
	padding: 0px 0px;
	border-radius: 50px;
	width: 320px;
	height: 100px;
    }
.city:hover {
	background-color: firebrick;
	color: white;
	border: 4px solid cornsilk;
}
 /* routing */
.map {
	background-color: transparent;
	border: 4px solid darkgreen;
	color: black; 
  	font-size: 23px;
	font-weight: bold;
	font-style: italic;
	font-family: Georgia, serif;
	padding: 0px 0px;
	border-radius: 50px;
	width: 300px;
	height: 100px;
   }
.map:hover {
	background-color: firebrick;
	color: white;
	border: 6px solid cornsilk;
}
.marquee {
	-webkit-animation: glowing 500ms infinite;
	-moz-animation: glowing 500ms infinite;
	-o-animation: glowing 500ms infinite;
	animation: glowing 500ms infinite;
	background-color: antiquewhite;
	color: black;
	font-size: 23px;
	font-weight: bold;
	font-style: italic;
	font-family: Georgia, serif;
	border: 4px solid red;
	padding: 10px 10px;
	border-radius: 50px;
	width: 990px;
	height: 40px
}
 /* State */
.statemap {
	background-color: transparent;
	border: 4px solid transparent;
	color: black; 
    font-size: 23px;
	font-weight: bold;
	font-style: italic;
	font-family: Georgia, serif;
    padding: 0px 0px;
	border-radius: 50px;
	width: 200px;
	height: 200px;
   }
.state {
	background-color: transparent;
	border: 6px solid midnightblue;
	color: black;
	padding: 0px 0px;
	border-radius: 40px;
    font-size: 23px;
	font-weight: bold;
	font-style: italic;
	font-family: Georgia, serif;
	width: 250px;
	height: 100px;
  
}
.state:hover {
	background-color: firebrick;
	color: white;
	border: 4px solid cornsilk;
	transition: all .9s;
}
.tcam {
border: 2px solid midnightblue;
	background: url('../pics/tcam.png') no-repeat center center;
	color: black;
	padding: 0px 0px;
	border-radius: 40px;
	width: 250px;
	height: 100px;
}
.note {
	-webkit-animation: glowing 500ms infinite;
	-moz-animation: glowing 500ms infinite;
	-o-animation: glowing 500ms infinite;
	animation: glowing 500ms infinite;
	border-radius: 50px;
	background-color: almondwhite;
	border: 4px solid midnightblue;
	color: black;
	padding: 2px 2px;
	font-size: 23px;
	font-weight: bold;
	font-style: italic;
	font-family: Georgia, serif;
	width: auto;
	height: auto;
}
.yupdate {
	background: url('../pics/update_y.png') no-repeat center center;
	color: black;
	font-size: 23px;
	font-weight: bold;
	font-style: italic;
	padding: 0px 0px;
	border-radius: 60px;
	width: 100px;
	height: 100px;
}
.refresh {
	background: url('../pics/redresh2.png') no-repeat center center;
	color: black;
	font-size: 23px;
	font-weight: bold;
	font-style: italic;
	padding: 0px 0px;
	border-radius: 60px;
	width: 100px;
	height: 100px;
}
.weather {
	background-color: transparent;
	color: black;
	padding: 2px 2px;
	border-radius: 20px;
    font-size: 23px;
	font-weight: bold;
	font-style: italic;
	font-family: Georgia, serif;
	width: auto;
	height: auto;
}
.blank {
	background-color: antiquewhite;
	border: 4px solid darkgreen;
	color: black;
	padding: 5px 5px;
	border-radius: 20px;
	width: 190px;
	height: 50px;
	transition-duration: 0.8s
}
.submit {
	background-color: crimson;
	border: 4px solid maroon;
	color: black;
	padding: 5px 5px;
	border-radius: 50px;
	width: 190px;
	height: 60px;
	transition-duration: 0.8s
}
.submit:hover {
	background-color: darkred;
	color: navajowhite;
}