@charset "UTF-8";
/*!
  CodingVideos Css, v0.1
  Created by Alula K for Coding Videos, http://codingvideoz.com/
  https://twitter.com/altsyset  https://twitter.com/codingvideoz
*/
body {
    background-color: #fdfdfd;
    color: #dbdbc2;
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    margin: 0;
}
::selection {
  color: #3c3b3b;
  background-color: #fefefe;
}
.wrapper {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.header {
    background-color: #5f5f5f;
    padding-top: 1rem;
    margin: auto;
}
.header h1, .header h2, .header h3, .header h4, .header h5, .header p, .header {
  color: #c9c8be;
}
.button:hover, input[type="submit"]:hover {
  border: 0.1rem solid #FF9800;
}
#searchParams input[type='search'] {
  border-radius: 0;
  color: #c9c8be;
}
#searchParams select {
    padding-left: 3%;
    padding-right: 0rem;
    width: 30%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: #c9c8be;
}
#searchParams option {
  background-color: #5f5f5f;
}
#searchParams option:hover, #searchParams option:focus {
    background-color: #51504c;
}
#searchParams .search, a.subscribe {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
#searchParams .filter {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#searchParams .clear {
  border-radius: 0;
  border-radius: 0;
}
.paramNavigationlink {
  font-size: .8rem;
  line-height: 1rem;
}
.sideNav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #333;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
  display: none;
}
.sideNav .closebtn {
    position: fixed;
    top: 0px;
    left: 34rem;
    font-size: 43px;
}
.searchFilter.videoTypes {
  margin-top: 4rem;
}
/* Styling the scrollbar */
body::-webkit-scrollbar, .sideNav::-webkit-scrollbar {
  width: 0.8em;
}

body::-webkit-scrollbar-track, .sideNav::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb, .sideNav::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
/* End of scrollbar */
#searchParams .button:hover {
  border: 0.1rem solid #adadad;
}
.searchFilter input[type='submit'] {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  min-width: 180px;
  background-color: transparent;
  border: 0.1rem solid #FF9800;
  padding: 0 1.0rem
}
.filterSelected {
  background-color: #FF9800 !important;
}
.searchFilter input[type='submit']:hover, .searchFilter input[type='submit']:visited {
  background-color: sandybrown;
}
.searchFilter input[type='submit']:active, .searchFilter input[type='submit']:focus {
  background-color: #FF9800;
}
a {
    color: #FF9800;
    text-decoration: none;
}
a:focus, a:hover {
    color: #dbdbc2;
}
.navigation a:focus, .navigation a:hover {
  color: #ebdeb8;
}
.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
  background-color: #FF9800;
  border: 0.1rem solid #FF9800;
}
.header .container {
    border-top: 0;
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;
    position: relative;
    text-align: center;
}
.container {
  padding: 0 1.2rem;
}
.navigation {
    background: #5f5f5f;
    border-bottom: .1rem solid #454545;
    display: block;
    height: 5.2rem;
    left: 0;
    max-width: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}
.navigation .navigation-list {
    list-style: none;
    margin-bottom: 0;
    margin-right: 5rem;
}
.navigation .navigation-item {
    float: left;
    margin-bottom: 0;
    margin-left: 2.5rem;
    position: relative;
    margin-left: 1rem;
}
.navigation .navigation-title, .navigation .title {
    display: inline;
    font-size: 2.6rem;
    line-height: 5.2rem;
    padding: 0;
    text-decoration: none;
}
.navigation .navigation-link {
    display: inline;
    font-size: 1.6rem;
    line-height: 5.2rem;
    padding: 0;
    text-decoration: none;
}
.navigation .container {
    padding-bottom: 0;
    padding-top: 0;
}
.wrapper {
  background-color: #51504c;
}
.wrapper .container {
  max-width: 90rem;
}
.wrapper .navigation .container {
    max-width: 89%;
}

/*
* ########### CV.C #################
*/

a {
  transition: all 0.5s ease-out;
}

a.column img {
  background: #9f9f9f;
  min-height: 147px;
  display: block;
  max-width: 262px;
}
.img-svg {
	width: 53%;
	margin-left: 23%;
}
section#catContainer, section#videoListContainer, section#topicsListContainer, section#videoContainer {
    max-width: 90%;
    min-height: 50rem;
}
div#videoDetailNote {
  padding: 2rem 0;
  margin: 2rem 0;
}
.videoWrapper {
  position: relative;
  height: 720px;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
  height: 100%;
}
span.vote-icon {
  display: inline-block;
  content: "";
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 13px solid #fff;
  border-radius: 2px;
  margin: 0 5px 0 0;
}
span.vote-icon i {
  display: inline;
  padding: 0 1rem;
  font-size: 2rem;

}
span.vote {
  font-size: 1.2rem;
  color: #d5d5d5;
  padding-left: 1rem;

}
.mw-vote {
	position: relative;
	margin-left: 0;
  float: left;
  margin-top: 0.7rem;
}
span.vote-txt {
	display: none;
}

