@font-face {
    font-family: 'Montserrat Bold';
    src: url("Montserrat-Bold.ttf") format("truetype");
}
@font-face {
    font-family: 'Montserrat Light';
    src: url("Montserrat-Light.otf") format("opentype");
}

@font-face {
    font-family: 'Trim Poster Lean';
    src: url("TrimPoster-Lean.otf") format("opentype");
}
@font-face {
    font-family: 'Trim Poster Skinny';
    src: url("TrimPoster-Skinny.otf") format("opentype");
}
@font-face {
    font-family: 'Trim Poster Slim';
    src: url("TrimPoster-Slim.otf") format("opentype");
}
@font-face {
    font-family: 'Trim Poster Slender';
    src: url("TrimPoster-Slender.otf") format("opentype");
}
@font-face {
    font-family: 'Trim Poster Fat';
    src: url("TrimPoster-Fat.otf") format("opentype");
}
@font-face {
    font-family: 'Trim Poster Hefty';
    src: url("TrimPoster-Hefty.otf") format("opentype");
}
@font-face {
    font-family: 'Trim Poster Average';
    src: url("TrimPoster-Average.otf") format("opentype");
}

:root{
    --pink: #FF004B;
    --blue: #19B7E6;
    --darkblue: #0777B6;
    --white: #ffffff;
}

.pinktext{
    color: var(--pink);
}

h1{ 
    font-family: 'Trim Poster Fat';
    text-transform: uppercase;
    font-size: 106px;
    line-height: 0.8em;
    font-weight: 400;
}
h1 span{
    font-family: 'Trim Poster Hefty';
}
h1 span.thinner{
    font-family: 'Trim Poster Lean';
}
h2{ 
    font-family: 'Trim Poster Average';
    text-transform: uppercase;
    font-size: 42px;
    line-height: 0.9;
    font-weight: 400;
    margin-top: 0px;
}
a {
  color: #fff;
}

body{
    background-color: #19B7E6;
    background-image: url('bg.png');
    background-position: 50%;
    background-size: cover;
    color: #ffffff;
    overflow: hidden;
    height: 100vh;
    min-height: -webkit-fill-available;
}
body p, body h3{
    font-family: 'Trim Poster Slender';
    font-size: 44px;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 400;
}

h3 {
    margin: 0px;
}
.montserrat {
    margin: 0px;
    font-family: 'Montserrat Light';
    font-size: 24px;
    letter-spacing: 1px;
}
.c_screen {
    height: 100%;
    /*background-color: #19B7E6;
    background-image: url('bg.png');*/
    background-color: transparent;
}

.c_screen[data-name="Intro"]{
    background-color: transparent;
}

.c_cont {
  /*min-height: calc(100vh - 80px);*/
  min-height: initial !important;
  height: calc(100%);
  overflow-y: auto;
}
.c_cent {
  padding-top: 100px;
}

body[data-sname][data-pid] .logo{
  transition: 0.8s all ease-out;
  margin-left: 53px;
}
body[data-sname="Intro"] .logo,
body[data-sname="Intro"][data-pid] .logo,
body[data-sname="Data Collection"][data-pid] .logo,
body[data-sname="Generating"][data-pid] .logo
{
     /* top: 150px;
      transform: translateX(-50%) scale(1);*/
      margin-left: 0px;
      transition: 0s all ease-out;
}



.logo {
  position: fixed;
  z-index: 100;
  top: 100px;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  transition: 0.8s all ease-out;
}
body[data-sname="Data Collection"][data-pid] .logo{
  transition: 0.8s all ease-out;  
}



button, input[type=submit] {
  background-color: var(--blue);
  border: none;
  padding: 8px 50px;
  border-radius: 30px;
  color: var(--white);
  font-family: 'Montserrat Bold';
  text-transform: uppercase;
  cursor: pointer;
  font-size: 20px;
  margin-top: 20px;
}

.cscreen[data-name="Welcome"] button{
    margin-top: 20px;
}

button:hover, input[type=submit]:hover{
    background-color: var(--darkblue);
    color: #ffffff;
}

