/*!
 * Peaches and Eggplants v1.0.0
 * Homepage: https://mahmouddesign.ca
 * Copyright 2018 
*/
html,body{height:100%;}
body {
	font: 300 16px/1.8 'Roboto', sans-serif;
	color: #666;
	overflow-x: hidden;
    background:#e9e9e9
}
body.extinguisher-transition {
    background: #fdb942
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: #E7746F;
}

a:hover {
	text-decoration: none;
	color: #999;
}

/* ---------------------------------------------- /*
 * Transition elsements
/* ---------------------------------------------- */


.navbar a,
.form-control {
	-webkit-transition: all 0.4s ease-in-out 0s;
	   -moz-transition: all 0.4s ease-in-out 0s;
		-ms-transition: all 0.4s ease-in-out 0s;
		 -o-transition: all 0.4s ease-in-out 0s;
			transition: all 0.4s ease-in-out 0s;
}

a,
.btn {
	-webkit-transition: all 0.125s ease-in-out 0s;
	   -moz-transition: all 0.125s ease-in-out 0s;
		-ms-transition: all 0.125s ease-in-out 0s;
		 -o-transition: all 0.125s ease-in-out 0s;
			transition: all 0.125s ease-in-out 0s;
}

/* ---------------------------------------------- /*
 * Reset box-shadow
/* ---------------------------------------------- */

.btn,
.form-control,
.form-control:hover,
.form-control:focus,
.navbar-custom .dropdown-menu {
	-webkit-box-shadow: none;
			box-shadow: none;
}

/* ---------------------------------------------- /*
 * Typography
/* ---------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font: 700 40px/1.2 'Roboto', sans-serif;
	text-transform: none;
	letter-spacing: 5px;
	margin: 5px 0 5px;
	color: #222;
}

h2 {
	font-size: 30px;
	margin: 0 0 30px;
}

h3 {
	font-size: 13px;
	letter-spacing: 1px;
	margin: 0 0 5px;
}

h4 {
	font-size: 12px;
	letter-spacing: 1px;
}

h5 {
	font-size: 12px;
	letter-spacing: 1px;
	font-weight: 400;
}

h6 {
	font-size: 11px;
	letter-spacing: 1px;
	font-weight: 400;
}

/* ---------------------------------------------- /*
 * Reset border-radius
/* ---------------------------------------------- */
.iconbox,
.progress,
#filter li,
.scroll-up a,
.form-control,
.input-group-addon {
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
		 -o-border-radius: 3px;
			border-radius: 3px;
}


/* ---------------------------------------------- /*
 * Input-group
/* ---------------------------------------------- */

.input-group .form-control {
	z-index: auto;
}

.input-group-addon {
	background: #D8E1E4;
	border: 2px solid #D8E1E4;
	padding: 6px 15px;
	font-weight: 700;
}

/* ---------------------------------------------- /*
 * Inputs styles
/* ---------------------------------------------- */

.form-control {
	background: #FFF;
	border: 1px solid #D8E1E4;
	font-size: 12px;
	padding: 0 15px;
}

.form-control:focus{
    border-color: rgba(135, 135, 135, 0.7);
}

.input-lg,
.form-horizontal .form-group-lg .form-control {
	height: 38px;
	font-size: 13px;
}

.input-sm,
.form-horizontal .form-group-sm .form-control {
	font-size: 11px;
	height: 30px;
}

textarea.form-control {
	padding: 15px;
    max-width: 100%;
    min-width: 100%;
}

/* ---------------------------------------------- /*
 * Custom button style
/* ---------------------------------------------- */

.btn {
	font-family: 'Gochi Hand', cursive;
	text-transform: none;
	letter-spacing: 1px;
	font-size: 13px;
	padding: 8px 26px;
	border: 0;
    border-radius: 0;
    -webkit-transition: box-shadow .3s;
    transition: box-shadow .3s;
}
button,
a,
a:hover,
a:focus,
a:active,
a.active,
.btn:hover,
.btn:focus,
.btn:active,
.btn.active {
	outline: none !important;
    text-decoration: none;
}

/* Button size */

.btn-lg,
.btn-group-lg > .btn {
	padding: 10px 25px;
	font-size: 35px;
    background: #c61212;
    color: #fff;
    margin: 15px 35px;
    -webkit-transition: box-shadow .3s;
    transition: box-shadow .3s;
    z-index: 999
}
.btn-lg:hover,
.btn-group-lg > .btn:hover{
    background: rgba(61, 56, 103,1);
    color: #fff;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.btn-lg.modal-modal-btn {
    background: #c61212;
}

.btn-sm,
.btn-group-sm > .btn {
	padding: 6px 25px;
	font-size: 11px;
}

.btn-xs,
.btn-group-xs > .btn {
	padding: 5px 25px;
	font-size: 10px;
}

.btn .icon-before {
	margin-right: 6px;
}

.btn .icon-after {
	margin-left: 6px;
}

/* ---------------------------------------------- /*
 * General Styles
/* ---------------------------------------------- */
.m-b-20 {
    margin-bottom: 20px;
}
.m-b-15 {
    margin-bottom: 15px;
}
.orange{
    color: #f38e2d
}

.red{
    color: #c61212
}

.pfblock {
	padding: 120px 0 100px;
}

.pfblock-no-hidden {
	padding: 120px 0 100px;
}

.pfblock-gray {
	background: #f5f5f5;
}

.pfblock-image {
	padding: 0;
}

.calltoaction h1,
.calltoaction h2,
.calltoaction h3,
.calltoaction h4,
.calltoaction h5,
.calltoaction h6,
.pfblock-image,
.pfblock-image h1,
.pfblock-image h2,
.pfblock-image h3,
.pfblock-image h4,
.pfblock-image h5,
.pfblock-image h6 {
	color: #fff;
}

.pfblock-header {
	text-align: center;
	margin: 0 0 60px;
}

.pfblock-header-left {
	text-align: left;
}

.pfblock-header-left .pfblock-line {
	width: inherit;
	margin: 30px 0;
}

.pfblock-title{
    font-weight: 800;
}

.pfblock-subtitle {
	font-family: 'Roboto', sans-serif, "Times New Roman", Times, sans-serif;
	font-style: normal;
	font-size: 18px;
}


.pfblock-line {
	background: rgba(135, 135, 135, 0.5);
	width: 100px;
	height: 1px;
	margin: 30px auto;
}

.pfblock-icon {
	font-size: 32px;
}
 

/* ---------------------------------------------- /*
 * Index intro page
/* ---------------------------------------------- */

#home.screen-height {
	background: url(../images/cover.jpg);
	background-color: #fdb942;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;
	padding: 0;
}
 

.intro {
	position: absolute;
	width: 100%;
	top: 45%;
	left: 0;
	text-align: center;
	-webkit-transform: translate(0%, -50%);
	   -moz-transform: translate(0%, -50%);
		-ms-transform: translate(0%, -50%);
		 -o-transform: translate(0%, -50%);
			transform: translate(0%, -50%);
	padding: 0 15px;
    z-index: 9999;
}

.intro h1{
    font-weight: 700;
    font-size: 76px;
    font-family: 'Henny Penny', cursive;
    text-shadow: 3px 3px 7px rgba(255, 83, 1, 0.77);
    line-height: 135%
    
}

