/*
THEME NAME: SFORDE-2021
AUTHOR: Steve Forde
AUTHOR URI: http://www.sforde.com/
*/




/* THEME BEGIN */
b, strong { font-weight: bold; }
.hide { display: none; }
.white { color: #fff; }
em { font-style: italic; }

a:link { color: #7d5eac;  }
a:visited { color: #7d5eac;}
a:hover { color: #7d5eac;  }

ul { list-style-type: disc; padding-left: 2em; }
p, ul, ol { margin-bottom: 0.75em; }
h1, h2, h3, h4, h5 { font-weight: bold; margin-bottom: 0.75em; }
h2 { font-size: 1.41em; margin: 0 0 0.75em 0; }
h3 { font-size: 1.25em; margin: 0.15em 0px 0.75em; }
h4, h5 { font-size: 1.0em; }
code { white-space: normal;}

.center {
    text-align: center;
}

html, body { 
	height: 100%; 
	padding: 0;
	margin: 0;
}

body
{
	font: 19px/1.5em 'Montserrat', sans-serif;
    font-weight: 500;
	background: #eae3f5;
	color: rgba(44, 44, 44, 0.86);
}

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    font-family: 'Montserrat', Helvetica, sans-serif;
    letter-spacing: 0;
}


.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}


div.topbg {
    height: 50%;
    background: #ce343c;
    background: linear-gradient(138deg, rgba(207,52,56,1) 15%, rgba(204,50,87,1) 80%);
    width: 100%;
    z-index: -2;
}

div.mountains {
    height: 500px;
    background: transparent url("img/mountains_bg.png") repeat-x 60% 0%;
    position: fixed;
    top: 440px;
    width: 100%;
    z-index: -1;
}


div.centerall
{
    position: relative;
/*    top: 12.5em;*/
    z-index: 0;
	margin: 0 auto;
    max-width: 1000px;
}

div.centerall.sticky { 
    transition: all 0.3s ease;
    top: 300px;
}


/*  The main wrappers that go around the entire white section of the page.
    ========================  */


div.content {
    padding: 1.5em 0;
    margin-bottom: 1em;
}

div.content .pure-g {
    margin-bottom: 1em;
}

div.content-social {
    background: #fff;
    padding-bottom: 0;
}

div.content-white {
    background: #fff; 
    padding-top: 2em; 
    box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.15);  

}

div.content-grey {
    /*background: rgba(56, 58, 68, 0.9);*/
    background: #999eb5;
    color: #fff;
    box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.15);
    /*solid 0.2em #bdbdbe;*/
}

div.content-black {
    background: #000;
    color: #fff;
}

    div.inner_content {
        max-width: 700px;
        padding: 0 1em;
        margin: 0 auto; 
    }

    div.inner_content_wide {
        max-width: 840px;
        padding: 0 1em;
        margin: 0 auto; 
    }

div.content-dark {
    background: #d3d5d9;
    padding: 1.5em 0;
    border-top: solid 1px rgba(0,0,0,0);
/*    box-shadow: inset 0px 0.4em 0em rgba(0, 0, 0, 0.2);*/
}


img.aligncenter
{
	display: block;
	margin: 0px auto 1em;
}


.pure-g {
    margin-left: -0.5em;
    margin-right: -0.5em;
}

[class *= "pure-u-"] .box {
    padding: 0 0.5em 1em 0.5em;
}

[class *= "pure-u-"] .box:last-child {
    padding: 0 0.5em 0em 0.5em;
}


.skills [class *= "pure-u-"] .box:last-child {
    padding: 0 0.5em 1em 0.5em;
}

.job [class *= "pure-u-"] .box:last-child {
    padding: 1.2em 1.4em 1.3em;
}




/* 	Header
	============  */
	
header
{
    display: block;
    width: 100%;    
    background: transparent url("img/c4_header_bg.jpg") no-repeat 0% 30%;
    background-size: cover;
    padding: 0;
    
    margin: 0;
}

