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

html, body {padding:0; margin:0; background:#f6f6f6; scroll-behavior: smooth;}

#header {background: rgb(30,87,153); background: linear-gradient(0deg, rgba(30,87,153,1) 0%, rgba(32,124,202,1) 50%); text-align:center; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; height:9rem;}
#header h1 {font:800 50px/42px myriad, sans-serif; padding:0; margin:0;  font-optical-sizing: auto; color:#e0e303; font-style: normal; font-variation-settings: "BLED" 0, "SCAN" 0,}
#header p {font:500 22px/22px myriad, sans-serif; color:#e0e303; padding:0; margin:1rem 0 0 0;}
#header h2 {font:700 26px/26px  myriad, sans-serif; color:#e0e303; padding:0; margin: -2rem -40rem 0 0; clear:both;}
#header h2  a:link {color:#e0e303;}
#header .logo {width: 7rem; margin: -1rem 0 0 -8rem; display:flex; }
#header .logo.flip {transform: scaleX(-1); margin:-1rem -2rem 0 0;}


	#info {margin: 1rem auto 0.6rem auto;}
	#info .breadcrumb {padding:0; margin:0 49% 0 49%; font:400 20px/30px 'Raleway', arial, sans-serif;}
	#info h5.date {padding:0; margin:0; font:500 14px/25px 'Raleway', arial, sans-serif; color:#131314; text-align:center;}
body h3{font:700 28px/30px 'Raleway', sans-serif; color:#000; text-align:center; padding:0; margin: 25px 0 25px 0;} 
body h4{font:700 24px/30px 'Raleway', sans-serif; padding:0; margin:0; color:#131314; text-align:center;;}
body p {font:400 18px/24px 'Raleway', sans-serif; color:#141415; padding:0 8px; margin:10px 0; display:inline-block;
page-break-inside: avoid; break-inside: avoid;}
.instrution{ margin: 0 5% 2rem;}
.container{display:flex; width: 90%; margin: 0 auto;}
 .boxone{ padding:0 4px 0 4px; /*background-color:#CCC; */width:49%; margin-left: 10p;}
 .boxtwo{ padding:0 4px 0 4px; /*background-color:#FCF;*/ width:49%;}
 .boxone h4 {padding:0; margin:0; font:700 21px/23px 'Raleway', sans-serif; color:#131314; text-align:center;}
.boxtwo h4 {padding:0; margin:0; font: 700 21px/23px 'Raleway' arial, sans-serif; color:#131314; text-align:center;;}
.subbox{ width: 90%; margin: 0 auto;}
.cemterimage{margin: 0 21%;}
.floatright{float: right;}
.floatleft{ float:left;}
.add{width:44%; padding: 0 3px ;}
span.boldunderlined{text-decoration:underline; font:500 26px/26px 'Raleway', sans-serif;}
span.price{font:800 30px/30px 'Raleway', sans-serif;}
.clearleft {clear:left;}
.clearboth {clear:both; margin: 2rem 0 3rem 0;}
/*.videoalign{margin: 0 0 0 4rem !important;}*/
 .videoalign{ position: relative; overflow: hidden; width: 100%; padding-top: 35.25%; }
  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
.responsive-iframe {position:absolute; top: 0;  left: 0; bottom: 0; right: 0; width: 100%; height: 100%;}


a:link{color: #009; padding: 0; text-align: left; text-decoration: none;}
a:hover {color: #f00;}
a:visited {color: #060;}
a:active {color: #000;}
#footer {background:#000; padding:0 20px; box-sizing:border-box;}
#footer .sub {display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}
#footer .sub a {display:block; font:600 16px/24px 'Raleway', sans-serif; color:#fff; text-decoration:none; padding:5px ; margin:0;}
#footer .sub a:hover {color:#FF0;}
#footer p {font:400 16px/24px 'Raleway', sans-serif; color:#fff; padding:20px 0 40px 0; margin:0; text-align:center;} 
#icon {display:flex; margin: -2.5rem 0 0 45%;}
#update {display:flex; margin: 0 39%;}
/*collectable*/

 

  	/*Previous sprite*/
.spritepre ul {list-style-type:none; margin: 0px; padding:0px; text-align: center; }
.spritepre ul li{width: 36%; float:left; margin: 0px;}
.spritepre ul li a{position: relative; display: flex; width:56%; height: 4.5rem; line-height:230%; background-image:url(../images/dmc/leftRolloverArrow.png); background-repeat:no-repeat; margin: -2rem 0 0 15rem;}
.spritepre a:hover, #currentpageend a {background-position: 0px -4.37rem;}	
/*Next sprite*/
.spritenext ul {list-style-type:none; margin: 0px; padding:0px; text-align: center;}
.spritenext ul li{width:36%; float:right; margin: 0px;}
.spritenext ul li a{display: flex; width:56%; height: 4.5rem; line-height:230%; background-image:url(../images/dmc/rightrolloverarrow.png); background-repeat:no-repeat; margin: -2rem 0 0 -5rem;}
.spritenext a:hover, #currentpage a {background-position: 0px -4.37rem;}
<!--End Sprite-->

.padding{padding: 0 0.5rem 0 0;}
.image25{width:60%; display: flex;}
.image45 {width: 45%; display: flex;}


.listimage ul li {text-decoration: none; list-style-type: none; width: 99%; text-align: left; margin: 0.3rem 0 0 0; font: 400 100% 'Raleway', arial, sans-serif; list-style-position: inside; list-style-image:url(../images/bulletpoint.png); color: #131314;}
.listimagetwo ul li {text-decoration: none; list-style-type: none; width: 99%; text-align: left; margin: 0.3rem 0 0 0; font: 400 130% 'Raleway', arial, sans-serif; list-style-position: inside; list-style-image:url(../images/bulletpoint.png); color: #131314;}

.gsc-control-cse{background-color: #f6f6f6 !important; }
 
 @media screen and (max-width: 1156px) {
	 
	 html, body {padding:0; margin:0; background:#f6f6f6; scroll-behavior: smooth;}
	 #header .logo {width: 3rem; margin: -2rem 0 0 0; display: flex; float:left;}
	  #header .logo .flip {display:none; }
#header {background: rgb(30,87,153); background: linear-gradient(0deg, rgba(30,87,153,1) 0%, rgba(32,124,202,1) 50%); text-align:center; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; height:11rem;}
#header h1 {font:800 50px/42px myriad, sans-serif; padding:0; margin:0;  font-optical-sizing: auto; color:#e0e303; font-style: normal; font-variation-settings: "BLED" 0, "SCAN" 0,}
#header p {font:500 22px/22px myriad, sans-serif;  color:#e0e303; padding:0; margin:1rem 0 0 0;}
#header h2 {font:700 26px/26px  myriad, sans-serif; color:#e0e303; padding:0; margin: -2rem -40rem 0 0; clear:both;}
	 	#footer {background:#000; /*padding:0 20px;*/ box-sizing:border-box;}
		.clearleft {clear:left;}
		
		#update {display:flex; margin: 0 31%;}
		.clearboth {clear:both; margin: 2rem 0 3rem 0;}
		  .teaser_01{width:8%; display: flex; float:left; margin: 0.5rem 0 0 3rem;}
.teaser{width:8%; display: flex; float:left; margin: 0.5rem 0 0 2rem;}
.mainpicture_08{ width: 62%; float: right; clear: both; display: flex; margin: -1rem 0 0 0;}
 .mainpicture_10{ width:62%; float: right; clear: both; display: flex; margin:-16rem 0 0 0;}
 .mainpicture_11{ width:62%; float: right; clear: both; display: flex; margin:0 0 0 0;}
 .mainpicture{ width: 66%; float: right; clear: both; display: flex; margin: -11rem 0 0 0;}
 .mainpicture_12{ width:66%; float: right; clear: both; display: flex; margin: -13rem -1rem 0 9rem;}
 
 	/*Previous sprite*/
.spritepre ul {list-style-type:none; margin: 0px; padding:0px; text-align: center; }
.spritepre ul li{width: 36%; float:left; margin: 0px;}
.spritepre ul li a{position: relative; display:block; width:56%; height: 4.5rem; line-height:230%; background-image:url(../images/dmc/leftRolloverArrow.png); background-repeat:no-repeat; float:left; margin: 0 0 0 30rem;}
.spritepre a:hover, #currentpageend a {background-position: 0px -4.37rem;}	
/*Next sprite*/
.spritenext ul {list-style-type:none; margin: 0px; padding:0px; text-align: center;}
.spritenext ul li{width:36%; float:right; margin: 0px;}
.spritenext ul li a{display: flex; width:56%; height: 4.5rem; line-height:230%; background-image:url(../images/dmc/rightrolloverarrow.png); background-repeat:no-repeat; margin: -2rem 0 0 0;}
.spritenext a:hover, #currentpage a {background-position: 0px -4.37rem;}
<!--End Sprite-->
 
 }
    @media screen and (max-width: 1015px) {
		html, body {padding:0; margin:0; background:#f6f6f6; scroll-behavior: smooth;}
	 #header .logo {display:none; visibility:hidden}
	  .mainpicture_12{ width:66%; float: right; clear: both; display: flex; margin: -13rem -1rem 0 9rem;}
   }
 
   @media screen and (max-width: 1087px) {
	   html, body {padding:0; margin:0; background:#f6f6f6; scroll-behavior: smooth;}
 #header .logo.flip {display:none; visibility:hidden}
 
 		  .videoalign{ position: relative; overflow: hidden; width: 100%; padding-top: 50.25%; }
  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
.responsive-iframe {position:absolute; top: 0;  left: 0; bottom: 0; right: 0; width: 100%; height: 100%;}
   }
 
  @media screen and (max-width: 800px) {
	  html, body {padding:0; margin:0; background:#f6f6f6; scroll-behavior: smooth;}
	  
	  	   #header h1 {font:400 42px/42px myriad, sans-serif; padding:0; margin:0;  font-optical-sizing: auto; color:#e0e303; font-style: normal; font-variation-settings: "BLED" 0, "SCAN" 0,}
	    #header h2 {font:500 22px/22px myriad, sans-serif; color:#e0e303 !important; padding:0; margin:0; margin-top:2.1rem;}
#header h4 {font:500 22px/22px myriad, sans-serif; color:#e0e303; padding:0; margin:0; margin-top:1.5rem;}
	  
	 #header .logo {display:none; visibility:hidden}
	   #header .logo .flip {display:none; visibility:hidden}
	     .mainpicture{ width: 66%; float: right; clear: both; display: flex; margin: -12rem 0 0 0;}
		 .mainpicture_10{ width:62%; float: right; clear: both; display: flex; margin:-10rem 0 0 0;}
		   .teaser_01{width:8%; display: flex; float:left; margin: 1rem 0 0 3rem;}
		   .teaser{width:8%; display: flex; float:left; margin: 0.5rem 0 0 2rem;}
		   		  .videoalign{ position: relative; overflow: hidden; width: 100%; padding-top: 50.25%; }
  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
.responsive-iframe {position:absolute; top: 0;  left: 0; bottom: 0; right: 0; width: 100%; height: 100%;}

.thistle{margin: 1rem 0 0 2rem ; width:22%;  display:flex; }
.thistletext{margin: 1rem 0 0 2rem; float: left;}
 .mainpicture_02{ width: 66%; float: right; clear: both; display: flex; margin: -13rem 0 0 -4rem;}
.mainpicturetoc{width: 71%; float: right; clear: both;  display: flex;  margin: -9rem 0 0 3rem;}
.bluejay{ margin: -10rem 0 0 -5rem; width:22%;  display:flex; float:right;}
.bluejaytext {margin: -1rem 3rem 0 0rem; display:flex; float:right;}
body h4{font:700 20px/20px 'Raleway', sans-serif; padding:0; margin:0; color:#131314; text-align:center;;}
		 
		  	/*Previous sprite*/
.spritepre ul {list-style-type:none; margin: 0px; padding:0px; text-align: center; }
.spritepre ul li{width: 36%; float:left; margin: 0px;}
.spritepre ul li a{position: relative; display:flex; width:56%; height: 4.5rem; line-height:230%; background-image:url(../images/dmc/leftRolloverArrow.png); background-repeat:no-repeat; margin: -2rem 0 0 16rem;}
.spritepre a:hover, #currentpageend a {background-position: 0px -4.37rem;}	
/*Next sprite*/
.spritenext ul {list-style-type:none; margin: 0px; padding:0px; text-align: center;}
.spritenext ul li{width:36%; float:right; margin: 0px;}
.spritenext ul li a{display: flex; width:56%; height: 4.5rem; line-height:230%; background-image:url(../images/dmc/rightrolloverarrow.png); background-repeat:no-repeat; margin: -2rem 0 0 -7rem;}
.spritenext a:hover, #currentpage a {background-position: 0px -4.37rem;}
<!--End Sprite-->




  }
 
 @media screen and (max-width: 740px) {
	 
	 
	 #header .logo {display:none; }
	   #header .logo .flip {display:none; }
	   #header h1 {font:400 42px/42px myriad, sans-serif; padding:0; margin:0;  font-optical-sizing: auto; color:#e0e303; font-style: normal; font-variation-settings: "BLED" 0, "SCAN" 0,}
	    #header h2 {font:500 22px/22px myriad, sans-serif; color:#e0e303; padding:0; margin:0; margin-top:2.1rem;}
#header h4 {font:500 22px/22px myriad, sans-serif; color:#e0e303 !important; padding:0; margin:0; margin-top:1.5rem;}
	 
	 	#footer {background:#000; /*padding:0 20px;*/ box-sizing:border-box;}
		.clearleft {clear:left;}
		
		  .videoalign{ position: relative; overflow: hidden; width: 100%; padding-top: 50.25%; }
  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
.responsive-iframe {position:absolute; top: 0;  left: 0; bottom: 0; right: 0; width: 100%; height: 100%;}
		
		
		 .teaser{width:8%; display: flex; float:left; margin: 0.5rem 0 0 2rem;}
		 .mainpicture_02{ width: 66%; float: right; clear: both; display: flex; margin: -13rem 0 0 -4rem;}
.mainpicture_08{ width: 62%; float: right; clear: both; display: flex; margin: -8rem 0 0 0;}
 .mainpicture_10{ width: 60%; float: right; clear: both; display: flex; margin:-8rem 0 0 0;}
  .mainpicture_11{ width: 60%; float: right; clear: both; display: flex; margin:-8rem 0 0 0;}
   .mainpicture{ width: 66%; float: right; clear: both; display: flex; margin: -8rem 0 0 0;}
    .mainpicture_12{ width:66%; float: right; clear: both; display: flex; margin: -10rem -1rem 0 9rem;}
 
 	/*Previous sprite*/
.spritepre ul {list-style-type:none; margin: 0px; padding:0px; text-align: center; }
.spritepre ul li{width: 36%; float:left; margin: 0px;}
.spritepre ul li a{position: relative; display:flex; width:56%; height: 4.5rem; line-height:230%; background-image:url(../images/dmc/leftRolloverArrow.png); background-repeat:no-repeat; margin: -2rem 0 0 10rem;}
.spritepre a:hover, #currentpageend a {background-position: 0px -4.37rem;}	
/*Next sprite*/
.spritenext ul {list-style-type:none; margin: 0px; padding:0px; text-align: center;}
.spritenext ul li{width:36%; float:right; margin: 0px;}
.spritenext ul li a{display: flex; width:56%; height: 4.5rem; line-height:230%; background-image:url(../images/dmc/rightrolloverarrow.png); background-repeat:no-repeat; margin: -2rem 0 0 -2rem;}
.spritenext a:hover, #currentpage a {background-position: 0px -4.37rem;}
<!--End Sprite-->

		
 
 }
	


@media screen and (width <= 480px){
	
	#info {margin: 1rem auto 0.6rem auto;}
	#info .breadcrumb {padding:0; margin:0 49% 0 49%; font:400 20px/30px 'Raleway', arial, sans-serif;}
	#info h5.date {padding:0; margin:0; font:500 14px/25px 'Raleway', arial, sans-serif; color:#131314; text-align:center;}

.container{flex-direction: column;}
.boxone {padding:0; margin:0; font:700 21px/23px 'Raleway', sans-serif; color:#131314; text-align:left; width: 98%;}
.boxtwo {padding:0; margin:0; font: 700 21px/23px 'Raleway' arial, sans-serif; color:#131314; text-align:left;; width: 98%;}
.container h3{font:700 32px/30px 'Raleway', sans-serif; color:#000; text-align:center; padding:0; margin: 25px 0 25px 0;} 
span.boldunderlined{text-decoration:underline; font:500 24px/24px 'Raleway', sans-serif;}
.clearleft {clear:left;}

#header {background: rgb(30,87,153); background: linear-gradient(0deg, rgba(30,87,153,1) 0%, rgba(32,124,202,1) 50%); text-align:center; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; height:13rem;}
#header .logo {display:none; }
#header h1 {font:800 50px/42px myriad, sans-serif; padding:0; margin:0;  font-optical-sizing: auto; color:#e0e303; font-style: normal; font-variation-settings: "BLED" 0, "SCAN" 0,}
#header h4 {font:700 26px/26px  myriad, sans-serif; color:#e0e303; padding:0; margin:0; margin-top:2.8rem;}
#header h2 {font:700 26px/26px  myriad, sans-serif; color:#e0e303 !important; padding:0; clear:both; /*margin-top:1.8rem;*/  margin: 1.8rem 0 0 0;}
#header h2  a:link {color:#e0e303;}


 a:link{color: #009; padding: 0; text-align: left; text-decoration: none;}
 a:hover {color: #f00;}
 a:visited {color: #060;}
 a:active {color: #000;}
 
  .videoalign{ position: relative; overflow: hidden; width: 100%; padding-top: 42.25%; }
  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
.responsive-iframe {position:absolute; top: 0;  left: 0; bottom: 0; right: 0; width: 100%; height: 100%;}

	#footer {background:#000; /*padding:0 20px;*/ box-sizing:border-box;}
	#footer .sub {display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}
    #footer .sub a {display:block; font:600 16px/24px 'Raleway', sans-serif; color:#fff; text-decoration:none; padding:5px ; margin:0;}
    #footer .sub a:hover {color:#FF0;}
	#footer p {font:400 16px/24px 'Raleway', sans-serif; color:#fff; padding:20px 0 40px 0; margin:0; text-align:center;}
#icon {display:flex; margin: -2.5rem 0 0 40%;}
#update {display:flex; margin: 0 22%;}
	/*Previous sprite*/
.spritepre ul {list-style-type:none; margin: 0px; padding:0px; text-align: center; }
.spritepre ul li{width: 36%; float:left; margin: 0px;}
.spritepre ul li a{position: relative; display:flex; width:56%; height: 4.5rem; line-height:230%; background-image:url(../images/dmc/leftRolloverArrow.png); background-repeat:no-repeat; margin: 0 0 0 6rem;}
.spritepre a:hover, #currentpageend a {background-position: 0px -4.37rem;}	
/*Next sprite*/
.spritenext ul {list-style-type:none; margin: 0px; padding:0px; text-align: center;}
.spritenext ul li{width:36%; float:right; margin: 0px;}
.spritenext ul li a{display: flex; width:56%; height: 4.5rem; line-height:230%; background-image:url(../images/dmc/rightrolloverarrow.png); background-repeat:no-repeat; margin: 0;}
.spritenext a:hover, #currentpage a {background-position: 0px -4.37rem;}
<!--End Sprite-->


.teaser{width:8%; display: flex; float:left; margin: 1rem 0 0 2rem;}
.mainpicture{ width: 70%; float: right; clear: both; display: flex; margin:-16rem 0 0 0;}
.mainpicture_02{ width: 70%; float: right; clear: both; display: flex; margin: -12rem 0 0 -4rem;}
.mainpicture_10left{ width: 20%; float: left; clear: both; position:relative; margin: 0 1rem 0 0;}
.mainpicture_08{ width: 50%; float: right; clear: both; display: flex; margin:0;}
.mainpicture_10{ width: 50%; float: right; clear: both; display: flex; margin:-16rem 0 0 0;}
.mainpicture_11{ width: 50%; float: right; clear: both; display: flex; margin:-16rem 0 0 0;}
.mainpicture_12{ width:66%; float: right; clear: both; display: flex; margin: -14rem -1rem 0 9rem;}
.mainpicturetoc{width: 71%; float: right; clear: both;  display: flex;  margin: -14rem 0 0 3rem;}
.image25{width:60%; display: flex; margin: 0 16%;}
.image45 {width: 45%; display: flex; margin: 0 25%;}

}