.left{
  text-align: left;
}
.center{
  text-align: center;
}
.right{
  text-align: right;
}
.borderless{
  border: none;
  margin-right: 10px;
  height: 25px;
  width: 45px;
  background: none;
}
.highlight {
    color: rgba(8, 6, 80, 0.96);
    font-weight: bold;
}


.render {
  align-self: center;
  @include transition(all 0.3s ease);
  @include transform3d(rotateX(50deg) rotateZ(1deg));

  font-weight: 700;

  color: #f5f5f5;
  text-shadow:
    white 0.006em 0.006em 0.007em,
    #020335 0.1rem 0.1rem 0.1rem,
    #020335 0.1rem 0.2rem 0.1rem,
    #020335 0.1rem 0.3rem 0.1rem,
    #020335 0.1rem 0.4rem 0.1rem,
    #020335 0.1rem 0.5rem 0.1rem,

   
    white -0.15em -0.1em 10rem;
 
}


.login_submit,.btn_form,.save_btn,.del_btn{
    padding: 8px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    border: none;

    outline: none;
   
}

.save_btn{
  background: linear-gradient( rgba(29, 21, 136,.7) 25%, rgb(29, 21, 136) 100%);
  color: #fff;
}
.save_btn:hover{
  background: linear-gradient( rgb(29, 21, 136) 25%, rgba(29, 21, 136,.7) 100%);
  color: #fff2dc;
}

.number{
  background: linear-gradient( rgba(255, 255, 255, 0.5) 20%, wheat 80% );
  color: rgba(29, 21, 136, 0.96);
  border: rgba(57, 169, 236, 0.7) outset thin; 
  font-size: 2em;   
  border-radius: 20px;
  font-family: OCR A Std, monospace,sans-serif;
  letter-spacing: 5px;
}


.sidebar {
  margin-top: 15px;
  border-radius: 5px;
  background: rgba(29, 21, 136, 0.96);
/*     box-shadow: 5px 5px rgba(8, 189, 247, 0.3) ;*/
 
}
.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 189, 7, 0.96);
  background: rgba(15, 7, 121, 1);
  border-radius: 20px;


}
.sidebar li {
margin: 0;
padding: 0; 


}
.sidebar li li {
line-height: 19px;
  font-size: 1em;
border-bottom: 1px dotted white;
margin: 20px 20px;
border-right: none;
list-style: none;
}
.sidebar h2 {
padding-left: 10px;
padding-top: 6px;
padding-bottom: 6px;
letter-spacing: -.5px;
font-size: 1.3em;
  text-align: center;
  border-radius: 10px;
color: white;
}
.sidebar p {
margin: 0 0px;
  font-size: 0.8em;
padding:5px;
text-align: justify;
  color: bisque;
}

.sidebar a {
border: none;
  color: #FFFFFF;
}
.sidebar img {
border: none;
  width: 100%;
 
}
.sidebar_icon {
margin: 0 auto;
padding: 0 auto;
}

.sidebar_icon img{
width: 70px;
height: 40px;
}


.sidebar a:hover {
text-decoration: none;
  color: rgba(255, 189, 7, 0.96);
}


.sidebar li li:hover {

  
}




.side-calendar-table {
  width: 100%;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 1em;
}
.side-calendar-table th {
 
  padding: 0.5em;
  font-size: 1.2em;
  
}
.side-calendar-table td {
 
  padding: 0.5em;
  font-size: 1.2em;
  
}


.event-calendar-table {
  width: 100%;
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 1em;
}
.event-calendar-table th {
 
  padding: 0.5em;
  font-size: 1.2em;
  
}
.event-calendar-table td {
 
  padding: 0.5em;
  font-size: 1.2em;
  
}