header div.bg {
    background: #ce343c;
    padding-top: 8em;
    background: linear-gradient(138deg, rgba(208,53,58, 0.90) 15%, rgba(204,50,87,0.93) 90%);
}

div.header-inner {
    max-width: 1000px;
    margin: -2em auto 0;
    text-align: center;    
    background: rgba(230, 74, 84, 0.5);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    transition: all 0.3s ease;
}

header div.avatar {
    width: 6em;
    height: 6em;
    border-radius: 3.2em;
    border: solid 0.2em #fff;
    overflow: hidden;
    margin: 0 auto;
    margin-top: -3.3em;
    transition: all 0.3s ease;
}

header h1#me {	 
	margin: 0.8em 0.5em 0.5em;
	padding: 0;
    text-align: center;
    /*transition: all 0.3s ease;*/
    line-height: 0.8em;
    font-weight: 900;
    font-size: 2.5em;
    text-transform: uppercase;
}

header h1#me a {
    color: #fff;
    text-decoration: none;
}

header > img {
    max-width: 90%;
    margin: 0 auto;
}


p.tagline {
    max-width: 32em;
    margin: 0.1em auto 1.15em;
    text-align: center;
/*    color: rgba(255, 255, 255, 0.44);*/
    color: #fff;
    font-size: 0.9em;
    font-weight: normal;
    line-height: 1.2em;
    /*text-shadow: 0 0.15em 0.05em rgba(0,0,0,0.1);*/

}


header.sticky {
    position: fixed;
}


header.sticky .header-inner {
    border-top: none;
    margin: 0 auto; 
    background: rgba(26, 28, 38, 0.9);
}

header.sticky h1 {
    padding: 0.25em;
    margin: 1em 1em 0 1em;
    text-align: left;
    float: left;
    
}


header.sticky h1 img {
    max-height: 1.5em;
}

header.sticky p.tagline { display: none; }

header.sticky div.home-menu {
    display: inline-block;
    float: right;
    width: auto;
    margin: 1em 1em 0;
}







/*  Navigation
	==================================  */

nav {
    background: #ff8a8a;
    box-shadow: 0 0.2em 0 rgba(0,0,0,0.1);
    text-transform: uppercase;
}



.home-menu {
    padding: 0;
    text-align: center;
    line-height: 1em;
   
}

.pure-menu.pure-menu-open {
    background: none;
    border: none;
    font-weight: 500;
}

.pure-menu a { color: #cc3257;}

.home-menu, .pure-menu, .pure-menu.pure-menu-open { }

.home-menu .pure-menu-heading {
    padding: 0;
}

.home-menu ul {
     font-size: 1.1em;
     text-align: center;
    margin-bottom: 0;
    padding-bottom: 0;
}

.home-menu ul li {
/*    border-bottom: solid 0.2em rgba(0,0,0,0);*/
    margin-bottom: 0;
    padding-bottom: 0;
    padding: 0.4em 0;
}

.home-menu ul li a { 
    padding: 0.2em 0.6em 0.2em;
/*    border-bottom: solid 0.15em rgba(88, 80, 190, 0);*/
    /*text-shadow: 0 0.15em 0.05em rgba(0,0,0,0.3);*/
}

.home-menu .current-menu-item a,
.home-menu .current-page-ancestor a,
.home-menu .pure-menu-selected a { }

ul.pure-menu-list li.current-menu-item,
ul.pure-menu-list li.current-page-item,
ul.pure-menu-list li.current-page-ancestor {
    background: transparent url("img/nav_arrow.svg") 50% 34% no-repeat;
    margin-bottom: -0.4em;
    padding-bottom: 0.8em;
    text-shadow: 0 0.1em 0 rgba(0,0,0,0.15);
}


ul.pure-menu-list li.current-menu-item a,
ul.pure-menu-list li.current-page-item a,
ul.pure-menu-list li.current-page-ancestor a {
    color: #fff;
}

.home-menu .pure-menu-selected a:hover {
}

.home-menu a, .home-menu a:visited {
    padding: 0;
}

.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    text-decoration: none;
    color: #fff;
    text-shadow: 0 0.1em 0 rgba(0,0,0,0.15);
}

