*{
	margin:0;
	padding:0;
}
.table-box
{
	margin:50px auto;
}
.table-row
{
	
	display:table;
	width:95%;
	margin:10px auto;
	//font-family:sans-sarif;
	background:transparent;
	padding:12px 0;
	color:#555;
	//font-size:18px;
	box-shadow:0 1px 4px 0 rgba(0,0,50,0.3);
}
.table-cell1
{
	display:table-cell;
	width:15%;
	text-align:center;
	padding:4px 0;
	border-right:1px solid #d6d4d4;
	vertical-align:middle;
}
.table-cell2
{
	display:table-cell;
	width:60%;
	text-align:center;
	padding:4px 0;
	border-right:1px solid #d6d4d4;
	vertical-align:middle;
}
.table-cell3
{
	display:table-cell;
	width:25%;
	text-align:center;
	padding:4px 0;
	border-right:1px solid #d6d4d4;
	vertical-align:middle;
}
.table-head
{
	background:#8665f7;
	box-shadow:none;
	color:#fff;
	font-weight:600;
}
.table-head .table-cell1
{
	border-right:none;
}
.table-head .table-cell2
{
	border-right:none;
}
.paragraph
{
	text-align:left;
	padding-left:30px;
	padding-right:30px;
}
.topic
{
	font-size:25px;
	font-weight:bold;
	padding-left:30px;
}

.content-set
{
	//padding-left:20px;
}
@media only screen and (max-width: 380px) {
 .table-box
{
	margin:0;
}
.table-row
{
	
	display:table;
	width:100%;
	margin:0;
	//font-family:sans-sarif;
	background:transparent;
	padding: 0;
	color:#555;
	//font-size:18px;
	box-shadow:0 1px 4px 0 rgba(0,0,50,0.3);
}
.table-cell1
{
	display:table-cell;
	width:15%;
	text-align:center;
	padding:0;
	border-right:1px solid #d6d4d4;
	vertical-align:middle;
}
.table-cell2
{
	display:table-cell;
	width:65%;
	text-align:center;
	padding:0;
	border-right:1px solid #d6d4d4;
	vertical-align:middle;
}
.table-cell3
{
	display:table-cell;
	width:25%;
	text-align:center;
	padding:0;
	border-right:1px solid #d6d4d4;
	vertical-align:middle;
}
.table-head
{
	background:#8665f7;
	box-shadow:none;
	color:#fff;
	font-weight:600;
}
.table-head .table-cell1
{
	border-right:none;
}
.table-head .table-cell2
{
	border-right:none;
}
.paragraph
{
	text-align:left;
	padding-left:0;
	padding-right:0;
}
.topic
{
	font-size:15px;
	font-weight:bold;
	padding-left:0;
}

.content-set
{
	//padding-left:20px;
} 
}
/* ////////// bottom to top /////////////////////*/
.b2
{
	width:40px;
	height:40px;
	position:fixed;
	bottom:15px;
	right:15px;
	cursor:pointer;
	z-index:5;
}
.wh-logo
{
}
.wh-num
{	
}

.other
{
	text-align:center;
	padding-bottom:-50px;
}


/* ////////////form/////////// */

