body {

	color: #555;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;

	background:url('/images/bckk.png'); 
	background-attachment: fixed;

	background-size: contain;
}

	

.guide_half{
    float:left;
    width:50%;
    margin-top:2vw;
}
.guide_40{
    float:left;
    width:40%;
    margin-top:2vw;
}
.guide_40 img{
  margin-left:2vw;
}

.gridconte{
    display:grid;
    width:100%;
    grid-template-columns: 14vw minmax(50px, 60vw) 14vw;
    grid-template-rows: 1200px 1200px 1200px 1200px,1200px 1200px 1200px 1200px,1200px 1200px 1200px 1200px;

    justify-content: center;
    background-color:transparent;

}


.imglogo{
    width:400px;
    
    
}



.leftslide,.rightslide{
align-items:center;
text-align:center;
 background-color:#f3f3f3;
   
grid-row-start:4;
grid-row-end:5;

}

.mainconte{
 padding: 40px 40px;

background-color:#ffffff;

grid-column-start:2;
grid-column-end:2;
grid-row-start:4;
grid-row-end:5;  
 box-shadow: 2px 2px 15px 15px rgba(0,0,0, 0.03);
 z-index: 1;
}

.titlesec{
grid-column-start:1;
grid-column-end:-1;
grid-row-start:3;
grid-row-end:4;   
background-color:#f3f3f3;
 padding: 20px;
   
}

.gridheader{
grid-column-start:1;
grid-column-end:-1;
grid-row-start:1;
grid-row-end:2;
background-color:black;
}



.g-recaptcha,.g-recaptcha-response {
                        transform: scale(0.84);
                       
                        width:50%;
                       }


.gmlcode {
    font-family: monospace;
    background: #333;
    color: #FFF;
    border-radius:10px;
    padding:10px;
    text-align: left;
    line-height:18px;
    font-size: 16px;
}


.butonresp1{
    height:32px;
    
    font-size:1.2vw;
}

table{
   
   border-collapse: collapse;

   padding: 10px;

}
.funcdesc th{
  border: 1px solid black;
   border-collapse: collapse;
   padding: 10px;

}
.funcdesc td{
  border: 1px solid black;
   border-collapse: collapse;
   padding: 10px;

}

a:link, a:visited { color: #dc8924; text-decoration: none}
a:hover { color: #CC3300; text-decoration:underline }
a:hover,a:active { outline:none }


.gameslot a{
    color: white; text-decoration: none;
}



.pagination {
  display: inline-block;
  
}

.pagination a {
  color: gray;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color .3s;
}
.pagination li{
 display: inline-block;
	display: block;
	 float: left;
	  color: white;
  text-align: center;
  
  text-decoration: none;

}
.pagination a.active {
  background-color: #FF8E75;
  color: white;
  border-radius: 5px;
  
}

.pagination a:hover:not(.active) {background-color: #ddd;}



li{
   line-height:25px;     
    
}





h1, h2, h3, h4, h5, h6 {
	color:gray;
	font-weight:400;
	padding: 0;
	margin: 0;
	font-family: Helvetica,Arial,sans-serif;
}

h1 { font-size:40px; }
h2 { font-size:25px; margin-bottom: 2em; line-height: 28px }
h3 { font-size:20px; margin-bottom: 20px; }
h4 { font-size:18px; margin-bottom: 10px; }
h5 { font-size:16px }
h6 { font-size:14px }


#header {
	height: 340px;

	background-color: black;
	background-size: auto;

	
}






img { margin: 0; padding: 0}

#xpage {
	
	width: 100%;
	padding: 0px;
	border: 0;
	border-width: 0;


}
#xarea {

background-color:#F7F7F7;
padding: 20px;

}

#tempma {
background-color: #E6E5FE;
border-radius:5px
}


.clear { clear: both; display: block; }


.slidetitle{

    border-top-left-radius:5px;
    border-top-right-radius:5px;
    color: white;
    background-color:black;
    height:32px;
    padding-top:10px;
}

.slideconte{
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.2);
    color: gray;
    background-color:#ffffff;
    padding:10px;
}