.ytp-pause-overlay.ytp-scroll-min {
	display: none !important;
}
.column.videoNotes {
  width: 150%;
  padding: 0rem 5rem 1rem 0;
}
div#similarVideoListContainer {
	padding: 3rem 0 1rem 1rem;
}
textarea#sideNote {
  min-height: 480px;
}
section#videoContainer {
  margin-top: -10rem;
}
section#topicVideoListContainer {
    max-width: 127rem !important;
    /* padding: 2rem 0; */
    /* margin: 2rem 0; */
    /* max-width: 89% !important; */
    min-height: 50rem;
}
.videoList h4 {
    min-height: 4.5rem;
    text-transform: capitalize;
    font-size: 1.8rem;
}
.videoList h5 {
    font-size: 1.5rem;
    padding: 2rem;
    display: none;
}
#videoDetail {
  /* height: 189px; */
}
span.play-icon {
    margin-top: 2%;
    margin-left: 8%;
    position: absolute;
    font-size: 6rem;
    opacity: .7;
}
span.play-icon {
  opacity: 1;
}
.info-txt {
  color: #ccc;
  padding: 2rem;
  text-align: center;
}
textarea#note {
  min-height: 20rem;
  min-width: 15rem;
}
.main ul {
    padding: 3rem 2rem;
}
h3.title {
    text-align: center;
    margin-left: 28%;
}
#subscribe h3.title {
  text-align: center;
  margin-left: inherit;
  margin-top: 2rem;
}
.row.major-cats {
    padding: 1rem 0;
    margin: 1rem 0;
}
.column.mcat-item {
    padding: 1rem 0;
    text-align: center;
}
section.jumbotron {
    margin-top: 10rem;
}
footer.footer {
  background-color: #ff9800;
}
footer li a {
    color: #bab2a5;
        color: #dbdbc2;
}
footer li {
    display: inline;
    list-style: none;
    color: #ccc;
    padding-right: 5rem;
}
.footer .container {
    border-top: 0;
    padding-bottom: 0.5rem;
    padding-top: 7.5rem;
    position: relative;
    text-align: center;
}
input[type='email']:focus, input[type='number']:focus, input[type='password']:focus, input[type='search']:focus, input[type='tel']:focus, input[type='text']:focus, input[type='url']:focus, textarea:focus, select:focus {
    border-color: #ff9800;
    outline: 0;
}
.main.container, .videoContainer {
  top: 10rem;
  margin-bottom: 15rem;
  min-height: 55rem;
  margin-top: -5rem;
}
.main.container form {
  padding: 4rem 0;
  margin-bottom: 8rem;
}
input[type='email']:focus, input[type='number']:focus, input[type='password']:focus, input[type='search']:focus, input[type='tel']:focus, input[type='text']:focus, input[type='url']:focus, textarea:focus, select:focus {
    border-color: #ff9800;
    outline: 0;
}
#filteringContainerSide {
  width: 0rem;
  display: none;
}
.each-wy {

}
.each-wy p {
  margin: 4rem 0;
  padding: 4rem 0;
}

