@font-face {
    font-family: DrukBold;
    src: url(DrukBold.otf);
}

@font-face {
    font-family: DrukMedium;
    src: url(DrukMedium.otf);
}

@font-face {
    font-family: DrukWideMedium;
    src: url(DrukWideMedium.otf);
}

[type='radio'] {
    display: none;
}
  
body {
    color: #fff;
    background-color: #63b5e5;
    
}

.selectedOption {
    box-shadow: 0 0 0px 3px #f3ec18;
}

label.infolabel:hover{
    box-shadow: 0 0 0px 3px #f3ec18;
}

a {
    color: #727272; 
}

a:hover, a:focus {
    color: #727272;
}

.bigText{
	font-size: 54px;
}
.smallText{
	font-size: 35px;
}
.smaller-text{
	font-size: 30px;
}
.bottom-text{
	font-size: 25px;
}
.footerText{
    font-size: 17px;
}

.button1 {
    background-color: #000;
    border-radius: 0;
    border: none;
    box-shadow: none;
    color: #fff;
    font-family: DrukBold;
    -ms-transform: skew(-10deg,0deg); /* IE 9 */
    -webkit-transform: skew(-10deg,0deg); /* Safari prior 9.0 */
    transform: skew(-10deg,0deg); /* Standard syntax */
    cursor: pointer;
    max-width: 370px;
    padding: 3% 2%;
    line-height: 1.1;
    letter-spacing: 2.2pt;
}

.button1 div {
    display: block; /* block or inline-block is needed */
    text-decoration: none;
    padding: 5px 10px;
    transform: skew(10deg); /* UNSKEW */
    color: inherit;
}

.button1:hover, .button1:focus{
    color: #000;
    background-color: #f3ec18;
}

small {
    display: block;
    font-style: italic;
    background-color: red;
    color: #fff;
    text-align: left;
    padding: 0.3rem;
}

.postfix {
    padding: 0.3rem;
    color: #fff!important;
    width: 100%;
    display: block;
}

.alert-box.alert.radius {
    background-color: red;
    color: #fff;
    padding: 0.3rem;
}

.warning {
    color: red;
    margin-top: -0.5rem;
    font-size: 14px;
}

.steps {
    margin-bottom: 2%;
}

.buttonContainer {
    margin-top: 3%;
    margin-bottom:13%;
}

.stepsContainer {
    margin-top: 3.5%;
    padding-top: 2%;
    background-color:#000;
}

.firstContainer {
    margin-top: 3%;
}
.switchAlign{
    margin-bottom:3.5%;
}
.lineSpacing {
    margin-bottom:3%;
}

.lineSpacing ~ div {
    margin-bottom:2%;
}

.styled-checkbox{
    position: absolute; 
    opacity: 0; 
}

.styled-checkbox + label {
      position: relative;
      cursor: pointer;
      padding: 0;
}

.styled-checkbox + label:before {
    content: "";
    margin-right: 10px;
    display: inline-block;
    vertical-align: sub;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 2px solid white;
}

.styled-checkbox:checked + label:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 10px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white,
      4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
}

@media only screen and (max-width:1023px) {
    .bigText{
        font-size: 45px;
    }
    .smallText{
        font-size: 25px;
    }
    .smaller-text{
        font-size: 25px;
    }
    .footerText{
        font-size: 16px;
    }
    .switchAlign{
        text-align: center!important;
        margin-bottom:5%;
    }
    .buttonContainer {
        margin-top: 5%;
        margin-bottom:15%;
    }
    .stepsContainer {
        margin-top: 4%;
        padding-top: 3%;
    }
    .firstContainer {
        margin-top: 4%;
    }
    .lineSpacing {
        margin-bottom:4%;
    }
    .lineSpacing ~ div {
        margin-bottom:3%;
    }
}
@media only screen and (max-width:640px) {
    .bigText{
        font-size: 40px;
    }
    .smallText{
        font-size: 30px;
    }
    .smaller-text{
        font-size: 20px;
    }
    .bottom-text{
        font-size: 17px;
    }
    .footerText{
        font-size: 15px;
    }
    .postfix {
        padding: 0.5rem;
        line-height: 2;
        width: auto;
        display: inline;
    }
    .warning {
        font-size: 13px;
    }
    .steps {
        margin-bottom: 9%;
    }
    .buttonContainer {
        margin-top: 8%;
        margin-bottom:18%;
    }
    .stepsContainer {
        margin-top: 6%;
        padding-top: 5%;
    }
    .firstContainer {
        margin-top: 6%;
    }
    .switchAlign{
        margin-bottom:8%;
    }
    .lineSpacing {
        margin-bottom:5%;
    }
    .lineSpacing ~ div {
        margin-bottom:5%;
    }
}