.minshadow{
    transition: box-shadow 0.2s linear;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.minshadow:hover{
    transition: box-shadow 0.2s linear;
    box-shadow: 2px 2px 5px 5px rgba(0, 0, 0, 0.3);
}





.header { display: block }

#user,#user_login  {
padding:20px;
float: right;
border-radius:5px;
width: 380px;
height: 65px;
background-color:#403F3D;
}





.triexpand{
float:left;
width:32%;
}
.container {
  width: 80%;
  max-width: 600px;
  margin: 50px auto;
}

button.accordion {
  width: 100%;
  
  color:white;
  background-color:black;
  border-radius:5px;

  text-align: left;
  padding: 15px 20px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

button.accordion:after {
  content: '\25B7';
  font-family: "fontawesome";
  float: right;
}

button.accordion.is-open:after {
  content: '\25BD';
}

button.accordion:hover, button.accordion.is-open {
  background-color: gray;
}

.accordion-content {
  border-left: 1px solid whitesmoke;
  border-right: 1px solid whitesmoke;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.accordion-content img{
margin-top:2vw;

border-radius:5px;
box-shadow: 2px 2px 4px 4px rgba(0, 0, 0, 0.04);
}

p{
  text-align: justify;
  text-justify: inter-word;
  line-height:2vw;
  font-size: 1vw;
}

p.impact{

  line-height:3vw;
  font-size: 1.2vw;

  color:gray;


}

.gameslot{
    float:left;
    margin-left: 0.5vw;
    width:32%;
    height:36vw;
    border-radius:10px;
    margin-top:5px;
    box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.2);
    
    background-color:purple;
     transition: background-color 0.2s linear;
      transition: box-shadow 0.1s linear;
}

.gmdesc{
    height:10vw;
    width:100%;
    float:left;
    margin-top:1vw;
line-height:0.8vw;

}

.gameslot h2{
    font-size:1.2vw;
   margin-left:2vw;
   margin-top:1vw;
   height:0vw;


}



.gmslot_title{
  
    width:100%;
}

.gameslot h5{
    font-size:1.1vw;
   margin-left:2vw;
line-height:0.8vw;
}

.img_sect{
   height:12vw;
   width:100%;
   border:1px;
   float:left;
}



.gameslot img{

height:12vw;
width:80%;
border-radius:10px;
box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.1);

}




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

    .img_sect{
   height:20vw;

}

.gmdesc{

    line-height:1.5vw;

}
    .gameslot h5{
    line-height:1.5vw;
    font-size:1.5vw;

}
      .gameslot h2{
    
    font-size:2.5vw;

} 
    
    .gameslot img{

height:20vw;
width:80%;
border-radius:10px;


}

    
.gameslot{
  
   
    height:50vw;
}

    

    
    
    
    .gridconte{
    width:100%;
      grid-template-columns: 0vw minmax(50px, 4000px) 0vw;
    }
    

.leftslide{
align-items:center;
text-align:center;


grid-column-start:1;
grid-column-end:-1;   
grid-row-start:6;
grid-row-end:6;

}

.rightslide{
align-items:center;
text-align:center;


grid-column-start:1;
grid-column-end:-1;   
grid-row-start:5;
grid-row-end:5;

}


.mainconte{
 padding: 10px;

grid-column-start:1;
grid-column-end:-1;   
grid-row-start:4;
grid-row-end:5;
 
}

.titlesec{
grid-column-start:1;
grid-column-end:-1;
grid-row-start:3;
grid-row-end:4;   

 padding: 5px;
   
}

.gridheader{
grid-column-start:1;
grid-column-end:-1;
grid-row-start:1;
grid-row-end:2;
background-color:black;
}

    
    
    
    
    
    
    
    .gmlcode {
width:100%;
    line-height:2vw;
    font-size: 1.5vw;
}
    
p{
  text-align: justify;
  text-justify: inter-word;
  line-height:3vw;
  font-size: 1.5vw;
}
    
p.impact{

  line-height:4vw;
  font-size: 2.5vw;

  color:gray;


}


}


.userimg{
   width:64px;
   height:64px;
}