body[data-sname="Intro"] button,
body[data-sname="Data Rollection"] input[type=submit]{
      background-color: var(--white);
      color: var(--blue);
}
body[data-sname="Intro"] button:hover,
body[data-sname="Data Rollection"] input[type=submit]:hover{
      background-color: var(--darkblue);
      color: var(--white);
}

body[data-sname="Intro"] .sponsor{
    background-image: url('sponsor.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    width: 125px;
    height: 190px;
    position: fixed;
    bottom: 20px;
    left: 20px;
}
body[data-sname="Intro"] .qrcode{
    background-image: url('qrcode.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    width: 195px;
    height: 190px;
    position: fixed;
    bottom: 50px;
    right: 50px;
}

.share .sponsor{
    background-image: url('sponsor.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    width: 125px;
    height: 190px;
    position: fixed;
    bottom: 20px;
    left: 20px;
}

button.back_button {
  bottom: 50px;
  left: 50px;
}

.subtitle{
    font-family: 'Trim Poster Slender';
    text-transform: uppercase;
    font-size: 34px;
    letter-spacing: 0.16em;

}

input.input_text {
  border-radius: 30px;
  padding: 10px 20px;
  width: 440px;
  margin-bottom: 10px;
  font-family: 'Montserrat Bold';
  text-transform: uppercase;
}

.radiobuttonholder .holder.radiobutton-grid .image-checkbox {
  border-radius: 100%;
  width: 130px;
  height: 130px;
  background-color: #ffffff21;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0px;
  margin-right: 0px;
}
    .radiobuttonholder .holder.radiobutton-grid .image-checkbox img {
      max-width: 95px;
    }
    .radiobuttonholder .holder.radiobutton-grid .image-checkbox input[type="radio"]:hover {
      border-color: #045DA5;
      border-radius: 100%;
    }
    .radiobuttonholder .holder.radiobutton-grid .image-checkbox-checked, .radiobuttonholder .holder.radiobutton-grid .image-checkbox input[type="radio"]:checked {
      border-color: #FF004B;
      border-radius: 100%;
    }
    span[data-valmsg-for]{ display: none;}
    span[data-valmsg-for].field-validation-error {
      display: block;
      color: #FF004B;
      font-family: "Montserrat Light";
      text-transform: uppercase;
      margin-top: 15px;
      margin-bottom: 15px;
    }

.radiobuttonholder .holder.radiobutton-grid,
.checkboxholder .holder.checkboxholder-grid {
    grid-gap: 15px 30px;
}
.checkboxholder, .radiobuttonholder {
  max-width: 780px;
}

.radiobuttonholder .holder.radiobutton-grid .image-checkbox + label {
    display: none;
}
.holder.radiobutton-grid .image-checkbox input[type="radio"]:checked:before, .holder.radiobutton-grid .image-checkbox input[type="radio"]:checked:after {
    content: initial;
}

.holder.radiobutton-list .image-checkbox input[type="radio"]:checked:before{
    background-color: #FF004B;
    right: initial;
    left: -40px;
    top: 14px;
}
.holder.radiobutton-list .image-checkbox input[type="radio"]:checked:after {
    right: initial;
    left: -36px;
    top: 18px;
}

input[type="search"] {
  background-color: #000026;
  border: none;
  border-radius: 30px;
  padding: 15px 20px;
  width: 360px;
  margin-bottom: 10px;
  font-family: 'Montserrat Bold';
  text-transform: uppercase;
  width: 100%;
  background-image: url('search.png');
    background-position: 15px 50%;
    background-repeat: no-repeat;
    color: #ffffff;
    padding-left: 50px;
}
input[type="search"]:placeholder, input[type="search"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder {
  color: #393951;
}
.holder.radiobutton-list {
  max-height: 40vh;
  overflow-y: scroll;
  width: calc(100% + 100px);
  margin-left: -100px;
}
.holder.radiobutton-list .image-checkbox {
  width: 100%;
  text-align: left;
  border-radius: 0px;
  border: none;
  border-bottom: 1px solid #17153F;
  margin: 0px;
  padding: 0px;
}
.holder.radiobutton-list .image-checkbox img {
  height: 40px;
  object-fit: contain;
  width: 50px;
  padding: 5px 10px;
}
.holder.radiobutton-list > div {
  margin-left: 100px;
  background-color: #000026;
}
.holder.radiobutton-list > div > div {
    position: relative;
}
.holder.radiobutton-list label label {
  font-family: 'Trim Poster Average';
  font-size: 25px;
  text-transform: uppercase;
  vertical-align: top;
  padding-top: 11px;
  display: inline-block;
  padding-left: 15px;
}
.holder.radiobutton-list .info {
  position: absolute;
  top: 16px;
  right: 40px;
  font-size: 22px;
  font-family: 'Montserrat Bold';
}

.holder.radiobutton-list .image-checkbox input[type="radio"]:checked{
    border: none;
}
.holder.radiobutton-list .image-checkbox input[type="radio"]:checked + label,
.holder.radiobutton-list .image-checkbox input[type="radio"]:checked + label + span{
    color: #FF004B;
}

.inputholder .selectList input {
  background-color: #fff;
  border-radius: 18px 0 0 18px;
  padding: 10px 20px;
  width: 391px;
  margin-bottom: 10px;
  font-family: 'Montserrat Bold';
  text-transform: uppercase;
  line-height: 8px;
  border: none;
  font-size: 13px;
  margin-bottom: 0px;
}
.inputholder .selectList.opened input {
  border-radius: 18px 0 0 0px;
}
.inputholder .selectList .buttonholder button {
  padding: 6px 19px;
  border-radius: 0px 18px 18px 0px;
  background-color: #fff;
}
.inputholder .selectList .buttonholder button span {
  font-size: 13px;
}
.inputholder .selectList.opened .buttonholder button {
  padding: 6px 19px;
  border-radius: 0px 18px 0px 0px;
}
.selectList .selectListDropdown{
    background-color: #ffffff;
}
.selectList .selectListDropdown ul li {
  color: #151039;
}
.selectList .selectListDropdown ul li:hover {
  color: #045DA5;
}
.dropdownholder {
  margin-bottom: 10px;
}
.inputholder .dropdownholder .selectList input {
  color: #000;
}
input.input_text.input-validation-error {
  color: #3e0000;
  background-color: #ff9c9c;
}
input.input_text.input-validation-error + .field-validation-error{
    display: none;
}
input[type="text"] + label.error {
  display: none;
}
.inputholder input.halfinput {
  margin-left: 10px; width: 194px;
}
.inputholder input.halfinput:first-of-type {
  margin-left: 0px;
}

input[type="checkbox"] {
  vertical-align: top;
}
.label_singlecheckbox {
  width: 400px;
  margin: auto;
  font-size: 12px;
  font-family: 'Montserrat Light';
  margin-bottom: 15px;
}
.label_singlecheckbox input[type="checkbox"] {
  vertical-align: top;
}
.terms{
    width: 300px;
    display: inline-block;
    text-align: left;
    font-size: 12px;
    font-family: 'Montserrat Light';
    margin-left: 35px;
}
.label_singlecheckbox label {
  width: 300px;
  display: inline-block;
  text-align: left;
}

span[data-valmsg-for].post-content.field-validation-error{ display: none; }

span[data-valmsg-for].pre-content.field-validation-error {
  font-family: "Montserrat Bold";
}
.label_singlecheckbox label {
  font-family: 'Montserrat Light';
}

.header.radiobutton-grid {
  display: none;
}

.header.radiobutton-list {
  background-color: #17153F;
  text-align: left;
  padding: 10px 20px;
}

.header_image::before {
  content: 'Team';
  font-family: 'Montserrat Bold';
  text-transform: uppercase;
}
.header_info::before {
  content: '2021 Tries';
  font-family: 'Montserrat Bold';
  text-transform: uppercase;
  float: right;
}

body.gov_doc {
  overflow-y: auto;
}
.gov_holder {
  background-color: rgba(0, 73, 144, 0.8);
  margin: 40px;
  padding: 40px;
  min-height: calc(100vh - 160px);
}
.gov_holder > div {
  max-width: 50%;
  margin: 0 auto;
}

iframe.sharescreen{
    border: none;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    position: fixed;
    top: 0px;
    left: 0px;
}
body[data-sname="Share Screen"] .logo {
  opacity: 0;
}
input[type="checkbox"].input-validation-error + label {
  color: #FF004B;
}


.viewimagewindow{
    text-align: center;
}

.viewimagewindow img.shareholder {
  max-height: 80vh;
  max-width: 100%;
}
.viewimagewindow p{
    font-family: 'Montserrat Light';
}


.dualRadioButtonHolder [data-val]{
    background-size: cover;
}

.dualRadioButtonHolder [data-val="dragons"]{
    background-image: url('dragons_bg.png');
}
.dualRadioButtonHolder [data-val="toulouse"]{
    background-image: url('toulouse_bg.png');
}
.dualRadioButtonHolder [data-val="trinity"]{
    background-image: url('trinity_bg.png');
}
.dualRadioButtonHolder [data-val="tigers"]{
    background-image: url('tigers_bg.png');
}
.dualRadioButtonHolder [data-val="rhinos"]{
    background-image: url('rhinos_bg.png');
}
.dualRadioButtonHolder [data-val="giants"]{
    background-image: url('giants_bg.png');
}


.dualRadioButtonHolder [data-val="wolves"]{
    background-image: url('wolves_bg.png');
}
.dualRadioButtonHolder [data-val="reddevils"], .dualRadioButtonHolder [data-val="red devils"]{
    background-image: url('reddevils_bg.png');
}
.dualRadioButtonHolder [data-val="hullkr"], .dualRadioButtonHolder [data-val="robins"]{
    background-image: url('robins_bg.png');
}
.dualRadioButtonHolder [data-val="hullfc"],.dualRadioButtonHolder [data-val="hull fc"]{
    background-image: url('hullfc_bg.png');
}
.dualRadioButtonHolder [data-val="saints"]{
    background-image: url('saints_bg.png');
}
.dualRadioButtonHolder [data-val="warriors"]{
    background-image: url('warriors_bg.png');
}


.dualRadioButtonHolder {
    width: calc(100vw - 60px);
    height: calc(100vh - 60px);
    padding: 30px;
    position: absolute;
    top: 0px;
    left: 0px;
}
    div .dualRadioButtonHolder label img {
      height: 350px;
      max-width: initial;
      margin-right: 50%;
    }
     div .dualRadioButtonHolder label + label img {
      margin-right: 0%;
      margin-left: 8%;
    }
    .dualRadioButtonHolder > label {
      /*width: 50%;*/
      display: inline-block;
      cursor: pointer;
      height: calc( 100% - 60px);
      position: absolute;
      left: 0px;
      top: 0px;
      margin: 30px 0 30px 30px;
      display: flex;
        align-items: center;
        justify-content: center;
        width:52.2%;
        width: calc(100% - 60px);
    }
    .dualRadioButtonHolder > label + label{
      left: 44%;  
      margin: 30px 30px 30px 0px;
      width: calc(56% - 30px);
    }
    .dualRadioButtonHolder > label label {
        display: none;
    }
    
    .dualRadioButtonHolder.selectionmade [data-val]{
        transition: filter 0.6s ease-in-out;
        filter: saturate(0.3);
    }
    .dualRadioButtonHolder.selectionmade [data-val].selected{
        filter: saturate(1);
    }
    
    .dualRadioButtonHolder input[type="radio"] + label + img{
        transition: all 0.6s ease-in-out;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .dualRadioButtonHolder.selectionmade input[type="radio"] + label + img{
        opacity: 0.4;
    }
    .dualRadioButtonHolder input[type="radio"]:checked + label + img {
      border: none;
      transform: scale(1.3);
      opacity: 1;
    }

.top {
  position: absolute;
  z-index: 10;
  top: 240px;
  width: 100%;
  left: 0px;
  opacity: 0;
  transition: 0.6s opacity ease-in-out;
}
.currentscreen .top{
    opacity: 1;
}

.bottom {
  position: absolute;
  z-index: 10;
  bottom: 60px;
  width: 100%;
  left: 0px;
  pointer-events: none;
  transition: 0.6s opacity ease-in-out;
}
.currentscreen .top{
    opacity: 1;
}


.bottom input, .bottom button{
    pointer-events: all;
}

    .dualRadioButtonHolder span[data-valmsg-for].field-validation-error {
      z-index: 5;
      position: absolute;
      width: 100%;
      top: 67%;
      color: white;
      left: 0px;
    }


.c_screen[data-name="Data Collection"],
.c_screen[data-name="Generating"]{
    background-color: transparent;
}

.dualRadioButtonHolder span[data-valmsg-for].field-validation-error > span {
  background-color: var(--pink);
  padding: 10px 30px;
  border-radius: 20px;
  font-weight: 700;
}
.broadcasterlogo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


.label_singlecheckbox label.label_singlecheckbox_custom {
  width: auto;
  vertical-align: top;
  position: relative;
}
.label_singlecheckbox label.label_singlecheckbox_custom input[type="checkbox"]{
    opacity: 0;
}
.label_singlecheckbox label.label_singlecheckbox_custom .checkmark:after {
  content: '';
  width: 24px;
  height: 20px;
  background-image: url('checkbox_both.png');
  background-position: 0% 0%;
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 0px;
}
.label_singlecheckbox label.label_singlecheckbox_custom input:checked + .checkmark:after {
  background-position: 100%;
}
.inputholder + .label_singlecheckbox {
  margin-top: 40px;
}


.c_screen[data-name="Generating"] {
  opacity: 0;
}
.c_screen[data-name="Generating"].currentscreen {
  opacity: 1;
  transition: opacity ease-in-out 1.6s;
}


/*Most tablets*/
@media (max-width: 1080px) {
    
    /*body:after{
        content: 'max-width: 900px';
        position: fixed;
        top:0px;
        left:0px;
        background-color: orange;
    }*/
    
    .logo {
      max-width: 60vw;
      top: 60px;
    }
    h1 {
      font-size: 56px;
    }
    h2{
        font-size: 36px;
    }
    .subtitle {
        font-size: 28px;
    }
    .radiobuttonholder .holder.radiobutton-grid, .checkboxholder .holder.checkboxholder-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, 100px);
    }
    .radiobuttonholder .holder.radiobutton-grid, .checkboxholder .holder.checkboxholder-grid {
      grid-gap: 15px 50px;
    }
    .radiobuttonholder .holder.radiobutton-grid .image-checkbox {
      width: 100px;
      height: 100px;
    }
    .image-checkbox {
        min-width: 100px;
    }
    .radiobuttonholder .holder.radiobutton-grid .image-checkbox img {
      max-width: 75px;
    }
    .checkboxholder, .radiobuttonholder {
        width: auto;
    }
    .top {
      top: 140px;
    }
}


/*Small height desktop devices*/
@media (max-height: 920px) and (min-width: 480px) {
    /*body:after{
        content: '(max-height: 920px) and (min-width: 480px)';
        position: fixed;
        top:0px;
        left:0px;
        background-color: blue;
    }*/
    
    .logo {
        top: 30px;
        transform: translateX(-50%) scale(0.6);
    }
    body[data-sname="Welcome"] .logo {
        top: 90px;
    }
    .radiobuttonholder .holder.radiobutton-grid .image-checkbox {
      width: 100px;
      height: 100px;
    }
    .image-checkbox {
        min-width: 100px;
    }
    .radiobuttonholder .holder.radiobutton-grid .image-checkbox img {
      max-width: 75px;
      height: 70px;
    }
    .holder.radiobutton-list {
        max-height: 30vh;
    }
    .radiobuttonholder .holder.radiobutton-grid, .checkboxholder .holder.checkboxholder-grid {
      grid-gap: 5px 30px;
    }
    .radiobuttonholder .holder.radiobutton-grid, .checkboxholder .holder.checkboxholder-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, 115px);
    }
    .gov_holder > div {
      max-width: 100%;
    }
    .top {
      top: 140px;
    }
    body .bottom p {
        margin: 0px;
    }
    body[data-sname][data-pid] .logo {
      margin-left: 41px;
    }
    .broadcasterlogo {
        width: 90px;
    }
}

/*Most phones*/
@media (max-width: 480px) {
    /*body:after{
        content: 'max-width: 480px';
        position: fixed;
        top:0px;
        left:0px;
        background-color: aqua;
    }*/
    body{
        height: initial;
    }
    body[data-sname="Welcome"] .logo {
      max-width: 60vw;
      top: 70px;
    }
    body[data-pid] .logo{
      max-width: 60vw;  
      transform: translateX(-50%) scale(1);
      top: 50px;
    }
    h1{
        font-size: 41px;
    }
    h2{
        font-size: 30px;
    }
    
    h1 .w_3 {
      font-size: 178px;
      line-height: 0.8em;
    }
    h1 .w_4 {
      font-size: 78px;
      display: block;
      line-height: 0.6em;
    }
    .w_5, .w_6 {
      font-size: 101px;
      line-height: 0.9em;
    }
    
    .subtitle {
        font-size: 26px;
    }
    .c_cont {
      /*min-height: calc(100vh - 40px);*/
      height: calc(100% - 40px);
      margin: 20px;
    }
   .share .c_cont {
      display: block;
    }
    .c_cent {
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 0px;
    }
    .radiobuttonholder .holder.radiobutton-grid, .checkboxholder .holder.checkboxholder-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, 65px);
    }
    .radiobuttonholder .holder.radiobutton-grid, .checkboxholder .holder.checkboxholder-grid {
      grid-gap: 15px 20px;
    }
    .radiobuttonholder .holder.radiobutton-grid .image-checkbox {
      width: 70px;
      height: 70px;
    }
    .image-checkbox {
        min-width: 70px;
    }
    .radiobuttonholder .holder.radiobutton-grid .image-checkbox img {
        max-width: 45px;
        height: 50px;
    }
    /*.image-checkbox img{
        padding: 0 12px;
    }*/
    .checkboxholder, .radiobuttonholder {
        width: auto;
    }
    
    button, input[type="submit"] {
      padding: 6px 40px;
      font-size: 17px;
    }
    input[type="search"] {
        padding: 10px 50px;
    }
    .holder.radiobutton-list label label {
        font-size: 20px;
    }
    .holder.radiobutton-list .image-checkbox img {
        height: 30px;
        width: 30px;
    }
    button.back_button {
      bottom: 30px;
      left: 30px;
      font-size: 10px;
    }
    .holder.radiobutton-list .image-checkbox input[type="radio"]:checked::before {
        left: -25px;
    }
    .holder.radiobutton-list .image-checkbox input[type="radio"]:checked::after {
      left: -21px;
    }
    .inputholder input.halfinput {
      width: 100%;
    }
    input.input_text {
      width: 100%;
    }
    .inputholder .selectList input {
        width: 200px;
    }
    .label_singlecheckbox {
        width: 100%;
    }
    .label_singlecheckbox label {
        width: 60%;
    }
    .terms {
        width: calc(100% - 35px);
    }
    .inputholder input.halfinput{
        margin-left: 0px;
    }
    .inputholder .selectList .buttonholder button {
        padding: 8px 19px;
    }
    .inputholder input.halfinput {
      width: 248px;
    }
    input.input_text {
      width: 248px;
    }
    h2 br {
      display: none;
    }

    .gov_holder > div {
      max-width: 100%;
    }
    .c_screen[data-name="Enter Details"] h2 {
      margin-top: 80px;
    }
    .c_screen[data-name="Enter Details"] .submit_button {
      margin-bottom: 50px;
    }

    .c_screen[data-name="Enter Details"] button.back_button {
      display: none;
    }
    body[data-sname][data-pid] .logo {
      transition: 0.8s all ease-out;
      margin-left: 17px;
    }
    body[data-sname="Data Collection"][data-pid] .logo{
      margin-left: 0px;  
    }
    .montserrat {
        font-size: 18px;
    }
    body p, body h3 {
      font-size: 26px;
      letter-spacing: 4px;
    }
    body .bottom p {
        font-size: 17px;
        margin: 0px;
    }
    div .dualRadioButtonHolder label img {
      max-width: 40vw;
      height: auto;
    }
    .top {
        top: 110px;
    }
    .dualRadioButtonHolder {
      width: calc(100vw - 30px);
      height: calc(100vh - 88px);
      padding: 15px;
    }
    .dualRadioButtonHolder > label {
        height: calc( 100% - 30px);
        margin: 15px 0 15px 15px;
        /*width: calc(50% - 15px);*/
    }
    .dualRadioButtonHolder input[type="radio"]:checked + label + img{
        transform: scale(1.1);
    }
    .dualRadioButtonHolder > label + label {
      margin: 15px 15px 15px 0px;
      width: calc(57% - 15px);
      left: 42%;
    }
    div .dualRadioButtonHolder label + label img {
      margin-left: 18%;
    }
    
    .broadcasterlogo {
      position: absolute;
      top: 65%;
      right: 30px;
      width: 100px;
    }
    .broadcasterlogo {
        width: 70px;
    }
    .dualRadioButtonHolder span[data-valmsg-for].field-validation-error {
        top: 74%;
        z-index: 11;
    }
}



