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

body {
  font: 120% / 1.5 "Agenda", "Gill sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Lucida Grande", Roboto, sans-serif;
  scroll-behavior: smooth;
  height:100%;
}

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

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

body > svg {
  display: none;
}


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

.nav {
  position: fixed;
  z-index: 100;
  right: 1em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none;
}
.nav li {
  list-style: none;
  margin: .5em;
}
.nav a {
  display: inline-block;
  padding: .5em 1em;
  color: #fff;
  border-radius: 3px;
  background: rgba(0,0,0,.6);
}
.nav a:not(:hover) {
  text-decoration: none;
}


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

.slide {
  /* min-height:1200px; */
  position: relative;
  /* padding: 8% 0; */
}
.slide__content {
  max-width: 1200px;
  margin: auto;
}
.slide__text, .slide__image {
  /* padding: 8%; */
  text-align:right;
  color:#fff;
}
.slide__image  {
  display: inline-block;
  width: 100%;
  min-width: 220px;
  max-width: 560px;
  margin: 30px 0 0 0 ;
  z-index:1;
}
.slide__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

/* slide backgrounds */

#slide-1 .slide__bg {

  /* background-image:url(/media/1339/rick_bg.png); */
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: cover;
  top: 0;
  left: 0;

}
#slide-2 .slide__bg {
  /* background-image:url(/media/1340/wanda_bg.png); */
  background-position:center;
  background-size:cover;
  /* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: cover;
top: 0;
left: 0;
}
#slide-3 .slide__bg {
  /* background-image:url(/media/1337/glenn_bg.png); */
  background-position:center;
  background-size:cover;
}
#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(
    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
--------------------------------------------- */

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


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

.bottomMenu {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    background: red;
    z-index: 1;
}
.scrollPast {
    width: 100%;
    height: 150px;

    position: relative;
    top: 50px;
    margin: 20px 0;
}
h1 {
    display:none;
    position: absolute;
    bottom:0;
}



/* speech bubbles css */

/* General CSS Setup */
/* body{
  background-color: lightblue;
  font-family: "Ubuntu-Italic", "Lucida Sans", helvetica, sans;
} */

/* container */
/* .container {
  padding: 5% 5%;
} */

/* CSS talk bubble */
.talk-bubble {
  float:left;
  color:08768d;
  font-weight:bold;
  font-size:25px;
	margin: 40px;
  display: inline-block;
  position: relative;
	width: 460px;
	max-height: 250px;
	background-color: rgba(255,245,247,0.4);
  /* box-shadow:  2px 2px rgba(30,30,30,0.1); ; */
}

.border{
  border: 8px solid #666;
}
.round{
  border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;

}

/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -40px;
	right: auto;
  top: -8px;
	bottom: auto;
	border: 32px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.left-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -20px;
	right: auto;
  top: 0px;
	bottom: auto;
	border: 22px solid;
	border-color: lightyellow transparent transparent transparent;
}

/* Right triangle, left side slightly down */
.tri-right.border.left-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -40px;
	right: auto;
  top: 30px;
	bottom: auto;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.left-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -20px;
	right: auto;
  top: 38px;
	bottom: auto;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;

}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: -8px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 32px solid;
	border-color: transparent transparent transparent #666;
}
.tri-right.btm-left:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 22px solid;
	border-color: transparent transparent transparent lightyellow;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 transparent transparent #666;
}
.tri-right.btm-left-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 38px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow transparent transparent lightyellow;
}

/*Right triangle, placed right side slightly in*/
.tri-side.btm-left-in:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -24px;
top: auto;
bottom: 28px;
border: 12px solid;
border-color:   transparent rgba(255,255,255,0.4)  rgba(255,255,255,0.4)  transparent;
}

.tri-side.btm-right-in:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
top: auto;
bottom: 28px;
border: 12px solid;
border-color: transparent transparent rgba(255,255,255,0.4) rgba(255,255,255,0.4);
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 30px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 38px;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}
/*
	left: -8px;
  right: auto;
  top: auto;
	bottom: -40px;
	border: 32px solid;
	border-color: transparent transparent transparent #666;
	left: 0px;
  right: auto;
  top: auto;
	bottom: -20px;
	border: 22px solid;
	border-color: transparent transparent transparent lightyellow;

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -8px;
	bottom: -40px;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.btm-right:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 0px;
	bottom: -20px;
	border: 12px solid;
	border-color: lightyellow lightyellow transparent transparent;
}

/* Right triangle, right side slightly down*/
.tri-right.border.right-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -40px;
  top: 30px;
	bottom: auto;
	border: 20px solid;
	border-color: #666 transparent transparent #666;
}
.tri-right.right-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -20px;
  top: 38px;
	bottom: auto;
	border: 12px solid;
	border-color: lightyellow transparent transparent lightyellow;
}

