/*
======================================
**** HyperCracker Website ****
**** Theme Name : HyperCracker ****
**** Author : @TreeXilTeam ****
**** Author URI: https://www.treexil.com ****
======================================
*/

@media screen (min-width : 1024px) {
/* CSS CODE HERE FOR DESKTOP ---*/


}

@media (min-width: 992px) and (max-width: 1199px) {
/* CSS CODE HERE FOR TABLETS ---*/

}

@media(max-width:992px){
  .container {
    padding: 0 15px;
  }
}

@media screen and (max-width : 768px) {
/* CSS CODE HERE FOR SMALL TABLETS ---*/

#menu_open, .menu_mobile {display:block;}
.menu {display:none}
.menu_mobile {
    background: #fff;
    position: fixed;
    width: 85%;
    height: 100%;
    left: 0;
    z-index: 99999;
    padding: 30px;
    box-shadow: 0 0px 20px 2px rgba(0, 0, 0, 0.28);
    transform: translateX(-150%);
    transition: all 0.25s ease-in-out;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;
}
.menu_mobile.active {
  transform: translateX(0%);
}
.menu_mobile ul li {
    line-height: 40px;
}
.menu_mobile ul li a {
    color: #3C5A99;
    font-size: 15px;
    font-weight: bold;
}
#menu_open {
    color: #fff;
    line-height: 70px;
    font-size: 18px;
}
#menu_open .treexil-close {
    font-size: 20px;
}
.header_img {display: none}
.header_content h2.title {
    font-size: 33px;
    margin: 15px 0 30px 0;
}
.faq_container {
    padding: 25px;
}
.faq_container .title {
    padding-left: 0;
}
.faq_container .title:before {
    width: 0;
    height: 0;
}
.faq_container p {
    padding-left: 0;
}
.faq_container .title {
    padding-left: 0;
}
footer#footer {
    padding: 40px 0 40px;
}
.social_media {
    margin: 25px 0;
}
#hack_panel .section_title {
    margin: 15px 0 30px 0;
}
.panel_form_container .input_hack input {
    width: 100%;
}
.panel_form_container .input_hack button {
    width: 80%;
    margin-top: 15px;
}
.popup_container {
    width: 95%;
}
.popup_warning header {
    height: auto;
    line-height: 35px;
    padding: 30px 0;
}

}

@media(max-width:992px){}


@media screen and (max-width : 480px) {
/* CSS CODE HERE FOR SMARTPHONES ---*/
.notification {
    bottom: 1%;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 85%;
}

}

@media screen and (max-width : 320px) {
/* CSS CODE HERE FOR SMALL MOBILES ---*/
}