@media (max-width: 400px) {

    body[data-sname="Welcome"] .logo,
    body[data-pid] .logo{
      max-width: 60vw;
      top: 25px;
    }
    .top {
        top: 60px;
    }
    .broadcasterlogo {
        width: 60px;
    }
    
    
    h1{
        font-size: 35px;
    }
    h2{
        font-size: 26px;
    }
    
    .w1, .w2{
        font-size: 35px;
    }
    
    h1 .w_3 {
      font-size: 149px;
      line-height: 0.8em;
    }
    h1 .w_4 {
      font-size: 65px;
      display: block;
      line-height: 0.6em;
    }
    .w_5, .w_6 {
      font-size: 84px;
      line-height: 0.9em;
    }
    
    .subtitle {
        font-size: 21px;
    }
    .inputholder input.halfinput {
      width: 188px;
    }
    input.input_text {
      width: 188px;
    }
    .inputholder .selectList input {
      width: 140px;
    }
    button, input[type="submit"] {
      padding: 6px 20px;
      font-size: 15px;
    }
    .selectList {
        width: 50%;
    }
    .inputholder .selectList .buttonholder button {
      padding-top: 9px;
    }
    
    .radiobuttonholder .holder.radiobutton-grid .image-checkbox {
      width: 50px;
      height: 50px;
    }
    .image-checkbox {
        min-width: 50px;
    }
    .radiobuttonholder .holder.radiobutton-grid .image-checkbox img {
        max-width: 35px;
        height: 30px;
    }
    .radiobuttonholder .holder.radiobutton-grid, .checkboxholder .holder.checkboxholder-grid {
        grid-template-columns: repeat(auto-fill, 40px);
    }
    .holder.radiobutton-list label label {
      font-size: 16px;
    }
    .holder.radiobutton-list label label {
      padding-top: 13px;
    }
    .holder.radiobutton-list .info {
      top: 13px;
      font-size: 16px;
    }

    
}