.start {
	font-family: 'Gochi Hand', cursive;
	font-size: 26px;
	font-style: normal;
	text-transform: none;
	margin: 10px 0;
}
 
.start.subText {
    margin: 0px 0
}
/* ---------------------------------------------- /*
 * Home page  | sec-a Video
/* ---------------------------------------------- */
.sec-a.video.screen-height {
    background: #fff;
    overflow: hidden;
    height: 100%;
    left: 0;
}
 
 #videoWrapper {
     position:relative;
     padding-top:56.25%;

}
iframe#video_container  {
    position:absolute;top:0;left:0;width:100%;height:100%;background: #fff!important
}

/*
#video_container {
    background-image: url(../images/intro_background.jpg);
    background-image: url(../images/intro_background.svg), none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-repeat: no-repeat;
    background-position: 50% 50%!important;
    height: auto;
    position: absolute;
    width: 100%;
     max-width: 816px; 
    top: 0%;
    height: 100%;
}
*/
 
#video_container img {
    height: auto;
    position: absolute;
    width: 100%;
    max-width: 100%;
    top: 50%;
    left: 0;
    right: 0;
    opacity: 1;
    text-align: center;
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    /* padding: 15% 10% 15% 10%; */
    margin: 0 auto;
    cursor: pointer;
/*
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    animation:fadein 0.8s forwards;
    -moz-animation:fadein 0.8s forwards;  
    -webkit-animation:fadein 0.8s forwards;  
    -o-animation:fadein 0.8s forwards; 
*/
}

/*
#video_container:hover img {
    max-width: 102px; 
}
*/
/*

@keyframes fadein {
    0%   {opacity: 0;}
    90%  {opacity: 0;}
    100% {opacity: 1;}
}
@-moz-keyframes fadein {  
    0%   {opacity: 0;}
    90%  {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes fadein {  
    0%   {opacity: 0;}
    90%  {opacity: 0;}
    100% {opacity: 1;}
}
@-o-keyframes fadein {  
    0%   {opacity: 0;}
    90%  {opacity: 0;}
    100% {opacity: 1;}
}
*/
 
   
/* ---------------------------------------------- /*
 * Home page  | sec-a
/* ---------------------------------------------- */
.hero {
	position: relative; /* i changed the posation fromabsolute to relative */
	width: 100%;
	top: 50%;
	left: 0;
	text-align: center;
	-webkit-transform: translate(0%, -50%);
	   -moz-transform: translate(0%, -50%);
		-ms-transform: translate(0%, -50%);
		 -o-transform: translate(0%, -50%);
			transform: translate(0%, -50%);
	padding: 0 15px;
}


#home.sec-a {
    background: url(../images/cover-sec-a-xs.png);
	background-color: #fff;
	background-attachment:fixed;
	background-repeat: repeat;
/*
	background-position: 50% 50%!important;
	-webkit-background-size: contain;
	   -moz-background-size: contain;
		 -o-background-size: contain;
			background-size: contain;
*/
 
}
.sec-a .s-title h1{
    font-family: 'Henny Penny', cursive;
    font-style: normal;
    font-size: 60px;
    width: 100%;
    line-height: 80px;
    margin-top: 20%;
    margin-bottom: 0;
    color: #c61212;
    letter-spacing: normal;
    font-weight: 400;
}

.sec-a .s-title h2{
    font-family: 'Gochi Hand', cursive;
    font-style: normal;
    font-size: 25px;
    color: #486114;
    letter-spacing: normal;
    font-weight: 400;
    text-align: left;
    padding:50px 0 0 60px;
}

.sec-a img.bottom-r{
    position: absolute;
    right: 0;
    bottom: 0;
    animation:fadein 0.8s forwards;
    -moz-animation:fadein 0.8s forwards; /* Firefox */
    -webkit-animation:fadein 0.8s forwards; /* Safari and Chrome */
    -o-animation:fadein 0.8s forwards; /* Opera */
}

@keyframes fadein {
    0%   {opacity: 0;}
    90%  {opacity: 0;}
    100% {opacity: 1;}
}
@-moz-keyframes fadein { /* Firefox */
    0%   {opacity: 0;}
    90%  {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    0%   {opacity: 0;}
    90%  {opacity: 0;}
    100% {opacity: 1;}
}
@-o-keyframes fadein { /* Opera */
    0%   {opacity: 0;}
    90%  {opacity: 0;}
    100% {opacity: 1;}
}

/* ---------------------------------------------- /*
 * Home page  | sec-b
/* ---------------------------------------------- */
.sec-b{
    background:#59458a
}
.sec-b h2 {
    font-family: 'Henny Penny', cursive;
    font-style: normal;
    font-size: 55px;
    width: 100%;
    line-height: 10px;
    color: #fff;
    letter-spacing: normal;
    font-weight: 400;
    margin-bottom: 0;
}
#What-do img {
    cursor: pointer;
    margin-top: 0
}
/* technique to stop images from jumping with page load 
* height / width * 100
*/
.image-container {
  position: relative;
  padding-bottom: 75.2851711027%; /* ratio of image height to width */
  height: 0;
  overflow: hidden;
  background-color: #e9e9e9; /* light gray image placeholder */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.sec-b h2 img {margin-right: 10px}

.sec-b small {
    font-family: 'Gochi Hand', cursive;
    font-style: normal;
    font-size: 20px;
    width: 100%;
    line-height: 20px;
    float: right;
    text-align: right;
    color: #fff;
    letter-spacing: normal;
    font-weight: 400;
}
.row > div.col {
    margin: 15px auto;
}
.thumb { 
    position: relative;
    margin: 0 auto;
/*    max-width: 533px;*/
}

.hover-opaque {
    background: #59458a;
    opacity: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    transition: all ease .5s;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
}

.hover-opaque i {
    position: absolute;
    text-align: center;
    color: red;
    top: 50%;
    right: 50%;
    margin: -12px;
    border: 1px solid green;
  
}

.thumb .fa {
    position: absolute;
    color: #fff;
    top: 50%;
    right: 50%;
    font-size: 2em;
    margin: -15px;
    opacity: 0;
    transition: all ease .5s;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
}

.thumb:hover .hover-opaque {
    opacity: 0.5;
}

.thumb:hover .fa {
  opacity: 1;
}

.thumb-caption {
    background: #fff;
    border-color: #E6E6E6;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    color: #4E4E54;  
    padding: 0px;
}

.container.fr .thumb-caption {
    background: #fff;
    border-color: #E6E6E6;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    color: #4E4E54;  
    min-height: 82px;
    padding: 6% 0 0% 0;
}

figcaption a {
    font-family: 'Gochi Hand', cursive;
    color: #f38e2d;
    -moz-transition: color 0.5s ease;
    -webkit-transition: color 0.5s ease;
    transition: color 0.5s ease;
    font-size: 25px;
}

.container.fr figcaption.longText a  {
    font-size: 25px;
    line-height: 25px;
}

figcaption a:hover {
    color: #59458a;
    text-decoration: none;
}

 

.hidden-me{
    opacity:0;
}
.visible-me{
    opacity:1;
}

/*
.pfblock,
.sec-b,
.sec-g,
.sec-e,
.s-img,
.s-title, 
.bottom-r,
.party-header,
.owl-carousel,
.sec-last.footer{
    display: none
}
*/


/* ---------------------------------------------- /*
 * Home page  | sec-c
/* ---------------------------------------------- */
#slider .hero {
	position: relative;
	width: 100%;
	top: 50%;
	left: 0;
	text-align: center;
	-webkit-transform:none;
	   -moz-transform:none;
		-ms-transform:none;
		 -o-transform:none;
			transform:none;
	padding: 0 15px;
}
#slider.sec-c {
    background: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
	background-color: #fff;
	background-attachment:none;
	background-repeat: repeat;
	background-position: 50% 50%!important;
