@font-face {
  font-family: Urania-Bold;
  src: url(../fonts/Urania-Bold.otf);
}

@font-face {
  font-family: Urania-Medium;
  src: url(../fonts/Urania-Medium.otf);
}

@font-face {
  font-family: Plex;
  src: url(../fonts/IBMPlexMono-Regular.otf);
}


html {
  scroll-behavior: smooth;
  -webkit-scroll-behavior: smooth;
}

* {
    -webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: white;
}

/* Navigation styles */

nav {
	position: fixed;
	display: block;
	width: 100vw;
	height: 100px;
	text-align: center;
	border: 0px dotted #453B3E;
	border-bottom-width: 1px;
	opacity: 1;
	pointer-events: none;
	z-index: 1000;
}

h1 {
	font-family: Urania-Bold, sans-serif;
	font-size: 36px;
	color: #453B3E;
	margin-top: 40px;
}

.nav-sections {
	display: block;
	height: 98%;
	float: left;
	margin: 0;
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
}

.ns1 a, .ns3 a {
	display: inline-block;
	cursor: pointer;
	margin-top: 40px;
	pointer-events: auto;
}

.ns1 a {
	margin-left: 70px;
	color: #541896;
}

.ns1 a:hover {
	text-decoration: underline;
	color: indigo;
	font-weight: 600;
}

.ns3 a:hover {
	text-decoration: underline;
}

.ns1, .ns3 {
	width: 25%;
	text-align: center;
	font-family: Plex, monospace;
}

.ns2 {
	width: 50%;
}

.pagination, .pag, .up-down, #pag, .pag-circle, .pag-button, .pag-button {
	display: block;
}

.pagination {
	position: fixed;
	width: 110px;
	width: 85px;
	height: 100vh;
	right: 0;
	pointer-events: none;
	opacity: 1;
}

.pag {
	position: absolute;
	width: inherit;
	top: 48.5%;
}

.up-down {
	width: 14px;
	height: inherit;
	margin-left: 5px;
}

#page {
	position: absolute;
	width: inherit;
	height: inherit;
	font-family: monospace;
	font-size: 20px;
	text-align: center;
	line-height: 100px;
}

.pag-circle {
	width: 14px;
	height: 14px;
	margin: 12px;
	pointer-events: auto;
}

.pag-button {
	position: absolute;
	width: inherit;
	height: inherit;
	background-color: none !important;
	border-radius: 1000px;
	pointer-events: auto;
	cursor: pointer;
	border-style: solid;
	border-color: #7C6C71;
	opacity: 1; 
	padding: 0;
	outline: none;
	transition: ease transform 0.25s;
}

.selected-pag {
	background-color: #7C6C71 !important;
	transform: scale(1.3);
}

.selected-pag:hover {
	opacity: 1;
}

.link {
	margin-left: 20px;
	cursor: pointer;
}

.link:hover {
	text-decoration: underline;
}

#baby {
	font-size: 28px;
}


/* Div for filter nav bar */
.filters-nav {
	display: block;
	position: fixed;
	width: 100vw;
	height: 100px;
	margin-top: 102px;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transition: ease opacity 0.25s, ease margin-top 0.25s;
	margin-top: 80px;
	z-index: 700;
}


.f-n {
	display: inline-block;
	text-align: left;
	width: 520px;
	height: inherit;
}


.f-n p {
	display: block;
	width: inherit;
	height: 50%;
	font-family: Plex, monospace;
	font-size: 14px;
	font-weight: 300;
	margin-top: 12px;
	color: #7C6C71;
	line-height: 22px;
	margin-bottom: 0px;
	padding-left: 5px;
}



/* Toggle Styles */


.toggle {
	position: absolute;
	height: 50px;
	width: 115px;
	pointer-events: auto;
	background-size: 100% 100%;
	cursor: pointer;
	margin-left: 200px;
	transform: scale(0.9);
	margin-top: 5px;
}

.toggle-container, .f-light, .m-light, .f-dark, .m-dark  {
	position: absolute;
	display: block;
	width: inherit;
	height: inherit;
	pointer-events: none;
}

.toggle-container {
	border-radius: 1000px;
	z-index: 220;
}

.f-light {
	border-radius: 1000px;
	opacity: 1;
	background: rgb(255,174,218);
	background: linear-gradient(90deg, rgba(255,174,218,1) 0%, rgba(242,139,191,1) 100%);
	transition: ease opacity 0.25s;
	z-index: 200;
}

.m-light {
	border-radius: 1000px;
	opacity: 1;
	background: rgb(99,176,219);
	background: linear-gradient(90deg, rgba(99,176,219,1) 0%, rgba(124,201,247,1) 100%);pointer-events: none;
	transition: ease opacity 0.25s;
	z-index: 160;
}

.f-dark {
	border-radius: 1000px;
	background: rgb(253,52,199);
	background: linear-gradient(90deg, rgba(253,52,199,1) 0%, rgba(250,33,153,1) 100%);
	z-index: 180;
}

.m-dark {
	border-radius: 1000px;
	background: #6ecdf9;
	background: linear-gradient(90deg, rgba(64,178,245,1) 0%, rgba(44,131,234,1) 100%);
	z-index: 140;
}


.highlight {
	position: absolute;
	display: block;
	width: 115px;
	height: 50px;
	background-color: #bfe7ff;
	top: 0;
	z-index: 100;
	border-radius: 1000px;
	transition: ease-in all 0.35s;
	transition: ease-in opacity 0.35s, ease-in height 0.35s, ease-in width 0.35s, ease-in margin-top 0.35s, ease-in margin-left 0.35s, ease-in background-color 0.1s;
	opacity: 1;
}

.highlight-active {
	width: 180px;
	height: 80px;
	margin-top: -15px;
	margin-left: -32.5px;
	opacity: 0;
}

