@charset "UTF-8";
/* CSS Document */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#thePopUp .androidFix {
    overflow:hidden !important;
    overflow-y:hidden !important;
    overflow-x:hidden !important;
}

.cookielink {
	text-decoration: underline;
	font-weight: 400;
	cursor: pointer;
	color: #fff;
}

.cookielinkboxed {
	text-decoration: none;
	font-weight: 600;
	cursor: pointer;
	color: #1378fb;
	background-color:#fff;padding: 10px;
	line-height: 60px;
}

#theEmail {
	width:90%;
}

@media (max-width:721px) {
body {
	margin-left: 10px;
	margin-right: 10px;
}
}

@media (max-width:721px) {
	.makestick {
		position: -webkit-sticky; /* Safari */
		position: sticky; /* everything else */
		top: 50px;
	}
	.table_glossary {
		width: 95%;
		background-color: white;
		border-style: solid;
		border-width: 1px;
		border-color: black;
		padding: 10px 0px 8px 0px;
		font-size: 10px;
	}
	a.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}
}

@media (min-width:721px) {
	.makestick {
		position: -webkit-sticky; /* Safari */
		position: sticky; /* everything else */
		top: 60px;

	}
	.table_glossary {
		width: 95%;
		background-color: white;
		border-style: solid;
		border-width: 1px;
		border-color: black;
		padding: 10px 0px 8px 0px;
	}
	a.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}
}

a {
	text-decoration: none;
}

.table_glossary td {
	color: gray;
	text-align: center;
	text-decoration: none;
}

.table_glossary a {
	color: black;
	font-weight: bold;
	text-decoration: none;
}

.selected {
	color: #1378fb;
	font-weight: 500;
	border-bottom: 1px solid #1378fb;
}

.unselected {
	color: black;
	font-weight: 200;
	border-bottom: none;
}

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 51%;
}

.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

.mobileShow {
	font-weight: bold;
	display: none;} 

@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
  
  .numTable {
	  text-align:center;
  }
  
  #fancyborder {
	  border: 2px solid #1378fb;
	  padding:10px;
  }
  
  .style_numdb_20bold {
    color: #1378fb;
    font: normal 30px "Helvetica", arial, sans-serif;
    font-weight: 600;
	text-decoration:none;
}

 .style_numdbl_18 {
    color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
}

 .style_numdbl_18bold {
    color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
}

.center {
  margin: auto;
  width: 80%;
  padding: 10px;
  max-width:1000px;
}

.imgcentermain {
  display: block;
  margin-left: auto;
  margin-right: auto;
    width: inherit;
}

#footerCookie {
   position:fixed;
   bottom:0;
   width:100%;
   height:80px;
   background-color:#000;
	color: #fff;
	z-index: 99999;
}

@media (max-width:721px) {
#footerCookie {
   width:95%;
	height: 100px;
}
}



#scrolldown {
   position:fixed;
   bottom:5%;
   height:60px;
   left:50%;
   margin-left:-30px;
   z-index:100;
}


.style20bold {
    color: #000;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: bold;
}

.style12italic {
    color: #000;
    font: normal 12px "Helvetica", arial, sans-serif;
    font-weight: 300;
	font-style:italic;
}

.style12 {
    color: #000;
    font: normal 12px "Helvetica", arial, sans-serif;
    font-weight: 300;
	font-style:none;
}

.style16 {
    color: #ffffff;
    font: normal 16px "Helvetica", arial, sans-serif;
    font-weight: 300;
	font-style:none;
}

.style16b {
    color: #000;
    font: normal 16px "Helvetica", arial, sans-serif;
    font-weight: 300;
	font-style:none;
}

@media (min-width:721px) {
.style30 {
    color: #000;
    font: normal 30px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
}
	
.style16p {
    color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: 300;
	font-style:none;
}
	.style16pb {
    color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: 400;
	font-style:none;
}
}

@media (max-width:721px) {
	.style30 {
    color: #000;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
}
	
.style16p {
    color: #000;
    font: normal 14px "Helvetica", arial, sans-serif;
    font-weight: 300;
	font-style:none;
}
	.style16pb {
    color: #000;
    font: normal 14px "Helvetica", arial, sans-serif;
    font-weight: 400;
	font-style:none;
}
}

.style20 {
    color: #000;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
}

.style20 a {
	text-decoration:none;
}

.style20white {
    background: #202020;
    color: #ffffff;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: normal;
}

.style20white a {
    background: #202020;
    color: #ffffff;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: normal;
}

