.container-wrapper{
	margin-top: 20px;
	margin-bottom: 20px;
	display: block;
	position: relative;
}


.style-customizer {
    background-color: #fff;
    color: #262626;
    width: 300px;
    position: fixed;
    top: 0;
    z-index: 10000;
    right: -300px;
    box-shadow: -3px 0 50px -2px rgba(0, 0, 0, .14);
    height: 100%;
    bottom: 0;
}

.style-customizer a.button:hover {
    color: #2395ec!important
}

.style-customizer.closed {
    box-shadow: none
}

.style-customizer a.button:hover:after {
    z-index: -1
}

.style-customizer a.button {
    z-index: 9
}

.style-customizer a.button.button-border {
   background: #2395ec;
   border: 1px solid #2395ec;
   font-size: 15px;
   padding: 8px 30px;
   text-transform: uppercase;
   width: 100%;
   color: #fff;
   font-weight: 700
}


.style-customizer .content-chooser {
    padding: 90px 22px 30px 30px;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    position: absolute;
    background-color: #fff;
    border-top: none
}

.style-customizer.opened .content-chooser {
    opacity: 1
}

.content-chooser p {
    margin-bottom: 10px
}

.style-customizer h2 {
    margin: 0;
    font-size: 18px
}

.style-customizer h3 {
    font-size: 16px;
    margin-top: 30px;
    line-height: 15px
}

.style-customizer hr {
    margin: 15px 0
}

.style-customizer hr+h3 {
    margin-top: 0
}

.style-customizer a.opener {
    display: block;
    height: 45px;
    position: absolute;
    right: 300px;
    top: 200px;
    background: #fff;
    width: 45px;
    font-size: 20px;
    line-height: 45px;
    color: #777;
    text-align: center;
    text-decoration: none;
    box-shadow: 1px 0 3px 0 rgba(0, 0, 0, .14), -1px 0 3px 0 rgba(0, 0, 0, .14)
}

.style-customizer ul {
    list-style: none;
    margin: 0;
    padding: 5px 0 0;
    font-size: 0
}

.style-customizer ul li {
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 25px;
    margin: 0 2px 3px 0;
    position: relative;
    transition: all .3s linear 0s;
    width: 60px
}

.style-customizer ul li.selected {
    border: 1px solid #000
}

.style-customizer ul.resetAll li {
    width: 100%;
    padding: 6px 0;
    min-width: 0;
    text-align: center;
    margin-top: 30px
}

.style-customizer .btn a {
    text-decoration: none;
    color: #fff
}

.style-customizer select {
    width: 100%;
    padding: 5px;
    border: 1px solid #b2bfca
}

.style-customizer .skin-default {
    background: #014c8c
}

.style-customizer .skin-chill {
    background: #13909C
}
.style-customizer .skin-dixie {
    background: #eb9d16
}
.style-customizer .skin-dodger {
    background: #3794f3
}
.style-customizer .skin-froly {
    background: #f17283
}
.style-customizer .skin-green {
    background: #37f396
}
.style-customizer .skin-lime {
    background: #c8f905
}
.style-customizer .skin-nova {
    background: #4d2a4f
}
.style-customizer .skin-phant {
    background: #103754
}
.style-customizer .skin-plum {
    background: #863C80
}
.style-customizer .skin-red {
    background: #F33837
}
.style-customizer .skin-sandal {
    background: #a57e6f
}



.white-bg {
    background-color: #fff
}
@media  (max-width : 575px) {
    .style-customizer{
        width: 250px; 
        right: -250px; 
    }
    .style-customizer a.opener {
        right: 250px;
    }

}