table.table-fee {
  width: 100%;
  margin-bottom: 10px;
  border:  rgba(7, 129, 25, 0.84);
  font-family: Arial, Helvetica, sans-serif;
} 
.table-fee td {
  padding: 6px;
  margin: 3px;
  
}
.table-fee label {
  font-weight: bold;
}
.table-fee th ,legend{
  background: linear-gradient( rgba(15, 7, 121, 0.7) 10%, rgba(15, 7, 121, 1)  90%);
  color: rgba(255, 255, 255, 0.96);
  height: 35px;
  text-decoration: none;
  font-weight: bold;
  margin-bottom: auto;
  text-align: center;
}

.table-fee td {
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid  rgba(15, 7, 121, 0.2);
  border-bottom: 1px solid  rgba(15, 7, 121, 0.2);
}
.table-fee a {
  color: #000;
 
}
.table-fee img {
width: 60px;
height: 65px;
border:  #f7fdd9 inset medium;
margin: 5px;
border-radius: 50px;
}

.table-fee .fas {
font-size: 1.7em;
color: rgb(15, 7, 121);

}

.calendar {
  display: flex;
  flex-flow: column;
}
.calendar .header .month-year {
  font-size: 20px;
  font-weight: bold;
  color: #636e73;
}
.calendar .days {
  display: flex;
  flex-flow: wrap;
}
.calendar .days .day_name {
  width: calc(100% / 7);
  border-right: 1px solid #2c7aca;
  padding: 20px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  color: #818589;
  color: #fff;
  background-color: #448cd6;
}
.calendar .days .day_name:nth-child(7) {
  border: none;
}
.calendar .days .day_num {
  display: flex;
  flex-flow: column;
  width: calc(100% / 7);
  border-right: 1px solid #e6e9ea;
  border-bottom: 1px solid #e6e9ea;
  padding: 15px;
  font-weight: bold;
  color: #7c878d;
  cursor: pointer;
  min-height: 50px;
}
.calendar .days .day_num span {
  display: inline-flex;
  width: 30px;
  font-size: 14px;
}
.calendar .days .day_num .event {

  width: 100%;
  font-size: 14px;
  padding: 3px 6px;
  border-radius: 4px;
  color: #fff;
  word-wrap: break-word;
}

.calendar .days .day_num .event.holiday {
  background-color: rgba(104, 215, 243, 0.7);
}
.calendar .days .day_num .event.special {
  background-color: rgba(0, 176, 80, 0.7);
}

.calendar .days .day_num .event.tpd {
  background-color: rgba(255, 255, 0, 1);
}

.calendar .days .day_num .event.trip {
  background-color: rgba(255, 153, 255, 1);
}

.calendar .days .day_num .event.public {
  background-color: #FFBABA;
}

.calendar .days .day_num .event.pta, .open_day {
  background-color: rgb(110, 1, 219);
  color: #fff;
}

.calendar .days .day_num .event.closing_school, .opening_school {
  background-color: rgba(0, 176, 240, 1);
}
.calendar .days .day_num:nth-child(7n+1) {
  border-left: 1px solid #e6e9ea;
}
.calendar .days .day_num:hover {
  background-color: #fdfdfd;
}
.calendar .days .day_num.ignore {
  background-color: #fdfdfd;
  color: #ced2d4;
  cursor: inherit;
}
.calendar .days .day_num.selected {
  cursor: inherit;
  font-weight:bold; 
  font-size:1.2em; 
  border:2px solid #0f38f0; 
  border-radius: 50px;
  padding:5px;
}

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

.img-fluid {
	max-width: 100%;
	height:  100%; }

table.calendar-table {
  width: 100%;
  font-size: 12px;

  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 1em;
} 
.calendar-table-left {

}
.calendar-table-center {
  margin-top: 5em;
}
.calendar-table-right {
  margin-top: 6.5em;
}
.calendar-table td {
  margin: 3px;
  height: 50px;
  padding: 0.5em;
  font-size: 2em;
  
}
.calendar-table tr {
  color: #222;

}
.calendar-table tbody tr:nth-child(even){

}
.calendar-table th {
  background-color: rgba(29, 21, 136,.8); 
  color: #FFF;
  font-size: 2em;
  text-align: center;
  font-weight: bold;
  font-family: monospace;
  padding: 0.5em;
}

