@import url('https://fonts.googleapis.com/css?family=Ubuntu');

*{
  box-sizing: border-box;
}
body {
  width: 100%;
  margin: 0;
  padding: 0;

  background:transparent;
  background-repeat: no-repeat;
  background-position: center; 
  background-size: cover;
  background-attachment: fixed; 
  font-family: 'Droid Serif', serif;

}
/*background setting*/
#background {
  z-index: 0;
}
#background img{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
}
.mySlides {
  display: none;
}


header {
    background-color: #84152E;
    width:100%;
    height: 60px;
    margin: 0;
    position: fixed;
    top: 0;
    z-index: 1;
}

section {
  position: absolute;
  top: 0;
  margin:0;
  padding: 0;
  width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
}
h1,
h2,
h3 {
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  color: #84152E;
}
p{
  font-family: 'Ubuntu', sans-serif;
}
#main-intro {
  position: relative;
  top: 100px;
  margin: 50px 0;
  padding: 2%;
  width: 100%;
  height: auto;
  text-align: center;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  background-color: rgba(255,255,255,0.6);
}

#menu{
  width: 100%;
  margin: 150px 0 50px 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.menu-item {
	background-color: #84152E;
	border: 2px solid white;
	width: 33.33%; 
	height: 300px;
	margin: 0;
	text-align: center;
	cursor: pointer;
	perspective: 600;
}
.card {
  height: 300px;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 33.33%;
}
.menu-item .card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.card .back {
  background: white;
  text-align: center;
  transform: rotateY(180deg);
}
.card h1{
  color: white;
  font-size: 200%;
}
.question {
  width: 100%;
  margin:0;
  padding: 0 2%;
  height: 20%; 
}
.accordion {
  width: 90%;
  margin:0 5%;
}


/*----- Accordion -----*/

.accordion {
    overflow:hidden;
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
    border-radius:3px;
    background:#f7f7f7;
    margin-top: 0;
}
.accordion a{
  text-decoration: none;
  color: white;
}
.accordion .next {
  border: 1px solid #84152E;
  width: 60%;
  margin: 0 20%;
  background-color: #333;
}
.accordion .next:hover {
background-color: #84152E;
}
/*----- Section Titles -----*/
.accordion-section-title {
    width:100%;
    padding: 2px 5px;
    display:inline-block;
    border-bottom:1px solid #1a1a1a;
    background:#333;
    transition:all linear 0.15s;
    /* Type */
    font-size:1.200em;
    text-shadow:0px 1px 0px #1a1a1a;
    color:#fff;
}
 
.accordion-section-title.active, .accordion-section-title:hover {
    background:#4c4c4c;
    /* Type */
    text-decoration:none;
}
 
.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}
 
/*----- Section Content -----*/
.accordion-section-content {
    padding: 2px 5px;
    display:none;
}




/*responsive design in small screen*/

@media screen and (min-width: 410px) and (max-width: 600px) {
	.menu-item {
		width: 50%;
	}
	.card {
		width: 50%;
	}

}

@media screen and (max-width: 410px) {
	.menu-item {
		width: 100%;
    height: 200px;
	}
	.card {
		width: 100%;
    height: 200px;
    font-size: 70%;
	}
  #menu {
    margin-top: 100px;
    margin-bottom: 25px;
  }
  #main-intro {
    margin-top: 10px;
  }
}