product-grid4html {
  height: 100%;
}
@font-face {
  font-family: MyanmarAngoun;
  src: url('../font/MyanmarAngoun.ttf');
}
@font-face{
  font-family: MyanmarSabae;
  src: url('../font/MyanmarSabae.ttf');
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
  background:#fdfafa;
  font-family:MyanmarSabae;
}
.lib-title{
  border-bottom: 2px solid red;
}
.home_navi{
    width: 80px;
    height: 50px;
    background: yellow;
    text-align: center;
    float: left;
    display: table;
}
.breadcrumb {
  padding: 0;
  background: #D4D4D4;
  list-style: none; 
  overflow: hidden; 
}
.breadcrumb>li+li:before {
  padding: 0;
}
.breadcrumb li { 
  float: left; 
}
.breadcrumb li.active a {
  background: brown;                   /* fallback color */
  background: #ffc107 ; 
}
.breadcrumb li.completed a {
  background: brown;                   /* fallback color */
  background: hsla(153, 57%, 51%, 1); 
}
.breadcrumb li.active a:after {
  border-left: 30px solid #ffc107 ;
}
.breadcrumb li.completed a:after {
  border-left: 30px solid hsla(153, 57%, 51%, 1);
} 

.breadcrumb li a {
  color: white;
  text-decoration: none; 
  padding: 10px 0 10px 45px;
  position: relative; 
  display: block;
  float: left;
}
.breadcrumb li a:after { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid hsla(0, 0%, 83%, 1);
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  left: 100%;
  z-index: 2; 
} 
.breadcrumb li a:before { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  margin-left: 1px;
  left: 100%;
  z-index: 1; 
} 
.breadcrumb li:first-child a {
  padding-left: 15px;
}
.breadcrumb li a:hover { background: #ffc107  ; }
.breadcrumb li a:hover:after { border-left-color: #ffc107   !important; }

.bg-unchkhw{
  background: #ff70704a;
}
.bg-gradient-app 
{
  background: #CAC531;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #F3F9A7, #CAC531);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #F3F9A7, #CAC531); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-f1f8e9{
  background: #f1f8e9
}
 .flex-caption-bg {
        width: 100%;
        padding: 6%;
        background: rgb(0 165 127);
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,.3);
        margin-top: -4px;
  }
.profilestudent{
  display: inline-block;
  width: 120px;
  height: 120px;
  background-position: 50% 50%;
  background-size: cover;
  border-radius: 50%;
  overflow: hidden;
}
 #imageUpload
    {
        display: none;
    }

    #profile
    {
        cursor: pointer;
    }

    #profile-container {
        overflow: hidden;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
    }

    #profile-container img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
    /********************* Shopping Demo-4 **********************/
