@font-face {
   font-family: 'Acumin Pro-Regular' ;
  src: url(../font/Acumin-Pro-Book.ttf);
}

@font-face {
   font-family: 'Kanit SemiBold' ;
  src: url(../font/Kanit-SemiBold.ttf);
}


body{
margin:0px;
padding:0px;
font-family: 'Acumin Pro-Regular' ;
}


.Kanit{
font-family: 'Kanit SemiBold' ;

}


.header{
background-image: url("../images/C_C-Desktop-HOME-Background.jpg");
background-repeat: no-repeat;
background-size: cover;
width:100%;height:100%;
min-height:700px;
position:relative;
}

.footer{
text-align:center;
width:100%;
height:180px;
background:#393939;

}

.footerBottom{
width:100%;
height:120px;
background:#333333;


}

.footerPad{
text-align:center;
padding-top:10px;
}

.footerPad span{
display:inline-block;

}

.about{
background-image: url("../images/Desktop-ABOUT-Background.jpg");
background-repeat: no-repeat;
background-size: cover;
width:100%;height:100%;
min-height:700px;
position:relative;
display: flex;
    align-items: flex-start;
    justify-content: center;
}

.aboutInner{
    width:70%;

}

.menu{
background:#333333;
width:100%;height:100%;
min-height:700px;
position:relative;
display: flex;
    align-items: flex-start;
    justify-content: center;
}

.menuInner{
    width:90%;
    padding:2%;

}

.menuHeader{
margin-left:130px;margin-bottom:30px;

}

.genHeader{
margin-top:30px;margin-bottom:10px;

}

.gaming{
background-image: url("../images/C_C-Desktop-Gaming-Background.webp");
background-repeat: no-repeat;
background-size: cover;
width:100%;height:100%;
min-height:760px;
position:relative;
display: flex;
    align-items: flex-start;
    justify-content: center;
}

.gamingInner{
    width:70%;
    height:100%;
}

.contact{
background-image: url("../images/C_C-CONTACT-Background.webp");
background-repeat: no-repeat;
background-size: cover;
width:100%;height:100%;
min-height:700px;
position:relative;
display: flex;
    align-items: flex-start;
    justify-content: center;
}

.contactInner{
    width:70%;
    height:100%;
}

.logo{
background-image: url("../images/C_C-logo-V2.png");
background-repeat: no-repeat;
background-size: cover;
position:absolute;
top:0px;
left:200px;
width:150px;
height:125px;


}



.top-parent {

    width: 100%;
    height: 80px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top:60px;
  }
  
    .top-one {
    
    width: 80px;
    height: 80px;
     display: flex;
  justify-content: flex-end;
  
  }
  
      .top-two {
      color:#00ff99;
    width: 300px;
    height: 80px;
     display: flex;
   justify-content: center;
   margin-left:12px;
  
  }
  
  .top-two h3{
  display:block;
  }

.parentMenu {

    width: 100%;
    height: 80px;
    display: flex;
    align-items: flex-start;
    justify-content: left;
  }

.parent {

    width: 100%;
    height: 80px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .child-one {
    width: 100px;
    height: 80px;
     display: flex;
  justify-content: center;
  align-items: flex-end;
    
    
  }

  
  .child-one a{
  color:#ff99cc;
  font-style: italic;
  text-transform: uppercase;
  font-size:16px;
  text-decoration:none;
  margin-bottom:10px;
  
  }
  
  .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
    align-items: center;
  justify-content: center;
  flex-basis: 49%;
  flex: 1;
  
}

.columnContact {
  display: flex;
  flex-direction: column;
    align-items: center;
  justify-content: top;
  flex-basis: 100%;
  flex: 1;
  flex-basis: 49%;
}

.columnSkull {
  display: flex;
  flex-direction: column;
    align-items: right;
  justify-content: top;
  flex-basis: 100%;
  flex: 1;
  margin-left: auto;
}

.columnMenu1 {
  display: flex;
  flex-direction: column;
    align-items: left;
  justify-content: top;
  flex-basis: 50px;
  flex: 1;
  
}

.columnMenu2 {
  display: flex;
  flex-direction: column;
    align-items: left;
  justify-content: top;
  flex-basis: 100px;
  flex: 1;
  
}

.double-column {
  display: flex;
  flex-direction: column;
     align-items: left;
  justify-content: top;
  flex-basis: 100%;
  flex: 2;
}

