/* teddave.net */


::selection {
  background-color: hsl(0, 100%, 75%);
  color: gold;
  }
  *,
*::before,
*::after {
  box-sizing: border-box;
}

/* width */
::-webkit-scrollbar {
  width: 18px;
}

/* Track */

/* Handle */
::-webkit-scrollbar-thumb {
  background: #f8b9c9;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: hsl(0, 98%, 17%);
}

body{ 
  font-family: 'Raleway', sans-serif;
  background: hsl(0, 0%, 84%) url(chakra-7-50-2.png)  no-repeat 50% 2.3%;
  padding: 0px;
  margin:0px; line-height: 2rem;
  scroll-behavior: smooth;
  }

p { 
color: hsl(135, 3%, 24%);
font-size: 1.08rem;
font-weight: 500;
line-height: 1.62rem;
margin: 0;
padding: 0 12% 0 5%;
	}

h1{
   font-size: 3rem !important;
   padding: 60px 8% 50px 5%;
   margin: 0;
	 font-weight:600;
	font-variant: small-caps;
	color: #231f08;
  			 }


h2{
  font-size:1.6rem;
  padding:  12px 8% 0 5%;
  margin: 0px;
  font-weight: 600;
  color: hsl(0, 0%, 24%);
  line-height: 2.2rem;
}

h3{
  font-size: 1.3rem;
  padding: 12px 8% 0px 5%;
   margin: 0px;
   font-weight: 600;
   color:  hsl(0, 0%, 36%);	 }


h4{ font-size: 1.6rem;
  padding: 10px 8% 0px 2%;
  margin:0;
  line-height:2.4rem;
  font-weight: 500;
}

h5{ font-size: .8rem;
  padding: 0px 8% 16px 8%;
   margin: 0px;
  font-weight: 100;
  text-align: right;
  color: hsl(188, 24%, 27%);
}

h6{ font-size: 0.6rem;
  padding: 0px 30px 0px 0px;
  margin: 0px;
  color: hsl(0, 0%, 87%);
  padding:2px;}


@media all and (max-width : 600px) {
  h2 {font-size: 1.2rem;}
}


a:link {
text-decoration: none;
color: hsl(0, 0%, 13%);
border-bottom: 1px dashed hsl(0, 0%, 13%);
padding: 6px 3px;
}

a:visited {
	text-decoration: none;
	color: hsl(0, 0%, 13%);
	border-bottom: 1px dotted hsl(0, 0%, 13%);
	background:hsl(0, 0%, 100%);}

a:hover {
  color: #111;
  border-bottom: 2px solid hsl(12, 96%, 11%);
  background:hsl(0, 0%, 93%);}

a:active {
  text-decoration: none;
  color: hsl(12, 96%, 11%) !important;
  background:gold !important;
  opacity: 4;
  box-shadow: 0px 0px 60px hsla(0, 0%, 87%, 0.92);
}

a:focus {
  color: #201C1B !important;
  background: gold;
  border-bottom: 2px solid;
}

a:focus-visible  {
	border: 8px solid white;
	outline:none;
	background: gold;
	font-variant:small-caps;
	font-weight: 900;
	letter-spacing: .23rem;
	  box-shadow: 0px 0px 60px rgba(55, 55, 55, .9);
border-radius: 6px;}

img{
border: 0px;
margin: 0px;
padding: 0;
max-width: 100%;
height: auto;
}

hr {
   height: 23px;
   background: hsl(0, 0%, 90%);
   border: 0;
   width: 84%;
   margin: 50px 8% 30px 8%;
   box-shadow: 12px 12px 20px hsl(0, 0%, 95%);
}

blockquote {
  border-left: 23px solid hsla(43, 75%, 49%, .23);
padding: 32px ;
  font-style:italic;
  }





#gall::before {color: hsl(0, 100%, 50%);}

table {padding: 0 0% 0 7%;}

iframe {
  padding: 23px 0 0px 8%;
  border:0;}

