@media screen and (min-width: 1024px) {

#pump { 
  display: grid;
  grid-template-areas: 
    "logo header header con"
	"title title title title"
	"menu gun gun gun"
    "footer footer footer footerend";
  grid-template-rows: 75px 8vh auto 50px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  height: 100vh;
  font-size:  12pt;
  max-width: 88vw;
  margin: auto; 
  }
  
#grid-gun {
  display: grid;
  grid-template-areas: 
    "short pict"
	"tech tech"
	"feat feat";
  grid-template-rows: auto;
  grid-template-columns: 1.2fr 1fr;
  margin-top:20px;	 
  }

#pageLogo {
  grid-area: logo;
  border-bottom: solid 2px #cde0ef;
  margin-left:-5vw; 
  padding: 10px 10px 10px 5vw;
  text-align:center;
  top: 0;  
  z-index:10;
  background: white;
  opacity:0.9;  
  
   
}
#pageLogo2 {
  grid-area: logo;
  border-bottom: solid 2px #cde0ef;
  margin-left:-5vw; 
  padding: 10px 10px 10px 5vw;
  text-align:center;
  position: sticky;
  top: 0;  
  z-index:9;
  background: white;
  opacity:0.85;  
  top: -2em;  
}
#pageHeader {
  grid-area: header;  
  padding-top: 2.8em;
  text-align: center;
  border-bottom: solid 2px #cde0ef;
  position: sticky;
  top: -2em;  
  z-index:1;
  background: white;
  opacity:0.8;
}

#pageCon{
  grid-area: con;
  margin-right:-5vw;
  text-align: right;
  padding-right: 5vw;
  padding-top: 5px;
  border-bottom: solid 2px #cde0ef;
  top: 0;  
  z-index:10;
  background: white;
}

#pageCon2{
  grid-area: con;
  margin-right:-5vw;
  text-align: right;
  padding-right: 5vw;
  padding-top: 5px;
  border-bottom: solid 2px #cde0ef;
  position: sticky;
  top: 0;  
  z-index:9;
  top: -2em;  
  background: white;
  opacity:0.85;
}

#pageTitle {
  grid-area: title;
  text-align:left;
  font-size: 1.5vw;
  font-family:Days;  
  padding-top: 4vh;  
  color:#CCC;}
  
#pageMenu{
  grid-area: menu;
  margin-top: 5vh;
  margin-left: -5vw;
  font-family:Days;
  text-decoration:none;	
  font-size:1.2vw;
  position: sticky;
}  

#pageGun{
  grid-area: gun;
  margin-top: 3vh;
  margin-bottom: 3vh;
  font-family:Days;
  text-decoration:none;	
  font-size:1.2vw; 
}

#pageShort{
  grid-area: short;
  font-family:Myriad Pro;
  text-decoration:none;	
  font-size:1em; 
}

#pagePict{
  grid-area: pict;
}

#pageFeat{
  grid-area: feat;
}

#pageTilionmob {
  visibility: hidden;
  display: none;
}

#pageFooter {
  grid-area: footer;
  text-align: left;
  padding-top: 15px;
  background: #3db3e3;
  margin-left: -10%;
  padding-left: 5%;
  
}

#pageFooterend {
  grid-area: footerend;
  font-size: 0.8em;
  font-family:Days;
  }
  
img.gun  {
			width:25vw;
  }
  
.tech    {
			position:relative; 
			text-align:left;			
}

img.gray    	{-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				-o-filter: grayscale(100%);
				filter: grayscale(100%);
				filter: gray; /* IE 6-9 */
				transition: 1.75s;
				max-width: 100%;
				}
img.gray:hover	 {
				-webkit-filter: none;
				-moz-filter: none;
				-ms-filter: none;
				-o-filter: none;
				filter: none;
				filter: none; /* IE 6-9 */
				transition: 0.75s;		
				max-width: 100%;
				}	
				
.spoiler > input + label:after{content: "-";float: right;font-family: Days;}
.spoiler > input:checked + label:after{content: "+";float: right;font-family: Days;}
.spoiler > input{display:none;}
.spoiler > input + label , .spoiler > .spoiler_body{font-family: Days; background:#CCC;padding:5px 15px;overflow:hidden;width:100%;box-sizing: border-box;display: block;}
.spoiler > input + label + .spoiler_body{display:block;}
.spoiler > input:checked + label + .spoiler_body{display: none; }
.spoiler > .spoiler_body{background: #FFF;border: none; }
.spoiler label:hover {cursor:pointer;}
				

}

		
 /* Stack the layout on small devices/viewports. */
@media (max-width: 1024px) {
	
#pump { 
	display:grid;
    grid-template-areas: 
	  "header"
	  "logo"
	  "title"
	  "gun"
	  "tilionmob"
	  "con";
  grid-template-rows: 2.5em 20vw 10vw auto 35vw 7em;
  grid-template-columns: 1fr;
  max-width: 96vw; 
 }
 
 #grid-gun {
  display: grid;
  grid-template-areas: 
    "pict"
	"short"
	"feat";
  grid-template-rows: auto;
  grid-template-columns: 1fr;

  margin-top:20px;	 
  }
 
 #pageTitle {
  grid-area: title;
  text-align:center;
  font-size: 3vw;
  font-family:Days;  
  padding-top: 2vh;  
  color:#CCC;
  } 
 
 #pageLogo {
 grid-area: logo;
 text-align:center;
 padding: 2vw;
  
}
 #pageLogo2 {
    visibility: hidden;
    display: none;
}
 
#pageHeader {
	grid-area: header;
	text-align: center;
	position: sticky;
    top: 0;  
    z-index:1;
    opacity:0.9;
	margin-left: -2vw;
    margin-right: -2vw;
	border-bottom: solid 2px #cde0ef;
    background: white;
    opacity:0.8;
	line-height: 3em;
}

a.header {
	  font-family:Myriad Pro;  
	  font-size: 3.5vw;
	  color:black;
}

#pageCon{
  grid-area: con;
  font-family:Myriad Pro;
  text-align:center;
  padding: 2em;
}
#pageCon2{
   visibility: hidden;
    display: none;
}

#pageMenu{
   visibility: hidden;
    display: none;
}  

#pageGun{
  grid-area: gun;
  width:80vw;
  margin:auto;
}

#pageShort{
  grid-area: short;
}

#pagePict{
  grid-area: pict;
}

#pageFeat{
  grid-area: feat;
}


  
#pageTilionmob {
  grid-area: tilionmob;
  padding-top: 5vh;
  margin-bottom: 2vh;
  text-align:center;
  }
  
 #pageFooter {
    visibility: hidden;
    display: none;
}
#pageFooterend {
    visibility: hidden;
    display: none;
  }

  
  img.grid-5  {
			width:45vw;
  }
  
  img.gray    {				max-width: 100%;
				}
				
a.gray			{									
				visibility: hidden;
				display: none;
				} 
a.gray:hover			{									
				visibility: hidden;
				display: none;
				} 
				
.spoiler > input + label:after{content: "+";float: right;font-family: Days;padding-right:15px;}
.spoiler > input:checked + label:after{content: "-";float: right;font-family: Days; padding-right:15px;}
.spoiler > input{display:none;}
.spoiler > input + label , .spoiler > .spoiler_body{background:#CCC; font-size:3vw; padding:10px 0px;overflow:hidden;width:100%;box-sizing: border-box;display: block;}
.spoiler > input + label + .spoiler_body{display:none;}
.spoiler > input:checked + label + .spoiler_body{display: block;}
.spoiler > .spoiler_body{background: #FFF;border: 3px solid #CCC;border-top: none;}

}