@charset "utf-8";

/* CSS Document */
h1,h2,h3,h4{font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;}

p {color:#222;}

a:focus, a:hover {
    text-decoration: none;
	outline: none;
}
#products h2{letter-spacing: 2px;}
#products small{
    color: #EEE;
    text-transform: uppercase;
    font-size: 20px;
} 
.row-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* columns are now equal height */
}
.row{margin-left: auto;margin-right: auto}
.vbs-quote{max-width:900px;padding:3em;margin:auto;}
.btn-vbs {
    font-size: 32px;
    letter-spacing: 2px;
    font-weight: 400;
    color: #FFF;
	text-shadow: 1px 1px 3px #555;
	cursor: pointer;
	outline: none;
	padding: .3em 0;
    display: block;
}
a.btn-vbs:hover{color:  #e50000;text-shadow: 0px 0px 0px  #e50000;outline: none; }

/*.btn-white {
    font-family: "Open Sans";
    font-size: 18px;
    letter-spacing: 2px;
    color: #333;
    background-color: #ffffff;
    border: 1px solid #FFF;
    box-shadow: none;
    margin: 1em;
    padding: 0.5em 1.5em;
    min-width: 240px;
	border-radius: 50px;
}

.btn-white:hover {
    background-color: #ffa32c;
    box-shadow: none;
	border: 1px solid #FFF;
}*/

/*.affix {
    border-bottom: 0px solid #eee;
    -webkit-box-shadow: 0px 0px 0px #eee;
    box-shadow: 0px 0px 0px #eee;
}

.affix>div>div>div>div>ul.navbar-right {
    padding: 0.6em 0 0 0;
	padding-bottom: .5em;
}*/
.video-ui{position: absolute;  z-index: 11;right: 15px;   top: 15px;  color: #000; text-shadow: 0px 0px 5px #000;  font-size: 2rem;}
.video-ui a { color: #FFF; padding: 0 10px;}
.fa-rotate-45 {
    transform: rotate(45deg);
}
/*.navbar-right {padding-bottom: .5em;}*/
.navbar {margin-bottom: 0px;}
.nav>li>a:focus,
.nav>li>a:hover {
    text-decoration: none;
    /*background-color: #000;*/
    color: #900 !important;
}
.kv{
    background: url(../img/careers/KV.jpg) no-repeat 50% 50% fixed;  
    height: 83vh;
    background-size: cover; 
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.kv-bonny{
    background: url(../img/careers/interview-bonny.jpg) no-repeat 50% 50%;  
    height: 65vh;
    background-size: cover; 
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: row;
    }


.kv-charlie{
    background: url(../img/careers/interview-charlie.jpg) no-repeat 50% 50%;  
    height: 65vh;
    background-size: cover; 
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: row;
    }

    .kv-christine{
        background: url(../img/careers/interview-christine.jpg) no-repeat 50% 50%;  
        height: 65vh;
        background-size: cover; 
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        flex-direction: row;
        }

        .kv-rob{
            background: url(../img/careers/interview-rob.jpg) no-repeat 50% 50%;  
            height: 65vh;
            background-size: cover; 
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            flex-direction: row;
            }

            .kv-craig{
                background: url(../img/careers/interview-craig.jpg) no-repeat 50% 50%;  
                height: 65vh;
                background-size: cover; 
                position: relative;
                overflow: hidden;
                display: flex;
                align-items: center;
                flex-direction: row;
                }

                .kv-daniel{
                    background: url(../img/careers/interview-daniel.jpg) no-repeat 50% 50%;  
                    height: 65vh;
                    background-size: cover; 
                    position: relative;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    flex-direction: row;
                    }
    

.kv.interview{
    background: url(../img/careers/20-interview.jpg) no-repeat 50% 50% fixed; 
    height: 45vh; background-size: cover; 
   
}
.kv.new{
    background: url(../img/careers/30-new.jpg) no-repeat 50% 50% fixed; 
    height: 45vh; 
    background-size: cover; 
   
}


.kv.culture{
    background: url(../img/careers/10-culture.jpg) no-repeat 100% 50% fixed; 
    height: 45vh; 
    background-size: cover; 
}
.kv.envir{
    background: url(../img/careers/10-environment.jpg) no-repeat 0% 90% fixed; 
    background-size: cover; 
    height: 45vh; 
}

.kv h1 {   text-shadow: 0px 0px 10px #555;}
.kv.envir h1 p{ text-shadow: 0px 0px 10px #555;margin-bottom: 10px;}
.kv h1 p {
    color: white;
    font-weight: 300;
    font-size: 1.5em;

}




.kv.new h1 p,.kv.company h1 p,.kv.envir h1 p, .kv.interview h1 p    {
     font-weight: 600;

}

.recruit .kv h1 p strong {
    /*color: #900;*/
    font-weight: 700;
}

.kv h1 span {color: #e50000; }
.kv h1 small {

    font-family: 'Open Sans';
    color: #FFF;
    display: block;
    letter-spacing: 2px;
    line-height: 2;
	font-size: 36px;
}
.kv.vs-container-fluid {
  /*  padding-top: 1em;*/
}



.vplay{
 /*width: 100% !important*/

}

.video-join{
    display: flex; align-items: center; flex-direction: row;
}
.rc-keyfeature {
    padding: 0em 0;
}
.review-item {
    padding: 1.5em;
}
span.vbs-yellow {
	
    color: #ffa32c;
	font-weight: 600;
}

/*.vs-container{max-width: 1280px;}*/
/*.vs-container-fluid {width: 100%; border-top: 0px;}*/

.rc-feature p span {font-size: 28px;font-weight: 100;}
.rc-feature p{font-family:'微軟正黑體', "Open Sans" !important;}
.rc-feature p strong{font-family:'微軟正黑體', "Open Sans" !important; }
.slick-track {margin: auto;}

.vs-series-icon{    display: inline-block;}
.vs-series-icon p{
    color: #FFF !important;
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 600;
    padding: 1.2em 1em;

    text-align: center;
    border-radius: 0px;
    margin:.5em .75em;
    margin-top:2em;
    text-transform: uppercase;
    border: 2px solid #EEE;  
}
.vs-series-icon a{color:#FFF;}
.vs-series-icon a:hover{color: rgba(255, 255, 255, 0.5); }
.vs-series-icon span{ color: #FFF !important;text-transform: uppercase;font-size: 20px;letter-spacing: 2px;font-weight: 600;}
.vp-icon{max-width: 980px;margin: auto; text-align: center;}
.vp-icon img{margin:.5em ; width:-webkit-fit-content; width:-moz-fit-content; width:fit-content; margin: auto;}
.vp-icon p{padding: 1em 0; text-align: center;}
.vp-icon a:hover * {opacity: 0.7;}
.series-icon{ color: #EEE; display: inline-block; margin:2em .75em; text-transform: uppercase; font-size: 20px; letter-spacing: 2px;  font-weight: 400;}
.series-icon:after{
    
    content: "";
    width: 4em;
    color: #FFF;
    background-color: #FFF;
    height: 1px;
    display: table;
    margin: 0.75em auto;
    cursor: pointer;
   
    /*background-image: -webkit-gradient(linear, left top, right top, from(#3dade9), to(#bf2fcb)), -webkit-gradient(linear, left top, right top, from(#3dade9), to(#bf2fcb));
    background-size: 100% 2px;*/
}

#videoModal.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0px !important;
	align-items: center; display: flex;
}

.vs-close {
	font-size: 4rem;
    font-weight: 100;
    color: #FFF;
    padding: 0;
    opacity: 1;
    margin-right: 0;
    line-height: 1;
    text-shadow: none;
	right: 0;
    position: absolute;
    top: -1em;
	cursor: pointer;
}

#videoModal .modal-body {
    height: 73vh;
}
#videoModal .modal-content {
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
	border: 0px solid rgba(0, 0, 0, .0);
	border-radius: 0px;
	background-color: transparent;
	
}
#videoModal .modal-dialog {
    margin: 80px auto;
	width: 69%;
}

#videoModal .modal-header {
    border-bottom: none;
	padding: 0px;
}

#videoModal .modal-body {
    padding: 0 3em 2em 3em;
}
.modal-open .modal {
       background-color: rgba(0, 0, 0, 0.85);
}

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

.video-background {height: 55vh;}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: visible;
}




.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video-rwd {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*div.kv::before {
    background-color: rgba(0, 0, 0, 0.3);
    content: " ";
    width: 100%;
    height: 80vh;
    position: absolute;
    top: 0px;
    margin: 0;
    left: 29.2%;
	}*/

.nav-tabs {
    padding-left: 0;
}

.nav-tabs > li {
    display: inline-block;
    float: none;
    cursor: pointer;
    list-style: none;
    outline: none;
    margin: 0 1em;
    padding-bottom: 8px;
}

.nav-tabs > li:first-child {
    padding-left: 0;
}

.nav-tabs > li > a {
    display: block;
    position: relative;
    padding: 0;
    color: #333;
    border: 0;
}

.nav-tabs>li.active>a {
    color: #900;    
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:visited {
    border: 0;
}

.nav-tabs > li.active > a::after {
    left: 0;
    position: absolute;
    bottom: -9px;
    width: 100%;
    border-bottom: 3px solid #900;
    content: ' ';
}
img.lazy {
    background-position: 50% 50%;
}

/*slider-fade*/
.slider-fade{
    position: relative;
    max-width: 1600px;
    margin: auto;
}
.fade-level1{position: absolute; }
.fade-level2{z-index: -1; }

.slider {
 animation: fade 8s infinite;
-webkit-animation: fade 8s infinite;
}

@-webkit-keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}

/*background slide*/
}


#about .col-xs-12{

padding-left: 20px;
padding-right: 20px;
}

#senior .col-sm-8, #senior .col-sm-4, #senior .col-xs-12{
    padding-left: 0;
    padding-right: 0;   
}
#senior .col-sm-4{
padding-bottom: 2em;
display: flex;
flex-direction: column;
align-items: center;
}

