/* • News
   ------------------------------------------------------------------------- */
   #news       	{ padding-bottom:80px; }

   .grid-3cols    {           display: grid;
                grid-template-columns: repeat(3, 1fr);
                   grid-template-rows: 1fr;
                      grid-column-gap: 40px;
                         grid-row-gap: 40px; }


   .news-item 							{ cursor:pointer; }
   .news-item .news-title  	 	{ color:#333; text-transform:uppercase; transition: all 0.3s ease-in-out; padding-bottom:10px; }
   #body.news.blue .news-item:hover .news-title,
   #body.blue .news-item:hover .news-title,
   #body.index .news-item:hover .news-title			{ color: rgba(0, 155, 222, 1); }
   #body.news.green .news-item:hover .news-title,
   #body.green .news-item:hover .news-title  		{ color: rgba(0, 150, 57, 1); }


   .news-item .ni-detail-blk 			{ padding-top:20px; border: 1px solid green}
   .news-item .ni-detail-blk::after { content: ""; clear:both; display:table;}


	.ni-wrapper 	{ width:100%;}
	.box 				{ position: relative; max-height:300px; overflow: hidden;  }

	.box:hover 				{ transition: all 0.3s ease-in-out; }
	.publication .box:hover	{ border: 1px solid #acacac; }
	.box:hover:before 	{ transition: all 0.3s ease-in-out;}
	.box img 			{ position:relative; width:100%; height:100%;  z-index:1; transition:all 0.3s ease-in-out; }
	.publication .box img	{ border: 1px solid #acacac; }
	.publication .box:hover img	{ border: none; }
	.box img:hover 		{ transition: all 0.3s ease-in-out;}
	.box img:after 		{ content: ""; position absolute; background-color:rgba(0, 0, 0, 0.6); width:100%; height:100%; top:0; left:0; opacity:0;}
	.box img:hover 		{ transition: all 0.3s ease-in-out;}
	.zoom-in:hover img 	{ transform: scale(1.05);}

	.polygon-more.polygon { height:300px; }
	.zoom-in .polygon-more.polygon 			{opacity: 1; transition: all 0.3s ease-in-out; }
	.zoom-in:hover .polygon-more.polygon 	{opacity: 0.6; }


	/* • For news template only
   ------------------------------------------------------------------------- */
   #body.news .grid-3cols { grid-row-gap: 100px;}
   #body.news.blue article .news-date,
   #body.blue article .news-date,
   #body.index .news-date   	{ color: rgba(0, 155, 222, 1); padding-bottom:10px; }

   #body.news.green article .news-date,
   #body.green article .news-date  		{ color: rgba(0, 150, 57, 1); padding-bottom:10px; }


	/* • For publication template / Reports only
   ------------------------------------------------------------------------- */
   #body.publication .box 	{ max-height:600px;}

   article  				{ display:flex; align-items:flex-start; transition: all 0.3s ease-out;} 
	article span 			{ display:block; margin-bottom:5px;}
	article img  			{ margin-left:20px; margin-top:20px; width:35%; height:auto; cursor: default;}
	article h3 				{ padding-bottom:10px; transition: all 0.3s ease-out; font-size:120%;}
	.news-item:hover article h3 { color: rgba(0, 150, 57, 1);  }
	article .a-blk 		{ margin-top:20px;}
	article:hover 			{ cursor:pointer; background-color:#fff; }
	article .intro 		{ margin-top:10px}



  	/* • 2 cols banner (For index)
   ------------------------------------------------------------------------- */
    .grid-2cols {             display: grid;
                grid-template-columns: repeat(2, 1fr);
                   grid-template-rows: 1fr;
                      grid-column-gap: 40px;
                         grid-row-gap: 40px; }


  	/* • 4 cols banner ( For publication)
   ------------------------------------------------------------------------- */
   .grid-4cols {              display: grid;
                grid-template-columns: repeat(4, 1fr);
                   grid-template-rows: 1fr;
                      grid-column-gap: 40px;
                         grid-row-gap: 40px; }


   #body.publication .grid-4cols {              display: grid;
						                grid-template-columns: repeat(4, 1fr);
						                   grid-template-rows: 1fr;
						                      grid-column-gap: 40px;
						                         grid-row-gap: 80px; }

	/* ------------------------------------------------------------------------- */
	/***** Effect Apollo *****/
	/* ------------------------------------------------------------------------- */

	.grid figure 				{ position:relative; float:left; overflow:hidden; margin:0; max-height:380px; width:100%; height:auto; background:#4c99d4; text-align:center; cursor:pointer;}
	.grid figure img 			{ position:relative; display:block; min-height:100%; max-width:100%; opacity:0.8;}
	.grid figure figcaption { padding:2em; color:#fff; text-transform:uppercase; font-size:1.25em;
										-webkit-backface-visibility: hidden;
											     backface-visibility: hidden;}

	.grid figure figcaption::before,
	.grid figure figcaption::after 	{ pointer-events: none;}

	.grid figure figcaption,
	.grid figure figcaption > a 	{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:10;}

	/* Anchor will cover the whole item by default */
	.grid figure figcaption > a 	{ z-index:1000; text-indent:200%; white-space:nowrap; font-size:0; opacity:0;}
	.grid figure h2 			{ margin:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; }
	.grid figure h2 span 	{ font-weight:800;}
	.grid figure h2,
	.grid figure p 			{ margin: 0;}
	.grid figure p 			{ letter-spacing:1px; font-size:68.5%;}
	
	figure.effect-apollo 		{ background:#4c99d4; overflow:hidden;}
	figure.effect-apollo img 	{ opacity: 0.95; width:100%; height:auto;
							-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
								     transition: opacity 0.35s, transform 0.35s;
							 -webkit-transform: scale3d(1.05,1.05,1);
										transform: scale3d(1.05,1.05,1); }

	figure.effect-apollo figcaption::before {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.1);
		content: '';
		-webkit-transition: -webkit-transform 0.6s;
		transition: transform 0.6s;
/*		-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
		transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);*/
				-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-120%,0);
		transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-120%,0);

	}

	figure.effect-apollo p { position:absolute; right:0; bottom:0; margin:3em; padding:0 1em; max-width:150px; text-align:right; border-right:4px solid #fff;
										opacity: 0;
						 -webkit-transition: opacity 0.35s;
									transition: opacity 0.35s;}
	figure.effect-apollo h2,
	#body.index figure.effect-apollo h2  { color:#fff; }	

	figure.effect-apollo:hover img  {  opacity: 0.6;
									 -webkit-transform: scale3d(1,1,1);
												transform: scale3d(1,1,1); }

	figure.effect-apollo:hover figcaption::before {
									-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,120%,0);
											  transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,120%,0); }

	figure.effect-apollo:hover p {	 opacity: 1;
		              -webkit-transition-delay: 0.1s;
									 transition-delay: 0.1s;}


	.polygon    {  position:absolute; width:600px; height:400px; top:0; left:0; z-index: 5;
						background-color: rgba(00, 155, 222, 0.7);
			                   border: 0px solid rgba(100, 100, 100, 1);
			                transform: translate(0px, 0px) skew(0deg, -34deg); }

   .appllo-sky-blue .polygon 			{ background-color: rgba(0, 155, 222, 0.7);}
   .appllo-sea-blue .polygon   		{ background-color: rgba(0, 46, 109, 0.7);}
   .appllo-horizon-blue .polygon   	{ background-color: rgba(154, 202, 235, 0.7);}
   .appllo-green .polygon   			{ background-color: rgba(0, 150, 57, 0.7);}
   .appllo-yellow .polygon 			{ background-color: rgba(255, 198, 39, 0.7);}
   .appllo-orange .polygon  			{ background-color: rgba(238, 117, 35, 0.7);}
   .appllo-aqua .polygon  	 			{ background-color: rgba(84, 187, 171, 0.7);}

   .polygon-more.polygon { background-color: rgba(154, 202, 235, 1); } 

	.appllo-sky-blue figure.effect-apollo   		{ background-color: rgba(0, 155, 222, 1); }
	.appllo-sea-blue figure.effect-apollo   		{ background-color: rgba(0, 46, 109, 1); }
   .appllo-horizon-blue figure.effect-apollo   	{ background-color: rgba(154, 202, 235, 1);}
	.appllo-green figure.effect-apollo  			{ background-color: rgba(0, 150, 57, 1); }
	.appllo-yellow figure.effect-apollo 			{ background-color: rgba(255, 198, 39, 1); }
	.appllo-orange figure.effect-apollo 			{ background-color: rgba(238, 117, 35, 1); }
	.appllo-aqua figure.effect-apollo  	 			{ background-color: rgba(84, 187, 171, 1); }




  	/* •large banner
   	------------------------------------------------------------------------- */
	.lb-item { cursor:pointer; }
	.appllo-large-effect .polygon-l {  position:absolute; width:calc(50% - 20px); height:750px; top:-350px; left:0; z-index: 5;
				background-color: rgba(00, 155, 222, 0.8);
	                   border: 0px solid rgba(100, 100, 100, 1);
	                transform: translate(0px, 0px) skew(0deg, -34deg); }

   .appllo-sky-blue.appllo-large-effect .polygon-l   					{ background-color: rgba(0, 155, 222, 0.8);}
   .appllo-sea-blue.appllo-large-effect .polygon-l   					{ background-color: rgba(0, 46, 109, 0.8);}
   .appllo-horizon-blue.appllo-large-effect .polygon-l   			{ background-color: rgba(154, 202, 235, 0.8);}
   .appllo-green.appllo-large-effect .polygon-l   					   { background-color: rgba(0, 150, 57, 0.8);}
   .appllo-yellow.appllo-large-effect .polygon-l   					{ background-color: rgba(255, 198, 39, 0.8);}
   .appllo-orange.appllo-large-effect .polygon-l   					{ background-color: rgba(238, 117, 35, 0.8);}
   .appllo-aqua.appllo-large-effect .polygon-l   						{ background-color: rgba(84, 187, 171, 0.8);}


	.appllo-sky-blue.appllo-large-effect figure.effect-apollo   	{ background-color: rgba(0, 155, 222, 1);}
	.appllo-sea-blue.appllo-large-effect figure.effect-apollo   	{ background-color: rgba(0, 46, 109, 1);}
	.appllo-horizon-blue.appllo-large-effect figure.effect-apollo  { background-color: rgba(154, 202, 235, 1);}
	.appllo-green.appllo-large-effect figure.effect-apollo  			{ background-color: rgba(0, 150, 57, 1);}
	.appllo-yellow.appllo-large-effect figure.effect-apollo  		{ background-color: rgba(255, 198, 39, 1);}
	.appllo-orange.appllo-large-effect figure.effect-apollo  		{ background-color: rgba(238, 117, 35, 1);}
	.appllo-aqua.appllo-large-effect figure.effect-apollo  			{ background-color: rgba(84, 187, 171, 1);}


	.appllo-large-effect.grid figure  	{ }
	.appllo-large-effect.grid figure h2 					{ display:block; top:10%; left:25px; width:40%; transform:none; text-align:left;}
	.appllo-large-effect.grid figure h2 .banner-intro 	{ display:block; left:20px; width:100%; font-size:18px; margin-top:20px; left:0 }


	.appllo-large-effect figure.effect-apollo figcaption::before { position:absolute; top:0; left:0; width:100%; height:100%;
																					   background: rgba(255,255,255,0.1);
																							content: '';
																		    -webkit-transition: -webkit-transform 0.6s;
																						transition: transform 0.8s;
																			  -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-160%,0);
																						 transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-160%,0); }

	.appllo-large-effect figure.effect-apollo:hover figcaption::before {
									-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,160%,0);
											  transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,160%,0); }


   figure.effect-apollo img.appllo-large-for-d,
   .grid.appllo-large-effect figcaption { display:block; }
   
   figure.effect-apollo img.appllo-large-for-m,
   .h2-for-m { display:none; }



	/* ==========================================================================
	    Media Style
	============================================================================= */
	@media only screen and (max-width:1400px) {
	.polygon    		{ width:550px;}
	}


	@media only screen and (max-width:1300px) {
	.polygon    		{ width:500px;}
	.appllo-large-effect .polygon-l { top:-400px }
	}


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

	figure.effect-apollo h2, #body.index figure.effect-apollo h2 { font-size:26px; }
	.grid-2cols { grid-column-gap:20px; grid-row-gap:20px; }
	figure.effect-apollo p { margin:1.5em; }
	.polygon   { width:320px; height:250px}

	.appllo-large-effect .polygon-l { top:-450px }


   #body.publication .grid-4cols {              display: grid;
						                grid-template-columns: repeat(4, 1fr);
						                   grid-template-rows: 1fr;
						                      grid-column-gap: 30px;
						                         grid-row-gap: 60px; }

	}

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	.appllo-large-effect .polygon-l { top:-550px }
	figure.effect-apollo h2, #body.index figure.effect-apollo h2 { font-size:20px; }

   #body.publication .grid-4cols {              display: grid;
						                grid-template-columns: repeat(4, 1fr);
						                   grid-template-rows: 1fr;
						                      grid-column-gap: 20px;
						                         grid-row-gap: 50px; }
	}

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
	.polygon   { width:420px; height:300px}
	}


	@media only screen and (max-width:767px) {
   #body.news .grid-3cols { grid-row-gap: 50px;}

   .grid-3cols {           display: grid;
                   grid-template-columns: 1fr;
                      grid-template-rows: 1fr;
                         grid-column-gap: 0px;
                            grid-row-gap: 25px;}

   .grid-2cols {           display: grid;
                   grid-template-columns: 1fr;
                      grid-template-rows: 1fr;
                         grid-column-gap: 0px;
                            grid-row-gap: 25px;}

   #body.publication .grid-4cols {              display: grid;
					                   grid-template-columns: 1fr;
					                      grid-template-rows: 1fr;
					                         grid-column-gap: 0px;
						                         grid-row-gap: 50px; }


   #body.full-general .rel-art .grid-4cols {    display: grid;
					                   grid-template-columns: 1fr;
					                      grid-template-rows: 1fr;
					                         grid-column-gap: 0px;
						                         grid-row-gap: 50px; }



	.appllo-large-effect .polygon-l  { top:inherit; bottom:-100px; left:inherit; right:0px; width:80%; height:150px;}

	.grid.appllo-large-effect figure { height:auto; max-height:fit-content; }

   figure.effect-apollo img.appllo-large-for-d,
   .grid.appllo-large-effect figcaption 			{ display:none; }
   figure.effect-apollo img.appllo-large-for-m,
	.h2-for-m  											   { display:block; }
	.h2-for-m { background-color:rgba(0, 46, 109, 1);  position: relative; z-index: -1;  }
	#body .general .h2-for-m>h2, #body.index .h2-for-m>h2 		{ color:#fff; padding:15px 20px; width:100% }
	#body .general .h2-for-m>h2, #body.index .h2-for-m>h2,
	figure.effect-apollo h2, #body.index figure.effect-apollo h2  { font-size:20px;  }
	}