@charset "utf-8";
/* CSS Document 2020-04-26*/

/* COLORS:  Header = #cef2ff Footer = #a5c2cc Tan = #fdf9dc  Light Blue = #d9ffff Hover Green = #5dff8f */

* {
	font-family: verdana, geneva, tahoma, sans-serif;
}

body {
	background-color:#ffffff; /* #e6fcbd #e7ffba #f5e5e9  */
	background-repeat: no-repeat;
	border:1px solid black;
	margin: 0px;
	overflow-x:hidden;
}

.header-stripe {	
	background-color:#d9ffff; /* #cef2ff #99ccff #6699cc #7DA1C4*/
    border: 1px solid #000;
	border-radius: 2px;
	box-shadow: 1px 2px 4px #000;
	display: flex;
	justify-content: space-between;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 0;
    padding: 0px;
    position:fixed;
	width:100%;
    z-index: 12000;
}

.header-flow {
    height: auto;
    margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 0;
    position: absolute;
}

#header-title {
	clear: left;
	color: #000;
    display:inline-block;
	float:left;
	font-size: .9rem;
	font-weight: bold;
	height: auto;
	padding: .2rem .5rem .2rem 3rem;
	width: auto;
}

#header-square {
	color: #FFFFFF;
    visibility: visible;
	width:13rem;
}

/* THIS MUST STAY ON TOP OF .NAVBAR-MAIN TO WORK PROPERLY */
.navbar-main, .navbar-main-flow {
	height: 2.4rem; /* controls height of Navbar, but only lines on side change */
    margin-left:8%;
    margin-top: 1.6rem;
    position: absolute;
    width:84%;
    z-index: 10000;
}

.navbar-main {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    position:fixed;
    /*box-shadow:4px 12px 10px #000;*/
    z-index: 10000;
}

.navbar-main-flow {
    width:100%;
    z-index: 9999;
}

.landscape {
    /* background-color: #ffffff; */
	display: flex;
	flex-direction: column;
    margin-top: 4rem;
    height: auto;
	overflow-x: hidden;
    position: absolute;
    width:100%;
    /*z-index: 7000;*/
}

.landscape-cycle-main {
	display: flex;
	flex-direction: column;
    margin-top: 4rem;
    height: auto;
    position: absolute;
    width:100%;
    /*z-index: 7000;*/
}

.full-stripe {
    border-top:1px solid black;
    height: auto;
    margin-bottom:4px;
	overflow-x: hidden;
	padding: .8rem 0rem .8rem .5rem;
    position:relative;
    /*z-index: 9950;*/
}
.home-stripe {
	align-items:baseline;
	background-color: #d9ffff;
	border: 3px solid #000000; /* cef2ff #64ffff */
	border-radius: 16px;
    box-shadow:1px 2px 2px #6d6666;
	display:flex;
	/* font-size: 1.6rem; */
	font-weight: 700;
    /* height: auto; */
	justify-content: space-between;
    margin-bottom:.5rem;
	margin-left: .4rem;
	max-width: 97%;
	padding: .6rem;
	text-align: center;
    z-index: 9950;
	opacity:1;
}

.home-stripe-adv {
	align-items:baseline;
	background-color: #e4ffff; /* 3ce2e2 d2fafa */
	border: 2px solid #000000; /* cef2ff */
	border-radius: 16px;
    box-shadow:1px 2px 2px #6d6666;
	display:flex;
	font-size: 1.2rem;
	font-weight: 700;
    /* height: auto; */
	justify-content: space-between;
    margin-bottom:.5rem;
	margin-left: .4rem;
	max-width: 97%;
	padding: .5rem;
	text-align: center;
    z-index: 9950;
	opacity:1;
}

.home-stripe-link {
    border-radius: 14px;
    display:flex;
    justify-content: space-between;
    padding: .6rem;
    width:48rem;
}
.home-stripe-link .home-goto {
    background-color:;
}

.home-stripe-link:hover {
    background-color:; /* #5dff8f */
}

.home-stripe-cycle-title {
    font-size: 1.2rem;
}

.home-goto {
	background-color:; /* #f4f4f4 #EEE #cef2ff #fcfcfc */
	border: 2px solid #000000; /* cef2ff */
	border-radius: 24px;
	box-shadow: 2px 2px 2px #524c4c;
	color: black;
    display:inline-block;
	float:right;
	font-size:.9rem;
	font-weight:700;
    height:auto;
    padding:.3rem;
	padding-right:1.4rem;
	padding-left:1.4rem;
	text-align: center;
    z-index: 9950;
}