.product-grid4,.product-grid4 .product-image4{position:relative}
.product-grid4{font-family:Poppins,sans-serif;text-align:center;border-radius:5px;overflow:hidden;z-index:1;transition:all .3s ease 0s;border: 2px solid #f6f6f6;}
.product-grid4:hover{box-shadow:0 0 10px rgba(0,0,0,.2)}
.product-grid4 .product-image4 a{display:block}
/*.product-grid4 .product-image4 img{width:100%;height:auto}*/
.product-grid4 .pic-1{opacity:1;transition:all .5s ease-out 0s}
.product-grid4:hover .pic-1{opacity:0}
.product-grid4 .pic-2{position:absolute;top:0;left:0;opacity:0;transition:all .5s ease-out 0s}
.product-grid4:hover .pic-2{opacity:1}
.product-grid4 .social{padding:0;margin:0 auto;list-style:none;position:absolute;right:0;left:0;transform:translateY(-50%);transition:all .3s ease 0s}
.product-grid4 .social li{display:inline-block;transition:all .7s}
.product-grid4 .social li:nth-child(1){transition-delay:.15s}
.product-grid4 .social li:nth-child(2){transition-delay:.3s}
.product-grid4 .social li:nth-child(3){transition-delay:.45s}
.product-grid4:hover .social li{opacity:1}
.product-grid4 .social li a{color: #222;
    background: #8ec40d;
    font-size: 13px;
    padding: 3px 7px;
    border-radius: 17px;
    display: block;
    transition: all .3s ease 0s;}
.product-grid4 .social li a:hover{color:#fff;background:#16a085}
.product-grid4 .social li a:hover:after,.product-grid4 .social li a:hover:before{opacity:1}
.product-grid4 .product-discount-label,.product-grid4 .product-new-label{color: #fff;
    background-color: #16a085;
    font-size: 16px;
    font-weight: 800;
    border-radius: 0px 2px 5px 0px;
    padding: 6px 21px;
    position: absolute;
    left: 0px;
    top: 0px;
    transition: all .3s;}
.product-grid4 .product-discount-label{left:auto;right:10px;background-color:#d7292a}
.product-grid4:hover .product-new-label{opacity:0}
.product-grid4 .product-content{padding:25px 0px;}
.product-grid4 .title{font-size:15px;font-weight:400;text-transform:capitalize;margin:0 0 7px;transition:all .3s ease 0s}
.product-grid4 .title a{color:#222}
.product-grid4 .title a:hover{color:#16a085}
.product-grid4 .price{color:#16a085;font-size:17px;font-weight:700;margin:0 2px 15px 0;display:block}
.product-grid4 .price span{color:#909090;font-size:13px;font-weight:400;letter-spacing:0;text-decoration:line-through;text-align:left;vertical-align:middle;display:inline-block}
.product-grid4:hover .add-to-cart{border:1px solid transparent;background:#16a085;color:#fff}
.product-grid4 .add-to-cart:hover{background-color:#505050;box-shadow:0 0 10px rgba(0,0,0,.5)}
@media only screen and (max-width:990px){
  .product-grid4{
    margin-bottom:30px;
     border: 2px solid red;}
}
@media only screen and (min-width:990px){
     .questionlg{
      padding: 2em !important;
    }
}
.navbar-toggler {
  position: relative;
}
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: 0;
}
.navbar-toggler span {
   display: block;
   background-color: #444;
   height: 3px;
   width: 25px;
   margin-top: 4px;
   margin-bottom: 4px;
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   position: relative;
   left: 0;
   opacity: 1;
}
.examtime_display{
    font-weight: bold;
    letter-spacing: 2px;
    color: #ffffff;
    border: 2px solid #000000;
    background-color: #060707b8;
    padding: 7px;
    position: fixed;
    z-index: 1;
    right: 0;
    top: 60px;
}
#examtime{
  font-weight: bold;
    letter-spacing: 2px;
}

.fw-bold {
  font-weight: bold;
}


.nav_learn_color{
  background: #dee2e6;
}
.nav_theme_color{
  background: #ffd95b;
  border-bottom: 1px solid #ffd95b;
  padding-bottom: .3525rem;
  padding-top: .3525rem;
}
.nav_class_color{
  background: #83a4d4;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #b6fbff, #83a4d4);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #b6fbff, #83a4d4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.dropdown-menu-center {
  right: auto;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.theme_text{
  color: red;
}

.welcome{
  padding-top: 10px;
  margin-top: 55px;
 border-top: 1px solid black;
}
.welcome_home{
  margin-top: 55px;
}
#website{
  display: none;
}
.big-button{
  width: 100%;
  padding:20px;
  text-align: center;
  background: #17a2b8;
  margin-bottom: 20px;
}
.myheader_pg{
      border-bottom: 1px solid red;
    border-left: 10px solid #17a2b8;
    padding: 10px;
}
.student_profile_img{
  border-radius: 50%;
  width: 100px;
  height: 100px;
  }
  .my_list_h4{
    margin-bottom: 20px;
    padding: 5px;
    background: #17a2b8;
    border-radius: 10px;
    color: white;
  }
ul.pagination{
  text-align: center;
}

ul.pagination li {
    border-radius: 14px;
    margin: 5px;
}
ul.pagination li.first{

}
ul.pagination li.prev{

}

ul.pagination li.prev.disabled {
     background: #dddddd;
}
ul.pagination li.next.disabled{
  background:#dddddd;

}

ul.pagination li.prev  a{
  color:  black;
}


ul.pagination li.active{
    color: green;
}

ul.pagination li.last{

}
ul.pagination li.next{

}
ul.pagination p{

}

.content {
  flex: 1 0 auto; 
}
.footer {
  flex-shrink: 0; 
}

/* comment area * /

/* line 1303, E:/170 Kanox Agency/170_Kanox_Agency_html/sass/_blog.scss */
.comments-area {
  background: transparent;
  border-top: 1px solid #eee;
  padding: 45px 0;
  margin-top: 50px;
}
/* line 1314, E:/170 Kanox Agency/170_Kanox_Agency_html/sass/_blog.scss */
.comments-area h4 {
  margin-bottom: 35px;
  font-size: 18px;
}

/* line 1321, E:/170 Kanox Agency/170_Kanox_Agency_html/sass/_blog.scss */
.comments-area h5 {
  font-size: 16px;
  margin-bottom: 0px;
}

/* line 1330, E:/170 Kanox Agency/170_Kanox_Agency_html/sass/_blog.scss */
.comments-area .comment-list {
  padding-bottom: 48px;
}

/* line 1333, E:/170 Kanox Agency/170_Kanox_Agency_html/sass/_blog.scss */
.comments-area .comment-list:last-child {
  padding-bottom: 0px;
}

/* line 1337, E:/170 Kanox Agency/170_Kanox_Agency_html/sass/_blog.scss */
.comments-area .comment-list.left-padding {
  padding-left: 25px;
}

/* line 1358, E:/170 Kanox Agency/170_Kanox_Agency_html/sass/_blog.scss */
.comments-area .thumb {
  margin-right: 20px;
}

/* line 1361, E:/170 Kanox Agency/170_Kanox_Agency_html/sass/_blog.scss */
.comments-area .thumb img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

/* line 1367, E:/170 Kanox Agency/170_Kanox_Agency_html/sass/_blog.scss */
.comments-area .date {
  font-size: 14px;
  color: #999999;
  margin-bottom: 0;
  margin-left: 20px;
}

/* line 1374, E:/170 Kanox Agency/170_Kanox_Agency_html/sass/_blog.scss */
.comments-area .comment {
  margin-bottom: 10px;
  color: #777777;
  font-size: 15px;
}


/*******************************you are my validation**************/
 .error-message {
  color: red;
  display: inline-block;
  font-size: 12px;
  line-height: 15px;
  margin: 10px 0;
}
.form-error{
  border:1px solid red;
}

/******************************end you have end validation***********/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  line-height: 1.5;
}
.embed-responsive .card-img-top {
    object-fit: cover;
}

.group-fieldset {
    border: 1px solid #ddd;
    margin: 1.125rem 0;
    padding: 1.25rem;
    background-color: #fdfeff;
}

.group-fieldset legend {
    font-size: 16px;
    font-weight: bolder;
    color:#0014ff;
}



.lecture_video{
}
.wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 400px;
    margin: 50vh auto 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

.switch_box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 200px;
    min-width: 200px;
    height: 200px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

/* Switch 1 Specific Styles Start */

.box_1{
    background: #eee;
}
.home_card_info {
    background: #17a2b8;
    text-align: right;
    letter-spacing: 5px;
    border-top: 2px solid black;
    color: white;
}

.home_industry_card{ /*use*/
  border: 2px solid blue;
  cursor: pointer;
}
.home_industry_card :hover{
  background: cyan;
}



/* Switch 2 Specific Style Start */


input[type="checkbox"].switch_2{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100px;
  height: 8px;
  background: #444;
  border-radius: 5px;
  position: relative;
  outline: 0;
  cursor: pointer;
}

input[type="checkbox"].switch_2:before,
input[type="checkbox"].switch_2:after{
  position: absolute;
  content: "";
  -webkit-transition: all .25s;
  transition: all .25s;
}

input[type="checkbox"].switch_2:before{
  width: 40px;
  height: 40px;
  background: #ccc;
  border: 5px solid #666;
  border-radius: 50%;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

input[type="checkbox"].switch_2:after{
  width: 30px;
  height: 30px;
  background: #666;
  border-radius: 50%;
  top: 50%;
  left: 10px;
  -webkit-transform: scale(1) translateY(-50%);
          transform: scale(1) translateY(-50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

input[type="checkbox"].switch_2:checked:before{
  left: calc(100% - 35px);
}

input[type="checkbox"].switch_2:checked:after{
  left: 75px;
  -webkit-transform: scale(0);
          transform: scale(0);
}


.toggle_switch{
  width: 100px;
  height: 45px;
  position: relative;
}

input[type="checkbox"].switch_3{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: 0;
  z-index: 1;
}

svg.checkbox .outer-ring{
  stroke-dasharray: 375;
  stroke-dashoffset: 375;
  -webkit-animation: resetRing .35s ease-in-out forwards;
          animation: resetRing .35s ease-in-out forwards;
}

input[type="checkbox"].switch_3:checked + svg.checkbox .outer-ring{
  -webkit-animation: animateRing .35s ease-in-out forwards;
          animation: animateRing .35s ease-in-out forwards;
}

input[type="checkbox"].switch_3:checked + svg.checkbox .is_checked{
  opacity: 1;
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
}

input[type="checkbox"].switch_3:checked + svg.checkbox .is_unchecked{
  opacity: 0;
  -webkit-transform: translateX(-200%) rotate(180deg);
          transform: translateX(-200%) rotate(180deg);
}


@-webkit-keyframes animateRing{
  to{
    stroke-dashoffset: 0;
    stroke: #b0aa28;
  }
}

@keyframes animateRing{
  to{
    stroke-dashoffset: 0;
    stroke: #b0aa28;
  }
}

@-webkit-keyframes resetRing{
  to{
    stroke-dashoffset: 0;
    stroke: #233043;
  }
}

@keyframes resetRing{
  to{
    stroke-dashoffset: 0;
    stroke: #233043;
  }
}

/* Switch 3 Specific Style End */


/* Switch 4 Specific Style Start */

.box_4{
    background: #eee;
}

.input_wrapper{
  width: 80px;
  height: 40px;
  position: relative;
  cursor: pointer;
}

.input_wrapper input[type="checkbox"]{
  width: 80px;
  height: 40px;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #315e7f;
  border-radius: 2px;
  position: relative;
  outline: 0;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.input_wrapper input[type="checkbox"]:after{
  position: absolute;
  content: "";
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  background: #dfeaec;
  z-index: 2;
  border-radius: 2px;
  -webkit-transition: all .35s;
  transition: all .35s;
}

.input_wrapper svg{
  position: absolute;
  top: 50%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  fill: #fff;
  -webkit-transition: all .35s;
  transition: all .35s;
  z-index: 1;
}

.input_wrapper .is_checked{
  width: 18px;
  left: 18%;
  -webkit-transform: translateX(190%) translateY(-30%) scale(0);
          transform: translateX(190%) translateY(-30%) scale(0);
}

.input_wrapper .is_unchecked{
  width: 15px;
  right: 10%;
  -webkit-transform: translateX(0) translateY(-30%) scale(1);
          transform: translateX(0) translateY(-30%) scale(1);
}

/* Checked State */
.input_wrapper input[type="checkbox"]:checked{
  background: #23da87;
}

.input_wrapper input[type="checkbox"]:checked:after{
  left: calc(100% - 37px);
}

.input_wrapper input[type="checkbox"]:checked + .is_checked{
  -webkit-transform: translateX(0) translateY(-30%) scale(1);
          transform: translateX(0) translateY(-30%) scale(1);
}

.input_wrapper input[type="checkbox"]:checked ~ .is_unchecked{
  -webkit-transform: translateX(-190%) translateY(-30%) scale(0);
          transform: translateX(-190%) translateY(-30%) scale(0);
}

/* Switch 4 Specific Style End */
.ctrl_pn{
    width: 100%;
    position: absolute;
    top:40%;
    display: none;
    z-index: 100;
    padding: 10px;
}
.next_btn,.prev_btn{
   background: black;
   color: white;
   font-weight: bolder;
   padding: 15px;
   cursor: pointer;

}
.ctrl_pn .next_btn{
}

.ctrl_pn .prev_btn{
  
}
.lecture_video :hover + .ctrl_pn{
    display: block;
}

#tabs{
    background: #007b5e;
    color: #eee;
}
#tabs h6.section-title{
    color: #eee;
}

#tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #fd0000;
    background-color: transparent;
    border-color: transparent transparent #f3f3f3;
    border-bottom: 4px solid !important;
    font-weight: bold;
}
#tabs .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #eee;
    font-size: 20px;
}

#accordion3{
    /*padding-left: 80px;*/
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#accordion6 .panel{
    border: 1px solid #bf6026;
    border-radius: 0;
    box-shadow: none;
    margin-left: 50px;
    margin-bottom: 12px;
}
 
#accordion6 .panel-heading{
    padding: 0;
    background: #fff;
    position: relative;
}
#accordion6 .panel-title a{
    display: block;
    padding: 3px 20px 3px 20px;
    border: none;
    font-size: 20px;
    font-weight: 400;
    color: #bf6026;
    position: relative;
    background: #f1f1f2;
}

#accordion6 .panel-body p{ margin-bottom: 0; }
/* *********************************************Logged ********************/
.logged_service{
    
   
}
.logged_service .card-body{
    margin: 10px;
    border: 2px inset blue;
}

.header {
    display: inline-block;
    border: 1px solid #3ec5db;
    border-radius: 15px;
    font-size: 18px;
}


.input {
    margin-bottom: 1rem;
}

.stepguide_img{
    width: 100%;
}
.banner-subg1 i{
    color: red;
}
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
  top:20%;
  left: 50%;
    transform: translateX(-50%);
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}



.jtec-stats-section{
   background: #b3d7ff;  /* fallback for old browsers */

}
.home-slider{
    /*min-height: 700px;*/
}
.carousel-item {
  height: 65vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.carousel-caption{
    background: #0496ade0;
    margin-bottom: 3em;
    color: #fff;
}
.carousel-caption .lead {
   color: black;
}

.cat-title{
    font-size: 17px;
}
.cat-card{
    height: 114px;
    background: url(../img/glass.jpg);
    background-size: 100% 100%;
}
.my-card span{
    border: 2px solid #374000;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    text-align: center;
    font-weight: bolder;
}
.img-step{
    width: 120px;
    height: 120px;
    border-radius: 60px;
    margin: 5px auto;
    border: 5px inset gold;
}
.step_name{
       background: #17a2b8;
    width: 90%;
    border-left: 10px double #e10514;
    padding-left: 10px;
    height: 40px;
    color: #fff;
    position: relative;
    text-align: center;
    line-height: 40px;
}

.step_name:after{
    content:"";
    position:absolute;
    height:0;
    width:0;
    left:100%;
    top:0;
    border:20px solid transparent;
    border-left: 20px solid #17a2b8;
}
    
.my-card{
        position: absolute;
        /* left: 40%; */
        top: -20px;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        text-align: center;
        background: blue;
        color: white;
    } 
.square {
  height: 110px;
  width: 130px;
  border: 2px dotted #938a8a;
}

.example_box_shadow.step_1 {
    box-shadow:     46px     -22px    0       0         darkred;
    box-shadow: 0 -1px 6px 0 rgba(0, 0, 0, 0.8);
}
.yes-square{
  height: 35px;
  width: 35px;
  color: #00eda1;
  border: 1px solid #938a8a;
}

/*-- header --*/
/*-- header --*/
.header-grid-left ul li a,
.new-collections-grid1-image-pos a,
.new-collections-grid1 h4 a,
.login a,
.register-home a,
.checkout-right-basket a,
.bootstrap-tab-text-grid-right ul li a,
.occasion-cart a,
input[type="submit"],
.mail-grid-right1 ul li a,
.categories ul li a,
.new-products-grid-right-add-cart p a,
.new-products-grid-right h4 a,
.products-right-grid1-add-cart p a,
.timer-grid-left h3 a,
.new-collections-grid1-left p a,
.copy-right p a,
.footer-grid-sub-grid-right h4 a,
input[type="submit"],
.footer-grid ul li a {
    transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
}
.w3layouts-header {
    background:#eb1d50;
}
#navbar{
    transition: 0.6s;
}
.header_area{
    transition: 0.6s;
}
.navbar-dark .navbar-nav .nav-link {
  color: black;
}
a.navbar-brand {

    letter-spacing: 1px;
    font-family: Arial;
    font-weight: bold;
    color: black;
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
    color: #fff;
}
header h1 a {
    color:#fff;
    display: block;
    font-size: 12px;
    letter-spacing: 5px;
    word-spacing: 5px;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: 600;
    text-transform: uppercase;
    color: #000;
    letter-spacing: 1px;
    padding: 0 0.5em;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
    color:#fff;
    background:transparent;
    border-radius: 5px;
}

.w3ls-btn {
    letter-spacing: 1px;
    font-weight: 600;
}
/*.dropdown-item:hover, .dropdown-item:focus {
    color: #eb1d50;
    text-decoration: none;
    background-color: transparent;
}*/
header h1 a {
	color:#fff;
	display: block;
	font-size: 12px;
	letter-spacing: 5px;
	word-spacing: 5px;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: 600;
    text-transform: uppercase;
    color: #000;
    letter-spacing: 1px;
    padding: 0 0.5em;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
	color:#fff;
	background:transparent;
	border-radius: 5px;
}
a.nav-link{
  color: black;
}


.w3ls-btn {
	letter-spacing: 1px;
	font-weight: 600;
}

/*-- banner-top --*/
.banner-info {
    padding: 13em 0 0em;
    text-align: center;
}
.banner-info h3 {
    color: #fff;
    font-size: 55px;
	letter-spacing:2px;
    text-transform: capitalize;
    margin-bottom: 10px;
	
}
.banner-info.info2 h3 {
    text-shadow: 0px 0px 0px #9a3c03;
    color: #fff;
}
.banner-info p {
    color: #ffffff;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 400;
    line-height: 1.8em;
    margin: 2em auto;
    width: 80%;
    text-transform: capitalize;
}
.bg3 {
    text-align: center;
}
/* //banner */
label.contact-form-text {
    font-size: 15px;
    margin: 0.8em 0 0.5em;
    color: #ffffff;
    font-weight: 400;
}
.agileinfo-contact-main-address span {
    color: #ff0000;
}
.icon2 {
    margin-bottom: 1em;
}
label.header span {
    color: #fd1707;
}


.banner-btm {
    position:relative;
}

.banner-btm-grid2 {
    padding: 0;
}
.banner-subg1 p a {
    color: #777;
}
.banner-subg1 {
    padding: 0 2em;
}
.banner-grid2:nth-child(2){
    border-right:1px solid #d8d8d8;
	border-left: 1px solid #d8d8d8;
}
.banner-btmg1,
.w3layouts-reg-form {
    background: #000;
    padding: 2.5em;
}
.banner-bottom-main {
    box-shadow: -3px 0px 15px 1px rgba(0, 0, 0, 0.08);
    padding: 1.3em 2em;
    background: #fff;
    text-align: left;
    margin-top: -3em;
    background: #fff;
}
.banner-btmg1 h3 {
    font-size: 28px;
    color: #eb1d50;
    font-weight: 500;
}
.banner-subg1 h3, .about-bottom h5 {
    color: #222222;
    font-size: 20px;
    letter-spacing: 1px;
}
.about-bottom h5 {
    color: #FFF;
}
.w3ls-about-bottom h5 {
    color: #9a3c03;
    font-weight: 500;
}
.banner-subg1 span.fa {
    font-size: 50px;
    color: #222;
}

h4.modal-title {
    font-size: 24px;
    color: #000;
    font-weight: 600;
    letter-spacing: 2px;
}
.modal-body p {
    font-size: 15px;
    color: #777;
    line-height: 1.8em;
    padding: 20px 0;
}
/*-- //banner-bottom --*/
.heading-agileinfo {
    letter-spacing: 1px;
    text-align: center;
    color: #eb1d50;
    /* text-transform: uppercase; */
    position: relative;
    margin-top: 0;
    line-height: 45px;
}
.heading-agileinfo span {
    display: block;
    font-size: 17px!important;
    margin-top: 1em;
    letter-spacing: 4px;
    text-transform: capitalize;
    color: #000000;
    font-weight: 500;
}

.heading-agileinfo-none {
    letter-spacing: 1px;
    text-align: center;
    color: #eb1d50;
    position: relative;
    margin-top: 0;
    line-height: 45px;
}
.heading-agileinfo-none span {
    display: block;
    font-size: 17px!important;
    margin-top: 1em;
    letter-spacing: 4px;
    text-transform: capitalize;
    color: #000000;
    font-weight: 500;
}
.categories-left{
	background:#fff;
	    box-shadow: -3px 0px 15px 1px rgba(0, 0, 0, 0.08);
}
/*-- //categories --*/

/*-- card --*/
h5.card-title {
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 1em;
    color: #000;
}
p.card-text {
    color: #777;
    font-size: 15px;
    line-height: 1.8em;
    letter-spacing: 1px;
}
/*-- //card --*/
/*-- prepare --*/
.prepare_wthree{
	background: url(../images/bg1.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
	    background-attachment: fixed;
}

.sakurabg{
  background: url(../images/sakurabg.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
      background-attachment: fixed;
}
.prepare_top_right {
    background: #fff;
}
.prepare_top_left{
    background: #fff;
}

.prepare_wthree h5 {
    color: red;
    letter-spacing: 2px;
    font-size: 20px;
}
.prepare_wthree h4 {
    font-size: 25px;
    letter-spacing: 2px;
    line-height: 1.5;
}
/*-- //prepare --*/
/*-- clients--*/
.clients{
	padding:5em 0;
}
.clients label.line{
	background:#000;
}
.clients h4 {
	font-size: 16px;
	text-transform:uppercase;
	letter-spacing:2px;
	color:#000;
	margin-bottom:35px;
}


.client h5 {
    font-size: 25px;
    color: #f14156;
    text-align: center;
}
/*-- //clients--*/
/*-- stats --*/
.stats{
	
}
.jtec_stats_left {
    padding: 0;
    text-align: center;
}
.jtec_stats_left p {
    font-size: 2.5em;
    font-weight: 700;
    letter-spacing: 2px;
    color:#eb1d50;
    margin: 0 0 0.2em 0;
}
.jtec_stats_left h3 {
    font-size: 18px;
    font-style: italic;
    letter-spacing: 2px;
    font-weight: 500;
}

.jtec-state-bgimage{
  background: url(../img/banner/bg-4.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
   -moz-background-size: cover;
      /*background-attachment: fixed;*/
}

.inner_w3l_agile_grids-1 h6 {
    font-size: 15px;
    margin-top: 0.8em;
    color: #777;
}
section.stats h4 {
    font-size: 40px;
    width: 65%;
    text-align: center;
	 line-height: 1.2em;
    margin: 0 auto;
    color: #2c363e;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
}
p.stap {
    font-size: 15px;
    color: #777;
    margin: 1em 0 5em;
    text-align: center;
}
h3.tittle-w3ls {
    color: #ffffff;
    font-size: 2em;
    letter-spacing: 2px;
}
/*-- //stats --*/
/*-- footer --*/
.arial-font{
  font-family: Arial, Helvetica, sans-serif;
}
.footer-copyright {
     flex-shrink: none;

}
.footer-copyright p {
	font-size: 13px;
	letter-spacing: 2px;
	text-align: center;
}

.footer-copyright a {
	text-decoration: none;
}

.footer-copyright a:hover {
	color: #ffffff;
}

.social-footer li {
    display: inline-block;
    margin: 0 6px;
}
/*-- //Footer --*/
/*-- services --*/


.modal-content {
	border-radius:0px;
}

/*-- //services --*/
/*-- about --*/
.welcome-left h3 {
    color: #000;
    font-size: 36px;
    letter-spacing: 1px;
}
.welcome-left h4 {
    color: #8a8989;
    font-size: 17px;
    line-height: 1.8;
    margin: 15px 0;
    letter-spacing: 1px;
}
.welcome-left p {
    font-size: 15px;
    color: #777;
    line-height: 1.8em;
}
/*-- //about --*/
/*-- team --*/
  
.team_grid_info h3 {
    font-size: 1.2em;
    color: #222;
    margin: 1.5em 0 0.5em 0;
    font-weight: 600;
}

.team_grid_info p {
    color: #b7b6b6;
    font-size: 1em;
}

ul.team_icons li {
	display: inline-block;
	margin-right: 1em;
}

.team_grid ul li:last-child {
	margin: 0;
}
.team_grid_info:hover{
	background:#eb1d50;
}
.team_grid_info {
    text-align: center;
    padding: 0;
    -webkit-transition: 0.5s ease-in;
    -moz-transition: 0.5s ease-in;
    -ms-transition: 0.5s ease-in;
    -o-transition: 0.5s ease-in;
    transition: 0.5s ease-in;
    border: 1px solid #ddd;
    padding: 2em 2em;
    background: #f5fbf6;
}

.team_icons ul li {
	list-style: none;
	display: inline-block;
	margin-right: 10px;
}

.team_icons ul li a i {
	height: 32px;
	width: 32px;
	background: none;
	line-height: 31px;
	color: #222;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	border: 1px solid #24262d;
	    border-radius: 5px;
}
.team_icons ul li a i:hover {
    color: #f97c69;
    border: 1px solid #f97c69;
}

.team_grid_info img {
	margin: 0 auto;
	text-align: center;
	border-radius: 15px;
}
.team_icons ul {
    margin-top: 1em;
}

p.sub_p {
    margin: 1.2em 0 0;
}
section.mid_slider {
  background: #eaf5f7;
}
/*-- //team --*/
/*-- gallery --*/

.w3_agile_gallery_effect {
    position: relative;
}

a.sb {
    display: block;
}

.hover14 figure {
    overflow: hidden;
    position: relative;
    margin: 0;
}

.hover14 figure::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    -webkit-transform: skewX(-17deg);
    -moz-transform: skewX(-17deg);
    -o-transform: skewX(-17deg);
    -ms-transform: skewX(-17deg);
    transform: skewX(-17deg);
}

.hover14 figure:hover::before {
    -webkit-animation: shine .95s;
    -moz-animation: shine .95s;
    animation: shine .95s;
}

@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}

@keyframes shine {
    100% {
        left: 125%;
    }
}
#preloader {
background: #085078;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #85D8CE, #085078);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #85D8CE, #085078); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position: fixed; 
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
/*LOADER-5*/
    
    #loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

.card_title_l{
  border-bottom: 2px solid #e10917;
    margin-bottom: 20px;
}

.banner_gradent{
    min-height: 200px;
    position: relative;
    width: 100%;
}
.banner_about_grad{
background: #2193b0;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.banner_header{
  padding-top:75px;
  border-bottom: 1px solid #17a2b8;
}
.my_heading_data{
  padding: 20px 0;
}
.banner_bg_login{
  background: #59C173;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #5D26C1, #a17fe0, #59C173);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #5D26C1, #a17fe0, #59C173); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    color: black;
}
.banner_bg_reg{
  background: #00B4DB;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  color:white;
}

.banner_bg_lesson{
  background: #867f27;
  color:white;
}

.banner_bg_about{
  background: #ccecad;
  color:white;
}
.banner_bg_faq{
  background: #ffd200;
}

.banner_c{
    
    padding-top: 75px;
}
.banner_title{
    position: absolute;
    right: 16px;
    bottom: 8px;

}
.banner_scope{
    position: relative;
    width: 100%;

}
.banner-1 {
    background: url(../images/bg1.jpg) no-repeat center;
    background-size: cover;
    

}
.banner_thank{
    background: url(../img/banner/thanku.jpg) no-repeat center;
    background-size: 100% 100%;
  
}
.banner_job{
    background: url(../img/banner/japan.jpg) no-repeat center;
    background-size: 100% 100%;
}

.contact_banner{
    background: url(../img/banner/contact.jpg) no-repeat center;
    background-size: cover;
}
.banner_image{
    width: 100%;
    background: #085078;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #85D8CE, #085078);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #85D8CE, #085078);
}
.contact_social_media{
  font-size: 28px;
    letter-spacing: 20px;
}
/*--contact--*/
.map iframe {
    width: 100%;
    min-height: 350px;
    border: 5px solid #eb1d50;
}
.address h5 {
    color: #000;
    text-transform: capitalize;
    font-size: 1.1em;
}
.address p a,
p.c-txt {
    color: #777;
}
.address p a:hover {
    color: #000;
}
.contact-top1 .form-group label,
form.f-color .form-control {
    color: #000;
    letter-spacing: 1px;
}
.contact-top1 h5 {
    font-size: 2em;
}
.address h5 {
    font-size: 1.5em;
}
/*--//contact--*/
/*--Typography--*/
.well {
    font-weight: 300;
    font-size: 14px;
}
.list-group-item {
    font-weight: 300;
    font-size: 14px;
}

.xs h3, h3.m_1{
	color:#000;
	font-size:1.7em;
	font-weight:300;
	margin-bottom: 1em;
}

.label {
	font-weight: 300 !important;
	border-radius:4px;
}  

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	border-top: none !important;
}
.tab-content > .active {
	display: block;
	visibility: visible;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
	z-index: 0;
}

.bs-docs-example {
	margin: 1em 0;
}
section#tables  p {
	margin-top: 1em;
}


.tab-content > .active {
	display: block;
	visibility: visible;
}
.label {
	font-weight: 300 !important;
}
.label {
	padding: 4px 6px;
	border: none;
	text-shadow: none;
}
.alert {
	font-size: 0.85em;
}
h1.t-button,h2.t-button,h3.t-button,h4.t-button,h5.t-button {
	line-height:2em;
	margin-top:0.5em;
	margin-bottom: 0.5em;
}
li.list-group-item1 {
	line-height: 2.5em;
}

.in-gp-tl{
	padding:0;
}
.in-gp-tb{
	padding-right:0;
}
 {
	margin-bottom: 44px;
}
h2.typoh2{
    margin: 0 0 10px;
}

/*-- //typography --*/

/* -- //Responsive code -- */
/*============================ For Activity Image Lightbox   ============================*/

#image-gallery .modal-footer{
  display: block;
}