/* unordered list */
ul{
  padding: 0 0 0 23px;
  margin: 0px 0 0 6%;
	list-style-type: circle;
}

ul li{
  list-style-type: disc;
   margin: 0px 0 0 6%;
   padding: 0px 0 0 23px;}

li{
  padding: 6px 12px 0px 0px !important;
	margin: 0px 0 0 23px !important;
  list-style-type:disc;
	font-weight: normal;
	}

/* the bullet points on the home page */

#top ul li{
	font-size: 2rem;	
  padding: 6px 12px 12px 23px !important;
	margin: 0px 0 0 12px !important;
  list-style-type:circle;
	font-weight:500;
	letter-spacing: .18rem;
	line-height: 2.8rem;
	max-width: 60rem;
	}
	
	
@media only screen and (max-width: 1200px)
{  #top ul li{
      font-size: 1.2rem;	
	  line-height: 2rem;
}
	
	}

	
#gall li {
 padding: 6px 12px 0px 3% !important;
	margin: 0px 0 0 1% !important;
  list-style-type:circle;
	font-weight: normal;
	color:grey;
}

#gall h2 {
	 padding: 6px 12px 0px 5% !important;
	 margin: 6px 12px 0px 0% !important;
}


.digital {
	color: darkgoldenrod;
    letter-spacing: -.23rem;
}


.retire {
	background: hsla(50, 97%, 59%, .32);
    padding: 5px 2px;
    border-radius: 3px;
}


	.tom {color: hsl(194, 93%, 27%);
  background: hsl(0, 0%, 100%);
  margin: 5% 15% 0 15%;
  padding: 23px;border: 0px dashed hsl(0, 0%, 80%);
	border-radius: 4px;
  font-size: 1.2rem;
  text-align: center;}

	.fas, .far {
  padding: 0 0 0 0%;
  color: hsl(194, 93%, 27%); }

.quote {
  border-left: 23px solid hsl(0, 0%, 15%);
  padding: 2% 20% 2% 12%;
  margin: 1% 0 0 2.3%;}

.sml {
  font-variant:normal;
  padding: 2.3% 0 0 4%;
  letter-spacing: .7rem;
   font-weight: 400;
   font-size:.5em;
   }

.sml4{
font-size:.7rem;
letter-spacing: .1rem;
padding:  8px 6px 8px 6px;
color: hsl(0, 0%, 100%);
background: hsl(188, 24%, 27%);
margin: 0 8px 8px 0;}

.lge { font-size: 2rem;}

.lge2 { font-size: 1.4rem !;
line-height: 2.3rem;
}

.most {color: hsl(12, 96%, 5%);}

.artist {color: hsl(51, 100%, 50%);}

.col1 {
  columns: 140px 3;
  padding: 0% 8% 2% 8%;
  column-gap: 100px;
  }

.col2 {
  columns: 100px 5;
}


@media only screen and (max-width: 1200px)
{.col1 {  columns: 100px 2;}

.col2 {  columns: 100px 3;}
}


@media only screen and (max-width: 600px)
{.col1 {  columns: 100px 1;}

.col2 {  columns: 100px 2;}
}


/* margin lefts / margin rights - to centre content */
#main, #foot, #top, nav, #site_content
{ margin-left: auto;
  margin-right: auto;
}

/* main container -------------------------------- */
#main
{width: 80%;
 height: auto;
background: transparent;
margin:0 10% 23px 10%; padding: 0 ;
  box-shadow: 0px 0px 60px hsla(0, 0%, 9%, 0.4);
}

@media all and (min-width : 2001px) {
#main {width: 60%; margin: 0 20% 23px 20%;}
}

@media all and (max-width : 2000px) {
#main {width: 80%; margin: 0 10% 23px 10%;}
}

@media all and (max-width : 1999px) {
#main {width: 85%; margin: 0 7.5% 23px 7.5%;}
}


@media all and (max-width : 1599px) {
#main {width: 100%; margin: 0 0 23px 0;}
}




