/* Theme Name: Creative Digital Author: Josiah Orange */


/*https://www.tipsandtricks-hq.com/query-or-show-a-specific-post-in-wordpress-php-code-example-44*/
/*https://developer.wordpress.org/themes/basics/template-hierarchy
/*/
/*https://developer.wordpress.org/themes/template-files-section/taxonomy-templates
/*/

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Light.ttf');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'OpenSans';
	src: url('fonts/OpenSans-Regular.ttf');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}


@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Bold.ttf');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Thin.ttf');
    font-style: normal;
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light.ttf');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}


@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.ttf');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Italic.ttf');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Medium.ttf');
    font-style: normal; 
    font-weight: 500;
    font-display: swap;
}


@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Bold.ttf');
    font-style: normal; 
    font-weight: 700;
    font-display: swap;
}




html{
    height:100%;
}
p {
    font-weight:400;
    line-height: 1.75;
    margin-bottom: 2rem;
    color: #fff;
}
body {
    font-family: Roboto;
	font-weight:400;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow: auto;
	/*user-select: none;*/
    background-color: rgb(18, 18, 19);
    color:#fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    

}
body h1 {
	font-weight:800px;

}
.container {
    padding: 50px;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    min-width:100%;
    
}
.thincontainer{
    min-width:950px;
}
a:link {
    color: #fff;
    text-decoration: none;

}
a:visited {
    color: #fff;
    text-decoration: none;

}
.grey-background {
    background-color: gray;
    border-radius: 20px;
}
.space {
    margin-top: 50px;
}
.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/*Colours: - 0, 131, 255 #FF9D00;
rgb(255, 124, 0);
;
*/


/*Blog Single Styles*/


.blogcontainer {
    max-width: 900px;
}

.blogcontainer h1{
    font-size: 3rem;
    color: #fff;
    font-weight: 500;
	padding:8px;
    padding-bottom: 10px;
	padding-left:0px;
    margin-top:10px;
    margin-bottom:30px;
}

.blogcontainer h2 {
    color: #fff;
    font-size: 2.6rem;
    font-weight: 700;
    padding:15px;
    padding-left:0px;
    margin-top:30px;
    margin-bottom:50px;
	/*
    background-color: rgb(212, 212, 212);
    border-style: solid;
    border-radius: 5px;
    border-color:#ebeaea; ;
    text-transform: uppercase; */
}
.blogcontainer h3 {
    font-size: 2.1rem;
    color: #fff;
    font-weight: 500;
	padding:8px;
    padding-bottom: 10px;
	padding-left:0px;
    margin-top:10px;
    margin-bottom:30px;
	
	/*
    padding-left: 50px;
    padding-right: 50px;
	
	
    background-color: rgb(231, 231, 231);
    border-style: solid;
    border-color:#e4e4e4; ;
    text-transform: capitalize; */

}

.blogcontainer h4 {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 300;
	padding:10px;
    padding-bottom: 10px;
	padding-left:0px;
    margin-top:10px;
    margin-bottom:20px;
	
	/*
    background-color: rgb(236, 236, 236);
    border-radius: 5px;
    text-transform: capitalize;  */


}
.blogcontainer p {
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.75;
    margin-bottom: 2.25rem;
	
	
}

.blogcontainer li{
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.75;
    color: rgb(95, 95, 95);

}

.blogcontainer a{
    text-decoration: underline;
    color: rgb(38, 182, 232);
    font-weight: 500;
}

.blogcontainer figcaption{
	color: #fff;
	font-weight: 300;
	margin: 0;
	text-align: center;
	padding: 10px;
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.75;
	margin-bottom: 2.25rem;
}

.blogcontainer figcaption a{
	    color: black;

}

.blogcontainer img{
    margin-bottom: 0px;
    padding-bottom: 0px;	
    margin-top:10px;
    cursor:pointer;
    height:auto;
}

.blogcontainer img[src*="png"]{
    border-style: none;
}

.blogcontainer .image-gallery figure{
    align-items: flex-start;
}   

#imgLightbox{
    display: flex;
    visibility: hidden;
    align-items: center;
    justify-content:center;
    position: fixed;
    top:0;
    z-index:2000;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0, 0, 0, 0.9);
}

#lightboxImg{
    max-height: 80%;
    max-width: 80%;
}


#lightboxX{
    color: #fff;
    position: absolute;
    top:50px;
    right: 30px;
    cursor: pointer;
    font-size: 2rem;
}

