@font-face { src: url("./assets/Lora-Bolditalic.ttf"); font-family: lBoldI; }
@font-face { src: url("./assets/PermanentMarker-Regular.ttf"); font-family: PerMark; }

html, body {	
	margin: 0;
	padding: 0;
}

/*--- Main Section ---*/

#opening {
  overflow: hidden;
  position: relative;
}

#sliding-background {
  background: url("./img/backView.jpg") repeat-x;
  /*color #F8B195 248,177,149*/
  /*text #6C5B7B 108,91,123 Comic Sans MS 12 Bold*/
  height: 38rem; /*equals 608px*/
  width: 300rem; /*equals 3x100(1600px)*/
  animation: slide 60s linear infinite;
}

@keyframes slide{
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100rem, 0, 0);
  }
}

#openingIntro {
	/*font-family: lBoldI;*/
	font-family: PerMark;
	color: #355C7D;	
	font-size: 3rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#lineOne {
	width: 25rem;
}

#lineTwo {
	width:25rem;
	text-align: right;
}

/*--- Divider ---*/

.divider {
	width: 100%;
	height: 2.4rem;
	background-color: #F8B195;
	padding-top: 0.5rem;
}

.thin {
	width: 40vw;
	height: 0.2rem;
	background-color: #355C7D;
	margin-left: 30vw;
	border-radius: 0.1rem;
}

.intermediate {
	width: 60vw;
	height: 0.3rem;
	background-color: #355C7D;
	margin: 0.5rem 20vw;
	border-radius: 0.15rem;	
}

.thick {
	width: 80vw;
	height: 0.4rem;
	background-color: #355C7D;
	margin-left: 10vw;
	border-radius: 0.2rem;
}

/*--- Picture Section ---*/

#actionPic {
	width: 100%;
	height: auto;
	background-color: #355C7D;
	padding: 1rem 0 1rem 0;
}

#picIntro {
	margin: 0 4rem;
	font-family: PerMark;
	color: #F67280;	
	font-size: 2rem;
	text-align: center;
}

#picBox {
	margin-bottom: 2rem;
}

.flexRow {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

img {
	width:100%;
	height:100%;
}

#firstPic {
	width: 12rem;
	height: 21rem;
	padding: 0 1rem 0 1rem;
}

#secondPic {
	width: 10rem;
	height: 24rem;
	padding: 2rem 1rem 2rem 1rem;
}

#thirdPic {
	width: 19rem;
	height: 22rem;
	padding: 0 1rem 0 1rem;
}

/*--- video Section ---*/

#actionVideo {
	width: 100%;
	height: auto;
	background-color: #F8B195;
}

#videoIntro {
	padding: 2rem 0 1rem 0;
	font-family: PerMark;
	color: #355C7D;	
	font-size: 2rem;
	text-align: center;
}

#videoBox {
 	padding-bottom: 2rem;
}

.layeredBox {
	width: 18rem;
	height: 25.17rem;	
	margin: 1rem 1rem 1rem 1rem;
	position: relative;
	border: 0.5rem solid #355C7D;
}

.slideShow {
	height: 18rem;
}

.behindControls {
	width: 18rem;
	height: 7rem;
	background-color: #F8B195;
	border-top: 0.2rem solid #355C7D;
	position: absolute;
	bottom: 0;
	left: 0;	
}

.returnBtn {
	width: 8rem;
	height: 2rem;
	position: absolute;
	bottom: 4.5rem;
	left: 5rem;
	color: #f8e395;
	background-color: #355C7D;
	border-radius: 1rem;
	border: 0.2rem solid black;
}

.returnBtn:hover {
	color: #355C7D;
	background-color: #F8E395;
}

.audioMod {
	width: 17rem;
	position: absolute;
	bottom: 0.5rem;
	left: 0.34rem;
	border-radius: 2rem;
	border: 0.16rem solid black;
}

.topLayer {
	width: 18rem; 
	height: 25.17rem;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #355C7D;
	display: block;
	opacity: 1;
	transition: opacity 1.5s ease;
}

.topImg {
	width: 18rem;
	height: 18rem;
}

.frontText {
	font-family: PerMark;
	color: #F8B195;
	font-size: 1.4rem;
	text-align: center;
}

.singleText {
	padding-top: 1.0rem;
}

.doubleText {
	padding-top: 0;
}

.topBtn {
	width: 8rem;
	height: 2rem;
	position: absolute;
	bottom: 0.5rem;
	left: 5rem;
	color: #F8E395;
	background-color: #355C7D;
	border-radius: 1rem;
	border: 0.2rem solid #F8B195;
}

.topBtn:hover {
	color: #355C7D;
	background-color: #F8E395;
}

/*--- Contact Section ---*/

#contact {
	width:100%;
	height: auto;
	font-family: PerMark;
	color: #F8B195;
	font-size: 1.6rem;
	text-align: center;
	background-color: #355C7D;
}

#dataInfo1 {
	padding: 3rem 0 0 0;
}

#dataInfo2 {
	padding: 0 2rem 0 2rem;
}

#contactLink {
	color: #F67280;
}

/*--- Bottom Buffer Section ---*/

#clearBottom {
	width: 100%;
	height: 12vw;
}