.dial {
	position: absolute;
	display: block;
	width: 38px;
	height: 38px;
	margin-top: 6px;
	margin-left: 8px;
	background-color: white;
	border-radius: 1000px;
	pointer-events: none;
	transition: ease margin-left 0.25s;
}

.boys, .girls {
	display: block;
	position: absolute;
	font-family: sans-serif;
	font-size: 20px;
	color: white;
	pointer-events: none;
	margin-top: 12px;
	user-select: none;
	transition: ease-in opacity 0.25s;
	font-family: Urania, sans-serif;
}

.boys {
	margin-left: 28px;
	opacity: 0;
}

.girls {
	margin-left: 70px;
	opacity: 1;
}


/* Body content divs */

.wrapper {
	display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
}


/*
.container {
	max-height: 100vh;
	flex-basis: 100%;
	-ms-flex-basis: 100%;
	-moz-flex-basis: 100%;
	-webkit-flex-basis: 100%;
	overflow-y: scroll;
	-ms-overflow-scrolling: touch;
	-moz-overflow-scrolling: touch;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: y mandatory;
	-ms-scroll-snap-type: y mandatory; 
	-moz-scroll-snap-type: y mandatory;
	-webkit-scroll-snap-type: y mandatory;
}*/


.container {
	max-height: 100vh;
	flex-basis: 100%;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	scroll-snap-type-y: mandatory;
	scroll-snap-destination: 0px 500px;
}


.sec {
	background-color: orange;
	border-bottom: 1px solid white;
	height: 100vh;
	background-size: 100% 100%;
	background-color: white;
	display: flex;
	flex-flow: column;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
}


/*
.sec {
	background-color: orange;
	border-bottom: 1px solid white;
	height: 100vh;
	background-size: 100% 100%;
	background-color: white;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-flow: column;
	-ms-flex-flow: column;
	-moz-flex-flow: column;
	-webkit-flex-flow: column;
	scroll-snap-align: start;
	scroll-snap-points-x: start;
	scroll-snap-stop: always;
	-webkit-scroll-snap-align: start;
	-webkit-scroll-snap-points-x: start;
	-webkit-scroll-snap-stop: always;
	overflow: hidden;
}*/



/* Body Content styles */

.content {
	position: relative;
	display: block;
	width: 88%;
	max-width: 1300px;
	height: inherit;
	margin-left: 6%;
	text-align: center;
	opacity: 1;
}

.con2, .con3, .con4 {
	opacity: 0;
	transition: ease opacity 1.25s, ease bottom 1s;
	bottom: -80px;
}

.middle-column {
	display: block;
	width: 50%;
	height: inherit;
	margin-left: 25%;
	transition: opacity 0.7s cubic-bezier(0.39, 0.575, 0.565, 1), margin-top 0.7s cubic-bezier(0.39, 0.575, 0.565, 1), transform 0.7s cubic-bezier(0.39, 0.575, 0.565, 1);
	margin-top: 30px;
	transform: scale(0.95);
}

.mc1 {
	opacity: 0;
}

.middle-column p {
	display: inline-block;
	font-family: Plex, monospace;
	font-size: 14px;
	width: 95%;
	padding-left: 7.5%;
	text-align: left;
	line-height: 22px;
	color: #7C6C71;
	max-width: 575px;
	margin-top: -5px;
}

/*
.mc1 p {
	width: 90%;
}
*/

.intro-illustration {
	width: 90%;
	display: inline-block;
	height: auto;
	margin-top: 140px;
	margin-bottom: 30px;
}

.start-stop, .chart-middle {
	display: block;
	float: left;
	height: inherit;
}

.start-stop {
	width: 7.5%;
}

.date-inner {
	height: 20%;
	width: 90px;
	float: left;
	margin-top: 375px;
	text-align: left;
}

.date1, .date2 {
	display: block;
	font-family: Plex, monospace;
	font-size: 20px;
	text-decoration: underline;
	margin-top: 45px;
	color: #453B3E;
}

.date1 {
	transform: rotate(-90deg);
	cursor: pointer;
}

.date2 {
	transform: rotate(90deg);
	margin-top: 45px;
	cursor: pointer;
}

.date1:hover {
	opacity: 0.5;
}

.date2:hover {
	opacity: 0.5;
}

.start-stop:first-of-type .date-inner {
	float: right;
	text-align: right;
}

.names-list, .can {
	display: block;
	float: left;
	height: inherit;
}

.names-list {
	width: 10%;
	background-color: white;
	display: block;
	font-size: 20px;
	font-family: vag-rundschrift-d, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #FFA7D5;
}

.nl1 {
	text-align: right;
	padding-right: 4px;
}

.nl1 .nme {
	opacity: 0;
	transition: ease margin-right 0.25s, ease opacity 0.25s;
}

.nl2 .nme {
	opacity: 0;
	transition: ease padding-left 0.25s, ease opacity 0.25s;
}


/* nl1 children */

.nl1 .nme:nth-child(1){
	margin-right: 20px;
}

.nl1 .nme:nth-child(2){
	margin-right: 25px;
}

.nl1 .nme:nth-child(3){
	margin-right: 30px;
}

.nl1 .nme:nth-child(4){
	margin-right: 35px;
}

.nl1 .nme:nth-child(5){
	margin-right: 40px;
}

.nl1 .nme:nth-child(6){
	margin-right: 45px;
}

.nl1 .nme:nth-child(7){
	margin-right: 50px;
}

.nl1 .nme:nth-child(8){
	margin-right: 55px;
}

.nl1 .nme:nth-child(9){
	margin-right: 60px;
}

.nl1 .nme:nth-child(10){
	margin-right: 65px;
}

/* nl2 children */

.nl2 .nme:nth-child(1){
	padding-left: 20px;
}

.nl2 .nme:nth-child(2){
	padding-left: 25px;
}