/* logo */
#top
{ width: 100%;
  height: auto; 
  background: hsla(0, 0%, 99%, 0.5) url(noise.png) repeat;  
  padding: 0%  0 4% 0;
    }
    
  #toplt {height: auto; padding:0; width: 100%; }

  #toprt {width: 0%; height: auto; padding:0;}

  @media all and (max-width : 800px) {
	  #toprt, #toplt {
      width: 100%;}
  }


 #top a:link, 
 #top a:visited {	
  text-decoration: none;  
  border-bottom: 0 !important;
  color: #000 !important;
   text-shadow: 0 0 0 black;
}

#top a:hover {	
background:transparent;
  border-bottom: 0;
  color: white !important;
  transition:3.2s;
      text-shadow: 4px 4px 230px black;

  }


#top a:active {	
  text-decoration: none; 
	color: black !important;
   transition: 1.3s;
   background: hsla(195, 49%, 78%, .32) !important;
	}

*/
#top h1 {
  font-size: 6rem !important;
  padding:10% 0 0% 6%;
  margin: 0px;
  font-weight: 900;
  font-family:sans-serif; 
    }

  #top h1:hover,
    #top h3:hover {
   opacity:1;
   
  }
*/

#top h2 {
  padding: 20px 15% 2px 4%;
    margin:0;
  color: hsl(0, 0%, 87%);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 2.3rem;
   color: hsl(0, 0%, 24%);
}


#top h3 {
  margin:40px 0 0 10px;
  letter-spacing:1.08rem;
  color: hsl(51, 100%, 90%);
  color: black;
text-shadow: 2px 2px 23px white;
    font-size: 3rem;
  font-weight: 500;
  font-variant:small-caps;
  }


/*
    .b {
      color: #ff8080; padding: 12px 0px; }

    .r {
        color: #f00; padding: 12px 0px;  }

    .i {
      color: #ff0; padding: 12px 0;  }

      .x {
      color: #fc9; padding: 12px 0px;   }

    .t {
      color: tomato; padding: 12px 0px;   }

    .o {
      color: #800; padding: 12px 0px; }

    .n {
      color: #ff9; padding: 12px 0px;  }
      
      .d {
        color: #ff8000; padding: 12px 0px; }

      .g {
        color: #690; padding: 12px 0px; }

        .a {
          color: #f00; padding: 12px 0px;  }
    
          .l {
            color: #090; padding: 12px 0px; }
      
      


.a:hover, .b:hover, .c:hover, .d:hover, e:hover, f:hover, g:hover, h:hover, i:hover {
  transition: 3200ms;
  color: white;
  font-weight: 600;
}
*/

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


    #top h3 {
      padding: 2% 15% 0px 4%;
      letter-spacing: 0.4rem;
      font-size: 3.2rem; 
      }

}


@media only screen and (max-width: 800px)
{
    #top h3 {
      padding:4% 0% 0 5%;
      letter-spacing: 0.32rem;
      font-size: 3rem; 
	  margin: 0;
      }
}


@media only screen and (max-width: 600px)
{
    #top h3 {font-size: 1.7rem;
		
	}
}

  .c {
    color: #800000; 
    padding: 12px 23px 12px 0;  
    font-weight: 600; 
  }


#top ul{ 
  padding: 0 0 0 12px;	
  margin: 0px 0 0 8%;
  list-style-type:disc;
}





	.anton-regular {
  font-family: "Anton", sans-serif !important;
  font-weight: 900;
}

#toplt h1{
   font-size: 10rem !important;
   padding: 14% 0 2% 5%;
   margin: 0;
   color: black;
   font-variant:normal;

}




@media all and (min-width : 1700px) {
#toplt h1 {font-size: 12rem !important;
   padding: 12% 0 2% 5%;
}
	}

	  
@media all and (max-width : 1024px) {
#toplt h1 {font-size: 7rem !important;
padding:14% 0 0% 4%;
}
	}
	
	
	
	@media all and (max-width : 800px) {
#toplt h1 {font-size: 6rem !important;
padding:20% 0 1% 4%;
}
	}

	@media all and (max-width : 600px) {
#toplt h1 {font-size: 3.5rem !important;
padding:25% 0 0% 4%;
}
	}


