/*Code type: Cascade Stylesheet(CSS) & CSS3
Code done by: Salman Rahman Desh
E-mail: salmanrahmandesh@gmail.com*/



/****************Main body***************************/
body {
	width: 84%;
	background: url(../icon/background.jpg) !important;
	margin: 8% 8% 0;
	background-color: black;
	background-repeat: no-repeat !important; 						 	
	background-attachment: fixed !important; 	 	    	   
	background-size: cover !important;
	}
	
#home {
	background-color: white;
	color: black;
	border-bottom-left-radius: 10rem;

	}
#back {
	background-color: white;
	color: black;
	border-bottom-right-radius: 10rem;
	}
#back1 {
	background-color: white;
	color: black;
	border-bottom-right-radius: 10rem;
	border-bottom-left-radius: 10rem;
	}
#ctrl_button_home {
	font-family: open sans, calibri;
	font-weight: 100;
	font-size: 1rem;
	color: black;
	padding-top: 0.5rem;
	margin-top: -2rem;
	text-align: center;
	}
#ctrl_button_home:active {
	background-color: #09F;
	color: white;
	}
#ctrl_button_back:active {
	background-color: #09F;
	color: white;
	}
#ctrl_button_back {
	font-family: open sans, calibri;
	font-weight: 100;
	font-size: 1rem;
	color: black;
	margin-top: -2rem;
	padding-top: 0.5rem;
	text-align: center;
	}
/******************main.html**********************/	
/*logo*/
#logo {
	height: 20%;
	width: 20%;
	float: left;
	}
/*main page headline*/
#title {
	font-family: open sans, calibri;
	font-weight: 500;
	color: Black;
	opacity: 0.8;
	font-size: 1.4rem;
	padding-top: 2%;
	padding-left: 25%;
	}
/*second headline*/
h3 {
	font-family: open sans, calibri;
	margin-top: 2rem;
	font-weight: 100;
	color: black;
	opacity: 0.8;
	font-size: 1.5rem;
	text-align: center;
	}
/*button sector*/
#button {
	margin-top: 2rem;
	}
.button_right {
	background-color: white;
	height: 10%;
	width: 100%;
	opacity: 0.7;
	border-top-right-radius: 5rem;
	border-bottom-right-radius: 5rem;
	}
.button_left {
	background-color: white;
	height: 10%;
	width: 100%;
	opacity: 0.7;
	border-top-left-radius: 5rem;
	border-bottom-left-radius: 5rem;
	}
.button_name {
	font-size: 1rem;
	font-family: open sans, calibri;
	text-align: center;
	font-weight: 100;
	padding-top: 6%;
	padding-bottom: 6%;
	}
.button_right:active {
	opacity: 1;
	background-color: #09F;
	color: white;
	}
.button_left:active {
	opacity: 1;
	background-color: #09F;
	color: white;
	}
a {
	text-decoration: none;
	color: inherit;
	}
	
/**************************countries.html**********************************/	
/*first tab with country name*/
#tab1 {
	background-color: white;
	height: 100%;
	width: 100%;
	margin-top: -2.5rem;
	}
/*country name*/
#country {
	text-align: center;
	font-family: open sans, calibri;
	position: inherit;
	}
/*player photo*/
.player {
	height: 50px; 
	width: 45px; 
	margin-top:-1rem;
	border-radius: 100%;
	}
/*player table data*/
td {
	width: 15rem; 
	text-align:center;
	}
/*player table name*/
h5 {
	margin-top:-0.3rem; 
	font-family: open sans, calibri;
	font-weight: 100;
	}
/*player postion; table name*/
#position {
	font-family: open sans, calibri;
	font-weight: 500;
	color: Black;
	opacity: 0.8;
	font-size: 1rem;
	text-align: center;
	}
	