/*
	-webkit-background-size: contain;
	   -moz-background-size: contain;
		 -o-background-size: contain;
			background-size: contain;
*/
 
}

/* technique to stop images from jumping with page load 
* height / width * 100
*/
.wtf-image-container {
  position: relative;
  padding-bottom: 82.7777777778%; /* ratio of image height to width */
  height: 0;
/*  overflow: hidden;*/
  background-color: transparent; /* light gray image placeholder */
}

.wtf-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto!important;
}

.sec-c .s-title div.header{
    font-family: 'Fontdiner Swanky', cursive;
    font-style: normal;
    font-size: 60px;
    width: 100%;
    line-height: 60px;
    margin-top: 0;
    margin-bottom: 0;
    color: #c61212;
    letter-spacing: normal;
    font-weight: 400;
}

.sec-c .s-title p{
    font-family: 'Gochi Hand', cursive;
    /* font-family: 'Roboto', sans-serif; */
    color: #f38e2d;
    letter-spacing: .1em;
    font-weight: 500;
    font-size: 19px;
}


.sec-c .s-title h1{
    font-family: 'Henny Penny', cursive;
    font-style: normal;
    font-size: 35px;
    width: 100%;
    line-height: 60px;
    margin-top: 10%;
    margin-bottom: 0;
    letter-spacing: normal;
    font-weight: 400;
}

.sec-c .s-title h1 span.lg-txt{
     font-size: 100px;
}

.sec-c .s-title h2{
    font-family: 'Gochi Hand', cursive;
    font-style: normal;
    font-size: 25px;
    color: #486114;
    letter-spacing: normal;
    font-weight: 400;
    text-align: center;
    padding:30px 0 0 0px;
}
.sec-c .hero .s-img {
    margin-top: 10%
}
.sec-c .hero .mobile-show {
    display: none!important
}
.sec-c .item img {
    width: auto;
    margin: 0 auto
}
.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active { 
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.btn.btn-white {
    background: #fff;
    color: #666;
    border-bottom: 4px solid #ddd;
}

 
/* ---------------------------------------------- /*
 * Bootstrap modal
/* ---------------------------------------------- */
 
.modal-header button.close {
    text-decoration: none;
    color: #fff;
    padding:0;
    border-radius: .2em;
    background: transparent;
    font-size: 2.2em;
    line-height: 1;
    transition: background .2s ease-in-out;
    opacity: 1;
    text-shadow: none
}
.modal-title {
    color: #fff;
    font-family: 'Gochi Hand', cursive;
    letter-spacing: normal;
    font-weight: normal;
}
.modal-header {
    padding: 35px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.modal-body {
    color: #fff;
    padding: 35px;
}
.modal-body p{
    font-size: 18px
}
.modal-body p.note b{
    color: #FFEB3B;
}
.modal-body h2{
    font-size: 22px;
    color: #fff;
    letter-spacing: normal;
    line-height: 30px;
}
.modal-body h3.quiz-header{
    font-size: 22px;
    color: #fff;
    letter-spacing: normal;
    text-align: center;
    margin-bottom: 25px;
}
.modal-body h3.quiz-header.m-b-15{
    margin-bottom: 15px;
}
.modal-body img{
    border-radius: 0;
    margin: 25px 0;
    background: transparent;
    margin-bottom: 20px
}

.modal-body img.center{
    margin: 0 auto; 
}

.modal-body img.with-bg{
    background-color: #fff;
    margin: 25px auto
}

.modal-content {
    position: relative;
    background-color: #59458a;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}  
.modal-footer {
    padding: 15px;
    text-align: right;
    border-top:  1px solid rgba(255,255,255,0.2);
}

.modal {
 
  padding: 0!important;
}

/* Party Modal*/
#PartyModal .modal-dialog {
    height: auto;
    position: absolute;
    width: 100%;
    max-width: 1000px;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    /* padding: 15% 10% 15% 10%; */
    margin: 0 auto;
}

#PartyModal  .modal-header{
    padding: 35px 35px 45px;
}
#PartyModal .modal-body {
    color: #fff;
    padding: 15px;
    margin: 0;
}
#PartyModal .modal-body img{
    border-radius: 0;
    margin: 0 0 0 0;
    background: transparent;
    margin-bottom: 0;
    width: 100%;
}
#PartyModal .modal-content {
    border: 1px solid rgba(0,0,0,.2);
    margin: 0;
    padding: 0;
    border-radius: 0;
}

#PartyModal .glide__track {
    padding: 0;
    margin: 0;  
}

.the-party-popup .modal-content {
    background:#fff
}
.the-party-popup .modal-header button.close{
    color: #333
}


/*
.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}  
*/
/* ---------------------------------------------- /*
 * quiz #1 Healthy Relationships
/* ---------------------------------------------- */
.quiz {
    padding: 0 30px 20px 30px;
    max-width: 960px;
    margin: 0 auto;
}
.holder-question {
    margin-bottom: 5px;
    background: #4e3c79;
    padding: 10px;
    position: relative;
    display: inline-block;
    width: 100%;
}
.quiz ul {
    list-style: none;
    padding: 0;
    margin: 0;
    float: right;
    display: inline-block;
}
.quiz-question {
    font-weight: 400;
    display: block;
    padding: 0px 0 10px 0;
    margin: 0;
    font-size: 16px !important;
}
.quiz-answer {
    margin: 0;
    padding: 10px;
    background: #f7f7f7;
    color:#59458a; 
    margin-bottom: 5px;
    cursor: pointer;
    display: inline-block;
}
.quiz-answer:hover {
    background: #eee;
}
.quiz-answer:before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #ccc;
    background: #fff;
    vertical-align: middle;
    margin-right: 10px;
}
.quiz-answer.active:before {
    background-color: #333;
    border-color: #333;
}
.quiz-answer.correct:before {
    background-color: red;
    border-color: red;
}
.quiz-answer.incorrect:before {
    background-color: red;
    border-color: red;
}
.quiz-answer.active.correct:before {
    outline: 2px solid red;
    outline-offset: 2px;
}
.quiz-result {
    max-width: 960px;
    margin: 0 auto;
    font-weight: bold;
    text-align: center;
    color: #fff;
    padding: 20px;
    margin-bottom: 25px;
    display: none
}
.quiz-result.good {
    background: green;
}
.quiz-result.mid {
    background: orange;
}
.quiz-result.bad {
    background: red;
}