.thumb{
  margin-top: 15px;
  margin-bottom: 15px;
}

.activity_item_date {
   position: absolute;
    top: 5px;
    right: 20px;
    color: #fff;
    background-color: #e10514;
    padding: 10px;
    text-transform: uppercase;
    font-weight: bolder;
}
/*--------------------------- Event  -----------------------------*/
.event-card{
    height: 550px;
  } 
 .event-card .blog_item_date {
    position: absolute;
    bottom: 290px;
    left: 10px;
    display: block;
    color: #fff;
    background-color: #4f57ef;
    padding: 8px 15px;
    border-radius: 5px;
}

/*----------------------------  Blog  --------------------------------------*/
.blog-card{
    height: 500px;
  }
 .blog_item_date {
    position: absolute;
    bottom: 75%;
    left: 5px;
    display: block;
    color: #fff;
    background-color: #17a2b8;
     padding: 8px 15px; 
    border-radius: 5px
}
.blog_meta_list{
  list-style-type: none;
}

/*----------------------------------- Home --------------------------------------*/

#service-icon{
    color: red;
}

/*----------------------------------  Banner Image  -------------------------------------*/


.download-btn {
    border-radius: 5em;
    color: #fff;
    background: linear-gradient(to right,#990000, #FF0000);
    /* background: linear-gradient(to right, #40743f, #499d19); */
    border: 0;
    padding:10px;
    margin-left: 1%;
    font-size: 13px;
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
}
.apply-btn {
    border-radius: 5em;
    color: #fff;
    background: linear-gradient(to right, #495f68, #1977db);
    border: 0;
    padding: 10px;
    margin-left: 1%;
    font-size: 13px;
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
}

    .view-btn{
      border-radius: 5em;
      color: #fff;
      background: linear-gradient(to right, #d3003a, #ff2662c9);
      border: 0;
      padding-left: 25px;
      padding-right: 25px;
      padding-bottom: px;
      /* padding-top: 10px; */
      margin-left: 1%;
      font-size: 15px;
      box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
  }



/*-----------------------------            Freee Course         -----------------------------------*/

  .category_card{
    position: relative;
    border-radius: 0px;
  }

  .category_list{
    list-style: none;
  }

  .category-item{
        border-bottom: 2px dotted #eee;
  }

  .list{
    margin-left: -35px;
  }


.ribbon1 { /* use in students/mycourses */
  position: absolute;
  top: -6.1px;
  left: 10px;
}
.ribbon1:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 10px solid #0d81f8;
}
.ribbon1 span {
  position: relative;
  display: block;
  text-align: center;
  background: #0d81f8;
  font-size: 14px;
  line-height: 1;
  padding: 12px 8px 10px;
  border-top-right-radius: 8px;
  width: 100px;
}
.ribbon1 span:before, .ribbon1 span:after {
  position: absolute;
  content: "";
}
.ribbon1 span:before {
 height: 6px;
 width: 6px;
 left: -6px;
 top: 0;
 background: #0d81f8;
}
.ribbon1 span:after {
 height: 6px;
 width: 8px;
 left: -8px;
 top: 0;
 border-radius: 8px 8px 0 0;
 background: #2043c0;
}
/*******************some copy ribbon **/
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
   z-index: 1;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;

}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #3498db;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 18px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}

/* top left*/
.ribbon-top-left {
  top: -10px;
  left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: 0;
  right: 0;
}
.ribbon-top-left::after {
  bottom: 0;
  left: 0;
}
.ribbon-top-left span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg);
}

