/* demo styles
--------------------------------------------- */

body {
font: 100% / 1.5 Arial;
scroll-behavior: smooth;
overflow-y: hidden; 
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

h1{
margin-bottom: 0.5em;
}
p{
margin-bottom: 1.5em;
}

body > svg {
display: none;
}


/* demo nav bar
--------------------------------------------- */

.nav {
position: fixed;
z-index: 100;
bottom: 1em;
width: 100%;
display: none;
margin: auto;
align-items: center;
}
.nav li {
flex: 1;
display: inline-block;
list-style: none;
margin: .5em;
}
.nav a {
display: block;
padding: .5em 1em;
color: #fff;
border-radius: 3px;
background: rgba(0,0,0,.6);
text-align: center;
font-size: 50%;
font-size: 2vh;
text-decoration: none;
}
.nav a:hover {
}


/* slide layout
--------------------------------------------- */

.slide {
position: relative;
//padding: 8% 0;
}
.slide__content {
max-width: 80vw;
//max-width: 1200px;
margin: auto;
}
.slide__text, .slide__image {
padding: 8%;
}
.slide__image svg {
display: block;
width: 100%;
margin: auto;

}
.slide__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}

/* slide backgrounds */

#slide-1 .slide__bg {
background-image: repeating-linear-gradient(
  90deg,
  rgb(102, 204, 102),
  rgb(102, 204, 102) 30px,
  rgb(92, 184, 92) 30px,
  rgb(92, 184, 92) 60px
);
}  
#slide-2 .slide__bg {
background-image: repeating-linear-gradient(
  45deg,
  rgb(133, 173, 230),
  rgb(133, 173, 230) 30px,
  rgb(113, 153, 210) 30px,
  rgb(113, 153, 210) 60px
);
}
#slide-3 .slide__bg {
background-image: repeating-linear-gradient(
  90deg,
  rgb(153, 216, 101),
  rgb(153, 216, 101) 30px,
  rgb(133, 196, 81) 30px,
  rgb(133, 196, 81) 60px
);
}
#slide-4 .slide__bg {
background-image: repeating-linear-gradient(
  -45deg,
  rgb(133, 193, 230),
  rgb(133, 193, 230) 30px,
  rgb(113, 173, 210) 30px,
  rgb(113, 173, 210) 60px
);
}
#slide-5 .slide__bg {
background-image: repeating-linear-gradient(
  90deg,
  rgb(214, 229, 100),
  rgb(214, 229, 100) 30px,
  rgb(194, 209, 80) 30px,
  rgb(194, 209, 80) 60px
);
}
#slide-6 .slide__bg {
background-image: repeating-linear-gradient(
  45deg,
  rgb(133, 213, 230) 0px,
  rgb(133, 213, 230) 30px,
  rgb(113, 193, 210) 30px,
  rgb(113, 193, 210) 60px
);
}


/* misc
--------------------------------------------- */

.top_bar {
font-size: 80%;
text-align: center;
background: rgba(255,255,255,.5);
padding: 0.5em;
z-index: 100;
position: fixed;
width: 100%;
}


/* Large screen layout
--------------------------------------------- */  


  .slide__text h1{
  margin-bottom:6px !important
  }
  .slide__text p{
  margin-bottom:13px !important
  }
  .downloadAtParent{
  margin-top:13px !important
  }
  
.slide__content {

}

.slide__text {
text-align: center;

}
.slide__image{


}

@media screen and (max-width: 50.1em),(orientation: portrait) {

  .slide__text h1{
  margin-bottom:6px !important
  }
  .slide__text p{
  margin-bottom:13px !important
  }
  .downloadAtParent{
  margin-top:13px !important
  }
  
.slide__content {
flex-direction: column-reverse !important;
  display: block; !important;;

}

.slide__text {
//transform-origin: 50% 50% !important;
padding-left:10% !important;
padding-right:10% !important;
text-align: center;
//min-height:360px;
    position: fixed;
    bottom: 0;
    margin-bottom: 100px;
	margin-top: 0px;
   transform-origin: 50% 0% !IMPORTANT;
   transform: translateY(-40px) translateZ(120px) scale(.6) !IMPORTANT;;
   transform: translateZ(120px) scale(.6) !IMPORTANT;;
//   transform: none !important;

//    MARGIN-BOTTOM: 5%;
}
.slide__image{
position: absolute;
top:40%;
transform-origin: 50% 50% !important;


}

.slide:nth-child(2n) .slide__image {
transform-origin: 50% 50% !important;
}
.big-center{
margin-top: -107px !important;
}
.big-center h1{
font-size: 3vw !important;
margin-top:-8%  !important;

}
h1{
margin-bottom: .6em;
}

.main-logo{
margin-top: -120% !important;
}

.downloadAt img{
margin-left:auto !important;
margin-right:auto !important;
}

}
.main-logo{
width:120%;
margin-top: -40%;
}
.big-center{
margin-top: -50px;
color:white;
}
.big-center h1{
margin-top:-80px;
margin-bottom: 0;
font-size:1.5vw;
}

@media screen and (min-width: 0px) {


.slide__content {
justify-content: center;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  flex-direction: row;
}
.slide__image, .slide__text {
  padding: 3%;
  -webkit-flex: 1;
  flex: 1;
} 
.slide:nth-child(2n) .slide__text {
  -webkit-order: 1;
  order: 1;
}
.nav {
  display: flex;
}
/* horizontal scroll styles */
html, body {
  height: 100%;
}
.slides {
  white-space: nowrap;
  height: 100%;
}
.slide {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  margin-right:-.3em;
}
.slide__content {
  height: 100%;
}



/* parallax */
@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
  html, body {
	overflow: hidden;
  }
  body {
	transform: translateZ(0px); /* Fix paint issues in Edge && Safari H/W acceleration */
  }
  .slides {
	position: absolute;
	overflow-x: auto;
	overflow-y: hidden;
	perspective: 300px;
	scroll-behavior: smooth;
	width: 100%;
  }
  .slide, .slide__content {
	transform-style: preserve-3d;
  }
  .slide__text {
	transform: translateZ(120px) scale(.6);
	transform-origin: 100% 50%;
//	margin-top: -10%;
  }
  .slide__text h1{
  margin-bottom:1%
  }
  .slide__text p{
  margin-bottom:2%
  }
  .downloadAtParent{
  margin-top:1%
  }
  
  
  .slide__image {
	transform: translateZ(50px) scale(.8);
	transform-origin: 0% 50%;
	margin-top: 50px;
  }
  
  .slide:nth-child(2n) .slide__image {
	transform: translateZ(100px) scale(.67);
	transform-origin: 100% 50%;
  }
  .slide:nth-child(2n) .slide__text {
	transform-origin: 0% 50%;
  }
  .slide:nth-child(2n) .slide__bg {
	transform: translateZ(59px) scale(.85);
  }
  .slide:nth-child(2n+1):not(:first-child) .slide__bg {
	left: -50%;
  }
  .slide:nth-child(2n+1):not(:last-child) .slide__bg {
	right: -50%;
  }
  .slide:nth-child(2n) {
	z-index: 1; /* ensure slides overlay correctly */
  }
}


}