.style20white a:hover {
    background: #202020;
    color: #ffffff;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: normal;
}

.style20 a:hover {
    color: blue;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
}

.style20whitebold {
    color: #fff;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
}

.style16whitebold {
    color: #fff;
    font: normal 16px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
}

.style20white a {
	text-decoration:none;
}

.style10 {
    color: #000;
    font: normal 10px "Helvetica", arial, sans-serif;
    font-weight: normal;
}

.style10p {
    background: none;
    color: #000;
    font: normal 10px "Helvetica", arial, sans-serif;
    font-weight: normal;
}

.style10p:link {
    background: none;
    color: #acdbfb;
    font: normal 10px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration-line:underline;
}

.style10white {
    background: #202020;
    color: #fff;
    font: normal 10px "Helvetica", arial, sans-serif;
    font-weight: normal;
}

.style10whiteBorder {
    background: none;
    color: #202020;
    font: normal 10px "Helvetica", arial, sans-serif;
    font-weight: normal;
	border: 2px solid #202020;
    border-radius: 2px;
}

.border { border-width: 2px; border-color: #202020; border-style: solid; } 

table.slider { background: url("PICS/slide.png");}

table.a {
	text-decoration:none;
}

.BG {
background-image:url(PICS/slide2.png);
background-repeat:no-repeat;/*dont know if you want this to repeat, ur choice.*/
}

#help_goback {
    position: absolute;
	background:#D3D3D3;
	border: 1px solid #000;
    border-radius: 4px;
	top: 420px;
    left: 5px;
}

	

#help_reset {
    position: absolute;
	background:#D3D3D3;
	border: 1px solid #000;
    border-radius: 4px;
	top: 420px;
    left: 50px;
}

	.button0 { grid-area: button0;}
	.button1 { grid-area: button1;}
	.button2 { grid-area: button2;}
	.button3 { grid-area: button3;}
	.button4 { grid-area: button4;}
	.button5 { grid-area: button5;}
	.button6 { grid-area: button6;}
	.button7 { grid-area: button7;}
	
	.pic0 { grid-area: pic0;}
	.pic1 { grid-area: pic1;}
	.pic2 { grid-area: pic2;}
	.pic3 { grid-area: pic3;}
	.pic4 { grid-area: pic4;}
	.pic5 { grid-area: pic5;}
	.pic6 { grid-area: pic6;}
	.pic7 { grid-area: pic7;}
	
	.who0 { grid-area: who0;}
	.who1 { grid-area: who1;}
	.who2 { grid-area: who2;}
	.who3 { grid-area: who3;}
	.who4 { grid-area: who4;}
	.who5 { grid-area: who5;}
	.who6 { grid-area: who6;}
	.who7 { grid-area: who7;}

@media (max-width:721px) {

.gridwidget {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-template-rows: 30px 175px 20px 50px 30px 175px 20px 50px 30px 175px 20px 50px 30px 175px 20px 50px;
	grid-template-areas:
	"who0 who1"
	"pic0 pic1"
	". ."
	"button0 button1"
	"who2 who3"
	"pic2 pic3"
	". ."
	"button2 button3"
	"who4 who5"
	"pic4 pic5"
	". ."
	"button4 button5"
	"who7 who6"
	"pic7 pic6"
	". ."
	"button7 button6";
}

#landing.gridwidget {
		width: 100%;
		height: auto;
	}
}

@media (min-width:721px){

.gridwidget {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-template-rows: 30px 175px 20px 50px 30px 175px 20px 50px;
	grid-template-areas:
	"who0 who2 who4 who7"
	"pic0 pic2 pic4 pic7"
	". . . ."
	"button0 button2 button4 button7"
	"who1 who3 who5 who6"
	"pic1 pic3 pic5 pic6"
	". . . ."
	"button1 button3 button5 button6";
}
	
	.sr_grid4_1 { grid-area: sr_grid4_1; vertical-align: middle; display: block;}
	.sr_grid4_2 { grid-area: sr_grid4_2; vertical-align: middle; display: block;}
	.sr_grid4_3 { grid-area: sr_grid4_3; vertical-align: middle; display: block;}
	.sr_grid4_4 { grid-area: sr_grid4_4; vertical-align: middle; display: block;}
	
	@media (min-width:721px){
.sr_grid4 {
	display: grid;
	vertical-align: middle;
	grid-template-columns: repeat(4,auto);
	grid-template-rows: auto;
	grid-template-areas:
	"sr_grid4_1 sr_grid4_2 sr_grid4_3 sr_grid4_4";
}	
	}
	@media (max-width:721px){
	.sr_grid4 {
	display: grid;
	vertical-align: middle;
	grid-template-columns: auto;
	grid-template-rows: auto auto auto auto;
	grid-template-areas:
	"sr_grid4_1"
	"sr_grid4_2"
	"sr_grid4_3"
	"sr_grid4_4";
}	
	}

#landing.gridwidget {
		width: 100%;
		height: auto;
	}

