/* * Product slideshow * */
 @font-face {
font-family: 'IRSans';
src: url('../front/fonts/IRANSansWeb.eot?#') format('eot'),
url('../front/fonts/IRANSansWeb.ttf') format('truetype'),
url('../front/fonts/IRANSansWeb.woff') format('woff'),
url('../front/fonts/IRANSansWeb.woff2') format('woff2');
}

 @keyframes slidein {
	 0% {
		 top: -400px;
		 opacity: 0;
	}
	 100% {
		 opacity: 1;
		 top: 0px;
	}
}
 @keyframes slideout {
	 0% {
		 top: 0;
		 opacity: 1;
	}
	 100% {
		 top: -400px;
		 opacity: 0;
	}
}
 body {
	
	 font-family: "IRSans";
	 -moz-user-select: none;
	 -webkit-user-select: none;
	 -ms-user-select: none;
	 user-select: none;
	 Direction: rtl;
}
 body #scene {
	 display: flex;
	 align-items: center;
	 justify-content: right;
	 width: 1000px;
	 height: 400px;
	 position: relative;
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 margin: auto;
	 background-color: #fff;
	 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	 overflow: hidden;
}
 body #scene #left-zone {
	 background: #fff;
	 height: 75%;
	 flex-grow: 0;
	 display: flex;
	 width: 350px;
	 align-items: center;
	 justify-content: left;
}
 body #scene #left-zone .list {
	 display: flex;
	 list-style: none;
	 align-content: stretch;
	 flex-direction: column;
	 flex-grow: 1;
	 margin: 0;
	 padding: 0;
}
 body #scene #left-zone .list li.item input[type="radio"] {
	 display: none;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ label {
	 display: block;
	 opacity: 0.5;
	 height: 50px;
	 text-align: center;
	 line-height: 50px;
}
/* body #scene #left-zone .list li.item input[type="radio"] ~ label:first-letter {
	 text-transform: uppercase;
}*/
 body #scene #left-zone .list li.item input[type="radio"] ~ label:hover {
	 opacity: 0.75;
	 cursor: pointer;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ label.label_emdad:before {
	 content: " ";
	 display: block;
	 position: absolute;
	 width: 40px;
	 height: 40px;
	 margin-left: 15px;
	 background-image: url(../images/emdad_icon.png);
	 background-position: center;
	 background-size: 75% 75%;
	 background-repeat: no-repeat;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ label.label_callcenter:before {
	 content: " ";
	 display: block;
	 position: absolute;
	 width: 40px;
	 height: 40px;
	 margin-left: 15px;
	 background-image: url(../images/callcenter_icon.png);
	 background-position: center;
	 background-size: 75% 75%;
	 background-repeat: no-repeat;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ label.label_vosul:before {
	 content: " ";
	 display: block;
	 position: absolute;
	 width: 40px;
	 height: 40px;
	 margin-left: 15px;
	 background-image: url(../images/vosul_icon.png);
	 background-position: center;
	 background-size: 75% 75%;
	 background-repeat: no-repeat;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ label.label_amar:before {
	 content: " ";
	 display: block;
	 position: absolute;
	 width: 40px;
	 height: 40px;
	 margin-left: 15px;
	 background-image: url(../images/amar_icon.png);
	 background-position: center;
	 background-size: 75% 75%;
	 background-repeat: no-repeat;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ label.label_portal:before {
	 content: " ";
	 display: block;
	 position: absolute;
	 width: 40px;
	 height: 40px;
	 margin-left: 15px;
	 background-image: url(../images/portal_icon.png);
	 background-position: center;
	 background-size: 75% 75%;
	 background-repeat: no-repeat;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ label.label_hamrahabfa:before {
	 content: " ";
	 display: block;
	 position: absolute;
	 width: 40px;
	 height: 40px;
	 margin-left: 15px;
	 background-image: url(../images/hamrahabfa_icon.png);
	 background-position: center;
	 background-size: 75% 75%;
	 background-repeat: no-repeat;
}
body #scene #left-zone .list li.item input[type="radio"] ~ label.label_garaat_kontor:before {
	 content: " ";
	 display: block;
	 position: absolute;
	 width: 40px;
	 height: 40px;
	 margin-left: 15px;
	 background-image: url(../images/garaat_kontor_icon.png);
	 background-position: center;
	 background-size: 75% 75%;
	 background-repeat: no-repeat;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ .content {
	 position: absolute;
	 right: 350px;
	 top: -400px;
	 width: 650px;
	 height: 400px;
	 animation-duration: 0.75s;
	 animation-name: slideout;
	 animation-timing-function: ease-out;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 flex-direction: column;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_emdad .picto {
	 height: 200px;
	 width: 600px;
	 background-image: url(../images/emdad.png);
	 background-position: center;
	 background-size: cover;
	 background-repeat: no-repeat;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_emdad h1 {
	 color: #d64541;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_callcenter .picto {
	 height: 200px;
	 width: 600px;
	 background-image: url(../images/callcenter.png);
	 background-position: center;
	 background-size: cover;
	 background-repeat: no-repeat;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_callcenter h1 {
	 color: #f5d76e;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_vosul .picto {
	 height: 200px;
	 width: 600px;
	 background-image: url(../images/vosul.png);
	 background-position: center;
	 background-size: cover;
	 background-repeat: no-repeat;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_vosul h1 {
	 color: #00b16a;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_amar .picto {
	 height: 200px;
	 width: 600px;
	 background-image: url(../images/amar.png);
	 background-position: center;
	 background-size: cover;
	 background-repeat: no-repeat;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_amar h1 {
	 color: #f27935;
}
body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_portal .picto {
	 height: 200px;
	 width: 600px;
	 background-image: url(../images/portal.png);
	 background-position: center;
	 background-size: cover;
	 background-repeat: no-repeat;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_portal h1 {
	 color: #f27935;
}

body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_hamrahabfa .picto {
	 height: 200px;
	 width: 600px;
	 background-image: url(../images/hamrahabfa.png);
	 background-position: center;
	 background-size: cover;
	 background-repeat: no-repeat;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_hamrahabfa h1 {
	 color: #f27935;
}
body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_garaat_kontor .picto {
	 height: 200px;
	 width: 600px;
	 background-image: url(../images/garaat_kontor.png);
	 background-position: center;
	 background-size: cover;
	 background-repeat: no-repeat;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ .content.content_garaat_kontor h1 {
	 color: #f27935;
}

 body #scene #left-zone .list li.item input[type="radio"] ~ .content h1:first-letter {
	 text-transform: uppercase;
}
 body #scene #left-zone .list li.item input[type="radio"] ~ .content p {
	 max-width: 50%;
	 text-align: center;
}
 body #scene #left-zone .list li.item input[type="radio"]:checked ~ label {
	 opacity: 1;
	 animation: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
 body #scene #left-zone .list li.item input[type="radio"]:checked ~ label.label_emdad {
	 color: #EA583C;
	 border-right: solid 4px #EA583C;
}
 body #scene #left-zone .list li.item input[type="radio"]:checked ~ label.label_callcenter {
	 color: #F49D41;
	 border-right: solid 4px #F49D41;
}
 body #scene #left-zone .list li.item input[type="radio"]:checked ~ label.label_vosul {
	 color: #4E7CFF;
	 border-right: solid 4px #4E7CFF;
}
 body #scene #left-zone .list li.item input[type="radio"]:checked ~ label.label_amar {
	 color: #01B299;
	 border-right: solid 4px #01B299;
}
body #scene #left-zone .list li.item input[type="radio"]:checked ~ label.label_portal {
	 color: #7F71E5;
	 border-right: solid 4px #7F71E5;
}
body #scene #left-zone .list li.item input[type="radio"]:checked ~ label.label_hamrahabfa {
	 color: #3E8EDD;
	 border-right: solid 4px #3E8EDD;
}
body #scene #left-zone .list li.item input[type="radio"]:checked ~ label.label_garaat_kontor {
	 color: #EA8A21;
	 border-right: solid 4px #EA8A21;
}
 body #scene #left-zone .list li.item input[type="radio"]:checked ~ .content {
	 animation-duration: 0.75s;
	 animation-name: slidein;
	 animation-fill-mode: forwards;
	 animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
 body #scene #middle-border {
	 background-color: #eee;
	 height: 75%;
	 flex-grow: 1;
	 max-width: 2px;
	 z-index: 0;
}
 body #scene #right-zone {
	 background: #fff;
	 height: 100%;
	 flex-grow: 3;
}
 
.hstyle {
	text-align: center;
	padding-bottom: 40px;
}