/*
Theme Name: gamesgrid2021
 Version:      1.1.1
Theme URI: http://dekogames.com
Author: ContentGraphics
Author URI: http://contentgraphics.com/


 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/


:root {
    --bg_dark: #135c66;
    --gray: #999;
    --gray_dark: #333;
    --graylight: rgb(233, 233, 233);
    --dg_green: #058798;
    --dg_greenlight: #b7dde0;

    --dg_orange: #ff6f00;
    --dg_orangedark: #DD5900;
    --dg_orangedarker: #BC4C00;
    --dg_orange75: rgba(255,111,0,.75);
    --dg_orange50: rgba(255,111,0,.5);
    --dg_orange25: rgba(255,111,0,.25);
    --dg_darkgray: #333333;

    --highlight: rgba(255,255,255,0.33);

}

body {
    /* font-family: 'Open Sans', sans-serif; */
    font-family: 'Oswald', sans-serif;
    /* font-family: 'Roboto', sans-serif; */
    /* font-size: 1.25em; */
}

.header{

     
background-color: var(--dg_green);

/* background-image: url(../img/1260x240_dekogames_logo_t.png); */


border-radius: 10px;
margin-bottom: 10px;
/* padding: 20px; */
height: 80px;

}




.header-logo{


background-image: url(img/deko_games_fun_tagline_v2.svg);

background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100%;
/* background-color: red; */
}

.header-social{

display: none;
  
}

.header-social-icon{

    height: 50px;
    width: auto;
}




.navbar{
 
 
  display: none;
    
}

.navbar-mobile{

display: block;
color: white;
text-transform: uppercase;
margin-top: 10px;
padding: 5px;
max-width: 100%;
border-radius: 10px;
margin-bottom: 10px;


background-color: var(--dg_orange);

}



.navbar_search{

color: white;
margin-left: auto;
}



    .navbar a {


        color:white;
    }


    .hero{
        background-color: var(--gray);
        
        border-radius: 10px;
        margin-bottom: 10px;
  
        background-size: cover;
        background-position: center;
  
        /* background-image: url(img/build20210104_55_1920x640.jpg); */
       /* background-image: url(img/sns_preview_202105_19x6.jpg); */
       background-image: url(../../uploads/2022/04/sns_banner_202204.jpg);
       
        font-family: 'Luckiest Guy', sans-serif;
        padding-top: 100px;
       height: 100px;
       max-height: 300px;
       width: 100%;
      max-width: 100%;
        font-size: 1.25em;
        
    color: white;
    }
    .hero_home{
        background-color: var(--gray);
        
        border-radius: 10px;
        margin-bottom: 10px;
  
        background-size: cover;
        background-position: center;
  
        /* background-image: url(img/build20210104_55_1920x640.jpg); */
       background-image: url(img/sns_preview_202105_19x6.jpg);
        font-family: 'Luckiest Guy', sans-serif;
        padding-top: 100px;
       height: 100px;
       max-height: 300px;
       width: 100%;
      max-width: 100%;
        font-size: 1.25em;
        
    color: white;
    }

    .hero-link  {
        text-decoration: none;
    }


.footer{
    color: white;
    margin-top: 10px;
    background-color: var(--dg_green);
    min-height: 25px;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 20px;
    }

.cell {

    background-color: #9cf4ff;
    padding: 10px; 
    border-radius: 20px;
    margin-bottom: 10px;
    font-family: 'Roboto', sans-serif; 
    min-height: 200px;
}

.post{
    padding: 0 10%;
}


.span2
{

position: relative;

left: 0px;
max-width: 100%;
top: 20px;
margin: 0px;
padding: 10px;

color: white;
background-color: rgba(0, 0, 0, 0.33); 
/* background-color: var(--dg_orange); */
visibility:hidden;
font-family: Oswald;
font-size: 1.1em;
}

.cell:hover .span2
{ 
visibility:visible;
cursor: pointer;
}


.cell_light{
  
    background-color:var(--dg_greenlight);
    padding: 5%;
    border-radius: 10px;
    margin-bottom: 10px;
  
}

.darker{

    background-color: var(--dg_green);
}

