/*************************/
/* Home Page */
/*************************/
@media(min-width: 320px) and (max-width: 480px){
    header {
        padding-bottom: 40px;
    }
    header .navbar-brand{
        display: block;
    }
    header .navbar-brand img{
        max-width: 200px;
    }
    header .navbar {
        padding: 15px 0;
    }
    .header-site-logo{
        display: none;
    }
    .header-page-title a {
        padding: 20px 50px;
        font-size: 18px;
    }
    .header-page-title{
        padding-top: 35px;
    }
    div#triangle-box {
        max-width: 100%;
    }
    #slider-carousel .item img {
        max-width: 100%;
    }
    #slider-carousel .owl-dots button span {
        width: 20px;
        height: 20px;
    }
    #slider-carousel .owl-dots button {
        margin: 0;
    }
    .game-title h3 {
        font-size: 30px;
    }
    .game-container {
        border-width: 10px;
    }
    .game-sets {
        margin: 50px 0 50px 0;
    }
    .game-lose:before, .game-win:before {
        border-width: 3px;
    }
    .game-lose:after, .game-win:after{
        font-size: 20px;
        bottom: -35px;
    }
    .game-cta > h3 {
        font-size: 36px;
    }
    .game-content-after-click {
        margin: 0 auto;
        width: 100%;
    }
    .game-content-after-click p {
        font-size: 16px;
    }
    .game-content-after-click p br{
        display: none;
    }
    .next-and-reset {
        width: 100%;
        border-width: 5px;
    }
    .next-and-reset a {
        width: 100%;
        font-size: 26px;
    }
    .next-and-reset a:first-child{
        margin-bottom: 30px;
    }
    .next-and-reset a:last-child{
        margin-top: 30px;
    }
    .next-and-reset::before {
        top: 48%;
        left: 50%;
        width: 78%;
        border: 3px solid #fff300;
        height: 0;
    }
    .product-section-title img {
        max-width: 80%;
    }
    .banda-desktop{
        display: none !important;
    }
    .banda-mobile{
        display: block !important;
        margin-bottom: 30px;
    }
    .footer-nav > ul{
        margin-top: 35px;
    }
    .footer-nav > ul > li {
        margin-right: 0;
        width: 100%;
        margin-bottom: 25px;
    }
    .footer-nav > ul > li ul {
        margin: 0;
        padding: 0;
        list-style: none;
        margin-top: 15px;
        margin-left: 28px;
    }
    .min-height{
        min-height: 400px;
    }
}
@media(min-width: 481px) and (max-width: 767px){
    header .navbar-brand{
        display: block;
    }
    header .navbar-brand img{
        max-width: 200px;
    }
    header .navbar {
        padding: 15px 0;
    }
    .header-site-logo{
        display: none;
    }
    .header-page-title a {
        padding: 20px 50px;
        font-size: 25px;
    }
    div#triangle-box {
        max-width: 100%;
    }
    #slider-carousel .owl-dots button span {
        width: 20px;
        height: 20px;
    }
    #slider-carousel .owl-dots button {
        margin: 0;
    }
    .game-title h3 {
        font-size: 30px;
    }
    .game-container {
        border-width: 10px;
    }
    .game-sets {
        margin: 50px 0 50px 0;
    }
    .game-lose:before, .game-win:before {
        border-width: 3px;
    }
    .game-lose:after, .game-win:after{
        font-size: 20px;
        bottom: -35px;
    }
    .game-cta > h3 {
        font-size: 36px;
    }
    .game-content-after-click {
        margin: 0 auto;
        width: 100%;
    }
    .game-content-after-click p {
        font-size: 16px;
    }
    .game-content-after-click p br{
        display: none;
    }
    .next-and-reset {
        width: 100%;
        border-width: 5px;
    }
    .next-and-reset a {
        width: 100%;
        font-size: 26px;
    }
    .next-and-reset a:first-child{
        margin-bottom: 30px;
    }
    .next-and-reset a:last-child{
        margin-top: 30px;
    }
    .next-and-reset::before {
        top: 48%;
        left: 50%;
        width: 78%;
        border: 3px solid #fff300;
        height: 0;
    }
    .banda-desktop{
        display: none !important;
    }
    .banda-mobile{
        display: block !important;
        margin-bottom: 30px;
    }
    .footer-nav > ul{
        margin-top: 35px;
    }
    .footer-nav > ul > li {
        margin-right: 0;
        width: 100%;
        margin-bottom: 25px;
    }
    .footer-nav > ul > li ul {
        margin: 0;
        padding: 0;
        list-style: none;
        margin-top: 15px;
        margin-left: 28px;
    }
    .header-page-title {
        margin-top: 0px;
    }
    .products-box {
        margin: 30px;
    }
    #slider-carousel .item img {
        max-width: 100%;
    }
    .min-height{
        min-height: 400px;
    }
}
@media(min-width: 768px) and (max-width: 992px){
    #slider-carousel .item img {
        max-width: 100%;
    }
    .game-lose:before, .game-win:before{
        border-width: 5px;
    }
    .game-lose:after, .game-win:after{
        font-size: 20px;
        bottom: -40px;
    }
    .banda-desktop{
        display: none !important;
    }
    .banda-mobile {
        display: block !important;
        padding-top: 25px;
    }
    .footer-logo{
        margin-bottom: 50px;
    }
    .footer-nav > ul > li {
        margin-right: 0px;
    }
    .footer-nav > ul > li > a {
        font-size: 19px;
    }
}
@media(min-width: 993px) and (max-width: 1200px){
    header .navbar ul li a {
        font-size: 26px;
    }
    header .navbar .dropdown-menu a {
        font-size: 18px;
    }
    .game-content-after-click p br{
        display: none;
    }
    .footer-nav > ul > li > a {
        font-size: 16px;
    }
    .footer-nav > ul > li {
        margin-right: 0px;
    }
}
/*************************/
/* About Page */
/*************************/
@media(min-width: 320px) and (max-width: 480px){
    .about-content p {
        font-size: 16px;
    }
}
@media(min-width: 481px) and (max-width: 767px){
    .about-content p {
        font-size: 18px;
    }
}
@media(min-width: 768px) and (max-width: 992px){
    .about-content p {
        font-size: 18px;
    }
}
@media(min-width: 993px) and (max-width: 1200px){
    .about-content p {
        font-size: 18px;
    }
}
/*************************/
/* Revolutionary Page */
/*************************/
@media(min-width: 320px) and (max-width: 480px){
    .kits-title * {
        font-size: 30px;
    }
    .kit-box div img {
        max-width: 70%;
        margin: 0 auto;
        display: inherit;
    }
    .kit-meta h3 {
        font-size: 30px;
    }
    .kit-meta h3 ~ * {
        font-size: 20px;
        line-height: 25px;
        padding-left: 30px;
        padding-right: 60px;
    }
    .kit-meta h3 ~ ::before {
        width: 20px;
        height: 20px;
        line-height: 20px;
    }
    .kit-meta {
        margin-top: 40px;
    }
    .kit-cta {
        margin-top: 0px;
        margin-bottom: 30px;
        display: inline-block;
        width: 100%;
    }
    .kit-cta a {
        font-size: 16px;
        padding: 20px;
        display: inline-block;
        width: unset;
    }
    .kit-box {
        padding-top: 50px;
    }
    .kit-box:nth-child(odd) div img{
        margin-bottom: 40px;
    }
    .availability-title{
        margin-bottom: 40px;
    }
    .availability-title * {
        font-size: 30px;
    }
    .availability-title ~ img {
        max-width: 80%;
    }
    .revolutionary-banner img {
        max-width: 95%;
        margin: 0 auto;
        display: inherit;
    }
    .page-banner-img ~ img{
        margin-top: -30px;
    }
}
@media(min-width: 481px) and (max-width: 767px){
    .kits-title * {
        font-size: 30px;
    }
    .kit-box div img {
        max-width: 70%;
    }
    .kit-meta h3 {
        font-size: 30px;
    }
    .kit-meta h3 ~ * {
        font-size: 20px;
        line-height: 25px;
        padding-left: 30px;
        padding-right: 60px;
    }
    .kit-meta h3 ~ ::before {
        width: 20px;
        height: 20px;
        line-height: 20px;
    }
    .kit-meta {
        margin-top: 40px;
    }
    .kit-cta {
        margin-top: 0px;
        margin-bottom: 30px;
        display: inline-block;
        width: 100%;
    }
    .kit-cta a {
        font-size: 16px;
        padding: 30px;
        display: inline-block;
        width: unset;
    }
    .kit-box {
        padding-top: 50px;
    }
    .kit-box:nth-child(odd) div img{
        margin-bottom: 40px;
    }
    .availability-title{
        margin-bottom: 40px;
    }
    .availability-title * {
        font-size: 30px;
    }
    .availability-title ~ img {
        max-width: 80%;
    }
    .revolutionary-banner img {
        max-width: 95%;
        margin: 0 auto;
        display: inherit;
    }
    .page-banner-img ~ img{
        margin-top: -30px;
    }
}
@media(min-width: 768px) and (max-width: 992px){
    .kits-title * {
        font-size: 30px;
    }
    .kit-box div img {
        max-width: 70%;
    }
    .kit-meta h3 {
        font-size: 30px;
    }
    .kit-meta h3 ~ * {
        font-size: 20px;
        line-height: 25px;
        padding-left: 30px;
    }
    .kit-meta h3 ~ ::before {
        width: 20px;
        height: 20px;
        line-height: 20px;
    }
    .kit-meta {
        margin-top: 40px;
    }
    .kit-cta {
        margin-top: 0px;
        margin-bottom: 30px;
        display: inline-block;
        width: 100%;
    }
    .kit-cta a {
        font-size: 16px;
        padding: 30px;
        display: inline-block;
        width: unset;
    }
    .kit-box {
        padding-top: 50px;
    }
    .kit-box:nth-child(odd) div img{
        margin-bottom: 40px;
    }
    .availability-title{
        margin-bottom: 40px;
    }
    .availability-title * {
        font-size: 30px;
    }
    .availability-title ~ img {
        max-width: 80%;
    }
    .revolutionary-banner img {
        max-width: 75%;
        margin: 0 auto;
        display: inherit;
    }
    .kit-box .pl-4, .kit-box .pr-4 {
        padding: 0 !important;
    }
    .kit-box:nth-child(odd) .pl-4  {
        padding: 15px !important;
    }
    .kit-box div img {
        margin-top: 50px;
    }
}
@media(min-width: 993px) and (max-width: 1200px){
    .kit-box div img {
        max-width: 70%;
    }
    .kit-meta h3 {
        font-size: 30px;
    }
    .kit-meta h3 ~ * {
        font-size: 20px;
        line-height: 25px;
        padding-left: 30px;
    }
    .kit-meta h3 ~ ::before {
        width: 20px;
        height: 20px;
        line-height: 20px;
    }
    .kit-meta {
        margin-top: 40px;
    }
    .kit-cta {
        margin-top: 0px;
        margin-bottom: 30px;
        display: inline-block;
        width: 100%;
    }
    .kit-cta a {
        font-size: 16px;
        padding: 30px;
        display: inline-block;
        width: unset;
    }
    .kit-box {
        padding-top: 50px;
    }
    .kit-box:nth-child(odd) div img{
        margin-bottom: 40px;
    }
    .availability-title{
        margin-bottom: 40px;
    }
    .availability-title ~ img {
        max-width: 80%;
    }
    .revolutionary-banner img {
        max-width: 75%;
        margin: 0 auto;
        display: inherit;
    }
    .kit-box .pl-4, .kit-box .pr-4 {
        padding: 0 !important;
    }
    .kit-box:nth-child(odd) .pl-4  {
        padding: 15px !important;
    }
    .kit-box div img {
        margin-top: 50px;
    }
}
/*************************/
/* Workbench Kit Page */
/*************************/
@media(min-width: 320px) and (max-width: 480px){
    .step-by-step-heading h3 {
        font-size: 40px;
    }
    .step-by-step-heading h4 {
        font-size: 35px;
    }
    .step-by-step-level span {
        font-size: 28px;
    }
    .step-by-step-level a {
        font-size: 22px;
        min-width: 100px;
        margin-bottom: 5px;
    }
    .section-title h3 {
        font-size: 30px;
    }
    .step-box {
        padding: 50px 0 0 0;
    }
    .step-box-content * {
        font-size: 16px;
    }
}
@media(min-width: 481px) and (max-width: 767px){
    .step-by-step-heading h3 {
        font-size: 65px;
    }
    .step-by-step-heading h4 {
        font-size: 55px;
    }
    .step-by-step-level span {
        font-size: 28px;
    }
    .step-by-step-level a {
        font-size: 22px;
        min-width: 100px;
        margin-bottom: 5px;
    }
    .section-title h3 {
        font-size: 30px;
    }
    .step-box {
        padding: 50px 0 0 0;
    }
    .step-box-content * {
        font-size: 18px;
    }
}
@media(min-width: 768px) and (max-width: 992px){
    .step-box {
        padding: 100px 0 0 0;
    }
    .step-box-content * {
        font-size: 20px;
    }
}
/*************************/
/* Single Shelf */
/*************************/
@media(min-width: 320px) and (max-width: 480px){
    .two-cta-box{
        width: 100%;
        border-width: 5px
    }
    .two-cta-box a{
        width: 100%;
        font-size: 18px;
    }
    .two-cta-box a:first-child {
        margin-bottom: 0px;
    }
    .two-cta-box::before {
        top: 48%;
        left: 50%;
        width: 78%;
        border: 3px solid #fff300;
        height: 0;
    }
    .single-shelf-video-section img {
        max-width: 100%;
    }
    .single-shelf-banner-img ~ img {
        margin-top: 0;
    }
    .single-shelf-howto-content {
        padding-top: 50px;
    }
}
@media(min-width: 481px) and (max-width: 767px){
    .single-shelf-banner-img ~ img {
        margin-top: 0;
    }
    .two-cta-box a {
        font-size: 19px;
        line-height: 20px;
    }
    .single-shelf-video-section img {
        max-width: 100%;
    }
}
@media(min-width: 768px) and (max-width: 992px){
    .single-shelf-howto-content {
        padding-top: 100px;
    }
}
/*************************/
/* Pegboard Page */
/*************************/
@media(min-width: 320px) and (max-width: 480px){
    .pegboard-size-container:before{
        display: none;
    }
    .pegboard-size-container:after{
        display: none;
    }
    .peg-size-box div {
        padding: 15px 0 40px 0;
    }
}
@media(min-width: 481px) and (max-width: 767px){
    .pegboard-size-container:before{
        display: none;
    }
    .pegboard-size-container:after{
        display: none;
    }
    .peg-size-box div {
        padding: 15px 0 40px 0;
    }
}