/*
https://codepen.io/kevinpowell/pen/OJPPGwN - image in text

#top {
  background-image: url(../img/sunrise.jpg);
  background-size: cover;
  background-clip: text;
  color: transparent;

  /* other styling
  font-family: var(--ff-title);
  font-weight: var(--fw-title);
  text-transform: uppercase;
  font-size: calc(1rem + 1vw);
  line-height: .8;
  text-align: center;
  margin: 0;
}
*/


/* navigation menu */

#gall
{ width: 100%;
  height: auto;
 background: transparent url(noise.png) repeat;;
  padding:4px 0;
 }

@media only screen and (max-width: 480px){	
  #gall{ 
  height: auto; 
  border-bottom:0px; }
}

#gall img {width: 100%;}


/* main content */
#site_content
{ overflow: hidden;
  width: 100%;
  height: auto;
  background: hsl(0, 0%, 93%, 0.4) /*url(noise.png)repeat*/;
  padding: 0;
}


/* sidebar */
#left
{
	float: left;
	width: 60%;
	height: auto;
	padding: 0%;
 	margin: 0px 0.5% 3px 1%;
	text-align: left;
}


#right
{ text-align: left;
  float: right;
  width: 34.5%;
  height:auto;
 	margin:0 1% 3px 1%;

 }


@media all and (max-width : 800px) {
	#left, #right {
    width: 100% !important;
    padding: 0;
    float:left;}

  #left img {width: 100%;
    margin: 0;
    height: auto;}
	}



#over {
  width: 100%;
  height: auto;
  background: transparent url(noise.png) repeat;
  float: left;
  margin: 0%;
  padding: 0;
   }

#over p { max-width: 70em;}


#explain {
  width: 100%;
  height: auto;
  background: white; }

#explain img {
  width: 100%;
  height: auto;}


/* footer */
#foot
{ height: auto ;
  width: 100%;
  margin:0 0;
  background: #201C1B;
  padding: 20px 0 0 0;
  border-bottom: 12px solid black;
 }


#foot a:link, #foot a:visited {
  text-decoration: none;
	color: goldenrod;
  border: 0;
	padding: 2px 6px;}

#foot a:hover {
  background: transparent !important;
	color: gold;
  padding: 2px 6px;
  border-bottom: 0;}

  #foot a:active {
    text-decoration: none;
    color: #350B01 !important;
    background:gold !important;
    box-shadow: 0px 0px 120px rgba(0, 0, 0, 1);
    padding: 8px 4px;
  }


#foot h1 {
	color: white;
    padding: 5% 0 4% 5%;}

#foot h2 {
   font-size: 1.6rem;
   letter-spacing: .2rem;
   padding: 8px 5% 0px 5%;
   margin: 0px;
   background: transparent;
    color: white;
   border: 0;
}

#foot h3 {
padding: 12px 23px 0 5%;
font-size:.9rem;
color: white;
letter-spacing: .05rem;
}

#foot h4 {
	color:#bbb;
	font-size: .85rem;
    padding: 8px 48px 0px 5%;
    font-weight: 600;
    letter-spacing: 0.05rem;
    line-height: 1.4rem;
	}

@media all and (max-width : 600px) {
	#foot h2 {
    font-size: 1.2rem;}
}

/* navigation */

.skip-nav-link {
position:absolute;
transform: translateY(-120%);
background: black;
border-radius: 0 0 0.25rem 0.25rem;
color: white !important;
padding: 0.5rem 1.5rem;
left: 2rem;
transition: transform .325s;
}

.skip-nav-link:focus {
  transform: trasnlateY(0);}



#nav-lt {
  width: 100%; 
  height: auto; 
  float: left; }

#nav-rt {
  width:0;
  height: auto;
  float: right;
  padding:0;
  text-align:right !important;  }