.nl2 .nme:nth-child(3){
	padding-left: 30px;
}

.nl2 .nme:nth-child(4){
	padding-left: 35px;
}

.nl2 .nme:nth-child(5){
	padding-left: 40px;
}

.nl2 .nme:nth-child(6){
	padding-left: 45px;
}

.nl2 .nme:nth-child(7){
	padding-left: 50px;
}

.nl2 .nme:nth-child(8){
	padding-left: 55px;
}

.nl2 .nme:nth-child(9){
	padding-left: 60px;
}

.nl2 .nme:nth-child(10){
	padding-left: 65px;
}

.stagger-1 {
	opacity: 1 !important;
	margin-right: 0px !important;
}

.stagger-2 {
	opacity: 1 !important;
	padding-left: 0px !important;
}

.nl2 {
	text-align: left;
	padding-left: 4px;
}

.nme {
	height: 20px;
	margin-bottom: 26.5px;
	cursor: pointer;
	transition: ease font-size 0.25s, ease line-height 0.25s;
}

.nme:hover {
	font-size: 24px;
	line-height: 18px;
}

.bigText {
	font-size: 24px;
	line-height: 18px;
}

.can {
	width: 80%;
	background-color: white;
	position: relative;
}

.overlay {
	position: absolute;
	display: block;
	width: 100%;
	height: inherit;
	background-image: url(../images/g.svg);
	background-position: center;
	background-size: 120% 120%;
	pointer-events: none;
	mix-blend-mode: color-dodge;
	mix-blend-mode: overlay;
	opacity: 0.6;
	top: 0;
	z-index: 500;
}


.chart-middle {
	width: 85%;
}

.mm1, .m2 {
	display: block;
	width: 100%;
}

.m1 {
	margin-top: 220px;
	height: 440px;
}

.m2 {
	height: 36px;
}

.m2 span {
	font-family: Plex, monospace;
	font-size: 18px;
	margin: 30px;
	color: #bc95b2;
}

.graph {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.sliding {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: white;
	z-index: 800;
	right: 0;
	pointer-events: none;
	transition: ease width 0.75s;
}


.pointer-svg {
	position: absolute;
	display: block;
	width: 100%;
	height: inherit;
	z-index: 800;
	opacity: 1;
	pointer-events: none;
}

.pointer-svg svg {
	width: 100%;
	height: 100%;
}

#marker {
	opacity: 0;
	transition: ease opacity 0.25s;
}


/* Tooltip styles */

#tooltip {
	position: absolute;
	pointer-events: none;
	display: block;
	width: 270px;
	height: 120px;
	background-image: url(../images/tooltip.svg);
	background-size: 100% 100%;
	background-position: left;
	opacity: 0;
	transition: ease opacity 0.25s;
	z-index: 300;
}



.noselect, #tooltip, .nme, .m2, #date1, #date2 {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.stats {
	display: block;
	float: left;
	width: 48%;
	height: 60%;
	margin: 0;
	margin-top: 10px;
	opacity: 1;
	margin-right: 2px;
	text-align: left;
}

.tool-name, .tool-date, .tool-births, .tool-rank {
	display: block;
	width: 100%;
}

.tool-name, .tool-date {
	float: right;
	width: 80%;
}

.tool-name {
	font-family: Plex, monospace;
	font-size: 14px;
	margin-top: 8px;
	font-weight: 500;
	text-indent: 4px;
}

.tool-date {
	font-family: Urania-Medium, sans-serif;
	font-size: 40px;
	margin-top: -9px;
}

.tool-births {
	margin-top: 25px;
}

.tool-births, .tool-rank {
	font-family: Plex, monospace;
	font-size: 13px;
	width: 94%;
	float: left;
}



/* Circle Styles */

.top, .bottom {
	display: inline-block;
	height: 50%;
	margin: 0;
}

.top {
	margin-top: 70px;
}

.bottom {
	margin-top: -3px;
}

.bottom .bubble {
	top: 0;
}

/* Column style for bubble containers */

.column {
	display: inline-block;
	position: relative;
	height: 100%;
	float: left;
}

/* .b styles for bubble containers */

.b {
	display: block;
	height: 100%;
	width: 90px;
	transition: ease width 0.25s, ease height 0.25s, ease margin-left 0.25s, ease margin-top 0.25s;
}

/* Bubble style for individual bubble objects */

.bubble {
	position: absolute;
	width: 90px;
	height: 90px;
	border-radius: 1000px;
	bottom: 0;
	cursor: pointer;
	margin: -5px;
}

.bubble:nth-of-type(odd){
	animation-duration: 3s;
	animation-iteration-count: 10;
}

/* .cp styles, modified by mouse cursor */

.cp, .contents {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 1000px;
	transform: translateZ(0);
}

.cp {
	position: absolute;
	transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), margin-left 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), margin-top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), ease opacity 0.3s;
	pointer-events: auto;
	cursor: pointer;
	background-color: white;
}

.contents {
	position: absolute;
	font-family: vag-rundschrift-d, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: white;
	text-align: center;
	transition: width 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), height 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), ease-out margin-left 0.25s, ease-out margin-top 0.25s, ease background-color 0.3s, ease opacity 0.3s, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	pointer-events: none;
	background: rgb(124,201,247);
	background: radial-gradient(circle, rgba(250, 162, 210,1) 25%, rgba(228,112,175,1) 100%);
	transform: scale(0);
}

.fullSize {
	transform: scale(1);
}

.big-contents {
	transform: scale(1.5);
}

.darker {
	filter: saturate(2) brightness(0.75) contrast(2) hue-rotate(10deg);
}

.small {
	transform: scale(0.6);
}