/* top right*/
.ribbon-top-right {
  top: -10px;
  right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.ribbon-top-right::before {
  top: 0;
  left: 0;
}
.ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.ribbon-top-right span {
  left: -25px;
  top: 30px;
  transform: rotate(45deg);
}

/* bottom left*/
.ribbon-bottom-left {
  bottom: -10px;
  left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.ribbon-bottom-left::before {
  bottom: 0;
  right: 0;
}
.ribbon-bottom-left::after {
  top: 0;
  left: 0;
}
.ribbon-bottom-left span {
  right: -25px;
  bottom: 30px;
  transform: rotate(225deg);
}

/* bottom right*/
.ribbon-bottom-right {
  bottom: -10px;
  right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
  border-bottom-color: transparent;
  border-right-color: transparent;
}
.ribbon-bottom-right::before {
  bottom: 0;
  left: 0;
}
.ribbon-bottom-right::after {
  top: 0;
  right: 0;
}
.ribbon-bottom-right span {
  left: -25px;
  bottom: 30px;
  transform: rotate(-225deg);
}
/**end of some copy ribbon *************/
custom.blockquote {
    background: #fff;
    padding: 20px;
    box-shadow: -20.84px 21.58px 30px 0 rgba(176,176,176,.1);
    margin: 35px 0;
    margin-top: -20px;
  }

  custom.blockquote p {
    background: #f9f9ff;
    border-left: 2px solid #ff2f92;
    padding: 25px;
    font-size: 15px;
  }


    .category_card{
    position: relative;
    border-radius: 0px;
  }

  .category_list{
    list-style: none;
  }

  .category-item{
        border-bottom: 2px dotted #eee;
  }

  .list{
    margin-left: -35px;
  }

  /*---------------------------        Apply Form       ------------------------------*/
  .require_label::after {
    content: "**";
    color: red;
  }

  label.require_label{
    font-weight: 800;
  }

  /*-----------------     Record Modal Checkbox     -------------*/
    .modal-body .inputGroup {
    background-color: #fff;
    display: block;
    margin: 10px 0;
    position: relative;
  }
  .modal-body .inputGroup label {
    padding: 12px 30px;
    width: 100%;
    display: block;
    text-align: left;
    color: #3C454C;
    cursor: pointer;
    position: relative;
    z-index: 2;
    -webkit-transition: color 200ms ease-in;
    transition: color 200ms ease-in;
    overflow: hidden;
    background-color: #f6f6f6;
  }
  .modal-body .inputGroup label:before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    content: '';
    background-color: #5562eb;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale3d(1, 1, 1);
            transform: translate(-50%, -50%) scale3d(1, 1, 1);
    -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    z-index: -1;
  }
  .modal-body .inputGroup label:after {
    width: 32px;
    height: 32px;
    content: '';
    border: 2px solid #D1D7DC;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: 2px 3px;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    cursor: pointer;
    -webkit-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
  }
  .modal-body .inputGroup input:checked ~ label {
    color: #fff;
  }
  .modal-body .inputGroup input:checked ~ label:before {
    -webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
            transform: translate(-50%, -50%) scale3d(56, 56, 1);
    opacity: 1;
  }
  .modal-body .inputGroup input:checked ~ label:after {
    background-color: #54E0C7;
    border-color: #54E0C7;
  }
  .modal-body .inputGroup input {
    width: 32px;
    height: 32px;
    -webkit-box-ordinal-group: 2;
            order: 1;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
  }
/***************FAQ page ***************/

  .term-condition-warp {
      box-shadow: 0px 1px 11px -3px rgba(0, 0, 0, 0.59);
      border-radius: 3px;
      background-color: #fff;
      padding: 40px 50px;
  }

  .template_faq {
      background: #edf3fe none repeat scroll 0 0;
  }
  .panel-group {
      background: #fff none repeat scroll 0 0;
      border-radius: 3px;
      box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.04);
      margin-bottom: 0;
  }
  #accordion .panel {
      border: medium none;
      border-radius: 0;
      box-shadow: none;
      margin: 0 0 15px 10px;
  }
  #accordion .panel-heading {
      border-radius: 30px;
      padding: 0;
  }
  #accordion .panel-title a {
      background: #3d6ea3 none repeat scroll 0 0;
      border: 1px solid transparent;
      border-radius: 30px;
      color: #fff;
      display: block;
      font-size: 16px;
      font-weight: 600;
      padding: 12px 20px 12px 50px;
      position: relative;
      transition: all 0.3s ease 0s;
  }
  #accordion .panel-title a.collapsed {
      background: #fff none repeat scroll 0 0;
      border: 1px solid #ddd;
      color: #333;
  }
  #accordion .panel-title a::after, #accordion .panel-title a.collapsed::after {
      background: #3d6ea3 none repeat scroll 0 0;
      border: 1px solid transparent;
      border-radius: 50%;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.58);
      color: #fff;
      content: "  \276E";
      font-family: fontawesome;
      font-size: 25px;
      height: 40px;
      left: -20px;
      line-height: 40px;
      position: absolute;
      text-align: center;
      top: -5px;
      transition: all 0.3s ease 0s;
      width: 40px;
  }
  #accordion .panel-title a.collapsed::after {
      background: #fff none repeat scroll 0 0;
      border: 1px solid #ddd;
      box-shadow: none;
      color: #001dac;
      content: " \276F";
  }
  #accordion .panel-body {
      background: transparent none repeat scroll 0 0;
      border-top: medium none;
      padding: 20px 25px 10px 9px;
      position: relative;
  }
  #accordion .panel-body p {
      border-left: 1px dashed #8c8c8c;
      padding-left: 25px;
  }

  .answer {
    font-size: 15px;
    color: #c26969!important;
    line-height: 30px;
  }
  /********End of Faq*******/

  /*----------------       Timer          -----------------*/
      #clockdiv{
      font-family: sans-serif;
      color: #fff;
      display: inline-block;
      /*font-weight: 80;*/
      text-align: center;
      font-size: 14px;
      position: fixed;
      margin-top: 70px;
      padding-top: 5px;
      top: 0;
      right: 0;
      width: 110px;
      border: 1px solid #96e5f1;
      background-color: #000000bf;
      border-radius: 4px;
    }

    #clockdiv > div{
      display: inline-block;
    }

    #clockdiv div > span{
      padding: 2px 6px 2px 6px;
      border-radius: 3px;
      background: #ef3669;
      display: inline-block;
    }

    .smalltext{
      padding-top: 5px;
      font-size: 8px;
    }

    .no_cursor{
      cursor: not-allowed !important;
    }

    
    .card-sidebar-bg{
      background-color: #eff4fa40;
    }
    #accordion-style-1 .btn-link {
        font-weight: 400;
        color: #007b5e;
        background-color: transparent;
        text-decoration: none !important;
        font-size: 16px;
        font-weight: bold;
    }

    #accordion-style-1 .card-body {
        border-top: 2px solid #007b5e;
    }

    #accordion-style-1 .card-header .btn.collapsed .fa.main{
      display:none;
    }
    .text-small{
      font-size: 10px;
    }

    /*-------------       Forum post      --------------*/
        .post {
      background-color: #ffffff;
      border-radius: 2px;
      box-shadow: 0 1px 2px #c9cccd;
      margin-bottom: 20px;
      }
    .post .wrap-ut {
        width: 100%;
    }
    .post .userinfo {
        width: 15%;
        padding: 20px 0 15px 15px;
    }
    .post .posttext {
        width: 85%;
        padding-right: 30px;
        padding-top: 20px;
        padding-bottom: 0px;
        color: #989c9e;
        font-size: 14px;
        font-family: 'Open Sans Light', sans-serif;
        line-height: 25px;
    }
    .post .avatar {
        width: 37px;
        margin-left: 5px;
    }
    .avatar {
        position: relative;
    }
    .avatar img {
        border-radius: 50%;
    }
    .avatar .red {
        background-color: #f27777;
    }
    .avatar .status {
        position: absolute;
        right: 0;
        top: 0;
        width: 12px;
        height: 12px;
        line-height: 12px;
        border-radius: 50%;
        border: solid 2px #ffffff;
    }
    .avatar .green {
        background-color: #80d3ab;
    }
    .post .icons {
        width: 48px;
        border-top: solid 1px #f1f1f1;
        margin-top: 12px;
        padding-top: 7px;
    }
    .post h2 {
        color: #363838;
        font-size: 18px;
        font-family: 'Open Sans', sans-serif;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .pull-left {
        float: left!important;
    }
    .post_date{
      font-size: 10px;
    }
    .reply {
      margin-left: 80px;
    }

     *,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.intro {
  background: #F45B69;
  padding: 100px 0;
}


.note{
  color : #C62828;
}


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul {
  background: linear-gradient(to bottom, #e7ffe1 0%, #caeaef 100%);
  padding: 50px 0;
  counter-reset: section;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 7px;
  margin: 0 auto;
  padding-top: 50px;
  background: #42A5F5;
}

.timeline ul li::after {
 
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
   content: "";
  font-family: "Oswald", Georgia, Cambria, "Times New Roman", Times, serif;
  color: #ffffff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  width: 3em;
  height: 3em;
  background-color: #FF4081;
    border: .2em solid #fff;
  border-radius: 50%;
  position: absolute;
  counter-increment: section;
  content: counter(section);
  text-shadow: 0 1px 0 #424242;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.08);
  /*left: -4.5em;*/
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  border-radius: 7px;
  background: #c5dba3;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.08);
}

.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #c5dba3 transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #c5dba3;
}

time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}

