.container-self {
    width: 98%;
    max-width: 1490px;
    margin: 0 auto;
    padding: 0 1%;
}

.flex-box, .flex-box-landing-page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
}

.flex-box-landing-page .recruting-list {
    flex: 0 0 60%;
    max-width: 60%;
}

.flex-box-landing-page .download-video {
    flex: 0 0 40%;
    max-width: 40%;
	margin-top: 41px;
}

.flex-box-landing-page .recruting-list {
    align-self: auto;

}
.flex-box-landing-page .example-slot button {
    max-width: 100%;
}

.flex-box-landing-page {
    align-items: start;
	width: 100%;
}


section.recruiting-sec {

    padding: 30px 0;

}

.recruting-list h1 {

    color: #15171d;

    font-size: 30px;

    padding-bottom: 11px;

	font-weight: 800;

}

.video-detail p {

    font-size: 16px;

    color: #1c1f27;

}

.recruting-list .title button.recruit-main-btn {
    background: #c1bfbf;
    border: none;
    width: 100%;
    color: #ffffff;
    text-align: left;
    line-height: 20px;
    padding: 15px 10px;
	font-weight: 400;
    margin: 0;
	height: auto;
    font-size: 16px;
    cursor: pointer;
	flex: 0 0 84%;
	border-right: 1px solid #2122234a;
    border-radius: 0;
}

.recruting-list .title button.recruit-main-btn:after{
    content: none;
}


.recruting-list .title span {
	background: #c1bfbf;
    text-align: center;
    color: #fff;
    flex: 0 0 12%;
    align-self: center;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-detail {

    margin-bottom: 8px;
        position: relative;

}
.recruit-main-title{
	position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.recruting-list .title {
	position: relative;
    width: 100%;
    flex: 0 0 88%;
    display: flex;
    background: #c1bfbf;
    border-radius: 4px;
	overflow: hidden;
}

:focus{

	outline: none;

}

.recruting-list {

    flex: 0 0 40%;
	    align-self: center;
    max-width: 40%;
    position: relative;

}
/* .page-template-Template-train-2-1 .active-train button.recruit-main-btn.train-main-btn, .active-train span {
    background: #f7bd47 !important;
    color: #fff !important;
} */


.active-blue button.recruit-main-btn, .active-blue span{

    background: #50caf5;

    color: #fff;

}

active-blue span{

    border-color: #616b754a;

}

.video-list {

    max-height: 530px;

    overflow-y: scroll;


}

.video-list::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

	background-color: #F5F5F5;

}



.video-list::-webkit-scrollbar

{

	width: 6px;

	background-color: #CCC;

	display: none;

}



.video-list::-webkit-scrollbar-thumb

{

	background-color: #666;

}

.recruting-list .compensation {

    font-size: 18px;

    font-weight: 700;

    text-align: center;

    padding: 10px 0;

}



input#recruit-masters, .recruit-masters{

    background: #f7bd47;

    border: none;

    color: #fff;

    font-size: 18px;

    text-align: center;

    margin: 0 auto;

    display: block;

    padding: 16px 16px;

    max-width: 443px;

    width: 100%;

    border-radius: 3px;

        cursor: pointer;

        border: 1px solid transparent;

        margin-bottom: 8px;

        

}

input#recruit-masters:hover, .recruit-masters:hover {

	 background: #fff;

	 color: #f7bd47;

	 border-color: #f7bd47;



}

input#recruit-master, .recruit-master{

    background: #50caf5;

    border: none;

    color: #fff;

    font-size: 18px;

    text-align: center;

    margin: 0 auto;

    display: block;

    padding: 16px 16px;

    max-width: 443px;

    width: 55%;

    border-radius: 3px;

        cursor: pointer;

        border: 1px solid transparent;

        margin-bottom: 8px;

        

}

input#recruit-master:hover, .recruit-master:hover {

	 background: #fff;

	 color: #50caf5;

	 border-color: #50caf5;



}

.recruting-video {

    flex: 0 0 58%;

    max-width: 58%;

        position: relative;

}

.flex-box {

    /* align-items: inherit; */

	width: 100%;

}

.recruting-video iframe {

      border: none;
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 100%;

} 

.empty-video {

   /*  background: #50caf5; */

   color: #fff;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;

   

}
.flex-box .recruting-list {
    align-self: unset;
}
section.recruiting-sec .flex-box {
    align-items: end;
}
.blank-video {

        position: relative;

    clear: both;

    height: 100%;

    min-height: 500px; 

}