.focus {
  background-color: #5f5f5f;
  width: 100%;
  margin-left: 2px;
}
.focus input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
footer a {
    color: #fff;
}
a.reset.button {
	border-radius: unset;
	border-right: solid 1px #c9c8be;
}
/*
* ########### Classes to be applied when side menu is opened #################
*/
.paramNav {
  margin-left: 40rem;
  width: calc(100% - 40rem);
}
.paramFilterCont {
  width: 40rem !important;
  display: block !important;
}
.paramVideoListHead {
  padding-left:20rem;
  margin-left:-20rem;
}
.paramVideoListCont {
  padding-left: 0rem;
  margin-left: 7rem;
}
.paramVideoListCont h4 {
  font-size: 1.3rem !important;
  min-height: 3.5rem !important;
}
.paramVideoListCont .videoList {
  padding-left: 0.5rem !important;
  margin-left: -5rem !important;
}
.paramVideoListCont .play-icon {
  margin-left: 6.8% !important;
}
/*
* Start of Tagify hacks
*/
tags > div > input {
  display: flex;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 3.8rem;
  width: 100%;
  padding: .6rem 1.0rem;
  background-color: transparent;
}
tags {
  border-radius: .4rem;
}
tags > div {
  display: inline-block;
  min-width: 10px;
  margin: 0px;
  padding: 0em 0.5em;
  padding-top: 1rem;
  padding-left: 1rem;
  margin-bottom: -1rem;
  position: relative;
  vertical-align: top;
}
tags > div > input.placeholder ~ span {
  opacity: 0.2;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  font-size: 1.3rem;
  padding-top: 1.3rem;
}
tags tag > div::before {
  background: #999999;
}
tags tag:hover div::before {
  background: #ebcfb3;
  border: .5px solid #ff9800;
  -webkit-box-shadow: 0 0 0 0 #ebcfb3 inset;
          box-shadow: 0 0 0 0 #ebcfb3 inset;
}
/*
* End of tagify hacks
 */

.navigation input[type='search'], .navigation input[type='text'], .navigation select {
  color: #f6ecdd;
}
option {
    text-align: center;
    padding: 0 0 0 50rem;
}
select:focus {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#ff9800" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
}
.overlay {
  position: absolute;
  top: 6.5rem;
  left: 2.5rem;
  right: 0;
  background: #43433366;
  transition: opacity 500ms ease-out;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
.popup {
  margin: 10px auto;
  padding: 20px;
  background: #504f4b;
  box-shadow: 0 0 80px rgba(0,0,0,.5);
  border-radius: 5px;
  /*width: 50%;*/
  position: relative;
  transition: all .5s ease-in-out;
}
.popup h2 {
  margin-top: 0;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #ff9800;
}
span.span-info {
    border: 1px solid;
    padding: 0.2rem 2rem 0;
    border-radius: 4px;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}
code {
  background: #5f5f5f;
}
pre {
  background: #51504c;
  border-left: 0.3rem solid #ff980d;
  overflow-y: hidden;
}
/*
* Loading indicator
*/
#wait-header {
  display: flex;
  justify-content: center;
  margin-left: 50%;
  z-index: 99;
  position: absolute;
  top: 15rem;
}
.row-wait {
  display: inline;

}
/**
* Tags on single video
**/
.tags.filterBtn {
  margin: .8rem .4rem;
  display: block;
  float: right;
}
span.tag {
  padding: 0.3rem 1.2rem;
  margin: .4rem;
  text-transform: capitalize;
  border: 1px solid #51504c;
  border-radius: 0.3rem;
  font-size: 1.2rem;
}
.center {
  text-align: center;
  font-size: 1.8rem;
}
.small {
  font-size: 1.4rem;
}