#senior ul{
    padding-left: 0;
    display: inline-block;
}

#senior a li, #new a li{
 
    list-style-type: none;
    text-align: left;
    color: white;
    font-size: 1rem;

}
#senior .rc-feature{padding: 0}
#new.rc-feature{
    padding: 0;
}
#new ul{
    padding-left: 0em;
   padding-top: 1em
}
#new h3{
    text-align: left;
    color: white
}
#newjob ul{
    list-style-type: none;
    padding-left: 0;
}
#add {
    background:#990000;

  
}
#add .rc-feature{
    padding : 0em;
 
    padding-top: 2vh;
    flex-direction:row;
    display: flex;
    align-items: center;

}

#add h2{
     color: white;
}

#add a li::before{
    content: "\e258";
    font-family: 'Glyphicons Halflings';
    font-size: 0.9rem;
    color: white;
    margin-left: 1em;
    margin-right: 0.5em;

}
#add a li{
 
    list-style-type: none;
    text-align: left;
    color: white;
    font-size: 1rem;
    font-family: '微軟正黑體' !important;
}
 #add ul{
      margin-bottom:2em; 
      padding-left: 0em;
 }



 
/*輪播開始*/

/* carousel */
#quote-carousel 
{
  padding: 0 10px 5px 10px;
  /* margin-top: 30px; */
}

