@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&family=Roboto&display=swap');

body{
  background-color: whitesmoke;
}

#welcomeText{
  font-family: 'Mountains of Christmas', sans-serif;
  text-align: center;
  font-size: large;
}

.video-responsive{
	position:relative;
	padding-bottom:56.25%;
	padding-top:0px;
	height:0;
	overflow:hidden;
}

.title{
  font-family: 'Mountains of Christmas', sans-serif;
  margin-top: 20px;
}

.video-responsive iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}

#videoContainer{
  width: 100%;
}

#textContainer{
  margin-top: 10px;
  width: 100%;
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: white;
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}

#content{
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hidden{
  display: none;
}

#header{
  width: 100%;
  margin-top: 35px;
  margin-bottom: 35px;
}

#footer{
  text-align: center;
}

#video{
  margin-left: auto;
  margin-right: auto;
}


#detailInfoText{
  padding-left: 5px;
  padding-right: 5px;
}

.door img{
  width: 100%;
}


.door{
  display: inline;
  background-size: 90%;
  float: left;
}

.doorActive:hover{
  background-size: 100%;
}

.doorRow{
  display: inline;
  width: 100%;
  margin-top: -50px;
}

#d1 .doorActive{
  width:27%;
  background-image: url("../img/01O.png");
  background-repeat: no-repeat;
  background-position: center; 
}


#d1{
  width:27%;
  background-image: url("../img/01C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d2{
  width:21%;
  background-image: url("../img/02C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d3{
  width:27.5%;
  background-image: url("../img/03C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d4{
  width:24.5%;
  background-image: url("../img/04C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d5{
  width:24%;
  background-image: url("../img/05C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d6{
  width:26%;
  background-image: url("../img/06C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d7{
  width:25%;
  background-image: url("../img/07C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d8{
  width:25%;
  background-image: url("../img/08C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d9{
  width:25%;
  background-image: url("../img/09C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d10{
  width:25%;
  background-image: url("../img/10C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d11{
  width:25%;
  background-image: url("../img/11C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d12{
  width:25%;
  background-image: url("../img/12C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d13{
  width:25%;
  background-image: url("../img/13C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d14{
  width:25%;
  background-image: url("../img/14C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d15{
  width:25%;
  background-image: url("../img/15C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d16{
  width:25%;
  background-image: url("../img/16C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d17{
  width:25%;
  background-image: url("../img/17C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d18{
  width:25%;
  background-image: url("../img/18C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d19{
  width:23%;
  background-image: url("../img/19C.png");
  background-repeat: no-repeat;
  background-position: center; 
}

#d20{
  width:27%;
  background-image: url("../img/20C.png");
  background-repeat: no-repeat;
  background-position: center; 
}


#santa{
  float: left;
  min-width: 80px;
  max-width: 100px;
  padding: 0;
  margin:0;
}

.headTitle{
  width: 90%;
}

#detailBack{
  text-align: center;
  border: 1px solid #806969;
  border-radius: 10px;
  background-color: #FF9F96;
  height: 50px;;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: 'Mountains of Christmas', sans-serif;
  color: #FFFFFF;
  font-size: 2em;
  line-height: 50px;
  width: 100%;
  max-width: 500px;
}

#detailBack:hover{
  background: #84C15E;
}


.door p{
  font-family: 'Mountains of Christmas', sans-serif;
  color: #FFFFFF;
  font-size: 50px;
  line-height: 50px;
  text-align: center;
  vertical-align: middle;
}

#title{
  font-family: 'Mountains of Christmas', sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  margin: 0;
  margin-top: 3px;
  padding-left: 2px;
}

#detailTitle{
  font-family: 'Mountains of Christmas', sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
}

#detailInfoTextSub{
  font-family: 'Mountains of Christmas', sans-serif;
  font-size: 1.5em;
  font-weight: 400;
  text-align: center;
}

#subtitle{
  font-family: 'Mountains of Christmas', sans-serif;
  font-size: 0.8em;
  margin: 0;
  margin-top: -20px;
  padding-left:2px;
}

.inactive{
  background: #DCCBCC;
}

.overview{
  padding-left: 2px;
  padding-right: 2px;
}