.n, .r {
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

.n {
	pointer-events: none;
	margin-top: 40%;
	transition: margin-top 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), font-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.r {
	box-shadow: 0 0 0 #000;
	transform: translate3d(0,0,0) translateY(20%);
	font-size: 30px;
	opacity: 0;
	font-family: Urania, sans-serif;
	transition: ease-out opacity 0.5s, ease transform 0.35s /*ease font-size 0.3s  transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)*/;
}


/* Styles for bubble sizes by rank */

.p-rank01 {
	width: 260px;
}
.rank01 {
	width: 260px;
	height: 260px;
}
.rank01 .contents {
}

.p-rank01 .n {
	font-size: 46px;
}

.p-rank02 {
	width: 231px;
}
.rank02 {
	width: 231px;
	height: 231px;
}
.rank02 .contents {
	opacity: 0.92;
}

.p-rank02 .n {
	font-size: 41px;
}

.p-rank03 {
	width: 205px;
}
.rank03 {
	width: 205px;
	height: 205px;
}
.rank03 .contents {
	opacity: 0.84;
}

.p-rank03 .n {
	font-size: 36px;
}

.p-rank04 {
	width: 182px;
}
.rank04 {
	width: 182px;
	height: 182px;
}
.rank04 .contents {
	opacity: 0.76;
}

.p-rank04 .n {
	font-size: 32px;
}

.p-rank05 {
	width: 162px;
}
.rank05 {
	width: 162px;
	height: 162px;
}
.rank05 .contents {
	opacity: 0.68;
}

.p-rank05 .n {
	font-size: 29px;
}

.p-rank06 {
	width: 144px;
}
.rank06 {
	width: 144px;
	height: 144px;
}
.rank06 .contents {
	opacity: 0.60;
}

.p-rank06 .n {
	font-size: 26px;
}

.p-rank07 {
	width: 128px;
}
.rank07 {
	width: 128px;
	height: 128px;
}
.rank07 .contents {
	opacity: 0.52;
}

.p-rank07 .n {
	font-size: 23px;
}

.p-rank08 {
	width: 114px;
}
.rank08 {
	width: 114px;
	height: 114px;
}
.rank08 .contents {
	opacity: 0.44;
}

.p-rank08 .n {
	font-size: 20px;
}

.p-rank09 {
	width: 101px;
}
.rank09 {
	width: 101px;
	height: 101px;
}
.rank09 .contents {
	opacity: 0.36;
}

.p-rank09 .n {
	font-size: 18px;
}

.p-rank10 {
	width: 90px;
}
.rank10 {
	width: 90px;
	height: 90px;
}
.rank10 .contents {
	opacity: 0.28;
}

.p-rank10 .n {
	font-size: 16px;
}


.full-opacity {
	opacity: 1 !important;
}



/* Slider styles */

.slider {
	display: block;
	position: absolute;
	width: 40px;
	height: 400px;
	margin-top: 220px;
	z-index: 160;
	cursor: pointer;
}

.slider-container {
  position: absolute;
  height: 40px;
  width: 400px; /* Width of the outside container */
  transform: rotate(90deg);
  margin-left: -180px;
  margin-top: 200px;
  border-radius: 1000px;
  cursor: pointer;
}

/* The slider itself */
.slide {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 40px; /* Specified height */
  background: white; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: ease background-color .25s; 
  border-radius: 1000px;
  border-style: solid;
  border-width: 1px;
  border-color: #7C6C71;
  cursor: pointer;
}

/* Mouse-over effects */
.slide:hover {
  opacity: 1; /* Fully shown on mouse-over */
  background-color: #e8eaed;
}

/* slider handle */ 
.slide::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 60px; /* Set a specific slider handle width */
  height: 60px; /* Slider handle height */
  background-color: white;
  border-style: solid;
  border-color: #7C6C71;
  border-width: 1px;
  border-radius: 1000px;
  cursor: pointer; /* Cursor on hover */
  transition: ease all 0.15s;
  transform: scale(1.5);
}


.slide::-webkit-slider-thumb:active {
	width: 75px;
	height: 75px;
	border-width: 2px;
}


.slide::-moz-range-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 60px; /* Set a specific slider handle width */
  height: 60px; /* Slider handle height */
  background-color: white;
  border-style: solid;
  border-color: #7C6C71;
  border-width: 1px;
  border-radius: 1000px;
  cursor: pointer; /* Cursor on hover */
  transition: ease all 0.15s;
  transform: scale(1.5);
}

.yr, .yr-inner, .yr-pulse, .yp-cover, .y-p, .big-year {
	position: absolute;
	display: block;
}

.yr {
	width: 90px;
	height: 30px;
	z-index: 180;
	margin-left: -27px;
	pointer-events: none;
	opacity: 0.6;
	margin-top: 35px;
}

.yr-inner {
	width: inherit;
	height: inherit;
	font-family: Plex, monospace;
	font-size: 20px;
	text-align: center;
	transition: ease transform 0.15s;
	pointer-events: none;
	z-index: 100;
}

.yr-pulse {
	width: 88px; 
	height: 88px;
	margin-left: 1px;
	background-color: white;
	border-radius: 1000px;
	margin-top: -26px;
	z-index: 80;
}

.yp-cover {
	width: 100%;
	height: 100%;
	background-color: white;
	border-radius: 1000px;
	z-index: 120;
}

.y-p {
	width: 100%;
	height: 100%;
	background-color: #555555;
	border-radius: 1000px;
	animation-duration: 1.5s;
	animation-name: yPulse;
	animation-iteration-count: infinite;
	z-index: 110;
	opacity: 1;
}

@keyframes yPulse{
	from {
		opacity: 1;
		width: 100%;
		height: 100%;
	}
	to {
		opacity: 0;
		width: 150%;
		height: 150%;
		margin-top: -25%;
		margin-left: -25%;
	}
}


.yr-active {
	font-weight: 600;
	transform: scale(1.5);
}

