/*
   ad88
  d8"                              ,d
  88                               88
MM88MMM  ,adPPYba,   8b,dPPYba,  MM88MMM
  88    a8"     "8a  88P'   `"8a   88
  88    8b       d8  88       88   88
  88    "8a,   ,a8"  88       88   88,
  88     `"YbbdP"'   88       88   "Y888
*/
@import url(https://fonts.googleapis.com/css?family=Roboto|Raleway:400,500,800);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url(https://fonts.googleapis.com/css?family=Ubuntu|Bungee+Shade|Ranchers);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Muli);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
/*
88                                 88
88                                 88
88                                 88
88,dPPYba,    ,adPPYba,    ,adPPYb,88  8b       d8
88P'    "8a  a8"     "8a  a8"    `Y88  `8b     d8'
88       d8  8b       d8  8b       88   `8b   d8'
88b,   ,a8"  "8a,   ,a8"  "8a,   ,d88    `8b,d8'
8Y"Ybbd8"'    `"YbbdP"'    `"8bbdP"Y8      Y88'
                                           d8'
                                          d8'
*/
body {
    background-color: #212121;
    font-family: 'Ubuntu';
    text-decoration: none;
    color: #ffffff;
    text-align: center;}
/*
            88
            88                                       ,d
            88                                       88
,adPPYYba,  88,dPPYba,    ,adPPYba,   88       88  MM88MMM
""     `Y8  88P'    "8a  a8"     "8a  88       88    88
,adPPPPP88  88       d8  8b       d8  88       88    88
88,    ,88  88b,   ,a8"  "8a,   ,a8"  "8a,   ,a88    88,
`"8bbdP"Y8  8Y"Ybbd8"'    `"YbbdP"'    `"YbbdP'Y8    "Y888
*/
.about div{
    display: inline-block;}
about, about a {
    font-family: 'Ubuntu';
    text-decoration: none;
    position: relative;
    display: inline;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;}
about a, about a:visited {
    text-decoration: none;
    position: relative;}
about a:hover, about a:visited:hover {
    color: #ffffff;
    transition: 1s;}
about a:not(hover), about a:visited:not(hover) {
    color: rgba(255, 255, 255, 0.6);
    transition: 1s;}
about a:after, about a:visited:after {
    content: '';
    height: 4px;
    position: absolute;
    bottom: -4px;
    left: 0;
    border-radius: 25px;
    width: 0%;
    background: #0066ff;
    transition: 0.4s;}
about a:hover:after, about a:visited:hover:after {
    width: 100%;}
about a.block, about a:visited.block {
    display: block;
    padding: 0.5em;}
about a.block:hover, about a:visited.block:hover {
    background: #ffffff;}
/*
88   88
88   ""               ,d
88                    88
88   88  ,adPPYba,  MM88MMM
88   88  I8[    ""    88
88   88   `"Y8ba,     88
88   88  aa    ]8I    88,
88   88  `"YbbdP"'    "Y888
*/
.pulse li a {
    font: 1.2em/1.4 'Oswald', sans-serif;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    overflow: hidden;
    transition-duration: 0.5s;
    transition-property: color, background-color;
    padding: 5px 10px 5px 10px;
    border-radius: 10px;}
.pulse li a:hover, .pulse li a:focus, .pulse li a:active {
    animation-name: pulse;
    animation-duration: 1s;
    background-color: #0066ff;}
/*
                         88           88
                         ""           88
                                      88
 ,adPPYb,d8  8b,dPPYba,  88   ,adPPYb,88
a8"    `Y88  88P'   "Y8  88  a8"    `Y88
8b       88  88          88  8b       88
"8a,   ,d88  88          88  "8a,   ,d88
 `"YbbdP"Y8  88          88   `"8bbdP"Y8
 aa,    ,88
  "Y8bbdP"
*/
#content {
    display: grid;
    margin: 0 auto;
    grid-template-rows: 4;
    align-items: center;
    justify-items: center;}
/*
   ad88
  d8"                              ,d
  88                               88
MM88MMM  ,adPPYba,    ,adPPYba,  MM88MMM  ,adPPYba,  8b,dPPYba,
  88    a8"     "8a  a8"     "8a   88    a8P_____88  88P'   "Y8
  88    8b       d8  8b       d8   88    8PP"""""""  88
  88    "8a,   ,a8"  "8a,   ,a8"   88,   "8b,   ,aa  88
  88     `"YbbdP"'    `"YbbdP"'    "Y888  `"Ybbd8"'  88
*/
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #3a3a3a;
    color: #ffffff;
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    grid-column: 1/4;
    grid-row: 4;}
/*
             88           88
             ""           88
                          88
8b       d8  88   ,adPPYb,88   ,adPPYba,   ,adPPYba,   ,adPPYba,
`8b     d8'  88  a8"    `Y88  a8P_____88  a8"     "8a  I8[    ""
 `8b   d8'   88  8b       88  8PP"""""""  8b       d8   `"Y8ba,
  `8b,d8'    88  "8a,   ,d88  "8b,   ,aa  "8a,   ,a8"  aa    ]8I
    "8"      88   `"8bbdP"Y8   `"Ybbd8"'   `"YbbdP"'   `"YbbdP"'
*/
#videos, #videos p, #videos h3, #videos a {
    list-style: none;
    margin: 0;
    padding: 15;
    color: #999999;
    display: block;
    text-align: center;
    white-space: pre-wrap;
    text-decoration: none;
    font-family: 'Ubuntu';}
