.theme-dark {
   --color-primary: #444444;
    --color-primary-op: rgba(44,44,44,.8);
   --color-secondary: #666666;
   --color-accent: #888888;
   --font-color: #ffffff;
    --xtra-color: orange;
    
}

.theme-light {
   --color-primary: #ffffff;
    --color-primary-op: rgba(255,255,255,.8);
   --color-secondary: #dddddd;
   --color-accent: #bbbbbb;
   --font-color: #666666;
	--xtra-color: green;
}





 * {
  box-sizing: border-box;
}
   
    
 body {
 /* background-color: #f1f1f1;*/
  padding: 0px;
 margin: 0;     
  font-family: Arial;
  }
    

body{
  /* Location of the image */
/*  background-image: url(img/img4.jpg); */

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
 /* background-color: #464646;*/

}
 
    
    
 /*   
#parent > *:first-child {
    margin-top: 0px;
}  
    
*/
    

.top {
    
 /*   position: -webkit-sticky;*/
 /* position: sticky;*/
    position: static;
   top: 0; 
    
    
}





    /* here starts the menu css style */
    
.header a {
  color: var(--font-color);
}

/* header */

.header {
  background-color: var( --color-primary);
/*  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
  position: fixed;
  width: auto;
  z-index: 10;
    top: 5px;
    right: 0;
   
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: var( --color-primary);
    
}

.header li a {
  display: block;
 padding: 5px 5px;
  border-right: 1px solid var(--color-secondary);
  text-decoration: none;
    background-color: var( --color-primary);
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: var(--color-accent);
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
 /* padding: 2px 3px;*/
    padding-left: 20px;
    padding-bottom: 0px;
    padding-top: 0px;
  text-decoration: none;
    background-color: var( --color-primary);
   
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 15px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: var(--font-color);
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: var(--font-color);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
   
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 800px) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 5px 5px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

       
     /* here ends the menu css style */
    

    /* here STARTS the VID_CONTAINER css style */
    
   .vid-container {
		    position: fixed;
		    padding-bottom: 0px;   
		    padding-top: 0px; 
		    height: 50px; 
			width: 100%;
			z-index:6;
          /*  background-color: #333; */
			bottom: 50px;
            text-align: center;
            opacity: 1;
          /*  left: 0;*/
            background: var( --color-primary);
            transition: .5s ease;
		}
		   
    
    .vid-container iframe:hover {
		    position: fixed;
		    padding-bottom: 0px;   
		    padding-top: 0px; 
		    height: 40%; 
			width: calc (60% - 8em);
			z-index:6;
            background-color: var(--color-secondary);
			bottom: 50px;
            text-align: center;
            opacity: 1;
           /* left: 0;*/
            background: var(--color-secondary);
            transition: .5s ease;
         /*  border: 5px solid var( --color-primary); */

		}
    
           
		   	
		   
		.vid-container iframe,
		.vid-container object,
		.vid-container embed {
		    position: fixed;
			display: block;
			margin-left: auto;
			margin-right: auto;
		    background-color: var(--color-secondary);
		    width: calc(60% - 8em);
		    height: 50px;
			transition: .5s ease;
         /*    left: 0;*/
		bottom: 50px;
		opacity: 1;
            z-index: 6;
         /* border-radius: 5px; */
           /*  border: 5px var( --color-primary);*/

		}

/*
vid-container.stick {
  position: -webkit-sticky;
  position: fixed;
    bottom: 30px;
    opacity: 1;
    background-color: #333;

  }
   */ 
     /* here ENDS the VID_CONTAINER css style */
    
    
    /* here STARTS the DROPDOWN MENU css style */
    
    div.down {
       background-color: var( --color-primary);
        width: 100%;	
    /*   position: sticky; */
    /*    margin-top: 35px; */
          z-index: 4;
        
        
        position: -webkit-sticky;
  position: sticky;
  top: 0;
 
 /* padding: 50px; */
      
        
        
        
    }
      
    
 div#down nav {
    font-family: monospace;
        text-align: center; 
      margin: 0;
    padding: 5px;
     z-index: 4;
     
}

div#down  ul {
  background: var( --color-primary);
    list-style: none;
    margin: auto;
     padding-left: 0;
       display: inline-block; 
  /* margin-top: 50px;*/
   
}

div#down  li {
    color: var(--font-color);
     background: var( --color-primary);
    display: block;
    float: left;
    padding: 1rem;
    padding-top: 0.2rem;
    padding-bottom: 0.5rem;
    
    position: relative;
    text-decoration: none;
  transition-duration: 0.4s;
}
  
 div#down li a {
  color: var(--font-color);
}

div#down  li:hover {
    background: var(--color-accent);
    cursor: pointer;
    
}

    
    
    
    
 div#down ul li ul {
    background: var( --color-primary);
    visibility: hidden;
  opacity: 0;
  min-width: 100px;
    position: absolute;
  transition: all 0.4s ease;
  margin-top: 0.5rem;
    left: -1rem;
  display: none;
}

 div#down ul li:hover > ul,
 div#down ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