#toc{
    padding:30px;
    border-radius: 10px;
    width:100%; 
    border-style: solid;
    border-color:rgb(221, 221, 221);
    border-width: 2px;
    position: relative;
}

#toc-header{
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 5px; 

}

#toc-list{
    list-style: none;
    padding:0;
    margin:0;
}

#toc-list a{
    font-size:1.3rem;
    text-decoration: none;
    color:rgb(95,95,95);

}

#toc-list a:hover{
    text-decoration: underline;
}

#toc .toc1 a{
    font-size: 1.6rem;
    font-weight: 600;
    padding-left: 10px;

}
#toc .toc2 a{
    font-size: 1.2rem;
    padding-left: 10px;

}

#toc .toc3 a{
    padding-left: 40px;
    font-size: 1.1rem;


}
#toc .toc4 a{
    padding-left: 60px;
    font-size: 1rem;


}

#tocarrow{
    position: absolute;
    top: 40px;
    right: 30px;
    font-size: 2rem;
    color: rgb(114, 114, 114);
    cursor: pointer;
}

#tocontent{
    display:none;
}




::selection{
    background-color: rgb(239,152,24);
	color:#000;
    border-radius: 10px;
	
}

.relatedarticles h4{
	font-size:2.3rem;
	font-weight:300;
    text-align:center;
    padding:30px;
}

/*Header Styles*/


header {
    width: 100%;
    min-height: 30px;
    color: rgb(179, 153, 153);

}

#headercontainer{
    display:flex;
    align-items: flex-start;
    justify-content: left;
    height:auto;
    color:white;
    font-size: 1rem;
    padding:40px 20px;
    transition: 0.2s;
    font-weight: 300;


}


#stickyheader{
    background-color: rgb(18, 18, 19);
    position: sticky;
    top: 0px;
    z-index: 1020;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:100%;
    transition: 0.2s;

 
}

#trans-stickyheader{
    position: sticky;
    top: 0px;
    z-index: 1020;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    transition: 0.4s;
    background-color:rgb(18,18,19,0);

}

#trans-stickyheader:hover{

    /*background-color:rgb(9, 60, 73);*/


}

header .container a #mobilelogo {
    display: none;
}
header #top-bar {
    list-style-type: none;
    padding: 20px 0px;
	margin:0;
    display: flex;
    justify-content: center;
    align-items: center;
	width:100%;
	max-height:70px;
}
header #top-bar li {
    flex: 1 1 0px;
    flex-basis: 0;
    text-align: center;
    min-width: 200px;
    width:100%;
	transition:2.0s;
	position:relative;

}
header #hamburger {
    display: none;
    cursor: pointer;
    font-size: 30px;
}
header li a:link {
    color: #fff;
    text-decoration: none;
	width:100%;
	height:100%;
	
}
header li a:hover {
    text-decoration: none;
	width:100%;
	height:100%;
}
header li a:visited {
    color: #fff;
    text-decoration: none;
	width:100%;
	height:100%;
	
}

header a{
    background: linear-gradient(to right, rgb(226, 135, 16), rgb(230, 152, 8) 50%, rgb(255, 255, 255) 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position 275ms ease;
	position:relative;
	z-index:1000;
	text-decoration:none;
}
header a:hover{
    background-position: 0 100%;
}
.sub-menu ul{
	 list-style-type:none;
}
.sub-menu{
	 list-style-type:none;
}
header #top-bar .sub-menu li{
	text-align:left;
}
header .subnav{
	display:none;
	width:200px;
	height:auto;
	position:absolute;
	left:50px;
	
}
header li:hover .subnav{
	display:initial;
}
.subnav:hover{
	display:initial;
}
header .subnav-content{
	display:flex;
	flex-direction:column;
	align-items:center;
	width:100%;
	justify-content:left;
	text-align:left;
	background-color:rgb(18, 18, 19, 0.5);
	padding:20px;
	border-radius:10px;
	margin-top:50px;

	
}
header .subnav-content a{
	width:100%;
}

#logoimg {
    border-radius: 0px;
    width:50px;
    height:auto;
    transition: 0.2s;
    
}
.topbanner {
    background: rgb(19,85,69);
    height: 20px;
    width: 100%;
}


/*Search Form*/


