@charset "utf-8";

/* casesBanner */
#casesBanner { width: 98%; }
#casesBannerImg { width: 65%; float:right;}
#casesBannerImg img { width: 100%; }
#casesBannerContent {
	width: 35%;
	height: 100%;
/*	position: absolute;
	top: 0px;
	left: 0px; */
	background: #74C5B8;
	padding: 3%;
	float:right;
}
#casesBannerMainTitle { padding: 0px 1%; }
#casesBannerTitle {
	font-size: 2.9375em;
	padding: 0px 1%;
}
#casesBannerSubTitle {
	font-size: 1.3125em;
	padding: 0px 1%;
}
#casesBannerDelimiter {
	height: 1px;
	background: url(../img/background_dashed.png) repeat-x;
	margin: 20px 0px;
}
#casesBannerInfo { padding: 0px 1%; }

/* casesCategory */
#casesCategory { margin-top: 12.5px; }
.casesCategoryItem { padding: 5px 30px; }
.casesCategoryTitle { margin-right: 40px; }
.casesCategorySubItem {
	width: 12%;
	border: 5px #F2F2F2 solid;
}
.casesCategorySubItemActive {
	background: #74C5B8;
	color: #FEFEFE;
	border: 5px #74C5B8 solid;
}

/* casesDelimiter */
#casesDelimiter {
	height: 1px;
	background: url(../img/background_dashed.png) repeat-x;
	margin: 10px 30px 10px 0px;
}

/* casesMenu */
#casesMenu {
	width: 98%;
	border-bottom: 3px #505050 solid;
	padding: 20px 0px 15px 0px;
}
.casesMenuItem {
	font-size: 1.5625em;
	padding: 20px 80px 8px 80px;
}
.casesMenuItem:hover, .casesMenuItemActive {
	color: #009C84;
	border-bottom: 10px #74C5B8 solid;
}

/* casesSolution */
#casesSolution { margin-bottom: 60px; }
.casesSolutionProject {
	width: 98%;
	background: #FFFFFF;
	margin-top: 35px;
}
.casesSolutionTitle { font-size: 1.5625em; }
.casesSolutionItem {
	width: 100%;
	float: left;
	background: #FFFFFF;
	border: 10px #FFFFFF solid;
    transition: border-color 0.5s ease-in-out;
	margin: 0px 20px 0px 0px;
}
.casesImg { width: 30%; }
.casesImg img { width: 100%; }
.casesContent {
	width: 70%;
	padding: 0px 30px 20px 10px;
}
.casesOnly { width: 100%; }
.casesTitle {
	font-size: 1.4375em;
	margin-top: 20px;
}
.casesInfo { margin-top: 10px; }
.casesSolutionDelimiter {
	width: 98%;
	height: 1px;
	float: left;
/*	background: url(../img/background_dashed.png) repeat-x;
	margin: 30px 1% 0px 1%; */
	margin: 10px 1%;
}

/* Bootstrap */
@media (min-width: 1200px) {
}

@media (max-width: 1199px) and (min-width: 992px) {
}

@media (max-width: 991px) and (min-width: 768px) {
}

@media screen and (max-width: 767px) {
}

@media (max-device-width: 480px) {
}

/* Responsive Web Design */
@media (min-width: 1441px) {
}

@media (max-width: 1440px) and (min-width: 1440px) {
	/* casesBanner */
	#casesBannerTitle { font-size: 2.8125em; }
}

@media (max-width: 1439px) and (min-width: 1280px) {
	/* casesBanner */
	#casesBannerTitle { font-size: 2.4375em; }
	#casesBannerSubTitle { font-size: 1.1875em; }

	/* casesMenu */
	.casesMenuItem { font-size: 1.4375em; }

	/* casesSolution */
	.casesSolutionTitle { font-size: 1.4375em; }
	.casesTitle { font-size: 1.3125em; }
}

@media (max-width: 1279px) and (min-width: 1024px) {
	/* casesBanner */
	#casesBannerTitle { font-size: 1.9375em; }
	#casesBannerSubTitle { font-size: 1.1875em; }
	#casesBannerDelimiter { margin: 10px 0px; }

	/* casesMenu */
	.casesMenuItem {
		font-size: 1.4375em;
		padding: 20px 60px 8px 60px;
	}

	/* casesSolution */
	.casesSolutionTitle { font-size: 1.4375em; }
	.casesTitle { font-size: 1.3125em; }
	.casesSolutionDelimiter { margin: 10px 1% 0px 1%; }
}