a#toggle-menu {
    float: right;
    font-size: 1.6em;
    padding-top: 0.08em;
    padding-right: 0.25em;
    padding: 0.08em 0.5em 0.2em 0.5em;
    display: none;
}



.skills > div {
    display: flex;
}

.skills .box {
    flex: 1;
    display: flex;
}

.skills .skillbox {
    background: #eee9f7;
    padding: 1.2em 1.4em 1em;
    flex: 1;
    border-bottom: solid 2px rgba(0,0,0,0.1);
    border-radius: 0.2em;
}

.skillbox p {
    margin-top: 0;
}

.pure-g .skills h3 {
    margin: 0 0 0.5em !important;
    padding: 0 !important;
    text-align: left;
    text-transform: uppercase;
    font-size: 1.1em;
    color: #424242;
    font-weight: 500;
}



 .skills ul {
    margin: 0;
    /*padding: 0;*/
    list-style: square;
    list-style-image: url("img/bullet-rect.svg");
    line-height: 1.3em;
    font-size: 0.9em;
    opacity: 0.8;
}

.skills .uxdesign {
    /*background: #eee9f7 url("img/box-bg-uxdesign.png") bottom no-repeat !important;*/
}


ul.updates
{
	list-style-type: none;
	margin: 0 0 0.4em;
	padding: 0;
	font: 0.75em/1.4em sans-serif;	
}

ul.updates li
{
	margin: 0 -9px;
	padding: 0.8em 9px 0.7em 28px;
	border-bottom: solid 1px #dddcd9;
}


/*  Social Icons
	============  */

ul.social { 
    margin: 0 0 1em;
    padding: 0;
    text-align: center;
}

ul.social li {
    display: inline-block;
    list-style: none;
    margin: 0 0.25em;
    padding: 0;
}

ul.social li a {
    text-decoration: none;
    background: #ff8a8a;
    display: inline-block;
    font-size: 1.5em;
    line-height: 0em;
    border-radius: 0.15em;
    overflow: hidden;
    color: #fff;
    padding: 0.3em 0.7em 0.32em;
    text-align: center;
    box-shadow: 0 0.18em 0 rgba(0, 0, 0, 0.25);    

}

ul.social img {
    
}



ul.social li a:hover {
    
}


ul.social li a img { 
    width: 1.1em;
    height: 1.1em;
    object-fit: fill;
}





hr {
    background: #ff8a8a;
    border: none;
    height: 3px;
    margin: 3em auto 3em;
    max-width: 75%;
}


p.post-date { margin-bottom: -0.0em; }
p.post-date a {
    color: rgba(89, 83, 81, 0.71);
    letter-spacing: -0.04em;
   
}

div.content article h2 {
    /*letter-spacing: 0.2em;*/
	font-size: 1.5em;
    color: #424242;
    margin-bottom: 1em;
    text-transform: uppercase;
    font-weight: 500;
}

div.content h2 a {
    /*color: #595351;*/
    text-decoration: none;
}

.center-text {
    text-align: center;
}

/*div.content h2 a.single:link {
	text-decoration: none;
}*/



div.feature-img {
    margin: 0 0 0.5em;
}

div.feature-img img {
     border-radius: 0.15em;
}


div.post-meta {
    
    margin: 1.5em 0;
}

ul.tags {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85em;
}

ul.tags li {
    list-style-type: none;
    display: inline-block;
    margin-right: 0.4em;
}

ul.tags li a {
    padding: 0.3em 0.5em;
    background: rgba(238, 235, 234, 0.78);
    border-radius: 2px;
    color: rgba(44, 44, 44, 0.7);
}



