body {
    font-family: "Source Sans Pro";
    color: #ffffff;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

.head{
    padding-top: 3.5em;
    padding-bottom: 3.5em;
    padding-left: 1.75em;
}


.head {
    grid-area: head;
}

.wrapper-events {
    transition: all .5s ease-in-out;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-auto-rows: minmax(100px, auto);
    background-image: linear-gradient(-134deg, #3023AE 0%, #C86DD7 100%);
    grid-gap: 10px;
    
}
.events-cal-container{
    grid-area: 2 / 2 / 2 / 12;
}
.events-cal{
    height: 100%;
    width: 100%;
    border-radius: 8px;
    background: #FAFAFA;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
    margin: 5px;
}
.event{
    height: 200px;
    width: 100%;
    float: left;
    opacity: 0.9;
    background: #9B9B9B;
    border-radius: 8px;
    margin: 5px;
    transition: all .2s ease-in-out;
}

.time{
    height: 200px;
    width: 100%;
    float: left;
    opacity: 0.9;
    background: #9B9B9B;
    border-radius: 8px;
    margin: 5px;
    transition: all .2s ease-in-out;
}
.time h2{
    margin-top: 30px;
    margin-left: 8px;
}
.event:hover {
    z-index: 3;
    transition: all .2s ease-in-out;
    transform: scale(1.03);
}
.event-text{
    margin-left: 20px;
    margin-right: 20px;
}
/*grid-area: y / x / y / x;*/

#back {grid-area: 1/8/14/9;}

#events-cal0{ grid-area:  3 / 2 / 14 / 1; }

#events-cal1{ grid-area:  3 / 2 / 14 / 3; }
#events-cal2{ grid-area:  3 / 3 / 14 / 4; }
#events-cal3{ grid-area:  3 / 4 / 14 / 5; }
#events-cal4{ grid-area:  3 / 5 / 14 / 6; }
#events-cal5{ grid-area:  3 / 6 / 14 / 7; }
#events-cal6{ grid-area:  3 / 7 / 14 / 8; }
#events-cal7{ grid-area:  3 / 8 / 14 / 9; }
#event-1{ grid-area:  4 / 2 / 12 / 3; }
#event-2{ grid-area:  4 / 3  / 12 / 4; }
#event-3{ grid-area:  4 / 4  / 12 / 5;  }

#event-4{ grid-area:  4 / 5  / 12 / 6; }
#event-5{ grid-area:  4 / 6  / 12 / 7; }
#event-6{ grid-area:  4 / 7  / 12 / 8; }
#event-7{ grid-area:  4 / 8  / 12 / 9;  }
#event-8{ grid-area:  6 / 2 / 12 / 3; }
#event-9{ grid-area:  6 / 3  / 12 / 4; }
#event-10{ grid-area:  6 / 4  / 12 / 5; }
#event-11{ grid-area:  6 / 5  / 12 / 6;  }
#event-12{ grid-area:  6 / 6  / 12 / 7; }
#event-13{ grid-area:  6 / 7  / 12 / 8; }
#event-14{ grid-area:  6 / 8  / 12 / 9; }
#event-15{ grid-area:  8 / 2  / 12 / 3; }
#event-16{ grid-area:  8 / 3  / 12 / 4;  }
#event-17{ grid-area:  8 / 4 / 12 / 5; }
#event-18{ grid-area:  8 / 5  / 12 / 6; }
#event-19{ grid-area:  8 / 6  / 12 / 7;  }
#event-20{ grid-area:  8 / 7  / 12 / 8; }
#event-21{ grid-area:  8 / 8  / 12 / 9; }
#event-22{ grid-area:  10 / 2  / 12 / 3; }
#event-23{ grid-area:  10 / 3  / 12 / 4; }
#event-24{ grid-area:  10 / 4  / 12 / 5;  }
#event-25{ grid-area:  10 / 5 / 12 / 6; }
#event-26{ grid-area:  10 / 6  / 12 / 7; }
#event-27{ grid-area:  10 / 7  / 12 / 8;  }
#event-28{ grid-area:  10 / 8  / 12 / 9; }
#event-29{ grid-area:  12 / 2  / 12 / 3; }
#event-30{ grid-area:  12 / 3  / 12 / 4; }
#event-31{ grid-area:  12 / 4  / 12 / 5; }
#event-32{ grid-area:  12 / 5  / 12 / 6;  }
#event-33{ grid-area:  12 / 6  / 12 / 7; }
#event-34{ grid-area:  12 / 7  / 12 / 8; }
#event-35{ grid-area:  12 / 8  / 12/ 9;  }



#time1{ grid-area:  4 / 2 / 12 / 1; }
#time2{ grid-area:  6 / 2 / 12 / 1; }
#time3{ grid-area:  8 / 2 / 12/ 1; }
#time4{ grid-area:  10 / 2 / 12 / 1; }
#time5{ grid-area:  12 / 2 / 12 / 1; }


#days1{grid-area: 3/2/12/3;
margin-left: 15px;
color: black;}


#days{grid-area: 3/2/12/1;
margin-left: 15px;
color: black;}

#days2{grid-area: 3/3/12/3;
margin-left: 15px;
color: black;}

#days3{grid-area: 3/4/12/4;
margin-left: 15px;
color: black;}

#days4{grid-area: 3/5/12/5;
margin-left: 15px;
color: black;}

#days5{grid-area: 3/6/10/6;
margin-left: 15px;
color: black;}

#days6{grid-area: 3/7/12/7;
margin-left: 15px;
color: black;}

#days7{grid-area: 3/8/12/8;
margin-left: 15px;
color: black;}

/* code for back navigator*/
.back{
  float: right;
  text-align: center;
  vertical-align: middle;
}

.back a {
  display: inline-block;
  border-radius: 50%;
}
 a:hover .left{
  border: 0.5em solid #e74c3c;
}

 a:hover .left:after {
  border-top: 0.5em solid #e74c3c;
  border-right: 0.5em solid #e74c3c;
}

.left {
  display: inline-block;
  width: 4em;
  height: 4em;
  border: 0.5em solid #333;
  border-radius: 50%;
  margin-right: 1.5em;
  margin-top: 5px;
}

.left:after {
  content: '';
  display: inline-block;
  margin-top: 0.9em;
  margin-left: 0.9em;
  width: 1.4em;
  height: 1.4em;
  border-top: 0.5em solid #333;
  border-right: 0.5em solid #333;
  -moz-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}