.class
{ 
    position:relative:
	width:-100%;
	padding:20px;
	background-image:linear-gradient(to right,#ff5722,#ff9800);
}
.register-left
{
	width:40%;
	text-align:center;
	color:#fff;
	padding:30px;
	margin-top:270px; !important;
	margin-right:600px; !important;
}
.register-left img
{
	width:200px;
	margin-top:-150px; !important;
	float:right;
	margin-right:140px; !important;
	padding-left:20px;
	animation:mover 2s infinite alternate;
	
}
.register-left padding 
{
	padding 20px 20px 0;
}

.register-left .btn-primary
{
	border-radius:1.5rem;
	width:100px;
	height:40px;
	background:#f8f8f8;
	font-weight:600;
	color:#555;
	margin-top:20px;
	padding:10px;
}
.register-left .btn-primary:hover
{
	background:	#FF0022;
	color:white;
	font-wait:bold;
}
.register
{
	
	width:50%;
	float:right;
	border:none;
	background:#f8f8f8;
	border-top-left-radius:10% 50%;
	border-bottom-left-radius:10% 50%;
	padding:50px;
	margin-top:-470px; !important;
	margin-right:70px; !important;
    margin-bottom:50px; !important;
	
}
.register
{
	padding:50px;
}
h4{
	color:black;
	font-wait:bold;
	font-style: italic;
}

.submit
{
	border-top-left-radius:20px 20px;
	border-bottom-left-radius:20px 20px;
	width:170px;
	height:35px;
	background:#ff9800;
	font-weight:600;
	color:#fff;
	margin-top:20px;
	padding:10px;
	float:right;
	
}
.submit:hover
{
	background:	#FF0022;
	color:black;
	font-wait:bold;
}

@keyframes mover
{
	0%{transform:translateY(-50px);}
	100%{transform:translateX(150px);}
}
/* ////////////// input box ///////// */
#name
{
	border-top-left-radius:20px 20px;
	border-bottom-left-radius:20px 20px;
	height:50px;
}
#testarea
{
	
	border-top-left-radius:20px 20px;
	border-bottom-left-radius:20px 20px;
	height:100px;
	padding-bottom:30px;
}
.p{
font-style:italic;
text-align:center;
//padding-left:30px;
	//padding-right:50px;
}
/*//////////validation ////////////////////*/
#message
{
	color:white;
	background-image:linear-gradient(to left,#ff5722,#ff9800);
	font-size:15px;
	font-style:italic;
	float:right;
	//padding:3px;
}


.btn {
  background-color: #CCC; /* Blue background */
  border: none; /* Remove borders */
  color:red; /* White text */
  padding: 8px 10px;  /* Some padding */
  border-radius:50%;
  font-size: 20px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

/* Darker background on mouse-over */
.btn:hover {
  background-color:#4e97cc;
  color:white;
}


.inline-list .effect:before{
	content:attr(data-tooltip);
	width:150px;
	height:35px;
	background:red;
	color:white;
	position:absolute;
	top:-40px;
	left:150px;
	border-radius:15px;
	line-height:45px;
	text-transform:uppercase;
	text-align:center;
	font-weight:600;
	font-size:15px;
	opacity:0;
	transition:all 0.5s ease;
}
.inline-list .effect:after{
	content:"";
	position:absolute;
	top:-8px;
	left:210px;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:10px solid red;
	border-bottom:10px solid transparent;
	opacity:0;
	transition:all 0.5s ease;
}
.inline-list .effect:hover:before,
.inline-list .effect:hover:after{
	opacity:1;
    transition:all 0.5s ease;
}
@media only screen and (max-width: 600px)
 {
.inline-list .effect:before{
	content:attr(data-tooltip);
	width:100px;
	height:30px;
	background:red;
	color:white;
	position:absolute;
	top:-35px;
	left:180px;
	border-radius:15px;
	line-height:35px;
	//text-transform:uppercase;
	text-align:center;
	font-size:10px;
	//font-weight:300;
	opacity:0;
	transition:all 0.5s ease;
}
.inline-list .effect:after{
	content:"";
	position:absolute;
	top:-5px;
	left:220px;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:10px solid red;
	border-bottom:10px solid transparent;
	opacity:0;
	transition:all 0.5s ease;
}
.inline-list .effect:hover:before,
.inline-list .effect:hover:after{
	opacity:1;
    transition:all 0.5s ease;
}
.magical
{
text-align:;
}
}

.magical
{
text-align:left;
}

/*////////////////////////Up arrow //////////////////*/
#myBtn {
  display: none;
  position: fixed;
  width:44px;
  height:44px;
  bottom: 15px;
  right: 22px;
  z-index: 99;
  font-size: 35px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: px;
  border-radius: 50%;
  color:yellow;
}

#myBtn:hover {
  background-color: yellow;
  color:red;
}

@media only screen and (max-width: 600px) {
#myBtn {
  display: none;
  position: fixed;
  width:44px;
  height:44px;
  bottom: 15px;
  right: 22px;
  z-index: 99;
  font-size: 35px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: px;
  border-radius: 50%;
  color:yellow;
}

#myBtn:hover {
  background-color: yellow;
  color:red;
}
}
/*////////////////////////go to home page //////////////////*/
#myBtn1 {
  display: none;
  position: fixed;
  width:44px;
  height:44px;
  bottom: 65px;
  right: 22px;
  z-index: 99;
  font-size: 35px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: px;
  border-radius: 50%;
  color:yellow;
}

#myBtn1:hover {
  background-color: yellow;
  color:red;
}

@media only screen and (max-width: 600px) {
#myBtn1 {
  display: none;
  position: fixed;
  width:44px;
  height:44px;
  bottom: 65px;
  right: 22px;
  z-index: 99;
  font-size: 35px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: px;
  border-radius: 50%;
  color:yellow;
}

#myBtn1:hover {
  background-color: yellow;
  color:red;
}
}

/*
.unorderList{
	list-style:none;
	width:1000px;
}
.unorderList li{
	width:45px;
	height:45px;
	float:left;
	background:#ccc;
	border-radius:50%;
	margin:0 10px;
	position:relative;
	cursor:pointer;
}
.unorderList li .fa{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:18px;
	color:red;
}
.unorderList li:before{
	content:attr(tooltip);
	width:150px;
	height:35px;
	background:red;
	color:white;
	position:absolute;
	top:-50.5px;
	left:-55px;
	border-radius:38px;
	line-height:35px;
	//text-transform:proper;
	text-align:center;
	font-size:15px;
	font-weight:900;
	opacity:0;
	transition:all 0.5s ease;
}
.unorderList li:after{
	content: "";
	position:absolute;
	top:-15px;
	left:8px;
	border-left:13px solid transparent;
	border-right:13px solid transparent;
	border-top:13px solid red;
	border-bottom:13px solid transparent;
	opacity:0;
	transition:all 0.5s ease;
}
.unorderList li:hover:before,
.unorderList li:hover:after{
opacity:1;
	transition:all 0.5s ease;
}
.List4:hover
{
	background:yellow;
	color:red;
}
.List4 .fa:hover{color:red}

@media only screen and (max-width: 500px) {
.unorderList{
	list-style:none;
	width:500px;
	margin-left:40px;
}
.unorderList li{
	width:35px;
	height:35px;
	float:left;
	background:red;
	border-radius:50%;
	margin:0 10px;
	position:relative;
	cursor:pointer;
}
.unorderList li .fa{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:18px;
	color:yellow;
}
.unorderList li:before{
	content:attr(tooltip);
	width:110px;
	height:25px;
	background:red;
	color:white;
	position:absolute;
	top:-40.5px;
	left:-35px;
	border-radius:38px;
	line-height:25px;
	//text-transform:proper;
	text-align:center;
	font-size:13px;
	font-weight:900;
	opacity:0;
	transition:all 0.5s ease;
}
.unorderList li:after{
	content: "";
	position:absolute;
	top:-15px;
	left:8px;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:10px solid red;
	border-bottom:10px solid transparent;
	opacity:0;
	transition:all 0.5s ease;
}
.unorderList li:hover:before,
.unorderList li:hover:after{
opacity:1;
	transition:all 0.5s ease;
}
.List4:hover
{
	background:#4e97dd;
	color:red;
}
.List4 .fa:hover{color:red}

}*/