.quiz-result.good a,
.quiz-result.bad a {
    color: #fff;
    border-bottom: 0px dotted #fff;
    font-weight: 400;
    font-size: 18px
}    

.quiz-result.good a span,
.quiz-result.bad a span{
    color: #fff;
    border-bottom: 2px solid #fff;
    font-weight: 500;
    font-size: 30px;
    line-height: 35px
}
 
/* ---------------------------------------------- /*
 * quiz #2 Risky Behaviour
/* ---------------------------------------------- */
.faded {
  color: #7d7d7d;
}
#quiz-counter {
    color: #fff;
    font-size: 20px;
}
.quiz-container {
    padding: 0.25em;
    margin: 0 1em 1em auto
}

.quiz-container a {
    text-decoration: none;
    color: #333;
}

#quiz-header,
#quiz-start-screen,
#quiz-results-screen,
#quiz-counter {
    text-align: center;
}

#questions {
    margin-top: 2em;
    background: #4e3c79;
    padding: 25px;
}

.question {
    font-size: 1.25em;
}

.answers {
    list-style: none;
    padding: 0;
}

.answers li:not(:first-child) {
    margin-top: 1.25em;
}

.answers a,
#quiz-controls {
    background: #f3f3f3;
    border: .1em solid #efefef;
}

.answers a {
    display: block;
    padding: 0.75em 1em;
    margin-bottom: 0.5em;
}

.answers a.correct {
    background: #31b72f;
    border-color: #2db12b;
}
.answers a.incorrect {
    background: #e64646;
    border-color: #e04040;
}

.answers a.correct,
.answers a.incorrect {
    color: #fff;
}

#quiz-controls {
    color: #fff;
    padding: 0em 1em 2.5em;
    text-align: center;
    margin-top: 0;
    background: #4e3c79;
    border: 0;
    border-radius: 0!important;
}

#quiz-response {
    font-size: 16px;
    font-weight: 300;
    padding: 0 5px;
}
#quiz-results {
    font-size: 20px;
    background: #4e3c79;
    padding: 0;
    margin: 0;
}

.quiz-container .quiz-button,
.answers a,
#quiz-controls {
    border-radius: .25em;
}

#quiz-buttons a,
.quiz-container .quiz-button {
    display: inline-block;
    padding: 0.5em 1em;
    min-width: 8em;
    margin: 0
}

.quiz-button,
#quiz-buttons a {
    color: #fdfdfd!important;
    background: #3cb7ff!important;
    border: 0em solid #3db4f9;
    transition: 0.2s ease;
    border-radius: 0!important
}

.quiz-button:hover,
#quiz-buttons a:hover {
    background: #31acf5;
    border: 0em solid #34aaef;
    transition: 0.2s ease;
}

/* Quiz State Overrides */


.quiz-results-state #quiz-buttons a {
    background: #88449a;
    border-color: #864098;
    margin: 1em
}
/* ---------------------------------------------- /*
 * Social media share
/* ---------------------------------------------- */
 
.sicon {
    position: relative;
    display: block;
    margin: 10px 0;
    padding-left: 0;
}

.icon-circle .fab{
    font-size: 11px;
    color: #ffffff;
    margin: 0 auto;
    margin-right: 5px;
    height: 31px;
    text-align: center;
    width: 31px;
    border-radius: .2em;
    border: 2px solid #e84700;
    line-height: 31px;
    cursor: pointer;
    -webkit-transition: all ease-in-out 0.35s;
    -moz-transition: all ease-in-out 0.35s;
    -o-transition: all ease-in-out 0.35s;
    -ms-transition: all ease-in-out 0.35s;
    transition: all ease-in-out 0.20s,background-color ease-in-out 0.05s;
}

.icon-circle  .fab:hover{
    background-color : #e84700;    
    color : #fff;
    border  : 1px solid #e84711;
    -moz-box-shadow : inset 0px 0px 0px 5px #ffffff;
    -o-box-shadow : inset 0px 0px 0px 5px #ffffff;
    -ms-box-shadow : inset 0px 0px 0px 5px #ffffff;
    -webkit-box-shadow : inset 0px 0px 0px 5px #ffffff;
    box-shadow   : inset 0px 0px 0px 5px #ffffff;
    -ms-transform : scale(1.2,1.2); 
    -webkit-transform  : scale(1.2,1.2);
    -moz-transform : scale(1.2,1.2); 
    -o-transform  : scale(1.2,1.2); 
    transform : scale(1.2,1.2);  
}

.icon-circle  i:before{
    margin-left: 0px;
    font-size  : 15px;
}

@media (min-width:320px) and (max-width:768px) {

.icon-circle .fab{
    font-size : 11px;
    color : #e84700;
    margin : 0 auto;
    height : 31px;
    width : 31px;
    border-radius : 50%;
    border  :0px solid #e84700;
    line-height : 31px;
    cursor : pointer;
    -webkit-transition  : all  ease-in-out 0.35s;
    -moz-transition : all  ease-in-out 0.35s;
    -o-transition : all  ease-in-out 0.35s;
    -ms-transition  : all  ease-in-out 0.35s;
    transition : all  ease-in-out 0.20s,background-color ease-in-out 0.05s;
}

.icon-circle  .fab:hover{

    background-color : #e84700;    
    color : #fff;
    border : 1px solid #e84711;
    -moz-box-shadow : inset 0px 0px 0px 5px #ffffff;
    -o-box-shadow : inset 0px 0px 0px 5px #ffffff;
    -ms-box-shadow : inset 0px 0px 0px 5px #ffffff;
    -webkit-box-shadow  : inset 0px 0px 0px 5px #ffffff;
    box-shadow   : inset 0px 0px 0px 5px #ffffff;
    -ms-transform : scale(1.2,1.2); 
    -webkit-transform  : scale(1.2,1.2);
    -moz-transform   : scale(1.2,1.2); 
    -o-transform  : scale(1.2,1.2); 
    transform : scale(1.2,1.2);  
}

.icon-circle  i:before{
    margin-left : 0px;
    font-size : 11px;
}   
}

.ifacebook .fab{
    background-color : #fff;    
    color  : #3B5998;
    border  : 0px solid #3B5998;
}

.ifacebook .fab:hover{
    background-color : #fff;    
    color  : #3B5998;
    border  : 0px solid #3B5998;

}

.itwittter .fab{
    background-color : #fff;    
    color : #33ccff;
    border : 0px solid #33ccff;
}

.itwittter .fab:hover{
    background-color : #fff;    
    color : #33ccff;
    border : 0px solid #33ccff;
}

.igoogle .fab{
    background-color : #fff;    
    color : #BD3518;    
    border  : 0px solid #BD3518;
}

.igoogle .fab:hover{
    background-color : #fff;    
    color : #BD3518;    
    border  : 0px solid #BD3518;
}

.iLinkedin .fab{
    color :#007bb7;    
    background-color: #fff;
    border  : 0px solid #007bb7;
}

.iLinkedin .fab:hover{
    color :#007bb7;    
    background-color: #fff;
    border  : 0px solid #007bb7;
}

.iPinterest .fab{
    background-color : #fff;    
    color  : #bc0d1e ;
    border  : 0px solid #bc0d1e ;
}