.trip,.public,.pta, .open_day,.closing_school, .opening_school,.tpd,.special,.holiday {
  padding:10px 7px 10px 10px;
  background-repeat: no-repeat;
  background-position: 7px center;
  cursor: pointer;
  
  
}

.holiday {
  background-color: rgba(104, 215, 243, 0.7);
}
.special {
  background-color: rgba(0, 176, 80, 0.7);
}

.tpd {
  background-color: rgba(255, 255, 0, 1);
}

.trip {
  background-color: rgba(255, 153, 255, 1);
}

.public {
  background-color: #FFBABA;
}

.pta, .open_day {
  background-color: rgb(110, 1, 219);
  color: #fff;
}

.closing_school, .opening_school {
  background-color: rgba(0, 176, 240, 1);
}

.weekend_bg{
  color: #f20000;
  text-decoration: none;
  background: rgb(255 255 153);
}

.banner-bottom-image-text-left p{
	color:#3D3D3D;
	margin: 0 auto;
	line-height:2em;
        margin-top: 0.5em;
}

.banner-bottom-image-text-left a{
  align-content: center;
	margin: 20px;
}

.banner-bottom-image-text-left h4{
	text-transform: capitalize;
        font-size: 1.3em;
        color: #009;
        line-height: 2em;
        position: relative;
}


.banner-bottom-image-text-left h5{
        font-size: 1.3em;
        font-family: MV Boli, fantasy , Lucida Calligraphy, Monotype Corsiva ,  Kristen ITC, Bradley Hand ITC;
        padding-left: 2em;
        line-height: 1.5em;
        position: relative;
        text-align: justify;
}
.banner-bottom-image-text-left h5:before{
	content:'';
	background:url(../images/img-sp.png) no-repeat 0px 0px;
	display:block;
/*-- w3layouts --*/
	width:32px;
	height:32px;
	position:absolute;
	top:0%;
	left:0%;
}




.form-outline{position:relative; padding: 2px; }

.form-outline .form-control{min-height:auto;  padding:.32rem .75rem; transition:all .2s linear}
.form-outline .form-control~.form-label{
	position:absolute;top:0;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;left:.75rem;
	/*padding-top:.37rem;*/
  pointer-events:none;transform-origin:0 0;transition:all .2s ease-out;
  color:rgba(21, 19, 89, 1);
  margin-bottom:0
}
.form-outline .form-control~.form-notch{display:flex;position:absolute;left:0;top:0;width:100%;max-width:100%;height:100%;text-align:left;pointer-events:none}
.form-outline .form-control~.form-notch div{pointer-events:none;border:1px solid rgba(29, 21, 136 , 1);box-sizing:border-box; transition:all .2s linear}
.form-outline .form-control~.form-notch .form-notch-leading{left:0;top:0;height:100%;width:.5rem;border-right:none;border-radius:.25rem 0 0 .25rem}
.form-outline .form-control~.form-notch .form-notch-middle{flex:0 0 auto;width:auto;max-width:calc(100% - 1rem);height:100%;border-right:none;border-left:none}
.form-outline .form-control~.form-notch .form-notch-trailing{flex-grow:1;height:100%;border-left:none;border-radius:0 .25rem .25rem 0}

.form-outline .form-control~.form-label {transform:translateY(-1rem) translateY(.1rem) scale(.8)}


.form-outline .form-control:not(.placeholder-active)::-moz-placeholder{opacity:0}
.form-outline .form-control:not(.placeholder-active)::placeholder{opacity:0}
.form-outline .form-control.active::-moz-placeholder,
.form-outline .form-control:focus::-moz-placeholder{opacity:1}
.form-outline .form-control.active::placeholder,.form-outline .form-control:focus::placeholder{opacity:1}
.form-outline .form-control:focus{box-shadow:none!important}
.form-outline .form-control.active~.form-label,
.form-outline .form-control:focus~.form-label{transform:translateY(-1rem) translateY(.1rem) scale(.8)}