.top-videos {

    position: absolute;

    top: 0;

    right: 0;

        width: 100%;

}

.empty-video img {

    position: absolute;

    bottom: 18px;

    width: 95%;

}

.empty-video h2 {

    font-size: 36px;

    font-weight: 600;

    line-height: 46px;

}

.step-sucess h3 {

    font-size: 28px;

    font-weight: 600;

    padding: 13px 0;

}

.step-sucess {

    text-align: center;

}

.step-sucess li {

    list-style: none;

    display: inline-block;

    margin: 0 20px;

    font-size: 21px;

    font-weight: 600;

}

.step-sucess span {

    background: #50caf5;

    width: 45px;

    height: 45px;

    border-radius: 100%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-right: 8px;

    color: white;

}

.hide-video{

	display: none;

}

.agreement .main-nav ul a span {

    display: block;

    text-align: center;

    width: 100%;

}

.example-slot input, .example-slot button {

    font-size: 18px;

    display: block;

    width: 100%;

    background: #50caf5;

    border: 1px solid transparent;

    padding: 13px;

    border-radius: 4px;

    color: #fff;

    max-width: 450px;

    margin: 10px auto;

    cursor: pointer;

	border-color: #f7bd47

}

.example-slot input:hover, .example-slot button:hover {

	 background: #fff;

    border-color:#50caf5;

    color: #50caf5;

}

.hide-sec{

	/* display: none; */

}

li.active-nav a {

    background: #30b0dd;

}

.traning li.active-nav a {

    background: #f7bd47;

}

.agreement li.active-nav a {

    background: #f7bd47;

}

img#nav-icon {

    display: none;

}

.traning .example-slot input:hover, .traning .example-slot button:hover{

	background:none;

	border-color:#e6ae3b;

	color:#e6ae3b;

}

.agreement .example-slot input:hover, .agreement .example-slot button:hover{

	background:none;

	border-color:#3bbc9a;

	color:#3bbc9a;

}

.traning .main-nav li a:hover {

	 background: #e6ae3b;

}



.traning .active-blue input, .traning .active-blue span {

    background: #f7bd47 !important;

    color: #fff !important;

}

.agreement .active-blue input, .agreement .active-blue span {

    background: #3bbc9a  !important;

    color: #fff !important;

}

.example-slot {

    margin-left: 20px;

}

.traning .empty-video, .traning .example-slot input,  .traning .step-sucess span, .traning input#recruit-master{

	background: #f7bd47;

    border-color: #50caf5;





}

.traning .example-slot button{

	background: #f7bd47;

    border-color: #f7bd47;





}

.agreement .empty-video, .agreement .example-slot input, .agreement .example-slot button, .agreement .step-sucess span, .agreement input#recruit-master{

	 background: #3bbc9a;

    border-color: #f7bd47

}

.traning li.active-nav a {

    background: #e6ae3b !important;

}

.agreement li.active-nav a {

    background: #1aa782 !important;

}

.traning input#recruit-master:hover{

    border-color: #e6ae3b;

    color: #e6ae3b;

    background: none;

}

.agreement input#recruit-master:hover{

    border-color: #e6ae3b;

    color: #e6ae3b;

    background: none;

}



\.agreement .type-three input, .agreement .type-three button {

    max-width: 100%;

    flex: 0 0 100%;

    margin: 4px 0;

}

.agreement .recruting-list .compensation {

    text-align: left;

}

.agreement .type-three {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    text-align: left;

}



 .main-nav li a span {

    font-size: 16px;

    font-weight: bold;

    color: white;

    vertical-align: middle;

}

.agreement .main-nav li a {

    font-size: 14px;

    padding: 18px 0;

}





/*-----module4--------*/

.module .container-self {

    width: 100%;

    max-width: 1490px;

    margin: 0 auto;

    padding: 0 15px ;

}

.module .logo {

    display: flex;

    justify-items: left;

}

.module .module {

    align-items: center;

    align-self: center;

    padding-left: 20px;

    font-size: 42px;

    font-weight: 600;

	color: #262a34;

	line-height: 43px;

}

.module .header-inner .logo a{

	

}

.module .header-nav {

    justify-content: right;

    align-self: center;

    justify-items: flex-end;

}

.module .header-nav li {

    display: inline-block;

    margin-left: 15px;

}

