@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");
}



h1{ 
    font-family: 'Trim Poster Fat';
    text-transform: uppercase;
    font-size: 106px;
    line-height: 0.8em;
    font-weight: 400;
}
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: #151039;
    background-image: url('bg1.jpg');
    background-position: 50%;
    background-size: cover;
    color: #ffffff;
    overflow: hidden;
    height: 100vh;
}
.c_screen {
    height: 100%;
}
.c_cont {
  /*min-height: calc(100vh - 80px);*/
  min-height: initial !important;
  height: calc(100% - 80px);
  background-color: rgba(0, 73, 144, 0.8);
  margin: 40px;
  overflow-y: auto;
}
.c_cent {
  padding-top: 100px;
}

body[data-sname="Welcome"] .logo{
      top: 150px;
      transform: translateX(-50%) scale(1);
      transition: 0s all ease-out;
}
body[data-pid] .logo{
  transition: 0.8s 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;
}



button, input[type=submit] {
  background-color: #E21937;
  border: none;
  padding: 8px 50px;
  border-radius: 30px;
  color: #fff;
  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: #D1193D;
}
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: #E21937;
      border-radius: 100%;
    }
    span[data-valmsg-for]{ display: none;}
    span[data-valmsg-for].field-validation-error {
      display: block;
      color: #e21937;
      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: #e21937;
    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: #E21937;
}

.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;
  -webkit-appearance: checkbox;
}
.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: #e21937;
}

/*Most tablets*/
@media (max-width: 1000px) {
    
    /*body:after{
        content: 'max-width: 900px';
        position: fixed;
        top:0px;
        left:0px;
        background-color: orange;
    }*/
    
    .logo {
      max-width: 60vw;
    }
    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;
    }
}

/*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;
    }
    .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 23px;
    }
    .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: -125px;
    }
    .holder.radiobutton-list .image-checkbox input[type="radio"]:checked::after {
      left: -121px;
    }
    .inputholder input.halfinput {
      width: 100%;
    }
    input.input_text {
      width: 100%;
    }
    .inputholder .selectList input {
        width: 200px;
    }
    .label_singlecheckbox {
        width: 100%;
    }
    .label_singlecheckbox label {
        width: 80%;
    }
    .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: 50px;
    }
    .c_screen[data-name="Enter Details"] .submit_button {
      margin-bottom: 50px;
    }

    .c_screen[data-name="Enter Details"] button.back_button {
      display: none;
    }
}

/*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: 50px;
        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, 129px);
    }
    
    .gov_holder > div {
      max-width: 100%;
    }
}


@media (max-width: 400px) {

    body[data-sname="Welcome"] .logo,
    body[data-pid] .logo{
      max-width: 60vw;
      top: 30px;
    }
    
    
    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, 46px);
    }
    .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;
    }
    
}


@media (max-width: 400px) and (max-height: 550px) {

    body[data-sname="Welcome"] .logo,
    body[data-pid] .logo{
      max-width: 60vw;
      top: 10px;
    }
	
	.c_screen[data-name="Enter Details"] h2 {
      margin-top: 30px;
    }
}


/*****************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;
}
body.share .popup a {
  font-family: 'Montserrat Light';
}
a.socialshareswitch {
  display: inline-block;
}
.socialshareswitch img {
  height: 50px;
  filter: brightness(10);
  padding: 0 20px;
}
.socialshareswitch.selected img{
  filter: brightness(1);  
}

body.share .popup a {
  background-color: #E21937;
  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: #E21937;
  text-decoration: none;
  border-radius: 30px;
  padding: 10px 30px;
  padding-left: 62px;
  font-size: 20px;
  font-family: 'Montserrat Light';
  text-transform: uppercase;
  position: relative;
}

a.socialsharebutton:before{
    content: '';
    width: 30px;
    height: 30px;
    background-color: darkred;
    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: 18px;
    display: block;
    position: absolute;
    top: 14px;
    left: 13px;
    border-radius: 20px;
    background-repeat: no-repeat;
}
body.share img.shareholder{
    margin-top: 10px;
}

.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;
}


@media (max-width: 480px) {

    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;
    }
}

.viewimagewindow{
    text-align: center;
}

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