.dark{
  
    background-color: var(--dg_orange);

  
}
.cell_wallpaper {

    background-color: var(--dg_orange-alt);
     background-image: url(../img/600x600_roadstar.jpg); 
    background-size: cover;
    min-height: 300px;
    padding: 5%;
    border-radius: 10px;
    margin-bottom: 10px;
}

.cell_wallpaper2 {

    background-color: #e53b1f;
     background-image: url(../img/600x600_44t_2019_08b.jpg); 
    background-size: cover;
    min-height: 300px;
    padding: 5%;
    border-radius: 10px;
    margin-bottom: 10px;
}


.cell_wallpaper3 {

    background-color: var(--dg_orange);
     background-image: url(../img/600x600_stake_07.jpg); 
    background-size: cover;
    min-height: 300px;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.preview{

    width: 100%;
    height: auto;
}



.fullpagenarrow{

    padding: 2% 10% 5% 10%;
    background-color: var(--graylight);
    border-radius: 10px;
    font-size: 1.2em;
}

.section_header{




    min-height: 15px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px 20px 10px 20px ;
background-color: gray;





}


.bg_orange{

background-color: var(--dg_orange);
color: white;

}

.bg_orangedark{

    background-color: var(--dg_orangedark);
    color: white;

}
.bg_orangedarker{

    background-color: var(--dg_orangedarker);
    color: white;

}




.bg_darkgray{

    background-color: var(--dg_darkgray);
    color: white;
    
    }

/**************typography******************/

.label{

  font-family: 'Oswald', sans-serif;
  color: white;
}

.large{

    font-size: 4em;
    font-weight: 50;
}


.date{
    font-size: 0.7em;
}

.eyebrow{

    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 600;
}

.cell a:link {

font-size: 2em;
color: white;
}


.cell a:visited {

    font-size: 2em;
    color: var(--dg_greenlight);
    }

/* default size: one-column */

.gridwrapper{

    display: block;
    max-width: 100%;
}



.wrapper_post{

display: block;

}



.sidebar{


    display: block;
    background-color: var(--graylight);
    border-radius: 10px;
}


.sidebar-article{

padding: 10px;

}


.main{

    display: block;
    
    /* margin-left: 1%; */

}



.featuredimage{

    width: 100%;
    height: auto;
    border-radius: 10px;


}





/********************  HOME PAGE **************************/



.hero-cta{
    font-family: 'Luckiest Guy', sans-serif;

background-color: var(--dg_orange75);


text-decoration: none;
color: white;
border-radius: 10px;

    margin-left: 20%;
    margin-top: 75%;

padding: 10px;


}

/********************  EMAIL FORM **************************/

#subscribe{

    margin-top: 50px;
}

#subscribe-fname{

   width: 300px;
}

#subscribe-lname{

    width: 300px;
 }

 #subscribe-email{

    width: 300px;
 }

/********************  SCOOP 'N' SCOOT **************************/


.sns_wrap {
    /* margin-top: -12vh; */
        margin-left: auto; 
         margin-right: auto; 
        width: 100%;
        /*max-width: 1200px;*/
    
        padding-left: 0%; 
        padding-right: 0%; 
        
        font-family: 'Luckiest Guy', cursive;
        font-family: 'Roboto', sans-serif;
    }
    



.header_sns{
    
    background-image: url("../../uploads/2022/10/sns_hero_202211_01.png");
       
    background-repeat: no-repeat;
    background-color: #2b9abd;
    background-size: cover;
    color: white;
    padding-left: 5%;
        padding-right: 5%;
    padding-top: 50%;
    font-size: 1.75em;
    height: auto;
    padding-bottom: 5%;
    border-radius: 10px;
}

.sns_intro_left{

    padding: 0 20px 0 20px;


}

.sns_intro_right{

    padding: 0 20px 20px 20px;

}


.cta_sns{

      font-family: 'Luckiest Guy', sans-serif;
    font-size: 1.3em; 


    padding-top: 5%;
    padding-bottom: 5%;

    background-color: var(--dg_orange);
        color: white;
        text-align: center;
    }
 
.icon_150{

width: 150px;
height: auto;

}
.cta_icon{

    width: 100px;
    height: auto;
    margin-top: 20px;
     margin-bottom: 20px;
}