/*****************share*********************/


body.share .c_cent {
  padding-top: 70px;
  
}
body.share .logo {
  top: 50px;
}


body.share img.shareholder {
  max-height: 45vh;
  margin-top: 30px;
  max-width: 40vw;
  border: 4px solid #fff;
}
.popup.show{
    font-family: 'Montserrat Light';
    background-color: #004990;
    border-radius: 30px;
}
.popup p {
  font-size: 30px;
  font-family: 'Montserrat Light';
  text-transform: initial;
  letter-spacing: 0px;
}
body.share .popup a {
  font-family: 'Montserrat Light';
}
.socialshareswitch img {
  height: 50px;
  filter: brightness(10);
  padding: 0 20px;
}
.socialshareswitch.selected img{
  filter: brightness(1);  
}

body.share .popup a {
  background-color: #ffffff;
  color: #19b7e6;
  text-decoration: none;
  border-radius: 30px;
  padding: 10px 30px;
  font-size: 20px;
  text-transform: uppercase;
  margin-top: 20px;
  display: inline-block;
}
a.socialsharebutton {
  background-color: #FFFFFF;
  text-decoration: none;
  border-radius: 30px;
  padding: 10px 20px;
    padding-left: 20px;
  padding-left: 50px;
  font-size: 20px;
  font-family: 'Montserrat Light';
  text-transform: uppercase;
  position: relative;
  color: #19b7e6;
  font-weight: bold;
}