div.gamelist {
    margin: 0.1em 0 1em;
}

div.gamelist div.feature-img img {
    border-radius: 0.1em;
}


div.content h2 {
    margin: 0.5em 0 0.25em;
    font-size: 1.3em;
}

div.content h3.subtitle {
    font-size: 1em;
    font-style: italic;
    font-weight: normal;
    text-transform: uppercase;
    opacity: 0.7;
    margin-top: -1em;
}

div.content p {
    font-size: 0.9em;
    line-height: 1.4em;
    color: rgba(89, 83, 81, 0.9);
}

a.button {
    background: #7d5eac;
    display: inline-block;
    padding: 0.8em 2em 0.88em;
    color: #fff;
    text-decoration: none;
/*    border-bottom: solid 0.1em #5fb716;*/
    font-weight: bold;
    border-radius: 0.2em;
    /*letter-spacing: -0.03em;*/
}

a.button:hover {
    background: #8a68bd;
}


div.itch-widget {
    margin: 0 auto;
    text-align: center;
    max-width: 552px;
}

div.itch-widget iframe {
    width: 100%;
}

.job { 
color: rgba(89, 83, 81, 0.9);
 }


.job .box {
    padding: 1.2em 1.4em 1.3em;
}

.job .info {
    background: #eee9f7;
    border-bottom: solid 2px rgba(0,0,0,0.1);
}