/* Year text popup overlay  */

.big-year {
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 700;
	opacity: 1;
	text-align: center;
	font-size: 280px;
	line-height: 875px;
	font-family: vag-rundschrift-d, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #eef3f4;
	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #453b3e;
    transform: scale(0.8);
    transition: ease opacity 0.55s, transform 0.7s cubic-bezier(0.37,0.88,0.27,1.48);
}


#b-y {
	transition: ease opacity 0.55s;
	opacity: 0;
}


/* Form Section */

.form-container, .searching-illustration, .gender-form, .check, .search-form, .f, .label, .t-in, #name-input, .break  {
	display: block;
}

.form-container {
	position: relative;
	width: 50%;
	margin-left: 25%;
	height: inherit;
}

.searching-illustration {
	width: 100%;
	height: 450px;
	text-align: center;
}

.gender-form {
	position: static;
	width: 100%;
	height: 50px;
	text-align: center;
	z-index: 50;
	margin-top: 100px;
	pointer-events: auto;
}

.gender-form p {
	position: absolute;
	display: inline-block;
	font-family: Plex, monospace;
	font-size: 14px;
	margin-left: 10px;
	color: #7C6C71;
	margin-top: 4px;
	z-index: 0;
}

.gender-check {
	display: inline-block;
	width: 25px;
	height: 25px;
	border-style: solid;
	border-width: 1px;
	border-color: #86797e;
	background-color: white;
	cursor: pointer;
	margin-left: -35%;
	z-index: 0;
}

.check {
	position: absolute;
	width: 23px;
	height: 23px;
	background-image: url(../images/check.svg);
	background-size: 100% 100%;
	opacity: 0;
	transition: ease opacity 0.25s;
	pointer-events: none;
}

.gender-check:hover {
	background-color: #e8eaed;
}

.search-form {
	position: absolute;
	width: 100%;
	height: 120px;
	margin-top: -20px;
	z-index: 250;
	pointer-events: auto;
}

.f {
	display: block;
	width: 78%;
	height: 100px;
	margin-left: 11%;
	opacity: 1;
	z-index: 250;
}


.label {
	font-family: Plex, monospace;
	text-align: left;
	font-size: 15px;
	margin-left: 24px;
	margin-bottom: 4px;
	color: #7C6C71;
}

.t-in {
	position: relative;
	width: 100%;
	height: 60px;
	outline: none;
	border-radius: 1000px;
}

.load {
	display: block;
	position: absolute;
	width: 100%;
	height: 57px;
	border-radius: 1000px;
	z-index: 1000;
	/*background: rgb(255,174,218);
	background: linear-gradient(90deg, rgba(255,174,218,1) 0%, rgba(242,139,191,1) 100%);*/
	opacity: 0;
	display: none;
}

.f-load {
	background: rgb(255,174,218);
	background: linear-gradient(90deg, rgba(255,174,218,1) 0%, rgba(242,139,191,1) 100%);
}

.m-load {
	background: rgb(99,176,219);
	background: linear-gradient(90deg, rgba(99,176,219,1) 0%, rgba(124,201,247,1) 100%);
}

.n-load {
	background: #6ecdf9;
	background: linear-gradient(90deg, rgba(110,187,230,1) 0%, rgba(245,132,190,1) 100%);
}

.lo {
	display: block;
	width: 15%;
	height: 50%;
	margin-left: 42.5%;
	margin-top: 12px;
}

.lo div {
	position: relative;
	display: block;
	width: 33%;
	height: 100%;
	float: left;
}

.lo span {
	display: block;
	position: absolute;
	width: 70%;
	margin-left: 15%;
	height: 100%;
	background-color: white;
	border-radius: 2px;
	transform: scale(0.8);
	animation-iteration-count: infinite;
	animation-duration: 0.8s;
	animation-name: loading;
}


.an2 {
	animation-delay: 0.2s;
}

.an3 {
	animation-delay: 0.4s;
}


@keyframes loading {
	0% {
		transform: scale(0.8);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(0.8);
	}
}


.text-form, .sub{
	display: inline-block;
	width: 78%;
	margin: 0;
	padding: 0;
	border-style: solid;
	border-width: 1px;
	border-color: #7C6C71;
	background-color: white;
	background-color: #e8eaed;
}

.text-form {
	border-radius: 30px 0px 0px 30px;
	transition: ease height 0.25s;
	z-index: 210;
}

.curved-corner {
	border-radius: 28px 0px 28px 28px;
}

#name-input {
	width: 100%;
	height: 55px;
	border-style: none;
	border-radius: 30px 0px 0px 30px;
	font-size: 25px;
	text-indent: 22px;
	font-family: Urania-Medium, sans-serif;
	cursor: text;
	color: #453B3E;
	background: transparent;
	background-color: white;
	padding: 0;
	z-index: 210;
}

#name-input:focus {
	outline: none;
	background-color: #e8eaed;
}

#name-input:hover {
	background-color: #e8eaed;
}

.break {
	width: 90%;
	margin-left: 5%;
	height: 1px;
	background-color: #7C6C71;
	opacity: 0;
}

.break {
	opacity: 1;
}

.sub {
	position: relative;
	width: 22%;
	height: 57px;
	float: right;
	border-radius: 0px 30px 30px 0px;
	font-family: sans-serif;
	font-size: 14px;
	margin-left: -2px;
	color: white;
	z-index: 180;
	cursor: pointer;
}

.no-clicking {
	pointer-events: none;
}

.sub span {
	position: absolute;
	z-index: 200;
	pointer-events: none;
	left: 0;
	top: 0;
	margin-top: 18px;
	margin-left: 18%;
	font-family: Urania, sans-serif;
	letter-spacing: 0.35px;
}

.sub:hover .sub-gradient {
	opacity: 0.25;
}