.bg-shadow{
  box-shadow: 0 0 20px 0 #ddd;
}
.grey{background-color:#f7f7f7}
.box-content{
   margin: 20px 0;
   display: block;
   min-height: 400px;
}
.table-fill{background:#fff;border-radius:3px;border-collapse:collapse;margin:auto;width:100%;padding:5px;box-shadow:0 2px 5px -1px rgba(0,0,0,0.26);animation:float 5s infinite;border:1px solid #eee}
.table-fill th{background-color:#0d47a1;padding:7px;color:#fff;border:1px solid #444;text-align:center;font-size:14px}
.table-fill td{padding:5px;font-size:12px;border:1px solid #eee}
.table-hover tr:hover{background-color:#ddd}
.right{
    float: right;
}
.bg-white{
    background: #fff;
}
#map iframe{
    width: 100%;
    height: 250px;
    border: none;
}
.kontak-detail,.contact-form{
    padding: 10px;
}
.contact-form input{
   border: 1px solid #ddd;
   margin-bottom: 5px;
   width: 49%;
}
.contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{
   font-size: 12px;
   padding: 5px;
}
.contact-form textarea{
   border: 1px solid #ddd;
   margin-bottom: 5px;
   width: 100%;
   resize: none;
}


.card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem
}
.card,
.card-d{
   border-radius: 0;
   padding: 30px;
   margin-bottom: 2rem;
   border: 0;
   box-shadow: 0 0 20px 0 #ddd;
   display: block;
   transition:all 0.4s;
   -webkit-transition:all 0.4s;
   -moz-transition:all 0.4s;
   -o-transition:all 0.4s;
}
.card:hover{
   color: #fff;
   background-color: #2983e4;
}
.card:hover h1,
.card:hover h2,
.card:hover h3,
.card:hover h4,
.card:hover h5,
.card:hover p,
.card:hover i,
.card:hover a,
.card:hover li{
   color: #fff;
}
.card:hover .btn{
   background-color: #fff;
   color: #2b2b2b;
}
.card:hover .btn:hover{
   background-color: #ccc;
}
.card:hover .btn i{
   color: #2983e4;
}
/*HOME BLOG*/
#our-blog{
   padding: 10px 0px 20px;
}
#our-blog .card{
  min-height: 200px;
}
#our-blog .blog-img{
   position: relative;
}
#our-blog .blog-img img{
  width: 100%;
  height: 200px;
}
#our-blog .blog-date{
   position: absolute;
   bottom: 20px;
}
#our-blog .blog-date p{
   color: #fff;
   margin-bottom: 0;
}
#our-blog .card li,
#our-blog .card-d-b li{
   display: inline-block;
}
#our-blog .card li+li::before,
#our-blog .card-d-b li+li::before{
   display: inline-block;
    padding: 0px 5px;
    content: "/";
}
#our-blog .card .blog-btn a i{
   display: none;
}
#our-blog .card:hover .blog-btn a i{
   display: inline-block;
   -moz-animation-delay: 2s;
   -webkit-animation-delay: 2s;
   -o-animation-delay: 2s;
   animation-delay: 2s;
}
#our-blog .card a:hover{
   color: #ccc;
}
#our-blog .card-d a:hover{
   color: #2983e4;
}
.btn-primary,
.badge-primary{
   color: #fff;
   background-color: #2983e4;
   box-shadow: 0 0 0 0;
   outline: 0;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus{
   color: #fff;
   background-color: #007bff;
   outline: 0;
   box-shadow: 0 0 0 0;
}


.box-side-footer{
   width: 100%;
   display: block;
}
.bgr-white{
   background-color: #fff;
   color: #333 !important;
}
.pd-10{
   padding: 10px;
}
.pd-15{
   padding: 15px;
}
.noresize{
   resize: none;
}

.title-form1{font-size:26px;font-weight:700;margin-bottom: -15px;}
.title-form3{font-size:17px;font-weight:700;margin-bottom:20px}
.title-form2{font-size:20px;font-weight:500;margin-bottom:20px}
.text-fairy2{font-family:'Playfair Display',serif;font-style:italic}
.text-fairy{font-family:'Playfair Display',serif;font-style:italic;font-size:12px}
.text-fairy input[type=text] {padding: 10px;height: 35px;}
.text-fairy input,.text-fairy textarea{font-family:'Playfair Display',serif;font-style:italic;font-size:12px;color:#333}
.text-fairy .help-block{font-size:10px;color:red}
.text-fairy label{font-weight: bold;}
.text-fairy textarea{height:120px}
.text-fairy .tombol-submit button{background-color:#2962ff;color:#fff;font-weight:700;float:right}
.text-fairy .tombol-submit button:hover{background-color:#448aff}
.text-besar{font-size:70px}
small.help-block{color: red}
.tombol{
   border: none;
   border-radius: 0;
   color: #fcdb00;
   text-transform: uppercase;
   position: relative;
   padding: 5px 20px 5px 20px;
   cursor: pointer;
}
.tombol:hover,.tombol:focus{
    color: #fff;
}
.tombol:before,
.tombol:after{
    content: "";
    position: absolute;
    transition: all 0.25s ease 0s;
}
.tombol.tombol-lg:before,
.tombol.tombol-lg:after{
    width: 30px;
    height: 30px;
}
.tombol:before{
    top: -5px;
    right: -5px;
}
.tombol:after{
    bottom: -5px;
    left: -5px;
}
.tombol:hover:before,
.tombol:hover:after{
   width: 100%;
   height: 100%;
}
.tombol.blue{
   background: #3768b4 !important;
}
.tombol.blue:before{
   border-top: 2px solid #3768b4;
   border-right: 2px solid #3768b4;
}
.tombol.blue:after{
   border-bottom: 2px solid #3768b4;
   border-left: 2px solid #3768b4;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}
.col-md-3{
  position: relative;
  min-height: 1px;
  margin-right: 15px;
  margin-left: 15px;
}
img.img-responsive{
	width: 100%;
}
img.img-pejabat{
  width: 100%;
}
.profile-card-4{background-color:#FFF;border-radius:5px;box-shadow:0px 0px 25px rgba(0,0,0,0.1);overflow:hidden;position:relative;cursor:pointer; margin-bottom: 15px;}
.profile-card-4 img{transition:all 0.25s linear; }
.profile-card-4 .profile-content{position:relative;padding:15px;background-color:#FFF;}
.profile-card-4 .profile-name{font-weight:bold;position:absolute;left:0px;right:0px;top:-70px;color:#000;font-size:15px;}
.profile-card-4 .profile-name p{font-weight:600;font-size:13px;letter-spacing:1.5px;}
.profile-card-4 .profile-description{color:#777;font-size:12px;padding:10px;}
.profile-card-4 .profile-overview{padding:15px 0px;}
.profile-card-4 .profile-overview p{font-size:10px;font-weight:600;color:#777;}
.profile-card-4 .profile-overview h4{color:#273751;font-weight:bold;}
.profile-card-4 .profile-content::before{content:"";position:absolute;height:20px;top:-10px;left:0px;right:0px;background-color:#FFF;z-index:0;transform:skewY(3deg);}
.profile-card-4:hover img{transform:rotate(5deg) scale(1.1,1.1);filter:brightness(110%);}

a.linkurl{
   color: #616161;
}
a.view-detail{
  color: #fff;
  border: 3px solid #fff;
  padding: 7px;
  font-weight: bold;
  text-decoration: none;
}
a.view-detail:hover{
  background: red;
  border: 3px solid #fff;
  opacity: 0.7;
  color: #fff;
}
.margintb10{
  margin-top: 30px;
  margin-bottom: 20px;
}
.videoku {
  --text-color: #ffffff;
  --primary-color: #00B4DB;
  --secondary-color: #0083B0;
  --padding: 1em;
  --transition-duration: 600ms;
  --border-margin: 15px;
  --border-width: 3px;
  --border-color: #ffffff;
  --border-radius: 3px;
  --image-opacity: 0.25;
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  padding: 0;
  color: #ffffff;
  color: var(--text-color);
  border-radius: 3px;
  border-radius: var(--border-radius); }
  .videoku:before, .videoku:after, .videoku *, .videoku *:before, .videoku *:after {
    box-sizing: border-box;
    transition: all 600ms ease;
    transition: all var(--transition-duration) ease; }
  .videoku figcaption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1em;
    padding: var(--padding);
    width: 100%;
    z-index: 1; }
  .videoku img {
    object-fit: cover;
    max-width: 100%;
    width: 100%;
    height: 100%; }
  .videoku h1,
  .videoku h2,
  .videoku h3,
  .videoku h4,
  .videoku h5,
  .videoku h6,
  .videoku p {
    margin-top: 0;
    color: #ffffff;
    color: var(--text-color); }
    .videoku h1:last-child,
    .videoku h2:last-child,
    .videoku h3:last-child,
    .videoku h4:last-child,
    .videoku h5:last-child,
    .videoku h6:last-child,
    .videoku p:last-child {
      margin-bottom: 0; }

/* c4-border-*
   ----------------------------- */
[class^='c4-border']:before, [class^='c4-border']:after,
[class^='c4-border'] figcaption:before,
[class^='c4-border'] figcaption:after,
[class*=' c4-border']:before,
[class*=' c4-border']:after,
[class*=' c4-border'] figcaption:before,
[class*=' c4-border'] figcaption:after {
  background-color: #ffffff;
  background-color: var(--border-color);
  position: absolute;
  content: ''; }
[class^='c4-border']:before, [class^='c4-border']:after,
[class*=' c4-border']:before,
[class*=' c4-border']:after {
  z-index: 1;
  height: 3px;
  height: var(--border-width);
  left: 15px;
  left: var(--border-margin);
  right: 15px;
  right: var(--border-margin);
  transform: scaleX(0); }
[class^='c4-border']:before,
[class*=' c4-border']:before {
  top: 15px;
  top: var(--border-margin); }
[class^='c4-border']:after,
[class*=' c4-border']:after {
  bottom: 15px;
  bottom: var(--border-margin); }
[class^='c4-border'] figcaption,
[class*=' c4-border'] figcaption {
  z-index: 3; }
  [class^='c4-border'] figcaption:before, [class^='c4-border'] figcaption:after,
  [class*=' c4-border'] figcaption:before,
  [class*=' c4-border'] figcaption:after {
    z-index: -1;
    width: 3px;
    width: var(--border-width);
    top: 15px;
    top: var(--border-margin);
    bottom: 15px;
    bottom: var(--border-margin);
    transform: scaleY(0); }
  [class^='c4-border'] figcaption:before,
  [class*=' c4-border'] figcaption:before {
    left: 15px;
    left: var(--border-margin); }
  [class^='c4-border'] figcaption:after,
  [class*=' c4-border'] figcaption:after {
    right: 15px;
    right: var(--border-margin); }
[class^='c4-border'].hover:before, [class^='c4-border'].hover:after,
[class^='c4-border'].hover figcaption:before,
[class^='c4-border'].hover figcaption:after, [class^='c4-border']:hover:before, [class^='c4-border']:hover:after,
[class^='c4-border']:hover figcaption:before,
[class^='c4-border']:hover figcaption:after, [class^='c4-border']:focus:before, [class^='c4-border']:focus:after,
[class^='c4-border']:focus figcaption:before,
[class^='c4-border']:focus figcaption:after, :focus > [class^='c4-border']:before, :focus > [class^='c4-border']:after,
:focus > [class^='c4-border'] figcaption:before,
:focus > [class^='c4-border'] figcaption:after,
[class*=' c4-border'].hover:before,
[class*=' c4-border'].hover:after,
[class*=' c4-border'].hover figcaption:before,
[class*=' c4-border'].hover figcaption:after,
[class*=' c4-border']:hover:before,
[class*=' c4-border']:hover:after,
[class*=' c4-border']:hover figcaption:before,
[class*=' c4-border']:hover figcaption:after,
[class*=' c4-border']:focus:before,
[class*=' c4-border']:focus:after,
[class*=' c4-border']:focus figcaption:before,
[class*=' c4-border']:focus figcaption:after, :focus >
[class*=' c4-border']:before, :focus >
[class*=' c4-border']:after,
:focus >
[class*=' c4-border'] figcaption:before,
:focus >
[class*=' c4-border'] figcaption:after {
  transform: scale(1); }

/* c4-border-center
  ----------------------------- */
/* c4-border-vert
  ----------------------------- */
.c4-border-vert:before, .c4-border-vert:after {
  transition-duration: 0s; }
.c4-border-vert.hover:before, .c4-border-vert.hover:after, .c4-border-vert:hover:before, .c4-border-vert:hover:after, .c4-border-vert:focus:before, .c4-border-vert:focus:after, :focus > .c4-border-vert:before, :focus > .c4-border-vert:after {
  transition-delay: 480ms; }

/* c4-border-horiz
  ----------------------------- */
.c4-border-horiz figcaption:before, .c4-border-horiz figcaption:after {
  transition-duration: 0s; }
.c4-border-horiz.hover figcaption:before, .c4-border-horiz.hover figcaption:after, .c4-border-horiz:hover figcaption:before, .c4-border-horiz:hover figcaption:after, .c4-border-horiz:focus figcaption:before, .c4-border-horiz:focus figcaption:after, :focus > .c4-border-horiz figcaption:before, :focus > .c4-border-horiz figcaption:after {
  transition-delay: 480ms; }

/* c4-border-bottom
  ----------------------------- */
.c4-border-bottom:after {
  transition-delay: 480ms; }
.c4-border-bottom:before, .c4-border-bottom:after {
  transition-duration: 0s; }
.c4-border-bottom figcaption:before, .c4-border-bottom figcaption:after {
  transform-origin: 100% 100%; }
.c4-border-bottom.hover:before, .c4-border-bottom:hover:before, .c4-border-bottom:focus:before, :focus > .c4-border-bottom:before {
  transition-delay: 480ms; }
.c4-border-bottom.hover:after, .c4-border-bottom:hover:after, .c4-border-bottom:focus:after, :focus > .c4-border-bottom:after {
  transition-delay: 0s; }

/* c4-border-top
  ----------------------------- */
.c4-border-top:before {
  transition-delay: 480ms; }
.c4-border-top:before, .c4-border-top:after {
  transition-duration: 0s; }
.c4-border-top figcaption:before, .c4-border-top figcaption:after {
  transform-origin: 0 0; }
.c4-border-top.hover:after, .c4-border-top:hover:after, .c4-border-top:focus:after, :focus > .c4-border-top:after {
  transition-delay: 480ms; }
.c4-border-top.hover:before, .c4-border-top:hover:before, .c4-border-top:focus:before, :focus > .c4-border-top:before {
  transition-delay: 0s; }

/* c4-border-right
  ----------------------------- */
.c4-border-right:before, .c4-border-right:after {
  transform-origin: 100% 100%; }
.c4-border-right figcaption:after {
  transition-delay: 480ms; }
.c4-border-right figcaption:before, .c4-border-right figcaption:after {
  transition-duration: 0s; }
.c4-border-right.hover figcaption:before, .c4-border-right:hover figcaption:before, .c4-border-right:focus figcaption:before, :focus > .c4-border-right figcaption:before {
  transition-delay: 480ms; }
.c4-border-right.hover figcaption:after, .c4-border-right:hover figcaption:after, .c4-border-right:focus figcaption:after, :focus > .c4-border-right figcaption:after {
  transition-delay: 0s; }

/* c4-border-left
  ----------------------------- */
.c4-border-left:before, .c4-border-left:after {
  transform-origin: 0 0; }
.c4-border-left figcaption:before {
  transition-delay: 480ms; }
.c4-border-left figcaption:before, .c4-border-left figcaption:after {
  transition-duration: 0s; }
.c4-border-left.hover figcaption:after, .c4-border-left:hover figcaption:after, .c4-border-left:focus figcaption:after, :focus > .c4-border-left figcaption:after {
  transition-delay: 480ms; }
.c4-border-left.hover figcaption:before, .c4-border-left:hover figcaption:before, .c4-border-left:focus figcaption:before, :focus > .c4-border-left figcaption:before {
  transition-delay: 0s; }

/* c4-border-corners-1
  ----------------------------- */
.c4-border-corners-1:before,
.c4-border-corners-1 figcaption:before {
  transform-origin: 0 0; }
.c4-border-corners-1:after,
.c4-border-corners-1 figcaption:after {
  transform-origin: 100% 100%; }

/* c4-border-corners-2
  ----------------------------- */
.c4-border-corners-2:before,
.c4-border-corners-2 figcaption:before {
  transform-origin: 100% 100%; }
.c4-border-corners-2:after,
.c4-border-corners-2 figcaption:after {
  transform-origin: 0 0; }

/* c4-border-top-left
  ----------------------------- */
.c4-border-top-left:before, .c4-border-top-left:after,
.c4-border-top-left figcaption:before,
.c4-border-top-left figcaption:after {
  transform-origin: 0 0; }
.c4-border-top-left:before {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-top-left:after {
  transition-delay: 0s; }
.c4-border-top-left figcaption:before {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-top-left figcaption:after {
  transition-delay: 0s; }
.c4-border-top-left.hover:before, .c4-border-top-left:hover:before, .c4-border-top-left:focus:before, :focus > .c4-border-top-left:before {
  transition-delay: 0s; }
.c4-border-top-left.hover:after, .c4-border-top-left:hover:after, .c4-border-top-left:focus:after, :focus > .c4-border-top-left:after {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-top-left.hover figcaption:before, .c4-border-top-left:hover figcaption:before, .c4-border-top-left:focus figcaption:before, :focus > .c4-border-top-left figcaption:before {
  transition-delay: 0s; }
.c4-border-top-left.hover figcaption:after, .c4-border-top-left:hover figcaption:after, .c4-border-top-left:focus figcaption:after, :focus > .c4-border-top-left figcaption:after {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }

/* c4-border-top-right
  ----------------------------- */
.c4-border-top-right:before, .c4-border-top-right:after,
.c4-border-top-right figcaption:before,
.c4-border-top-right figcaption:after {
  transform-origin: 100% 0%; }
.c4-border-top-right:before {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-top-right:after {
  transition-delay: 0s; }
.c4-border-top-right figcaption:before {
  transition-delay: 0s; }
.c4-border-top-right figcaption:after {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-top-right.hover:before, .c4-border-top-right:hover:before, .c4-border-top-right:focus:before, :focus > .c4-border-top-right:before {
  transition-delay: 0s; }
.c4-border-top-right.hover:after, .c4-border-top-right:hover:after, .c4-border-top-right:focus:after, :focus > .c4-border-top-right:after {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-top-right.hover figcaption:before, .c4-border-top-right:hover figcaption:before, .c4-border-top-right:focus figcaption:before, :focus > .c4-border-top-right figcaption:before {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-top-right.hover figcaption:after, .c4-border-top-right:hover figcaption:after, .c4-border-top-right:focus figcaption:after, :focus > .c4-border-top-right figcaption:after {
  transition-delay: 0s; }

/* c4-border-bottom-left
  ----------------------------- */
.c4-border-bottom-left:before, .c4-border-bottom-left:after,
.c4-border-bottom-left figcaption:before,
.c4-border-bottom-left figcaption:after {
  transform-origin: 0 100%; }
.c4-border-bottom-left:before {
  transition-delay: 0s; }
.c4-border-bottom-left:after {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-bottom-left figcaption:before {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-bottom-left figcaption:after {
  transition-delay: 0s; }
.c4-border-bottom-left.hover:before, .c4-border-bottom-left:hover:before, .c4-border-bottom-left:focus:before, :focus > .c4-border-bottom-left:before {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-bottom-left.hover:after, .c4-border-bottom-left:hover:after, .c4-border-bottom-left:focus:after, :focus > .c4-border-bottom-left:after {
  transition-delay: 0s; }
.c4-border-bottom-left.hover figcaption:before, .c4-border-bottom-left:hover figcaption:before, .c4-border-bottom-left:focus figcaption:before, :focus > .c4-border-bottom-left figcaption:before {
  transition-delay: 0s; }
.c4-border-bottom-left.hover figcaption:after, .c4-border-bottom-left:hover figcaption:after, .c4-border-bottom-left:focus figcaption:after, :focus > .c4-border-bottom-left figcaption:after {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }

/* c4-border-bottom-right
  ----------------------------- */
.c4-border-bottom-right:before, .c4-border-bottom-right:after,
.c4-border-bottom-right figcaption:before,
.c4-border-bottom-right figcaption:after {
  transform-origin: 100% 100%; }
.c4-border-bottom-right:before {
  transition-delay: 0s; }
.c4-border-bottom-right:after {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-bottom-right figcaption:before {
  transition-delay: 0s; }
.c4-border-bottom-right figcaption:after {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-bottom-right.hover:before, .c4-border-bottom-right:hover:before, .c4-border-bottom-right:focus:before, :focus > .c4-border-bottom-right:before {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-bottom-right.hover:after, .c4-border-bottom-right:hover:after, .c4-border-bottom-right:focus:after, :focus > .c4-border-bottom-right:after {
  transition-delay: 0s; }
.c4-border-bottom-right.hover figcaption:before, .c4-border-bottom-right:hover figcaption:before, .c4-border-bottom-right:focus figcaption:before, :focus > .c4-border-bottom-right figcaption:before {
  transition-delay: 480ms;
  transition-delay: calc(var(--transition-duration) / 1.25); }
.c4-border-bottom-right.hover figcaption:after, .c4-border-bottom-right:hover figcaption:after, .c4-border-bottom-right:focus figcaption:after, :focus > .c4-border-bottom-right figcaption:after {
  transition-delay: 0s; }

/* c4-border-cc-1
  ----------------------------- */
.c4-border-cc-1:before, .c4-border-cc-1:after,
.c4-border-cc-1 figcaption:before,
.c4-border-cc-1 figcaption:after {
  transition-duration: 300ms; }
.c4-border-cc-1:before,
.c4-border-cc-1 figcaption:after {
  transform-origin: 0 0; }
.c4-border-cc-1:after,
.c4-border-cc-1 figcaption:before {
  transform-origin: 100% 100%; }
.c4-border-cc-1:before {
  transition-delay: 600ms; }
.c4-border-cc-1:after {
  transition-delay: 0s; }
.c4-border-cc-1 figcaption:before {
  transition-delay: 900ms; }
.c4-border-cc-1 figcaption:after {
  transition-delay: 300ms; }
.c4-border-cc-1.hover:before, .c4-border-cc-1:hover:before, .c4-border-cc-1:focus:before, :focus > .c4-border-cc-1:before {
  transition-delay: 300ms; }
.c4-border-cc-1.hover:after, .c4-border-cc-1:hover:after, .c4-border-cc-1:focus:after, :focus > .c4-border-cc-1:after {
  transition-delay: 900ms; }
.c4-border-cc-1.hover figcaption:before, .c4-border-cc-1:hover figcaption:before, .c4-border-cc-1:focus figcaption:before, :focus > .c4-border-cc-1 figcaption:before {
  transition-delay: 0s; }
.c4-border-cc-1.hover figcaption:after, .c4-border-cc-1:hover figcaption:after, .c4-border-cc-1:focus figcaption:after, :focus > .c4-border-cc-1 figcaption:after {
  transition-delay: 600ms; }

/* c4-border-ccc-1
  ----------------------------- */
.c4-border-ccc-1:before, .c4-border-ccc-1:after,
.c4-border-ccc-1 figcaption:before,
.c4-border-ccc-1 figcaption:after {
  transition-duration: 400ms; }
.c4-border-ccc-1:before,
.c4-border-ccc-1 figcaption:after {
  transform-origin: 100% 100%; }
.c4-border-ccc-1:after,
.c4-border-ccc-1 figcaption:before {
  transform-origin: 0 0; }
.c4-border-ccc-1:before {
  transition-delay: 0s; }
.c4-border-ccc-1:after {
  transition-delay: 600ms; }
.c4-border-ccc-1 figcaption:before {
  transition-delay: 900ms; }
.c4-border-ccc-1 figcaption:after {
  transition-delay: 300ms; }
.c4-border-ccc-1.hover:before, .c4-border-ccc-1:hover:before, .c4-border-ccc-1:focus:before, :focus > .c4-border-ccc-1:before {
  transition-delay: 900ms; }
.c4-border-ccc-1.hover:after, .c4-border-ccc-1:hover:after, .c4-border-ccc-1:focus:after, :focus > .c4-border-ccc-1:after {
  transition-delay: 300ms; }
.c4-border-ccc-1.hover figcaption:before, .c4-border-ccc-1:hover figcaption:before, .c4-border-ccc-1:focus figcaption:before, :focus > .c4-border-ccc-1 figcaption:before {
  transition-delay: 0s; }
.c4-border-ccc-1.hover figcaption:after, .c4-border-ccc-1:hover figcaption:after, .c4-border-ccc-1:focus figcaption:after, :focus > .c4-border-ccc-1 figcaption:after {
  transition-delay: 600ms; }

/* c4-border-cc-2
  ----------------------------- */
.c4-border-cc-2:before,
.c4-border-cc-2 figcaption:after {
  transform-origin: 0 0; }
.c4-border-cc-2:after,
.c4-border-cc-2 figcaption:before {
  transform-origin: 100% 100%; }

/* c4-border-ccc-2
  ----------------------------- */
.c4-border-ccc-2:before,
.c4-border-ccc-2 figcaption:after {
  transform-origin: 100% 100%; }
.c4-border-ccc-2:after, .c4-border-ccc-2 figcaption:before {
  transform-origin: 0 0; }

/* c4-border-cc-3
  ----------------------------- */
.c4-border-cc-3:before, .c4-border-cc-3 figcaption:after {
  transform-origin: 0 0; }
.c4-border-cc-3:after, .c4-border-cc-3 figcaption:before {
  transform-origin: 100% 100%; }
.c4-border-cc-3:before {
  right: 33px;
  right: calc(var(--border-margin) + var(--border-margin) + var(--border-width));
  left: 0; }
.c4-border-cc-3:after {
  left: 33px;
  left: calc(var(--border-margin) + var(--border-margin) + var(--border-width));
  right: 0; }
.c4-border-cc-3 figcaption:before {
  top: 33px;
  top: calc(var(--border-margin) + var(--border-margin) + var(--border-width));
  bottom: 0; }
.c4-border-cc-3 figcaption:after {
  bottom: 33px;
  bottom: calc(var(--border-margin) + var(--border-margin) + var(--border-width));
  top: 0; }

/* c4-border-ccc-3
  ----------------------------- */
.c4-border-ccc-3:before,
.c4-border-ccc-3 figcaption:after {
  transform-origin: 100% 100%; }
.c4-border-ccc-3:after,
.c4-border-ccc-3 figcaption:before {
  transform-origin: 0 0; }
.c4-border-ccc-3:before {
  left: 33px;
  left: calc(var(--border-margin) + var(--border-margin) + var(--border-width));
  right: 0; }
.c4-border-ccc-3:after {
  right: 33px;
  right: calc(var(--border-margin) + var(--border-margin) + var(--border-width));
  left: 0; }
.c4-border-ccc-3 figcaption:before {
  bottom: 33px;
  bottom: calc(var(--border-margin) + var(--border-margin) + var(--border-width));
  top: 0; }
.c4-border-ccc-3 figcaption:after {
  top: 33px;
  top: calc(var(--border-margin) + var(--border-margin) + var(--border-width));
  bottom: 0; }

/* c4-border-fade
  ----------------------------- */
.c4-border-fade:before, .c4-border-fade:after,
.c4-border-fade figcaption:before,
.c4-border-fade figcaption:after {
  transform: scale(1);
  opacity: 0; }
.c4-border-fade.hover:before, .c4-border-fade.hover:after,
.c4-border-fade.hover figcaption:before,
.c4-border-fade.hover figcaption:after, .c4-border-fade:hover:before, .c4-border-fade:hover:after,
.c4-border-fade:hover figcaption:before,
.c4-border-fade:hover figcaption:after, .c4-border-fade:focus:before, .c4-border-fade:focus:after,
.c4-border-fade:focus figcaption:before,
.c4-border-fade:focus figcaption:after, :focus > .c4-border-fade:before, :focus > .c4-border-fade:after,
:focus > .c4-border-fade figcaption:before,
:focus > .c4-border-fade figcaption:after {
  opacity: 1; }

.c4-image-zoom-in.hover img, .c4-image-zoom-in:hover img, .c4-image-zoom-in:focus img, :focus > .c4-image-zoom-in img {
  transform: scale(1.25); }
.c4-image-zoom-out img {
  transform: scale(1.25); }
.c4-image-zoom-out.hover img, .c4-image-zoom-out:hover img, .c4-image-zoom-out:focus img, :focus > .c4-image-zoom-out img {
  transform: scale(1); }
.c4-image-pan-up img {
  transform-origin: top;
  transform: scale(1.2) translate(0, 0); }
.c4-image-pan-up.hover img, .c4-image-pan-up:hover img, .c4-image-pan-up:focus img, :focus > .c4-image-pan-up img {
  transform: scale(1.2) translate(0, -15%); }
.c4-image-pan-down img {
  transform-origin: bottom;
  transform: scale(1.2) translate(0, 0); }
.c4-image-pan-down:hover img, .c4-image-pan-down:focus img, :focus > .c4-image-pan-down img {
  transform: scale(1.2) translate(0, 15%); }
.c4-image-pan-left img {
  transform-origin: left;
  transform: scale(1.2) translate(0, 0); }
.c4-image-pan-left.hover img, .c4-image-pan-left:hover img, .c4-image-pan-left:focus img, :focus > .c4-image-pan-left img {
  transform: scale(1.2) translate(-15%, 0); }
.c4-image-pan-right img {
  transform-origin: right;
  transform: scale(1.2) translate(0, 0); }
.c4-image-pan-right.hover img, .c4-image-pan-right:hover img, .c4-image-pan-right:focus img, :focus > .c4-image-pan-right img {
  transform: scale(1.2) translate(15%, 0); }
.c4-image-blur.hover img, .c4-image-blur:hover img, .c4-image-blur:focus img, :focus > .c4-image-blur img {
  filter: blur(4px);
  transform: scale(1.1); }
.c4-image-rotate-left img {
  transform: scale(1.1) translate(0, 0); }
.c4-image-rotate-left.hover img, .c4-image-rotate-left:hover img, .c4-image-rotate-left:focus img, :focus > .c4-image-rotate-left img {
  transform: scale(1.3) rotate(-15deg); }
.c4-image-rotate-right img {
  transform: scale(1.1) translate(0, 0); }
.c4-image-rotate-right.hover img, .c4-image-rotate-right:hover img, .c4-image-rotate-right:focus img, :focus > .c4-image-rotate-right img {
  transform: scale(1.3) rotate(15deg); }

.c4-delay-100,
.c4-delay-100 > * {
  transition-delay: 100ms; }

.c4-delay-200,
.c4-delay-200 > * {
  transition-delay: 200ms; }

.c4-delay-300,
.c4-delay-300 > * {
  transition-delay: 300ms; }

.c4-delay-400,
.c4-delay-400 > * {
  transition-delay: 400ms; }

.c4-delay-500,
.c4-delay-500 > * {
  transition-delay: 500ms; }

.c4-delay-600,
.c4-delay-600 > * {
  transition-delay: 600ms; }

.c4-delay-700,
.c4-delay-700 > * {
  transition-delay: 700ms; }

.c4-delay-800,
.c4-delay-800 > * {
  transition-delay: 800ms; }

.c4-delay-900,
.c4-delay-900 > * {
  transition-delay: 900ms; }

.c4-delay-1000,
.c4-delay-1000 > * {
  transition-delay: 1000ms; }

[class^='c4-fade'],
[class*=' c4-fade'],
[class^='c4-reveal'],
[class*=' c4-reveal'],
[class^='c4-rotate'],
[class*=' c4-rotate'] {
  display: inline-block; }
  [class^='c4-fade'] > *,
  [class*=' c4-fade'] > *,
  [class^='c4-reveal'] > *,
  [class*=' c4-reveal'] > *,
  [class^='c4-rotate'] > *,
  [class*=' c4-rotate'] > * {
    display: inline-block; }
    [class^='c4-fade'] > *:last-child,
    [class*=' c4-fade'] > *:last-child,
    [class^='c4-reveal'] > *:last-child,
    [class*=' c4-reveal'] > *:last-child,
    [class^='c4-rotate'] > *:last-child,
    [class*=' c4-rotate'] > *:last-child {
      margin-bottom: 0; }

[class^='c4-reveal'],
[class*=' c4-reveal'],
[class^='c4-rotate'],
[class*=' c4-rotate'] {
  overflow: hidden;
  opacity: 1; }

[class^='c4-fade'],
[class*=' c4-fade'] {
  opacity: 0; }

.videoku.hover [class^='c4-fade'],
.videoku.hover [class*=' c4-fade'], .videoku:hover [class^='c4-fade'],
.videoku:hover [class*=' c4-fade'], .videoku:focus [class^='c4-fade'],
.videoku:focus [class*=' c4-fade'], :focus > .videoku [class^='c4-fade'],
:focus > .videoku [class*=' c4-fade'] {
  opacity: 1;
  transform: translate(0); }
.videoku.hover [class^='c4-reveal'],
.videoku.hover [class*=' c4-reveal'],
.videoku.hover [class^='c4-rotate'],
.videoku.hover [class*=' c4-rotate'], .videoku:hover [class^='c4-reveal'],
.videoku:hover [class*=' c4-reveal'],
.videoku:hover [class^='c4-rotate'],
.videoku:hover [class*=' c4-rotate'], .videoku:focus [class^='c4-reveal'],
.videoku:focus [class*=' c4-reveal'],
.videoku:focus [class^='c4-rotate'],
.videoku:focus [class*=' c4-rotate'], :focus > .videoku [class^='c4-reveal'],
:focus > .videoku [class*=' c4-reveal'],
:focus > .videoku [class^='c4-rotate'],
:focus > .videoku [class*=' c4-rotate'] {
  opacity: 1; }
  .videoku.hover [class^='c4-reveal'] > *,
  .videoku.hover [class*=' c4-reveal'] > *,
  .videoku.hover [class^='c4-rotate'] > *,
  .videoku.hover [class*=' c4-rotate'] > *, .videoku:hover [class^='c4-reveal'] > *,
  .videoku:hover [class*=' c4-reveal'] > *,
  .videoku:hover [class^='c4-rotate'] > *,
  .videoku:hover [class*=' c4-rotate'] > *, .videoku:focus [class^='c4-reveal'] > *,
  .videoku:focus [class*=' c4-reveal'] > *,
  .videoku:focus [class^='c4-rotate'] > *,
  .videoku:focus [class*=' c4-rotate'] > *, :focus > .videoku [class^='c4-reveal'] > *,
  :focus > .videoku [class*=' c4-reveal'] > *,
  :focus > .videoku [class^='c4-rotate'] > *,
  :focus > .videoku [class*=' c4-rotate'] > * {
    transform: translate(0) rotate(0deg); }

.c4-fade-up {
  transform: translateY(1.5rem); }
.c4-fade-down {
  transform: translateY(-1.5rem); }
.c4-fade-left {
  transform: translateX(1.5rem); }
.c4-fade-right {
  transform: translateX(-1.5rem); }
.c4-reveal-up > * {
  transform: translateY(100%); }
.c4-reveal-down > * {
  transform: translateY(-100%); }
.c4-reveal-left > * {
  transform: translateX(100%); }
.c4-reveal-right > * {
  transform: translateX(-100%); }
.c4-rotate-up-right > * {
  transform-origin: bottom left;
  transform: rotate(90deg); }
.c4-rotate-up-left > * {
  transform-origin: bottom right;
  transform: rotate(-90deg); }
.c4-rotate-down-right > * {
  transform-origin: top left;
  transform: rotate(-90deg); }
.c4-rotate-down-left > * {
  transform-origin: top right;
  transform: rotate(90deg); }

.c4-gradient-top {
  background-image: linear-gradient(180deg, #00B4DB 0%, #0083B0 100%);
  background-image: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%); }
.c4-gradient-left {
  background-image: linear-gradient(90deg, #00B4DB 0%, #0083B0 100%);
  background-image: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%); }
.c4-gradient-right {
  background-image: linear-gradient(270deg, #00B4DB 0%, #0083B0 100%);
  background-image: linear-gradient(270deg, var(--primary-color) 0%, var(--secondary-color) 100%); }
.c4-gradient-bottom {
  background-image: linear-gradient(0deg, #00B4DB 0%, #0083B0 100%);
  background-image: linear-gradient(0deg, var(--primary-color) 0%, var(--secondary-color) 100%); }
.c4-gradient-top-left {
  background-image: linear-gradient(135deg, #00B4DB 0%, #0083B0 100%);
  background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); }
.c4-gradient-top-right {
  background-image: linear-gradient(225deg, #00B4DB 0%, #0083B0 100%);
  background-image: linear-gradient(225deg, var(--primary-color) 0%, var(--secondary-color) 100%); }
.c4-gradient-bottom-left {
  background-image: linear-gradient(45deg, #00B4DB 0%, #0083B0 100%);
  background-image: linear-gradient(45deg, var(--primary-color) 0%, var(--secondary-color) 100%); }
.c4-gradient-bottom-right {
  background-image: linear-gradient(315deg, #00B4DB 0%, #0083B0 100%);
  background-image: linear-gradient(315deg, var(--primary-color) 0%, var(--secondary-color) 100%); }

.videoku .c4-layout-top-left {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left; }
.videoku .c4-layout-top-center {
  justify-content: flex-start; }
.videoku .c4-layout-top-right {
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right; }
.videoku .c4-layout-center-left {
  align-items: flex-start;
  text-align: left; }
.videoku .c4-layout-center-right {
  align-items: flex-end;
  text-align: right; }
.videoku .c4-layout-bottom-left {
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left; }
.videoku .c4-layout-bottom-center {
  justify-content: flex-end; }
.videoku .c4-layout-bottom-right {
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right; }

.videoku {
  background-color: #00B4DB;
  background-color: var(--primary-color); }
.videoku figcaption {
    padding: 2em;
    padding: calc(var(--padding) * 2); }
.videoku figcaption > * {
      opacity: 0; }
.videoku.hover > img, .videoku:hover > img, .videoku:focus > img, :focus > .videoku > img {
    opacity: 0.25;
    opacity: var(--image-opacity); }
.videoku.hover figcaption > *, .videoku:hover figcaption > *, .videoku:focus figcaption > *, :focus > .videoku figcaption > * {
    opacity: 1; }

.caption-1 figcaption {
   position: absolute;
   bottom: 0;
   right: 0;
}
.white{
   color: #fff !important;
}
.text-italic{
   font-style: italic !important;
}
figure.listgalery{border-radius:.25rem!important}
.listgalery img{
   width: 100%;
   height: auto;
}
a img{
   cursor: pointer;
}