#landing.gridwidget {
		width: 100%;
		height: auto;
	}
}

	
	.app1 { grid-area: app1;
	color: #fff;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: bold;
	}
	.app0 { grid-area: app0;
	color: #fff;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: bold;
	}
	.app2 { grid-area: app2;
	color: #fff;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: bold;
	}
	.app3 { grid-area: app3;
	color: #fff;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: bold;
	}
	
	.apppic0 { grid-area: apppic0;}
	.apppic1 { grid-area: apppic1;}
	.apppic2 { grid-area: apppic2;}
	.apppic3 { grid-area: apppic3;}
	
	.apptxt0 { grid-area: apptxt0;
	color: #fff;
    font: normal 14px "Helvetica", arial, sans-serif;
    font-weight: normal;
	}
	.apptxt1 { grid-area: apptxt1;
	color: #fff;
    font: normal 14px "Helvetica", arial, sans-serif;
    font-weight: normal;
	}
	.apptxt2 { grid-area: apptxt2;
	color: #fff;
    font: normal 14px "Helvetica", arial, sans-serif;
    font-weight: normal;
	}
	.apptxt3 { grid-area: apptxt3;
	color: #fff;
    font: normal 14px "Helvetica", arial, sans-serif;
    font-weight: normal;
	}
	
	.appbut0{ grid-area: appbut0;}
	.appbut1{ grid-area: appbut1;}
	.appbut2{ grid-area: appbut2;}
	.appbut3{ grid-area: appbut3;}
	
@media (max-width:721px) {

.gridapplication {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-template-rows: 40px 40px 40px 20px 40px 40px 40px;
	grid-template-areas:
	"app0 app1"
	"apptxt0 apptxt1"
	"appbut0 appbut1"
	". ."
	"app2 app3"
	"apptxt2 apptxt3"
	"appbut2 appbut3";
}

#landing.gridapplication {
		width: 100%;
		
	}
}

@media (min-width:721px) {
.gridapplication {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-template-rows: 40px 40px 40px;
	grid-template-areas:
	"app0 app1 app2 app3"
	"apptxt0 apptxt1 apptxt2 apptxt3"
	"appbut0 appbut1 appbut2 appbut3";
}

#landing.gridapplication {
		width: 100%;
		height: auto;
	}
}

.techtitle0 { grid-area: techtitle0;
			  font-family: 'Sailec-thin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			  font-size:20px;
              font-weight: bold;
	}
	
.techtitle1 { grid-area: techtitle1;
			  font-family: 'Sailec-thin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			  font-size:20px;
              font-weight: bold;
	}
	
.techexp0 { grid-area: techexp0;
			  font: normal 16px "Helvetica", arial, sans-serif;
              font-weight: normal;
	}
	
.techexp1 { grid-area: techexp1;
			  font: normal 16px "Helvetica", arial, sans-serif;
              font-weight: normal;
	}
	
.techexp0b { grid-area: techexp0b;
			  font: normal 14px "Helvetica", arial, sans-serif;
              font-weight: normal;
	}
	
.techexp1b { grid-area: techexp1b;
			  font: normal 14px "Helvetica", arial, sans-serif;
              font-weight: normal;
	}
	
.techpic0 { grid-area: techpic0;
			  font: normal 14px "Helvetica", arial, sans-serif;
              font-weight: normal;
	}
	
.techpic1 { grid-area: techpic1;
			  font: normal 14px "Helvetica", arial, sans-serif;
              font-weight: normal;
	}

.gridtechnologies {
	display: grid;
	grid-template-columns: 1fr 100px 1fr;
	grid-template-rows: 60px 200px 60px 20px 100px;
	grid-template-areas:
	"techtitle0 . techtitle1"
	"techpic0 . techpic1"
	"techexp0 . techexp1"
	". . ."
	"techexp0b . techexp1b";
}

.mytitle {
	font-family: 'Sailec-Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			  font-size:20px;
			  font-weight:bold;    
}

.myh1 {
	font-family: 'Sailec-Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			  font-size:20px;
              font-weight: bold;
			  text-align: center;
}

.myh2 {
	font-family: 'Sailec-Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			  font-size:18px;
              font-weight: bold;
			  text-align: center;
}