.iPinterest .fab:hover{
    background-color : #fff;    
    color  : #bc0d1e ;
    border  : 0px solid #bc0d1e ;

}


/* ---------------------------------------------- /*
 * sec-f map
/* ---------------------------------------------- */
#group-map-1 {
display: none
}

.sec-f{
    background:#fff;
    border-top: 15px solid #f38e2d;
}

.sec-f.pfblock {
    padding: 0px 0 0px
}

.sec-f.pfblock .container {
    width: 100%;
    padding: 0
}

.sec-f .MapLeftSide{
    padding: 0 0px 0 15px;
    position: relative;
    display: inline-block
}

.sec-f h2 {
    font-family: 'Henny Penny', cursive;
    font-style: normal;
    font-size: 26px;
    width: 100%;
    line-height: 50px;
    color: #f38e2d;
    letter-spacing: normal;
    font-weight: 400;
    margin-bottom: 0;
    padding-top: 50px
}

#controls2, #controls3, #controls4, #controls5, #controls6, #controls7 {
    display: none
}

ul.ullist.controls {
    height: 400px;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 5px!important;
}

ul.ullist.controls li a span {
    font-family: 'Roboto', sans-serif;
}

ul.ullist.controls li a {
    background: #f2f1f0;
    padding:15px 5px 10px 5px !important;
    margin-bottom: 5px
}

ul.ullist.controls li a:before {
    content: "\f3c5";
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 900;
    text-decoration: inherit;
    color: #ea4335;
    font-size: 30px;
    padding-right: 0.5em;
    top: 0px;
    left: 0;
    padding: 15px 20px;
    background: #fff;
    border-radius: 100%;
    margin: 20px 0;
    position: relative;
    vertical-align: text-bottom;
}

ul.ullist.controls li.active a{
    background: #f7f7f7
}

ul.ullist.controls li.active a:before {
/*
    content: "";
    font-family: 'Font Awesome 5 Pro';
*/
    background-image: url(../images/fallbackmarker.png);
    background-image: url(../images/marker.svg), none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-style: normal;
    font-weight: 900;
    text-decoration: inherit;
    color: #ea4335;
    font-size: 30px;
    padding-right: 0.5em;
    top: 0px;
    left: 0;
    padding: 15px 20px;
    /*background: #fff;*/
    border-radius: 100%;
    margin: 20px 0;
    position: relative;
    vertical-align: text-bottom;
}
 

ul.ullist.controls li a span {
    display: inline-block;
    margin-left: 15px;
}

ul.ullist.controls li a span p{
    margin: 0;
    padding: 0;
    color: #ea4335;
    line-height: 1em;
    font-weight: 500;
    font-size: 13.5px;
}

ul.ullist.controls li a span small{
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: #7a9eb0;
}

ul.ullist.controls li a span h4{
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: #5a7380;
    font-family: 'Roboto', sans-serif;
    
}

.sec-f h2.map-popup-info {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-size: 15px;
    color: #ea4335;
    width: 100%;
    line-height: 1.4em;
    letter-spacing: normal;
    font-weight: 400;
    margin-bottom: 0;
    padding: 10px;
}

.sec-f p.map-popup-info {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    width: 100%;
    line-height: normal;
    letter-spacing: normal;
    /* font-weight: 400; */
    margin-bottom: 0;
    padding: 0px 10px 10px;
    color: #7a9eb0;
}
 
.sec-f h2 img {margin-right: 10px}

.sec-f .dropdown .btn{
	font-family: 'Roboto', sans-serif
}

.sec-f .form-group {
    margin-top: 25px;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

.sec-f .form-group  select {
    color: #ea4335;
    border: 2px solid #f38e2d;
    border-radius: 0;
    height: 38px;
    font-size: 14px;
    font-weight: 500
 }
.sec-f .form-group  select option {
    font-size: 16px
}

.sec-f .form-group label{
    font-family: 'Gochi Hand', cursive;
    font-style: normal;
    font-size: 20px;
    float: left;
    text-align: left;
    color: #f38e2d;
    letter-spacing: normal;
    font-weight: 400;
}
.sec-f .form-group label.french{
font-size: 16px;
padding: 0;
}
.sec-f .maps{
     width: 100%;
    height: 636px;
    position: relative;
    overflow: hidden;
}




/* ---------------------------------------------- /*
 * sec-d The party
/* ---------------------------------------------- */
#sec-d.sec-d{
    background: #fff;
/*
  background: url(../images/sec-d/sec-d-bg.jpg);
    background-color: #fdb942;
    background-attachment:inherit;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;  
*/
}  
 
audio {
    position: absolute;
    margin: 0 auto;
    display: inline-block;
    top: 50%;
    z-index: -1;
}

#audio-tracker{
    position: absolute;
    margin: 0 auto;
    display: inline-block;
    top: 50%;
    z-index: -1;
    background: transparent;
    width: 200px;
    height: 200px
}

/* technique to stop images from jumping with page load 
* height / width * 100
* Pary background
*/
.party-image-container {
  position: relative;
  padding-bottom: 56.2280701754%; /* ratio of image height to width */
  height: 0;
  overflow: hidden;
  background-color: #e9e9e9; /* light gray image placeholder */
}

.party-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#sec-d.sec-d{
/*    background: linear-gradient(to right, #0f0, pink);*/
    animation: party 5s infinite linear;
}

 
@keyframes party {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(360deg);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}
 
.scene-1 {
    position: absolute;
    padding: 0;
    display: inline-block;
    margin: 13% 30px 0 30px;
    height: 105px;
    width: 35%;
    background: transparent;
    z-index: 9;
}

.scene-2 {
    position: absolute;
    padding: 0;
    display: inline-block;
    margin: 23% 20px 0 20px;
    left: 23%;
    height: 160px;
    width: 34%;
    background: transparent;
    z-index: 9;
}

.scene-3 {
    position: absolute;
    padding: 0;
    display: inline-block;
    margin: 18% 30px 0 30px;
    left: 57%;
    height: 110px;
    width: 35%;
    background: transparent;
    z-index: 9;
}

.scene-4 {
    position: absolute;
    padding: 0;
    display: inline-block;
    margin: 28% 35px 0 35px;
    left: 73%;
    height: 150px;
    width: 23%;
    background: transparent;
    z-index: 9;
}

.scene-5 {
    position: absolute;
    padding: 0;
    display: inline-block;
    margin: 11% 20px 0 20px;
    left: 37%;
    height: 130px;
    width: 20%;
    background: transparent;
    z-index: 9;
}

.scene-6 {
    position: absolute;
    padding: 0;
    display: inline-block;
    margin: 37.5% 20px 0 20px;
    left: 47%;
    height: 200px;
    width: 27%;
    background: transparent;
    z-index: 9;
}

.scene-7 {
    position: absolute;
    padding: 0;
    display: inline-block;
    margin: 23% 0px 0 0px;
    height: 160px;
    width: 24%;
    background: transparent;
    z-index: 9;
}

.scene-8 {
    position: absolute;
    padding: 0;
    display: inline-block;
    margin: 40% 0px 0 0px;
    height: 186px;
    width: 33%;
    background: transparent;
    z-index: 9;
}
 