#searchContainer {
    width: 100%;
    top: 0;
    background-color: rgb(18, 18, 19, 0.2);
    height: 200px;
    justify-content: center;
    align-items: center;
    display: none;
}

#trans-stickyheader #searchContainer{
    background-color: rgb(9, 60, 73, 0);

}

.closebtn {
    margin-left: 20px;
    cursor: pointer;
    color:#fff;
    font-size: 2rem;
}
.search-box{
    width:100%;
    height:50px;
    margin-left:5px;
    font-size: 1.1rem;
}
#searchBox {
    width:70%;

}
.searchform {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%; 
	border:none;
	
	

}
.searchform input {	
    border-radius:2px 0px 0px 2px;
	border: solid;
    border-width: 0.2px;
    border-color: gray;
	padding:20px;
	outline:none;
    background-color: rgb(18, 18, 19, 0.2);
    color:#fff;
    /*
    background: linear-gradient(to right, rgb(226, 135, 16), rgb(230, 152, 8) 50%, rgb(255, 255, 255, 0) 50%);
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position 275ms ease;
*/

}



.searchform input:focus{
    border-color: rgb(230, 152, 8);
}


#searchsubmitbutton {
    border-width:1px;
	border: solid;
    border-width: 0.2px;
    border-color: gray;
    border-left-width: 0;
    background-color:  rgb(230, 152, 8);
    color: #fff;
    height:50px;
    width:60px;
	border-radius:0px 2px 2 px 0px; 

}



/*Footer Styles*/


footer {
    min-height: 70px;
    margin-top: auto;
	background-color:rgb(18, 18, 19);
}
footer .bottom-bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
	justify-content: center;
    flex: 1 1 0;
	padding:20px;
}


footer .bottom-bar li{
	font-size: 1.2rem;
    margin-right: 20px;
	display: flex;
    margin-right: 15px;
}

footer .bottom-bar li:last-child{
		padding-right:0px;
	    margin-right:0px;

}
footer .bottom-bar a{
	text-align:center;
    width:100%;
    color:#fff;

}

footer .bottom-bar i{
	text-align:center;
	width:100%;
}

footer .container {
    padding-bottom: 0;
    padding-top: 0;
	min-height: 70px;


}



/*Title Wrappers*/


.glitchheader{
    text-align: initial;
    font-size: 96px;
    letter-spacing: -7px;
    animation: glitch 1s linear infinite;
    font-weight: 500;
  }
  
  @keyframes glitch{
    2%,64%{
      transform: translate(2px,0) skew(0deg);
    }
    4%,60%{
      transform: translate(-2px,0) skew(0deg);
    }
    62%{
      transform: translate(0,0) skew(5deg); 
    }
  }
  
  .glitchheader:before,
  .glitchheader:after{
    content: attr(title);
    position: absolute;
    left: 0;
  }
  
  .glitchheader:before{
    animation: glitchTop 1s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  }
  
  @keyframes glitchTop{
    2%,64%{
      transform: translate(2px,-2px);
    }
    4%,60%{
      transform: translate(-2px,2px);
    }
    62%{
      transform: translate(13px,-1px) skew(-13deg); 
    }
  }
  
  .glitchheader:after{
    animation: glitchBotom 1.5s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  }
  
  @keyframes glitchBotom{
    2%,64%{
      transform: translate(-2px,0);
    }
    4%,60%{
      transform: translate(-2px,0);
    }
    62%{
      transform: translate(-22px,5px) skew(21deg); 
    }
  }

  #mobiletitle{
    text-align: initial;
    font-size: 35px;
    font-weight: 700;
    display: none;
  }
  
  #headertextlogo{
    font-size: 2.2rem;
    font-weight: 600;
    text-align: center;
    color:rgb(239,152,24);
  }
  
.titlewrapper-image{
    display: flex;
	flex-direction:column;
    justify-content: space-between;
    align-items: center;
    padding: 70px;
    padding-top: 50px;
    padding-bottom: 100px;
    text-align: center;
    min-height: 600px;
    height:100%;

    

}

.titlewrapper-image h1{
    font-weight: 700;
    font-size: 3rem;
    padding-left: 0px;
    font-size: 3rem;
}

.titlewrapper {
    display: flex;
	flex-direction:column;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
    text-align: center;
}
.titlewrapper h1 {
    font-weight: 300;
    padding: 20px;
    padding-left: 0px;
    font-size: 3rem;
	text-transform: uppercase;
}
.titlewrapper-colour {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color:rgb(18, 18, 19);
}
.titlewrapper-colour h1 {
    font-weight: 300;
    font-size: 3rem;
    padding-left: 0px;
    font-size: 3rem;
    color:white;
}


