.notanelement { display: none; }
/* Comfortaa */
@font-face {
    #COMMENT
    font-family: 'comfortaaregular';
    src: url('/static/fonts/comfortaa_regular-webfont.woff2') format('woff2'),
         url('/static/fonts/comfortaa_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* gloria-hallelujah-regular - latin */
@font-face {
  font-family: 'Gloria Hallelujah';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/gloria-hallelujah-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Gloria Hallelujah'), local('GloriaHallelujah'),
       url('/static/fonts/gloria-hallelujah-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/static/fonts/gloria-hallelujah-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/static/fonts/gloria-hallelujah-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/static/fonts/gloria-hallelujah-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/static/fonts/gloria-hallelujah-v9-latin-regular.svg#GloriaHallelujah') format('svg'); /* Legacy iOS */
}

/* indie-flower-regular - latin */
@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/indie-flower-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Indie Flower'), local('IndieFlower'),
       url('/static/fonts/indie-flower-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/static/fonts/indie-flower-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/static/fonts/indie-flower-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/static/fonts/indie-flower-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/static/fonts/indie-flower-v9-latin-regular.svg#IndieFlower') format('svg'); /* Legacy iOS */
}

/* noto-sans-regular - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/noto-sans-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans'), local('NotoSans'),
       url('/static/fonts/noto-sans-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/static/fonts/noto-sans-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/static/fonts/noto-sans-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/static/fonts/noto-sans-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/static/fonts/noto-sans-v7-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}


/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('/static/fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/static/fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/static/fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/static/fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/static/fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* pacifico-regular - latin */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/pacifico-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
       url('/static/fonts/pacifico-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/static/fonts/pacifico-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/static/fonts/pacifico-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/static/fonts/pacifico-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/static/fonts/pacifico-v12-latin-regular.svg#Pacifico') format('svg'); /* Legacy iOS */
}
body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-weight: 300;
}

#accept_terms{
    width:20px;
    height: 20px;
}

.background-img-center{

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*height:100% !important;*/

}

.loginbackground{

    /* Center and scale the image nicely */
    background-position: right !important;
    background-repeat: no-repeat;
    background-size: cover;
    height:100% !important;
    width: 100vw;

}

.loginbox{
    background-color: RGBA(255, 255, 255, 0.8) !important;
    height: 100vh;
    width:100%;
}

.background-img-right{
    /* Full height */

    /* Center and scale the image nicely */
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    height:100% !important;

}

.overlay-dark{
    background-color: rgba(50, 50, 50, 0.6) !important;
    background-blend-mode: overlay;
}

.overlay-light{
    background-color: rgba(210, 210, 210, 0.6) !important;
    background-blend-mode: overlay;
}


.footer{
    position: fixed;
    width:250px;
    left:0;
    right:0;
    bottom:0;
    text-align:center;
    z-index:9999;
    background: #272A5C;
    padding: 1em 1em 0 1em;
     font-family: "comfortaaregular", "Indie+Flower", Gloria Hallelujah, Pacifico, Noto Sans SC, Roboto !important;
}

.footer-content{
    padding: 1em 0.5em 0em 0.5em;
    border-radius: 50px 50px 0 0;
}


/*//////////////

SLIDER CONTROLS

////////////// */

.btn-circle {
  border-radius: 50%;
}

.pulse-button, pulse-button:focus {

    position: relative;
    outline: rgba(240, 240, 240, 0.7) !important;
    border: none;
    box-shadow: 0 0 0 0 rgba(240, 240, 240, 0.7) !important;
    cursor: pointer;
    -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1) !important;
    -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1) !important;
    -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1) !important;
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1) !important;
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);}}


.btn-wrapper{
    position: relative;
    top:47%;
}


.swiper-button-prev, .swiper-button-next {
    background-size: 75% 75% !important;
    height: 40px !important;
    width: 40px !important;
    background-color: white;
    position:fixed !important;
    top: 50% !important;
}

.btnLeft{
    position: fixed;
    top:47%;
    left: 5%;
}

.btnRight{
    position: fixed;
    top:47%;
    right: 5%
}

.btn-floating:hover {
     background-color: white !important;
}

/*//////////////////

SLIDER CARDS

////////////////*/

.swiper-slide{
    height: auto !important;
    min-height: 100vh;
}


.card{
    border-radius: 0 !important;
}

.card-body{
    padding-left: 60px !important;
    padding-right: 60px !important;
}

.card-spacer{
    height:150px !important;
    min-height: 10em;
    vertical-align: middle;
}

.card-title{
    margin: 0 !important;
}

.cardLogo{
    margin: 0 auto;
    height: 150px;
    width: 150px;
    position: absolute;
    left: 0;
    right: 0;
}

