/*############# Font Size Color Setting Start ##############*/
/*
body, h2, h3, p, a, i {font-family:'DIN Regular';}
h1 {font-family:'DIN Bold'!important;font-weight:bold;}
.progT10, .progT20, .msT20, .msCP20 {font-family: 'DIN Regular'!important;}
*/
h1, h2 {
	position:relative; 
	font-weight:900 !important; 
	text-align:left;}
h1, h2, h3, .h3 {
	margin-top:0px !important; margin-bottom:0px !important;
	/*margin-left:0% !important; margin-right:0% !important;*/
	/*text-transform: uppercase;*/} /*#FFFF00, #00ED00, #00E3F3 */}


/*############# Font Size Color Setting End ##############*/
	
#listprog img{width:100%;/* height:120px;max-width:200px;*/}
#listprog1 img, #listprog2 img, #listprog3 img, #listprog4 img, #listprog5 img, #listprog6 img, #listprog7 img, #listprog8 img,
.listprog1 img, .listprog2 img, .listprog3 img, .listprog4 img, .listprog5 img, .listprog6 img, .listprog7 img, .listprog8 img{width:100%;}

.imgZoomIn {positive:relative;overflow: hidden;margin: 0 auto;} 
.imgZoomIn img {width: 100%; transition: 0.5s all ease-in-out;/*mix-blend-mode: luminosity;*/} 
.imgZoomIn:hover img {transform: scale(1.25); mix-blend-mode: normal;} 
#listprog img{width: 100%; transition: 0.5s all ease-in-out;/*mix-blend-mode: luminosity;*/} 
#listprog:hover img {transform: scale(1.25); mix-blend-mode: normal;} 

/*############ FLEXSLIDER CSS #############*/
.luminosity {
  mix-blend-mode: luminosity; opacity:0.6;
}

/*########################## MEDIA SECTION ##########################*/
@media screen and (min-width:768.1px) {
	h1 {font-size: 1.95em !important;}
	h2, h3, .h3, h4 {font-size: 1.5em !important;}
	p, ol, ul, em {font-size: 1.1em; line-height: 100%;}
	
	#listprog {position:relative; height: 100%; float: left; margin-top: 0%; display:block;}
	#listprog1,.listprog1 {position:relative; height: 100%; float: left; margin-top: 0%; display:block;}
	#listprog2,.listprog2 {position:relative; height: 100%; float: left; margin-top: 0%; display:block;}
	#listprog3,.listprog3 {position:relative; height: 100%; float: left; margin-top: 0%; display:block;}
	#listprog {width: 50%;padding:0% 0% 1% 1%;/*background-color:#AAA;*/}
	#listprog1,.listprog1 {width: 30%;padding:0% 0% 1% 0%;/*background-color:#AAA;*/}
	#listprog2,.listprog2 {width: 70%;padding:0%;/*background-color:#CCC;*/}
	#listprog3,.listprog3 {width: 25%;padding:0% 5px 0% 5px;/*background-color:#666;*/}
	#dinorex-banner {width: 100%;padding:0% 5px 3% 5px;/*background-color:#666;*/}
	.demo {width: 100%;padding:0% 5px;/*background-color:#666;*/}
	.progT10, .progT20, .msT20, .msCP20 {font-size: 1.2em;font-weight:700;line-height:1.5em;letter-spacing: 0.05em;}

	.show-1, .show-2, .show-footer-2, .show-footer-3 {display: none;}
	.show-3, .show-4, .show-5, .show-footer-4 {display: block;}
	
}

@media screen and (max-width:768px) /*and (orientation:landscape)*/ {
	h1 {font-size: 1.5em !important;}
	h2, h3, .h3, h4 {font-size: 1.25em !important;}	
	
	#listprog {position:relative; width: 100%; float: left; margin-top: 0%; display:block;}
	#listprog1,.listprog1 {position:relative; width: 100%; float: left; margin-top: 0%; display:block;}
	#listprog2,.listprog2 {position:relative; width: 100%; float: left; margin-top: 0%; display:block;}
	#listprog3,.listprog3 {position:relative; width: 50%; float: left; margin-top: 0%; display:block;}
	#listprog {padding:0%;/*background-color:#AAA;*/}
	#listprog1,.listprog1 {padding:1%;/*background-color:#AAA;*/overflow-y:hidden;}
	#listprog2,.listprog2 {padding:0%;/*background-color:#CCC;*/}
	#listprog3,.listprog3 {padding:0% 5px 0% 5px;/*background-color:#CCC;*/}
	#dinorex-banner {width: 100%;padding:0% 0% 3% 0%;/*background-color:#666;*/}
	.demo {width: 100%;padding:0% 5px;/*background-color:#666;*/}
	
	#listprog3 p ,.listprog3 p {line-height: 120%; text-align: justify;}
	.progT10, .progT20, .msT20, .msCP20 {font-size: 1.2em;font-weight:700;}

	.show-1, .show-2, .show-3, .show-4 .show-footer-2 {display: block;}
	.show-1 {display: none;}
	.show-5, .show-footer-3, .show-footer-4 {display: none;}
	
}

/* ############### For IE only ############### */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .dots, .seemoreBtn {display: none !important;}
	.more {display:inline-block !important;}
}

/* ############### Element Animations ############### */

{
  animation: BtnslideUp 1.0s ease forwards;
}
@keyframes slideRight {
  0% {transform: translateX(1400px); opacity: 0;}
  100% {transform: translateX(0px);	opacity: 1;}
}
@keyframes slideUp {
  0% {transform: translateY(800px); opacity: 0;}
  100% {transform: translateY(0px); opacity: 1;}
}
@keyframes slideDn {
  0% {transform: translateY(0px); opacity: 1;}
  100% {transform: translateY(800px); opacity: 0;}
}

@keyframes BtnslideUp {
  0% {transform: translateY(100px); opacity: 0;}
  100% {transform: translateY(0px); opacity: 1;}
}


/* ################## Override All Style ################## */