#rotatingimagetitle{
    width:70%;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: absolute;
}

#rotatingimagetitle .dashicons{
    cursor: pointer;
}

.imageSlide{
    visibility: hidden;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: auto;
    top:0;
    opacity: 0;
    transition:visibility 0.6s linear,opacity 0.6s linear;
}

.imageSlide img{
    filter:brightness(60%);
}

div:hover > .imageSlide {
    visibility:visible;
}

/*Category Menus*/

.size-menuimage{
    width:100%;
    height:auto;
}

#photographymenu{
  /* Prevent vertical gaps */
  line-height: 0;
   display: grid;
   grid-template-columns: 50% 50%;
  column-gap:20px;
  row-gap: 20px;
}
#photographymenu img{
    filter:brightness(80%) blur(0.5px);
    border:none;
    padding: 5px;
    height:450px;
    width:100%;
    object-fit: cover;
    object-position: top;
    background: linear-gradient(to right, rgb(241, 146, 4), rgb(248, 141, 2) 50%, rgb(255, 255, 255,0) 50%);;
    background-clip: padding-box;
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position 450ms ease;
}
#photographymenu img:hover{
    background-position: 0 100%;

}

#photographymenu a{
    width: 100% !important;
    height: auto !important;
    position: relative;
}

#photographymenu h3{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 5px 15px;
}

#photographymenu p{
    margin:0px;
    padding:10px 20px;
    padding-left: 15px;
    font-size: 1rem;
    font-weight: 500;
    display:none;
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
     -ms-transition: all 0.7s ease-out;
      -o-transition: all 0.7s ease-out;
         transition: all 0.7s ease-out;
}


  .photomenubox{
    box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);
    border-radius:3px;
    transition:.2s all;
  }
  #photographymenu:hover .photomenubox{
    filter:blur(3px);
    opacity:.5;
    transform: scale(.98);
    box-shadow:none;
  }
  #photographymenu:hover .photomenubox:hover{
    transform:scale(1);
    filter:blur(0px);
    opacity:1;
    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
  }


#creativeworksmenu{
  /* Prevent vertical gaps */
  line-height: 0;
   display: grid;
   grid-template-columns: 100%;
  column-gap:20px;
  row-gap: 20px;
}
#creativeworksmenu img{
    filter:brightness(80%) blur(0.5px);
    border:none;
    padding: 5px;
    height:300px;
    width:100%;
    object-fit: cover;
    object-position: top;
    background: linear-gradient(to right, rgb(241, 146, 4), rgb(248, 141, 2) 50%, rgb(255, 255, 255,0) 50%);;
    background-clip: padding-box;
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position 450ms ease;
}
#creativeworksmenu img:hover{
    background-position: 0 100%;

}

#creativeworksmenu a{
    width: 100% !important;
    height: auto !important;
    position: relative;
}
#creativeworksmenu h3{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 5px 15px;
}

#creativeworksmenu p{
    margin:0px;
    padding:10px 20px;
    padding-left: 15px;
    font-size: 1rem;
    font-weight: 500;
    display:none;
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
     -ms-transition: all 0.7s ease-out;
      -o-transition: all 0.7s ease-out;
         transition: all 0.7s ease-out;
}


  .cwmenubox{
    box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);
    border-radius:3px;
    transition:.2s all;
  }
  #creativeworksmenu:hover .photomenubox{
    filter:blur(3px);
    opacity:.5;
    transform: scale(.98);
    box-shadow:none;
  }
  #creativeworksmenu:hover .photomenubox:hover{
    transform:scale(1);
    filter:blur(0px);
    opacity:1;
    box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
  }



