body {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

* {
    font-family: "Avenir", "Avenir Book", sans-serif;
    color: #0A142C;
}

.full-size-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.theme {
    position: absolute;
    width: 4em;
    top: 1em;
    right: 4em;
}

.standard-heading-1 {
    margin: 0 0 .5em 0;
    font-weight: 500;
}

.standard-heading-2 {
    margin: 0 0 .5em 0;
    font-weight: 500;
}

.standard-heading-3 {
    margin: 0 0 .5em 0;
    font-weight: normal;
    font-size: 1.15em;
}

.standard-button {
    display: inline-block;
    text-align: center;
    color: #fff;
    background-color: #D03737;
    border-radius: 50px;
    padding: 10px 50px;
    font-weight: 700;
    transition: all .25s;
    cursor: pointer;
}

.ghost-button {
    display: inline-block;
    font-weight: 500;
    color: #000;
    font-size: 1.25em;
    padding: 10px 30px;
    background-color: #fff;
    background-color: transparent;
    transition: all .25s;
    cursor: pointer;
}

.standard-textbox {
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

.standard-textbox label {
    display: inline-block;
    margin-bottom: .5em;
    font-weight: 500;
}

.standard-textbox input,
.standard-textbox .readonly {
    border: none;
    font-size: 1.125em;
    background-color: #eeeff3;
    padding: .4em .75em;
    border-radius: .5em;
    width: 100%;
    font-weight: 500;
    box-sizing: border-box;
    height: 2.41em;
}

.standard-textbox ::-webkit-input-placeholder {
    color: #A9AEB8;
}
.standard-textbox :-ms-input-placeholder {
    color: #A9AEB8;
}
.standard-textbox ::placeholder {
    color: #A9AEB8;
}

/* - - - Hover styles - - - */

.standard-button:hover {
    background-color: #ff3131;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px #0A142C33;
}

.ghost-button:hover {
    text-decoration: underline;
}

.standard-button:active {
    background-color: #6E0B0B;
}


/* - - - iOS Switches - - - */


/* --- Originially Created by Jesse Couch (https://codepen.io/designcouch) --- */

.ios-switch,.ios-switch:before,.ios-switch:after{
    box-sizing:border-box;
    margin:0;
    padding:0;
    /*transition*/
    -webkit-transition:.25s ease-in-out;
       -moz-transition:.25s ease-in-out;
         -o-transition:.25s ease-in-out;
            transition:.25s ease-in-out;
    outline:none;
    font-family: /*-apple-system, BlinkMacSystemFont,*/ "Avenir Book", Avenir, "Helvetica Neue", sans-serif;
}

#toggles{
    width:60px;
    margin:50px auto;
    text-align:center;
}

.ios-toggle,.ios-toggle:active{
    position:absolute;
    z-index: -1;
    height:0;
    width:0;
    opacity:0;
    border:none;
    outline:none;
}

.checkbox-label{
    display:block;
    position:relative;
    padding:10px;
    margin-bottom:0px;
    font-size:12px;
    line-height:16px;
    width:100%;
    height:36px;
    /*border-radius*/
    -webkit-border-radius:18px;
       -moz-border-radius:18px;
            border-radius:18px;
    background:#f8f8f8;
    cursor:pointer;
}

.checkbox-label:before{
    content:'';
    display:block;
    position:absolute;
    z-index:1;
    line-height:34px;
    text-indent:40px;
    height:36px;
    width:36px;
    /*border-radius*/
    -webkit-border-radius:100%;
       -moz-border-radius:100%;
            border-radius:100%;
    top:0px;
    left:0px;
    right:auto;
    background:white;
    /*box-shadow*/
    -webkit-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
       -moz-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
            box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
}

.checkbox-label:after{
    content:attr(data-off);
    display:block;
    position:absolute;
    z-index:0;
    top:0;
    height: 100%;
    left: 100%;
    padding: 10px;
    left:-100px;
    padding:10px;
    height:100%;
    width:100px;
    text-align:right;
    color:#bfbfbf;
    white-space:nowrap;
    font-size: 2em;
}

.one-sided-switch-wrapper .checkbox-label:after {
    left:100%;
    padding:10px;
    height:100%;
    width:auto;
}

.ios-toggle:checked + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
       -moz-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
            box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
}