.card-font{
  font-size: 90%
}

.circle{
    border-radius: 9em;
}
.rounded-square{
    border-radius: 5em;
}

.form-card{
    min-height: 100% !important;
}

.form-group select{
    text-align-last:center !important;
    align-items: center !important;
}

/*///////////////////

    HELPERS

 ////////////////*/

.killShadow{
    box-shadow: none !important;
}

.killBorder{
    border: none !important;
}

*:focus {
    outline: none;
}

.vertical-align{

	padding: 100px 5px;
    text-align: center;

}

.drop-shadow{
    -webkit-box-shadow: 15px 15px 95px 0px rgba(0,0,0,0.46);
    -moz-box-shadow: 15px 15px 95px 0px rgba(0,0,0,0.46);
    box-shadow: 15px 15px 95px 0px rgba(0,0,0,0.46);
}

.padContent{

	padding: 1em;

}

.padContentSm{

	padding: 10px;

}

.padContentLess{

	padding: 0.5em !important;

}

.padTop{

	padding-top: 100px;

}

.padTopLess{

	padding-top:75px;

}

.padTopEvenLess{

	padding-top: 30px;

}

.padTopLarge{

	padding-top:30px;

}

.padTopMedium{

	padding-top: 20px;

}

.padTopSmall{

	padding-top: 10px;

}

.padTopTiny{

	padding-top: 5px;

}

.padContent{

	padding: 1em;

}

.padBottom{

	padding-top: 100px;

}

.padBottomLess{

	padding-bottom: 75px;

}

.padBottomEvenLess{

	padding-bottom: 30px;

}

.padContentLR{
    padding-left: 2.5em;
    padding-right: 2.5em;
}

.kbm{

	margin-bottom:0 !important;

}

.krm{

	margin-right: 0 !important;

}

.klm{

	margin-left: 0 !important;
}

.noMargin{
    margin: 0 !important;
}

.killTopPad{

	padding-top: 0 !important;
}

.killPadding{

	padding: 0 !important;

}

.killPadRight{

	padding-right: 0 !important;

}

.killPadLeft{

	padding-left: 0 !important;

}

.killPadBottom{
	padding-bottom: 0 !important;
}

/*///////////////////

    FORM STYLES

 ////////////////*/

#surveySelect .select-wrapper .select-dropdown,label{
    text-align: center !important;
}

#surveySelect{
    background: transparent !important;
    -webkit-border-radius: 30px !important;
    -moz-border-radius: 30px !important;
    border-radius: 30px !important;
    border-bottom: none !important;
    border-bottom: 0 !important;
    overflow: hidden;
}

#surveySelect .select-wrapper input{
    border-bottom: none !important;
    border-bottom: 0 !important;
}

#surveyPostcode .postCode, label, input{
    text-align: center !important;
}

.border-override input{
    border-bottom: none !important;
    border-bottom: 0 !important;
}

.field-radius{
    -webkit-border-radius: 70px !important;
    -moz-border-radius: 70px !important;
    border-radius: 70px !important
}

.selectCenter {
   text-align: center !important;
}

/*///////////////////

    Paging Segments

 ////////////////*/

.swiper-button-prev, .swiper-button-next{
	border:0px;
}

.button-segments{
	position: absolute;
	left: -10px;
	top: -10px;
	width: 60px;
	height: 60px;
}

.button-segments svg {
	width: 100%;
	height: 100%;
}

.button-segments path {
  stroke-width: 3;
  fill:none;
  stroke: white;

}

.segment-pulse{
	animation: segpulse 1.25s infinite;
}

.post-it{
    width: 100%;
    height: 100%;
    max-height: 250px;
    max-width: 250px;
    background-color: #FFFDD6;
    color: #000000;
    padding: 5% 5%;
    margin-right:auto !important;
    margin-left: auto !important;
    font-family: "comfortaaregular", "Indie+Flower", Gloria Hallelujah, Pacifico, Noto Sans SC, Roboto !important;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 2rem;
    /* Firefox */
    -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
    /* Safari+Chrome */
    -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    /* Opera */
    box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    -webkit-transform:rotate(-6deg);
    -o-transform:rotate(-6deg);
    -moz-transform:rotate(-6deg);
}

/*


CONTENT FLIP

 */


.content-wrapper {
  width: 80%;
  height:300px;
  padding: 4%;
  margin: 20px auto;
  background: transparent;
}

.content-wrapper.content-box {
  background: 0;
  width: 88%;
  padding: 20px 0 0 0;
}