.learn-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.learn-menu li {
    display: flex;
    flex: 1 1 0px;
    text-align: center;
    margin-right: 15px;
    align-items: center;
    justify-content: center;
}
.learn-menu:last-child {
    margin: 0px;
}
.learn-menu a {
    flex: 1 1 0px;
    text-align: center;
    background-color: rgb(18, 18, 19);
    width: 100%;
    padding:25px;
    border-radius: 5px;
    /*-webkit-box-shadow: 0px 3px 7px 4px rgba(176, 174, 176, 0.4);
    -moz-box-shadow: 0px 3px 7px 4px rgba(176, 174, 176, 0.4);
    box-shadow: 0px 3px 7px 4px rgba(176, 174, 176, 0.4);*/
    border: solid 1px rgb(9, 60, 73);
    color: #fff;
    font-size:1.4rem;
    margin-top:-100px;
	
}
.learn-menu a:hover {
    -webkit-box-shadow: 0px 3px 7px 4px rgba(176, 174, 176, 0.4);
    -moz-box-shadow: 0px 3px 7px 4px rgba(176, 174, 176, 0.4);
    box-shadow: 0px 3px 7px 4px rgba(176, 174, 176, 0.4);
}
.learn-menu a:link {
    text-decoration: none;
}
.learn-menu a:visited {
    text-decoration: none;
}

.bg-menu a{
    
}

.blogcontainer .gist-it-gist .gist-file .gist-data{
    max-height:700px;
    border:rgb(239,152,24) solid 2px;
}
.blogcontainer .gist-it-gist .gist-file .gist-meta{
    display: none;
}

.gallery-image{
    height:230px;
    object-fit: cover;
}

@media(max-width:1200px){
	.learn-menu a{
		font-size:0.9rem;
	}

}

@media(max-width:1000px){
	.learn-menu a{
		font-size:0.7rem;
		padding:15px;
	}

}

.webdevprojects-menu a {
    border-radius: 20px;
}
.webdevprojects-menu a:hover {
    border:none;
}


/*Archive Styles*/


.archive-container {
    margin: 0 auto;
}
.archive-row {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.archive-grid-item {
    min-height: 450px;
    flex: auto;
    -ms-flex: auto;
    max-width: 400px;
    position: relative;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 10px;
    background-color: rgb(19, 19, 20);
    -webkit-box-shadow: 2px 3px 5px 0px rgb(0, 0, 0);
    -moz-box-shadow: 2px 3px 5px 0px rgb(0, 0, 0);
    box-shadow: 2px 3px 5px 0px rgb(0, 0, 0);
}
.archive-grid-text {
    padding: 20px;
    font-size: 0.8rem;
    text-align: center;
}

.archive-grid-text p{
	margin-bottom:20px;
}
.archive-grid-item h2 {
    color: rgb(232, 154, 38);
	font-size:2vw;
	padding:10px 0;
}
.archive-grid-item h4{
    font-size:2vw;
    color: rgb(232, 154, 38);
}


.archive-grid-item :hover > div {
    cursor: pointer;
}

.archive-grid-item:hover{
    border:solid orange 0.5px;    

}
.webdevprojects-archivecontainer .archive-grid-item:hover{
	border:none;
}

.archive-row .webdevprojects-archive{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: rgb(0, 0, 0, 0);
    padding:0px;
    max-width: none;
    height:auto;
    min-height: 0px;
    padding-left:0px;
    margin:0px; 
    
}

.webdevprojects-archivecontainer .archive-row{
    justify-content: left;
}
.webdevprojects-archive .archive-grid-text{
    padding:0px;
}
.webdevprojects-archive h4{
    font-size:1.5vw;
}
.webdevprojects-archivecontainer{
    width:100%;
}
.webdevprojects-archivecontainer a{
    width:100%;
}

.context-menu { 
    position: absolute; 
    height:auto;
    width:170px;
    color:rgb(239,152,24);
    background-color: #000;
    box-shadow:0 8px 20px 0px rgba(0,0,0,0.5);
    border:rgb(239,152,24) solid 0.5px;
    z-index: 3000;

} 
.context-menu .menu{
    margin:1rem;
    padding:0px;
}

  

/*Growing*/
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    z-index: 2000;


}
@media (max-width: 1333px) {
    .archive-grid-item {
        max-width: 300px;
   }
}
@media (max-width: 1200px) {
    .archive-grid-item {
        max-width: 300px;
   }
}
@media (max-width: 850px) {
    .archive-grid-item {
        max-width: 600px;
   }
}



/*Featured Post Styles*/


