.content-slider{

aspect-ratio: 16 / 10;
width: 100%;
margin:0 auto;
position: relative;
overflow: hidden;
}

.content-slider iframe, iframe.main-video {

    border-radius: 0.5em;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
.slide-container .slider--slide{
width:100%;
height: 100%;
position: absolute;
transition: all 1s;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.content-slider .slider--nav {
height: 2em;
position: relative;
display: inline-block;
background-color: rgba(0, 0, 0, 0.8);
color:#fff;
text-align: center;
vertical-align:middle;
cursor: pointer;
border-radius:2em;
margin:0 0.5em;
}
#prev svg,#next svg{
width:100%;
fill: #fff;
}
img.slider--nav-arrow {
    padding: 0.5em;
    height: 100%;
}
#prev:hover,
#next:hover{
background-color: rgba(0, 0, 0, 0.8);
}
                     

.content-slider h4{
	color:white;
	text-align:center;
	margin:0 0 0.5em;
	padding:0;
  height:2em;
}


            #survey{
                width:100%;
               // min-width: 20em;
                height: fit-content;
              //  overflow:hidden;
                position: relative;
              //  opacity: 0;
                font-size: 0.8em;
                text-align: center;
                height:12.5em;  /* viewall = auto*/
                z-index: 10;
                transition:height 300ms;
            }

            #survey.active {
                height:14em;  /* viewall = auto*/
            }

            #survey--title{
                position: relative;
                font-size: 1.2em;
                color:white;
                margin: 0.25em 0 0.3em;

            }
            #survey--about--button {
                position: relative;
                display:inline-block;
                padding: 0;
                font-size: 1.5em;
                width: 1.5em;
                height: 1.5em;
                color: #fff;
                background-color: rgb(50, 55, 60);
                border-radius: 100em;
                border:none;
                box-shadow: none;
                text-decoration: none;
                pointer-events: all;
                cursor: pointer;
                opacity:1;
                z-index: 100;
                vertical-align: middle;
                overflow: hidden;
                transition:all 500ms;
            }
            #survey--about--button span{
                position: relative;
                top: 0em;
                transition:all 500ms;
            }

            
            #survey--about--pop {
               position: absolute;
                left: 50%;
                transform: translate(-50%,0) scale(0.8);
                top: 4rem;
                max-width: 40em;
                width: 100%;
                border-radius: 1em;
                height: fit-content;
                background: rgba(255,255,255,1);
                box-shadow: 0 0 1em rgba(0,0,0,0.2); 
                color: black;
                opacity: 0;
                pointer-events:none;
                z-index:200;
                transition:all 500ms;
            }

            
            #survey--about--pop p, #survey--about--pop h3{
           
                margin: 1em;

            }
            
            #survey.about #submit, #survey.about #survey--sliders{
                pointer-events: none !important;
              //  opacity: 0.4 !important; /* viewall active */
                //transform: scale(0.9);  /* viewall active */
            }
            #survey.about #survey--about--pop{
                opacity: 1;
                transform: translate(-50%,0) scale(1);
                pointer-events:auto;
            }

            #survey.about input, #survey.about button{
                
                pointer-events: none !important;
            }
            #survey.about #survey--about--button span{
                top: -3em;
            }


            #survey--sliders {
                height:10em;  /* viewall = auto*/
                position:absolute;
                display: block;
                margin:0 auto;
                width:100%;
                pointer-events:none;
                text-align: center;
            }

            
            .survey--question{
                width: 100%;
                height: auto; /* viewall = auto*/
              //  max-width:25rem; /* viewall = hidden*/
                display: block;
                opacity: 0;
                position:absolute;
                margin:0 auto; /* viewall = none*/
                top:0;
                left:50%;
                pointer-events: none;
                transform: translate(-50%, 100%);
                transition:all 0.6s;
                            
              /*   viewall =    float: left;*/
                background: rgba(255,255,255,0.2);
                padding: 0;
                border-radius: 1rem !important;
                z-index:10;
                
            }
            .survey--question h3{
                margin:0.6em  auto 0 auto !important;
                background: white;
                width: fit-content;
                display:inline-block;
                padding: 0.3em 0.6em;
                border-radius: 0.5em;
                font-size:1.5em;
                cursor: default;
                                
                animation-duration: 2s;
              /*  animation-name: rotatey;
                animation-iteration-count: infinite;
                animation-direction: alternate;
                animation-timing-function: ease-in-out;
*/
            }
    
            
            .survey--question.active {
                opacity: 1;
                pointer-events: all;
                transform: translate(-50%, 0);
            }
            
            .survey--question.inactive {
                opacity: 0;
                pointer-events: none;
                cursor: default;
                transform: translate(-50%, -100%);
                z-index:1;
            }



            .survey--question *{
                vertical-align: middle;
            }

            .survey--question input{
                width:60%;
                border:0;
                //max-width: 15em;

                
            }
            
            .survey--question input:focus {
                background-color: grey;
            }
            
            .survey--question input.active{
                
            }
                    
            .survey--question span{
                display: inline-block;
                text-transform:capitalize;
                font-weight: bold;
                color:white;
                opacity:0.5;
                cursor: default;
                margin:0.3em;
                font-size:1em;
            }


            .locked *{
                opacity: 0.5 !important;
                user-select: none  !important;  
                pointer-events:none;

            }

            .locked {
                background:none;
            }

            .notDone h3 {
              color:red
            }
            .done h3{

              color:green
            }
            
            .required {
                box-shadow: 0 0 0 0.3em rgba(255,0,0,0.4) inset
            }
            

            button#submit{
             //   position: relative;
                color: #fff;
                background-color: rgb(50, 55, 60);
                border-radius: 9999px;
                border:none;
                box-shadow: none;
                text-decoration: none;
                font-size: 1em;
                font-weight:bold;
                pointer-events: all;
                cursor: pointer;
                opacity:1;
                z-index: 100;
                margin:1em;
                padding:0em;
                transition:all 400ms;
            }

            button#submit:hover{

            }
            button#submit.disabled{
                opacity: 0;
                pointer-events: none;
            }
            button#submit.disabled:active{
                background:rgba(255,0,0,0.5);
              //  transform: translateY(0.1em);
            }
            button#submit:active{
             //   transform: scale(0.9);
                background-color: rgb(0, 0, 0);
                opacity:1;
            }



        #progress {
           // position: relative;
           
            z-index: 1000;
            background: rgba(0,0,0,1);
            background-color: white;
            background: rgba(255,255,255,0.5);
            opacity: 0;
            margin:0.5em auto 0 auto;
            z-index: 1; 
            clip-path: inset(0 round 3em);
            cursor: default;
            //display:none;
        }

        #progress, button#submit{
          
          height:2.5em;
          width:7em;
          font-size:1.3em;
          
        }
        #progress span {
            display: block;
            height: 100%;
            background-color: lightgreen;
        
           position: relative;
            overflow: hidden;

            width: 0%;
            transition: all 666ms;
        }
        
        #progress p{
            font-size: 0.8rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: 0;
            transform: translate(-50%,-50%);
            color: white;
            user-select: none;
        }

        
        .survey--submit-progress {
              position:absolute;
              width:100%;
              height:3em;
              bottom:0;
              pointer-events: none;
              opacity:0;
            transition: all 666ms;
            }
            
        #survey.active .survey--submit-progress {
          pointer-events: auto;
          opacity:1;
         
        }
          .survey--submit-progress > div, .survey--submit-progress button{
              position: absolute;
              left: 50%;
              transform: translate(-50%,-50%);
              top: 50%;
              margin:0 !important;
            }
    



          #survey.hidden {
           //   height: 5em !important;
            }

            #survey #survey--sliders, #survey #submit{
               // opacity: 0 !important;
               // pointer-events: none  !important; 
                margin-top: 0;
            }
            
            #survey.complete #survey--sliders, #survey.complete #submit{
                opacity: 0 !important;
                pointer-events: none  !important; 
              margin-top: -35rem;
            }
            
            #survey.complete #survey--title{
              opacity: 0 !important;
              pointer-events:none  !important;
            }
          
            #survey.hidden #submit, #survey.hidden #survey--sliders, #survey.hidden #survey--title{
                display:none !important;
            }

        @keyframes moveUp {
            0% {
                transform: translate(0%, 80%) scale(0.8); 
                opacity: 0;
        
            }
            30% {
                transform: translate(0%, 0%) scale(2); 
                opacity: 1;

            }
            
          80% {
            
            transform: translate(0%, -10%) scale(2); 
            opacity: 1;
          }
        
            100% {
                transform: translate(0%, -70%) scale(1.2);
                opacity: 0;
            }
          }


        #thanks{
         /*   position:absolute;
         top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
           */
            opacity: 0;
            pointer-events: none;
            font-size: 2em;
            margin: 0 auto;
            width: fit-content;
            text-align: center;
            height: fit-content;
            color:white;
            position: relative;
            padding:1em;
            top: 0;
            left: 0;

        
        }

        #thanks.active{
            animation:moveUp 0.9s
        }

        #thanks.end{
            font-size:1.5em;
          //  display:block;
            opacity: 1;
            //transform: translate(-50%, 0%) scale(0.5); 
        }

        input[type=range] {
            --bgPos: 0%;
           background-color: transparent;
            -webkit-appearance: none;
            cursor: pointer;
            padding: 4rem 0 1rem 0;
            margin-top: -3rem;
            position: relative;
            z-index: 199;
          }
          
          input[type=range]:focus {
            outline: none;
           background-color: transparent;
          }
          .survey--question:has(input[type=range]:focus) {
          /*  outline: 0.5em solid white;*/
          }
          input[type=range]::-webkit-slider-runnable-track {
            transition: all 500ms;
            -webkit-appearance: none;
            background:rgba(255,255,255,0.7);
            //background:rgba(0,0,0,0.3);
       //     background: linear-gradient(-45deg, rgba(0, 0, 0.3), rgba(0, 0, 0,0.3));
        //    background: linear-gradient(-45deg, rgba(231, 60, 126, 0.8), rgba(35, 166, 213,00.5));
            background:linear-gradient(90deg, rgba(35,166,213,1) 0%, 
                                              rgba(35,166,213,1) 20%, 
                                              rgba(80,142,193,1) 21%, 
                                              rgba(80,142,193,1) 35%, 
                                              rgba(111,125,179,1) 36%, 
                                              rgba(115,123,177,1) 50%, 
                                              rgba(144,107,164,1) 51%, 
                                              rgba(148,105,162,1) 63%, 
                                              rgba(178,89,149,1) 64%, 
                                              rgba(182,87,147,1) 77%, 
                                              rgba(207,73,136,1) 78%, 
                                              /*rgba(209,72,135,1) 100%, */
                                              rgba(231,60,126,1) 100%);
            border: 0px solid rgba(1, 1, 1, 0.5);
            border: 0;
            border-radius:0.5em;
            width: 100%;
            height: 1em;
            cursor: pointer; 
          //  opacity: 0.5;
            
          
          }

          .survey--question.poked input[type=range]::-webkit-slider-runnable-track {
          }
          input[type=range]::-webkit-slider-thumb {
            margin-top: 0;
            width: 0;
            height: 0;
            background: rgba(255,255,255,0.4);
            border: 0;
            border-radius: 50px;
            cursor: pointer;
            -webkit-appearance: none;
          }
          .poked input[type=range]::-webkit-slider-thumb {
            margin-top: -0.5em;
            background: #ffffff;
            background: linear-gradient(-90deg, rgba(231, 60, 126, 1), rgba(35, 166, 213,1));
            background-size:600%;
            background-position-x: var(--bgPos);
            width: 2em;
            height: 2em;
            box-shadow:0 0 0.3em  rgba(0,0,0,0.5);
            
          }
          input[type=range]:focus::-webkit-slider-runnable-track {
        //    background: rgba(0, 0, 0, 0.3);  

       //     background: linear-gradient(-45deg, #e73c7e, #23a6d5);
              opacity: 1;
          }
          input[type=range]::-moz-range-track {
           // background: rgba(0, 0, 0, 0.3);

            border: 0px solid rgba(1, 1, 1, 0);
            border-radius:0.5em;
            border: 0;
            width: 100%;
            height: 9.5px;
            cursor: pointer;
          }
          input[type=range]::-moz-range-thumb {
            margin-top: -0.5em;
            background: #ffffff;
            background: linear-gradient(-90deg, rgba(231, 60, 126, 1), rgba(35, 166, 213,1));
            background-size:600%;
            background-position-x: var(--bgPos);
            width: 2em;
            height: 2em;
            box-shadow:0 0 0.3em  rgba(0,0,0,0.5);
          }
          input[type=range]::-ms-track {
            background: transparent;
            border-color: transparent;
            border-width: 11.25px 0;
            border-radius:0.5em;
            color: transparent;
            width: 100%;
            height: 9.5px;
            cursor: pointer;
          }
          input[type=range]::-ms-fill-lower {
            background: #000000;
            border: 0px solid rgba(1, 1, 1, 0);
            border: 0;
          }
          input[type=range]::-ms-fill-upper {
            background: rgba(0, 0, 0, 0.3);
            border: 0px solid rgba(1, 1, 1, 0);
            border: 0;
          }
          input[type=range]::-ms-thumb {
            margin-top: -0.5em;
            background: #ffffff;
            background: linear-gradient(-90deg, rgba(231, 60, 126, 1), rgba(35, 166, 213,1));
            background-size:600%;
            background-position-x: var(--bgPos);
            width: 2em;
            height: 2em;
            box-shadow:0 0 0.3em rgba(0,0,0,0.3);
            /*Needed to keep the Edge thumb centred*/
          }
          input[type=range]:focus::-ms-fill-lower {
            background: rgba(0, 0, 0, 0.3);
          }
          input[type=range]:focus::-ms-fill-upper {
            background: rgba(0, 0, 0, 0.3);;
          }
          /*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
          how to remove the virtical space around the range input in IE*/
          @supports (-ms-ime-align:auto) {
            /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
            input[type=range] {
              margin: 0;
              /*Edge starts the margin from the thumb, not the track as other browsers do*/
            }
          }
          
          
          #survey.viewAll {
            display: block;
          //  overflow:auto;
            
            opacity: 1;
          }
          
          #survey.viewAll #survey--sliders {
          //  height:auto;
          //  overflow:auto;
          }
          #survey.viewAll .survey--question {
                transform: translateY(0) !important;
                opacity: 1 !important;
                position: relative;
                margin: 1em auto;
                pointer-events: auto;
              padding: 0.1rem 0 0;
               max-width:25rem; /* viewall = hidden*/
          }
          
          
          #survey.viewAll #progress {
            display: none;

          }
          #survey.viewAll #submit {
                opacity: 1;
                pointer-events: all;
          }


        .is-type-video iframe {
            border-radius: 0.8em;
        }

        
        body.single main>.entry-title {
          text-align:center;
          color:white;
          padding-top:0;
          
        }

        @media only screen and (min-width: 1000px)  {
            
            #survey.viewAll .survey--question {            
                    width: 48% !important;
                    float: left;
                    margin:0.8% !important   ;
                } 
            #survey {
                height:10em;  /* viewall = auto*/
            }
            #survey.active {
                height:12em;  /* viewall = auto*/
            }
                
            .survey--question {
              max-width:25em;
                font-size: 0.8em;
            }
            
            .survey--question span{
                font-size:1em;
            }
            #survey--about--pop{
              top:2.2em;
            }

            #progress, button#submit{
              font-size: 0.8em;
            }
        
        .survey--submit-progress {
              height:3em;
            }
          #survey--sliders {
              height:6.5em;
            }
           #survey--title{
                font-size: 0.9em;
                color:white;
                margin: 0.5em 0;
            }
          }
        @media only screen and (min-width: 1500px)  {
            #survey {
              //  font-size: 0.66em;

            }
           #survey--title{
          //    font-size: 1.3em;
            }

            #survey.viewAll .survey--question h3{
          //    font-size:1.2em;
            }

        }