.form-outline .form-control:focus~.form-label{color:rgba(29, 21, 136 , 1)}

.form-outline .form-control~.form-notch .form-notch-middle,.form-outline .form-control:focus~.form-notch .form-notch-middle{border-right:none;border-left:none;border-top:1px solid transparent}


.form-outline .form-control.active~.form-notch .form-notch-middle,.form-outline .form-control:focus~.form-notch .form-notch-middle{border-right:none;border-left:none;border-top:1px solid transparent}
.form-outline .form-control:focus~.form-notch .form-notch-middle{border-color:rgba(29, 21, 136, 1);box-shadow:0 1px 0 0 rgba(29, 21, 136, 1);border-top:1px solid transparent}

.form-outline .form-control.active~.form-notch .form-notch-leading,.form-outline .form-control:focus~.form-notch .form-notch-leading{border-right:none}
.form-outline .form-control:focus~.form-notch .form-notch-leading{border-color:rgba(29, 21, 136, 1);box-shadow:-1px 0 0 0 rgba(29, 21, 136 , 1),0 1px 0 0 rgba(29, 21, 136, 1),0 -1px 0 0 rgba(29, 21, 136 , 1)}

.form-outline .form-control.active~.form-notch .form-notch-trailing,.form-outline .form-control:focus~.form-notch .form-notch-trailing{border-left:none}
.form-outline .form-control:focus~.form-notch .form-notch-trailing{border-color:rgba(29, 21, 136, 1);box-shadow:1px 0 0 0 rgba(29, 21, 136, 1),0 -1px 0 0 rgba(29, 21, 136 , 1),0 1px 0 0 rgba(29, 21, 136 , 1)}


.form-control option,.entry option{
   background: rgba(82, 2, 2, 0.712) ;
}
.form-control input {
   background: rgba(112, 61, 0, 0.5) ;
}
.form-outline  option:hover ,.entry option:hover{
   background: rgba(112, 61, 0,.2);
   color: #fff;
}

.form-outline .error_bg{background-color: rgba(248, 98, 101, 0.5);}

.form-outline .input_error{
   color: #D8000C;
   background-color: rgba(248, 98, 101, 0.3);
   border:  dotted 2px rgba(248, 98, 101, 1);
}



.form-control option,.entry option{
   background: rgba(238, 207, 10, 0.11) ;
}
.form-control input {
   background: rgba(29, 21, 136, 0.5) ;
}
.form-control option:hover ,.entry option:hover{
   background: rgba(29, 21, 136 , 1);
   color: #fff;
}

.input-group .form-control {
  margin-right:0%;
  width:50% !important;
}
.input-group .form-control:last-child{
  margin-left:-1px;
}



.info_box {
  position: relative;
  margin: 0 0 30px; 
}
.info_box.align_center {
  text-align: center; 
}
.info_box_image {
  position: relative;
  margin: 0 0 3px; 
}

.info_box_image img {
  max-width: 100%;
  height: auto; 
}

.info_box h4 {
  color: #23408f;
  margin: 0 0 13px; 
}
  .info_box h4:before {
    display: none; 
  }
.info_box p {
  margin: 0 0 14px;
  line-height: 22px;

}
.info_box .read_more {
  text-transform: lowercase;
  font-weight: 700;
  font-size: 13px;
  transition: color 0.2s linear;
  color: rgba(8, 6, 80, 0.94); 
}
  .info_box .read_more .stm_icon {
    margin: 2px 0 0 5px;
    font-size: 12px;
    vertical-align: middle;
    color: rgba(8, 6, 80, 0.94); 
  }
  .info_box .read_more span {
    vertical-align: middle;
    line-height: 13px;
  }
  .info_box .read_more:hover {
    color: rgba(0, 123, 255, 0.94);
    text-decoration: none; 
  }
  .info_box ul {
    list-style: none;
    padding: 0;
    margin: 0; 
  }
  .info_box ul li {
    position: relative;
    padding: 0 0 0 20px;
    margin: 0 0 4px; 
  }

  