div#down ul li ul li {
    clear: both;
  width: 100%;
}

    

    
    
    
/* here ENDS the DROPDOWN MENU css style */   
    
    
    
    
  
/* here starts the LIST MATRIX css style */
    
    
img.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 800px;
    
}    
    
    /* Center website */
.listdiv {
 /* max-width: 1400px;*/
  margin: auto;
  min-height: 1000px;	
  width: 90%;
}

h1 {
  font-size: 30px;
    word-break: break-all;
    font-family: Roboto, sans-serif;	
}

.row {
  margin: 10px - 16px;
  
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
  
}

/* Create four equal columns that floats next to each other */

.column {
  float: left;
  width: 20%; 
  display: none; /* Hide all elements by default */
  
}



/* Create two equal columns on mobile devices */
@media only screen and (max-width: 800px) {
 .column {
  float: left;
  width: 50%;
  display: none; /* Hide all elements by default */
    
}
    
}

@media only screen and (max-width: 800px) {

.toplogo {
        
        src: url('new_logo_tiny_orig.png');
    }

}

/* Clear floats after rows */ 
.row:after {
  	content: "";
  	display: table;
  	clear: both;
 
}

/* Content */
.content {
  	background-color: var(--color-secondary);
  	padding: 5px;
	border-radius: 8px;
}

.title {
	color: var(--font-color);
}


.content:hover .image {
	opacity: 1;
 	border-radius: 8px;
}

.content:hover {
	 background-color: var(--font-color);
 	transition: .5s ease;
}

.content:hover .title {
	color: var(--color-secondary);
}


/* The "show" class is added to the filtered elements */
.show {
  	display: block;
}

/* Style the buttons ####################*/
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: var(--font-color);
  cursor: pointer;
	display: inline-block;
	font-size: 12px;
}

.btn:hover {
  background-color: var(--color-accent);

}

.btn.active {
  background-color: var(--color-secondary);
  color: white;
}

/* Style list title ###################*/
    
    
    
.title {
	text-align: center;
}

@media only screen and (max-width: 800px) {
    .title { font-size: 10px;}
    }
    
/* Style image ######################## */
.image {
	opacity: 0.5;
 	transition: .5s ease;
	border-radius: 8px;
	cursor: pointer;
   
}

    
/* here ends the LIST MATRIX css style */    
    
    
/* ################ footer start ############ */
.footer {
	font-size: 12px;
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: var( --color-primary);
   color: var(--font-color);
   text-align: center;
   height: 50px;
    z-index: 3;
}
    
/* ################ footer end ############ */
    
    
    .top {
        z-index: 9;
    }
    
    .down {
        z-index: 4;
    }
    
    .listdiv {
        position: relative;
        margin-top: 0px;
        margin-bottom: 150px;
        z-index: 1;
        padding-top: 0px;
        width: 95%;
    }
    
  /*  .clicker {
        position: relative;
        margin-top: 0px;
        
        z-index: 1;
        padding-top: 0px;
        width: 100%;
    }
    */
    /* youtube control stuff */
    .buttons {
        width: 100%;
        background: var( --color-primary);
        position: fixed;
        text-align: right;
        right: 0px;
        bottom: 30px;
        z-index: 3;
        height: 50px;
    }
    
    
    /*
        .buttons {
	position: relative;
	margin: 0 auto 0 auto;
	padding: 3px;
	float: right;
	display: block;
	background-color: #eee;
	border-radius: 4px;
    bottom: 30px;
} */
    
/*.buttons:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(238, 238, 238, 0);
	border-top-color: #eee;
	border-width: 10px;
	margin-left: -10px;
} */
    
    .button {
   /* padding: 10px ; */
	font-weight: bold;
	letter-spacing: 5px;
	outline: none;
	cursor: pointer;
	color: white;
	background-color: var(--color-accent);
	border: none;
    border-radius: 4px;
    font-size: 10px;
/*    margin: 2px auto 0 auto; */
    width: 8em;
    height: 50px;
     visibility: visible;
}
    
    
    /*
    
    @media only screen and (max-width: 800px) {   
.button {
   	font-weight: bold;
	letter-spacing: 5px;
	outline: none;
	cursor: pointer;
	color: white;
	background-color: #7F8C8D;
	border: none;
    border-radius: 4px;
    font-size: 10px;
    width: 8em;
    height: 50px;
     visibility: visible;
}
    
    }
    */
    
    
    
    