#filled {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(210, 210, 210, 1);
	border-radius: 0px 30px 30px 0px;
	line-height: 55px;
	top: 0;
	z-index: 100;
	pointer-events: none;
	transition: ease opacity 0.25s;
}

#filled:hover {
	background-color: rgba(210, 210, 210, 0);
}


.sub-gradient {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background: #6ecdf9;
	background: linear-gradient(90deg,  #6ecdf9 0%,#57abf2 100%);
	border-radius: 0px 30px 30px 0px;
	top: 0;
	z-index: 90;
	pointer-events: none;
	transition: ease opacity 0.25s;
}



.splash {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0px 30px 30px 0px;
	top: 0;
	margin-top: 0%;
	margin-left: -12%;
	z-index: 50;
	pointer-events: none;
	opacity: 1;
	transition: ease-in opacity 0.35s, ease-in height 0.35s, ease-in width 0.35s, ease-in margin-top 0.35s, ease-in margin-left 0.35s, ease-in background-color 0.1s;
	background: none;
}

.splash-effect {
	width: 150%;
	height: 175%;
	margin-top: -22px;
	border-radius: 20px 50px 50px 20px;
	opacity: 0;
	transition: ease-in opacity 0.35s, ease-in height 0.35s, ease-in width 0.35s, ease-in margin-top 0.35s, ease-in margin-left 0.35s, ease-in background-color 0.1s;
}


#text-form:focus {
	outline: none;
}

.sub:focus {
	outline: none;
}

.options {
	position: absolute;
	display: block;
	width: 200px;
	height: 300px;
	display: none;
}

ul {
  padding-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: left;
  cursor: pointer;
}


li {
  width: 100%;
  height: 40px;
  display: block;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
  font-family: sans-serif;
  line-height: 36px;
  font-size: 25px;
  color: #7C6C71;
  font-family: Urania-Medium, sans-serif;
  text-indent: 22px;
  cursor: pointer;
}

li:hover {
	color: #453B3E;
}

li:first-child {
	margin-top: 10px;
}

li:last-child {
	margin-bottom: 10px;
}


.slide-in {
	opacity: 1;
	bottom: 0px;
}


.sec {
	margin-bottom: 35vh;
}

.sec4 {
	margin-bottom: 0vh;
}

.asterix {
	position: relative;
	display: block;
	margin-top: -120px;
	font-family: Plex, monospace;
	margin-left: 8%;
	color: #7C6C71;
	opacity: 0.5;
	width: 250px;
	cursor: pointer;
	z-index: 1000;
	height: 50px;
}

.asterix:hover {
	opacity: 1;
}

.asterix p {
	position: absolute;
	display: block;
	pointer-events: none;
	font-size: 14px;
	z-index: 320;
}

.ast {
	position: absolute;
	display: block;
	width: 100px;
	height: 100px;
	background-image: url(../images/asterix.svg);
	background-size: 100% 100%;
	top: 0;
	margin-left: -45px;
	margin-top: -10px;
	opacity: 0.3;
	z-index: 300;
	pointer-events: none;
}




/* Graph path styles */

.path1, .path-generated {
	stroke-linecap: round;
	stroke-linejoin: round;
	cursor: pointer;
	transition: ease stroke-width 0.2s, ease stroke 0.2s;
}




/* SUBMITTED FORM STYLES */


.searching-illustration {
	height: 150px;
	height: 450px;
}

.form-container {
	width: 50%;
	margin-left: 25%;
}

.f, .search-field, .submitted, .results, .results-contents, .results-head {
	display: block;
}

.f {
	display: block;
}

.search-field {
	width: 60%;
	margin-left: 20%;
	height: 45px;
	border-style: solid;
	border-width: 2px;
	border-color: grey;
	border-radius: 1000px;
	margin-top: -320px;
	cursor: pointer;
	display: none;
}


/* Submitted form grows upward */
.submitted {
	position: absolute;
	width: 100%;
	height: 80px;
	bottom: 0;
	transition: ease height 0.5s, ease margin-bottom 0.5s;
	height: 0px;
	pointer-events: none;
}

.con4 {
	pointer-events: none;
}

.hidden {
	margin-bottom: -100px;
	pointer-events: none;
}

.results {
	position: relative;
	width: 85%;
	min-width: 820px;
	height: 100%;
	margin-left: 7.5%;
	background-size: 104% 110%;
	background-position: center;
	border-style: solid;
	border-color: #653652;
	border-width: 2px 0px 0px 0px;
	border-width: 1px 1px 0px 1px;
	background-color: #ebf2f4;
	pointer-events: auto;
	cursor: pointer;
	z-index: 300;
}

.results-contents {
	width: 88%;
	margin-left: 6%;
	height: inherit;
	opacity: 0;
	transition: ease opacity 0.25s;
}