/*//Notification*/
  .alert-simple.alert-warning {
    border: 1px solid rgba(241, 142, 6, 0.81);
    color: #844b10;
    transition: 0.5s;
    cursor: pointer;
    font-size: 15px;
  }
  .alert-simple.alert-warning:before {
      content: '';
      position: absolute;
      width: 0;
      height: calc(100% - 44px);
      border-left: 1px solid;
      border-right: 4px solid;
      border-bottom-right-radius: 3px;
      border-top-right-radius: 3px;
      left: 0;
      top: 50%;
      transform: translate(0,-50%);
      height: 40px;
  }


    @media (max-width: 767px){
      .subans{
        margin-left: 2em  !important;
      }
      .questionlg{
        padding: 0.3em !important;
      }
      .rrcenter{
        text-align: center !important;
        align-self: center !important;
      }
      .btncenter{
        justify-content: center!important;
      }
    .llb{
      display: none;
    }
    .bbl{
      display: block !important;
    }
    .post .userinfo {
        width: 20%;
        padding: 15px 0 15px 15px;
    }
    .post .posttext {
        width: 80%;
        padding-right: 15px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .reply {
      margin-left: 45px;
    }
 }

  /*--------------------     Exam      -------------------*/
  .radiocheck {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radiocheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 17px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radiocheck:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radiocheck input:checked ~ .checkmark {
  background-color: #2196F3;
}

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

/* Show the indicator (dot/circle) when checked */
.radiocheck input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radiocheck .checkmark:after {
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

.text-decoration-none{
  text-decoration: none;
}
.view-all{
  margin-top: 5px;
  border: 2px solid #21d7cb87;
    padding: 8px 18px;
    border-radius: 20px;
}

/*---------------- Menu ----------------*/
  body.offcanvas-active{
      overflow:hidden;
  }
  .offcanvas-header{ display:none; }
  .screen-overlay {
    width:0%;
    height: 100%;
    z-index: 30;
    position: fixed;
    top: 0;
    left: 0;
    opacity:0;
    visibility:hidden;
    background-color: rgba(34, 34, 34, 0.6);
    transition:opacity .2s linear, visibility .1s, width 1s ease-in;
  }

  .screen-overlay.show {
    transition:opacity .5s ease, width 0s;
    opacity:1;
    width:100%;
    visibility:visible;
  }
  .account{
    display: none;
    visibility:visible;
  }

  .mobile-offcanvas{
      visibility: hidden;
      /*transform:translateX(-100%);*/
      border-radius:0; 
      display:block;
      position: fixed;
      top:0; 
      bottom: 0;
      left: 100%;
      z-index: 1200;
      width:30%;
      overflow-y: auto;
      overflow-x: hidden;
      transition: visibility .2s ease-in-out, transform .2s ease-in-out;
  }

  .mobile-offcanvas.show{
      visibility: visible;
      transform: translateX(-100%);
  }
  .profile-image{
      width: 90px;
      height: 90px;
      border-radius: 50%;
    }

  /*Percentage Circle*/

  .rect-auto, .c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice, .c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice, .c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice, .c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice, .c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice, .c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice, .c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice, .c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice, .c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice, .c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice {
    clip: rect(auto, auto, auto, auto);
  }

  .pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
    position: absolute;
    border: 0.08em solid #307bbb;
    width: 0.84em;
    height: 0.84em;
    clip: rect(0em, 0.5em, 1em, 0em);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  .pie-fill, .c100.p51 .bar:after, .c100.p51 .fill, .c100.p52 .bar:after, .c100.p52 .fill, .c100.p53 .bar:after, .c100.p53 .fill, .c100.p54 .bar:after, .c100.p54 .fill, .c100.p55 .bar:after, .c100.p55 .fill, .c100.p56 .bar:after, .c100.p56 .fill, .c100.p57 .bar:after, .c100.p57 .fill, .c100.p58 .bar:after, .c100.p58 .fill, .c100.p59 .bar:after, .c100.p59 .fill, .c100.p60 .bar:after, .c100.p60 .fill, .c100.p61 .bar:after, .c100.p61 .fill, .c100.p62 .bar:after, .c100.p62 .fill, .c100.p63 .bar:after, .c100.p63 .fill, .c100.p64 .bar:after, .c100.p64 .fill, .c100.p65 .bar:after, .c100.p65 .fill, .c100.p66 .bar:after, .c100.p66 .fill, .c100.p67 .bar:after, .c100.p67 .fill, .c100.p68 .bar:after, .c100.p68 .fill, .c100.p69 .bar:after, .c100.p69 .fill, .c100.p70 .bar:after, .c100.p70 .fill, .c100.p71 .bar:after, .c100.p71 .fill, .c100.p72 .bar:after, .c100.p72 .fill, .c100.p73 .bar:after, .c100.p73 .fill, .c100.p74 .bar:after, .c100.p74 .fill, .c100.p75 .bar:after, .c100.p75 .fill, .c100.p76 .bar:after, .c100.p76 .fill, .c100.p77 .bar:after, .c100.p77 .fill, .c100.p78 .bar:after, .c100.p78 .fill, .c100.p79 .bar:after, .c100.p79 .fill, .c100.p80 .bar:after, .c100.p80 .fill, .c100.p81 .bar:after, .c100.p81 .fill, .c100.p82 .bar:after, .c100.p82 .fill, .c100.p83 .bar:after, .c100.p83 .fill, .c100.p84 .bar:after, .c100.p84 .fill, .c100.p85 .bar:after, .c100.p85 .fill, .c100.p86 .bar:after, .c100.p86 .fill, .c100.p87 .bar:after, .c100.p87 .fill, .c100.p88 .bar:after, .c100.p88 .fill, .c100.p89 .bar:after, .c100.p89 .fill, .c100.p90 .bar:after, .c100.p90 .fill, .c100.p91 .bar:after, .c100.p91 .fill, .c100.p92 .bar:after, .c100.p92 .fill, .c100.p93 .bar:after, .c100.p93 .fill, .c100.p94 .bar:after, .c100.p94 .fill, .c100.p95 .bar:after, .c100.p95 .fill, .c100.p96 .bar:after, .c100.p96 .fill, .c100.p97 .bar:after, .c100.p97 .fill, .c100.p98 .bar:after, .c100.p98 .fill, .c100.p99 .bar:after, .c100.p99 .fill, .c100.p100 .bar:after, .c100.p100 .fill {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  .c100 {
    position: relative;
    font-size: 80px;
    width: 1em;
    height: 1em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    float: left;
    margin: 0 0.1em 0.1em 0;
    background-color: #cccccc;
  }
  .c100 *, .c100 *:before, .c100 *:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }
  .c100.center {
    float: none;
    margin: 0 auto;
  }

  .c100.small {
    font-size: 80px;
  }
  .c100 > span {
    position: absolute;
    width: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    width: 5em;
    line-height: 5em;
    font-size: 0.2em;
    /*color: #cccccc;*/
    display: block;
    text-align: center;
    white-space: nowrap;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }
  .c100:after {
    position: absolute;
    top: 0.08em;
    left: 0.08em;
    display: block;
    content: " ";
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: whitesmoke;
    width: 0.84em;
    height: 0.84em;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  .c100 .slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0em, 1em, 1em, 0.5em);
  }

  .c100:hover {
    cursor: default;
  }
  .c100:hover > span {
    width: 3.33em;
    line-height: 3.33em;
    font-size: 0.3em;
    color: #307bbb;
  }
  .c100:hover:after {
    top: 0.04em;
    left: 0.04em;
    width: 0.92em;
    height: 0.92em;
  }

  /*-------- Subscriber bell -------*/
  .float-subscriber{
    position: fixed;
      width: 50px;
      height: 50px;
      bottom: 30px;
      left: 30px;
      background-color: #ffc917;
      color: #fff;
      border-radius: 50px;
      text-align: center;
      box-shadow: 2px 2px 3px #999;
      z-index: 3;
  }

  .float-subscriber .my-float{
    margin-top: 14px;
    font-size: 24px;
  }

  /*--------Library-----*/
  #cards_landscape_wrap-2 .card-flyer .image-box, #cards_landscape_wrap-2 .card-flyer-sm .image-box{
  /*background: #ffffff;*/
  overflow: hidden;
  box-shadow: 0px 1px 5px rgb(138 135 135 / 50%)
  /*border-radius: 5px;*/
}
#cards_landscape_wrap-2 .card-flyer .image-box img, #cards_landscape_wrap-2 .card-flyer-sm .image-box img{
  -webkit-transition:all .9s ease; 
  -moz-transition:all .9s ease; 
  -o-transition:all .9s ease;
  -ms-transition:all .9s ease; 
  width: 100%;

  border-radius: 0px !important;
}
#cards_landscape_wrap-2 .card-flyer:hover .image-box img{
  /*opacity: 0.8;*/
  -webkit-transform:scale(1.15);
  -moz-transform:scale(1.15);
  -ms-transform:scale(1.15);
  -o-transform:scale(1.15);
  transform:scale(1.15);
}

