﻿.staff-section {/*padding: 4em 0;*/position:relative; text-align: center;}
.staff-section h3 {text-transform: uppercase;font-size: 26px;}
.staff-section h3 span{color:#fd0000;}
 .ch-grid {/*margin: 4em 0;*/padding: 0;list-style: none;display: block;text-align: center;width: 100%;}
.ch-grid:after,.ch-item:before {content: '';display: table;}
.ch-grid:after {clear: both;}
.ch-grid li {width: 220px;height: 220px;display: inline-block;margin: 20px;}
.ch-item {width: 100%;height: 100%;border-radius: 50%;-o-border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;position: relative;cursor: default;-webkit-perspective: 900px;-moz-perspective: 900px;-o-perspective: 900px;-ms-perspective: 900px;perspective: 900px;}
.ch-info{position: absolute;width: 100%;height: 100%;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-o-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;}
.ch-info > div {display: block;position: absolute;width: 100%;height: 100%;border-radius: 50%;background-position: center center;-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;-o-transition: all 0.4s linear;-ms-transition: all 0.4s linear;transition: all 0.4s linear;-webkit-transform-origin: 50% 0%;-moz-transform-origin: 50% 0%;-o-transform-origin: 50% 0%;-ms-transform-origin: 50% 0%;transform-origin: 50% 0%;}
.ch-info .ch-info-front {box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);}
.ch-info .ch-info-back {-webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);-moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);-o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);-ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
background:#282828;opacity: 0;}
.ch-img-1 { background: url(../images/fb_talent.png)no-repeat;z-index: 12;}
.ch-img-2 { background: url(../images/fb_recuriter.png)no-repeat;z-index: 11;} 
.ch-info h4 {color: #fff;font-size: 1.5em;margin: 0 15px;padding: 61px 0 0 0;height: 110px;text-shadow: 0 0 1px #fff;  }
.ch-info div.indo {color: #fff;padding: 10px 5px;font-style: italic;margin: 0 30px;font-size: 12px;/*border-top: 1px solid rgba(255,255,255,0.5);*/}
.ch-info p a {display: block;color: #fff;color: rgba(255,255,255,0.7);font-style: normal;font-weight: 700;text-transform: uppercase;
	font-size: 9px;letter-spacing: 1px;padding-top: 4px;}

.ch-info p a:hover {color: #fff;}
.ch-item:hover .ch-info-front {-webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);-moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);-o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);-ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);opacity: 0;}
.ch-item:hover .ch-info-back {-webkit-transform: rotate3d(1,0,0,0deg);	-moz-transform: rotate3d(1,0,0,0deg);-o-transform: rotate3d(1,0,0,0deg);-ms-transform: rotate3d(1,0,0,0deg);transform: rotate3d(1,0,0,0deg);opacity: 1;}

.check__ct input:checked  ~ .ch-info-front {-webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);-moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);-o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);-ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);opacity: 0;}
.check__ct input:checked  ~ .ch-info-back {-webkit-transform: rotate3d(1,0,0,0deg);	-moz-transform: rotate3d(1,0,0,0deg);-o-transform: rotate3d(1,0,0,0deg);-ms-transform: rotate3d(1,0,0,0deg);transform: rotate3d(1,0,0,0deg);opacity: 1;}

 .ch-grid {
	margin: 2em 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}
 

.ch-grid li {
    width: 163px;
    height: 163px;
    overflow: hidden;
    border-radius: 50%;
    display: inline-block;
    margin: 20px;
    box-shadow: 0px 0px 0px 11px rgb(140, 198, 63);
} 
 .staff-section h1 {
    color: #4c4d4f;
    font-weight: 900;
}
 

 fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0 0.75em!important;
}

/*** Login & Register ***/
.login_page{ width:100%; padding:0 !important; background-size:100% auto;}

.login_main{ width:100%; padding:0; background-size:100% auto; padding:70px 0;}

.regFB-prof{float:left;width:47%;}
.regFB-sec{margin:auto;width:52%;}