.job h4.daterange {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

.job p {
    padding: 0;
    margin: 0 0 0.7em 0;
}


.job .title {
    font-weight: 700;
    margin: 0;
}

.job p.location {
    margin-bottom: 0.5em;
}

div.job div.desc p {
    font-size: 0.8em;
}

.job .info div.desc p:last-child {
    margin-bottom: 0;
}


.job div.years {
    font-size: 0.8em;
    opacity: 0.5;
    margin-top: -0.5em;
}

.job .projects {
    font-size: 0.8em;
    line-height: 1.4em;
    list-style: square;
    list-style-image: url("img/bullet-rect.svg");
}

.job img.logo {
    display: block;
    margin-top: 1em;
    opacity: 0.5;
    max-width: 6em;
}


div.content div.gamedesc p {
    font-size: 0.85em;
    opacity: 0.7;
    text-align: center;
    margin: inherit auto;
    padding-left: 5em;
    padding-right: 5em;
}


.game-thumbnail {
    overflow: hidden;
     display: block;
     position: relative;
     border-radius: 0.2em;     
     margin-bottom: 1em;

}

.game-thumbnail a {
  flex-grow: 1;
  background: #fff;
  height: 100%;
  height: 300px;
  display: block;
  overflow: hidden;


}

.game-thumbnail img {

  min-width: 100%;
  display: block;
  height: 100%;
  object-fit: cover;
  transition-peroperty: transform;
  transition-duration: 0.2s;
  backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: scale(1.02);
    filter: brightness(0.9);

}

.game-thumbnail:hover img {
  // transform: scale(1.00);
  filter: brightness(1);
}

.game-thumbnail:hover div.details {
    opacity: 1;
}

.game-thumbnail img.grid-logo {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    /* max-width: 5em; */
    object-fit: contain;
    z-index: 1;
    transform: scale(0.9);
  
    filter: brightness(1.0);
    filter: drop-shadow(0px 0.5em 0.5em rgba(0,0,0,0.4));
}

.game-thumbnail:hover img.grid-logo {
    transform: scale(0.92);

}


.game-thumbnail div.details {
    background: rgb(59,40,89);
    /*background: linear-gradient(0deg, rgba(125,94,172,1) 15%, rgba(125,94,172,0.1) 35%);*/

  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.0;
  transition-property: opacity;
  transition-duration: 0.5s;    
}

.game-thumbnail div.details * {
    display: block;
    position: relative;
    margin: 0 auto;
    text-align: center;
      width: 100%;
      top: 75%;
      color: #fff;
      text-shadow: 0 0.1em 0.6em rgba(0,0,0,0.7);
}

/*
.game-thumbnail a:hover .thumbinfo {
  
}*/


div.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*  Download Badge
	========================  */

div.sidebar_download {
	margin: -2px 0 0.7em;
	background: transparent url("img/download_pombiezong_bg.png") no-repeat;
	padding-top: 90px;
	min-height: 64px;
}

div.badges {
/*	text-align: center;*/
/*    background: #2a2a2a url("img/section_header.png") 0;*/
	color: #fff;
    text-align: center;
	font-weight: 700;
/*	border-radius: 0.25em;*/
    text-shadow: 0 0.15em 0.05em rgba(0,0,0,0.3);
/*    border-bottom: solid 1px rgba(255,255,255,0.1);*/
    padding: 0.5em;
    line-height: 0;
    
   
}

div.badges a {
    display: inline-block;
    margin: 0.1em 0.1em 0.15em;
    line-height: 0;
}

div.badges a img {
	border-radius: 0.14em;
    max-width: 8em;
   
    
}


div.game-thumbs {
    margin-bottom: 1em;
    margin: 0 -0.33em 1em;
}

div.game-thumbs div:first-child div.thumb {
  
}

div.game-thumbs div:last-child div.thumb {
    /*padding-right: 0;*/
}


/*div.thumb {
    padding: 0 0.33em 0 0.33em;
}*/

div.thumb a {
    width: 100%;
    display: block;
}

div.thumb a img {
    border-radius: 0.2em;
    width: 100%;
}



div.more-game {
    /*background: rbga(0,0,0,0.3);*/
    background: rgba(255, 255, 255, 0.8);
    border-top: solid 0.1em #fff;
    padding: 0.5em;
    border-radius: 0.15em;
    margin: 0.5em;
    text-align: center;
    margin-top: 2.5em;
    margin-bottom: 0.5em;
    box-shadow: 0 0.15em 0 rgba(0,0,0,0.15);
}

div.more-game a {
    color: #444;
    text-decoration: none;
}

div.more-game a:hover {
    text-decoration: underline;
}

div.more-game div.icon {
    width: 5em;
    height: 5em;
    margin: -2.5em auto 0.5em;
}

div.more-game div.icon-comingsoon {
    border-radius: 1em;
    overflow: hidden;
    background: #333;
    font-weight: bold;
    text-align: center; 
    line-height: 1.3em;
    color: rgba(255,255,255, 0.5);
    padding-top: 1.25em;
    height: 3.75em;
}

div.content div.more-game h3 {
    font-size: 1.1em;
    /*color: #444;*/
    margin-bottom: -0.1em;
    padding-bottom: 0;
}

div.content div.more-game p a {
    color: rgba(0,0,0, 0.5);
    font-size: 0.8em;
}

div.content div.more-game p a:hover {
    /*color: #fff;*/
}



/*  Responsive youtube embeds
    ========================  */

.featured-video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
     margin-bottom: 0;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
     margin-bottom: 2em;
}
 
.featured-video-container  iframe,
.featured-video-container  object,
.featured-video-container  embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/*  Right side of content column 
	===========  */


dt {
	
}

dd {
	margin-left: 1.5em;
	margin-bottom: 0.5em;
}

div.section ul {
	margin: 0.6em 0 0.75em 2.25em;
	padding: 0;
}

div.content h3,
div.content h4 {
	color: #595351;
}

div.content strong {
	color: #444 !important;
}

img.size-large, img.size-full {
	width: 100%;
	height: auto;
	box-shadow: 0px 1px 3px #000;
	margin: 0 0 1em;
}

img.size-thumbnail-last {
	margin: 0 0 0px 0;
}


p.postSubTitle 
{
	margin-top: -1.5em;
	font-size: 0.8em;
	color: #9a9994;
}


div.content ol {
	list-style-type: decimal;
	margin-left: 1.5em;
}

