@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
html {
  background-color: rgb(14, 151, 167);
}

a{    
    color: white;
    font-family: DIN;
}

.container2{
  background-color: rgb(0,0,0);
}
.event-calendar {
  font-size: 14px;
  font-family: DIN;
  overflow: hidden;
  white-space: nowrap;
}

.head {
  margin-bottom:0px;
}
ss{
  color:rgb(255,255,255);
}

.top-line {
    font-family: DIN;
    font-weight: 400;
    font-size: 1.5em;
    color: rgb(253, 248, 228);
    text-align: center;
    margin-bottom: 0px !important;
    padding: 5px;
    border-top: 0px solid black; 
}

.spacer {
  border-bottom: 1px solid rgb(229, 229, 229);
}

.event-list {
  display: block;
  border-right: 1px solid rgb(229, 229, 229);
}

.event {
  text-decoration: none;
}
.event:nth-child(3n+1) .event-container {
  border-left-color: #15cb43;
  /* verde */
}

.event:nth-child(3n) .event-container {
  border-left-color: #FDD835;
  /*amarillo*/
}

.event:nth-child(3n-1) .event-container {
  border-left-color: #F44336;
  /*rojo*/
}
.event-container {
  color: #131313;
  transition: all 0.2s ease;
  background:#FAFAFA;
  border-left: 3px solid;
  padding-top: 10px;
  padding-bottom: 10px;
}

.event-container:hover {
  border-left-width: 10px;
  background: #ECEFF1;
}

.date-container {
  display: inline-block;
  width: 5em;
  padding-left: 13px;
  padding-right: 8px;
  padding-bottom: 2px;
  margin-right: 6px;
  font-family: Oswald;
  font-weight: 700;
  color: #343434;
}

.date {
  font-size: 2.0em;
  display: block;
  transform: translateY(-5px);
}
.dia{
    display: block;
    font-size: .4em;
    font-weight: 400;
    margin-top: -.8em;
    text-transform: uppercase;
}
.month {
  display: block;
  font-size: .4em;
  font-weight: 400;
  margin-top: -.8em;
  text-transform: uppercase;
}
.detail-container {
  display: inline-block;
  vertical-align: top;
}

.title {
  text-transform: uppercase;
  font-family: DIN;
  font-weight: 400;
  font-size: 0.6em;
  color: #8D6E63;
}

.description {
  display: block;
  font-size: 0.6em;
  color: #4DD0E1;
}


.openEv{
  font-size: 1em;
  color: #131313;
  background-image:url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/symphony.png);
  padding-top: 20px;
  padding-left:10px;
  padding-bottom:20px;
  padding-right:10px;
  display: none;
}
.openEv.open{
  display: block;
}


.modal.custom2 .modal-content {
    position: relative;
    display: -ms-flexbox;
    display: block;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 40vw;
    height: 15vh;
    pointer-events: auto;
    background-repeat: no-repeat;
    background-clip: padding-box;
    background-size: cover;
    background-color: rgb(116,7,13);
    border: none;
    border-radius: 0.3rem;
    outline: 0;
}

.modal.custom .modal-content {
    position: relative;
    display: -ms-flexbox;
    display: block;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 70vh;
    width: 70vh;    
    pointer-events: auto;
    background-image: url(../img/donCarre.jpg);
    background-repeat: no-repeat;
    background-clip: padding-box;
    background-size: cover;
    border: none;
    border-radius: 0.3rem;
    outline: 0;
}

.modal-content {
  height: 100%;
  border-radius: 0;
  position:relative;
}

.modal-footer {
  border-radius: 0;
  bottom:0px;
  position:absolute;
  width:100%;
}