.message {
  height: 3em;
  width: 8em;
  padding: 0em;
  line-height: 3em;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  bottom: 6em;
  left: 0;
  right: 0;
  border-radius: .5em;
  color: white;
  animation: message 4s ease-out infinite;
  opacity: 0;
}
.message:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 1em solid #bf0000;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
}

 

@keyframes message {
  10%, 50% {
    opacity: 1;
  }
  to {
    transform: translateY(-2em);
    opacity: 0;
  }
}
.scene-1:nth-child(1) .message {
  background: #564e7f;
  animation-delay: 3.436s;
}
.scene-1:nth-child(1) .message:after {
  border-top-color: #564e7f;
}
.scene-1:nth-child(1) img {
  border-color: #564e7f;
}

.scene-2:nth-child(1) .message {
  background: #a26a13;
  animation-delay: 2s;
}
.scene-2:nth-child(1) .message:after {
  border-top-color: #a26a13;
}
.scene-2:nth-child(1) img {
  border-color: #a26a13;
}

.scene-3:nth-child(1) .message {
  background: #ff5900;
  animation-delay: 2.718s;
}
.scene-3:nth-child(1) .message:after {
  border-top-color: #ff5900;
}
.scene-3:nth-child(1) img {
  border-color: #ff5900;
}

.scene-4:nth-child(1) .message {
  background: #bf0000;
  animation-delay: 1s;
}
.scene-4:nth-child(1) .message:after {
  border-top-color: #bf0000;
}
.scene-4:nth-child(1) img {
  border-color: #bf0000;
}

.scene-5:nth-child(1) .message {
  background: #00bf00;
  animation-delay: 1s;
}
.scene-5:nth-child(1) .message:after {
  border-top-color: #00bf00;
}
.scene-5:nth-child(1) img {
  border-color: #00bf00;
}

.scene-6:nth-child(1) .message {
  background: #b7499d;
  animation-delay: 1.718s;
}
.scene-6:nth-child(1) .message:after {
  border-top-color: #b7499d;
}
.scene-6:nth-child(1) img {
  border-color: #b7499d;
}

.scene-7:nth-child(1) .message {
  background: #4ea2ff;
  animation-delay: 2.718s;
}
.scene-7:nth-child(1) .message:after {
  border-top-color: #4ea2ff;
}
.scene-7:nth-child(1) img {
  border-color: #4ea2ff;
}

.scene-8:nth-child(1) .message {
  background: #774e56;
  animation-delay: 2s;
}
.scene-8:nth-child(1) .message:after {
  border-top-color: #774e56;
}
.scene-8:nth-child(1) img {
  border-color: #774e56;
}

 

.party-main-holder .party-bg {
    margin-top: 0px;
    background: #333;
    position: relative;
    display: block;
    padding: 0px;
}
.party-header {
    background:#c61212; 
    padding:20px 0 40px 0;  
    font-size:20px;
}

.party-header h1 {
    font-family: 'Henny Penny', cursive;
    font-style: normal;
    font-size: 70px;
    width: 100%;
    line-height: 10px;
    color: #fff;
    letter-spacing: normal;
    font-weight: 400;
    margin-bottom: 0;
}

.party-header h1 img {
    margin-right: 10px;
}
.party-header h1 small{
      font-size: 45%;
    line-height: 50px;
    color: #fff;
    vertical-align: top;  
}

.party-header p {
    font-family: 'Gochi Hand', cursive;
    font-style: normal;
    font-size: 19px;
    width: 100%;
    line-height: 20px;
    padding-top: 40px;
    text-align: left;
    color: #fff;
    letter-spacing: normal;
    font-weight: 400;
}

/* ---------------------------------------------- /*
 * sec-g Search
/* ---------------------------------------------- */
.sec-g{
    background:#ad1010;
    border-top: 15px solid #fff;
}

.sec-g.pfblock {
/*    padding: 0px 0 0px*/
}

.sec-g h2 {
    font-family: 'Henny Penny', cursive;
    font-style: normal;
    font-size: 55px;
    width: 100%;
    line-height: 10px;
    color: #fff;
    letter-spacing: normal;
    font-weight: 400;
    margin-bottom: 0;
}
 
.sec-g h2 img {margin-right: 10px}

.sec-g small {
    font-family: 'Gochi Hand', cursive;
    font-style: normal;
    font-size: 20px;
    width: 100%;
    line-height: 20px;
    float: right;
    text-align: right;
    color: #fff;
    letter-spacing: normal;
    font-weight: 400;
}

.sec-g #main p{
    color: #fff;
    text-align: left
}
.sec-g .search-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto; 
}

.search-container #main {
    margin-top: 15px;
}

form#search {
    margin-top: 15px
}
.search-input {
/*    padding: 8px 16px;*/
    border-radius: 10px 0 0 10px;
    border: 0 none;
    outline: 0 none;
    font-size: 16px;
    height: 44px;
    box-shadow: 0 1px 2px rgba(12,13,14,0.1) inset;
/*    box-shadow: inset 0 1px 15px rgba(0,0,0,.39), 0 0px 1px #FFF, 0 1px 0 #FFF;*/
}
.search-button {
    background: linear-gradient(#eec7c7, #ea5656);
    border: 1px solid #ffffff;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    border-radius: 0 2px 2px 0;
    border-radius: 0 5px 5px 0;
    color: #565656;
    padding: 10px 0;
    height: 44px;
    cursor: pointer;
}

.search-container .search-results {
    display: inline-block;
    position: relative;
    padding: 5px 15px;
    color: #ffffff;
    border-bottom: 1px dotted #ffffff;
    margin-right: 15px;
    width: 100%;
    cursor: pointer;
    font-size: 25px;
    font-family: 'Gochi Hand', cursive;
}
.search-container #main p.pop-up-result{
    background: #fff;
    color: #000;
    padding: 25px;
    font-size: 25px;
    font-family: 'Gochi Hand', cursive;
    -moz-box-shadow: 7px 14px 42px 3px rgba(77, 77, 77, 0.4);
    -ms-box-shadow: 7px 14px 42px 3px rgba(77, 77, 77, 0.4);
    -o-box-shadow:7px 14px 42px 3px rgba(77, 77, 77, 0.4);
    box-shadow: 7px 14px 42px 3px rgba(77, 77, 77, 0.4);
   
}
.search-container #main p.pop-up-result .closeMe{
    float: right;
    font-size: 35px; 
}
.toggle-b-b {
    border-bottom: 0!important;
}
.search-results.active {
    color: #edaeae;
    border-bottom-color: #edaeae!important;
}
/*insde the files replace . period with <code>.</code> to not 
stop the pargraph to finish*/
code {
    padding: 0;
    font-size: 90%;
    color: #000000;
    background-color: #ffffff;
    border-radius: 4px;
}
/* ---------------------------------------------- /*
 * footer copyright
/* ---------------------------------------------- */

.footer{
    min-height: 30px;
    border-bottom: 0;
    text-align: center;
    color: #c61212;
    font-family: 'Gochi Hand', cursive;
}

.footer-copyright{
    background-color: transparent;
    padding: 5px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 0;
    left: 0;
    margin: 0 auto;
    right: 0;
}