.style_6 {
  background: #fff;
  padding: 40px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; 
}
.style_6 .info_box_text .title {
  margin-bottom: 10px; 
}
.style_6 .info_box_text .icon {
  width: 55px;
  display: table-cell;
  vertical-align: middle; 
}
.style_6 .info_box_text .icon i {
  font-size: 32px;
  color: rgba(0, 123, 255, 0.94); 
}
.style_6 .info_box_text h5 {
display: table-cell;
vertical-align: middle;
font-weight: 400;
padding-top: 0;
margin-bottom: 0;
letter-spacing: -.05em; 
}
  .style_6 .info_box_text p {
padding-left: 55px;
font-size: 13px;
line-height: 18px;
color: #777;
margin-bottom: 17px; 
}
.style_6 .info_box_text .read_more {
  padding-left: 55px;
  text-transform: none; 
}
.style_6 .info_box_text .read_more:hover {
  color: rgba(0, 123, 255, 0.94); 
}
.style_6 .info_box_text .read_more .stm_icon {
     margin-left: 10px; 
 }
.info_box.style_6:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
}


  .style_6 h4 {
    color: #222;
    letter-spacing: 0;
    margin-bottom: 10px; 
  }
  .style_6 .info_box_image {
    position: relative;
    margin-bottom: 4px; 
  }
    .style_6 .info_box_image:before {
      content: "";
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      background:rgba(8, 6, 80, 0.2);
      -webkit-transition: opacity 0.3s ease;
      -moz-transition: opacity 0.3s ease;
      -ms-transition: opacity 0.3s ease;
      -o-transition: opacity 0.3s ease;
      transition: opacity 0.3s ease; 
    }
    .style_6 .info_box_image:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba(8, 6, 80, 0.94);
      width: 0;
      height: 5px;
      z-index: 2;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; 
    }
    
     .info_box.style_6:hover .info_box_image:after {
    width: 100%; 
     }
  .info_box.style_6:hover .info_box_image:before {
    opacity: 1; 
  }


  
  
.info_box.style_9 {
  border: solid thin rgba(8, 6, 80, 0.94);
  background: rgba(255, 255, 255, 1);
  border-radius: 1em;
  padding: 30px;
  margin: 3px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; 
}

#image_preview img{
  width: 100%;

  min-width: 100px;
  border-radius: 10%;
  border: rgba(15, 7, 121, 0.7) inset medium;
  margin-bottom: 10px;
  
      
}

.row hr {
  display: block;
  width: 100%;
  border: 1;
  padding: 0;
}



.sort_asc:after{
  content: "\E08D"; 
  font-size: 1.3em;
  padding-left: 3px;
}
.sort_desc:after{
  content: "\E00D";
  font-size: 1.3em;
  padding-left: 3px;
}

.error_ {
color: #D8000C;
background-color: rgba(248, 98, 101, 0.3);
background-image: url('../images/error.png');
border: 0px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
font-size:1em;
background-position: 10px center;
border-radius:5px;
display: block;
  float: right;
  
  -webkit-animation: seconds 1.0s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 5s;
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 10s;
  position: relative;

}
.success_ {
  color: #4F8A10;
  background-color: rgba(126, 222, 110, 0.5);
  background-image:url('../images/success.png');
  border: 0px solid #323292;
  margin: 10px 0px;
  padding:15px 10px 15px 50px;
  background-repeat: no-repeat;
  background-position: 10px center;
  border-radius:5px;
  display: block;
  float: right;
  
  -webkit-animation: seconds 1.0s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 5s;
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 10s;
  position: relative;

}
  

