*{
	margin: 0px auto;
    font-family: 'Open Sans', sans-serif;
}

body.body2{
	background:url('../img/port070325.jpg');
	background-size: cover;
	overflow: auto;
}
body.body{
	background:url('../img/port070325.jpg');
	background-size: cover;
	overflow: auto;
}
.body2{
 	background:url('../img/2.jpg');
	background-size: cover;
	overflow: auto;
}

/*WRAPPER START*/
.wrapper{
	width: 100%;
	max-height: auto;
	
}
.p2-wrapper{
	width: 100%;
	margin-top: 150px;
}
/*HEADER START*/
.header-wrapper{

}

.header-wrapper h1{
	font-size:6em;
	font-weight: bolder;
	text-align: center;
	color: #ffffff;
	margin-top: 12%;
}

.header-wrapper h2{
	font-size:5em;
	font-weight: bolder;
	text-align: center;
	color: #ffffff;
	margin-top: 15%;
}

.header-wrapper h3{
	font-size:42px;
	font-weight: bolder;
	text-align: center;
	color: #ffffff;
}

.header-wrapper h4{
	font-size:30px;
	font-weight: bolder;
	text-align: center;
	color: #ffffff;
}



/*CONTENT START*/
.content-wrapper{

}
/*SIGN-IN START*/
.sign-in{
	background-color: rgba(163,193,167,0.8);
	width: 100%;
	padding: 90px;
}


.sign-in2{
	background-color: rgba(163,193,167,0.8);
	width: 88%;
	padding: 25px;
}

.sign-div{
	position: relative;
    margin-top: 20px;
	top: 15%;
	transform: translateY(10px);
}

.signIn-inner{
width: 90%;
}

.input-div{
	text-align: center;
	width: 100%;
	transform: translateY(-40px);
}

/*   .input-div button{
	padding: 12px;
	width: 30%;
	font-weight: bolder;
	color: #fff;
	background-color:rgb(243,128,65);
	border: none;
	font-size: 20px;
	cursor: pointer;
    }

.input-div button:hover,.signIn-inner button:active{
	background-color:rgb(239, 123, 60);
	
}     */



.signIn-inner input{
    border-radius: 10px;
	padding: 12px;
	width: 40%;
	border: none;
	font-size: 20px;
}



.signIn-inner button{
    border-radius: 10px;
	padding: 12px;
 /*	width: 30%; */
	width: auto;
	font-weight: bolder;
	color: #fff;
	background-color:rgb(0,51,102);
	border: none;
	font-size: 20px;
	cursor: pointer;
}
.signIn-inner button:hover,.signIn-inner button:active{
	background-color:rgb(5, 55, 148);
	
}

/*SPEACH BOX*/
.error
{
position: absolute;
width: 300px;
height: 30px;
padding: 5px 10px;
background: rgb(107,64,82);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
bottom: 23%;
color: #ffffff;
margin-left: 20px;
top: 65px;
left: 8%;
}

.error:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: rgb(107,64,82) transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 150px;
}

.shake-horizontal {
	-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

.r-pass{
	text-align: center;
	position: relative;
	top: -40px;
}

.suc{
    border-radius: 10px;
	padding: 12px;
	width: auto;
	font-weight: bolder;
	color: #fff;
/*	background-color:rgb(243,128,65);  
*/
    background-color: rgb(0, 100, 0);
	border: none;
	font-size: 20px;
	cursor: pointer;
}
.suc:hover{
	background-color:rgb(50, 186, 160);
}
.suc:active{
 /*	background-color:rgb(239, 123, 60);  */
	background-color:rgb(50, 186, 160);
}

.suc2{
    border-radius: 10px;
	padding: 12px;
	width: auto;
	font-weight: bolder;
	color: #fff;
	background-color:rgb(0,51,102);
	border: none;
	font-size: 20px;
	cursor: pointer;
}
.suc2:hover{
	background-color:rgb(5, 55, 148);
}
.suc2:active{
	background-color:rgb(5, 55, 148);
}

.suc3{
    border-radius: 10px;
	padding: 12px;
	width: auto;
	font-weight: bolder;
	color: #fff;
	background-color:rgb(60,51,180);
	border: none;
	font-size: 20px;
	cursor: pointer;
}
.suc3:hover{
	background-color:rgb(5, 55, 148);
}
.suc3:active{
	background-color:rgb(5, 55, 148);
}








/* ----------------------------------------------
 * Generated by Animista on 2018-2-3 21:50:49
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(35%);
            transform: translateX(35%);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(35%);
            transform: translateX(35%);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(35%);
            transform: translateX(35%);
  }
  80% {
    -webkit-transform: translateX(35%);
            transform: translateX(35%);
  }
  90% {
    -webkit-transform: translateX(35%);
            transform: translateX(35%);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(35%);
            transform: translateX(35%);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(35%);
            transform: translateX(35%);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(35%);
            transform: translateX(35%);
  }
  80% {
    -webkit-transform: translateX(35%);
            transform: translateX(35%);
  }
  90% {
    -webkit-transform: translateX(35%);
            transform: translateX(35%);
  }
}
/*FOOTER WRAPPER START*/

.footer-wrapper{
	margin: 15px auto;
}

.sign-up{
    text-align: center;
	width: 25%;
	padding: 5px;
	transform: translateY(15px);
}

.sign-up-btn{
    border-radius: 10px;
	border: medium none;
	padding: 10px;
	font-size: 20px;
	width: auto;
	text-align: center;
	position: relative;
	
	font-weight: bolder;
	color: #fff;
	background-color: rgb(94,123,193);
	cursor: pointer;
}

.sign-up-btn:hover, .sign-up-btn:active{
	background-color: rgb(82, 109, 174);
}

/******RESPONSIVE CSS*******************************************/

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) {
 body{
	overflow: auto;
}

  }
 @media screen and (-webkit-min-device-pixel-ratio: 1) {
body{
	overflow: auto;
}


}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
 and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 


}