#play-button {
	background-color: #555555;
}
#play-button:hover {
	background-color: #888888;
}
#pause-button {
	background-color: #E67E22;
}
#pause-button:hover {
	background-color: #D35400;
}
#stop-button {
	background-color: #E74C3C;
}
#stop-button:hover {
	background-color: #C0392B;
}
#pause-button {
	margin-left: 15px;
}
    
    #stop-button {
	margin-left: 15px;
    margin-right:15px;
}

    
/* ############################### */
#cntrl {
        width: 100%;
        background: var( --color-primary);
        position: fixed;
        text-align: right;
        right: 0px;
        bottom: 0px;
        z-index: 3;
    }
    
   #items {
        position: static;
       
       z-index: 4;
       right: 0px;
    }
    
    .main_cnt {
        
        bottom: 200px;
        
    }
    
    
    /* ################ checkbox hack ######## */
    
    input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

label[for="toggle"] {
	display: block;
	background: var( --color-primary);
	padding: 10px;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 8px;
	color: var(--xtra-color);
        font-weight: bold;
        font-size: 12px;
        position: fixed;
        width: 8em;
        right: 5px;
        z-index: 6;
        height: 50px;
    cursor: pointer;
   
}

    label[for="toggle"]:hover {
        
        background: var(--color-accent);
    }    
 
    
     input[type=checkbox]:checked ~ label[for="toggle"] {
	       transform: rotate(180deg)
}
    
    
input[type=checkbox]:checked ~ iframe {
	       position: fixed;
            padding-bottom: 0px;   
		    padding-top: 0px; 
		    height: 40%; 
			width: calc (100% - 8em);
			z-index:4;
            background-color: var(--color-secondary);
			bottom: 50px;
            text-align: center;
            opacity: 1;
            left: 0;
            background: var( --color-primary);
            transition: .5s ease;
   /* border: 5px solid rgba(0,0,0,1);*/
}
    
    
   
    #overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 80%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 10%;
  right: 0;
  bottom: 0;
  background-color: var(--color-primary-op); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  
}
    
    
    
#overlay2 {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 80%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
   /* left: 10%;*/
  top: 0;
 left: 10%; 
  right: 0;
  bottom: 0;
  background-color: var(--color-primary-op); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  
}    
    
 
#overlay3 {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 40%; /* Full width (cover the whole page) */
  height: 50%; /* Full height (cover the whole page) */
   /* left: 10%;*/
  top: 25%;
 left: 30%; 
  right: 0;
  bottom: 0;
  background-color: var(--color-primary-op); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  border-radius: 8px;
}        
    
   
    #overlay4 {
  position: fixed; /* Sit on top of the page content */
 display: none; /* Hidden by default */  
  width: 90%; /* Full width (cover the whole page) */
/* height: calc(70% - 150px); */  
        /* Full height (cover the whole page) */
   /* left: 10%;*/
  
 left: 5%; 
 top: 55px;
 bottom: 85px;
  background-color: black; /* Black background with opacity */
  z-index: 6; /* Specify a stack order in case you're using a different order for other elements */
 border-radius: 10px;
 border: 5px var(--color-secondary);
}    
    
    
/*.iframewrap {
    position: relative;
    overflow: hidden;
    
    padding-top: 56.25%;
}    */
    
    
   div#overlay4 iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}
    
   #x {
    position: absolute;
    background: var( --color-primary);
    color: var(--font-color);
    top: -10px;
    right: -10px;
    z-index: 8;
    border: 3px solid var(--font-color);
    border-radius: 12px;
}
    
    #text{
  position: absolute;
  top: 50%;
  left: 50%;
    width: 100%;
  font-size: 1em;
  color: var(--font-color);
  transform: translate(-50%,-50%); 
  -ms-transform: translate(-50%,-50%); 
       
}
    /*
    .ads {
        background-color: grey;
    }
      */

    img.toplogo {
        position: fixed;
 /* position: sticky;*/
  top: 0;
        left: 10;
 /* width: 200px;*/
        z-index: 15;
    }

/* social code */

a.insta::before { 
font-family: FontAwesome;
  content: "\f16d";
  /*font-size: 20px;*/
  color: var(--font-color);
 
}

a.fb::before { 
font-family: FontAwesome;
  content: "\f082";
/*font-size: 20px;*/
color: var(--font-color);

}

/*
#info {
    position: absolute;
    background: black;
    color: white;
  top: -5px; 
    left: 0px;
    z-index: 8;
    border: 1px solid white;
    border-radius: 3px;
}
  */

.backImg {
position: fixed;
/*background-image: url('img/beach.jpg');*/
  left: 0px;
  top: 0px;
  width: 100%;
   height: 100%; 
z-index: -1;
filter: blur(6px);
background-attachment: fixed;
  }

#myDiv2 {
position: fixed;
/* background-image: url(img/rooftops.jpg); */
  left: 0px;
  top: 0px;
  width: 100%;
   height: 100%; 
    z-index: -5;

  /*  filter: sepia(50%) blur(8px);*/
    filter: blur(6px);
background-attachment: fixed;
    background-color: var( --color-primary);
  }

#themesw {
    position: fixed;
    right: 0px;
  bottom: 10px;
       z-index: 15;
}