/*
d88888b  .d88b.  d8b   db d888888b
88'     .8P  Y8. 888o  88 `~~88~~'
88ooo   88    88 88V8o 88    88
88~~~   88    88 88 V8o88    88
88      `8b  d8' 88  V888    88
YP       `Y88P'  VP   V8P    YP
*/
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
/*
d8888b.  .d88b.  d8888b. db    db
88  `8D .8P  Y8. 88  `8D `8b  d8'
88oooY' 88    88 88   88  `8bd8'
88~~~b. 88    88 88   88    88
88   8D `8b  d8' 88  .8D    88
Y8888P'  `Y88P'  Y8888D'    YP
*/
body {
    background: #212121;
    text-align: center;
    font-family: 'Ubuntu';
    color: #fefefe;}

/*
 d888b  d8888b. d888888b d8888b.
88' Y8b 88  `8D   `88'   88  `8D
88      88oobY'    88    88   88
88  ooo 88`8b      88    88   88
88. ~8~ 88 `88.   .88.   88  .8D
 Y888P  88   YD Y888888P Y8888D'
*/
.grid-container {
    display: none;
    width: 100%;
    position: fixed;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    height: 100%;
    grid-template-columns: auto;
    grid-template-rows: 10% 10% 22% 10% 40% 8%;
    grid-template-areas:
        "...... header header header ......"
        "...... ...... ...... ...... ......"
        "...... form   form   form   ......"
        "...... ...... ...... ...... ......"
        "about  about  about  about  about "
        "footer footer footer footer footer";}
.grid-header {grid-area: header;}
.grid-vorc {grid-area: vorc;}
.grid-search {grid-area: search;}
.grid-option {grid-area: option;}
.grid-about {grid-area: about;}
.grid-footer {grid-area: footer; align-self: end;}
.grid-form-container {
    display: grid;
    grid-area: form;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    grid-template-columns: repeat(3, 3fr);
    grid-template-areas:
        "vorc search option";}
.grid-videos-container {
    display: grid;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    grid-template-columns: repeat(5, 5fr);
    grid-template-rows: repeat(4, 5fr) 20px;}
.grid-video-container {
    display: grid;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    grid-template-columns: 45% 55%;
    grid-auto-rows: 60% 40%;
    grid-template-areas:
        "embed other"
        "info  other";}
.grid-embed {grid-area: embed; }
.grid-info {grid-area: info;}
.grid-other {grid-area: other;}
.center {
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;}
/*
db       .d88b.   .d8b.  d8888b. d88888b d8888b.
88      .8P  Y8. d8' `8b 88  `8D 88'     88  `8D
88      88    88 88ooo88 88   88 88ooooo 88oobY'
88      88    88 88~~~88 88   88 88~~~~~ 88`8b
88booo. `8b  d8' 88   88 88  .8D 88.     88 `88.
Y88888P  `Y88P'  YP   YP Y8888D' Y88888P 88   YD
*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #0044ff;
    animation: spin 2s linear infinite;}
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #0066ff;
    animation: spin 3s linear infinite;}
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #0088ff;
    animation: spin 1.5s linear infinite;}
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}}
/*
db   db d88888b  .d8b.  d8888b. d88888b d8888b.
88   88 88'     d8' `8b 88  `8D 88'     88  `8D
88ooo88 88ooooo 88ooo88 88   88 88ooooo 88oobY'
88~~~88 88~~~~~ 88~~~88 88   88 88~~~~~ 88`8b
88   88 88.     88   88 88  .8D 88.     88 `88.
YP   YP Y88888P YP   YP Y8888D' Y88888P 88   YD
*/
.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%;}
/*
db      d888888b .d8888. d888888b
88        `88'   88'  YP `~~88~~'
88         88    `8bo.      88
88         88      `Y8b.    88
88booo.   .88.   db   8D    88
Y88888P Y888888P `8888Y'    YP
*/
.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;}
/*
db    db  .d88b.  d8888b.  .o88b.
88    88 .8P  Y8. 88  `8D d8P  Y8
Y8    8P 88    88 88oobY' 8P
`8b  d8' 88    88 88`8b   8b
 `8bd8'  `8b  d8' 88 `88. Y8b  d8
   YP     `Y88P'  88   YD  `Y88P'
*/
.switch {
    position: relative;
    height: 30px;
    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: 30px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    cursor: pointer;}