div.content blockquote 
{
	padding: 0 2em;
	font-size: 0.9em;
	color: #84837e;
}


/*  Footer 
	================= */

footer {
	clear: both; 

}

footer div.links {
    margin: 2em 0 1em;
    
}

footer ul {
	font-size: 0.85em;
    list-style-type: none;
    margin: 0 0 1em;
    padding: 0;
    text-align: center;
}

footer ul li {
    display: inline;
    margin: 0 1em;
}

footer a {
    font-weight: 700;
}

footer a:link, 
footer a:visited {
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer span {
	margin: 0 0.5em;
}

footer p.legal {
	font-size: 0.8em;
}

footer h4.copyright {
    text-align:center;
}

footer h4 a {
    color: rgba(44, 44, 44, 0.86) !important;
}

span.cairn {
	width: 230px;
	height: 116px;
	display: block;
	background: transparent url("img/cairn.png") no-repeat;
	position: relative;
	z-index: 2;
	margin: 0 auto;
    padding: 0 0 2em;
    background-size: contain;
   
}






/* Medium Size */
@media (max-width: 48em) {
    
    header div.bg {
       
    }

    header h1  {
    
    }
    
    header .tagline {
          padding-left: 1em;
        padding-right: 1em;
    }

 /*   header h1 img {
        max-width: 70%;
        max-height: 3em;
    }*/
    
    p.tagline {
        font-size: 0.85em;
    }
        
    .home-menu ul {
         font-size: 0.9em;
         text-align: center;
    }
    
    .home-menu ul li a { 
        /*padding: 0.15em 0.4em 1em;*/
    }

     div.content {
/*        background: #ff0;*/
        font-size: 0.9em;
        line-height: 1.5em;
    }
    


    div.content h2 {
        text-align: center;
        line-height: 1.1em;
    }

    div.content h3.subtitle {
        text-align: center;
    }

    span.cairn {
        width: 180px;
        height: 116px;
        float: none;
        
   
    }
    
    div#respond input {
        width: 90%;
        margin: inherit auto;
    }

         div.job div.years {
        display: inline-block;
    }

     div.job .daterange { 
        display: inline-block;
        margin-right: 1em;
    }

    div.job div.years {
        display: inline-block;
    }
   
    div.job .datecol .box {
        background: #f00;
        padding: 0.5em 1.5em 0 1.5em !important;
        margin-bottom: 0.25em !important
    }
    

}



/* Small Size */
@media (max-width: 32.5em) {
    
    header {
        margin-top: 0;
        border-top: none;
    }

    header div.bg {
         padding-top: 2em;
    }
    
    header .header-inner {
         margin: 4em auto 0;
    }

    header div.avatar {
      /*  width: 5em;
        height: 5em;*/
        margin-top: -3.5em;
        border-width: 0.15em;
    }
    
    header h1 {
        margin-top: 1em;
    }
    
    header h1 img {
        max-width: 80% !important;
    }
    
    p.tagline {
        font-size: 0.8em;
    }
    
    .home-menu ul {
         font-size: 0.7em;
         text-align: center;
    }
    
    .home-menu ul li a { 
        /*padding: 0.15em 0.2em 0.8em;*/
    }
    
    div.content {
/*        background: #f00;*/
        font-size: 0.8em;
        line-height: 1.4em;
    }

   .game-thumbnail {
      height: 100%;
      height: 200px !important;
    }

    .job img.logo {
        margin-top: 0;
        display: none;
    }

    .job .date {
        padding-bottom: 0.1em !important;
        text-align: center;
    }

    .job .date div.years {
        font-size: 1em !important;
        opacity: 0.8;
    }

   /* div.job .daterange { 
        display: inline-block;
        margin-right: 1em;
    }

    div.job div.years {
        display: inline-block;
    }
   
    div.job .datecol .box {
        padding: 0.5em 1.5em 0 1.5em !important;
        margin-bottom: 0.25em !important
    }*/
}