.home-goto:hover {
    background-color: #5dff8f; /* #5dff8f */
}

.home-info {
	background-color: #d9ffff; /* #f4f4f4 #EEE #cef2ff #fcfcfc */
	border: 1px dashed #bcb5b5; /* cef2ff */
	border-radius: 22px; 
	box-shadow: 2px 2px 2px #524c4c;
	color: black;
	font-size: .8rem;
	margin-right:.6rem;
	padding: 3px;
	padding-left: .1rem;
	padding-right: .1rem;
	text-align: center;
	width:5.2rem;
    z-index: 9950;
}


.home-info:hover {
    background-color: #5dff8f;
}

/* This is the containter for the Main Title for Cycle pages */
.cycle-title-track {
    display: flex;
    justify-content: space-between;
    height:auto;
    padding: 0 5rem 0 1rem;
    width:100%;
}


/* This is the Main Title for Cycle pages */
.cycle-title {
	background-color: #e4ffff; /* #f4f4f4 #EEE #cef2ff #fcfcfc d9ffff*/
	border: 2px solid #000000; /* cef2ff */
    border-left: 4px solid #000000;
	border-radius: 22px;
    box-shadow:2px 2px 6px #524c4c;
    display:inline-block;
	font-size:1.2rem;
	font-weight:900;
	height: auto;
	letter-spacing: .6rem;
	margin: .4rem 0 .4rem .5rem;
    padding: .3rem 1rem .3rem 1rem;
    text-align:center;
    z-index: 9950; 
}

.social-strip {
    align-self: center;
    border-radius:14px;
    display:flex;
    flex-direction:row;
    height:auto;
    justify-content: space-between;
    padding:.2rem .3rem 0rem .3rem;
    width:200px;
}
.social-bin {
    background-color:#d9ffff; /*  #fdf9dc  */
    border:0px solid black;
    border-left: 3px solid black;
    border-right: 4px solid black;
    border-radius:22px;
    display:flex;
    height:auto;
    padding: 0rem .2rem .2rem .4rem;
    margin:0rem .1rem 0rem .1rem;
}
.social-bits {
    border-radius:16px;
    padding:.4rem .4rem .2rem .4rem;
}
.social-bits:hover {
    background-color:#5dff8f;
    padding-top:.6rem;
}
.social-knob {
    height:24px;
    width:100px;
}
.social-tooltip {
    position: relative;
    display:inline-block;
}
.social-tooltip .social-tooltiptext {
    background-color:#a5c2cc;
    border-radius:6px;
    color:black;
    text-align:center;
    visibility: hidden;
    width: 200px;
    margin-left:-102px;
    bottom:80%; /* controls how close arrow of balloon is to icon */
    left:50%;
    padding: .0rem .3rem .2rem .3rem;
    position:absolute;
    z-index:15000;
    opacity: 0;
    transition: opacity 0.3s;  
}

.social-tooltip .social-tooltiptext::after {
    border-color: #555 transparent transparent transparent;
    border-style: solid;
    border-width:5px;
    content:"";
    left: 40%;
    margin-left:-5px;
    position:absolute;
    top:100%;
}

.social-tooltip:hover .social-tooltiptext {
    opacity: 1;
    visibility: visible;
}

.cycle-landscape {
	/* background-color: #eee; */
	border-radius: 16px;
	color: white;
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	margin: .2rem .2rem .2rem .2rem;
	max-width: 100%;
	padding: .2rem .2rem .5rem .2rem;
    z-index: 9950;
}

.cycle-landscape50{
    display:flex;
    flex-direction: column;
	padding:.4rem;
	width:50%;
}

.cycle-landscape100{
	display:flex;
	flex-direction:column;
	padding:0 .4rem .4rem .4rem;
	width:100%;
}

.cycle-arena-directions {
	background-color:#e4ffff; /*  #ffd9e6 #fdf9dc rgba(168, 255, 178, 0.56) */
	border: 3px solid #5dff8f; /* #00ff14 */
	border-radius:12px;
	box-shadow: 3px 2px 3px #00ff14;
	font-size: .85rem;
	font-weight: 900;
	letter-spacing: .05rem;
	padding: 1.2rem 1rem .6rem 1rem;
}

.cycle-arena-heading,
.cycle-heading-dash {
	border-bottom: 1px dashed black;
	border-right: 1px dashed black;
	border-radius:18px;
	display:inline-block;
	font-size:.9rem;
	font-weight: 500;
	clear:both;
	float:left;
	letter-spacing: .4rem;
	margin-right: .4rem;
	margin-top:-.4rem;
	padding:.4rem .6rem .4rem .8rem;
	text-align: center;
}

