





    

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    
    .container, 
    .sequence-container,
    .disruptor-container,  
    .static-container {
   		width: 700px;
   		margin-left: -350px;
    }
    
    .container {height: 600px; margin-top: -300px !important; display:block !important; position: relative;}
    
    #persistentNav {
    	display: none;
    }
    
    
    .grid {width: 300px;}
    .full {width: 700px;}
    .push {margin-left: 350px;}

	.center-center {
	margin: 0 auto !important;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	width: 100%;
	padding-top: 150px;
	}
	
	.disruptor-container {
	margin-left: auto;
	width: 100%;
	}
    
    
    .sequence-container {
    	display: none;
    }
    
    .static-container {
    	display: block;
    	margin-top: -215px;
    	z-index: 500;
    }
    
    .static-container img {
		width:  720px;
		height: 404px;
    }
    
    .section-wrapper {
    	height: 800px;
    }
    
    .section-head {
    display:block !important; 
    opacity: 1 !important;
    top: 0px !important;
    z-index: 600;
    }
    .section-body {
    display:block !important; 
    opacity: 1 !important;
    bottom: 0px !important;
    z-index: 600;
    }
    
    .disruptor-container {width: 720px; }
    
    #start .container {top: 100px; left: 50%; margin-left: -360px; margin-top: 0px; position: relative; }
    #start .section-head h1 {margin-top: 300px; }
    
    #parallax1,
    #parallax2,
    #parallax3,
    #parallax4,
    #parallax5,
    #parallax6 {
  	position: absolute;
  	background-attachment:scroll; 
 	}
    
    
    
    #roll-off-system {
		background: url("../images/kaishi/rolloff.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%; 
		height: 400px;
		background-position: 50% 50% !important;
	}

    #roll-off-system .bx-prev,
	#roll-off-system .bx-next {display: none;}
	
	
	
	
	
	
	
	
	.mycontainer{
		width: 100%; overflow: hidden; height: 400px; margin: 0 auto;
	}

	.mycontainer .section-body{
		margin: 0 auto; top: 40px; text-shadow: 0px 0px 5px rgba(0,0,0,.5);
		overflow: hidden;
		width: 700px;
	}
	
	
	
	
	
	
	
	
    
    .span-wrap{width: 700px; padding-top: 100px;}
    
    #render {
	background: url("../images/kaishi/macro-still.png");
	height: 500px;
	width: 100%;
	background-size: cover;
	display: block;
	}
	#render video, 	
	#render #vid-hover ,
	#render #vid-overlay {display: none;}
	
	#airbrakemx .container{
		height: 600px;
	}
	
		
	#store-locator iframe{
	width: 100%;
	height: 600px;
	margin: 0 auto;
	display: block;
	}
	
   
    }
    
        
    



    

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    
        
    .container, 
    .sequence-container, 
    .disruptor-container, 
    .static-container {
   		width: 480px;
   		margin-left: -240px;
    }
    
    #progress, 
    #progressbg,
    #persistentNav {
    	display: none;
    }

    
    .container {height: 500px; margin-top: -250px !important; display:block !important; position: relative;}
       
    .grid,
    .full {width: 480px;}
    .push {margin-left: 0px;}
    
    .center-center {
	margin: 0 auto !important;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	width: 100%;
	padding-top: 150px;
	}
	
	.disruptor-container {
	margin-left: auto;
	width: 100%;
	}
    
    #video h1, 
    h1 {font-size: 38px; text-align: center;}
	h2 {font-size: 28px;}
	h3 {font-size: 20px;}
	h4 {font-size: 16px;}
	
	.number {font-size:18px;}
	.subhead {margin-top: 0px;}
	
	ul.cta {width: 480px;}
	ul.cta li {margin: 6px;}
    
    a.button {width: 220px;}
    a.button span.button-body {width: 220px;}
    a.button span.button-arrow {display: none;}
    
    a.text-button {width: 220px;}
    
    
    #persistentNav {
    	display: none;
    }

    
    .sequence-container {
    	display: none;
    }
    
    .static-container {
    	display: block;
    	margin-top: -133px;
    	z-index: 500;
    }
    
    .static-container img{
    	height: 269px;
    	width: 480px;
    	margin-left: -60px;
    	z-index: 500;
    }
    
    .section-wrapper {
    	height: 550px;
 
    }
    
    .section-head,
    .section-body {
    	z-index: 600 !important;
    }
    
    .section-head {
    display:block !important; 
    opacity: 1 !important;
    top: 0px !important;
    z-index: 600;
	}
	
	.section-body {
	display:block !important; 
    opacity: 1 !important;
    bottom: 0px !important;
    z-index: 600;
	}
    
    #start {
    height: 600px;
    }
    
    
    #start .container  {
    	position: absolute;
    	margin-top: -375px;
      	margin-left: -240px;
      	top: 50%;
    }
    
    #start .section-head {top: 50px;}
    #start ul.cta {margin-top: 220px;}
    
    #impact-data {display: none;}
    
    #parallax1,
    #parallax2,
    #parallax3,
    #parallax4,
    #parallax5,
    #parallax6 {
  	position: absolute;
  	background-attachment:scroll; 
  	background-size: cover;
 	}

	#parallax5,
    #parallax6{
    	display: none !important;
    }
    
    #airbrakemx {height: 800px !important;}
	#airbrakemx .container{
		height: 600px;
	}
	    
   	#store-locator iframe{
	width: 100%;
	height: 600px;
	margin: 0 auto;
	display: block;
	}
    
    }
    
    



    

    @media only screen and (max-width: 767px) {
    
    
    
    .container,
    .sequence-container,
    .static-container { 
    width: 300px;  
    margin-left: -150px;
    }
      
    #progress, 
    #progressbg,
    #persistentNav {
    	display: none;
    }

            
    .grid,
    .full {width: 300px;}
    .push {margin-left: 0px;}
    
    .container {height: 450px; margin-top: -225px !important; display:block !important; position: relative;}

	.center-center {
	margin: 0 auto !important;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	width: 100%;
	padding-top: 150px;
	}
	
	.disruptor-container {
	margin-left: auto;
	width: 100%;
	}
	
	#video h1, 
	h1 {font-size: 36px; text-align: center;}
	h2 {font-size: 24px; text-align: center}
	h3 {font-size: 20px;}
	h4 {font-size: 16px;}
	
	.number {font-size:16px;}
	.subhead {margin-top: 0px;}
	
	ul.cta {width: 300px;}
	ul.cta li {margin: 6px;}
	
	a.button {width: 280px;}
    a.button span.button-body {width: 280px;}
    a.button span.button-arrow {display: none;}
	
	a.text-button {width:120px;}
    
    
    #persistentNav {
    	display: none;
    }

    
    .sequence-container {
    	display: none;
    }
    
    .static-container {
    	display: block;
    	margin-top: -133px;
    	z-index: 500;
    }
    
    .static-container img{
    	height: 269px;
    	width: 480px;
    	margin-left: -90px;
		margin-top: -20px;
    	z-index: 500;
    }
    
	.section-wrapper {
    	height: 550px;
 
    }

    
    .section-head,
    .section-body {
    	z-index: 600 !important;
    }
    
    #start {
    height: 500px;
    }
    
    
    #start .container  {
    	position: absolute;
    	margin-top: -375px;
      	margin-left: -150px !important;
      	top: 50%;
    }
    
    #start .section-head {top: 50px;}
    #start ul.cta {margin-top: 190px;}
    
    .section-head {
    display:block !important; 
    opacity: 1 !important;
    top: 0px !important;
    z-index: 600;
	}
	
	.section-body {
	display:block !important; 
    opacity: 1 !important;
    bottom: 0px !important;
    z-index: 600;
	}

    
    #impact-data {display: none;}
    
    #parallax1,
    #parallax2,
    #parallax3,
    #parallax4,
    #parallax5,
    #parallax6 {
  	position: absolute;
  	background-attachment:scroll; 
  	background-size: cover;
 	}

	#parallax5,
    #parallax6{
    	display: none !important;
    }
    
    #scroll {display: none;}
    
    #video {height: 450px;}
    
    #maximum-peripheral .section-head h2{display: block;}
    #maximum-peripheral .section-body h2{display: none;}

	
	#roll-off-system {
		background: url("../images/kaishi/rolloff-mobile.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50% 0% !important;
		width: 100%; 
		height: 500px;
	}

    #roll-off-system .bx-prev,
	#roll-off-system .bx-next {display: none;}
	
	
	
	.mycontainer{

		overflow: hidden;
		
	}

	.mycontainer .section-body{
		margin: 0 auto; text-shadow: 0px 0px 5px rgba(0,0,0,.5);

		overflow: hidden;
		position: absolute;
		bottom: 0px !important;
		height: auto;
		top: auto;


		text-align: center;
		width: 100%;
		padding-top: 10px;
		background-color: rgba(0,0,0,.7);
	}
	
	.section-body{
		top: auto;
		width: 100%;
		margin: 0 auto;
	}
	
	.section-body .grid{
		width: 100%;
	}
	
	.section-body h2{
		text-align: center;
	}
	
	.section-body p{
		border: none;
	}
	
	
	
	
	
	
	
	
	
	
	
    
    .span-wrap{width: 300px; padding-top: 100px;}
    
    .quote-text span {
	font-size: 28px;
	line-height: 1;
}
	
	#render {
	background: url("../images/kaishi/macro-still.png");
	height: 225px;
	width: 100%;
	background-size: cover;
	display: block;
	}
	#render video, 	
	#render #vid-hover ,
	#render #vid-overlay {display: none;}
	
	
	#airbrakemx {height: 800px !important;}
	#airbrakemx .container{
		height: 600px;
	}
	#airbrakemx .static-container img{
		margin-top: -75px;
	}

	#store-locator iframe{
	width: 100%;
	height: 600px;
	margin: 0 auto;
	display: block;
	}


}