.switch-label-v {padding-left: 2px;}
.switch-label-c {padding-right: 2px;}
.switch-input {display: none;}
.switch-input:checked + .switch-label {
    color: #fefefe;
    transition: 0.15s ease-out;}
.switch-input:checked + .switch-label-c ~
.switch-selection {
    left: 60px;}
.switch-selection {
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 2px;
    display: block;
    width: 58px;
    height: 25px;
    border-radius: 13px;
    transition: left 0.15s ease-out;
    background-color: #0066ff;}
/*
.d8888. d88888b  .d8b.  d8888b.  .o88b. db   db
88'  YP 88'     d8' `8b 88  `8D d8P  Y8 88   88
`8bo.   88ooooo 88ooo88 88oobY' 8P      88ooo88
  `Y8b. 88~~~~~ 88~~~88 88`8b   8b      88~~~88
db   8D 88.     88   88 88 `88. Y8b  d8 88   88
`8888Y' Y88888P YP   YP 88   YD  `Y88P' YP   YP
*/
.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;
    width: 100%;}
.material-textfield label::before {
    content: attr(data-content);
    position: relative;
    transition: all 0.4s ease;}
.material-textfield label::after {
    bottom: 1.3rem;
    content: "";
    height: 0.4rem;
    left: 50%;
    border-radius: 25px;
    position: absolute;
    transition: all 0.4s ease;
    width: 0%;}
.material-textfield label::before,
.material-textfield input[required]:focus ~ label::before {
    font-size: 0.85rem;
    top: -4.25rem;}
.material-textfield input:focus ~ label::after {
    left: 0%;
    bottom: 1rem;
    width: 100%;}
.material-textfield input:invalid ~ label::before {
    font-size: 1.25rem;
    top: -3rem;}