.half-column {
  display: flex;
  flex-direction: column;
     align-items: left;
  justify-content: top;
  flex-basis: 100%;
  flex: 0.5;
}

.treble-column {
  display: flex;
  flex-direction: column;
     align-items: left;
  justify-content: top;
  flex-basis: 100%;
  flex: 2.5;
}

.gameCenter{
background-image: url("../images/Gaming-text-background.png");
background-repeat: no-repeat;
background-size: cover;
width:100%;height:600px;

}

.skull{
text-align:center;
margin-top:20px;
}

.skullText{
text-align:center;
margin-top:10px;
color:#ffcc33;
}

.skullText p{
padding-left:6%;
padding-right:6%;
}

.contactCenter{
background-image: url("../images/Contact-text-background.png");
background-repeat: no-repeat;
background-size: cover;
width:100%;height:480px;

}

.contacts{
text-align:center;
margin-top:80px;
}

.contactsText{
text-align:center;
margin-top:10px;

}

.contacts p{
padding-left:6%;
padding-right:6%;
line-height:24px;
}

.textYellow{
display:block;
color:#ffcc33;
font-size:24px;
font-weight:bold;
line-height:24px;
text-shadow: 2px 2px #000;
}

.textPink{
display:block;
color:#ff99cc;
font-size:24px;
font-weight:bold;
line-height:28px;
text-shadow: 2px 2px #000;

}

.textbox{
 width: 100%;
      height: 35px;
      margin: 0 auto;
      border: none; /* <-- This thing here */
      border:solid 2px #3399ff;
      border-radius: 10px;
      padding:2px;
      margin-bottom:12px;

}

.textbox2{
 width: 100%;
      height: 140px;
      margin: 0 auto;
      border: none; /* <-- This thing here */
      border:solid 2px #3399ff;
      border-radius: 10px;
      padding:2px;
      resize: none;

}

.textGreen{
color:#00ff99;
font-size:24px;
font-weight:bold;
text-shadow: 2px 2px #000;
}

.greenBox{
width:150px;
padding:12px;
background:#00ff99;
vertical-align:middle;
text-align:center;
border-radius:5px;
font-family: 'Acumin Pro-Regular' ;

}

.boxCenter{
margin-left:40px;
}

.boxCenter2{
margin:0 auto;
color:black;
}

.textCenter{
text-align:center;
}

.left-column {
 
  min-height: 100px;
  

}

.right-column {
    min-height: 100px;
    
    
}

.upper{
text-transform: uppercase;
}

.open{
font-family: 'Acumin Pro-Regular' ;
color:#ff99cc;

}

.blue{
font-family: 'Acumin Pro-Regular' ;
color:#3399ff;

}

.orange{
font-family: 'Acumin Pro-Regular' ;
color:#ffcc33;

}

.green{
font-family: 'Acumin Pro-Regular' ;
color:#00ff99;

}

.space{
margin-top:10px;
margin-bottom:10px;

}
  
    .active{
   background:#3399ff;
   top: calc(50% - 1000px);
   left: 0;
   transform: skew(-15deg);
   transform-origin:top;
   
  }
  
  .active a{
  color:black !important;
  }
  
   .child-two {
    background-image: url("../images/C_C-logo-V2.png");
    background-repeat: no-repeat;
    background-size: cover;
    width:120px;
    height:100px;
    margin-right:30px;
  }
  
  
    .mobile-container{
    
    width: 100%;
    height: 100px;
    display:none;
    align-items: flex-start;
    justify-content: center;
    }
    
    .mobile-logo {
    
    background-image: url("../images/C_C-logo-V2.png");
    background-repeat: no-repeat;
    background-size: cover;
    width:120px;
    height:100px;
  }

 #mobile-menu{
 display:none;
 }

nav {
  width:50%;
  height: 65px;
}


#menuToggle {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 25px;
  left: 25px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: flex;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#menuToggle span
{
  display: flex;
  width: 29px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: #36383F;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 180px;
  height: 400px;
  box-shadow: 0 0 10px #85888C;
  margin: -50px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background-color: #F5F6FA;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  transition-delay: 2s;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}


@media (max-width: 768px) {
 #mobile-menu{
 display:block;
 }
 
 .parent{
 display:none;
 }
 
 .mobile-container{
    display:flex;
    
    }

}


.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  display:none;
  opacity: 1;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}