/***************************group.html*********************************/
/*inner page headline*/
#title1 {
	font-family: open sans, calibri;
	font-weight: 500;
	color: Black;
	opacity: 0.8;
	margin-top: 3rem;
	font-size: 1.4rem;
	text-align: center;
	}
/*group button details*/
#a_group, #b_group, #c_group, #d_group, #e_group, #f_group,
#g_group, #h_group {
	background-color: white;
	height: 10%;
	width: 80%;
	margin: -5% 10% 0%;
	opacity: 0.7;
	border-top-right-radius: 5rem;
	border-top-left-radius: 5rem;
	}
#a_group:hover {
	cursor: pointer;
	}
#b_group:hover {
	cursor: pointer;
	}
#c_group:hover {
	cursor: pointer;
	}
#d_group:hover {
	cursor: pointer;
	}
#e_group:hover {
	cursor: pointer;
	}
#f_group:hover {
	cursor: pointer;
	}
#g_group:hover {
	cursor: pointer;
	}
#h_group:hover {
	cursor: pointer;
	}
#a_group:active {
	background-color: #27B7E0;
	color: white;
	}
#b_group:active {
	background-color: #27B7E0;
	color: white;
	}
#c_group:active {
	background-color: #27B7E0;
	color: white;
	}
#d_group:active {
	background-color: #27B7E0;
	color: white;
	}
#e_group:active {
	background-color: #27B7E0;
	color: white;
	}
#f_group:active {
	background-color: #27B7E0;
	color: white;
	}
#g_group:active {
	background-color: #27B7E0;
	color: white;
	}	
#h_group:active {
	background-color: #27B7E0;
	color: white;
	}
.group_name {
	font-size: 1rem;
	text-align: center;
	font-family: open sans, calibri;
	font-weight: 100;
	padding-top: 6%;
	padding-bottom: 6%;
	}
/*flag details*/
#a_flag {
	background-color: #27B7E0;
	width: 67%;
	margin: 10% 10% 0%;
	margin-top: -0.5rem;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	border: 1rem solid #27B7E0;
	}
#b_flag {
	background-color: #27B7E0;
	width: 67%;
	margin: 10% 10% 0%;
	margin-top: -0.5rem;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	border: 1rem solid #27B7E0;
	}
#c_flag {
	background-color: #27B7E0;
	width: 67%;
	margin: 10% 10% 0%;
	margin-top: -0.5rem;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	border: 1rem solid #27B7E0;
	}
#d_flag {
	background-color: #27B7E0;
	width: 67%;
	margin: 10% 10% 0%;
	margin-top: -0.5rem;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	border: 1rem solid #27B7E0;
	}
#e_flag {
	background-color: #27B7E0;
	width: 67%;
	margin: 10% 10% 0%;
	margin-top: -0.5rem;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	border: 1rem solid #27B7E0;
	}
#f_flag {
	background-color: #27B7E0;
	width: 67%;
	margin: 10% 10% 0%;
	margin-top: -0.5rem;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	border: 1rem solid #27B7E0;
	}
#g_flag {
	background-color: #27B7E0;
	width: 67%;
	margin: 10% 10% 0%;
	margin-top: -0.5rem;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	border: 1rem solid #27B7E0;
	}
#h_flag {
	background-color: #27B7E0;
	width: 67%;
	margin: 10% 10% 0%;
	margin-top: -0.5rem;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	border: 1rem solid #27B7E0;
	}
.team_flag {
	height: 20px;
	width: 20px;
	border-radius: 100%;
	float: right;
	}
.team_name {
	font-family: open sans, calibri;
	font-size: 0.9rem;
	font-weight: 500;
	text-align: left;
	color: white;
}
.dif_flag {
	height: 20px;
	width: 20px;
	border-radius: 100%;
	float: right;
	margin-top:12%;
	}


/***********************schedule.html*************************/
#group_stage {
	background-color: #0080FF;
	color: white;
	}
#time_table {
	border-radius: 10%;
	height: 50%;
	margin-top: -1rem;
	}