/* ---------------------------------------------- /*
 * footer sec-last
/* ---------------------------------------------- */

.sec-last.footer {
    position: relative;
    background: #f38e2d;
    text-align: center;
    padding: 30px 15px 25px 15px;
    text-align: center;
    color: #c61212;
    font-family: 'Gochi Hand', cursive;
}

.sec-last.footer p{
    padding: 0;
    margin: 0
}
 
/* ---------------------------------------------- /*
 * Back home
/* ---------------------------------------------- */

.back-home {
	position: fixed;
	z-index: 999;
	bottom: 6em;
	right: 2em;
}

.back-home a {
    background-color: #FF9800;
    display: block;
    width: 35px;
    height: 35px;
    text-align: center;
    color: #ffffff;
    font-size: 15px;
    line-height: 30px;
    border-radius: 100%;
 
}

.back-home a:hover,
.back-home a:active {
	background-color: rgb(252, 162, 63, 0.8);
	color: #fff;
}
/* ---------------------------------------------- /*
 * Scroll to top
/* ---------------------------------------------- */

.scroll-up {
	position: fixed;
	display: none;
	z-index: 999;
	bottom: 2em;
	right: 2em;
}

.scroll-up a {
    background-color: #f38e2d;
    display: block;
    width: 45px;
    height: 45px;
    text-align: center;
    color: #ffffff;
    font-size: 15px;
    line-height: 45px;
    border-radius: 100%;
 
}

.scroll-up a:hover,
.scroll-up a:active {
	background-color: rgb(252, 162, 63, 0.8);
	color: #fff;
}

/* ---------------------------------------------- /*
 *Scroll Down
/* ---------------------------------------------- */

.scroll-down {
	position: absolute;
	right: 10px;
	bottom: 45px;
	border: 0px solid #fff;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	margin-left: -15px;
	display: block;
	z-index: 10;
    text-align: center;
}
 

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}


.scroll-down span {
    position: relative;
    color: #fff;
    margin-top: 15px;
    font-size: 25px;
    display: block;
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
 


/* ---------------------------------------------- /*

 * INDEX PAGE Extinguisher Effect

/* ---------------------------------------------- */
/* Transition Layer */
.cd-transition-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.cd-transition-layer .bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-2%);
          transform: translateY(-50%) translateX(-2%);
  /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.cd-transition-layer.visible {
  opacity: 1;
  visibility: visible;
}
.cd-transition-layer.visible .bg-layer {
  -webkit-transform: translateY(-50%) translateX(-98%);
          transform: translateY(-50%) translateX(-98%);
}
.cd-transition-layer.opening .bg-layer, .cd-transition-layer.closing .bg-layer {
  -webkit-animation-duration: .8s;
          animation-duration: .8s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.no-cssanimations .cd-transition-layer {
  display: none;
}


/* -------------------------------- 

Fire Extinguisher Effect

-------------------------------- */

.extinguisher-transition .cd-transition-layer .bg-layer {
  /* sprite composed of 25 frames */
  width: 2500%;
  background-image: url(../images/extinguisher.png);
}
.extinguisher-transition .cd-transition-layer.opening .bg-layer {
  -webkit-animation: cd-sequence 0.8s steps(24) forwards;
          animation: cd-sequence 0.8s steps(24) forwards;
}
.extinguisher-transition .cd-transition-layer.closing .bg-layer {
  -webkit-animation: cd-sequence 0.8s steps(24) forwards reverse;
          animation: cd-sequence 0.8s steps(24) forwards reverse;
}
 
/* -------------------------------- 

Animations

-------------------------------- */
@-webkit-keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
            transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
            transform: translateY(-50%) translateX(-98%);
  }
}
@keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
            transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
            transform: translateY(-50%) translateX(-98%);
  }
}
@-webkit-keyframes cd-sequence-2 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-1.3158%);
            transform: translateY(-50%) translateX(-1.3158%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-98.6842%);
            transform: translateY(-50%) translateX(-98.6842%);
  }
}
@keyframes cd-sequence-2 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-1.3158%);
            transform: translateY(-50%) translateX(-1.3158%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-98.6842%);
            transform: translateY(-50%) translateX(-98.6842%);
  }
}
@-webkit-keyframes cd-sequence-3 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-2.5%);
            transform: translateY(-50%) translateX(-2.5%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-97.5%);
            transform: translateY(-50%) translateX(-97.5%);
  }
}
@keyframes cd-sequence-3 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-2.5%);
            transform: translateY(-50%) translateX(-2.5%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-97.5%);
            transform: translateY(-50%) translateX(-97.5%);
  }
}




/* -------------------------------- 
Stretchy Nav style 
-------------------------------- */
.cd-stretchy-nav {
    position: fixed;
    z-index: 99;
    top: 2em;
    right: 2em;
    pointer-events: none;
}
.cd-stretchy-nav .stretchy-nav-bg {
    /* this is the stretching navigation background */
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-transition: height 0.2s, box-shadow 0.2s;
    -moz-transition: height 0.2s, box-shadow 0.2s;
    transition: height 0.2s, box-shadow 0.2s;
}
.cd-stretchy-nav.nav-is-visible {
    pointer-events: auto;
}
.cd-stretchy-nav.nav-is-visible .stretchy-nav-bg {
    height: 100%;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}