@media screen and (max-width: 1023px) {
	/* casesBanner */
	#casesBanner { width: 92.5%; }
	#casesBannerImg { width: 100%; }
	#casesBannerContent {
		width: 100%;
		position: relative;
	}
	#casesBannerTitle { font-size: 1.8125em; }
	#casesBannerSubTitle { font-size: 1.1875em; }
	#casesBannerDelimiter { margin: 10px 0px; }

	/* casesCategory */
	#casesCategory { margin: 12.5px 0px; }
	.casesCategoryItem { padding: 0px 15px; }
	.casesCategoryTitle { margin: 10px 0px 0px 0px; }
	.casesCategorySubItem {
		width: 50%;
		margin: 5px 20% 0px 0px;
		float: right;
	}

	/* casesMenu */
	#casesMenu { width: 92.5%; }
	.casesMenuItem {
		font-size: 1.0625em;
		padding: 20px 2px 13px 2px;
	}

	/* casesSolution */
	.casesSolutionProject { width: 92.5%; }
	.casesSolutionTitle { font-size: 1.4375em; }
	.casesSolutionItem { width: 100%; }
	.casesImg { width: 100%; }
	.casesContent {
		width: 100%;
		padding: 0px 10px 10px 10px;
	}
	.casesTitle { font-size: 1.3125em; }
	.casesSolutionDelimiter {
		width: 92%;
		margin: 10px 4% 0px 4%;
	}
}

@media (max-width: 991px) and (min-width: 768px) {
	.casesMenuItem {padding: 20px 2px 9px 2px;}
	.casesMenuItem:hover, .casesMenuItemActive {border-bottom: 9px #74C5B8 solid;}
	#casesBanner {
    width: 96%;
	}
	/*Category*/
	#casesCategory {
		width: 96%;
    	margin: 12.5px 0px 0px;
	}
	.casesCategoryItem {
    padding: 0;
    margin: 0 -1.5%;
	}
	.casesCategoryTitle {
		
		margin: 0px 50% 0px 1.5%;
	}	
	.casesCategorySubItem {
    width: 47%;
    margin: 5px 1.5% 0px 1.5%;
    float: left;
	}
	/*menu*/
	.casesMenuItem {padding: 20px 2px 9px 2px;}
	.casesMenuItem:hover, .casesMenuItemActive {border-bottom: 9px #74C5B8 solid;}
	#casesMenu {
    width: 96%;
	}
	.casesSolutionProject {
    width: 96%;
	}
	#casesSolution {
		margin-bottom: 10px;
	}

}

@media screen and (max-width: 767px) {
	
	/*Menu Item*/
	.casesMenuItem {padding: 20px 2px 9px 2px;}
	.casesMenuItem:hover, .casesMenuItemActive {border-bottom: 9px #74C5B8 solid;}
}

@media (max-device-width: 480px) {
	/*banner*/
	#casesBanner {
    width: 100%;
	    overflow: hidden;
	}
	#casesBannerImg img {
    width: 130%;
    position: relative;
    left: -14%;
	}
	#casesBannerTitle {
    font-size: 1.188em;
	}
	#casesBannerSubTitle {
    font-size: 1.063em;
	}
	#casesBannerInfo {
    padding: 0px 1%;
    font-size: 1.063em;
    line-height: 1.563em;
	}
	/*Category*/
	#casesCategory {
    margin: 12.5px 0px 0px;
	}
	.casesCategoryItem {
    padding: 5px 0 10px 0;
	margin: 0 -1.5%;
	}
	.casesCategoryTitle {
    margin: 0px 50% 0px 1.5%;
	}
	.casesCategorySubItem {
    width: 47%;
    margin: 5px 1.5% 0px;
    float: left;
	}
	/*menu item*/
	#casesDelimiter {
    margin: 10px 0px 10px 0px;
	}
	#casesMenu {
    width: 100%;
	}
	.casesMenuItem:hover, .casesMenuItemActive {
    border-bottom: 3px #74C5B8 solid;
	}
	.casesMenuItem {
    padding: 20px 8px 5px 8px;
	}
	#casesMenu {
    width: 98%;
    border-bottom: 2px #505050 solid;
    padding: 12px 0px 5px 0px;
	}
	/*solution*/
	.casesSolutionProject {
    	width: 100%;
	    margin-top: 20px;
	}
	#casesSolution {
    margin-bottom: 10px;
	}
}