.ios-toggle:checked + .checkbox-label:before{
    left:calc(100% - 36px);
    /*box-shadow*/
    -webkit-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
       -moz-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
            box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
}

.ios-toggle:checked + .checkbox-label:after{
    content:attr(data-on);
    left:60px;
    width:36px;
    font-size: 2em;
}


/* GREEN CHECKBOX */

.green-checkbox + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
       -moz-box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
            box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
}

.green-checkbox:checked + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
       -moz-box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
            box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
}

.green-checkbox:checked + .checkbox-label:after{
    color:rgba(19,191,17,1);
}


/* RED CHECKBOX */

.red-checkbox + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 0px #D03737,0 0 0 2px #dddddd;
       -moz-box-shadow:inset 0 0 0 0px #D03737,0 0 0 2px #dddddd;
            box-shadow:inset 0 0 0 0px #D03737,0 0 0 2px #dddddd;
}

.red-checkbox:checked + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 20px #D03737,0 0 0 2px #D03737;
       -moz-box-shadow:inset 0 0 0 20px #D03737,0 0 0 2px #D03737;
            box-shadow:inset 0 0 0 20px #D03737,0 0 0 2px #D03737;
}

.red-checkbox:checked + .checkbox-label:after{
    color: #D03737;
}


/* BLUE CHECKBOX */

.blue-checkbox + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd;
       -moz-box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd;
            box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd;
}

.blue-checkbox:checked + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8;
       -moz-box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8;
            box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8;
}

.blue-checkbox:checked + .checkbox-label:after{
    color:#1fc1c8;
}

/* YELLOW CHECKBOX */

.yellow-checkbox + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 0px #ffcb37,0 0 0 2px #dddddd;
       -moz-box-shadow:inset 0 0 0 0px #ffcb37,0 0 0 2px #dddddd;
            box-shadow:inset 0 0 0 0px #ffcb37,0 0 0 2px #dddddd;
}

.yellow-checkbox:checked + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 20px #ffcb37,0 0 0 2px #ffcb37;
       -moz-box-shadow:inset 0 0 0 20px #ffcb37,0 0 0 2px #ffcb37;
            box-shadow:inset 0 0 0 20px #ffcb37,0 0 0 2px #ffcb37;
}

.yellow-checkbox:checked + .checkbox-label:after{
    color: #ffcb37;
}


.standard-width {
    width: 70px;
    font-size: 24px;
}

.ios-toggle:checked + .standard-width:after{
    content:attr(data-on);
    left:70px;
    width:36px;
}

/* ---- HTML Example ---- 

<h1>iOS Switches with Labels</h1>
<div id="toggles">
  <input type="checkbox" name="checkbox1" id="checkbox1" class="ios-switch ios-toggle green-checkbox" checked/>
  <label for="checkbox1" class="ios-switch checkbox-label" data-off="off" data-on="on"></label>
  
  <input type="checkbox" name="checkbox1" id="checkbox2" class="ios-switch ios-toggle red-checkbox" checked/>
  <label for="checkbox2" class="ios-switch checkbox-label" data-off="no" data-on="yes"></label>
  
  <input type="checkbox" name="checkbox1" id="checkbox3" class="ios-switch ios-toggle blue-checkbox" checked/>
  <label for="checkbox3" class="ios-switch checkbox-label" data-off="longer label off" data-on="longer label on"></label>
</div>

   -------- END -------- */





/* - - - Screen Transitions - - - */
 /* - - - - - fade in - - -  - - */
.fade-in {
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



 /* - - - - - fade out - - -  - - */
.fade-out {
    -webkit-animation: fadeout 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeout 3s; /* Firefox < 16 */
        -ms-animation: fadeout 3s; /* Internet Explorer */
         -o-animation: fadeout 3s; /* Opera < 12.1 */
            animation: fadeout 3s;
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}