*{box-sizing:border-box;}
body{
	background-color:#eee;
	margin:0;
	padding:0;
	font-family:arial, helvetica, sans-serif;
	font-size:16px;
	line-height:20px;
}
/*----| Common Area |----*/
.wrapper{}
header,nav,
section,main,footer{margin:0;padding:0;width:100%}
.headerArea,.navbarArea,
.mainArea,.footerArea{background-color:#fff;margin:0;padding:0;width:100%}
.fixContant{
	margin:0 auto;
	padding:0 15px;
	max-width:1000px;
	width:100%
}

.search select{
    background-image:url("../images/arrow-down.png");
    background-position:right 5px center;
    background-repeat:no-repeat;
    background-size:10px auto;
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
    appearance:none;
}
/*----| Header Area |----*/
.header{}
.headerArea{}
.logo{
	font-family:'futura_md_btmedium_italic';
	font-weight:normal;
	margin:0;
    padding:25px 15px;
    height:100px;
    line-height:50px;
    text-align:center;
}
.logo a{text-decoration:none;color:#800080;text-shadow:1px 2px 3px #2c3e50;}
.logo a:hover{color:#b103b1}
/*----| Navebar Area |----*/
.navbar{}
.navbarArea{background-color:#fff;padding-bottom:10px}
ul.menu{
	background-color:#800080;
	box-shadow:0 2px 3px #111;
	list-style:none;
    margin:0;
    padding:0;
    width:100%
}
ul.menu:after,
ul.menu:before{
	content:"";
	clear:both;
	display:block
}
ul.menu>li{float:left;border-right:1px solid #b103b1}
ul.menu>li:last-child{border-right:0}
ul.menu>li>a{
	color:#fff;
    display:block;
    padding:8px 12px;
    text-align:center;
    text-decoration:none
}
ul.menu>li>a:hover,
ul.menu>li.active>a{background:#b103b1}
ul.menu>li.active>a:hover{}
ul.menu>li>a>i{margin-right:10px}
ul.menu>li{position:relative}
ul.submenu{
	background:rgba(128, 0, 128,0.8);
	list-style:none;
	margin:0;
	padding:0;
	position:absolute;
	display:none;
	width:250px;
	z-index:9
}
ul.submenu>li{
	border-bottom:1px solid #fff;
	display:block;
	width:100%;
}
ul.submenu>li:last-child{border:0}
ul.submenu>li>a{
	color:#fff;
	display:block;
	padding:8px 10px;
	text-align:left;
	text-decoration:none;
	width:100%
}
ul.submenu>li>a:hover{background:#b103b1}
ul.menu>li:hover ul.submenu{
	display:block;
}

ul.submenu>li>a:hover{
	-webkit-transition:all 700ms;
	-moz-transition:all 700ms;
	-ms-transition:all 700ms;
	-o-transition:all 700ms;
	transition:all 700ms;
}

.searchArea{}
.search{
	margin:0 auto;
	padding:0 75px 0 85px;
	max-width:50%;
	position:relative;
	width:100%
}
.search select{
	/* background:#3498db; */
    border:1px solid #3498db;
    color:#800080;
    cursor:pointer;
    height:100%;
    left:0;
    padding:5px;
    position:absolute;
    top:0;
    width:85px;
    z-index:1;
}
.search input{
	border-color:#3498db;
	border-style:solid;
	border-width:1px 1px 1px 0;
	border-right:0;
	font-size:16px;
	line-height:25px;
	padding:8px 10px;
	width:100%
}
.search button{
	background:#3498db;
	border:0;
	color:#fff;
	cursor:pointer;
	font-size:25px;
	height:100%;
	position:absolute;
	right:0;
	top:0;
	width:75px;
	z-index:1
}
.search button:hover{background:#b103b1}

/*----| Main Area |----*/
.main{}
.mainArea{padding:20px 0}
.mainArea h2{
	background-color:#3498db;
	/* border-top:1px solid #800080;
	border-bottom:1px solid #800080; */
	color:#fff;
    font-size:26px;
    line-height:30px;
    margin:0;
    padding:15px;
	overflow:hidden;
    width:100%
}


.section{padding:30px 15px}
.mainArea .gap{
	margin:0;
	padding:0;
	height:100px;
	width:100%;
}

ul.employeeList:after,
ul.employeeList:before{
	content:"";
	clear:both;
	display:block
}

ul.employeeList{
	margin:0;
	padding:0;
	list-style:none;
	width:100%
}
ul.employeeList>li{float:left;padding:0 10px;width:25%}
/* ul.employeeList>li:nth-child(2){padding:0 5%;width:40%} */
ul.employeeList>li>a{
	background:#3498db;
	box-shadow:1px 2px 4px #666;
	border-radius:5px;
	color:#fff;
    display:block;
    padding:20px 0;
    text-align:center;
	text-decoration:none
}
ul.employeeList>li>a:hover{background:#b103b1}


ul.employees:after,
ul.employees:before{
	content:"";
	clear:both;
	display:block
}
ul.employees{
	margin:0;
	padding:0;
	list-style:none;
	width:100%
}
ul.employees>li{
	float:left;
	padding:0 5px;
	margin-bottom:15px;
	width:33.33%
}
ul.employees>li .employee{
	border:1px solid #3498db;
	padding:10px;
	text-align:center;
	height:350px;
	width:100%
}
ul.employees>li a{display:inline-block;}
ul.employees>li a img{
	border:2px solid #3498db;
	display:block;
	height:170px;
	margin:0 auto;
	max-height:170px;
	max-width:150px;
	width:150px
}
ul.employees>li .details{
	border-top:1px solid #3498db;
	padding:6px 0 0;
	margin:15px 0 0
}
ul.employees>li .details p{font-size:12px;margin:0;padding-top:6px}
.profileLink{margin:0;padding:10px 0;width:100%}
.profileLink:after,
.profileLink:before{content:"";clear:both;display:block}
.profileLink a{
	background:#800080;
    color:#fff;
    display:block;
    padding:5px;
    text-align:center;
	text-decoration:none;
	width:100%
}
.profileLink.loginTrue a:nth-child(1){float:left;width:48%}
.profileLink.loginTrue a:nth-child(2){float:right;width:48%}
.profileLink a:hover{background:#b103b1;}


.employee figure{
	border-bottom:1px solid #800080;
    margin:0 0 20px;
    padding:0 0 20px;
	text-align:center;
}
.employee figure img{
	border:5px solid #3498db;
	display:block;
	margin:0 auto;
	max-width:150px;
	padding:0;
	width:100%;
}
.employeeArea{
	margin:0;
    overflow:hidden;
    padding:0;
    width:100%
}
.employeeLeft{float:left}
.employeeRight{float:right}
.employeeLeft,
.employeeRight{margin:0;padding:0;width:50%}



.details{margin:0;padding-bottom:15px;width:100%}
.details h3{color:#3498db;margin:0;padding:15px 0;}
.details h3 i{color:#800080;font-size:25px;margin-right:5px;}
.detail{padding-left:15px}
.detail p{
	border-color:#ccc;
	border-style:solid;
	border-width:1px 1px 0;
	line-height:28px;
	margin:0;
	padding:0 5px;
	overflow:hidden;
	
}
.detail p:last-child{border-bottom:1px solid #ccc}
.detail > p b{border-right:1px solid #ccc;float:left;display:block;width:25%}
.detail > p span{border-left:1px solid #ccc;display:block;float:right;padding:0 10px;width:75%;position:relative;left:-1px;}
.userOption{float:right;}
.userOpBtn{
	color:#800080;
	display:inline-block;
	float:left;
	font-size:19px;
	font-weight:normal;
	line-height:20px;
	margin-left:5px;
	padding:5px;
	text-decoration:none
}
.userOpBtn:hover{color:#b103b1}

.tebleResponsive{
    overflow-y:hidden;
    width:100%;
}
table.educations{border-collapse:collapse;border-spacing:0;width:100%}
table.educations tr{}
table.educations td{text-indent:10px}
table.educations th,td{border:1px solid #ccc;text-align:center;white-space:nowrap}


/*----| Login Form Area |----*/
.loginForm{margin:0;padding:0;width:100%}
.loginForm .formArea{
	border:0;
	margin:0 auto;
	max-width:400px;
	padding:0;
	width:100%
}
.formGroup{padding-bottom:10px;width:100%}
.formGroup label{
	display:block;
	padding-bottom:5px;
	width:100%;
}
.formGroup input{border:1px solid #3498db;padding:8px 10px;width:100%}
.formGroup button{
    border:0;
    color:#fff;
    cursor:pointer;
    margin-right:10px;
    padding:8px 20px;
}
.formGroup button[type="submit"]{background:#3498db}
.formGroup button[type="reset"]{background:#800080}

.signinArea{
	border:1px solid #3498db;
	border-radius:5px;
	box-shadow:1px 2px 4px #2c3e50;
	margin-bottom:30px;
	padding:0 0 15px;
	width:100%;
}
.signinArea>h2{
	background:#3498db;
	border-top:0;
	border-bottom:1px solid #3498db;
	border-radius:4px 4px 0 0;
	color:#fff;
	margin:0 0 20px;
	padding:20px 15px;
}
.signinArea .formGroup{padding:0 15px 10px;}


/*----| Message Area |----*/
.messageArea{margin:0;padding:20px;width:100%;position:relative}
.messageArea p{margin:0;padding:15px}
.messageArea .success{
	background-color:#dff0d8;
    border-color:#d6e9c6;
    color:#3c763d;
}
.messageArea .error{
	background-color:#f2dede;
	border-color:#ebccd1;
	color:#a94442;
}
.messageArea > button{
	background:none;
	border:0;
	color:#3c763d;
	cursor:pointer;
	display:inline;
	margin:0;
	padding:0;
	position:absolute;
	right:30px;
	top:40%
}
.messageArea > button:hover{color:#b103b1 }

/*----| Pagination Area |----*/
.paginationArea{}
ul.pagination{
	list-style:none;
	margin:0 auto;
	padding:0;
	text-align:center;
	width:auto
}
ul.pagination>li{
	display:inline-block;
	margin:0 2px;
	text-align:center;
}
ul.pagination>li>a{
	background:#3498db;
	color:#fff;
	display:block;
	padding:6px 12px;
	text-decoration:none;
}
ul.pagination>li>a:hover,
ul.pagination>li.active>a{background:#800080;}
ul.pagination>li.prev{margin-left:0}
ul.pagination>li.next{margin-right:0}

ul.pagination>li.blank{color:#3498db;margin:0 6px;width:60px}

.logo a:hover,
ul.pagination>li>a:hover,
ul.employeeList>li>a:hover{
	-webkit-transition:all 700ms;
	-moz-transition:all 700ms;
	-ms-transition:all 700ms;
	-o-transition:all 700ms;
	transition:all 700ms;
}



/*----| 404 page Area |----*/
.fourZiroArea{}
.fourZiroArea>h2{
	background:none;
	color:#34495e;
	font-family:"orbitronregular";
    font-size:15vw;
    font-weight:normal;
    line-height:100%;
    text-align:center;		 
}
.fourZiroArea>h3{
	color:#34495e;
	font-family:"orbitronregular";
	font-size:24px;
	font-weight:normal;
	line-height:40px;
	margin:0;
	text-align:center;
	width:100%
}
.gotoHome{
	margin:0;
	padding:30px 0 0;
	position:relative;
	text-align:center;
}
.gotoHome a{
	background:#34495e;
	color:#fff;
    display:inline-block;
    margin:0 auto;
    padding:10px 20px;
    position:relative;
    text-decoration:none;
    text-transform:uppercase;
}
.gotoHome a>i{
	font-size: 30px;
    margin-right: 10px;
}
.gotoHome a>span{
	display:inline-block;
    line-height:18px;
    position:relative;
    top:-4px;
}
.gotoHome a::before,
.gotoHome a::after{
	background:#34495e;
	content:"";
	display:block;
	height:1px;
	position:absolute;
	top:50%;
	width:100px;
	z-index:1
}
.gotoHome a::before{left:-130px}
.gotoHome a::after{right:-130px}
/*----| Footer Area |----*/
.footer{}
.footerArea{
	background:#800080;
	color:#fff;
    padding:15px 0;
    text-align:center;
}
.footerArea p{margin:0;padding:0}







.search,.logo,.mainArea h2{
	-webkit-transition:all 700ms;
	-moz-transition:all 700ms;
	-ms-transition:all 700ms;
	-o-transition:all 700ms;
	transition:all 700ms;
}

@media only screen and (max-width: 767px){
	body{font-size:14px}
	.fixContant{padding:0}
	ul.menu>li.mbLogin{display:none}
	.logo,.mainArea h2{font-size:28px;}
	.search{max-width:100%}
	ul.employeeList>li,
	ul.employeeList>li:nth-child(2){padding:0 0 15px;width:100%}
	ul.employees>li{width:50%}
	.tebleResponsive table.educations{margin-bottom:15px}
}
@media only screen and (max-width: 640px){
	body{font-size:12px}
	.logo,.mainArea h2{font-size:22px}
	.detail p{line-height:18px}
}
@media only screen and (max-width: 480px){
	body{font-size:10px}
	.logo,.mainArea h2{font-size:16px}
	ul.menu{position:relative}
	ul.menu>li{position:static}
	ul.submenu{left:0;margin:0 auto;right:0;width:250px}
	ul.submenu li a{text-align:center}
	ul.employees>li{width:100%}
	.detail{padding-left:0}
	.section{padding-bottom:0}
	.search{padding:0 50px 0 70px}
	.search select{font-size:10px;width:70px}
	.search input{font-size:12px;line-height:16px}
	.search button{font-size:16px;width:50px}
	.mainArea .gap{height:50px}
	ul.employeeList>li>a{padding:10px 0}
}
@media only screen and (max-width: 360px){
	.logo,.mainArea h2{font-size:14px;padding:20px 10px}
}
@media only screen and (max-width: 320px){
	.logo,.mainArea h2{font-size:12px}
}