.cd-nav-trigger {
    position: absolute;
    z-index: 9999;
    top: 0px;
    right: 0;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    /* overflow: hidden; */
    white-space: nowrap;
    color: #48b3ce!important;
    pointer-events: auto;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-family: 'Short Stack', cursive;
    font-weight: 900;
    text-shadow: none;
}
.cd-nav-trigger span, .cd-nav-trigger span::after, .cd-nav-trigger span::before {
    /* this is the hamburger icon */
    position: absolute;
    width: 25px;
    height: 2px;
    background-color: #f38e2d;
}
.cd-nav-trigger span {
    /* middle line of the hamburger icon */
    top: 30px;
    bottom: auto;
    margin-left: 10px;
    left: 20px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    transition: background-color 0.2s;
}
.cd-nav-trigger span::after, .cd-nav-trigger span::before {
    /* top and bottom lines of the hamburger icon */
    content: '';
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    transition: transform 0.2s;
}
.cd-nav-trigger span::before {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
}
.cd-nav-trigger span::after {
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px);
}
.no-touch .cd-nav-trigger:hover ~ .stretchy-nav-bg {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}
.nav-is-visible .cd-nav-trigger span {
    background-color: transparent;
}
.nav-is-visible .cd-nav-trigger span::before {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.nav-is-visible .cd-nav-trigger span::after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cd-stretchy-nav ul {
    position: relative;
    z-index: 9;
    padding: 60px 0 0;
    visibility: hidden;
    -webkit-transition: visibility 0.3s;
    -moz-transition: visibility 0.3s;
    transition: visibility 0.3s;
    text-align: right;
    list-style: none
}
.cd-stretchy-nav ul a {
    position: relative;
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 calc(1em + 60px) 0 1em;
    color: rgb(243, 142, 45);
    font-size: 1.9rem;
    -webkit-transition: color 0.2s;
    -moz-transition: color 0.2s;
    transition: color 0.2s;
    font-family: 'Gochi Hand', cursive
}
 
.cd-stretchy-nav ul a::after {
    /* navigation item icons */
    content: '';
    position: absolute;
    /*  height: 16px;*/
    width: 16px;
    right: 24.5px;
    top: 50%;
    -webkit-transform: translateY(-50%) scale(0);
    -moz-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    -o-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    opacity: 1;
    /*  background: url(images/menu-3.png) no-repeat 0 0;*/
    font-family: 'Font Awesome 5 Pro';
    font-weight: normal;
    font-style: normal;
}
.cd-stretchy-nav ul a::before {
    /* line visible next to the active navigation item */
    content: '';
    position: absolute;
    width: 3px;
    height: 16px;
    top: 50%;
    right: 60px;
    -webkit-transform: translateX(3px) translateY(-50%) scaleY(0);
    -moz-transform: translateX(3px) translateY(-50%) scaleY(0);
    -ms-transform: translateX(3px) translateY(-50%) scaleY(0);
    -o-transform: translateX(3px) translateY(-50%) scaleY(0);
    transform: translateX(3px) translateY(-50%) scaleY(0);
    background-color: #4b3d76;
}
.cd-stretchy-nav ul li:first-of-type a {
    color: #f38e2d
}
.cd-stretchy-nav ul li:first-of-type a:hover span {
    opacity: 1!important
}
.cd-stretchy-nav ul li:first-of-type a::after {
    /* change custom icon using image sprites */
     background-position: -16px 0;
    content: '\f015';
    font-weight: bold
}

.cd-stretchy-nav ul li:nth-of-type(2) a {
    color: #f0602b   
}
.cd-stretchy-nav ul li:nth-of-type(2) a:hover span {
     opacity: 1!important   
}
.cd-stretchy-nav ul li:nth-of-type(2) a::after {
    background-position: -32px 0;  
    content: '\f144';
}


.cd-stretchy-nav ul li:nth-of-type(3) a{
    color:#59458a
}
.cd-stretchy-nav ul li:nth-of-type(3) a:hover span {
    opacity: 1!important 
}
.cd-stretchy-nav ul li:nth-of-type(3) a::after {
    background-position: -64px 0;
    content: '\f004';
}
.cd-stretchy-nav ul li:nth-of-type(4) a {
    color: #80ab11
}
.cd-stretchy-nav ul li:nth-of-type(4) a:hover span {
    opacity: 1!important
}
.cd-stretchy-nav ul li:nth-of-type(4) a::after {
    background-position: -48px 0;
    content: '\f11a';
}

.cd-stretchy-nav ul li:nth-of-type(5) a {
    color: #0044b4
}
.cd-stretchy-nav ul li:nth-of-type(5) a:hover span{
    opacity: 1!important
}
.cd-stretchy-nav ul li:nth-of-type(5) a::after {
    background-position: 0 0;
    content: '\f1fd';
}

.cd-stretchy-nav ul li:nth-of-type(6) a {
    color: #ad1010
}
.cd-stretchy-nav ul li:nth-of-type(6) a:hover span{
    opacity: 1!important
}
.cd-stretchy-nav ul li:nth-of-type(6) a::after {
    background-position: -16px 0;
    content: '\f002';
}
.cd-stretchy-nav ul li:nth-of-type(7) a {
    color: #588193
}
.cd-stretchy-nav ul li:nth-of-type(7) a:hover span {
     opacity: 1!important   
}
.cd-stretchy-nav ul li:nth-of-type(7) a::after {
    background-position: -16px 0;
    content: '\f279';
}



.cd-stretchy-nav ul li:nth-of-type(8) a {
    color: #59458a;
}
.cd-stretchy-nav ul li:nth-of-type(8) a:hover span {
     opacity: 1!important   
}
.cd-stretchy-nav ul li:nth-of-type(8) a::after {
    background-position: -16px 0;
    content: 'FR';
    font-family: 'Henny Penny', cursive;
    right: 27px;
}
/*FR NUMBER 8*/
.cd-stretchy-nav.fr ul li:nth-of-type(8) a {
    color: #59458a;
}
.cd-stretchy-nav.fr ul li:nth-of-type(8) a:hover span {
     opacity: 1!important   
}
.cd-stretchy-nav.fr ul li:nth-of-type(8) a::after {
    background-position: -16px 0;
    content: 'EN';
    font-family: 'Henny Penny', cursive;
    right: 27px;
}
.cd-stretchy-nav ul span {
    /* navigation item labels */
    /*  display: block;*/
    opacity: 0;
    -webkit-transform: translateX(-25px);
    -moz-transform: translateX(-25px);
    -ms-transform: translateX(-25px);
    -o-transform: translateX(-25px);
    transform: translateX(-25px);
    background: rgba(239, 239, 239, 0.9);
    padding: 10px 15px;
    border-radius: 20px;
}

.cd-stretchy-nav.nav-is-visible ul {
    visibility: visible;
}
.cd-stretchy-nav.nav-is-visible ul a::after {
    /* navigation item icons */
    -webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
    -webkit-animation: scaleIn 0.15s backwards;
    -moz-animation: scaleIn 0.15s backwards;
    animation: scaleIn 0.15s backwards;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
}
.cd-stretchy-nav.nav-is-visible ul a.active {
    color: #634e9b;
}
 
.cd-stretchy-nav.nav-is-visible ul a.active::after {
    opacity: 1;
}
.cd-stretchy-nav.nav-is-visible ul a.active::before {
    -webkit-transform: translateX(3px) translateY(-50%) scaleY(1);
    -moz-transform: translateX(3px) translateY(-50%) scaleY(1);
    -ms-transform: translateX(3px) translateY(-50%) scaleY(1);
    -o-transform: translateX(3px) translateY(-50%) scaleY(1);
    transform: translateX(3px) translateY(-50%) scaleY(1);
    -webkit-transition: -webkit-transform 0.15s 0.3s;
    -moz-transition: -moz-transform 0.15s 0.3s;
    transition: transform 0.15s 0.3s;
}
.cd-stretchy-nav.nav-is-visible ul span {
    opacity: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: slideIn 0.15s backwards;
    -moz-animation: slideIn 0.15s backwards;
    animation: slideIn 0.15s backwards;
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    transition: transform 0.2s;
}
 
.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover {
    color: #006334;
}
.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover::after {
    opacity: 1;
}
.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover span {
    -webkit-transform: translateX(-5px);
    -moz-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    -o-transform: translateX(-5px);
    transform: translateX(-5px);
}
.cd-stretchy-nav.nav-is-visible ul li:first-of-type a::after,
.cd-stretchy-nav.nav-is-visible ul li:first-of-type span {
    -webkit-animation-delay: 0.05s;
    -moz-animation-delay: 0.05s;
    animation-delay: 0.05s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(2) a::after,
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(2) span {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(3) a::after,
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(3) span {
    -webkit-animation-delay: 0.15s;
    -moz-animation-delay: 0.15s;
    animation-delay: 0.15s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(4) a::after,
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(4) span {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(5) a::after,
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(5) span {
    -webkit-animation-delay: 0.25s;
    -moz-animation-delay: 0.25s;
    animation-delay: 0.25s;
}