.material-textfield input {
    border-bottom: 0.2rem solid #0066ff;
    color: #0066ff;}
.material-textfield label::after {background: #0066ff;}
.material-textfield label::before,
.material-textfield input[required]:focus ~ label::before {color: #0066ff;}
.material-textfield input:invalid ~ label::before {color: #0066ff;}
/*
 .d88b.  d8888b. d8888b. d88888b d8888b.
.8P  Y8. 88  `8D 88  `8D 88'     88  `8D
88    88 88oobY' 88   88 88ooooo 88oobY'
88    88 88`8b   88   88 88~~~~~ 88`8b
`8b  d8' 88 `88. 88  .8D 88.     88 `88.
 `Y88P'  88   YD Y8888D' Y88888P 88   YD
*/
.radio-buttons {
    position: relative;
    background: rgba(0, 0, 0, 0.09);
    border-radius: 50px;
    font-size: 90%;
    width: 70%;
    height: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;}
.radio-buttons input[type="radio"] {display: none;}
.radio-buttons label {
    cursor: pointer;
    z-index: 1;
    line-height: 100%;
    width: 40%;
    color: #919191;
    position: absolute;
    text-align: center;
    transition: 0.2s;}
.radio-buttons label:hover {
    color: #fefefe;
    transition: 0.2s;}
.radio-buttons .slider {
    position: absolute;
    width: 30%;
    height: 40%;
    background: #0066ff;
    border-radius: 50px;
    transition: 0.4s;}
.radio-buttons .first:checked ~ .slider {bottom: 45%; left: 10%; width: 40%;}
.radio-buttons .second:checked ~ .slider {bottom: 45%; left: 57%; width: 25%;}
.radio-buttons .third:checked ~ .slider {bottom: 10%; left:8%; width: 23%;}
.radio-buttons .forth:checked ~ .slider {bottom: 10%; left: 37%; width: 25%;}
.radio-buttons .fith:checked ~ .slider {bottom: 10%; left: 68%; width: 23%;}
div.center.grid-option div label:nth-child(2) {top: 20%; left: 10%}
div.center.grid-option div label:nth-child(4) {top: 20%; right: 10%;}
div.center.grid-option div label:nth-child(6) {bottom: 15%; left: 0%;}
div.center.grid-option div label:nth-child(8) {bottom: 15%; left: 30%;}
div.center.grid-option div label:nth-child(10) {bottom: 15%; left: 60%;}
/*
 .d8b.  d8888b.  .d88b.  db    db d888888b
d8' `8b 88  `8D .8P  Y8. 88    88 `~~88~~'
88ooo88 88oooY' 88    88 88    88    88
88~~~88 88~~~b. 88    88 88    88    88
88   88 88   8D `8b  d8' 88b  d88    88
YP   YP Y8888P'  `Y88P'  ~Y8888P'    YP
*/
.about, .about a {
    position: relative;
    display: inline;
    text-decoration: none;
    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;}
/*
db    db d888888b d8888b. d88888b  .d88b.
88    88   `88'   88  `8D 88'     .8P  Y8.
Y8    8P    88    88   88 88ooooo 88    88
`8b  d8'    88    88   88 88~~~~~ 88    88
 `8bd8'    .88.   88  .8D 88.     `8b  d8'
   YP    Y888888P Y8888D' Y88888P  `Y88P'
*/
.video .img {
    position: relative;
    padding-top: 20px;}
.video img:not(:hover) {
    border-radius: 20px;
    box-shadow: 0px 0px 15px #585858;
    transition: 0.3s ease;}
.video img:hover {
    border-radius: 10px;
    box-shadow: 0px 0px 40px #999999;
    transition: 0.3s ease;}
.video .channel img:not(:hover) {border-radius: 100px;}
.video .channel img:hover {border-radius: 25px;}
.video .img time {
    position: absolute;
    padding: 2px;
    bottom: 8px;
    color: #fefefe;
    right: 31px;
    background-color: rgba(0, 0, 0, 0.55);
    border-radius: 5px;}
.video .channel {
    text-align: left;
    margin-left: 10px;
    margin-top: 0px;
    color: #aaaaaa;
    font-size: 90%;}
.video .title:not(:hover) {
    color: #cfcfcf;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    transition: 0.4s;}
.video .title:hover {
    color:#ffffff;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
    text-shadow: 0px 0px 5px #3d3d3d;
    margin-left: 10px;
    transition: 0.4s;}
.video a {text-decoration: none;}
/*
d8888b. db       .d8b.  db    db d88888b d8888b.
88  `8D 88      d8' `8b `8b  d8' 88'     88  `8D
88oodD' 88      88ooo88  `8bd8'  88ooooo 88oobY'
88~~~   88      88~~~88    88    88~~~~~ 88`8b
88      88booo. 88   88    88    88.     88 `88.
88      Y88888P YP   YP    YP    Y88888P 88   YD
*/
.player {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}
.grid-info {
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
    overflow-y: scroll;
    list-style-type: none;
}
.grid-info .title {
    font-size: 120%;
    margin-bottom: 0px;
    margin-top: 0px;}
.grid-info .views {
    font-size: 80%;
    color: #676767;
    margin-bottom: 10px;
    margin-top: 0px;}
.grid-info .channel {
   font-size: 100%;
   color: #dddddd;
   margin: 0px;}
.grid-info .desc {
   font-size: 85%;
   color: #ababab;}
.grid-info .desc a {
    color: #676767;
    text-decoration: none;}
.grid-info .desc a:hover {color: #cdcdcd;}
/*
 .d88b.  d888888b db   db d88888b d8888b.
.8P  Y8. `~~88~~' 88   88 88'     88  `8D
88    88    88    88ooo88 88ooooo 88oobY'
88    88    88    88~~~88 88~~~~~ 88`8b
`8b  d8'    88    88   88 88.     88 `88.
 `Y88P'     YP    YP   YP Y88888P 88   YD
*/
.other {
    display: block;
    margin: 0px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    list-style-type: none;
    padding-top: 20px;}
.other li {
    display: flex;
    padding-bottom: 15px;
    padding-right: 50px;}
.other a {
    text-decoration: none;}
.other li img:not(:hover) {
    float: left;
    border-radius: 20px;
    box-shadow: 0px 0px 10px #676767;
    text-decoration: none;
    transition: 0.4s}
.other li img:hover {
    float: left;
    border-radius: 10px;
    box-shadow: 0px 0px 30px #919191;
    text-decoration: none;
    transition: 0.4s;}
.other li .vtitle:not(:hover) {
    text-align: left;
    padding-right: 20px;
    padding-left: 15px;
    color: #9f9f9f;
    transition: 0.4s;
    text-decoration: none;}
.other li .vtitle:hover {
    text-align: left;
    padding-right: 20px;
    padding-left: 15px;
    color: #ffffff;
    transition: 0.4s;
    text-decoration: none;}
.other li .ctitle:not(:hover) {
    text-align: left !important;
    padding-left: 15px;
    color: #585858;
    transition: 0.4s;
    text-decoration: none;}
.other li .ctitle:hover {
    text-align: left;
    padding-left: 15px;
    color: #cacaca;
    transition: 0.4s;
    text-decoration: none;}
/*
 .o88b. db   db  .d8b.  d8b   db d8b   db d88888b db
d8P  Y8 88   88 d8' `8b 888o  88 888o  88 88'     88
8P      88ooo88 88ooo88 88V8o 88 88V8o 88 88ooooo 88
8b      88~~~88 88~~~88 88 V8o88 88 V8o88 88~~~~~ 88
Y8b  d8 88   88 88   88 88  V888 88  V888 88.     88booo.
 `Y88P' YP   YP YP   YP VP   V8P VP   V8P Y88888P Y88888P
*/
.Cimg {
    float: left;
    border-radius: 100px;
    margin-left: 200px;
    margin-right: 20px;}
.Ctitle {
    text-align: left;
    margin: 0px;
    font-size: 150%;}
.Csubs, .Cviews, .Cvideos {
    text-align: left;
    margin: 0px;
    color: #919191;}
.Cdesc {
    text-align: left;
    margin-left: 200px;
    margin-right: 200px;
    color: #999999;}
.Cdesc a {
    color: #676767;
    text-decoration: none;}
.Cdesc a:hover {color: #cdcdcd;}
/*
db    db d8888b. db       .d88b.   .d8b.  d8888b. .d8888.
88    88 88  `8D 88      .8P  Y8. d8' `8b 88  `8D 88'  YP
88    88 88oodD' 88      88    88 88ooo88 88   88 `8bo.
88    88 88~~~   88      88    88 88~~~88 88   88   `Y8b.
88b  d88 88      88booo. `8b  d8' 88   88 88  .8D db   8D
~Y8888P' 88      Y88888P  `Y88P'  YP   YP Y8888D' `8888Y'
*/
.snip1339 {
    font-family: "Raleway", Arial, sans-serif;
    background-color: #0066ff;
    border-radius: 5px;
    color: #fefefe;
    padding: 0px 40px;
    top: -60px;
    left: -200px;
    text-decoration: none;
    line-height: 2.7em;
    font-weight: 600;
    font-size: 1em;
    float: right;
    position: relative;
    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 {
    top: 0;
    bottom: 0;}
/*
d88888b  .d88b.   .d88b.  d888888b d88888b d8888b.
88'     .8P  Y8. .8P  Y8. `~~88~~' 88'     88  `8D
88ooo   88    88 88    88    88    88ooooo 88oobY'
88~~~   88    88 88    88    88    88~~~~~ 88`8b
88      `8b  d8' `8b  d8'    88    88.     88 `88.
YP       `Y88P'   `Y88P'     YP    Y88888P 88   YD
*/
.footer {
    background-color: #3a3a3a;
    color: #ffffff;
    height: 60%;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;}