/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -40px;
  top: -8px;
	bottom: auto;
	border: 32px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.right-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: -20px;
  top: 0px;
	bottom: auto;
	border: 20px solid;
	border-color: lightyellow transparent transparent transparent;
}

/* talk bubble contents */
.talktext{
  padding: 1em;
	text-align: left;
  line-height: 1.5em;
  width: 430px;
}
.talktext p{
  /* remove webkit p margins */
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  margin-top:0;
}

#quote1 { float:left;}
#quote2 { float:left;}
#quote3 { float:left;}

#img1{ float:left;}
#img2 {float:left; text-align:left;}
#img3 {float:left;}
.flexwrapper {width:100%; display:inline-flex;}
.half{  width:66%;display:inline-flex; padding:100px 0 0 0}
.quarter{ width:33%;display:inline-flex;}
.avatar{ width:180px; margin:100px 0 0 0}

.bubblespacer {width:620px;}

#quote1 {display:none;}
#quote2 {display:none;}
#quote3 {display:none;}



.lquotespan {
  font-size:140px;
  line-height:10px;
  left: -50px;
  position: absolute;
  top: 33px;padding:  0;
  margin:  0;
  color: rgba(255, 255, 255, 0.7);

}
.rquotespan {
  font-size:140px;
  line-height:10px;
  right: -50px;
  position: absolute;
  top: 33px;padding:  0;
  margin:  0;
  color: rgba(255, 255, 255, 0.7);

}




@media (max-width:1024px){
.slide__text { font-size:200%}
  .talk-bubble {
    font-size:30px;
  	width: 96%;
	max-height: 1000px;
  z-index:1;
margin: 9px 0 10px 5px;

  }
.talktext {width:100%; font-size:100%;}
  .half { display:block; padding:20px; }
  .quarter { display:block; width:0}
  .avatar{ width:100%; margin:40px 0 0 0; z-index:1; position:relative;  max-width: 220px;}
  .slide__image {
      display: inline-block;
      position:relative;
      width: 100%;
      margin: 0;
      height:600px;
  }
  .slide {
    padding:  0;
  }
  .home-content-image { display: inline-block;

   }



  .half {width:100%;}
  .bubblespacer {width:0px;}

  #quote1 {display:block; margin:80px 0 0 0 ;}
  #quote2 {display:block; margin:80px 0 0 0 ;}
  #quote3 {display:block; margin:80px 0 0 0 ;}


  #slide-1 .slide__bg {
    min-width: 100%;
    width: 100%;
    height: auto;
  }
  #slide-2 .slide__bg {
    min-width: 100%;
    width: 100%;
    height: auto;
  }
  #slide-3 .slide__bg {
    min-width: 100%;
    width: 100%;
    height: auto;
  }

.home-content-image .overlay {position:relative;}
div#quote2.talk-bubble.tri-side.round.btm-left-in.desktopbubble { display:none;}
div#quote2.talk-bubble.tri-side.round.btm-left-in.mobilebubble { display:block;}


.tri-side.btm-right-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: 81px;
    top: auto;
    bottom: -24px;
    border: 12px solid;
    border-color: rgba(255,255,255,0.4) rgba(255,255,255,0.4) transparent transparent;
}

.tri-side.btm-left-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 100px;
    top: auto;
    bottom: -24px;
    border: 12px solid;
    border-color: rgba(255,255,255,0.4) transparent transparent rgba(255,255,255,0.4);
}



.lquotespan {
    font-size: 90px;
    line-height: 10px;
    left: -11px;
    top: 20px;
}

.rquotespan {
    font-size: 90px;
    line-height: 10px;
    right: -12px;
    top: 20px;

}
}
@media (min-width: 1024px){
div#quote2.talk-bubble.tri-side.round.btm-left-in.mobilebubble { display:none;}
div#quote2.talk-bubble.tri-side.round.btm-left-in.desktopbubble{ display:block;}
}
/*  main.css overrides */

.home-content-image  {min-height:1850px;   background-color:#3f94a6; background-position-x:0px;}
.home-content-image .overlay  {background-image: linear-gradient(to top, #71A095 0%, rgba(0, 0, 0, 0) 0%);}

.container.padded.clearfix { margin:0; max-width:100%; padding:0;}


@media (max-width: 920px){
.home-content-image { display: block; }
}
.home-content-triple {display:none;}

section.footer-numbers {position:relative; height: 78px;}
h3.white {font-weight:bold; margin: 1em 0 0em 0;
}
p.white { margin: 0;
}