#videos p:hover, #videos h3:hover, #videos a:hover {
    color: #ffffff;
    transition: 0.6s;}
#videos p:not(:hover), #videos h3:not(:hover), #videos a:not(:hover) {
    color: #999999;
    transition: 0.6s;}
#videos li{
    width: 100%;}
#videos li, #videos li .image {
    float: left;
    margin-right: 25px;
    margin-bottom: 15px;}
/*
8b       d8   ,adPPYba,   8b,dPPYba,   ,adPPYba,
`8b     d8'  a8"     "8a  88P'   "Y8  a8"     ""
 `8b   d8'   8b       d8  88          8b
  `8b,d8'    "8a,   ,a8"  88          "8a,   ,aa
    "8"       `"YbbdP"'   88           `"Ybbd8"'
*/
.switch {
    position: relative;
    height: 26px;
    width: 120px;
    margin-left: 130px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 13px;}
.switch-label {
    position: relative;
    z-index: 2;
    float: left;
    width: 58px;
    line-height: 26px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    cursor: pointer;}
.switch-label:active {
    font-weight: bold;}
.switch-label-off {
    bottom: 30px;
    padding-left: 2px;}
.switch-label-on {
    padding-right: 2px;
    bottom: 60px;
    left: 60px;}
.switch-input {
    display: none;}
.switch-input:checked + .switch-label {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.65);
    text-shadow: 0 1px rgba(255, 255, 255, 0.25);
    transition: 0.15s ease-out;
    transition-property: color, text-shadow;}
.switch-input:checked + .switch-label-on ~ .switch-selection {
    left: 60px;}
.switch-selection {
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 2px;
    display: block;
    width: 58px;
    height: 22px;
    border-radius: 13px;
    transition: left 0.15s ease-out;}
