@font-face {
  font-family: creato;
  src: url('assets/font/creato_display/CreatoDisplay-Regular.otf');
}
@font-face {
  font-family: exclusive;
  src: url('assets/font/exclusive_editorial/DR_Exclusive_Editorial.ttf');
}

html {
}

body {
  background-color: #F2F2F2;
  color: #383838;
  padding: 0px;
  margin: 0px;
  text-align: center;
  font-family: creato;
}

.white {
  background-color: #F2F2F2;
  color: #383838;
  padding: 20px;
  margin: 0px;
}
.green {
  /* background-color: #8EAC98; */
  background-color: #A6BDAE;
  color: #012D11;
  padding: 20px;
  margin: 0px;
}
.green a {
  color: #027A2E;
}
.red {
  background-color: #C9B9BA;
  color: #4F070A;
  padding: 20px;
  margin: 0px;
}
.black {
  background-color: #383838;
  color: #F2F2F2;
  padding: 20px;
  margin: 0px;
}

p {
  font-size: 18px;
}
h1 {
  font-family: exclusive;
  font-size: 60px;
}
h2 {
  font-family: exclusive;
  font-size: 40px;
}
h3 {
  font-size: 24px;
}

::selection {
  background-color: rgb(240, 240, 240);
  color: rgb(20, 20, 20);
}

a {
  color: inherit;
  /* padding: 2px; */
}
a:link {
  /* color: rgb(240, 240, 240); */
  /* color: inherit; */
}
a:visited {
  /* color: rgb(240, 240, 240); */
  /* color: inherit; */
}
a:hover {
  /* border-radius: 4px; */
  /* color: rgb(0, 0, 0); */
  /* color: inherit; */
  /* background-image: linear-gradient(90deg, rgba(255,64,64,1) 0%, rgba(255,238,74,1) 37%, rgba(105,255,84,1) 70%, rgba(56,154,255,1) 100%); */
}
a:active {
  /* color: rgb(0, 0, 0); */
  /* color: inherit; */
  /* background-color: rgb(240, 240, 240); */
  /* background-image: none; */
}

.event {
  /* background-color: yellow; */
  width: 100%;
  margin: 0px;
  padding: 0px;
  text-align: left;
  margin-bottom: 40px;
  /* display: inline-block; */
}
.event-img {
  /* background-color: blue; */
  /* width: 40%; */
  margin: 0px;
  padding: 0px;
  display: inline-block;
}
.event-img img {
  width: 100%;
  /* margin-left: 40px; */
  max-width: 400px;
}
.event-text {
  /* background-color: red; */
  width: calc(100% - 470px);
  text-align: left;
  vertical-align: top;
  margin-left: 30px;
  margin-right: 30px;
  display: inline-block;
}
.event-text p {
  max-width: 800px;
}

@media only screen and (max-width: 800px) {
  .event-img {
    width: 100%;
    text-align: center;
  }
  .event-text {
    width: 100%;
    margin: 0px;
  }
}