#cards_landscape_wrap-2 .card-flyer{
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.40);
}
#cards_landscape_wrap-2 .card-flyer:hover{
  background: #fff;
  box-shadow: 0px 15px 26px rgba(0, 0, 0, 0.50);
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  /*margin-top: 50px;*/
}

#cards_landscape_wrap-2 .card-flyer:hover .hover-danger, #cards_landscape_wrap-2 .card-flyer:hover .hover-danger{
  color: #dc3545 !important;
}

#cards_landscape_wrap-2 .shadow-sm .image-box{
    overflow: hidden;
    box-shadow: 0px 2px 2px #bab9b980;
}

#cards_landscape_wrap-2 .shadow-sm{
    overflow: hidden;
    box-shadow: 0px 1px 3px rgb(0 0 0 / 40%) !important;
}

.no-shadow{
    box-shadow: none !important;
}
#cards_landscape_wrap-2 .card-flyer-sm{
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.40);
}



#cards_landscape_wrap-2 .card-flyer-sm:hover{
  background: #fff;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.50);
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.hover-info{
  color: black;
}
.hover-info:hover{
  color: #007bff !important;
}

.text-violet{
  color: #70029d;
}

.badge-noti{
  top: -15px !important;
  left: -10px;
  padding: 2px 6px;
  border-radius: 50%;
  color: white;
  background-color: red;
  font-size: 13px;
}