/* adjust */
.cycle-heading-dash {
	float:right;
	margin-bottom:.4rem;
}

.cycle-arena-heading {
	margin-right:1.2rem;
}

.cycle-arena-title, 
.cycle-arena-recomm, 
.cycle-arena-best, 
.header-stripe, 
.cycle-arena-title100  {
	background-color: #fdf9dc; /* #e4ffff */
} 
.cycle-title, 
.cycle-arena-recomm, 
.cycle-arena-notables, 
.header-stripe, 
.cycle-arena-title100  {
	background-color: #e4ffff; /* #e4ffff */
} 

.cycle-arena-title, 
.cycle-arena-title100 {
    border:1px solid black;
    border-radius: 12px 12px 0 0;
    box-shadow:2px 4px 4px #000;
	color: black;
    display:inline-block;
    font-size:1rem;
	font-weight:900;
    height:auto;
	letter-spacing: .05rem;
	margin-left:12%;
    margin-bottom: -.15rem;
	padding: .4rem .5rem .6rem .5rem;
	position:relative;
	text-align: center;
    width:74%;
	z-index: 100;
}
.cycle-arena-title100 {
	margin-top:.2rem;
	width:42%;
}

/* These are the containers */
.cycle-arena-combo {
    height:auto;
    margin-bottom:1rem;
    width:auto;
}

.cycle-arena-best,
.cycle-arena-benefits,
.cycle-arena-recomm,
.cycle-arena-notables {
    /* align-items: baseline; */
	border: 1px solid #000000; /* cef2ff */
    border-left: 4px solid black;
    border-right: 2px solid black;
	border-radius: 22px;
    box-shadow:1px 1px 5px #000;
	
	flex-direction: row;
	height: auto;
    justify-content: space-between;
    margin-left: .5%;
	padding: .8rem .3rem .7rem .3rem;
	padding-bottom:1.2rem;
	position:relative;
    z-index: 9950;
}

/* adjust */
.cycle-arena-benefits {
	background-color:#e4ffff; 
	border-left:2px solid #000000; 
	border-radius:12px; 
	display:inline-block; 
	margin-right:.4rem; 
	margin-bottom:.8rem;
	width:80%
}
.cycle-arena-recomm {
	background-color: #e4ffff; 
	border-radius: 4px; 
	display:inline-block; 
	font-size:.8rem; 
	font-weight:400; 
	line-height:140%; 
	padding: .6rem;
}
.cycle-arena-notables {
	border: 2px solid #000000; /* cef2ff */
	display:inline-block; 
    line-height: 150%;
}

.cycle-one-pixel {
	height:16px;
}

/* These are organizers inside the containers */
.cycle-arena-list {
	display:flex;
	flex-direction: column;
	flex:0 0 64%;
}

.cycle-arena-photo {
	flex-basis:36%;
	}

/* cycle-ing-info is meant to replace direction and direction-head */
.cycle-ing, 
.cycle-ing-benefits,
.cycle-ing-info-directions,
.cycle-ing-direction, 
.cycle-ing-direction-head, 
.cycle-ing-head, 
.cycle-ing-info, 
.cycle-ing-info-final,
.cycle-ing-indent, 
.cycle-ing-list {
    /* background-color: #cef2ff; #f4f4f4 #EEE #cef2ff #fcfcfc 
	border: 4px solid black; */
	color: black;
	display:inline-block;
    font-size:.85rem;
	font-weight:400;
    line-height:150%;
	margin-top:.8rem;
	margin-left:.2%;
    padding: 0rem .2rem 0rem 1rem;
    z-index: 9950;
}

/* adjust */
.cycle-ing {
	font-weight:700;
}

.cycle-ing a {
    color:black;
}
.cycle-ing a:hover {
    color:#00651b;
    background-color:#e4ffff;
    padding:4px;
}
.cycle-ing-info-directions {
	font-size:1rem;
	margin:0;
	padding:0;
}
.cycle-ing-indent {
	font-weight:700;
	margin-left:8%;
	margin-top:.2rem;
}

.cycle-ing-info-head {
	font-weight:800;
	margin-top:1rem;
	margin-bottom:-.8rem;
	letter-spacing: .05rem;
	}
.cycle-ing-info {
	margin-top:1rem;
	}
.cycle-ing-info-final {
	margin-bottom:.2rem;
	}
.cycle-ing-info-indent {
	margin-left: 6%;
	margin-top:.4rem;
}