.info_{
  border: 0px solid;
  margin: 10px 0px;
  padding:15px 10px 15px 50px;
  background-repeat: no-repeat;
  background-position: 10px center;
  background-image:url('../images/info.png');
  color: #00529B;
  background-color: #BDE5F8;
  border-radius:5px;
  display: block;
  float: right;
  
  -webkit-animation: seconds 1.0s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 5s;
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 10s;
  position: relative;
}
  
    @-webkit-keyframes seconds {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        left: -9999px; 
      }
    }
  @keyframes seconds {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        left: -9999px; 
      }
    }
    
.tab-pane .tab-pane .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
   
  animation: rotation_asset 2s infinite alternate;
 }
 @keyframes rotation_asset {
      0%  {padding: 12px 10px 10px 15px;}
     25%  {padding: 12px 18px 10px 10px;}
     50%  {padding: 12px 10px 10px 15px;}
     100% {padding: 12px 18px 10px 10px;} }
 


/*-- social-icons --*/
.icon-button {
	background-color: white;
	border-radius: 3.6rem;
	cursor: pointer;
	display: inline-block;
	font-size: 2.0rem;
	height: 3.6rem;
	line-height: 3.6rem;
	position: relative;
	text-align: center;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	width: 3.6rem;
}

/* Circle */
.icon-button span {
    
	border-radius: 0;
	display: block;
	height: 0;
	left: 50%;
	margin: 0;
	position: absolute;
	top: 50%;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	     -o-transition: all 0.3s;
	        transition: all 0.3s;
	width: 0;
}
.icon-button:hover span {
	width: 3.6rem;
        color: wheat;
	height: 3.6rem;
	border-radius: 3.6rem;
	margin: -1.8rem;
}
.icon-button:hover i {
        color: rgb(255,255,255);
	
}
.instagram span,.facebook span,.youtube span,.pinterest span {
    background: linear-gradient( rgba(63, 183, 243, 0.81)  70%, rgba(151, 245, 211, 0.8) 100%);
}
/* Icons */
.icon-button i {
	background: none;
	color: rgba(63, 183, 243, 0.81);
	height: 3.6rem;
	left: 0;
	line-height: 3.6rem;
	position: absolute;
	top: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	width: 3.6rem;
	z-index: 10;
}

.icon-instagram:before{
    background:url(../images/instagram.png) no-repeat;
    display: block;
    background-size: cover;
    content: '';
    width: 3.6rem;
    height: 3.8rem;
}

a.icon-button.instagram:hover .icon-instagram:before{
    zoom: 70%; 
}
.icon-facebook:before{
    background:url(../images/facebook.png) no-repeat;
    display: block;
    background-size: cover;
    content: '';
     width: 3.6rem;
    height: 3.8rem;
}

a.icon-button.facebook:hover .icon-facebook:before{
     zoom: 70%; 
}
.icon-whatsapp:before{
    background:url(../images/whatsapp.png) no-repeat;
    display: block;
    background-size: cover;
    content: '';
    width: 3.6rem;
    height: 3.8rem;
}
a.icon-button.whatsapp:hover .icon-whatsapp:before{
    zoom: 70%;
}
.icon-youtube:before{
    background:url(../images/youtube.png) no-repeat center center;
    display: block;
    background-size: cover;
    content: '';
     width: 3.6rem;
    height: 3.8rem;
}
a.icon-button.youtube:hover .icon-youtube:before{
      zoom: 70%; 
}
/*-- //social-icons --*/