.cta_sns_cell{

    border-radius: 20px;
}


.cta_sns_cell:hover{

    background-color: var(--highlight);
    cursor: pointer;
}

.sns_intro {
    
    background-color: var(--bg_dark);
   
    color: white;
    border-top: 10px solid white;
    border-bottom: 10px solid white;

    border-radius: 10px;
}






.hero_sns_parallax{ 
  display: none;
  }

  .slider_sns{
    background-color: #0f7290;
height: auto;

}




/* Dekosoft Trains featured page */



.product_grid{


    display: grid;
 
    grid-template-columns: 1fr 1fr 1fr;
    
    grid-auto-rows: minmax(100px, auto);
    gap: 10px;


width: 100%;
    max-width: 100%;
}

a.productlink:link {
	font-size: larger;
	font-weight: bold;
	text-decoration: none;
	color: #295b71;
}

a.productlink:visited {
	font-weight: bold;
	text-decoration: none;
	color: #295b71;
}

a.productlink:hover {
	font-weight: bold;
	text-decoration: underline;
	color: #3293be;
}

a.productlink:active {
	font-weight: bold;
	text-decoration: underline;
	color: #fff;
}

#header {
	padding-bottom: 3px;
	height: 100px;
	width: 100%;
	background-color: #295571;
}

#content_frame {
	min-width: 100%;
	width: 960px;
	height: auto;
}

.product_hero {
	border-top-color: #7f7f7f;
	border-top-style: solid;
	border-top-width: 1px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-color: #7f7f7f;
	border-bottom-style: solid;
	letter-spacing: .5em;
	font-size: smaller;
	text-align: center;
	width: 98%;
	height: auto;
}

.product_col_2_5pct {
	padding-right: 1px;
	width: 2.5%;
	height: auto;
	position: relative;
	display: block;
	float: left;
}

.product_box {
	
	
	height: auto;

	
	vertical-align: top;

}

.clr {
	clear: both;
}

.product_image {
    margin-bottom: 1em;
    width: 100%;
}