a.socialsharebutton:before{
    content: '';
    width: 30px;
    height: 30px;
    background-color: #19b7e6;
    display: block;
    position: absolute;
    top: 7px;
    left: 7px;
    border-radius: 20px;
}
a.socialsharebutton:after{
    content: '';
    background-image: url('download.png');
    background-size: contain;
    width: 20px;
    height: 19px;
    display: block;
    position: absolute;
    top: 14px;
    left: 13px;
    border-radius: 20px;
    background-repeat: no-repeat;
}
body.share img.shareholder {
  margin-top: 10px;
  margin-bottom: 40px;
}

.socialsharebuttons.dlbutton {
  margin-top: 50px;
}
.socialshareswitch[data-platformid="2"] {
  display: none;
}
.socialsharebutton[data-platformid="2"] {
    display: inline-block !important;
    font-size: 0px;
    background-image: url('twitter_icon.png');
    background-repeat: no-repeat;
    width: 23px;
    height: 23px;
    line-height: 36px;
    padding: 10px;
    background-size: 65%;
    background-position: 50%;
    margin-left: 30px;
}
a.socialsharebutton[data-platformid="2"]:before{
    content: initial;
}
a.socialsharebutton[data-platformid="2"]:after{
    content: initial;
}

.socialsharebuttons {
  margin-bottom: 20px;
}