.module .header-nav li a {

    text-decoration: none;

    color: #272b34;

    padding: 15px 30px;

    border-radius: 3px;

    transition: all 0.3s;

    font-size: 20px;

 }

.module .header-nav li a:hover {

    background: #262a34;

    color: #fff;

}

.nav-list.modle {

   background: #262a34;

    width: 100%;

    display: inline-block;

}

.nav-list.modle .main-nav ul {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    flex-direction: row;

}

.nav-list.modle .main-nav li {

	list-style: none;

    float: left;

    padding: 9px 29px;

	flex: inherit;

	

}

.nav-list.modle .main-nav li a span {

    font-size: 18px;

    font-weight: bold;

    color: white;

    vertical-align: middle;

    display: block;

}

.nav-list.modle .multiply-nav li a span {

    text-align: left;

}

.nav-list.modle .multiply-nav li a aside {

    text-align: left;

    text-transform: capitalize;

}

.nav-list.modle .main-nav li.active-nav{

    background: #353945;

}

.nav-list.modle .main-nav li:hover {

    background: #353945;

}

.nav-list.modle .main-nav li a {

   text-decoration: none;

    color: #fff;

    transition: all 0.3s;

    font-size: 18px;

    text-align: center;

    padding: 0;

    float: none;

	background: transparent;

}

 .module-four {

    padding: 30px 0 0;

}

.module-list {

    text-align: center;

    padding: 0 0 30px 0;

}

.module-list h1 {

    color: #15171d;

    font-size: 30px;

    padding-bottom: 8px;

	

}

.module-list p {

    color: #575a61;

    font-size: 18px;

    line-height: 24px;

    max-width: 940px;

    margin: 0 auto;

}

.module-four .video-seres {

    position: relative;

    clear: both;

    height: 100%;

    min-height: 450px;

	margin-bottom: 30px;
	
	border: 1px solid #afe7fbd4;

}

.module-four .seies-style{

    background: #262a34;

    color: #fff;

    height: 100%;

    position: absolute;

    left: 0;

    top: 0;

    z-index: 9;

    width: 100%;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    bottom: 0;

   

}



.module-four .seies-style h2 {

    font-size: 36px;

    font-weight: 600;

    line-height: 46px;

    max-width: 820px;

} 

.module-four.sixth{

	padding: 80px 0;

}

.recruting-list.lastmd p{

	color: #262a34;

	font-size: 18px;

	line-height: 26px;

}

.recruting-list.lastmd .video-list {

	padding-top: 20px;

}



.recruting-list.lastmd .title span{

	 border-left: 1px solid #15171d;
 

}

/*.recruting-list.lastmd .active-black input, .active-black span {

    background: #404655 !important;

    color: #fff !important;

}*/


/* .module-four .empty-video {

    background: #262a34;

} */

.agreement .nav-list.retain{

	background: #3bbc9a;

}



.nav-list.retain .main-nav li a {

    font-size: 14px;

}

.nav-list.retain .main-nav li a span {

    font-size: 14px;

}

.nav-list.retain .main-nav li {

    padding: 9px 5px;

}

.retainl .header-nav li a:hover {

    /* background: #50caf5; */

    color: #fff;

}

.agreement .header-nav li a:hover {

    border-color: #3bbc9a;

    color: #fff;

    background: #3bbc9a;

}

.nav-list.retain .main-nav li:hover {

    background: #1aa782 !important;

}

.traning .header-nav li a:hover {

    border-color: #e6ae3b;

    color: #fff;

    background: #f7bd47;

}

.page-template-template-partsTemplate-recruit-php .header-nav li a:hover,.page-template-template-partsTemplate-recruit-1-1-php .header-nav li a:hover,.page-template-template-partsTemplate-recruit-1-2-php .header-nav li a:hover,.page-template-template-partsTemplate-recruit-1-3-php .header-nav li a:hover,.page-template-template-partsTemplate-recruit-1-4-php .header-nav li a:hover,.page-template-template-partsTemplate-recruit-1-5-php .header-nav li a:hover{
    background: #50caf5;
    color: #fff;
}

/* Responsive*/

@media only screen and (max-width: 1425px) {

    .module .module {

        font-size: 32px;

        line-height: 23px;

    }

    .module .logo img {

        width: 320px;

    }

    .module .header-nav li {

        margin-left: 10px;

    }

    .nav-list.modle .main-nav li {

        flex: 0 0 10%;

    }

}