.cycle-ing-benefits {
	font-weight:400;
	margin-bottom:.4rem;
}

.cycle-ing-head {
    font-weight: 900;
	margin-bottom:.2rem; /* was 0rem before change */
}

.cycle-ing-list {
    font-weight: 400;
    margin-bottom:.4rem;
}

.cycle-ing-direction-head {
	font-size:.8rem;
	font-weight:600;
	letter-spacing: .05rem;
	padding: 0 .4rem .2rem .4rem;
}

.cycle-ing-direction {
	font-weight:400;
	padding:0 .4rem .8rem 2.6rem;
}


.cycle-arena-note {
    align-self:flex-end;
    background-color: #fdf9dc;
    border-radius:6px;
    font-size:.8rem;
    font-weight:700;
    height:auto;
    margin:.75rem 0 .4rem 0;
    padding:.2rem .4rem .2rem .2rem;
    }

/*
.cycle-arena-notables .cycle-ing{
    margin:.4rem 0 .6rem 0;
}
.cycle-arena-best .cycle-ing{
    margin:.1rem 0 .5rem 0;
}
*/
.cycle-download {
    background-color: firebrick;
    margin-bottom:.5rem;
}




.hoversnap {
  background-color:#f2b7b7;
  border: 2px solid #000000;
  border-radius: 8px;
  box-shadow: 10px 6px 36px 8px #000000;
  height:auto; /* 66% works */
  line-height: 120%;
  margin-left: -1%;
  margin-top: 0%;
  max-width: 90%;
  min-height:44%;
  /*opacity:.98;*/
  position:fixed;
  padding: 1rem 1rem 1.5rem 1rem;
  transition: opacity 1s;
  z-index:10005; /* aaaalways on top*/
}

a .hoversnap {
    height:auto;
}

.hover-title  {
    background-color:#f2b7b7;
	border-top: 1px solid #000000;
	border-left: 4px solid #000000;
	border-right: 4px solid #000000;
    border-radius: 8px;
	display: inline-block;
	font-size: 1.2rem;
	height:auto;
    letter-spacing: .6rem;
	line-height:130%;
	margin-bottom: 1%;
    padding: 8px;
} 
.hover-arena-bits  {
    background-color:#f2b7b7; /* #eee #f2b7b7 */
	border-bottom: 1px solid #000000;
	border-left: 4px solid #000000;
	border-right: 4px solid #000000;
    border-radius: 8px;
	clear:left;
	display: inline-block;
	font-family:Arial, Helvetica, sans-serif;
	float:left:
	height:auto;
    padding: 14px;
	width:95%;
}
.hover-bits, .hover-bits-elements  {
    background-color:#f2b7b7; /* #eee #f2b7b7 */
	clear:both;
	display: inline-block;
	float:left;
	font-size: 1rem;
	height:auto;
	line-height:160%;
    padding: .2rem .2rem 1rem .2rem;
	width:95%;
} 
.hover-bits-elements {
	border-left: 1px dashed black;
	border-radius:14px;
	font-size:.9rem;
	font-style: italic;
	margin-bottom:1.4rem;
	padding:.5rem;
}

.hover-arena-bits .home-goto {
    background-color: #cef2ff;
}
.hover-arena-bits .home-goto:hover {
    background-color: #5dff8f;
}

.hoversnap-social {
    position:relative;
}
.hoversnap-social-arena {
  border:2px solid black;
  background-color:#ffcedf;
  /* box-shadow: 10px 6px 36px 8px #000000; */
  bottom:25%;
  /* display:flex;
  flex-wrap:wrap;
  flex-direction: row;
  justify-content: space-around; */
  height:auto;
  left:50%;
  padding: .0rem .3rem 0rem .3rem;
  position:absolute;
  width:-120px;
  z-index:15000; /* aaaalways on top*/
}

/*
.hoversnap-social-arena  {
    height:auto;
    width:120px;
} */

.info {
    background-color: #c9c2c9;
    border: 1px solid darkorange;
    border-radius: 14px;
    font-size: 1.8rem;
    padding-bottom:8px;
    padding-left:12px;
    padding-right:12px;
    padding-top:8px;
}
.info:hover {
    background-color: darkorange;
}


.question, .question-fun, .question-fun-list {
	border-left: .1rem dashed #A5C2CC; 
	border-right: .1rem dashed #A5C2CC;
	font-size: .9rem;
	font-weight: 600;
	padding:.7rem 0 .2rem .7rem;
}

.question-fun {
    font-weight: 500;
    padding:.2rem 0 .6rem .7rem;
}