@keyframes bouncing-loader {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0.1;
    transform: translateY(-1rem);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
  margin-left: 50%;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-of-type(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-of-type(3) {
  animation-delay: 0.4s;
}
/*
* End of loading indicator
 */
@media (min-width: 1024px) and (max-width: 1380px){
  .videoList h4 {
      min-height: 10rem;
  }
  span.play-icon {
    margin-top: 3rem;
    margin-left: 10.5rem;
    position: absolute;
    font-size: 6rem;
    opacity: .7;
  }
  .videoWrapper {
  	position: relative;
  	height: 630px;
  }
  .paramNav {
    margin-left: 30rem;
    width: calc(100% - 30rem);
    display: inline-table;
    }
    .paramFilterCont {
    width: 30rem !important;
    display: block !important;
    }
}
@media (min-width: 751px) and (max-width: 1023px){
  body {
    font-size: 19px;
  }
  .navigation .navigation-title, .navigation .title {
    font-size: 2.1rem;
  }
  .navigation .navigation-list {
    margin-top: 0;
    margin-right: 0rem;
  }
  .navigation .navigation-item {
    margin-top: 0px;
    font-size: 1.2rem;
    margin-left: 1rem;
  }
  h1 {
    font-size: 3.1rem;
  }
  h2 {
    font-size: 2.8rem;
  }
  .header {
      padding-top: 5rem;
    }
  #searchParams select {
    width: 100%;
  }
  span.play-icon {
    margin-top: 3rem;
    margin-left: 13%;
    position: absolute;
    font-size: 6rem;
    opacity: .7;
  }
  .videoList h4 {
      min-height: 6rem;
  }
  a.column img {
    min-height: 15rem;
  }
  .videoWrapper {
  	position: relative;
  	height: 370px;
  }
  .tags.filterBtn {
    margin: .4rem .2rem;
    display: inline-block;
    float: initial;
}
  .column.column-75.videoNotes {
    max-width: 100%;
    flex: 0 0 0;
    padding: 0rem 0.1rem 1rem 0;
  }
  div#similarVideoListContainer {
    width: 100%;
    max-width: 100%;
}
  .paramNav {
  margin-left: 30rem;
  width: calc(100% - 30rem);
  display: inline-table;
}
.paramFilterCont {
  width: 30rem !important;
  display: block !important;
}
.videoHeaderContainer {
    padding-bottom: 9rem;
    padding-top: 1.5rem;
}
.sideNav .closebtn {
    left: 17rem;
    font-size: 35px;
}
}
@media screen and (max-width: 700px){
  body {
    font-size: 18px;
  }
  .navigation .navigation-title, .navigation .title {
    font-size: 1.5rem;
    margin-left: -2rem;
  }
  .navigation .navigation-list {
    margin-top: 0;
    margin-right: -2rem;
    font-size: 1.5rem;
  }
  .navigation .navigation-item {
    margin-top: 0px;
    font-size: 1.2rem;
    margin-left: 1rem;
  }
  #subscribe h3.title {
    font-size: 2rem;
  }
  #subscribe p {
    font-size: 1.2rem;
  }
  h1 {
    font-size: 3.1rem;
  }
  h2 {
    font-size: 2.8rem;
  }
  .header {
      padding-top: 5rem;
    }
  #searchParams select {
    width: 100%;
  }
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
  div.each-wy:nth-child(odd) {
    /* margin-bottom: 25rem; */
  }
  div.each-wy:nth-child(even) {
    margin: 25rem 0;
    margin-bottom: 40rem;
  }
  div.each-wy:nth-child(even) div:first-child {
    /* margin-top: 25rem; */
  }
  div.each-wy:nth-child(even) div:nth-child(2) {
    margin-top: -60rem;
  }
  .videoWrapper {
    position: relative;
    height: 340px;
  }
  .column.column-75.videoNotes {
    max-width: 100%;
    flex: 0 0 0;
    padding: 0rem 0.1rem 1rem 0;
  }
  .tags.filterBtn {
    margin: .4rem .2rem;
    display: inline-block;
    float: initial;
   }
  div#similarVideoListContainer {
    width: 100%;
    max-width: 100%;
}
  .paramNav {
  margin-left: 25rem;
  width: calc(100% - 25rem);
  display: inline-table;
}
.paramFilterCont {
  width: 25rem !important;
  display: block !important;
}
.videoHeaderContainer {
    padding-bottom: 9rem;
    padding-top: 1.5rem;
}
.sideNav .closebtn {
    left: 17rem;
    font-size: 35px;
}
}
/*
########### Media CSS ################
*/
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
  .navigation .navigation-title, .navigation .title {
    font-size: 1.5rem;
    margin-left: -1rem;
  }
  .navigation .navigation-list {
    margin-top: 0;
    margin-right: -2rem;
    font-size: 1rem;
  }
  .navigation .navigation-item {
    margin-top: 0px;
    font-size: 1.3rem;
    margin-left: 1rem;
  }
  .navigation .navigation-link {
    font-size: 1.3rem;
  }
  #subscribe h3.title {
    font-size: 2rem;
  }
  #subscribe p {
    font-size: 1.2rem;
  }
  h1 {
    font-size: 2.8rem;
  }
  h2 {
    font-size: 2.1rem;
  }
  .header {
      padding-top: 5rem;
    }
  #searchParams select {
    width: 100%;
  }
  span.play-icon {
    margin-top: 3rem;
    margin-left: 9rem;
    position: absolute;
    font-size: 6rem;
    opacity: .7;
  }
  .videoList h4 {
      /*min-height: 18.9rem;*/
      margin-top: 2rem;
      font-size: 2rem;
  }
  a.column img {
    min-height: 15rem;
  }
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  .videoWrapper {
   position: relative;
   height: 310px;
 }
 div#similarVideoListContainer {
    width: 100%;
    max-width: 100%;
}
.tags.filterBtn {
    margin: .4rem .2rem;
    display: inline-block;
    float: initial;
}
 .paramNav {
  margin-left: 23rem;
  width: calc(100% - 23rem);
  display: inline-table;
}
.paramFilterCont {
  width: 23rem !important;
  display: block !important;
}
.sideNav .closebtn {
    left: 17rem;
    font-size: 35px;
}
}