.n-tab {
	display: block;
	position: absolute;
	width: 100%;
	height: 50px;
	top: 0;
	text-align: center;
	font-family: vag-rundschrift-d, sans-serif;
	font-size: 36px;
	margin-top: 5px;
	background: -webkit-linear-gradient(#98d8fc, #74bde6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
    opacity: 0;
}

.results-head {
	font-family: vag-rundschrift-d, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 120px;
	margin-top: 25px;
	text-align: left;
	margin-bottom: 0px;
	padding-left: 8%;
	background: -webkit-linear-gradient(#98d8fc, #74bde6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.results-head-small {
	font-size: 65px;
	margin-top: 60px;
}


.results-subhead {
	display: block;
	font-family: Urania-Medium, sans-serif;
	font-size: 25px;
	text-align: left;
	margin-top: -10px;
	padding-left: 8%;
	color: #895679;
	text-indent: 2px;
}

.results-subhead-small {
	margin-top: 0px;
}

.results-top, .results-bottom {
	display: block;
	width: 100%;
	float: left;
}

.results-top {
	height: 240px;
	margin-top: 25px;
}

.rt-l, .rt-r {
	display: block;
	height: inherit;
	float: left;
	text-align: left;
}

.rt-l {
	width: 60%;
}

.rt-r {
	width: 40%;
}

.rt-r p {
	text-align: left;
}

.results-bottom {
	height: 260px;
	margin-top: 36px;
}


.stat1, .stat2, .stat3 {
	display: block;
	width: 100%;
	height: 40px;
	float: left;
	text-align: right;
	font-family: Urania-Medium, sans-serif;
	margin-bottom: 12px;
	/*
	font-family: vag-rundschrift-d, sans-serif;
	font-weight: 300;
	font-style: normal;
	*/
}

.stat1 {
	margin-top: 65px;
}

.stat1 span {
	display: block;
	float: left;
	width: 47.5%;
	font-size: 36px;
}

.stat2 span {
	display: block;
	float: left;
	width: 47.5%;
	font-size: 36px;
}

.stat3 span {
	display: block;
	float: left;
	width: 47.5%;
	font-size: 36px;
}

.rt-r p {
	display: block;
	float: right;
	color: #BC95B2;
	font-family: Plex, monospace;
	margin-top: 18px;
}

.stat1 p {
	width: 50%;
	margin-bottom: 0px;
	font-size: 15px;
}

.stat2 p {
	width: 50%;
	margin-bottom: 0px;
	font-size: 15px;
}


.stat3 p {
	width: 50%;
	margin-bottom: 0px;
	font-size: 15px;
}


.rt-r span {
	/*font-size: 27px;
	margin-bottom: 0px;*/
	color: #7CC9F7;
}

/*
.rt-r p {
	display: block;
	font-size: 15px;
	font-family: Plex, monospace;
	margin-top: -4px;
	color: #BC95B2;
	margin: 0;
}*/

.settings {
	display: block;
	width: 100%;
	height: 30px;
	margin-top: 50px;
}

.settings-left, .settings-right {
	display: block;
	float: left;
	height: inherit;
}

.settings-left {
	width: 20%;
	margin-top: -4px;
}

.settings-left span {
	display: block;
	float: left;
	font-family: Plex, monospace;
	font-size: 20px;
	font-weight: 600;
}

.settings-right {
	width: 30%;
	margin-top: -5px;
}

.chart-sec {
	display: block;
	width: 100%;
	height: 200px;
}

.chart-left, .chart-right {
	display: block;
	float: left;
	height: inherit;
}

.chart-left {
	width: 10%;
}

.chart-right {
	position: relative;
	width: 86%;
}

.ch {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-color: grey;
	opacity: 1;
	z-index: 200;
}

.track-bars {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}

.trk {
	position: relative;
	display: block;
	float: left;
	height: inherit;
	width: 1.23456%;
	width: 1.215%;
	background-color: rgba(201, 201, 201, 0.5);
	background-position: left;
	opacity: 0;
	background-repeat: no-repeat;
}


.trk:hover {
	opacity: 1;
}


.mark-node {
	position: absolute;
	display: block;
	width: 200px;
	height: 110px;
	background-image: url(../images/tooltip-2.svg);
	background-size: 100% 100%;
	pointer-events: none;
	opacity: 1;
}

.mark-node-year {
	position: absolute;
	width: 100%;
	height: 30%;
	margin-top: 12px;
	font-family: Urania, sans-serif;
	text-align: center;
	font-size: 36px;
}

.mark-node-rank {
	position: absolute;
	width: 100%;
	height: 30%;
	margin-top: 52px;
	font-family: Plex, monospace;
	text-align: center;
	font-size: 14px;
}

.bar {
	position: absolute;
	display: block;
	width: 100%;
	height: 79%;
	background-color: #f0f0f0;
	z-index: 400;
	margin-top: 1.8%;
	opacity: 0;
	pointer-events: none;
	transition: ease opacity 0.10s;
}

#bar-hover {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: yellow;
	z-index: 400;
	opacity: 0.7;
}


.bar-pointer {
	display: block;
	position: absolute;
	width: 180px;
	height: 90px;
	z-index: 500;
	pointer-events: none;
	background-image: url(../images/birth-point.svg);
	background-size: 100% 100%;
	opacity: 0;
}


.bp-text {
	text-align: center;
	width: 100%;
	font-size: 36px;
	font-family: "Urania", sans-serif;
}

.bp-stat {
	width: 100%;
	font-family: Plex, monospace;
	font-size: 14px;
	text-align: center;
}


.bar-in {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleY(0.5) translateY(75px);
	transition: ease transform 0.35s;
	z-index: 300;
}


.bars {
	position: relative;
	display: block;
	width: 1.20%;
	background-color: #f0f0f0;
	float: left;
	height: 100%;
	margin-left: 0px;
	z-index: 150;
}

.bar-stat {
	position: absolute;
	display: block;
	width: 100%;
	bottom: 0;
}

.bar-stat:hover {

}

.y {
	position: relative;
	display: block;
	width: 140%;
	height: 30px;
	margin-left: -20%;
	z-index: 300;
	margin-top: -15px;
}

.y span {
	display: inline-block;
	font-family: Plex, monospace;
	margin: 2.75%;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #BC95B2;
}

.share {
	display: block;
	width: 100%;
	height: 30px;
	margin-top: 30px;
}

.share1, .share2 {
	display: inline-block;
	height: 30px;
	width: 30px;
	border-radius: 1000px;
	cursor: pointer;
}

.share1 {
	margin-right: 10px;
}

.ranks {
	display: block;
	height: 82%;
	width: 65%;
	float: left;
	margin-top: 10px;
	padding-right: 10%;
}

.highrank, .lowrank {
	display: block;
	width: 100%;
	height: 15%;
	text-align: right;
	font-size: 18px;
	font-family: Plex, monospace;
}

.rank-line {
	display: block;
	width: 100%;
	height: 72%;
	border-style: dashed;
	border-color: black;
	border-width: 0px 1px 0px 0px;
}


.down-up {
	position: absolute;
	display: inline-block;
	width: 100px;
	height: 30px;
	background-color: red;
	cursor: pointer;
	z-index: 600;
	margin-top: 5px;
}

.down-up:hover {
	background-color: darkred;
}


.gradients {
	position: fixed;
	display: inline-block;
	width: 100%;
	height: 100%;
	background: rgb(99,176,219);
	background: linear-gradient(90deg, rgba(99,176,219,1) 0%, rgba(124,201,247,1) 100%);
	pointer-events: none;
	opacity: 0;
	transition: ease opacity 0.25s;
}

.si-vid {
	position: absolute;
	display: block;
	width: 450px;
	height: 70%;
	margin-left: 12%;
	margin-top: 20px;
	opacity: 1;
	pointer-events: none;
	mix-blend-mode: multiply;
}

.vid-gone {
	transform: scale(0.65);
}

.si-vid video {
	transition: transform ease-out 0.45s;
}

#loading-vid {
	position: absolute;
	z-index: 400;
	left: 0;
}