@media (min-width:825px) {
.myh2big {
	font-family: 'Sailec-Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			  font-size:26px;
              font-weight: bold;
			  text-align: center;
}
}

@media (max-width:825px) {
.myh2big {
	font-family: 'Sailec-Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			  font-size:20px;
              font-weight: bold;
			  text-align: center;
}
}

.myh3 {
	font-family: 'Sailec-Thin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			  font-size:16px;
              font-weight: 600;
			  text-align: justify;
			  text-justify:auto;
	margin: 16px 0px 0px 0px;
}

.myh3c {
	font-family: 'Sailec-Thin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			  font-size:16px;
              font-weight: 600;
			  text-align: center;
}

.myh4 {
	font-family: 'Sailec-Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			  font-size:12px;
              font-weight: normal;
			  text-align: left;
	margin: 0px 0px 0px 0px;
}

.perfectfit_el0 {grid-area: perfectfit_el0}
.perfectfit_el1 {grid-area: perfectfit_el1}
.perfectfit_el2 {grid-area: perfectfit_el2}
.perfectfit_el3 {grid-area: perfectfit_el3}

@media (min-width:825px) {
.gridperfectfit {
	display: grid;
	grid-template-columns: 1fr 25 1fr;
	grid-template-rows: 400px 25px 400px;
	grid-template-areas:
	"perfectfit_el0 . perfectfit_el1"
	". . ."
	"perfectfit_el2 . perfectfit_el3";
}
}

@media (max-width:825px) {
.gridperfectfit {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 400px 25px 400px 25px 400px 25px 400px;
	grid-template-areas:
	"perfectfit_el0"
	". "
	"perfectfit_el1"
	"."
	"perfectfit_el2"
	". "
	"perfectfit_el3";
}
}

/* ---- */

@media (min-width:860px) {
	#detailedmenu1 {
		padding: 0px 0px 0px 15px;
		border-left: 3px solid #1378fb;
		box-shadow: 7px 7px 4px grey;
		background-color: white;
	}

	#detailedmenu2 {
		padding: 0px 0px 0px 15px;
		border-left: 3px solid #1378fb;
		box-shadow: 7px 7px 4px grey;
		background-color: white;
	}

	#detailedmenu3 {
		padding: 0px 0px 0px 15px;
		border-left: 3px solid #1378fb;
		box-shadow: 7px 7px 4px grey;
		background-color: white;
	}
}


@media (max-width:860px) {
	#detailedmenu1 {
		background: white;
		text-align: center;
		line-height: 40px;
		/*border-left: 3px solid #1378fb;*/
		box-shadow: 7px 7px 4px grey;
		width: 100%;
		height: 100%;
		opacity: 1;
		z-index: 2000;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		position: fixed;
		margin: 100px 0px 0px 1px;
		font-size: 0.85em;
	}
	
	#detailedmenu2 {
		background: white;
		text-align: center;
		line-height: 40px;
		/*border-left: 3px solid #1378fb;*/
		box-shadow: 7px 7px 4px grey;
		width: 100%;
		height: 100%;
		opacity: 1;
		z-index: 1000;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		position: fixed;
		margin: 140px 0px 0px 1px;
		font-size: 0.85em;
	}

	#detailedmenu3 {
		background: white;
		text-align: center;
		line-height: 40px;
		/*border-left: 3px solid #1378fb;*/
		box-shadow: 7px 7px 4px grey;
		width: 100%;
		height: 100%;
		opacity: 1;
		z-index: 1000;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		position: fixed;
		margin: 180px 0px 0px 1px;
		font-size: 0.85em;
	}
}

#detailedmenu1 a {
	text-decoration: none;
}
#detailedmenu2 a {
	text-decoration: none;
}
#detailedmenu3 a {
	text-decoration: none;
}

.footer_left_title {grid-area: footer_left_title; font-weight: bold; }
.footer_left_1 {grid-area: footer_left_1; color: gray;}
.footer_left_2 {grid-area: footer_left_2; color: gray;}
.footer_left_3 {grid-area: footer_left_3; color: gray;}
.footer_left_4 {grid-area: footer_left_4; color: gray;}
.footer_left_5 {grid-area: footer_left_5; color: gray;}
.footer_left_6 {grid-area: footer_left_6; color: gray;}