.switch-blue .switch-selection {
    background-color: #0066ff;}
/*
88,dPYba,,adPYba,    ,adPPYba,  8b,dPPYba,   88       88
88P'   "88"    "8a  a8P_____88  88P'   `"8a  88       88
88      88      88  8PP"""""""  88       88  88       88
88      88      88  "8b,   ,aa  88       88  "8a,   ,a88
88      88      88   `"Ybbd8"'  88       88   `"YbbdP'Y8
*/
.snip1217 {
    font-family: 'Raleway', Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    padding-left: 0px;
    letter-spacing: 1px;}
.snip1217 * {
    box-sizing: border-box;
    transition: all 0.35s ease;}
.snip1217 li {
    display: inline-block;
    list-style: outside none none;
    margin: 0.5em 1.5em;
    padding: 0;}
.snip1217 a {
    padding: 0.3em 0;
    color: rgba(255, 255, 255, 0.5);
    position: relative;
    text-decoration: none;
    display: inline-block;}
.snip1217 a:before, .snip1217 a:after {
    height: 3px;
    position: absolute;
    content: '';
    transition: all 0.35s ease;
    background-color: #0066ff;
    width: 0;}
.snip1217 a:before {
    top: 0;
    left: 0;}
.snip1217 a:after {
    bottom: 0;
    right: 0;}
.snip1217 a:hover, .snip1217 .current a {
    color: #fff;}
.snip1217 a:hover:before, .snip1217 .current a:before,
.snip1217 a:hover:after, .snip1217 .current a:after {
    width: 100%;}
/*
                                                           88
                                                           88
                                                           88
,adPPYba,   ,adPPYba,  ,adPPYYba,  8b,dPPYba,   ,adPPYba,  88,dPPYba,
I8[    ""  a8P_____88  ""     `Y8  88P'   "Y8  a8"     ""  88P'    "8a
 `"Y8ba,   8PP"""""""  ,adPPPPP88  88          8b          88       88
aa    ]8I  "8b,   ,aa  88,    ,88  88          "8a,   ,aa  88       88
`"YbbdP"'   `"Ybbd8"'  `"8bbdP"Y8  88           `"Ybbd8"'  88       88
*/
#q {
    background: #ffffff;
    border-radius: 4px;
    text-align: center;
    padding: 3px;
    color: #212121;}
#qlabel {
    padding-left: 10px;}
#qbutton {
    color: #ffffff;}
.material-textfield {
    display: inline-block;
    height: 4rem;
    padding-top: 2rem;}
.material-textfield input {
    background: none;
    border: none;
    box-sizing: border-box;
    display: block;
    padding: 10px;
    font-family: Roboto, Arial, sans-serif;
    font-size: 1.5rem;
    padding: .25rem 2.1rem;
    width: 100%;
    text-align: center;}
.material-textfield input:invalid {
    box-shadow: none;}
.material-textfield input:focus {
    outline: none;}
.material-textfield label {
    display: inline-block;
    font-family: Roboto, Arial, sans-serif;
    font-size: 0;
    pointer-events: none;
    position: relative;
    bottom: 15px;
    width: 100%;}
.material-textfield label::before {
    content: attr(data-content);
    position: relative;
    transition: all 0.2s ease;
    will-change: font-size, top;}
.material-textfield label::after {
    bottom: 0.9rem;
    content: "";
    height: 0.3rem;
    left: 50%;
    position: absolute;
    transition: all 0.2s ease;
    width: 0;
    will-change: width, left;}
.material-textfield label::before,
.material-textfield input[required]:focus ~ label::before {
    font-size: 0.75rem;
    top: -3.25rem;}
.material-textfield input:focus ~ label::after {
    left: 0%;
    width: 100%;}
.material-textfield input:invalid ~ label::before {
    font-size: 1rem;
    top: -2rem;}
.material-textfield.blue input {
    bottom: 10px;
    border-bottom: 0.1rem solid #0066ff;
    color: #0066ff;}
.material-textfield.blue label::after {
    background: #0066ff;}
.material-textfield.blue label::before,
.material-textfield.blue input[required]:focus ~ label::before {
    color: #0066ff;}
.material-textfield.blue input:invalid ~ label::before {
    color: #0066ff;}
/*
88
88                          ,d       ,d
88                          88       88
88,dPPYba,   88       88  MM88MMM  MM88MMM  ,adPPYba,   8b,dPPYba,
88P'    "8a  88       88    88       88    a8"     "8a  88P'   `"8a
88       d8  88       88    88       88    8b       d8  88       88
88b,   ,a8"  "8a,   ,a88    88,      88,   "8a,   ,a8"  88       88
8Y"Ybbd8"'    `"YbbdP'Y8    "Y888    "Y888  `"YbbdP"'   88       88
*/
.fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;}
.snip1339 {
    font-family: 'Raleway', Arial, sans-serif;
    border: none;
    background-color: #0066ff;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    padding: 0px 40px;
    display: inline-block;
    text-transform: uppercase;
    line-height: 2.7em;
    font-weight: 600;
    font-size: 1em;
    outline: none;
    position: relative;
    font-size: 16px;
    right: 90px;
    transition: all 0.3s;}
.snip1339:after {
    content: "";
    position: absolute;
    width: 100%;
    top: 50%;
    bottom: 50%;
    left: 0;
    border-radius: inherit;
    background-color: rgba(255, 255, 255, 0.15);
    transition: all 0.3s;}
.snip1339:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    transform: translateY(5px);
    background-color: inherit;
    border-radius: 10px;
    z-index: -1;
    box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.75);}
.snip1339:hover:after,.snip1339.hover:after {
    top: 0;
    bottom: 0;}
/*
8b,dPPYba,    ,adPPYba,   8b,dPPYba,   88       88  8b,dPPYba,
88P'    "8a  a8"     "8a  88P'    "8a  88       88  88P'    "8a
88       d8  8b       d8  88       d8  88       88  88       d8
88b,   ,a8"  "8a,   ,a8"  88b,   ,a8"  "8a,   ,a88  88b,   ,a8"
88`YbbdP"'    `"YbbdP"'   88`YbbdP"'    `"YbbdP'Y8  88`YbbdP"'
88                        88                        88
88                        88                        88
*/
h1 {
    text-align: center;
    font-family: Tahoma, Arial, sans-serif;
    color: #06D85F;
    margin: 80px 0;}
.box {
    width: 90%;
    margin: 0 auto;
    background: #212121;
    padding: 35px;
    border: 2px solid #212121;
    border-radius: 20px/50px;
    background-clip: padding-box;
    text-align: center;}
.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;}
.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;}
.overlay:target {
    visibility: visible;
    opacity: 1;}