/* Control buttons  */
#quote-carousel .carousel-control
{
  background: none;
  color: #222;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}
/* Previous button  */
#quote-carousel .carousel-control.left 
{
  left: -2px;
}
/* Next button  */
#quote-carousel .carousel-control.right 
{
  right: -32px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators 
{
  right:0;
  left:0;
  top: auto;
  bottom: -20px;
  margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li 
{
  background: #c0c0c0;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  border-top: 0px solid transparent;
  border-bottom: 0px solid transparent;
}
#quote-carousel .carousel-indicators .active 
{
  background: #333333;
}


.item> blockquote >.row {

    display: flex;
    align-items: center;


}
.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
blockquote {font-style: normal;}
blockquote small{color: #777}
#mtop{
    margin-top: 56px;
}

/* End carousel */

.item blockquote {
    border-left: none; 
    margin: 0;
}

.item blockquote img {
     margin-bottom: 27px;
    margin-top: 37px;
}

/* .item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
} */



/**
  MEDIA QUERIES
*/


@media (max-width: 992px){

.rc-feature {
    padding: 2em 0.25em;
    padding: 6em 0em;
}

)


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    #quote-carousel 
    {
      margin-bottom: 0;
      padding: 0 40px 30px 40px;
    }
    

    


}

/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) { 
    
    /* Make the indicators larger for easier clicking with fingers/thumb on mobile */
    
    #quote-carousel .carousel-indicators {
        bottom: -20px !important;  
    }
    #quote-carousel .carousel-indicators li {
        display: inline-block;
        margin: 0px 5px;
        width: 15px;
        height: 15px;
    }
    #quote-carousel .carousel-indicators li.active {
        margin: 0px 5px;
        width: 20px;
        height: 20px;
    }

    .item> blockquote >.row {

        display:block;
        align-items: center;
    
    }
    #top{

        top: 72px;
    }


    #mtop{
        margin-top: 202px;
    }
    
   
}