.carousel .flex-viewport {
    height: auto !important;
}

/*----- Blink Button ----------*/
.button-blink {
  display: inline-block;
  outline: none;
  border: none;
  animation: glowing 1500ms infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
@-webkit-keyframes glowing {
  0% { background-color: #0258b4; -webkit-box-shadow: 0 0 3px #0258b4; }
  50% { background-color: #ffc107; -webkit-box-shadow: 0 0 40px #ffc107; }
  100% { background-color: #0258b4; -webkit-box-shadow: 0 0 3px #0258b4; }
}

@-moz-keyframes glowing {
  0% { background-color: #0258b4; -moz-box-shadow: 0 0 3px #0258b4; }
  50% { background-color: #ffc107; -moz-box-shadow: 0 0 40px #ffc107; }
  100% { background-color: #0258b4; -moz-box-shadow: 0 0 3px #0258b4; }
}

@-o-keyframes glowing {
  0% { background-color: #0258b4; box-shadow: 0 0 3px #0258b4; }
  50% { background-color: #ffc107; box-shadow: 0 0 40px #ffc107; }
  100% { background-color: #0258b4; box-shadow: 0 0 3px #0258b4; }
}

@keyframes glowing {
  0% { background-color: #0258b4; box-shadow: 0 0 3px #0258b4; }
  50% { background-color: #ffc107; box-shadow: 0 0 40px #ffc107; }
  100% { background-color: #0258b4; box-shadow: 0 0 3px #0258b4; }
}


#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: auto;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

.take-the-test {
  width: 150px;
  padding: 10px;
  color: #fff;
  font-size: 18px;
  border-radius: 27px;
  border-color: #ffc917;
  background-color: #ffc917;
}

.take-the-test:hover {
  color: #fff;
}

.text-danger-question {
  font-size: 14px;
  color:#dc3545;
}