@media only screen and (max-width: 1400px) {

    .main-nav li a {

        font-size: 14px;

    }

    .nav-list.modle .main-nav li a {

      font-size: 14px;

    }

	

}

@media only screen and (max-width: 1300px) {

	.pc-bg {

   

     background-size: 100%!important;
    background-repeat: no-repeat !important;
    background-position: 100% !important;
    width: 90% !important;

}
.recruting-list .title {
    position: relative;
    width: 85%;
}
/*.check-box {
    right: 0;
    top: 31.5px;
    width: 14%;
    padding: 0;
}*/
.recruting-list .title button.recruit-main-btn { 	
    font-size: 13px;  
	}
.recruting-list .title span {
    font-size: 13px;
	}
    .header-nav {
        text-align: center;
    display: block;
    flex: 0 0 100%;
    margin: 35px 0 0;
}
.header-inner {
    justify-content: center;
}
body .header-nav li a {
    margin: 4px 0;
    display: inherit;
}
}

@media only screen and (max-width: 1250px) {

    .module .logo img {

        width: 270px;

    }



    .module .module {

        padding-left: 15px;

        font-size: 30px;

        line-height: 23px;

    }



    .module .header-nav li a {

        padding: 15px 25px;

        font-size: 16px;

    }

}

@media only screen and (max-width: 1200px) {

	.flex-box-landing-page .recruting-list {

    flex: 0 0 57%;

    max-width: 56%;

}

.agreement .main-nav ul {

    background: #3bbc9a;



}

.module .logo img {

    width: 270px;

}

.module .module {

    padding-left: 15px;

    font-size: 25px;

    line-height: 23px;

}

.module .header-nav li a {

    padding: 15px 25px;

    font-size: 16px;

}



}

@media only screen and (max-width: 1200px) {

    section.volunteers-area .header-flex .inner-sect {

        flex: 0 0 50% !important;

        max-width: 50% !important;

        margin-bottom: 40px !important;

    }

    .pc-bg {

        

        min-height: 300px !important;
    height: 26vh !important;



    }
	section.volunteers-area .header-flex a {
    min-height: 400px !important;
	}
    
}

@media only screen and (max-width: 1024px) {

img#nav-icon {

    display: block;

    position: absolute;

    right: 0;

    top: 0;

    width: 30px;

}



.agreement .main-nav ul, .agreement .main-nav ul a {

    height: auto;

}

.agreement .main-nav ul{

	display:none;

}

.agreement .main-nav li {

    flex: 0 0 100%;

	 border-bottom: 1px solid #09ad82;

}

.logo img {

    width: 250px;

}

.header-nav li a{

    font-size: 16px;

}

.step-sucess li {

    margin: 0 8px;

    font-size: 16px; 

}

.step-sucess h3 {

    font-size: 22px;

}

.step-sucess span {

    background: #50caf5;

    width: 25px;

    height: 26px;

    }

.main-nav ul {

    display: none;

    position: absolute;

    top: 40px;

    z-index: 99;

    width: 100%;

 

}

.main-nav ul li, .main-nav ul li a {

    width: 100%;

    text-align: left;

}

.main-nav {
	padding: 0;
    position: relative;

}



.main-nav li {

 border-bottom: 1px solid #0b99cc;

    background:#0b99cc;

    margin: 0;

    padding: 0;

    float: left;

}
/* mobile-menu css 30/5/2019 */
.main-nav li.train-menu-list {

 border-bottom: 1px solid #f7bd47 !important;

    background:#f7bd47 !important;

    margin: 0;

    padding: 0;

    float: left;

}

.main-nav li.retain-menu-list {

 border-bottom: 1px solid #3bbc9a !important;

    background:#3bbc9a !important;

    margin: 0;

    padding: 10px 16px !important;

    float: left;

}

.nav-list {

    background: transparent;

}

.module .module {

    padding-left: 20px;

    font-size: 21px;

    line-height: normal;

}

.module .header-nav li a {

    font-size: 16px;

	padding: 15px 15px

}

.nav-list.modle .main-nav li {

    border-bottom: 1px solid #353945;

    background: #262a34;

    margin: 0;

    padding: 18px 0;

    float: left;

}

