@charset "UTF-8";
/* CSS Document */

.example {
  padding: 20px;
  color: white;
}

.hero {width: 100%;
	margin: 0px;
	flex: auto;
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.body {background: rgba(118, 91, 167, 1);
margin: 0px}

.maintext {display: flex; 
	flex-wrap: wrap; align-content: center;
	justify-content: center;
padding:30px;}

.link {color: #b48bff;
	text-decoration: none;
}
.link:active {color:white;}
.link:hover {color: white;}

.link2 {color: #765ba7;
	text-decoration: none;
}
.link2:active {color:white;}
.link2:hover {color: white;}

.footer {
	display: flex; 
	background-color: #b48bff;
justify-content: space-around;
	align-content: center;
flex-wrap: nowrap;}

.svg-inline {
  
  /* without a custom viewbox we have a square aspect ratio as default */
  height: 1em;
  width: 1em;
	color: white;
	align-content: center;
	justify-self: center;
}
svg-inline:hover {color: #765ba7;}


/* Typography*/

html {font-size: 16px;}

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: false;
  line-height: 1.65;
	color: white;
}

p {
  font-size: 1em;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Open Sans', sans-serif;
  font-weight: true;
  line-height: 1.15;
}

h1,
.text-size-h1 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  margin-top: 0;
  font-size: 3.05em;
	
}

h2,
.text-size-h2 { font-size: 2.44em; }

h3,
.text-size-h3 { font-size: 1.95em; }

h4,
.text-size-h4 { font-size: 1.56em; }

h5,
.text-size-h5 { font-size: 1.25em; }

.text-caption { font-size: 0.8em; }

small,
.text-small {
  font-size: 0.64em;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
	.maintext {max-width: 50%}
} 



/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
	.maintext {max-width: 50%}
}


  .calendar-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; 
    overflow: hidden;
  }
  .calendar-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }