*{
margin:0;
padding:0;
}

body{
width:920px;
background:#ccc;
border:1px solid red;
}


#term-defs{
	background:yellow;
	padding-top:5em;
	text-align:center;
	padding-left:1em;
	padding-right:1em;
	padding-bottom:.5em;
}


#loging{
	position:absolute;
}


.menu-container{
	background:white;
}

.container{
margin:5px auto;
padding:2px 2px;
width:100%;
background:#c722d5;
border-radius:10px 10px 10px 10px;
}


.container2{
margin:8px auto;
width:95%;
padding:10px;
background:#AAECC5;
border-radius:10px 10px 10px 10px;
}

#popupMain{
	height:400px;
	width:400px;
	position:fixed;
	background:rgba(255,255,255,0.1);
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	font-size:20px;
	z-index:1001;
}

#popupMain h2{
	color:blue;
}

#popupMain:hover{
	background:rgba(255,255,255,0.3);
}

#fff{
	padding:10px;
	position:relative;

	background:rgba(255,255,255,0.1);
	
	font-size:20px;
	
}

#fff h2{
	color:blue;
}




tabel{
background:yellow;
}

th{
background:#F0F245;
padding:5px;
color:#f20f0f;
}

td{
background:blue;
padding:5px;
color:white;
}

.upper{
padding:10px;
background:gray;
margin:20px;
border-radius:35px 0px 35px 0px;
}

.middle:{
background:gray;
padding:10px;
border-radius:10px;
margin:5px;
float:left;
}

.left{
width:27%;
background:gray;
padding:10px;
border-radius:10px;
margin:5px;
float:left;
}

img{
height:30px;
width:30px;
border-radius:50px;
}

img:hover{
height:100%;
width:100%;
transition:3s;
}


.loginheader{
	width:30%;
	margin:50px auto 0px;
	color:white;
	background:#5f9ea0;
	text-align:center;
	border:1px solid #b0c4de;
	border-bottom:none;
	border-radius: 10px 10px 0px 0px;
	padding:20px;
}


#serviceDetails{
	background:#ead9f7;;
	border:2px;
	padding:3px;
}


#contactDetails{
	border:2px;
	padding:3px;
	background:#89bf89c2;
}


.input-group{
	padding:3px;
	font-size:20px;
	border:1px solid;
	
}

.input-group label{
	font-size:30px;
	color:green;
}

.input-group a{
	font-size:30px;
	color:red;
}

.input-group input{
	height:30px;
	width:93%;
	padding:5px 10px;
	font-size:16px;
	border-radius:5px;
	border:1px solid gray;
	
}

.input-group button{
	padding:10px;
	font-size:16px;
	color:white;
	background:#5f9ea0;
	border:none;
	border-radius:5px;

}

.pass{
font-size:20px;
color:navy;

}


.btn{
padding:10px;
font-size:16px;
color:red;
background:#5f9ea0;
border:none;
border-radius:5px;
}


@media screen and (max-width:959px){
	
body{
background:#ccc;
border:1px solid red;
width:600px;
}

#term-defs{
	background:yellow;
	padding-top:6em;
	text-align:center;
	padding-left:1em;
	padding-right:1em;
	padding-bottom:.5em;
}


#left-column{
	width:55%;
	
	
}

#right-column{
	width:40%;
	

}
#ttx{
	font-size:20px;

}

#popupMain{
	height:90%;
	width:90%;
	
}

}



@media screen and (max-width:440px){
	
body{
background:#ccc;
border:1px solid red;
width:600px;
}

#term-defs{
	background:yellow;
	padding-top:6em;
	text-align:center;
	padding-left:1em;
	padding-right:1em;
	padding-bottom:.5em;
}

#left-column{
	width:100%;
	
	
}

#right-column{
	width:100%;
	
	
	
}
#btn {
	width:80px;
	font-size :18px;
	height:30px;
	
}

#ttx{
	font-size:20px;

}


#popupMain{
	height:90%;
	width:90%;
	
}
}

@media screen and (max-width:350px){
	
body{
background:#ccc;
border:1px solid red;
width:300px;
}

#term-defs{
	background:yellow;
	padding-top:6em;
	text-align:center;
	padding-left:1em;
	padding-right:1em;
	padding-bottom:.5em;
}

#left-column{
	width:100%;
	
	
}

#right-column{
	width:100%;
	
	
	
}
#btn {
	width:80px;
	font-size :18px;
	height:30px;
	
}

#ttx{
	font-size:20px;

}


#popupMain{
	height:90%;
	width:90%;
	
}




}