.cssBox {
	overflow: hidden;
}
.cssBox:hover {
	background-color: rgba(250,250,250, 0.95) !important;
}
.cssEffect .noImage.cssBox .cssContent {
	width: 100%;
}
.cssEffect .noImage.cssBox:hover .cssContent {
	position: absolute;
	width: inherit;
}

.cssEffect .cssBox:hover .cssHeader,
.cssEffect .cssBox:hover .cssTeaser,
.cssEffect .cssBox:hover .cssBodytext {
	width: calc(50%);
	float: left;
}
.cssEffect .showMedia.cssBox:hover .cssHeader,
.cssEffect .showMedia.cssBox:hover .cssTeaser {
	text-align: left !important;
	clear: both;
}
.cssEffect .noImage.cssBox:hover .cssHeader,
.cssEffect .noImage.cssBox:hover .cssTeaser,
.cssEffect .noImage.cssBox:hover .cssBodytext {
	width: calc(100%);
}
.cssEffect .noImage.cssBox:hover .cssHeader,
.cssEffect .noImage.cssBox:hover .cssTeaser {
	text-align: left !important;
	height: auto !important;
	padding-left: 25px !important;
}
.cssEffect .noImage.cssBox:hover .cssHeader {
	padding-top: 25px !important;
}
.cssEffect .noImage.cssBox:hover .cssTeaser {
	margin-top: 15px !important;
}
.cssEffect .cssBox .cssBodytext {
	padding: 0px 20px 0px 25px !important;
	color: rgba(0,0,0, 0.80) !important;
	color: #444 !important;
}
.cssEffect .cssBox .cssBodytext:after {
	color: rgba(0,0,0, 0.60) !important;
	position: absolute;
	float: right;
	display: block;
	margin-top: -1.45em;
	right: 0.6em;
	font-family: 'Material Icons';
	content: "\E5C8"; /* Arrow Right */
	background-color: rgba(255,255,255, 0.0);
}
.cssEffect .cssBox:hover .cssBodytext {
	position: absolute;
	top: 0;
	margin-top: 2em;
	margin-bottom: 1em;
}
.cssEffect .noImage.cssBox:hover .cssBodytext {
	position: relative;
	margin-top: 1em;
}
.cssEffect .cssBox:hover .cssBodytext P {
	width: 100%;
}
.cssEffect .cssBox .cssBoxlink {
	transition: box-shadow 0.4s linear;
}
.cssEffect .cssBox .cssBoxlink:hover {
	box-shadow: 0px 0px 0px 10px var(--cssBorderHoverColor) inset !important;
	box-shadow: 0px 0px 0px 10px rgba(255,255,255, 0.99) inset,
		2px 2px 5px 0px rgba(55,55,55, 0.35) !important;
}
.cssEffect .cssBox .cssBoxlink:active {
	box-shadow: 0px 0px 0px 10px rgba(255,255,255, 0.5) inset !important;
}


.cssEffect .cssBox .cssSymbol {
	position: relative;
	display: block;
	top: calc(50%); margin-top: -1px;
	width: 90%; height: 1px !important;
	margin-left: 5% !important;
	margin-right: 5% !important;
	border-bottom: 0px solid rgba(155,155,155, 0.3);
	transition: all 0.75s cubic-bezier(.85,-0.8, 0.5,1.9);
}
.cssEffect .cssBox.noImage .cssSymbol,
.cssEffect .cssBox.showMedia:hover .cssSymbol {
	border-bottom-width: 1px;
}
.cssEffect .cssBox.noImage .cssSymbol {
	top: 35px;
}
.cssEffect .cssBox:hover .cssSymbol {
	top: calc(100% - 14px);
	border-bottom-width: 0px !important;
	z-index: 1;
}

.cssEffect .cssBox .cssSymbol:before {
	position: relative;
	display: block;

	color: rgba(200,200,200, 0.4);
	background-color: rgba(255,255,255, 0.90);
	top: calc(50% - 25px);
	left: calc(50% - 25px);

	text-align: center;
	line-height: 100%;

	font-family: 'Material Icons';
	content: "\e8e7"; /* Comment */
	content: "\e8d2"; /* Lines as Paragraph */
	content: "\e91a"; /* Thin lines to bottom */
	content: "\e919"; /* Broken Lines */
	content: "\e8ee"; /* Full Lines shorter */
	content: "\e8fe"; /* Full Lines */
	content: "\e055"; /* ArrowUp2Device */
	content: "\e0e0"; /* OpenBook */
	font-size: 26px;
	padding-top: 10px;	padding-left: 2px;

	border-radius: 50px;
	width: 50px;			height: 50px;
	transition: all 700ms linear;
}
.cssEffect .cssBox.noImage .cssSymbol:before {
	box-shadow: 0px 0px 0px 1px rgba(155,155,155, 0.3);
}
.cssEffect .cssBox:hover .cssSymbol:before {
	box-shadow: 0px -1px 0px 1px rgba(155,155,155, 0.2);
	font-size: 25px;
	border-radius: 40px;
	width: 40px;			height: 40px;
	padding-top: 6px; 	padding-left: 1px;
	top: calc(50% - 27px);
	left: calc(50% - 20px);
}


.cssBox:hover .cssShowOnHover {
	display: inline-block;
}
.cssShowOnHover,
.cssBox:hover .cssHideOnHover {
	display: none;
}
.cssEffect .noImage.cssBox .cssMedia {
	display: none;
}