* {
	box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
		font-family: "Lato", sans-serif;
		text-rendering: optimizeLegibility;
    max-width: 100%;
    overflow-x: hidden;
}

/* All the snapping stuff */
.scroll-container {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

section {
	height: 100vh;
	/* display: flex; */
	align-items: center;
	justify-content: center;
	scroll-snap-align: center;
}

section div.contentText {
	opacity: 0;
	transition: opacity 3000ms;
}

section.is-visible div.contentText {
	opacity: 1;
}

.centerColumn {
	align-items: center;
 text-align: center;
align-content: center;
 justify-content: center;
 display: flex;
}

.firstColumn {
   width:50%;
	 height: 100%;
   float:left;
}

.secondColumn {
    width:50%;
    height:100%;
    float:right;
}

.textAlignment {
	margin-left: 5vw;
	width:40vw;
	text-align: center;
}

.downloadButton {
	width:150px;
	  border:0;
	margin-top:1vw;
	margin-left: 5vw;
  }

.titleText {
    padding-top:8vh;
	padding-bottom:3vh;
		font-size: 15vmin;
	 text-shadow: 2px 2px 4px #aaaaaa;
	 padding-left: 5vw;
	 padding-right: 5vw;
	 float: left;
	 width: 100vw;
}

.titleImage {
	transform: rotate(10deg);
	pointer-events:none;
}


.image {
    top: 8vh;
	bottom:5vh;
	height: 83vh;
	width:45vw;
	object-fit: contain;
	margin: 2vmin;
	margin-right: 10vmin;
}

.headerText {
	font-size: 8vmin;
	padding-bottom: 1vw;
}

.contentText {
	font-size: 3vmin;
	color: gainsboro;
	/* -webkit-animation: fadein 10s; */
}

.bottomDownloadButton {
	width:200px;
	margin-bottom:1vw;
	border:0;
}

.bottomTitle {
    padding-top:2vw;
	font-size: 15vmin;
	 text-shadow: 2px 2px 4px #aaaaaa;
	 padding-left: 5vw;
	 padding-right: 5vw;
	 padding-bottom:5vh;
}

.bottomContent {
	width:100%;
	height:80vh;
}

.bottomDrawer {
	width: 100vw;
	height: 20vh;
	background-color: #3e3e3e;
  bottom: 0;
}

.button {
  /* background-color: #4CAF50; */
  border:0.15em solid #FFFFFF;
	border-radius: 15px;
  color: white;
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 20px;
  cursor: pointer;
}

@media only screen and (max-width: 600px) {


  .firstColumn {
      float:none;
    width:100%;
      height:auto;
			padding-top:5vh;
  }

	.titleText {
	    padding-top:2vw;
			font-size: 5vmin;
		 text-shadow: 2px 2px 4px #aaaaaa;
		 padding-left: 5vw;
		 padding-right: 5vw;
	}

    .secondColumn {
        float:none;
        width:100%;
    }

    .textAlignment {
			margin-left: 0vw;
			width:90vw;
			text-align: center;
    }

		.imageSmallerOnMobile {
			height: 55vh !important;
			top: auto;
		bottom: 15vh;
		right: auto;
			display: flex;
			width:100vw;
		}

		.titleImage {
			transform: rotate(10deg);
			pointer-events:none;
			margin-bottom: 40vh !important;
			height: 60vh !important;
		}

    .image {
    /* top: auto; */
		height: 65vh;
		width: 100vw;
		margin-bottom: 30vh;
		margin-right:0px;
		margin-left: 0px;

	/* bottom: 25vh;
	right: auto;
    display: flex;
    height: 65vh;
		width:100vw; */
    }

}