.downloadandsharebadge {
    position: absolute;
    top: 0px;
    left: 250px;
    background-image: url('share_badge_1.png');
    height: 100vh;
    width: 20%;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    margin-left: 50%;
    min-width: 350px;
}

.downloadandsharebadge > div {
    background-image: url('share_badge_text_full_new_v2.png');
    width: 100%;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    height: 100%;
}

.popup.show::before {
  content: '';
  position: absolute;
  right: -30px;
  width: 2px;
  height: 40px;
  border-right: 2px solid white;
  top: 0px;
  transform: rotate(45deg);
  cursor: pointer;
}

.popup.show::after {
  content: '';
  position: absolute;
  right: -30px;
  width: 2px;
  height: 40px;
  border-right: 2px solid white;
  top: 0px;
  transform: rotate(-45deg);
  cursor: pointer;
}


@media (max-height: 920px) and (min-width: 480px) {
    body.share .logo {
      top: 10px;
    }
    .socialsharebuttons {
      margin-bottom: 10px;
    }
    
    .downloadandsharebadge {
        left: initial;
        right: 0px;
        width: 30vw;
        min-width: auto;
        margin-left: initial;
    }
}


@media (max-width: 480px) {

body[data-sname="Intro"] .sponsor{
    width: 80px;
    height: 150px;

}
body[data-sname="Intro"] .qrcode{
    display: none;
}
    body.share img.shareholder{
        max-height: 35vh;
    }
    body.share .socialsharebuttons{
        margin-top: 25px;
    }
    body.share h2 +.socialsharebuttons {
        margin-top: 5px;
    }
    .popup.show {
      width: calc(100% - 90px);
        padding: 70px 30px;
    }
    .popup p {
      font-size: 20px;
    }
    body.share .popup a {
        padding: 10px 10px;
        font-size: 11px;
    }
        a.socialsharebutton{
        padding: 5px 15px;
        padding-left: 15px;
        font-size: 16px;
    }
    a.socialsharebutton:before, a.socialsharebutton:after{
        content: initial;
    }
    .socialsharebutton[data-platformid="2"] {
      width: 15px;
      height: 15px;
      line-height: 28px;
      padding: 10px;
      margin-left: 5px;
    }
    
    body.share img.shareholder {
      margin-bottom: 0px;
    }
    
    
    .downloadandsharebadge {
        left: initial;
        right: 0px;
        width: 30vw;
        min-width: auto;
        margin-left: initial;
        background-position-y: 80%;
    }
        .downloadandsharebadge > div {
        background-position-y: 80%;
    }
    .share .sponsor {
      top: 10px;
      right: 20px;
      width: 55px;
      height: 100%;
      background-position: 50% 80%;
    }
    .c_screen{
        height: calc(100% - 20px);
    }
}

@media (max-height: 650px) {
    .c_cent {
      padding-top: 80px;
      padding-bottom: 52px;
    }
}