@charset "utf-8"; 

@font-face 		{
				font-family: Days; /* Гарнитура шрифта */
				src: url(Fonts/Days.otf); /* Для IE5-8 */}
@font-face		{font-family: Myriad Pro; /* Гарнитура шрифта */
				src: url(Fonts/MyriadPro-Regular.otf); /* Для IE5-8 */
				
				}
 
/* Стандартные стили для ссылок*/
							   
/* По умолчанию, первая шапка*/

h1			{									
				text-decoration:none;
				font-family:Days;
				font-size:1.5vw;
				display:inline;
				font-weight: normal;
				color:black;
				}  


a			{	
				
				color:#000000;
				text-decoration:none;
				font-family:Myriad Pro,Calibri;
				font-size:1em;
				transition: 0.5s;
				}  		
				
				a:hover		{
				font-size:1em;
				color: #3db3e3;	   
				text-decoration:none;
				font-family:Myriad Pro, Calibri;
				}

a.mailto			{	
				font-size:1em;
				color:#000000;
				text-decoration:none;
				font-family:Days;
				}  					
				
a.mailto:hover  {
				font-size:1em;
				color:#3db3e3;
				text-decoration:none;
				font-family:Days;
				}  	
				
a img 			{border: none; 
				}
				
a.gray			{									
				text-decoration:none;
				font-family:Days;
				font-size:1.5vw;
				display:inline;
				font-weight: normal;
				color:#CCC;
				} 
a.gray:hover			{									
				text-decoration:none;
				font-family:Days;
				font-size:1.5vw;
				display:inline;
				font-weight: normal;
				color:#3db3e3;
				} 
				
	

				
@media screen and (max-width: 1024px) {				
a			{				
				color:#000000;
				text-decoration:none;
				font-family:Myriad Pro,Calibri;
				font-size:3vw;
				}  		
a:hover			{	
				
				color:#000000;
				text-decoration:none;
				font-family:Myriad Pro,Calibri;
				font-size:3vw;
				}  
			
a img 			{border: none; 				}

h1			{									
				text-decoration:none;
				font-family:Days;
				font-size:3vw;
				display:inline;
				font-weight: normal;
				color:black;
				} 
			
}






/* Модальное окно */

.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		display: none;
		pointer-events: none;
	}

	.modalDialog:target {
		display: block;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 500px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		
	}

	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}



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

#product { 
  display: grid;
  grid-template-areas: 
    "logo header header con"
	"title title title title"
	"desc desc desc desc"
	"ctg ctg ctg ctg"
    "footer footer footer footerend";
  grid-template-rows: 75px 8vh auto auto 50px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  height: 100vh;
  font-size:  12pt;
  max-width: 88vw;
  margin: auto; 
  }
  
 #grid-5 {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 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;}
  
#pageDesc {
  grid-area: desc;
  text-align:left;
  font-size: 1em;
  font-family:Myriad Pro;Calibri;  
  padding-top: 4vh;  
  color:#CCC;}

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

  
  #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.grid-5  {
			width:17vw;
  }
  
.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) {
	
#product { 
	display:grid;
    grid-template-areas: 
	  "header header"
	  "logo logo"
	  "title title"
	  "desc desc"
	  "ctg ctg"
	  "tilionmob tilionmob"
	  "con con";
  grid-template-rows: 2.5em 20vw 10vw auto auto 35vw 7em;
  grid-template-columns: 1fr 1fr;
  max-width: 96vw; 
 }
 
 #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: 2.5em;
}

a.header {
	  font-family:Myriad Pro;  
	  font-size: 3.5vw;
	  color:black;
	}
	
#pageDesc {
  grid-area: desc;
  text-align:left;
  font-size: 1em;
  font-family: Myriad Pro;  
}
	
#pageCtg{
  grid-area: ctg;
  margin-top: 3vh;
  font-family:Days;
  text-decoration:none;	
  font-size:1em; 
  text-align: center; 
}

 #grid-5 {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  margin-top:15px;	 
  grid-gap: 15px;
}

#pageCon{
  grid-area: con;
  font-family:Myriad Pro;
  text-align:center;
  padding: 2em;
}
#pageCon2{
   visibility: hidden;
    display: none;
}
 
    #pageTilionmob {
  padding-top: 5vh;
  margin-bottom: 2vh;
  grid-area: tilionmob;
  text-align:center;
  }
 #pageFooter {
    visibility: hidden;
    display: none;
}
#pageFooterend {
    visibility: hidden;
    display: none;
  }

.tech    {
			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;}

}