.nav-list.modle .main-nav ul {

	background: #262a34;

	display: none;

    position: absolute;

    top: 40px;

    z-index: 99;

    width: 100%;

}

    .agreement .main-nav li{

        border-bottom: 1px solid #0da27b;

        background: #3bbc9a !important;



    }

    section.recruiting-sec {

        padding: 40px 0;

    }

    .traning .main-nav li{

        border-bottom: 1px solid #eaaa27;

        background: #f7bd47;



    }

    .module-four {

        padding: 30px 0 0;

    }

    .nav-list.modle .multiply-nav li {

        border-bottom: 1px solid #000;

        background: #262a34;

    }

    .nav-list.modle .multiply-nav li a {

        background: transparent !important;

        text-align: left;

    }

    .nav-list.modle .multiply-nav li a span {

        text-align: left;

    }

    .nav-list.modle .multiply-nav li a aside {

        text-align: left;

    }

    .nav-list.modle .main-nav li a {

        text-align: left;

    }

    .agreement .main-nav ul a span {

        text-align: left;

    }
	.module_multiply .main-nav.multiply-nav {
		width: 100%;
		padding: 0;
	}
	.module_multiply .nav-list.modle .main-nav li {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.module_multiply .nav-list.modle .multiply-nav li a span {
		text-align: left;
	}

}

@media only screen and (max-width: 992px) {

	.module .header-nav li {

    display: inline-block;

    margin-left: 6px;

}

    .header-inner {

       

    }

    .header-inner .logo {

       

    }

    .header-nav {

   

        text-align: center;

    }

	section.volunteers-area .header-flex .inner-sect {

        flex: 0 0 50% !important;

        max-width: 50% !important;

        margin-bottom: 40px !important;

    }

    .pc-bg {

        

        height: 223px !important ;

        top: 85px !important ;



    }

}