#time {
	font-family: open sans, calibri;
	font-weight: 100;
	margin-top: -0.2rem;
	margin-bottom: -0.2rem;
	font-size: 90%;
	}
#time_position {
	font-family: open sans, calibri;
	font-weight: 500;
	color: Black;
	opacity: 0.8;
	margin-top: -0.3rem;
	font-size: 1rem;
	text-align: center;
	}
#round_16 {
	background-color: #408080;
	color: white;
	}
#quarter_final {
	background-color: #804040;
	color: white;
	}
#semi_final {
	background-color: #C93;
	color: white;
	}
#third_place {
	background-color: #936;
	color: white;
	}
#final {
	background-color: #639;
	color: white;
	}


/**********************player.html************************/
#player_photo {
	height: 5rem;
	width: 5rem;
	border-radius: 100rem;
	margin: 0% 35% 0%;
	border: 2px solid white;
	box-shadow: 0px 1px 2px 2px #333333;  
	}
#player_box {
	height: 13rem;
	width: 16rem;
	margin: 0% 0% 0%; 
	margin-top: -2.8rem;
	background-color: white;
	border: 2px solid white;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	}
#player_name {
	font-family: open sans, calibri;
	font-size: 0.9rem;
	font-weight: 600;
	padding-top: 20%;
	}
#player_details {
	font-family: open sans, calibri;
	font-size: 0.8rem;
	font-weight: 100;
	}
#position_player {
	font-family: open sans, calibri;
	font-weight: 500;
	color: Black;
	opacity: 0.8;
	font-size: 1rem;
	text-align: center;
	margin-top: -0.3rem;
	}
	
/********************stadium.html**********************/
#photo {
	z-index: 1;
	}
#details {
	z-index: 3;
	}

#stadium_photo {
	height: 10rem;
	width: 13rem;
	cursor: pointer;
	margin: -1rem 10% 0%;
	border: 4px solid white;
	border-top-left-radius: 2rem;
	border-bottom-left-radius: 2rem;
	border-top-right-radius: 2rem;
	border-bottom-right-radius: 2rem;
	}
#map_box {
	height: 14rem;
	width: 14rem;
	margin: -11rem 0% 0%; 
	background-color: white;
	border: 2px solid white;
	box-shadow: 0px 1px 4px 4px #333333;
	border-top-left-radius: 20%;
	border-top-right-radius: 20%;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	
	}
#stadium_box {
	z-index: 2;
	height: 4rem;
	width: 13rem;
	margin: 0% 0% 0%; 
	border: 4px solid  white;
	background-color: white;
	color: #000;
	border-top-left-radius: 2rem;
	border-bottom-left-radius: 2rem;
	border-top-right-radius: 2rem;
	border-bottom-right-radius: 2rem;
	}
#stadium_details {
	font-family: open sans, calibri;
	font-size: 0.8rem;
	font-weight: 100;
	}
#position_stadium {
	font-family: open sans, calibri;
	font-weight: 500;
	color: Black;
	font-size: 1rem;
	text-align: center;
	margin-top: -0%;
	}


/**************country.html*****************/
.country {
	border: 3px solid white;
	height: 45px; 
	width: 45px; 
	margin-top: -1rem;
	border-radius: 100%;
	box-shadow: 2px 2px 2px 2px gray;
	}
.country:active {
	box-shadow: 0px 0px 0px 0px;
	border: 3px solid #09F;
	}


/****************************about.html*********************/
#address {
	font-family: open sans, calibri;
	font-weight: 500;
	color: Black;
	opacity: 0.8;
	font-size: 0.8rem;
	text-align: center;
	margin-top: -1rem;
	}
#email {
	font-family: open sans, calibri;
	font-weight: 500;
	color: Black;
	opacity: 0.8;
	font-size: 0.9rem;
	text-align: center;
	margin-top: -1rem;
	}