* {
  box-sizing: border-box;
}

body.home {
  width: 100%;
  height: 100%;
  font-family: 'Arial', sans-serif;
  padding:0;
  margin:0;
  overflow: hidden;
}

img {
  /* unused but necessary for inner images */
  max-width: 100%;
  max-height: 100vh;
}

.wrapper {
  /* layout */
  width: 100%;
  height: 100vh;
  //display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  position: relative;
}

.block{
	  /* layout */
  height: 25vh;
  min-width: 100%;
  flex: 1;
  display: flex;
  /* content styling OPTIONAL*/
  align-items: center;
  justify-content: center;
  padding: 10vh;
  /* background styling */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

p{
    height: 100%;
    width: 100%;
    text-align: center;
}

.home p{
  margin:0;
}

p a{
	width: 100%;
    display: block;
    height: 100%;
}

.wrapper h1{
	position: absolute;
	color: transparent;
	top:-10000px;
	left:-10000px;
}

.livecomedy{
	position: absolute;
	width: 35vw;
  right: -29px;
  top: 49vh;
	transform: translateY(-50%);
  z-index: 99;
}

.livecomedy a{
	display: inline;
}

.livecomedy img{
	border-radius: 100%;
	width: 100%;
    box-shadow: rgba(0,0,0,0.3) -5px 5px 5px;
}

.balbuties {
  background-color: transparent;
  background-image: url(img/balbuties.jpg);
}

.alaine {
  background-color: transparent;
  background-image: url(img/alaine.jpg);
}

.alaine a, .poule a, .detournement a, .christophine a, .ateliers a{
	color: transparent;
}

.poule {
  background-color: transparent;
  background-image: url(img/poule.gif);
}

.detournement {
  background-color: transparent;
  background-image: url(img/detournement.jpg);
}

.christophine{
  background-color: transparent;
  background-image: url(img/christophine.jpg);
}

.ateliers{
  background-color: transparent;
  background-image: url(img/ateliers.png);
}

.hover{
  position: absolute;
  width: 100%;
  height: 100%;
  top: -150%;
  background: rgba(0,0,0,0.7);
  line-height: 20px;
  padding-top: 2vh;
}

.block:hover .hover{
  top:0;
}

.hover h2, .hover p, .hover a{
  color:#fff;
  text-decoration: none;
  text-align: center;
  height:auto;
}

.hover h2{
  font-size: 32px;
  font-family: 'Impact', sans-serif;
}

.hover .link{
  font-family: Arial, sans-serif;
  padding-top: 10px;
}



// LIVE COMEDY

.content{
  
  height: 500px;
}

.content{
  background-image: url('img/livecomedy.jpg');
  background-position: center 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 960px;
  margin: 0 auto;
}

.content h1{
  text-align: center;
  color: #282828;
  font-size: 40px;
}

.Part1, .Part2{
  width: 50%;
  float: left;
  padding: 20px;
}

.content p{
  line-height: auto;
  font-size: 18px;
  text-align: justify;
  color: #282828;
}

.content h2{
  text-align: center;
  color: #282828;
  font-size: 35px;
}

.content h3{
  text-align: center;
  color: #282828;
  font-size: 28px;
}

.contact{
  text-align: center;
}

.contact p, .contact address{
  font-size:22px;
  text-align: center;
}

a{
  color: #282828;
}


@media screen and (orientation:portrait){
  .content{
    width: 100%;
  }
  .Part1, .Part2{
    float: none;
    width: 100%;
  }
}

@media screen and (max-width:960px){
  .content{
    width: 100%;
  }
}


@media screen and (orientation:landscape){
	.block{
		display: block;
		float: left;
		min-width:25%;
		width: 25%;
		height: 100%;
		padding: 0;
		line-height: 50vh;
	}
	.livecomedy{
		width: 15%;
		margin: 0%;
		right: -6vh;
    top: 12vh;
	}
	.livecomedy p{
		margin: 0;
	}
	.livecomedy img{
    box-shadow: rgba(0,0,0,0.3) 5px 5px 5px;
	}
  .hover{
    padding-top: 37vh;
  }
}