@media only screen and (max-width: 767px) {

	.agreement .type-three input, .agreement .type-three button {

    max-width: 100%;

    flex: 0 0 100%;

}

.recruting-list, .recruting-video, .flex-box-landing-page .recruting-list, .flex-box-landing-page .download-video {

    flex: 0 0 100%;

    max-width: 100%;

}

.recruting-video {

    margin-top: 40px;

}





.header-inner .logo {

    text-align: center;

	display: block;

}





.module-four .seies-style h2 {

    font-size: 28px;

    font-weight: 600;

    line-height: 34px;

    max-width: 100%;

}

.example-slot {

    margin-left: 0;

}

.logo img {

    width: 200px !important;

}

section.volunteers-area .header-flex .inner-sect {

        flex: 0 0 100% !important;

        max-width: 100% !important;

        margin-bottom: 40px !important;

    }

	section.volunteers-area .header-flex a {
    min-height: 400px !important;
    width: 70%;
    margin: 0 auto !important;
}

	.recruit, .train, .abc, .black-over {

  

    width: 100% !important;

    height: 256px !important; 

    margin: 0 auto !important;

}
.check-box {
    width: 16%;
}
.recruting-list .title {
    width: 83%;
}
.recruting-list .title input {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
}

@media only screen and (max-width: 568px) {

.step-sucess li {

    display: block;

    text-align: left;

    margin: 12px 0;

}
.recruit, .train, .abc, .black-over {
    width: 100% !important;
    
}
.header-nav li {

    display: inline-block;

    margin-left: 0;

}

.header-nav li a {

   

    padding: 15px 8px;

    border-radius: 3px;

    font-size: 14px;

}

.module .header-nav li a {

    padding: 15px 8px;

    border-radius: 3px;

    font-size: 14px;

}

.recruting-list h1, .empty-video h2 {

       font-size: 20px;

    line-height: 30px;

}

footer p {

    margin-top: 12px;

}
body .header-nav li a {
    padding: 7px 5px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    margin: 4px 0;
    display: inherit;
}
.header-nav {
    margin: 0px 0 0;
}
}
@media only screen and (max-width: 580px) {

    section.banner-sec {

        height: 150px !important;

    }

    .banner-text h1 {

        font-size: 30px !important;

    }

	.pc-bg {

    width: 370px !important;

    height: 223px !important;

    top: 85px !important;

 right: 0 !important;

	}
section.volunteers-area .header-flex a {
    min-height: 380px !important;
    width: 100% !important;
    
}
}

@media only screen and (max-width: 480px) {

.log-out a {

    padding: 7px 25px;

    font-size: 14px;

}

.logo img {

    width: 162px !important;

}

.banner-text h1 {

    font-size: 18px !important;

}

.recruit, .train, .abc, .black-over {

	width:100%  !important;

}
.recruting-list.lastmd p {
    color: #262a34;
    font-size: 15px;
    line-height: 23px;
}
  
body .header-nav li a {
    padding: 7px 5px;
    border-radius: 3px;
    font-size: 12px;
}
 

}

@media only screen and (max-width: 375px) {

	 .pc-bg {

   width: 100% !important;
    height: 223px !important;
    top: 85px !important;
    right: 0px !important;

}

 
}


 @media only screen and (max-width: 360px) {

	







 



}

 @media only screen and (max-width: 320px) {

     

 }





/* css date 1/3/2019  */



.retain-master{

    background: #3bbc9a;

    border: none;

    color: #fff;

    font-size: 18px;

    text-align: center;

    margin: 0 auto;

    display: block;

    padding: 16px 16px;

    max-width: 443px;

    width: 100%;

    border-radius: 3px;

    cursor: pointer;

    border: 1px solid transparent;

    margin-bottom: 8px;

}	

	

	.retain-master:hover {

    background: #fff;

    color: #3bbc9a;

    border-color: #3bbc9a;

}

.recruting-list span{

	/* padding-bottom: 11px; */

	font-weight: 600;

}



.three-d-images {

    margin-left: 20px;

}

.image_3d {

	width: 100%;

	margin: 0 auto;

	text-align: center;

}

.image_3d img {

	max-width: 200px;

	height: auto;

	margin: 0 auto;

}

.main-nav li.current-menu-item a {

background: #30b0dd;

}

 

 .header-nav li.recruit-main.current-menu-item a {

    background: #50caf5 !important;

	color: white !important;

}





 .header-nav li.train-main.current-menu-item a {

    background: #f7bd47 !important;

	color: white !important;

}



.header-nav li.retain-main.current-menu-item a {

    background: #3bbc9a !important;

	color: white !important;

}



.header-nav li.multiply-main.current-menu-item a {

    background: #262a34 !important;

	color: white !important;

}


.module .header-nav li.toplink a {
    background: #3bbc9a;
    color: #fff;
}

body section.volunteers-area .flip-card {
    background-color: transparent;
    width: 300px;
    height: 395px;
    perspective: 1000px;
    text-align: center;
    margin: 0 auto;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}
body section.volunteers-area .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

body section.volunteers-area .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

body section.volunteers-area .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

body section.volunteers-area .flip-card-front {
  z-index: 2;
}

body section.volunteers-area .flip-card-back {
  transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
   background: #f8f8f8;
}
.coming-soon h1 {
    text-transform: uppercase;
    font-size: 50px;
    text-align: center;
}

.coming-soon {
    text-align: center;
}
/* end css */

/* ifram video responsive */

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* end responsive iframe */

/* .active-blue{
	background: #50caf5;
    color: #fff;
} */


.check-box {
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    flex: 0 0 11%;
    order: 2;
    width: 100%;
    margin-left: 1%;
    background: #c1bfbf;
    border-radius: 4px;
    position: relative;
    margin-bottom: 0;
}
.check-box .checkmark {
    
   
    width: 52px;
    border-radius: 4px;
    background: #ccc;
}
.check-box:hover {
    background: #50caf5;
}
/* On mouse-over, add a grey background color */
/*.check-box:hover input ~ .checkmark {
  background-color: #ccc;
}*/

/* When the checkbox is checked, add a blue background */
/*.check-box input:checked ~ .checkmark {
  background-color: #50caf5;
}*/

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.check-box input:checked ~ .checkmark:after, .check-box:hover .checkmark:after {
  display: block;
}
.check-box input {
    cursor: pointer;
    height: 0;
    width: 0;
    opacity: 0;
}
/* Style the checkmark/indicator */
.check-box .checkmark:after  {
        left: 0;
    top: 30%;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg) !important;
    right: 0;
    margin: 0 auto;
}
.check-box input:checked ~ .checkmark:after, .check-box:hover .checkmark:after {
    display: block;
}

.watched-video.video-detail button.recruit-main-btn,
.watched-video.video-detail span,
.watched-video.video-detail .title,
.watched-video.video-detail .check-box,
.active-blue.video-detail button.recruit-main-btn,
.active-blue.video-detail span,
.active-blue.video-detail .title,
.active-blue.video-detail .check-box{
    background: #50caf5 !important;
    color: #fff !important;
}