@media(min-width:1311px){  
  .col-match{width:calc(100% / 2) !important;flex-basis:auto !important}
  .match-data{width:calc(100% / 4) !important;flex-basis:auto !important}
}

@media(max-width:1600px){
  #main{
    width: calc(100% - 45rem);
    margin:0 5rem;
  }
  #minfo{
    width: 30rem;
    margin-right:5rem;
  }
  #content{
    margin-top:0 !important;
    padding-top:0 !important;
  }
  #device-showcase{
    width:40%;
  }
  #intro .intro-text ,
  #intro .intro-text h2{
    margin-top:2rem !important;
    padding-top:0 !important;
  }
  #intro .intro-text h2 +p{
    width:100% !important;
  }
  
  #slides-welcome {
    height: 45rem;
  }
}

@media(max-width:1400px){
  #main{
    width: calc(100% - 40rem);
    margin:0 5rem;
  }
  #minfo{
    width: 25rem;
    margin-right:5rem;
  }
  
  #device-showcase{display:none}
  
  #intro .intro-text{
    width:100% !important;
    margin:0 !important;
    padding:4rem 4rem 2rem !important;
    text-align:center;
  }
  #intro .intro-text h2{
    margin-top:0 !important;
    padding-top:0 !important;
    font-size:2rem !important;
  }
}

@media(max-width:1240px){
  #main{
    width: 100%;
    margin:0 !important;
    padding:0 1rem;
  }
  #minfo{
    width: 100%;
    margin:0;
    padding:0 1rem;
  }
  .bg-topper{
    padding:2rem 0;
  }
  .bg-topper h1{
    font-size: 3.5rem !important;
  }
  
  .logobox{
    height:5rem;
    padding-left:1.5rem;
    width:100%;
    display:block;
    border-bottom-right-radius:0;
  }
  .logo{
    background-position: left center;
  }
  
  .navbar-toggler{
    display:block !important;
    right:.5rem;
    top:1.25rem;
    font-size:2rem;
    z-index:100;
  }
  
  #topnav{top:0;height:auto !important}
  
  #topnav nav,
  #topnav nav .nav-item{
    background:#fff;
    display:block !important;
    width:100%;
  }
  
  #topnav nav .nav-item{
    background:#fff;
    display:block !important;
    width:100%;
  }
  
  #topnav .nav-link {
    /*REPLACED - DJC - 2020-08-12*//*line-height: 3rem;*/
		line-height: 2.6rem;
    padding: 0;
    margin: 0;
    color: #222;
    text-align:center;
    border-bottom: 1px solid #eee;
  }
  #topnav .nav-link:hover {
    border-bottom: 1px solid #eee;
  }
  
  #teaser{display:none}
  
  #topnav .navbar-text{
    text-align:center;
    display:block;
    padding: 1rem 1rem .25rem;
  }
  
  #topnav .navbar-text .btn{
    display:block;
    width:100%;
    margin:0 0 .5rem 0;
  }
  
  #collapser + nav{
    animation-name: menuOut;
    animation-duration: 2s;
    animation-fill-mode: forwards;
  }
  
  #collapser:checked + nav{
    animation-name: menuIn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
  }

  @keyframes menuIn {
    from {margin-top:-25rem;}
    to {margin-top:0;}
  }
  @keyframes menuOut {
    from {margin-top:0;}
    to {margin-top:-25rem;}
  }

  #content .container{
    margin:0;
    padding:0 1rem !important;
  }
  
  #content .card-group{
    margin:0 !important;
  }
  
  .testimonial{
    flex-basis:auto !important;
    width:100%;
  }
  
  h3.display-4{
    width:100% !important;
    padding:0 !important;
    font-size:2rem;
  }
  
  #intro .intro-text{
    width:100% !important;
    margin:0 !important;
    padding:2rem 4rem 0 !important;
    text-align:center;
  }
  
  #plugs{
    padding:0 2rem !important;
  }
  #plugs .row{
    margin-top:1rem !important;
  }
  
  #plugs .row .col-4{
    flex-basis:auto;
    max-width:100% !important;
    margin:0 auto;
  }
  
  #features .row > .col,
  #after .row > .col{
    flex-basis:auto;
    max-width:100% !important;
  }
  
  #after .display-1{
    font-size:3rem;
  }
  
  .task-content.layout-default #welcome {
    display:none;
  }
  
  #welcome-mobile{
    display:block !important;
  }
  #welcome-mobile img{
    margin-top:4rem;
    width:100%;
  }
  
  .footer span{padding-left:1rem;}
  
}

@media(max-width:900px){
  .bg-topper h1{
    font-size: 2.5rem !important;
  }
}