.popup {
    margin: 70px auto;
    padding: 20px;
    background: #212121;
    border-radius: 5px;
    width: 70%;
    height: 70%;
    position: relative;
    transition: all 5s ease-in-out;}
.popup h2 {
    margin-top: 0;
    color: #ffffff;
    font-size: 20px;
    font-family: Tahoma, Arial, sans-serif;}
.popup .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333333;}
.popup .close:hover {
    color: #ff0000;}
.popup .content {
    max-height: 90%;
    overflow: auto;}
@media screen and (max-width: 700px){
    .box{width: 70%;}
    .popup{width: 70%;}}
/*
                                                           88
                                                           88
                                                           88
,adPPYba,   ,adPPYba,  ,adPPYYba,  8b,dPPYba,   ,adPPYba,  88,dPPYba,
I8[    ""  a8P_____88  ""     `Y8  88P'   "Y8  a8"     ""  88P'    "8a
 `"Y8ba,   8PP"""""""  ,adPPPPP88  88          8b          88       88
aa    ]8I  "8b,   ,aa  88,    ,88  88          "8a,   ,aa  88       88
`"YbbdP"'   `"Ybbd8"'  `"8bbdP"Y8  88           `"Ybbd8"'  88       88
*/
.snip1488 {
    font-family: 'Roboto', Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    transform: translateZ(0);}
.snip1488 * {
    box-sizing: border-box;}
.snip1488 li {
    display: inline-block;
    list-style: outside none none;
    margin: 0.5em 1em;
    overflow: hidden;
    position: relative;
    border-radius: 10px;}
.snip1488 li:before, .snip1488 li:after {
    display: block;}
.snip1488 li:before {
    bottom: 0%;}
.snip1488 li:after {
    bottom: 50%;}
.snip1488 a {
    backface-visibility: hidden;
    color: #ffffff99;
    display: block;
    padding: 0.5em 1em;
    position: relative;
    text-align: center;
    text-decoration: none;}
.snip1488 a:hover {
    color: #ffffff;}
.snip1488 a:before {
    bottom: 25%;}
.snip1488 a:after {
    bottom: 75%;}
.snip1488 li:before, .snip1488 li:after,
.snip1488 a:before, .snip1488 a:after {
    background-color: #0066ff;
    position: absolute;
    height: 25%;
    left: 50%;
    right: 50%;
    content: '';
    z-index: -1;
    opacity: 0;
    transition: all 0.3s ease;}
.snip1488 li:before {
    transition-delay: 0.15s;}
.snip1488 li:after {
    transition-delay: 0.05s;}
.snip1488 a:before {
    transition-delay: 0.1s;}
.snip1488 a:after {
    transition-delay: 0s;}
.snip1488 li:hover:before, .snip1488 li.current:before,
.snip1488 li:hover:after, .snip1488 li.current:after,
.snip1488 li:hover a:before, .snip1488 li.current a:before,
.snip1488 li:hover a:after, .snip1488 li.current a:after {
    left: 0;
    right: 0;
    opacity: 1;}
.snip1488 li:hover:before, .snip1488 li.current:before {
    transition-delay: 0.3s;}
.snip1488 li:hover:after, .snip1488 li.current:after {
    transition-delay: 0.1s;}
.snip1488 li:hover a:before, .snip1488 li.current a:before {
    transition-delay: 0.2s;}
.snip1488 li:hover a:after, .snip1488 li.current a:after {
    transition-delay: 0s;}