/*輪播結束*/



 @media (min-width: 768px) {
    .col-sm-1-5 {
        width: 20%;
        
    }
}










/*content*/
.person h3{
    color: #555;
    font-weight: 900;
    text-align: left;
    padding-left: 10px;
    font-size: 2rem;
}
.person>p{
    color: #990000; 
    text-align: left;
    padding-left: 10px;
    font-weight: 400;
    padding-bottom: 2em
}
#content h3{
    color: #990000;
    font-weight: 900;
    text-align: left;
    font-size: 2rem;
    margin-top: 0 ;
    margin-bottom:20px;
}
#content p{
    text-align: left;
}

#interview-person>.rc-feature, #content>.rc-feature{
 max-width: 1300px;

}
/*SSI*/
.kv.ssi{
    background: url(../img/careers/ssi-kv.jpg) no-repeat 50% 50% fixed;   
    background-size: cover; 
    height: 70vh; 
}
.rc-feature h1{
 font-size: 3em;
 font-weight: 800;
}
.icon{
  
  height: auto;
   margin: 15px 0;
   float: left;

}
.icon p{
    font-size: 13px;
    margin: 5px 0;
    margin-bottom: 0;
    color: #fff; 
    line-height: 100%;
    text-align: center !important;
}
.i-text{
    color: #fff;
    margin: 15px 0;
     line-height: 150%   
}
/*#myc1, #myc2, #myc3{
    background-color: #990000;
    display: flex; 
    align-items: center;
}
a:hover #myc1, a:hover #myc2, a:hover #myc3{
    background-color: #000;
    transition: 0.4s
}*/
.newssi{
    background: url(../img/careers/ssi-job-bg.jpg) no-repeat 50% 50% ;   
    background-size: cover; 
    padding: 5em 0;
   
    }
.newssi h3,.newssi li{
 color: white;
}
.leader{
    background: url(../img/careers/leader-bg.jpg) no-repeat 40% 0% ;   
    background-size: cover; 
     padding: 0em 0;
    ;
}
.leader .rc-feature{ 
    padding: 0;  
}
.leader .col-xs-12{
    padding:10em 0;
    padding-right: 8em;

}
.dropdown-header{
    color: #900;
}
/*content end*/

@media (min-width: 320px) {
    
.rc-livingroom{top:-10vh;position: relative; text-align: center;}
    
}

@media (min-width: 480px) {
	
    .article-item .thumb-outer {
        height: auto;
    }
}

@media (min-width: 768px) {
    .article-item .thumb-outer {
        height: 300px;
    }

 #video-Modal .modal-dialog {
    width: 1200px ;
    margin: 30px auto;

}
.company{
    
    background-color: #c6f2ff;
    height: 45vh; 
    background-size: cover; 
    position: relative;
   
    display: flex;
    align-items: center;
    flex-direction: row;
}
}

@media (min-width: 992px) {
    .nav>li>a:focus,
    .nav>li>a:hover {
        color: #CCC;
    }
    
    .vs-spec .vs-product-title {
        margin-top: 0.1em;
    }
    .kv-dark {
        height: 65vh;
        margin: 0 auto;
        margin-top: -1.5em;
    }
    .kv-dark-vp2785-4k {
        height: 85vh;
        margin: 0 auto;
        margin-top: -1.5em;
    }
    .kv-block {
        padding-top: 1em;
        margin-top: 0em;
    }
    .map li b:before {
        border-left: 6px solid #c2985c;
    }
    .map li b {
        background: #c2985c
    }
    .vs-spec>div>.navbar-right li.active a {
        color: #c2985c;
    }
    .two-block {
        padding: 0;
    }
    .rc-compare-img-container {
        margin: 0;
    }

    .rc-center {
        padding-top: 10%;
        padding-right: 5%;
        padding-left: 5%;
    }
    .rc-compare-img-container {
        max-height: 800px;
    }


}