.content-box-container {
  position: relative;
  height: 300px;
  margin: 10px 0 10px 4%;
  background: transparent;


  /* Set the depth of the elements */
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  -o-perspective: 300px;
  perspective: 300px;
}

.content-box-container:first-child {
  margin-left: 0;
}

.inner-content-box {
  width: 100%;
  height: 300px;
  position: absolute;
  cursor: pointer;
    border-radius: 50px !important;

  /* Set the transition effects */
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* front-temp will only be active until the flipper functionality is approved */
.inner-content-box .front-temp{
  display: block;
  height: 300px;
  width: 100%;
  /*background-color: RGBA(255, 255, 255, 0.8) !important;*/
  /*color: #000000;*/
  text-align: center;
  font-size: 12px;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

  box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    border: 1px solid #ffffff;
}

.inner-content-boxTitle {
  font-size: 16px;
  line-height: 1.2em;
  margin: 0;
}

.survey-content-box p{
	/*font-size: 1.5em;*/
	line-height: 30px;
}


.survey-content-box #genderInput, #agerangeInput, #postcodeInput, #emailinput{
   height: 50px;
   font-size: 14px

}

#submitBtn{
	margin-top: 5%;
	font-size:12pt;
	width:100% !important;
	height: 50px;
	background-color:#04c189;
	border-radius: 10px;
	border: 1px solid gray;
	-webkit-box-shadow: 1px 20px 50px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 20px 50px -3px rgba(0,0,0,0.75);
    box-shadow: 1px 20px 50px -3px rgba(0,0,0,0.75);

}

#submitBtn:hover{
	background-color: #194362;
	color: #ffffff;
}

.survey-content-box label{
	/*font-size: 1.5rem*/
}

.content {
  padding: 4%;
  font-weight: 100;
  text-align: center;
}

.arrowRight{
    width: 100%;
}

.outer-content-box{

    margin:auto;
    max-width: 450px;
    width: 70%;
    z-index: 2;
}

@keyframes segpulse {
  0% {
	stroke-width: 3;

  }
  100% {
	  stroke-width: 12;
	  opacity: 0;

  }
}

 @media only screen and (max-device-width: 480px) {
     .card-font {
        font-size: 65%;
    }
 }

img#gofwd {
    position: absolute;
    top: 10%;
    left: 5%;
    max-width:90%;
    max-height: 80%;
    height: auto;
    width:auto;
    z-index:1500;
    display: none;
}

@media (min-width: 320px) {
  h4.card_header { font-size: calc( 3.5vw + 20px ); }
  p.card_text { font-size: calc( 2.5vw + 10px ); }
}

@media (min-width: 960px) {
  h4.card_header { font-size: 80px; }
  p.card_text { font-size: 30px; }
}

h4.card_header {
	font-family: 'comfortaaregular', Arial;
	//color: #ffffff;
	font-weight:700;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'comfortaaregular', Arial;
}

p.card_text {
    font-family: 'comfortaaregular', Arial;
    font-weight:700;
}


.survey-content-box {
    background-color: RGBA(255, 255, 255, 0.8);
    padding: 20px;
    position: absolute;
    max-width: 500px;
    width: 70%;
    height: auto;
    border-radius: 20px;
    box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
    top: 85%;
    left: 50%;
    transform: translateY(-95%) translateX(-50%);
}

.slide-content-box {
    max-width: 450px;
    width: 70%;
    max-height:50%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    overflow: hidden;
}



/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

 html {
        font-size: 8px;
    }

    .survey-content-box {

		top: 90%;
		left: 50%;
		transform: translateY(-95%) translateX(-50%);
	}

.survey-content-box #genderInput, #agerangeInput, #postcodeInput, #emailinput{
   height: 35px;
   font-size: 14px
}

#submitBtn{
	margin-top: 5%;
	width: 50%;
	height: 30px; !important;
}

}


/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {


 html {
        font-size: 8px;
    }

    .survey-content-box {

		top: 80%;
		left: 50%;
		transform: translateY(-95%) translateX(-50%);
	}

.survey-content-box #genderInput, #agerangeInput, #postcodeInput, #emailinput{
   height: 35px;
   font-size: 14px
}

#submitBtn{
	margin-top: 5%;
	width: 50%;
	height: 30px; !important;
}


}


/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {

}


/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {

 html {
        font-size: 8px;
    }

    .survey-content-box {

		top: 70%;
		left: 50%;
		transform: translateY(-95%) translateX(-50%);
	}

.survey-content-box #genderInput, #agerangeInput, #postcodeInput, #emailinput{
   height: 35px;
   font-size: 14px
}

#submitBtn{
	margin-top: 5%;
	width: 50%;
	height: 30px; !important;
}

}