.si-image {
	position: absolute;
	top: 0;
	width: 400px;
	z-index: 200;
	left: 0;
	margin-top: 100px;
	margin-left: 20px;
}

#results-con {
	background-color: #f0f0f0;
}

.close-name {
	position: absolute;
	display: block;
	width: 50%;
	margin-left: 25%;
	height: 40px;
	margin-top: 120px;
	border: solid 2px white;
	border-radius: 1000px;
	cursor: pointer;
	pointer-events: auto;
	display: none;
	background-image: url(../images/glass.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 55% 55%;
}

.close-name:hover {
	opacity: 0.6;
}



.loading-animation {
	display: block;
	position: absolute;
	z-index: 4000;
	width: 100vw;
	height: 100vh;
	background-color: white;
	opacity: 1;
	transition: ease-in opacity 0.35s;
}

.loading-center {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.loading-center span {
	position: absolute;
	font-family: Plex, monospace;
	color: #453B3E;
	font-size: 16px;
}

.load-svg {
	display: block;
	position: absolute;
	width: 200px;
	height: 200px;
	background-image: url(../images/load.svg);
	background-size: 100% 100;
	mix-blend-mode: overlay;
}

#load-chart {
	display: flex;
	width: 200px !important;
	height: 200px !important;
}


.scroll-down {
	position: absolute;
	display: flex;
	width: 100%;
	height: 110px;
	bottom: 0;
	pointer-events: none;
	justify-content: center;
	align-content: center;
	align-items: center;

}

.mouse {
	display: block;
	width: 28px;
	height: 45px;
	background-color: white;
	border: solid 1px #7C6C71;
	border-radius: 1000px;
	opacity: 0;
	transition: ease-out opacity 0.35s;
}

.mouse-ball {
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 10px;
	margin-left: 10px;
	margin-top: 8px;
	background-color: #8f7e83;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-name: ball;
	animation-timing-function: ease-out;
	transition: ease-out opacity;
	opacity: 1;
}

@keyframes ball {
	from {
		margin-top: 8px;
		opacity: 1;
	}
	to {
		margin-top: 25px;
		opacity: 0.4;
	}
}


.show-bars, .show-graph {
	border-style: none;
	background-color: transparent;
	outline: none;
	cursor: pointer;
	opacity: 0.70;
	transition: ease transform 0.35s;
}


.show-bars {
	display: block;
	height: 28px;
	width: 36px;
	background-image: url(../images/bar-icon.svg);
	background-size: 100% 100%;
	float: left;
	margin-left: 10px;
}

.show-bars:hover {
	opacity: 1;
}

.show-graph {
	display: block;
	height: 28px;
	width: 36px;
	background-image: url(../images/arrow-icon.svg);
	background-size: 100% 100%;
	float: left;
}

.show-graph:hover {
	opacity: 1;
}

.smaller-button {
	transform: scale(0.8);
	opacity: 0.35;
}


.about-data {
	position: fixed;
	display: block;
	width: 88vw;
	height: 92vh;
	margin-left: 6vw;
	margin-top: 4vh;
	background-color: #ebf2f4;
	z-index: 10000;
	border: solid 1px grey;
	display: none;
}

.about-data p, .about-data h2 {
	margin-left: 5vw;
	pointer-events: none;
}


.about-data h2 {
	margin-top: 10vh;
	font-family: Urania, sans-serif;
	font-size: 40px;
}

.about-data p {
	width: 50vw;
	font-family: Plex, monospace;
	font-size: 16px;
	line-height: 25px;
}

.about-data a {
	pointer-events: auto;
}

.x {
	display: block;
	position: absolute;
	right: 0;
	margin-right: 20px;
	margin-top: 20px;
	width: 60px;
	height: 60px;
	border: none;
	background-image: url(../images/x.svg);
	background-size: 100% 100%;
	background-color: #ebf2f4;
	cursor: pointer;
	opacity: 0.5;
}

.x:hover {
opacity: 1;
}



.no-space {
	position: absolute;
	display: block;
	width: 80%;
	height: 90px;
	background-color: #ebf2f4;
	background-color: #fb8da3;
	bottom: 0;
	margin-bottom: -100px;
	margin-left: 10%;
	font-family: Plex, monospace;
	font-size: 18px;
	color: #453b3e;
	opacity: 0;
	transition: ease-out opacity 0.5s, ease-out margin-bottom 0.5s;
	z-index: 2000;
}

.no-space-an {
	opacity: 1;
	margin-bottom: -65px;
}



.submit-it {
	/* Does nothing by default*/
}




















.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}