/**************SIGN_UP STYLING*********************/

.sign-up-wrapper{	
	width: 75%;	
	position: relative;
	top: 25%;
}
.sign-up-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  resize: both;}
.sign-up-inner{
	background: rgba(163,193,167,0.8);
	width: 65%;
	margin: 0px auto;
	height: auto;
	padding: 30px;	
}

.sign-up-div{
	    
}
.sign-up-div span.error-in{
	background: rgb(107, 64, 82) none repeat scroll 0% 0%;
	padding: 4px;
	color: rgb(255, 255, 255);
	font-size: 14px;
	position: relative;
	left: 0%;
	top: -5%;
}
.sign-up-div span.error-in::after{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 0 10px 10px;
	border-color: rgb(107,64,82) transparent;
	display: block;
	width: 0;
	z-index: 1;
	top: -9px;
	left: 22px;
}
.sign-up-div input{
    border-radius: 5px;
	width: 90%;
	margin: 10px 0px;
	padding: 12px;
	border:none;
	font-size: 20px;

}

.sign-up-div input[type="radio"]{
	width: auto;
}

.sign-up-div input[type="checkbox"]{
	width: 18px;
    height: 18px;
}




.sign-up-div fieldset{
	padding: 10px;
	margin: 14px;
	
}
.sign-up-div input[type="text"]{
}
.sign-up-div div h3{

}
.name input[type="text"]{
	width:50%;
}
.btn-div{
	text-align: center;
}
.btn-div button{
	border: medium none;
	padding: 10px;
	font-size: 18px;
	width: 40%;
	margin: 0px auto;
	border-radius: 5px;
	background: rgb(84, 118, 150) none repeat scroll 0% 0%;
	color: rgb(255, 255, 255);
	font-weight: bolder;
	cursor: pointer;
	transition: all 300ms ease-in;
}


.btn-div button:hover, .btn-div button:active{
	background: rgb(68, 127, 182) none repeat scroll 0% 0%;
}

/* STYLE 2*/
*{
	margin: 0px auto;
	padding: 0px;
	font-family: 'Open Sans', sans-serif;

}

body{
	background:rgba(231,232,235,1);
}

.home-wrapper{
	width: 100%;
	color: rgb(43,43,43);

}

.home-content-wrapper{
	width: 70%;
	background: #fff;
	box-shadow: 0px 0px 20px 5px #333;
	position: relative;
	top: -60px;	
}

.home-inner-content{
	background:#fff;
}
.home-header-wrapper{
width: 100%;
height: 500px;
overflow: hidden;
}
.home-nav{
	position: absolute;
	z-index: 1;
	margin: 30px 20px;
	top:0px;
}
.home-nav a{
	color: #fff;
	font-weight: bold;
	font-size: 22px;
	text-decoration: none;
	background: rgba(231, 163, 26, 0.5);
	padding: 10px;
	transition: all 500ms ease-in;
	cursor: pointer;
	margin: 30px 20px;
}
.home-nav a:hover,.home-nav:active{
	background: rgba(231, 163, 26, 1);
}
.home-header-wrapper img{
	width: 100%;
	background-size: cover;
	position: relative;
	top: -24%;
	z-index: 0;
	height: auto;
}
.home-left-content{
	position: relative;
	top: -200px;

}
.home-left-inner{

}

.profile-box{
	
}

.profile-box-inner{
	text-align: center;
}
.profile-header{

}
.profile-img{
	width: 400px;

}
.profile-img img{
	width: 100%;
	border-radius: 100%;
}
.profile-name{
	padding: 10px;
}

.profile-name a{
	font-size: 30px;
	text-decoration: none;
	color: rgb(43,43,43);
	font-weight: bolder;
	cursor: pointer;
}
.profile-name a:hover,.profile-name a:active{
	text-decoration:underline;
}

.profile-content{
	padding: 10px;
}

.profile-date-l{

}

.profile-dis{

}
.profile-footer{

}
.log-out{
	background:rgb(0,196,177);
	border: none;
	padding: 10px 20px;
	color: #fff;
	font-size: 20px;
	font-weight: bolder;
	cursor: pointer;
	border-radius: 6px;
}
.setting{
	background: rgb(234, 231, 231) none repeat scroll 0% 0%;
	border: medium none;
	padding: 10px 20px;
	font-size: 20px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
.setting:hover,.setting:active{
	background:#ccc;
}
.home-right-content{

}

.home-footer-wrapper{

}

.sign-in-error{
	width: 40%;
	font-weight: bold;
	margin-top: 10px;
	color: #ffffff;
	text-align: center;
}

.success-message a{
 	text-decoration: none;

}	

.success-message{
	color:#fff;
	font-size:34px;
	font-weight: bolder;
}

.home-right-content{
	width:60%;
	float: right;
}
.home-right-inner{

}