.process-box{
  background: #fff;
  padding: 10px;
  border-radius: 15px;
  position: relative;
  box-shadow: 2px 2px 7px 0 #00000057;
}
.process-left:after{
      content: "";
  border-top: 15px solid #ffffff;
  border-bottom: 15px solid #ffffff;
  border-left: 15px solid #ffffff;
  border-right: 15px solid #ffffff;
  display: inline-grid;
  position: absolute;
  right: -15px;
  top: 42%;
  transform: rotate(45deg);
  box-shadow: 3px -2px 3px 0px #00000036;
  z-index: 1;
}
.process-right:after{
      content: "";
  border-top: 15px solid #ffffff00;
  border-bottom: 15px solid #ffffff;
  border-left: 15px solid #ffffff;
  border-right: 15px solid #ffffff00;
  display: inline-grid;
  position: absolute;
  left: -15px;
  top: 42%;
  transform: rotate(45deg);
  box-shadow: -1px 1px 3px 0px #0000001a;
  z-index: 1;
}
.process-step{
  background: rgba(29, 21, 136, 0.96);
  text-align: center;
  width: 80%;
  margin: 0 auto;
  color: #fff;
  height: 100%;
  padding-top: 8px;
  position: relative;
  top: -26px;
  border-radius: 0px 0px 10px 10px;
  box-shadow: -6px 8px 0px 0px #00000014;
}
.process-point-right{
  background: #ffffff;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 8px solid rgba(29, 21, 136, 0.96);
  box-shadow: 0 0 0px 4px rgba(214, 130, 5, 0.96);
  margin: auto 0;
  position: absolute;
  bottom: 40px;
  left: -63px;
}
.process-point-right:before{
  content: "";
  height: 144px;
  width: 11px;
  background: rgba(214, 130, 5, 0.96);
  display: inline-grid;
  transform: rotate(36deg);
  position: relative;
  left: -50px;
  top: -0px;
}
.process-point-left{
  background: #ffffff;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 8px solid rgba(29, 21, 136, 0.96);
  box-shadow: 0 0 0px 4px rgba(214, 130, 5, 0.96);
  margin: auto 0;
  position: absolute;
  bottom: 40px;
  right: -63px;
}
.process-point-left:before {
  content: "";
  height: 144px;
  width: 11px;
  background: rgba(214, 130, 5, 0.96);
  display: inline-grid;
  transform: rotate(-38deg);
  position: relative;
  left: 50px;
  top: 0px;

}

.process-last:before{
  display: none;
}
.process-box p{
  z-index: 9;
}

.process-box h3 {
  font-size: 20px;
  color: rgba(8, 6, 80, 0.8);;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  position: relative;
  padding-bottom: 15px;
}

.process-box h3::before {
  content: '';
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.process-box h3::after {
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: rgba(238, 167, 60, 0.94);
  bottom: 0;
  left: calc(50% - 20px);
}
.process-step p{
  font-size: 20px;
}
.process-step h2{
  font-size: 30px;
}
.process-step:after{
  content: "";
  border-top: 8px solid #04889800;
  border-bottom: 8px solid rgba(29, 21, 136, 0.6);
  border-left: 8px solid #04889800;
  border-right: 8px solid rgba(29, 21, 136, 0.6);
  display: inline-grid;
  position: absolute;
  left: -16px;
  top: 0;
}
.process-step:before{
  content: "";
  border-top: 8px solid #ff000000;
  border-bottom: 8px solid rgba(29, 21, 136, 0.6);
  border-left: 8px solid rgba(29, 21, 136, 0.6);
  border-right: 8px solid #ff000000;
  display: inline-grid;
  position: absolute;
  right: -16px;
  top: 0;
}
.process-line-l{
  background: white;
  height: 4px;
  position: absolute;
  width: 136px;
  right: -153px;
  top: 64px;
  z-index: 9;
}
.process-line-r{
  background: white;
  height: 4px;
  position: absolute;
  width: 136px;
  left: -153px;
  top: 63px;
  z-index: 9;
}


.events{
  margin-bottom: 20px;
}
.events table {
  width: 100%;
  border-collapse: collapse;
}
.events th, .events td {
  border: 1px solid #ddd;
  padding: 8px;
}
.events th {
  background-color: rgba(29, 21, 136,.96);
  color: white;
}