.login_main .box  select option{color: #333;}

.login_main .login_section{    width: 40%;margin: 0px auto;}
.login_main .register_section{margin:0px auto;}
.login_main .login_logo{ width:100%; float:left; text-align:center;}
.login_main .login_logo .tagline{ width:96%; float:left; text-align:right; color:#FFFFFF; font-size:14px; font-weight:500; margin-top:-18px; padding-right:30px;}
.login_main .login_logo .tagline2{ width:82%; float:left; text-align:right; color:#FFFFFF; font-size:14px; font-weight:500; margin-top:-18px; padding-right:30px;}
.login_main .box{      
        box-shadow: none;
    border: 1px solid #eaeaea;
    border-radius: 3px;  
    padding: 15px;}
.box.register-new {
  width: auto;
    float: none;
    border: 1px solid #f1f1f1;
    box-shadow: 2px 8px 2px 9px #8e8a8a;
    background: rgb(255, 255, 255);
    border-radius: 5px;
    box-shadow: none;
    margin: 0;
}
label.label_check.c_off {
    font-size: 14px;
    font-weight: 100;
}
.login_main .box h2{ 
   width: 100%;
    float: left;
    font-size: 26px;
    color: #000;
    padding-bottom: 10px;
    margin: 0 0 20px;
    text-transform: uppercase;
    font-weight: 200;
    position: relative;
    }

/*.login_main .box h2:after {
    background: none repeat scroll 0 0 #8cc63f;
    content: "";
    height: 4px;
    left: 0%;
    position: absolute;
    bottom: 0px;
    width: 27%;
}*/

.login_main .box{ width:100%; float:left;}
.login_main .box ul{ width:100%; float:left; margin:0; padding:0; list-style:none;}
.login_main .box ul li{ width:100%; float:left; margin:0; padding:10px 0; list-style:none;}
.login_main .box ul li.half{ /*width:50%;*/ width:47%; float:right; padding-left:5px;}
.login_main .box ul li.half:first-child{float:left; padding-left:0;}
.login_main .box  input,.login_main .box  select,.login_main .box  textarea{ 
   width: 100%;
    height: auto;
    height: 38px\9;
    margin: 5px 0 ;
    padding: 0 10px;
    list-style: none;     background: transparent;
    border: 1px solid #cecbcb; 
    line-height: 30px;
    height: 30px;
    font-size: 13px;
    color: #333;
    /* font-weight: 500; */
    border: 1px solid #d9d5d4;
    display: block;
    width: 100%;
    height: 40px;
     
    padding: 10px; 
    box-shadow: none;
    outline: 0;}


.login_main .box  input:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}
.login_main .box .remember{ width:auto; float:left; font-size:14px; color:#333; line-height:26px;}
.login_main .box .remember .checkbox{ width:auto; float:left; margin-right:5px; border:1px solid #c0c0c0; border-radius:3px;} 
.login_main .box .forgot_pw{ width:auto; float:right; line-height:26px;}
.login_main .box .forgot_pw a{ color:#fd0000; font-size:14px;}
.login_main .box .forgot_pw a:hover{ color:#333;}

.login_main .box .login_btn{
           color: #fff; float:left;
    padding: 11px 10px;
    width: auto;min-width: 125px;
    background: #8cc63f;
    border: 1px solid #8cc63f;
    border-radius: 30px;
    text-transform: uppercase;
    margin: 0 0 0;
    height: auto;
    line-height: normal;
    transition: all 0.3s ease-out;
}
.login_main .box .login_btn:hover{background:#65686c; border:1px solid #55595d; transition: all 0.3s ease-out;}

.login_main .box .or{     margin-top: 9px;float: left;    background: url(../images/bdr.jpg) repeat-x left;font-size: 14px; color: #000;}
.login_main .box .or span{    font-size: 16px;
    border: 1px solid #000;
    padding: 3px 5px;
    border-radius: 50%;}

.login_main .box .fb_login_btn{ width:100%; float:left; color:#fff; background:#3b5998; border:1px solid #294277; border-radius:5px;  font-weight:500; line-height:41px; transition: all 0.3s ease-out;}
.login_main .box .fb_login_btn:hover{background:#345292; border:1px solid #254079; transition: all 0.3s ease-out;}
.login_main .box .not_member{ width:100%; float:right; font-size:14px; color:#333; line-height:26px; text-align:right; margin-top:8px;}
.login_main .box .not_member a{ color:rgb(140, 198, 63); font-size:14px;text-decoration:underline;}
.login_main .box .not_member a:hover{ color:#333;}


.login_main .box .user{ width:auto; float:left; font-size:14px; color:#515b5f; line-height:26px; margin-left:30px; font-weight:500;}
.login_main .box .user .radio{ width:16px; float:left; height:16px; margin:5px 8px 0px 0px; border:1px solid #c0c0c0; border-radius:3px;} 

.login_main .box .points{ width:100%; float:left; font-size:13px; color:#515b5f; line-height:20px; margin-top:10px;}
.login_main .box .points .checkbox{ width:14px; float:left; height:14px; border:1px solid #c0c0c0; border-radius:3px; margin-right:15px; margin-top:2px;}

.login_main .box .points a{ color:#fd0000; font-size:13px;}
.login_main .box .points a:hover{ color:#b2b2b2;}



@media (max-width: 767px){
.login_main .login_section{width:100%;}
.regFB-sec {margin: auto;width: 100%;}
.login_main .box h2 {
    width: 100%;
    float: left;
    font-size: 23px;
    color: #000;
    padding-bottom: 0px;
    margin: 0 0 10px;
    text-transform: uppercase;
    font-weight: 200;
    position: relative;
}
.login_main {
    width: 100%;
    padding: 0;
    background-size: 100% auto;
    padding: 20px 0;
}
 span.des-text.text-field {
    font-size: 10px;
}

.login_main .box input, .login_main .box select, .login_main .box textarea {
   
    font-size: 10px;
    font-weight: bold;
}
.login_main .box .login_btn {
    font-size: 10px;
    text-align: center;
}

}