.screenshot{

    border: solid white 5px;
    border-radius: 20px;
}







    
    
    
    
    /**************************************************  SMALL SCREEN (MOBILE PHONE) ***********************************************/
    
    
    
    
    @media  (min-width: 480px) {
    
    html{ 
    
    font-size: 14px;
    
    }
    
    .gridwrapper{

        width: 100%;
        display: block;
    
    }
   
/* remove bottom margin from cell for multi-column grid; grid automatically adds gaps */

.cell{  
    margin-bottom: 0;
}
  
  .cell_light{  
    margin-bottom: 0;
}
  
  
    .cell_dark{  
    margin-bottom: 0;
}
  
  
.cell_wallpaper{  
    margin-bottom: 0;
}  
    






    .h2_sns{
    font-family: 'Luckiest Guy', sans-serif;
    font-size: 2em;
    margin-bottom: -0.25em;
    
    color: white;
    }
    
    .h3_sns{
    font-family: 'Luckiest Guy', sans-serif;
    font-size: 1.3em;
    margin-bottom: -0.25em;
    
    color: white;
    }
    .h4_sns{
    font-family: 'Luckiest Guy', sans-serif;
    font-size: 1em;
    margin-top: -0.5em;
    margin-bottom: -0.25em;
    color: black;
    }
    
    .h5_sns{
    font-family: 'Luckiest Guy', sans-serif;
    font-size: .85em;
    margin-top: -0.5em;
    margin-bottom: -0.25em;
    color: white;
    }
    
 

    
    
    .hero_sns_parallax{ 
      /* The image used */
      background-image: url("../../uploads/2021/01/cic_sign_202101.jpg");
    
      /* Set a specific height */
        height: 100vh;
        text-align: center;
        vertical-align: middle;
        padding-top: 50%;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .hero_sns{
        background-image: url("../../uploads/2019/03/1200x477_summerville.jpg");
           
        background-repeat: no-repeat;
        height: 477px;
    
    }
    
    .sns_intro{

        width:100%;
        height: auto;

        padding: 5%;
        
            
            /* margin-top: -3%; */
            font-size: 1em;
            color: white;
            
    }
    
    
    
    
  
    
    
    .cta_sns_block50{
    
    width:49%;
    
    padding-bottom:2%;
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    color: white;
    float: left;
    }
    
    
}

    
    
    /**************************************************  MEDIUM (TABLET) SCREEN ***********************************************/
    
    
    
    /*Mission page styles for medium (tablet) screen */
    
    @media  (min-width: 768px) {
    
    
        html{ 
        
        font-size: 16px;
        
        }
        

        .header{

     
            background-color: var(--dg_green);
            
            /* background-image: url(../img/1260x240_dekogames_logo_t.png); */
            
            
            border-radius: 10px;
            margin-bottom: 10px;
            /* padding: 20px; */
            height: auto;
            
            display: grid;
            
            grid-template-columns: 5fr 1fr;
                
            grid-auto-rows: minmax(120px, auto);
            
            vertical-align: middle;
            }


.header-social{

    display: block;
   

        padding-top: 20px;
   
}

        .navbar{

            color: white;
            text-transform: uppercase;
            margin-top: 10px;
        
           border-radius: 10px;
            margin-bottom: 10px;
            
            
            background-color: var(--dg_orange);
            min-height: 15px;
     
            padding: 10px 20px 10px 20px;
            display: flex;
            flex-direction: row;
            align-items: center;
           justify-content: space-around;
        }
        
        .navbar-mobile{

            display: none;
        }
        .gridwrapper{


            display: grid;
        
        max-width: 100%;
        
        grid-template-columns: 1fr 1fr;
        
        grid-auto-rows: minmax(250px, auto);
        gap: 10px;
        
        }
    
    .wrapper_post{
    
    display: flex;
    
    }
    
    
    .sidebar{
    
        flex: 1;
    }
    
    
    .main
    
    {
    
        flex: 3;
    }


    .section_header{

        
font-size: 1.15em;
    }

.hero{

    padding-top: 200px;

}

        .hero-cta{
      
    
           margin-left: 60%;
           margin-top: 78%;

      padding: 10px;
        font-size: 1.15em;

    
    
    }



        
        .h2_sns{
        font-family: 'Luckiest Guy', sans-serif;
        font-size: 2em;
        margin-bottom: -0.25em;
        
        color: white;
        }
        
        .h3_sns{
        font-family: 'Luckiest Guy', sans-serif;
        font-size: 1.8em;
        margin-bottom: -0.25em;
        
        color: white;
        }
        .h4_sns{
        font-family: 'Luckiest Guy', sans-serif;
        font-size: 1em;
        margin-top: -0.5em;
        margin-bottom: -0.25em;
        color: black;
        }
        
        .h5_sns{
        font-family: 'Luckiest Guy', sans-serif;
        font-size: .85em;
        margin-top: -0.5em;
        margin-bottom: -0.25em;
        color: white;
        }
        
        .sns_wrap {
        /* margin-top: -12vh; */
            margin-left: auto; 
             margin-right: auto; 
            width: 100%;
            /*max-width: 1200px;*/
            min-width: 600px;
            padding-left: 0%; 
            padding-right: 0%; 
            
            font-family: 'Luckiest Guy', cursive;
            font-family: 'Roboto', sans-serif;
        }
        
        .header_sns{
        
        
               
            background-size: contain;
            color: white;
            padding-left: 5%;
                padding-right: 5%;
            padding-top: 400px;
            font-size: 1.75em;
            height: auto;
        }
        
        
        .hero_sns_parallax{ 
          /* The image used */
            /* background-image: url("../../uploads/2019/03/1200x477_summerville.jpg"); */

          /* Set a specific height */
            height: 80vh;
            text-align: center;
            vertical-align: middle;
            padding-top: 10%;
          /* Create the parallax scrolling effect */
          background-attachment: fixed;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }
        
        .hero_sns{
            background-image: url("../../uploads/2022/10/sns_hero_202211_01.png");
               
            background-repeat: no-repeat;
            height: 477px;
        
        }
    
        
        .sns_intro{
            /*background-image: url("../../uploads/2019/03/1200x390_sns_intro.png");
                background-repeat: no-repeat;
                padding-left: 500px;
                padding-right: 20%;
                */
            width:100%;
            height: auto;
    
            padding: 5%;
            
                
                font-size: 1em;
                color: white;
                
        }
        .sns_intro_row{
            width: 80%;
                
                display: flex;
                flex-direction: row;
                border-radius: 10px;
                margin-bottom: 10px;
            
                align-items: center;
                justify-content: center;
            }
        .sns_intro_right{

            padding: 0 20px 0 0;
            
        }
        
        
        .slider_sns{
            background-color: #0f7290;
        height: 450px;
        
        
        }
     
        .cta_sns{
        
        padding-top: 10%;
        padding-bottom: 10%;

            
        }
        
        
        .cta_sns_block50{
        
        width:49%;
        
        padding-bottom:2%;
        padding-left: 10%;
        padding-right: 10%;
        text-align: center;
        color: white;
        float: left;
        }
        
        
      
    }
        
/*******************************************FULL SCREEN SIZE (DESKTOP)--  ********************************/

@media (min-width: 992px){

    .gridwrapper{


        display: grid;
    
    max-width: 1920px;
    
    grid-template-columns: 1fr 1fr 1fr  1fr;
    
    grid-auto-rows: minmax(250px, auto);
    gap: 10px;
    
    }


   



    .cell {
        /* flex: 1; */
min-height: 33vh;

margin-bottom: 20px;
    }


    .section_header{

        
        font-size: 1.25em;
            }

    .hero-cta{


       margin-left: 60%;
       margin-top: 78%;

  padding: 10px;
    font-size: 1.25em;
  

border-radius: 10px;


}




.hero-cta:hover{
    background-color: var(--dg_green);
}
    .h2_sns{
    font-family: 'Luckiest Guy', sans-serif;
    font-size: 2em;
    margin-bottom: -0.25em;
    
    color: white;
    }
    
    .h3_sns{
    font-family: 'Luckiest Guy', sans-serif;
    font-size: 1.8em;
    margin-bottom: -0.25em;
    
    color: white;
    }
    .h4_sns{
    font-family: 'Luckiest Guy', sans-serif;
    font-size: 1em;
    margin-top: -0.5em;
    margin-bottom: -0.25em;
    color: black;
    }
    
    .h5_sns{
    font-family: 'Luckiest Guy', sans-serif;
    font-size: .85em;
    margin-top: -0.5em;
    margin-bottom: -0.25em;
    color: white;
    }
    
    .sns_wrap {
    /* margin-top: -12vh; */

        width: 100%;
        /*max-width: 1200px;*/
  
        font-family: 'Luckiest Guy', cursive;
        font-family: 'Roboto', sans-serif;
    }
    
    .header_sns{
    
        /* background-size: contain; */
        
        color: white;
        padding-left: 75%;
            padding-right: 5%;
        padding-top: 20%;
        font-size: 1.75em;
         height:200px; 



        /*background-position:50% 0%;   */
        background-size:cover;  


        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    
    
    .hero_sns_parallax{ 
      /* The image used */
      background-image: url("../../uploads/2021/01/cic_sign_202101.jpg");
    
      /* Set a specific height */
        height: 80vh;
        text-align: center;
        vertical-align: middle;
        padding-top: 25%;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .hero_sns{
        background-image: url("../../uploads/2019/03/1200x477_summerville.jpg");
           
        background-repeat: no-repeat;
        height: 477px;
    
    }
    
    .sns_intro{
    
width: 50%;
        padding: 1% 25% 1% 25%;
        
        font-size: 1.25em;
            font-size: 1.25em;
            color: white;
            border-top: 10px solid white;
            border-bottom: 10px solid white;

    }



    .sns_intro_left{

        flex: 1;
    
    }


.sns_intro_right{

    flex:4;
    
}

    
    .slider_sns{
        background-color:var(--dg_green);
    height: auto;
    
    }
    
    
    .cta_sns{
    
    padding: 5%;
    min-height: 200px;
        background-color: var(--dg_orange);
        display: flex;    
        flex-direction: row;
        
justify-content: space-around;
    }

    .cta_sns_cell{

flex: 1;
color: white;
text-align: center;

    }
    
    
    .cta_sns_block50{
    
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    color: white;
 
    flex: 1;
    }
    
    
    }