* {
  font-family: Arial, Helvetica, sans-serif;
}


.heading {
  background-image: url("philosophy-cafe.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

  .event-heading {
 	height: 20%;
	background-image: url("philosophy-cafe.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
  }
  
    .event-heading h1 {
	  font-size: 3em;
	    text-align: left;
  color: white;
  position: absolute;
  bottom: 0px;
  left: 10px;
  margin-block-end: .1em;
  }
  

.heading h1 {
  text-align: left;
  color: white;
  position: absolute;
  bottom: 0px;
  left: 10px;
  margin-block-end: .1em;
}


.introduction p {
	font-size: 1.25rem;
}


.programme article {
	border: 1px solid #ddd;
	padding: 10px;
	margin-block-end: 10px;
	background-color: ivory;
}

.programme article img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 200px;
  height: 200px;
}


@media screen and (max-width: 600px)  {
  /* For mobile: */

  .heading {
 	height: 30%;
  }
  
  .heading h1 {
	  font-size: 3em;
  }
    .introduction{
	  padding-left: 0pt;
	  padding-right: 0pt;
  }	  
  
    .programme{
	  padding-left: 0pt;
	  padding-right: 0pt;
  }	
    .introduction article  {
		float: none;
		width: auto;
  }
    .introduction aside {
		float: none;
		width: auto;
	
  }
  
      .event{
	  padding: 5pt;
	
  }	  
  
  .event article  {
	float: none;
		width: auto;
  }
  
  .event aside {
		float: none;
		width: auto;
	
  }
  .event article h1  {
		font-size: 2em;
  }
    .event article,aside p  {
		font-size: 1.2em;
  }
    .event p{
	  font-size: 1.2em;
  }
  
  
  .programme article img {
    float:none;
  }
  
  .programme article .text {
	  float: none;
	  width: auto;
  }
  
    .programme article .text h1 {
	font-size: 1.5em;
}

.programme article .text p {
	font-size: 1.25em;
}
  
  .programme article:after, section:after {
    display: none;
	clear: both;
  }
}

@media screen and (min-width: 600px)  {
  /* For desktop: */
  .heading {
 	height: 50%;
  }
  
  .heading h1 {
	  font-size: 6em;
  }
 
  .introduction{
	  padding-left: 20pt;
	  padding-right: 20pt;
  }	  
  
    .programme{
	  padding-left: 20pt;
	  padding-right: 20pt;
  }	
  .introduction article  {
		float: left;
		width: 70%;
  }
  
  .introduction aside {
		float: right;
		width: 25%;
	
  }
  
    .event{
	  padding: 20pt;
	
  }	  
  
  .event article  {
		float: right;
		width: 65%;

  }
  
  .event aside {
		float: left;
		width: 30%;
	
  }
  
  .event aside iframe {
		height: 200pt;
		width: 100%;
		margin-bottom:5px;
	
  }
   
  .event aside img{
		height: auto;
		width: 100%;
	
  }
  .event article h1  {
		font-size: 1.75em;
  }
    .event article,aside p  {
		font-size: 1.2em;
  }
  
  .event p{
	  font-size: 1.2em;
  }
  
  article img {
	  float: left;
	  margin-right: 10px;
  }
  
  article .text{
	  float: left;
	  width: 70%76`
  }
  
  .programme article .text h1 {
	font-size: 2em;
}

.programme article .text p {
	font-size: 1.75em;
}
  
  
  .programme article:after, section:after  {
	content: "";
    display: table;
	clear: both;
  }
}