@media (min-width: 1300px) {
    
    .rc-overlayer {
        position: absolute;
        padding: 5% !important;
    }

    .article-item .thumb-outer {
        height: 180px;
    } 
    #about .rc-feature{ padding: 8em 0em }
    #new .rc-feature{   padding: 6em 0}
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -88%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
} 

@media (max-width:1380px){
    
    /*.kv.vs-container-fluid {padding-top: 2em; } */
	.kv h1 p {font-size: 52px;}
    .kv h1 small{ font-size: 32px;} 
    .row-flex {
    display: inline-block;
    margin: auto;
    width: 100%; 
    }
	
 .video-foreground { height: 300%; top: -108%; }

}

@media (max-width: 768px) {

	.rc-feature p{font-size: 14px; line-height: 1.6;}
	
	#videoModal .modal-open .modal {background-color: rgba(0, 0, 0, 0.88);}
	
	#videoModal .modal-body {height: 35vh;}
	
    .kv h1 {
        font-size: 60px;
        margin-bottom: 10px;
        padding: 0 0.5em;
    }
    .kv.new, .kv.interview{
        height: 50vh;
    }
	.kv h1 p{ font-size: 42px;}
	
    .kv h1 small {
    font-size: 20px;
    line-height: 1.4;
    }
	.btn-vbs {padding: 0;}
    .kv .title{margin:auto;position:relative;}

    .rc-feature p span {
        font-size: 16px;
        font-weight: 100;
        text-align: center;
        display: block;
    }
	.vbs-quote{max-width:900px;padding:1.5em;margin:auto;text-align: left;}
    .nav>li {
        border-top: 0px solid #000;
    }

    .affix-top {
        padding-top: 0.5em;
    }
	#videoModal .modal-dialog {width: 100%;}
	.vp-icon p {
		font-size: 12px;
		line-height: 1.4;
	} 
	.video-background { height: 20vh;}
	.video-foreground { left: 0%;width: 100%; top: -100%;}
   
  
    #new .col-lg-5 {
     display: flex;
    flex-direction: column;
    align-items: center;
    }
    #new .col-lg-8 h2{
        text-align: center;

    }
    #add .rc-feature{
    padding-bottom:2em; 
    margin-bottom: -5em;
    
    flex-direction:column;
    display: flex;
    align-items: center;
    }
   .company{
    
   
    height:100% !important; 
    width: 100%;
    padding: 8vh 0;
 
    }
     .vplay{
     width: 10vw !important;

    }
    .newssi .col-sm-4{
    margin-top: 5em;
    flex-direction: column;
    display: flex;
    align-items: center;
   }
    .leader{
    /*background: url(../img/careers/leader-bg.jpg) no-repeat 40% 50% ;  */
    }
    .leader .col-xs-12{
    padding:5em 0;
     padding-right: 0em;
    margin-top: -2px;

}
    }

} 

@media (min-width:3800px) {
    .leader .vs-container{
        max-width: 2000px;
    }
    .leader .col-xs-12{
    padding:12em 0;
    padding-right: 15em;
    }


    
}


 
@media (max-width: 468px) {
    .kv{
    background: url(../img/careers/KV.jpg) no-repeat 50% 50%;  
    /* height: 50vh; */
    background-size: cover; 
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: row;
    }

    
   



    .kv.interview{
        background: url(../img/careers/20-interview.jpg) no-repeat 50% 50% ; 
        height: 45vh; background-size: cover; 
       
    }
    .kv.new{
        background: url(../img/careers/30-new.jpg) no-repeat 50% 50% ; 
        height: 45vh; 
        background-size: cover; 
       
    }
     .video-join{
        font-size: 1em !important;
        display: inline-block;
    }
    .lisa{
        padding: 0 5em;
    }
    .kv.ssi{
        background: url(../img/careers/ssi-kv.jpg) no-repeat 60% 50% ;   
        background-size: cover; 
        height: 45vh; 
    }
    
    .kv.culture{
        background: url(../img/careers/10-culture.jpg) no-repeat 100% 50%; 
        height: 45vh; 
        background-size: cover; 
    }
    .kv.envir{
        background: url(../img/careers/10-environment.jpg) no-repeat 0% 90% ; 
        background-size: cover; 
        height: 45vh; 
    }
    .rc-feature h1{
        font-size: 2em;
    }
 

  
}
	
.navbar.navbar-default {
    z-index: inherit;
    margin-bottom: 20px;
}


/*image box*/
.imagebox {
  background: white;
  padding: 0px;
  position: relative;
  /*text-align: center;*/
  width: 100%;
  

}

.imagebox img {
  opacity: 1;
  transition: 0.5s opacity;
  padding-right: 0px;
  padding-bottom: 15px;
}

.imagebox .imagebox-desc {
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0px;
  color: white;
  font-size: 1.2em;
  left: 0px;
  padding: 10px 15px;
  position: absolute;
  transition: 0.5s padding;
  text-align: left;
  width: 100%;
  margin-right: 15px;
  margin-bottom: 15px;



}

.imagebox .imagebox-desc h2{
    font-size: 1.5em;
    text-align: left;
    color: white;
    margin-bottom: 5px;
}
.imagebox .imagebox-desc p{
    font-size: 0.7em;
    text-align: left;
    color: white;   
}
.imagebox .imagebox-desc p span,.imagebox .imagebox-desc a li{
    font-size: 1rem;
    margin-left:1em;
    display:inline;
    color: white;
    
}

.imagebox .imagebox-desc p span::before{
    content: "\e258";
    font-family: 'Glyphicons Halflings';
    font-size: 0.9rem;
    color: white;
    margin-left: 1em;
    margin-right: 0.5em;

}
.imagebox .imagebox-desc a li::before, #senior a li::before, #new a li::before, #newjob a li::before{
    content: "\e258";
    font-family: 'Glyphicons Halflings';
    font-size: 0.9rem;
    color: white;
    margin-left: 1em;
    margin-right: 0.5em;

}

.imagebox:hover img {
  opacity: 0.7;
}

.imagebox:hover .imagebox-desc {
  padding-bottom: 10%;
}
.rc-feature a li:hover, .rc-feature a span:hover, #senior a li:hover, #new a li:hover{
    color: #ffc42c;
}
 #add a li:hover {
     color:#d87e17;
 }

#interview-person a:hover{
    color:#d87e17;
}

#about .rc-feature{
        font-size: 18px;
    }

.vs-product-title {
    margin: 0;
    padding: 10px 0 10px 0 !important;
}

.vs-product-title a.page-scroll {
    display: inline-block;
}

.typewriter p {
    display: inline-block;
    width: 0;
    color: #fff;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid rgba(220, 53, 69, 0); /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    /*letter-spacing: .15em; */
    animation: 
        typing 3s steps(30, end) 1s forwards,
        blink-caret .5s step-end 12;
}

/* The typing effect */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #dc3545 }
}

@media (max-width: 980px) {
    .typewriter p {
        animation: none;
        white-space: normal;
        border-right:none;
        width: auto;
    }
}

.height-dist {
    display: flex;
}

.height-dist > div {
    padding: 0;
}

.height-dist .col-dist-list {
    display: flex;
    flex-direction: column;

}

.height-dist .col-dist-list > a {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #990000;
    margin-top: 2px;
}

.height-dist .col-dist-list > a:first-child {
    margin-top: 0;
}

.height-dist .col-dist-list > a:hover {
    background-color: #000;
    transition: 0.4s
}

.height-dist .col-dist-list > a > div {
    display: flex; 
    align-items: center;
}

.height-dist .video-thumb {
    height: 100%;
    display: table;
    position: relative;
}

.height-dist .video-thumb .vplay {
    position: absolute;
    top: 39%;
    left: 42%;

}

.height-dist .video-thumb .thumb-img {
    display: table-cell;
    vertical-align: middle;
}


@media (max-width: 768px) {
    .height-dist {
        display: block;
    }




}