.featuredpostcontainer {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.featuredpostcontainer img {    
    width: 100%;
    height:auto;
    padding:10px;
}
.featuretemplatescontainer {
    display: flex;
	padding:30px;
    padding-top:50px;

}


.featuretemplatescontainer div{
    width:100%;
}


.featuredposttext {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding:15px;
	padding-bottom:0;
    padding-left: 20px;
    padding-top:30px;
	color: #a34f00;

}


/*Blog Info*/


.bloginfo {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 20px;
    padding-bottom: 0;
    text-align: center;

}
.bloginfo .container {
    padding: 10px;
}
.bloginfowrapper {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bloginfowrapper p {
    font-size: 1rem;
    font-weight: 400;
    background-color: rgb(60,60,60, 0.15); 
    padding:10px 15px;
}
.bloginfowrapper li {
    display: flex;
    min-width: 150px;
    flex: 1 1 0px;
    justify-content: left;
    align-items: center;
    padding: 20px;
    padding-left:30px;
	cursor:default;
	user-select: none;
}

.bloginfowrapper a{
    text-decoration: none;
    color:black;
}

.bloginfowrapper li p {
    margin: 0;
}
.bloginfowrapper img {
    border-radius: 50%;
    width: auto;
    padding-right: 10px;
	cursor:default;
	user-select: none;

}

.authorinfo{
    display:flex;
    height:200px;
    width:100%;
    background-color:  rgba(240, 240, 240);
    margin: 60px 0px;
	border-radius:5px;
	border:solid;
	border-width:2px;
    border-color: rgba(200, 200, 200);
	

}

.authorinfoleft a{
    text-align: center;
    align-items: center;
    justify-content: center; 
	color:black;
	text-decoration:none;

     
}
.authorinfobutton{
	max-width:100%;
	margin:10px;


}

.authorinfobutton a{
	margin:0px;
	width:100%;
	padding:10px 15px;
	



}
.authorinfoleft img{
    border:none;
    

}

.authorinforight{
    display: flex;
    padding:10px;
    text-align: left;
    margin-right: 15px;
    align-items: center;
    justify-content: center;   
	width:70%;

	

}

.authorinfoleft{
    display: flex;
    padding:10px;
    align-items: center;
    justify-content: center;   
	width:30%;
    flex-direction:column;


}

.authorinforight p{
    margin:0px;
    padding:0px;
	color:black;
	font-size:0.9rem;
}

.categorylinks{
	border-radius:5px;
	padding:10px;
	padding-right:15px;
	padding-left:15px;
	margin:5px; 
	background-color: rgb(18, 18, 19);
	-webkit-box-shadow: 0px 3px 7px 4px rgba(227, 227, 227, 0.59);
    -moz-box-shadow: 0px 3px 7px 4px rgba(227, 227, 227, 0.59);
    box-shadow: 0px 3px 7px 4px rgba(227, 227, 227, 0.59);
    color:white;
}

.categorylinks:first-child{
    color:white;
	margin-left:0px;
}
.categorylinks:hover{
    color:white;
	  -webkit-box-shadow: 0px 3px 7px 4px rgba(176, 174, 176, 0.4);
    -moz-box-shadow: 0px 3px 7px 4px rgba(176, 174, 176, 0.4);
    box-shadow: 0px 3px 7px 4px rgba(176, 174, 176, 0.4);
}

/*Front Page Styles*/


.hometopcontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 960px;
    color: #fff;
    min-height: 200px;
    justify-content: center;
    text-align: center;
}

.hometopcontainer img{
    position: absolute;
    z-index: -2;
    width: 100%;
    height: auto;
    max-height: 1000px;
    top:0px;
    background-color: rgb(0, 0, 0, 0.4);

}


.hometopwrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.hometopcontainer h1{
        font-size:3rem;
        font-family: OpenSans;
		line-height:1.3;



}

.hometopcontainer h2{
	padding:10px;
	font-size:1.5rem;
	color:rgb(48, 4 8, 48);
	color:white;
	font-weight:300;
    margin-top: 10px;
    text-shadow: 1px 2px 3px rgba(0,0,0,.5);
}

.home-menu a {
    font-weight: 400;
    background-color: rgb(38, 182, 232);
    color: #000;
	font-size:1.1rem;
	margin-top:-80px;
	margin-right:60px;
	margin-left:60px;
    transition: 0.2s;
    width:300px;
	font-weight:600;
}

.home-menu li{
	    flex: 0 1 0px;

}

.home-menu a:hover{
	
}

#videoBG {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: auto;
}
.belowvideo {
    background-color: rgb(18, 18, 19);
}

.imagetitle img {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: auto;
}