.question-fun-list {
	font-weight:400;
	line-height:140%;
	padding-left:2rem;
	margin-top:-.9rem;
	padding-bottom:.6rem;
}

.answer {
	border-left: .1rem dashed #A5C2CC; 
	border-right: .1rem dashed #A5C2CC;
	font-size: .9rem;
	font-weight: 400;
	padding: 0 1.8rem .4rem 2.2rem;
}

.answer-fun {
    font-size: .8rem;
	font-weight: 400;
}

/* START OF FOOTER LIST CSS */

.footer-main {
    background-color: #A5C2CC; /* #A5C2CC #6e6e6e #7ea5b2 #bbbbbb */
    border: 2px solid #000;
    border-radius: 12px;
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
	color: #000;
	display: inline-flex;
	flex:10;
    flex-wrap: wrap;
	justify-content: space-around;
    margin-top: 1.2rem;
	min-height: 60px;
	width: 100%;
}

.list_head {
	font-size:0.7rem;
	font-weight: 900;
    margin-bottom: .4rem;
    visibility: hidden;
}

.horizontal_list ul /* FOOTER ONLY */ {
    background-color:  ;
    color: #000;
	letter-spacing: 0.15em;
	list-style-type: none;
	padding: .2em 0em 0em 0em;
}

.horizontal_list ul li {
	border: 2px solid #000;
	border-radius: 14px;
	font-size:0.9rem;
    font-weight: bold;
	letter-spacing: 0.5em;
	padding: .8em;
	text-decoration:none;
}

.horizontal_list ul li:hover {
    background-color: #d9ffff; /* #99ccff #cef2ff */
    cursor:pointer;
}

/* TOOL TIP TEXT */

.tooltip {
    position: relative;
}

.tooltip .tooltip_text {
  background-color:#FF9933;
  border: 3px solid #000;
  border-radius: 18px;
  color:#000000;
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  height: auto;  
  /* line-height: 120%;  */  
  opacity: 0;
  padding: .5em .5em .5em .5em;
  position: absolute;
  text-align: center;
  transition: opacity 1s;
  visibility: hidden;  
  z-index: 100000;
    
/* Position the hovertext to the LEFT */ 
    width: 480px;
    top: -70px; /* top: -50px; puts tip to top ; 100% puts tip on bottom*/
    right: 50%; /* right: 105%; puts tip to left ; left: 65% */
}

@media (max-width:620px) {
	.tooltip .tooltip_text {
      top: -70px; /* top: -50px; puts tip to top ; 100% puts tip on bottom*/
      left:-80%;
	  width: 380px;
	}
}

.tooltip .tooltip_text::after {
    content: " ";
    position: absolute;
    bottom: -44%;  /* At the top of the tooltip */
    left: 90%;
    margin-left: -15px;
    border-width: 15px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

.tooltip:hover .tooltip_text {
    opacity: 1;
    visibility: visible;
}

@media (max-width:620px) {
	.tooltip .tooltip_text::after {
	  bottom: -52%;  	
      left:50%;
	}
}


/* END OF FOOTER LIST CSS */

.scroll-top {
       	background-color: ;
        border-radius: 30px 0 0 30px;
		border: 1px solid black;
        border-right: 0;
        bottom: 2px;
        color: black;
		cursor:pointer;
		font-size:.7rem;
        font-weight: bold;
        line-height: normal;
		margin-right:0px;
		margin-bottom:4%;
        padding: 6px;
	 	position: fixed;
		right: 0px;
	   /* text-orientation: upright;
		writing-mode: vertical-rl; */
		z-index: 30000;
    }

.scroll-top:hover {
	background-color: #5dff8f; /* #d9ffff  */
}

.share-bubble {
       	background-color: ;
        border-radius: 30px 0 0 30px;
		border: 1px solid black;
        border-right: 0;
        bottom: 2px;
        color: black;
		cursor:pointer;
		font-size:.7rem;
        font-weight: bold;
        line-height: normal;
		margin-right:0px;
		margin-bottom:40%;
        padding: 9px;
	 	position: fixed;
		right: 0px;
	   /* text-orientation: upright;
		writing-mode: vertical-rl; */
		z-index: 30000;
    }

.share-bubble:hover {
	background-color: #5dff8f; /* #A5C2CC    */
}

.home-goto-exit {
	border-radius: 24px;
	box-shadow: 0px 0px 0px #524c4c;
	float:right;
	padding:.4rem;
    z-index: 9950;
}


/* NOTES to remember CSS commands:

text-decoration: none;  (removes underlines from active links)

list-style-type: none;  (removes 


    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 

*/