.footer_middle_title {grid-area: footer_middle_title; font-weight: bold;}
.footer_middle_1 {grid-area: footer_middle_1; color: gray;}
.footer_middle_2 {grid-area: footer_middle_2; color: gray;}
.footer_middle_3 {grid-area: footer_middle_3; color: gray;}
.footer_middle_4 {grid-area: footer_middle_4; color: gray;}
.footer_middle_5 {grid-area: footer_middle_5; color: gray;}

.footer_right_title {grid-area: footer_right_title; font-weight: bold;}
.footer_right_1 {grid-area: footer_right_1; color: gray;}
.footer_right_2 {grid-area: footer_right_2; color: gray;}

.gridfooter {
	text-align: left;
}

@media (min-width:700px) {
.gridfooter {
	margin: auto;
	display: grid;
	grid-template-columns: 300px 200px 200px;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-areas:
	"footer_left_title footer_middle_title footer_right_title"
	"footer_left_1 footer_middle_1 footer_right_1"
	"footer_left_2 footer_middle_2 footer_right_2"
	"footer_left_3 footer_middle_3 ."
	"footer_left_4 footer_middle_4 ."
	"footer_left_5 footer_middle_5 ."
	"footer_left_6 . .";
}
}

@media (max-width:700px) {
.gridfooter {
	margin: auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-areas:
	"footer_left_title"
	"footer_left_1"
	"footer_left_2"
	"footer_left_3"
	"footer_left_4"
	"footer_left_5"
	"footer_left_6"
	"."
	"footer_middle_title"
	"footer_middle_1"
	"footer_middle_2"
	"footer_middle_3"
	"footer_middle_4"
	"footer_middle_5"
	"."
	"footer_right_title"
	"footer_right_1"
	"footer_right_2"
	;
}
}

/* ---- */

