/***utilities***/
.no_margin {margin: 0;}
.no_padding {padding: 0;}
.clear {clear: both;}
.bgWhite {background-color: #fff; }
.btnBlue {background-color: #0085bb; color: #fff;}
.btn.btnBlue.focus, .btn.btnBlue:focus, .btn.btnBlue:hover {
    color: #fff;}

.txtBlue {color: #0085bb;}
.bgimg {margin-top: 80px; padding-top: 0; background-color: #fff; background-image: url("../images/careers/bg_applypg.jpg"); background-repeat: no-repeat;    background-size: 100% auto;background-position: center top;}
.bgimg_our_journey {margin-top: 80px; padding-top: 0; background-color: #fff; background-image: url("../images/mission_and_values/bg_our_journey.jpg"); background-repeat: no-repeat;    background-size: 100% auto;background-position: center top;}
.bgimg_myity {margin-top: 80px; padding-top: 0; background-color: #fff; background-image: url("../images/myity/bg_myity.jpg"); background-repeat: no-repeat;    background-size: 100% auto;background-position: center top;}
.titleBold {font-weight: bold;
    font-size: 35px;
    color: #0087BC;}

.sectionContainer{color: #00008B;}
.sectionContainer p {font-size: 18px;    line-height: 24px;}
.headingIcon {max-width: 150px; width: 10%; min-width: 100px; display: inline-block; margin-bottom: 15px;}
.headingIcon > img {width: 100%; vertical-align: top;height: auto;}
.pgHeading {padding: 10% 0;}
.pgHeading > h2 {margin-bottom: 10px; line-height: 50px; font-size: 3.5em;}


.contactformContainer { padding: 30px; padding-top:0;}
.contactformContainer .form-control {height: 50px; text-transform: initial;font-size: 16px;letter-spacing: 1px;background-color: #eeeded; }
.contactformContainer .form-group {margin-bottom: 30px;}
.contactformContainer textarea.form-control {height:auto;resize:none;}
.contactContent {width:100%; }
.contactContent p {color:#fff; font-size:26px;}




.formContainer {background-color: #f4f7d8; padding: 30px;}
.formContainer .form-control {height: 50px; text-transform: initial;font-size: 16px;letter-spacing: 1px;}
.formContainer .form-group {margin-bottom: 30px;}
label.error {color: #fe0000;    padding-left: 12px;}
#fileUploadTxtField-error {position: absolute;
    top: 100%;
    left: 0;}
.btnAttachment {background-color: #c9d83e; color: #00008B; position: relative; }
.btnAttachment i{    font-size: 1.3em;
    position: relative;
    transform: rotateX(169deg);}

.fileAttchment {position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;}

.formFooter {overflow: hidden; padding: 4% 0;background: #fff;}
.formFooter .btn {  padding-left: 5%;
    padding-right: 5%;}




/****current opening****/
.positionDiv {    margin-top: 5%;}
.positionDiv .panel-heading {padding: 0;}

.positionDiv .panel-title > a {background-color: #0085bb;
    color: #fff;
    font-size: 1.6em; background-image: url('../images/careers/iconPerson.png'); background-repeat: no-repeat; background-position:  left 20px;background-size: 40px 40px; padding-left:70px; padding-right:20px; padding-top:20px; padding-bottom:20px}

 .positionDiv .panel-heading a.collapsed {background-color:#ebebeb;color: #0085bb;}

.positionDiv .panel-heading a:after {   content: "_";    top: 14%;right: 21px;transform: translateY(-50%);right: 20px;font-size: 1.5em;margin-top: 0; color: #000;}
.positionDiv .panel-heading a.collapsed:after {
    content: "+";right: 20px;top: 50%;
}

.positionDiv .panel-body {background-color: #D3D3D3; padding: 50px 70px;}
.positionDiv .panel-body h5 {color:#0085bb;    font-size: 1.8em;
    margin-bottom: 20px;}
.btnApply {    font-size: 2em;
    line-height: normal; margin-top: 18px;}




/*****career funplace******/

.tabContainer {width: 100%;}
.tabContainer > ul {list-style-type: none; padding: 0; width: 100%; overflow: hidden;}
.tabContainer > ul > li {width: 50%;width: calc(50% - 8px); margin-bottom: 16px; overflow: hidden;}
.tabContainer > ul > li:nth-child(odd) {float:left;}
.tabContainer > ul > li:nth-child(even) {float:right;}
.tabContainer > ul > li > a {display: block;}
.tabContainer > ul > li > a > .divTab {width: 100%; height: 0; padding-bottom: 57.2178%; position: relative; background-repeat: no-repeat; background-size: cover; transition: transform 0.5s ease;}
.tabContainer > ul > li > a > .divTab1 { background-image: url("../images/careers/thumb1.jpg");}
.tabContainer > ul > li > a > .divTab2 { background-image: url("../images/careers/thumb2.jpg");}
.tabContainer > ul > li > a > .divTab3 { background-image: url("../images/careers/thumb3.jpg");}
.tabContainer > ul > li > a > .divTab4 { background-image: url("../images/careers/thumb4.jpg");}
.tabZoom {transform: scale(1.1);}
.divTab >.tabContent {position: absolute; bottom: 0; left: 0; width: 100%; height: 20%;background-image: url("../images/careers/rollover_bg.png"); background-repeat:repeat; z-index: 1; transition:all 0.4s ease-out; }
.tabText {position: absolute;top: 50%; left: 50%; transform: translate(-50%,-50%);z-index: 2;color: #fff;width: 62%;text-align: center;}
.tabText > h4 {margin-top: 0;    font-size: 3rem;
    margin-bottom: 5px;
    line-height: normal;color: #fff;}
.tabText > p {font-size: 16px; margin-bottom: 0; display:none; text-align:center;}

.tabContainer > ul > li > a:hover .tabContent { height:100%;}
.tabContainer > ul > li > a:hover .tabContent .tabText > p { display:block;}


/***slider***/

.sliderContainer {width: 100%; position: relative;}
.sliderContainer > ul {list-style-type: none; margin: 0; padding: 0;}
.sCaption {width: 100%; text-align: center; background-color: #f3f3f3; padding: 25px;}
.sCaption h3 {color: #0085bb; margin-top: 0;}
.sCaption p {font-size: 15px;
    line-height: 24px;}

.slick-arrow {position: absolute;
    top: 50%;
    transform: translateY(-50%); margin-top: -80px;    z-index: 9; width: 40px; height: 70px; background-repeat: no-repeat; 
background-position: center center; background-size: 100% 100%; background-color: transparent; box-shadow: none; border:0; outline: 0; text-indent: -9999999999px;}

.slick-prev {left: 10px; background-image: url("../images/careers/arrow_prev.png");}
.slick-next {right: 10px;background-image: url("../images/careers/arrow_next.png");}


/***************** new css defined one*****************/

.bgimg1 {margin-top: 80px; background-color: #fff; background-image: url("../images/careers/careers_bg.jpg"); background-repeat: no-repeat;    background-size: 100% auto;background-position: center top;}

/* Background image bg1*/
.backimg {margin-top: 80px; background-color: #fff; background-image: url("../images/bg1.jpg"); background-repeat: no-repeat;    background-size:cover;
background-position: center top;
background-attachment: fixed;}

/* Background image bg2*/
.backimg2 {background-color: #fff; background-image: url("../images/bg2.jpg"); background-repeat: no-repeat;    background-size: 100% auto;background-position: center top;}
.careerbg {background-color: #fff; background-image: url("../images/careers/careers_bg.jpg"); background-repeat: no-repeat;    background-size: 100% auto;background-position: center top;}


.scaleAnim {position: relative; transform: scale(0.9);transition: transform 0.4s linear;}
.scaleComplete {transform: scale(1);}


.div3 {position: relative; transform: scale(0.7);transition: transform 0.8s linear;}
.topComplete {transform: scale(1);}
.div4 {position: relative;
    left: -400px; transition: left 1s linear;}
.leftComplete {left: 0;}

#resumefile-error{position: absolute;
    top: 100%;
    left: 0;
    font: 400 12px/1.8 "helvetica";
    font-weight: bold;}


.forGif { position: relative; display: inline-block;    margin-left: -20px;}

.bgGif{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-repeat: no-repeat;background-size: 100% 100%; background-position: center center;}

.for_current_openning{
	background-color:white;
	padding-top: 5px;
}
.panel-group .panel + .panel{
	margin-top:3px;
}









@media only screen and (max-width: 992px) {
    .tabText {width: 90%;}
    .tabText > h4 {font-size: 2rem;}
    .tabText > p,.sCaption p {font-size: 14px;}
    
    @media only screen and (max-width: 767px) {
        .pgHeading > h2 {font-size: 4em;}
        .service_module-subtitle {
        font-size: 16px;
        line-height: 24px;}
        .sectionContainer p {
        font-size: 16px;
        line-height: 24px;}
        .bgimg {background-image: url("../images/careers/bg_applypg_mob.jpg"); }
		.bgimg1 {margin-top: 80px; background-position: center top; background-image: url("../images/careers/careers_bg_mob.jpg"); }
		.backimg {background-image: url("../images/bg1-1.jpg");}

        .positionDiv .panel-title > a {font-size: 1.2em;}
        .positionDiv .panel-body {padding: 20px;}
        .positionDiv .panel-title > a {
        
        padding: 15px 30px 15px 50px;
        font-size: 1em;
        background-position: left 15px center;
        background-size: 30px 30px;}
        .positionDiv .panel-heading a::after {right: 15px;}
        .titleBold {font-size: 22px;}
        .tabText > p {
            font-size: 14px;
            line-height: 20px;
        } 
        .sCaption {padding: 10px 15px;}      
        .sCaption h3 {font-size: 20px;
            margin-bottom: 5px;}
        .sCaption p {font-size: 12px;
            line-height: 20px;}
        .slick-arrow {width: 30px; height: 53px;margin-top: -95px;}
        @media only screen and (max-width: 480px) {
            .pgHeading > h2 {
            font-size: 2.1em;
            }
			
            .service_module-subtitle,.sectionContainer p {
                font-size: 14px;
                line-height: 22px;
            }
            .formContainer {padding: 30px 10px;}
            .btn{padding: 8px 15px;}
            .tabContainer > ul > li {width: 100% !important; float: none !important;}
            .sCaption p {font-size: 12px;
            line-height: 20px;}
        }
    }
}


/***timeline css**************************************************************************************************/

.headline_backcolor {background-color:rgba(255, 255, 255, 0.6);}

.sectionTimeline .pgHeading > h2 {line-height: 31px;}
.sectionTimeline .service_module-subtitle {max-width: 930px;}
.sectionTimeline .sectionContainer {padding: 60px;}
.sectionTimeline .sectionContainer .titleBold {margin-top: 0;}

/***timeline starts**/
/* The actual timeline (the vertical ruler) */
.timelineContainer {margin-top: 50px;}
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: #e5e5e5;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

/* tContainer around content */
.tContainer {
    padding: 0px 10% 0 0;
    position: relative;
    background-color: inherit;
    width: 50%;
}
.tContainer.left {padding: 0px 10% 0 0;}
.tContainer.right {padding: 0px 0 0 10%;}



/* The circles on the timeline */
.tContainer::after {
        content: '';
    position: absolute;
    width: 6%;
    height: 2px;
    background-color: #e5e5e5;
    top: 50%;
    transform: translateY(-50%);
}
.tContainer.left::after {
    right: 6.5%;
}
.tContainer.right::after {
    left: 6.5%;
}

/* Place the tContainer to the left */
.left {
    left: 0; position: relative;
}
.left .content:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

/* Place the tContainer to the right */
.right {
    left: 50%;
}

/* Add arrows to the left tContainer (pointing right) */
.left .content::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    z-index: 1;
    right: -20px;
    border: medium solid #c3d41e;
    border-width: 12px 0 12px 24px;
    border-color: transparent transparent transparent #c3d41e;
}

/* Add arrows to the right tContainer (pointing left) */
.right .content::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotateY(-180deg);
    width: 0;
    z-index: 1;
    left: -20px;
    border: medium solid #c3d41e;
    border-width: 12px 0 12px 24px;
    border-color: transparent transparent transparent #c3d41e;
}

/* Fix the circle for tContainers on the right side */
.right::after {
    left: -16px;
}

/* The actual content */
.content {background-color: #c3d41e;
    position: relative;
	-webkit-box-shadow: 0 10px 6px -6px #777;
	   -moz-box-shadow: 0 10px 6px -6px #777;
	        box-shadow: 0 10px 6px -6px #777;}

.tContainer.left .content {background-position: center left;padding:25px 4% 25px 35%;left:-100px;}
.tContainer.right .content {background-position: center right;padding:25px 35% 25px 4%;right:-100px;}

.leftAnimTl {-webkit-animation: leftAnimTl 2s linear;
animation: leftAnimTl 2s linear;animation-fill-mode: forwards;}	
.rightAnimTl {-webkit-animation: rightAnimTl 2s linear;
    animation: rightAnimTl 2s linear;animation-fill-mode: forwards;}
@-webkit-keyframes leftAnimTl {
    0%   {left:-100px;}
    100% {left:0;}
}
@keyframes leftAnimTl {
    0%   {left:-100px;}
    100% {left:0;}
}

@-webkit-keyframes rightAnimTl {
    0%   {right:-100px;}
    100% {right:0;}
}
@keyframes rightAnimTl {
    0%   {right:-100px;}
    100% {right:0;}
}

.tContainer >span { position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    font-size: 1.4em;
    font-weight: bold;
    background: #fff;
    z-index: 1;
    line-height: 20px;}
.tContainer.left >span {right: -19px;}
.tContainer.right >span {left: -19px;}

.tContainer .content p {margin: 0; font-size: 14px; }
/*.tContainer .content > span {background-image: url(../images/timeline/timelineIcon.png); background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; width: 50px; height: 50px; display: inline-block; margin-bottom: 12px;font-size: 1.5em;
font-weight: 600;}*/
.tContainer div.tIcon{    position: absolute;
    top: 0;
    left: 0;
    width: 31%;
    height: 100%;
background: #0084bd; background-repeat:no-repeat;background-position:center;}
.tContainer .content > span {display: inline-block; margin-bottom: 12px;font-size: 1.6em;
font-weight: 600;}
.tContainer.right div.tIcon {left:auto; right:0;}



/* Media queries - Responsive timeline on screens less than 600px wide */
@media all and (max-width: 991px) {
    .sectionTimeline .sectionContainer {
    padding: 60px 30px;
    }
    .timeline::after {left: 0;}
    .tContainer {width: 100%; margin-bottom: 30px;}
    .tContainer.left,.tContainer.right {
    padding: 0 0 0 14%; left: 0; right: auto;}
    .tContainer.left .content,.tContainer.right .content {
    background-position: center right;
    padding: 25px 32% 25px 4%;}
	.tContainer div.tIcon {left:auto; right:0; width:30%;    background-size: 75px;}
    .right .content::before,.left .content::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotateY(-180deg);
    width: 0;
    z-index: 1;
    left: -12px;
    border: medium solid #c3d41e;
    border-width: 6px 0 6px 12px;
    border-color: transparent transparent transparent #c3d41e;}
    .tContainer.right > span,.tContainer.left > span {
    left: -19px; right: auto;}
    .tContainer.right::after,.tContainer.left::after {
    left: 4%; right: auto;}
	.tContainer .content p {
		margin: 0;
		font-size: 11px !important;
	}
    
    @media all and (max-width: 480px) {
    .sectionContainer {
    padding: 60px 15px;
    }

}



/**timeline ends**/