@media screen and (max-width: 900px){
    .butonresp1{
    height:20px;
    
    font-size:2.5vw;
}

  .guide_half{
    float:left;
    width:100%;
}
  .guide_40{
    float:center;
    width:60%;
}

.gridconte{
    display:grid;

    grid-template-columns: 50px minmax(50px, 2000px) 50px;
    grid-template-rows: 1200px 1200px 1200px 1200px,1200px 1200px 1200px 1200px,1200px 1200px 1200px 1200px;
}
    
    
    
    
h1 { font-size:25px; margin: 1.5vh; }
h2 { font-size:4vw; margin-bottom: 1em; line-height: 20px }
h3 { font-size:16px; margin-bottom: 20px; }
h4 { font-size:16px; margin-bottom: 10px; }
h5 { font-size:16px }
h6 { font-size:14px }
    
    
  .gmdesc{
      margin-top:8vw;
float:right;
width:50%;
height:10vw;
    line-height:1.5vw;

}  
    .gameslot img{
margin-top:1vw;
height:22vw;

width:75%;
border-radius:10px;


}

.gameslot h5{
font-size:2.5vw;

    line-height:1.5vw;
}
    .gameslot h2{
        margin-top:1.3vw;
font-size:4vw;

    line-height:1.6vw;
}
    .gameslot{
     width:100%;
     height:40vw;
    }
 
    .img_sect{
   height:30vw;
   width:90%;
   border:1px;
   float:left;
}
    
    .gmslot_title{
    height:38vw;
    width:45%;
        float:left;
    }

    
p{
  text-align: justify;
  text-justify: inter-word;
  line-height:2vw;
  font-size: 2vw;
}
    
p.impact{

  line-height:4vw;
  font-size: 2vw;

  color:gray;


}


.imglogo{
    width:100%;
    
    
}






.triexpand h2{
font-size:2.5vw;
}





#user,#user_login  {
padding:0vw;
margin-left: 10px;
padding-top:20px;
padding-bottom:20px;
border-radius:5px;
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
height: 42px;
background-color:#403F3D;
}
.userimg{
   margin-left: 40px;
   width:42px;
   height:42px;
}


}
@media screen and (max-width: 700px){
    
    #user_login {
        padding:0px;
        margin-top: 0px;
margin-bottom: 0px;
height:0px;
        visibility:hidden;
    }
    
    p{
  text-align: justify;
  text-justify: inter-word;
  line-height:5vw;
  font-size: 2.2vw;
}
    
p.impact{

  line-height:6vw;
  font-size: 2.8vw;

  color:gray;


}}


input[type=button]{
  transition: background-color 0.1s linear;
     color:#845B5B;
     box-shadow: 1px 1px 1px 1px rgba(0,0,0, 0.1);
     background-color: #F1E6E6;
       border-color: transparent;
  }
  input[type=submit]{
    font-family: Arial, Helvetica, sans-serif;
      transition: background-color 0.1s linear;
    border-radius:3px;
    background-color: #638AD0;
    border-color: transparent;
    color: white;
    box-shadow: 1px 1px 0px 0px rgba(0,0,0, 0.1);
  }
  
input[type=button]:hover {
  background-color: #C65E5E;
   cursor: pointer;
   color:white;
   transition: box-shadow 0.2s linear;
       box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
         transition: background-color 0.1s linear;
}
input[type=submit]:hover {
  
      border-radius:3px;
    background-color: #97AACB;
    border-color: transparent;
    color: white;
   
   cursor: pointer;

      transition: background-color 0.1s linear;
    
    transition: box-shadow 0.3s linear;

    box-shadow: 0px 0px 2px 2px rgba(0,0,0, 0.1);
}

button.download:hover {
  background-color: #4CAF50; /* Green */
    font-size:27px;
    
    cursor: pointer;
}
button.download{
font-size:26px;
color:white;
height:42px;
width:200px;
background-color:orange;
border-radius:10px
 
}



.gameslot:hover{
    transition: background-color 0.2s linear;
    background-color:#FF4054;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);;
    cursor: pointer;
}


.htableslot{
width:100%;
line-height: normal;
height:100px;
border-radius:10px;
margin-top:5px;
padding:10px;
background-color:#FF914D;


}


.htableslot:hover{
    transition: background-color 0.2s linear;
    background-color:#FFDC40;
     
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}