div.scrollmenuflags {
	position:absolute;
	top: 198px;
    right: 45px;
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenuflags a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenuflags a:hover {
    background-color: #777;
}

table.tableflags {
	height:290px;
	width:400px;
	display:block;
	overflow:auto;
}

	.sr_advL00 { grid-area: sr_advL00;}
	.sr_advT00 { grid-area: sr_advT00;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_advL01 { grid-area: sr_advL01;}
	.sr_advT01 { grid-area: sr_advT01;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
		font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	
	.sr_advL10 { grid-area: sr_advL10;}
	.sr_advT10 { grid-area: sr_advT10;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_advL11 { grid-area: sr_advL11;}
	.sr_advT11 { grid-area: sr_advT11;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	
	.sr_advL20 { grid-area: sr_advL20;}
	.sr_advT20 { grid-area: sr_advT20;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_advL21 { grid-area: sr_advL21;}
	.sr_advT21 { grid-area: sr_advT21;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	
	.sr_advL30 { grid-area: sr_advL30;}
	.sr_advT30 { grid-area: sr_advT30;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_advL31 { grid-area: sr_advL31;}
	.sr_advT31 { grid-area: sr_advT31;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	
	@media (min-width:825px) {
	.sr_gridadv {
	display: grid;
	grid-template-columns: 75px 1fr 50px 75px 1fr;
	grid-template-rows: 100px 50px 100px 50px 100px;
	grid-template-areas:
	"sr_advL00 sr_advT00 . sr_advL01 sr_advT01"
	". . . . ."
	"sr_advL10 sr_advT10 . sr_advL11 sr_advT11"
	". . . . ."
	"sr_advL20 sr_advT20 . sr_advL21 sr_advT21";
}
	}
	
	@media (max-width:825px) {
	.sr_gridadv {
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-template-rows: 1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr;
	grid-template-areas:
	"sr_advL00 sr_advT00"
	". ."
	"sr_advL01 sr_advT01"
	". ."
	"sr_advL10 sr_advT10"
	". . "
	"sr_advL11 sr_advT11"
	". ."
	"sr_advL20 sr_advT20"
	". . "
	"sr_advL21 sr_advT21";
}
	}
	
	.sr_valid0 { grid-area: sr_valid0;}
	.sr_valid1 { grid-area: sr_valid1;}
	.sr_valid2 { grid-area: sr_valid2;}
	.sr_valid0t {grid-area: sr_valid0t;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:center;
	vertical-align:central;
	}
	.sr_valid1t {grid-area: sr_valid1t;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:center;
	vertical-align:central;
	}
	.sr_valid2t {grid-area: sr_valid2t;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:center;
	vertical-align:central;
	}
	
	.sr_gridvalid {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto 15px auto 50px auto 15px auto 50px auto 15px auto;
	grid-template-areas:
	"sr_valid0t"
	"."
	"sr_valid0"
	"."
	"sr_valid1t"
	"."
	"sr_valid1"
	"."
	"sr_valid2t"
	"."
	"sr_valid2";
}
	
	.sr_impL0 { grid-area: sr_impL0;}
	.sr_impT0 { grid-area: sr_impT0;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
		font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_impL1 { grid-area: sr_impL1;}
	.sr_impT1 { grid-area: sr_impT1;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
		font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_impL2 { grid-area: sr_impL2;}
	.sr_impT2 { grid-area: sr_impT2;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
		font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_impL3 { grid-area: sr_impL3;}
	.sr_impT3 { grid-area: sr_impT3;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
		font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_impL4 { grid-area: sr_impL4;}
	.sr_impT4 { grid-area: sr_impT4;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
		font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}

	.sr_gridimp {
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-template-rows: 1fr 50px 1fr 50px 1fr 50px 1fr;
	grid-template-areas:
	"sr_impL0 sr_impT0"
	". ."
	"sr_impL1 sr_impT1"
	". ."
	"sr_impL2 sr_impT2"
	". . "
	"sr_impL3 sr_impT3";
}

	.sr_bestL00 { grid-area: sr_bestL00;}
	.sr_bestT00 { grid-area: sr_bestT00;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	
	.sr_bestL01 { grid-area: sr_bestL01;}
	.sr_bestT01 { grid-area: sr_bestT01;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	
	.sr_bestL10 { grid-area: sr_bestL10;}
	.sr_bestT10 { grid-area: sr_bestT10;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	
	.sr_bestL11 { grid-area: sr_bestL11;}
	.sr_bestT11 { grid-area: sr_bestT11;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	
	@media (min-width:825px) {
	.sr_gridbest {
	display: grid;
	grid-template-columns: 75px 1fr 50px 75px 1fr;
	grid-template-rows: 100px 50px 100px;
	grid-template-areas:
	"sr_bestL00 sr_bestT00 . sr_bestL01 sr_bestT01"
	". . . . ."
	"sr_bestL10 sr_bestT10 . sr_bestL11 sr_bestT11";
}
	}
	
	@media (max-width:825px) {
	.sr_gridbest {
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-template-rows: 1fr 50px 1fr 50px 1fr 50px 1fr;
	grid-template-areas:
	"sr_bestL00 sr_bestT00"
	". ."
	"sr_bestL01 sr_bestT01"
	". ."
	"sr_bestL10 sr_bestT10"
	". ."
	"sr_bestL11 sr_bestT11";
}
	}
	
	.sr_whyL0 { grid-area: sr_whyL0;}
	.sr_whyT0 { grid-area: sr_whyT0;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
		font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;}
	.sr_whyL1 { grid-area: sr_whyL1;}
	.sr_whyT1 { grid-area: sr_whyT1;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
		font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_whyL2 { grid-area: sr_whyL2;}
	.sr_whyT2 { grid-area: sr_whyT2;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
		font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_whyL3 { grid-area: sr_whyL3;}
	.sr_whyT3 { grid-area: sr_whyT3;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
		font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_whyL4 { grid-area: sr_whyL4;}
	.sr_whyT4 { grid-area: sr_whyT4;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
		font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_whyL5 { grid-area: sr_whyL5;}
	.sr_whyT5 { grid-area: sr_whyT5;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
		font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_whyL6 { grid-area: sr_whyL6;}
	.sr_whyT6 { grid-area: sr_whyT6;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
		font-weight: lighter;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}

.sr_gridwhy {
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-template-rows: 1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr;
	grid-template-areas:
	"sr_whyL0 sr_whyT0"
	". ."
	"sr_whyL1 sr_whyT1"
	". ."
	"sr_whyL2 sr_whyT2"
	". ."
	"sr_whyL3 sr_whyT3"
	". ."
	"sr_whyL4 sr_whyT4"
	". ."
	"sr_whyL5 sr_whyT5"
	". ."
	"sr_whyL6 sr_whyT6"
	;
}

	.sr_factH0 { grid-area: sr_factH0;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_factL0 { grid-area: sr_factL0;
	color: #1378fb;
    font: normal 30px "Helvetica", arial, sans-serif;
    font-weight: 600;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_factT0 { grid-area: sr_factT0;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	
	.sr_factH1 { grid-area: sr_factH1;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_factL1 { grid-area: sr_factL1;
	color: #1378fb;
    font: normal 30px "Helvetica", arial, sans-serif;
    font-weight: 600;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_factT1 { grid-area: sr_factT1;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	
	.sr_factH2 { grid-area: sr_factH2;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_factL2 { grid-area: sr_factL2;
	color: #1378fb;
    font: normal 30px "Helvetica", arial, sans-serif;
    font-weight: 600;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	.sr_factT2 { grid-area: sr_factT2;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:center;
	vertical-align:central;}
	
	@media (min-width:825px) {
	.sr_gridfact {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-areas:
	"sr_factH0 sr_factH1 sr_factH2"
	"sr_factL0 sr_factL1 sr_factL2"
	"sr_factT0 sr_factT1 sr_factT2";
}
	}
	
	@media (max-width:825px) {
	.sr_gridfact {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr 25px 1fr 1fr 1fr 25px 1fr 1fr;
	grid-template-areas:
	"sr_factH0"
	"sr_factL0"
	"sr_factT0"
	"."
	"sr_factH1"
	"sr_factL1"
	"sr_factT1"
	"."
	"sr_factH2"
	"sr_factL2"
	"sr_factT2";
}
	}

.brightness {
    background-color: white;
    display: inline-block;
	cursor: pointer;
}

.brightness img:hover {
    opacity: .5;
}

.pr_top1 { grid-area: pr_top1;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;
}

.pr_top2 { grid-area: pr_top2;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;
}

.pr_mid1 { grid-area: pr_mid1;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;
}

.pr_mid2 { grid-area: pr_mid2;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;
}

.pr_bot1 { grid-area: pr_bot1;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:center;
	vertical-align: middle;
}

.pr_bot2 { grid-area: pr_bot2;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;
}

.pr_bot3 { grid-area: pr_bot3;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;
}

.pr_gridview {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-template-areas:
	"pr_top1 pr_top1 pr_top1 pr_top2 pr_top2 pr_top2"
	"pr_mid1 pr_mid1 pr_mid1 pr_mid1 pr_mid1 pr_mid1"
	"pr_mid2 pr_mid2 pr_mid2 pr_mid2 pr_mid2 pr_mid2"
	"pr_bot1 pr_bot1 pr_bot2 pr_bot2 pr_bot3 pr_bot3";
}

/* ------- */

.contact_c0a { grid-area: contact_c0a;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;}
.contact_c0b { grid-area: contact_c0b;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;}

	.contact_c1a { grid-area: contact_c1a;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:left;
	vertical-align:middle;}

	.contact_c2a { grid-area: contact_c2a;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:left;
	vertical-align:middle;}

	.contact_c1b { grid-area: contact_c1b;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:left;
	vertical-align:middle;}

	.contact_c2b { grid-area: contact_c2b;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:left;
	vertical-align:middle;}
	
	@media (min-width:825px) {
	.contactgrid {
		margin: auto;
  width: 80%;
  padding: 10px;
  max-width:650px;
	display: grid;
	grid-template-columns: 450px 200px;
	grid-template-rows: 50px 75px 50px 1fr;
	grid-template-areas:
	"contact_c0a contact_c0a"
	"contact_c0b contact_c0b"
	"contact_c1a contact_c2a"
	"contact_c1b contact_c2b";
}
	}
	
	@media (max-width:825px) {
	.contactgrid {
		margin: auto;
  width: 80%;
  padding: 10px;
  max-width:825px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 75px 135px 35px 1fr 35px 1fr;
	grid-template-areas:
	"contact_c0a"
	"contact_c0b"	
	"contact_c1a"
	"contact_c1b"
	"contact_c2a"
	"contact_c2b";
}
	}

/* ------- */

.where2_title1 { grid-area: where2_title1;
	color: #000;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;}

.where2_subtitle1 { grid-area: where2_subtitle1;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;}

	.where2_image1 { grid-area: where2_image1;
	text-align:center;
	vertical-align:middle;}

	.where2_button1 { grid-area: where2_button1;
	text-align:center;
	vertical-align:middle;}

.where2_title2 { grid-area: where2_title2;
	color: #000;
    font: normal 20px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;}

.where2_subtitle2 { grid-area: where2_subtitle2;
	color: #000;
    font: normal 18px "Helvetica", arial, sans-serif;
    font-weight: normal;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;}

	.where2_image2 { grid-area: where2_image2;
	text-align:center;
	vertical-align:middle;}

	.where2_button2 { grid-area: where2_button2;
	text-align:center;
	vertical-align:middle;}
	
@media (max-width:825px) {
	.where2 {
		margin: auto;
  width: 80%;
  padding: 10px;
  max-width:650px;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto 50px 75px 1fr 50px auto 50px 100px 1fr;
	grid-template-areas:
	"where2_title1"
	"where2_subtitle1"
	"where2_image1"
	"where2_button1"
	"."
	"where2_title2"
	"where2_subtitle2"
	"where2_image2"
	"where2_button2";
}
}

@media (min-width:825px) {
	.where2 {
		margin: auto;
  width: 80%;
  padding: 10px;
  max-width:650px;
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: 50px 75px 100px 1fr;
	grid-template-areas:
	"where2_title1 where2_title2"
	"where2_subtitle1 where2_subtitle2"
	"where2_image1 where2_image2"
	"where2_button1 where2_button2";
}
}

/* Popup box BEGIN */
.hover_bkgr_fricc{
    background:rgba(0,0,0,0);
    cursor:pointer;
    height:100%;
    position:absolute;
    text-align:center;
    top:0;
	bottom: 0;
	left:-8px;
    width:100%;
	height: 100%;
    z-index:10000;
}
.hover_bkgr_fricc .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 551px;
    min-height: 100px;
    vertical-align: middle;
    width: 65%;
    position: relative;
    border-radius: 8px;
	border-style: solid;
	border-width: medium;
    padding: 15px 5%;
}
.popupCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc {
    cursor: pointer;
    font-size: 20px;
    margin: 20px;
    display: inline-block;
    font-weight: bold;
}


/* Popup box BEGIN */

@media (max-width:700px) {
.prod_title {
	margin-top: 15px;
	color: #000;
    font: normal 14px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align: center;
}
}

@media (min-width:700px) {
.prod_title {
	margin-top: 15px;
	color: #000;
    font: normal 22px "Helvetica", arial, sans-serif;
    font-weight: bold;
	text-decoration:none;
	text-align: center;
}
}


.truc1 {grid-area: truc1; text-align: center;}
.truc2 {grid-area: truc2; text-align: center;}
.truc3 {grid-area: truc3; text-align: center;}
.truc4 {grid-area: truc4; text-align: center;}


	@media (min-width:825px) {
	.sr_grid5 {
		max-width: 1275px;
		text-align: center;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas:
	"truc1 truc2 truc3 truc4"

}
	}
	
	@media (max-width:825px) {
	.sr_grid5 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-template-areas:
	"truc1"
	"truc2"
	"truc3"
	"truc4";
}
	}

	.sr_grid8_1 { grid-area: sr_grid8_1; vertical-align: middle; display: block;}
	.sr_grid8_2 { grid-area: sr_grid8_2; vertical-align: middle; display: block;}
	.sr_grid8_3 { grid-area: sr_grid8_3; vertical-align: middle; display: block;}
	.sr_grid8_4 { grid-area: sr_grid8_4; vertical-align: middle; display: block;}
	.sr_grid8_5 { grid-area: sr_grid8_5; vertical-align: middle; display: block;}
	.sr_grid8_6 { grid-area: sr_grid8_6; vertical-align: middle; display: block;}
	.sr_grid8_7 { grid-area: sr_grid8_7; vertical-align: middle; display: block;}
	.sr_grid8_8 { grid-area: sr_grid8_8; vertical-align: middle; display: block;}
	
	@media (min-width:721px){
.sr_grid8 {
	display: grid;
	vertical-align: middle;
	grid-template-columns: repeat(4,auto);
	grid-template-rows: auto auto;
	grid-template-areas:
	"sr_grid8_1 sr_grid8_2 sr_grid8_3 sr_grid8_4"
		"sr_grid8_5 sr_grid8_6 sr_grid8_7 sr_grid8_8";
}	
	}
	@media (max-width:721px){
	.sr_grid8 {
	display: grid;
	vertical-align: middle;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto auto auto;
	grid-template-areas:
	"sr_grid8_1 sr_grid8_2"
	"sr_grid8_3 sr_grid8_4"
	"sr_grid8_5 sr_grid8_6"
	"sr_grid8_7 sr_grid8_8";
}	
	}

.demonew01 { grid-area: demonew01; vertical-align: left; text-align: top;}
.demonew02 { grid-area: demonew02; vertical-align: left; text-align: top; border: 1px solid #000; }

@media (min-width:721px){
.demonewgrid {
	max-width: 1280px;
		width:100%;
		text-align: center;
	display: grid;
	grid-template-columns: 50px 1fr 50px 375px 50px;
	grid-template-rows: 1fr;
	grid-template-areas:
	". demonew01 . demonew02 ."
	}
}

@media (max-width:721px){
.demonewgrid {
		width:100%;
		text-align: center;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto 50px auto;
	grid-template-areas:
	"demonew01"
		"."
	"demonew02"
	}
}