.taxonomy-description{
    text-align:center;
	font-size:1.1rem;
	padding:30px;
	padding-top:0;
	padding-bottom:10;


}


/*Media Queries*/


@media (max-width: 950px) {
    
    html,body{
        overflow-x: hidden; 
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
  
    header {
        background-color: rgb(239,152,24);
   }
    header .container {
        flex-direction: column;
        justify-content: none;
        align-items: none;
		width:100%;
   }
   .container{
    padding: 15px;

   }

   #trans-stickyheader{
   }

   header #headercontainer{
        padding:0px;
        padding-top:20px;
        padding-bottom: 20px;

   }
    header .container a #mobilelogo {
        display: initial;
        padding-left:20px;
   }
    header #top-bar {
        flex-direction: column;
        justify-content: none;
        align-items: none;
        display: flex;
        padding-top: 85px;
        display: none;
		width:100%;
       
   }
    header #top-bar li {
        padding: 1rem 1rem;
		border-bottom:solid;
		border-width:1px;
		width:100%;
		font-size:0.9rem;

   }
    header #top-bar li:first-child {
        padding-left: 1rem;
   }
    header #top-bar li:last-child {
        padding-right: 1rem;
		border-bottom:none;

   }
    header #top-bar a {
        display: inline;
		
   }
    header #top-bar #desklogo {
        display: none;
   }
    header #hamburger {
        display: inline;
        transform: rotate(0deg);
        position: fixed;
        z-index: 1;
        top: 15px;
        right: 15px;
   }
	

    .titlewrapper {
        padding-bottom: 10px;
        padding:30px;
        
   }
    .titlewrapper h2 {
        color: #000;
   }
    .titlewrapper-colour {
        padding: 30px;

   }
    .titlewrapper-colour h1 {
        font-size: 030px;
        padding-top: 0;
        text-align: center;
   }
	
	.titlewrapper h1{
		font-size:2rem;
    }
    .titlewrapper-image{
        overflow: hidden;
        padding-top:10px;
		min-height:400px;
    }
    
    .titlewrapper-image h1{
        font-size: 030px;
        padding-top: 0;
        text-align: center;
    }
	
	.featuretemplatescontainer{
		flex-direction:column;
		padding-top:10px;
	}
	
	.container{
		padding-top:15px;
	}
	
    .darkbackground {
        background-color: #000;
   }
    .learn-menu {
        flex-direction: column;
   }
    .learn-menu a {
        font-size: 1rem;
        padding: 20px;
   }
    .learn-menu li {
        margin: 0;
        margin-bottom: 20px;
        width: 100%;
        padding: 0;
        flex-basis: auto;
   }
	
	.taxonomy-description{
		font-size:0.9rem;
	}
	
    .videotitle {
        background-color: rgb(239,152,24);
   }
    .videotitle video {
        display: none;
   }
    .videotitle h1 {
        color: #000;
   }
    .imagetitle {
        background-color: rgb(239,152,24);
   }
    .imagetitle img {
        display: none;
   }
    .imagetitle h1 {
        color: #000;
   }
    .transparentbackground {
        background-color: rgb(239,152,24);
   }
	
	.home-menu a{
		margin-top:0px;
		
		
    }
    .hometopcontainer{
        overflow: hidden;
    }
    
    .hometopcontainer h2{

	    font-size:1rem;

    }

    .hometopcontainer img{
        width:100%;
        max-height:800px;
        height:800px;
        object-fit: cover;
    
    }


    .blogcontainer h2{
        text-align: center;
        padding:20px;
    }

    .blogcontainer h3{
        text-align: center;
        padding:20px;

    }

    .blogcontainer h3{
        text-align: center;
        padding:20px;

    }

    .searchform input{
        font-size: 0.9rem;
    }

    #photographymenu{
        column-count: 1;
        -webkit-column-count: 1;
        -moz-column-count:    1;
    }
    .glitchheader{
        display: none;
    }
    .archive-grid-item h2{
        font-size: 5vw;
    }

    .blogcontainer .blocks-gallery-item{
        width: 100%;
        margin:10px 0px;
    }

    .webdevprojects-archive h4{
        font-size:4vw;
    }
    #mobiletitle{
        display: initial;
      }
      #lightboxImg{
          max-width: 94%;
          max-height: 90%;
      }
}


@media (min-width: 950px) {
    header #top-bar {
        display: flex;
   }
    header #hamburger {
        display: none;
   }
}