/*---------------------------RESET-------------------------------*/
*{
	margin: 0;
	padding: 0;
}

/*-----------------------------------MAIN PAGE BACKGROUND--------------------------*/

html { 
  max-width: 2000px;
  width: 100%;
  min-height: 1450px;
  height: auto;
  background: url(img12.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body{
	font: 14px Helmet, Freesans, sans-serif;
}

/*h1{
	font-size: 3em;
	line-height: 1em;
	margin-bottom: .5em;
}*/

p {
	font-size: 22px;
	margin: 0;
	font-weight: bold;
	color: white;
}

h1 {
	color: white;
}

#particles-js {
	/*background-color: black;*/
	position: absolute;
	min-height: 1450px;
	height: 100%;
	max-width: 2000px;
	width: 100%;
	background-size: cover;
	background-position: center;
}

/*-------------------------------------------------MAIN CONTAINER-------------------------------------------------*/
.covid19-container{
	/*border: 10px solid white;*/
	color: white;
	max-width: 880px;
	width: 100%;
/*	height: 100%;*/
	/*margin: 0 auto;*/
	position: absolute;
	left: 21%;
  	/*margin-left: -10px;*/
	/*left: 27%;
  	margin-left: -67px;*/
	/*top: 10px;
	left: 27%;
	padding-bottom: 100px;*/
}

.covid19-container h1{
	font-size: 3em;
	margin-bottom: 5%;
	border-bottom: 5px solid white;
	padding: 15px 0;
	/*width: 100%;*/
	text-align: center;
}

.indexCountry{
	font-size: 1.75em;
	text-align: center;
}

/*-------------------------------------UPPER DETAIL------------------------------*/

.upper_detail {
	/*display: flex;
	text-align: center; 
	margin: 13px 30px 20px 0; */
	/*margin: 5px 0 10px 50px;*/
	border: 5px solid white;
	position: relative;
	width: 100%;
	margin: 5% auto;
}

.upper_detail .up{
	width: 90%;
	margin: 2% auto;
	/*border: 3px solid white;*/
	display: flex;
}

.upper_detail .up p{
	display: block;
	font-size: 1.50em;
	padding: 3px 22px;
	border-radius: 10px;
	margin: 3% 5%;
}

.indexTotalCases{
	background: orange;
	/*padding: 3px;*/
}

.indexRecovered{
	background: green;
}

.upper_detail .down{
	width: 90%;
	margin: 2% auto;
	/*border: 3px solid white;*/
	display: flex;
}

.upper_detail .down p{
	display: block;
	font-size: 1.50em;
	padding: 3px 22px;
	border-radius: 10px;
	margin: 3% 5%;
}

.indexActiveCases{
	background: blue;
}

.indexDeaths{
	background: red;
}

/*-------------------------------------DROP DOWN------------------------------------*/

.indexUpdatedTime{
	font-size: 1em;
	font-family: Courier New;
	color: white;
	font-weight: bold;
	text-align: center;
	position: relative;
}

.indexDropDown{
	border: 5px solid white;
	width: 100%;
	margin: 5% auto;
	position: relative;
	/*margin: 2px 23px;*/
}

.indexDropDown label{
	padding: 0 3% 0 5%;
	font-size: 1.50em;
	color: white;
}

.indexDropDown select{
	background: none;
	width: 40%;
	font-size: 1.4em;
	margin: 12px 0;
	padding: 1.15%;
	border-bottom: 2px solid white;
	border-radius: 8px;
	outline: none;
	color: white;
}

.indexDropDown select option{
	color: black;
}

.indexBtn{
	color: white;
	cursor: pointer;
	outline: none;
/*	width: 25%;
*/	margin: 0 0 0 5%;
	padding: 1.15%;
	border: 2px solid white;
	border-radius: 8px;
	background: none;
	font-size: 16px;
	font-weight: bold;
}

.indexBtn:hover{
	opacity: 0.9;
	color: black;
	background: white;
}

.indexBtn:active {
    background-color: orange;
    box-shadow: 0 5px gray;
    transform: translateY(2px);
 }

/*-------------------------------------MIDDLE DETAIL--------------------------------*/

.middle_detail {
	/*display: flex;
	text-align: center; */
	border: 5px solid white;
	position: relative;
	width: 100%;
	margin: 5% auto;
}

.indexState{
	font-size: 1.75em;
	text-align: center;
}

.middle_detail .up{
	width: 90%;
	margin: 2% auto;
	/*border: 3px solid white;*/
	display: flex;
}

.middle_detail .up p{
	display: block;
	font-size: 1.50em;
	padding: 3px 22px;
	border-radius: 10px;
	margin: 3% 5%;
}

.indexStateTotalCases{
	background: orange;
}

.indexStateRecovered{
	background: green;
}

.middle_detail .down{
	width: 90%;
	margin: 2% auto;
	/*border: 3px solid white;*/
	display: flex;
}

.middle_detail .down p{
	display: block;
	font-size: 1.50em;
	padding: 3px 22px;
	border-radius: 10px;
	margin: 3% 5%;
}

.indexStateTotalInfected{
	background: blue;
}

.indexStateDeceased{
	background: red;
}

/*------------------------------------DISTRICT SEARCH---------------------------------*/

.DistrictSearch{
	/*text-align: center;*/
	border: 5px solid white;
	position: relative;
	width: 100%;
	margin: 5% auto;
}

.DistrictSearch label{
	padding: 0 3% 0 5%;
	font-size: 1.50em;
	color: white;
}

.DistrictSearch select{
	background: none;
	width: 40%;
	font-size: 1.4em;
	margin: 12px 0;
	padding: 1.15%;
	border-bottom: 2px solid white;
	border-radius: 8px;
	outline: none;
	color: white;
}

.DistrictSearch select option{
	color: black;
}

.indexSearchBtn{
	color: white;
	cursor: pointer;
	outline: none;
/*	width: 25%;
*/	margin: 0 0 0 5%;
	padding: 1.15%;
	border: 2px solid white;
	border-radius: 8px;
	background: none;
	font-size: 16px;
	font-weight: bold;
}

.indexSearchBtn:hover{
	opacity: 0.9;
	color: black;
	background: white;
}

.indexSearchBtn:active {
    background-color: orange;
    box-shadow: 0 5px gray;
    transform: translateY(2px);
 }

 /*---------------------------------LOWER DETAIL-----------------------------*/

.lower_detail {
	/*display: flex;
	text-align: center; */
	border: 5px solid white;
	position: relative;
	width: 100%;
	margin: 5% auto;
}

.indexDistrict{
	font-size: 1.75em;
	text-align: center;
}

.lower_detail .up{
	width: 90%;
	margin: 2% auto;
	/*border: 3px solid white;*/
	display: flex;
}

.lower_detail .up p{
	display: block;
	font-size: 1.50em;
	padding: 3px 22px;
	border-radius: 10px;
	margin: 3% 5%;
}

.indexDistrictConfirmed{
	background: orange;
}

.indexDistrictRecovered{
	background: green;
}

.lower_detail .down{
	width: 90%;
	margin: 2% auto;
	/*border: 3px solid white;*/
	display: flex;
}

.lower_detail .down p{
	display: block;
	font-size: 1.50em;
	padding: 3px 22px;
	border-radius: 10px;
	margin: 3% 5%;
}

.indexDistrictActive{
	background: blue;
}

.indexDistrictDeceased{
	background: red;
}

.indexDistrictErrorCase{
	text-align: center;
}

/*---------------------------------------FOOTER---------------------------------------*/
footer{
	background: white;
	position: fixed;
	bottom: 0;
	/*border: 2px solid white;*/
}
.footer-distributed{
	background color: white;
	/*box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;*/
	width: 100%;
	/*text-align: left;*/
	justify-content: center;
 	display: flex;
	/*padding: 1.40%;*/
	padding: 13px;
	/*margin-top: 80px;*/
}
.footer-distributed p{
	font: bold 30px sans-serif;
	color: black;
	margin-right: 2%;
}

.fa {
  padding: 1.2% 0.5%; 
  margin: 0.1% 0.1%;
  font-size: 30px;
  width: 5%;
  text-align: center;
  text-decoration: none;
  /*border-radius: 50%;*/
}

.fa:hover {
    opacity: 0.7;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
  margin-right: 0.5%;
}

.fa-youtube {
  background: #bb0000;
  color: white;
  margin-right: 0.5%;
}

.fa-instagram {
  background: #125688;
  color: white;
  margin-right: 0.5%;
}

.fa-facebook {
  background: #3B5998;
  color: white;
  margin-right: 0.5%;
}

/*------------------------------MEDIA QUERY------------------------------*/
@media (max-width: 880px) {
 
	.covid19-container{
		width: 98%;
		height: auto; 
		left: 0%;
		margin: 0 auto;
	}

	body{
		font: 11px Helmet, Freesans, sans-serif;
	}

	

	.footer-distributed {
		/*text-align: center;
		justify-content: center;
		text-align: left;
		float: left;
		padding: 12px;*/
		padding: 12px 5%;
    	justify-content: left;
	}

	.footer-distributed p{
		font: bold 16px sans-serif;
		color: black;
		margin-right: 2%;
	}
}