nav {
  margin: 0;
  background:#000;
  border-bottom: 0px;
  width: 100%;
  position: fixed;
  z-index: 23;
  height:60px;
  padding:12px 0 0 0;
  margin: 0;}


@media all and (min-width :  1600px) {
nav {width: 85%;}
}

@media all and (min-width :  2001px) {
nav {width: 60%;}
}

/* code for menu-- http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu/ --*/
.toggle, [id^=drop] { 
  display: none;}

/*nav:hover {background: #0792bc;  transition: 2s ease;}*/

nav a {
  display: block;  
  padding:12px 18px !important;
   border: 0 !important;
  text-decoration: none;
  letter-spacing: 0.08rem; 
    /* here for height of menu itrems... line height */
}

nav a:hover {
padding: 12px 18px 4rem 18px!important; 
background: transparent !important; 
opacity: 1;
transition: 5.2s; 
border-radius: 12px;
}

nav a:active {  
  color: white !important;}

nav a:visited { 
  background: hsl(0, 100%, 10%);}

nav:after {
  content: " "; 
  display: table;  
  clear: both;
}



/* --------------- FILTER RESULTS FROM BUTTON*/


* {
  box-sizing: border-box;
}

.btnbg {
  background: var(--grey); 
  padding: 0px; 
  margin: 0% 0% 2% 5%; 
  padding: 12px 3% 0 3%;  
  box-shadow: 0px 0px 50px rgba(23, 23, 23, .1);
width: 80%;
border-radius: 6px;
border: 1px dotted #eee;
}


.btnbg:hover {background: hsl(12, 8%, 82%);transition: 7s;}
.btnbg:active {background: #ddd; transition: 1s;
}


.btn {
  background: #eee;
  color: #777;
  font-size: .95em;
  padding:15px 8px;
  margin: 10px 0px 20px 0.5%;
  border: 1px solid #aaa;
  border-radius: 3px;
}

.btn:hover {
  background: #fff;  
  color: black;  
  border: 1px solid #800; 

}

.btn:active {
  background: #283438;  
  color: white;  
  border: white 1px solid;  
  outline: none;
}

.active {
  text-decoration: none;
  background: #690;
  color: white;
  border: 1px solid white;}



.filt{
  background: var(--grey);
  float: left;
  height: auto;
  padding: 0px;
  width: 100%;
  padding:  0.5% 0;
}





/* overlay menu */
/*https://www.w3schools.com/howto/howto_js_curtain_menu.asp */


.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
 background: rgba(206,209,207, 0.7) url(chakra-7-50-2.png) 50% 50% no-repeat;
  overflow-x: hidden;
  transition: 1.2s;

}


.overlay-content {
  position: relative;
  top: 12.5%;
  width: 80%;
 padding: 0 0 0 10%;
  margin-top: 20px;

}


@media all and (max-width :  600px) {
	
.overlay-content {
  position: relative;
  top: 12.5%;
  padding: 0 0 0 2%;
  width: 110%;}
}



@media all and (min-width :  1800px) {
	
.overlay-content {
  position: relative;
  top: 12.5%;
  width: 70%;}
}


.overlay a {
  padding:16px 20px 16px 20px !important;
  margin: 3% 15% 3% 0;
  border: 1px dotted #eee;
  border-radius: 3px;
  background: #3d3d3d !important;
           box-shadow: 0px 0px 60px hsla(0, 0%, 9%, 0.23);
  text-decoration: none;
  font-size: 1.7rem;
  letter-spacing: .23rem;
  font-weight: 900;
  color: #ddd!important;
  display: block;
  opacity: .7;
  transition: 0.3s;
  text-align: left;
}

.overlay a:hover, 
.overlay a:focus {
 color: white !important;
  background:black !important;
  opacity: .9;
 padding:16px 20px 16px 20px !important;
 text-shadow: 0 0 0 !important;
}


.overlay a:active
{
  background:white;
  color: gold!important;
  opacity: .8;
  border: 1px solid black;
}

.overlay 
.closebtn {
  position: absolute;
  top: 10px;
  left: 45px;
}


@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}