#2901. Арт Проект. Размещение кейса по EasyPact

frontend/web/css/style_30.11.2018.css

@@ -2775,3 +2775,352 @@
 		margin-bottom: 0;
 	}
 }
+
+.keys_conf_top{
+	width: 100%;
+	min-height: 540px;
+	background: #7bab38 url(../images_configurator/conf_bg.jpg) no-repeat bottom center;
+	background-size: cover;
+	-moz-background-size: cover;
+	-webkit-background-size: cover;
+	-o-background-size: cover;
+	padding-top: 70px;
+	padding-bottom: 55px;
+	position: relative;
+}
+.conf_title_wrap h1{
+	font-size: 44px;
+	line-height: 54px;
+	color: #fff;
+	font-weight: bold;
+	text-transform: uppercase;
+}
+.conf_title_wrap h1 span{
+	font-family: "RobotoLight";
+	font-weight: normal;
+	text-transform: lowercase;
+}
+.conf_title_wrap a.toggle_bottom{
+	margin-top: 35px;
+}
+.conf_title_img{
+	margin-right: -125px;
+	margin-left: -260px;
+	position: relative;
+	z-index: 5;
+}
+.conf_title_img img{
+	max-width: 100%;
+}
+
+.conf_p{
+	position: absolute;
+	z-index: 4;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+.conf_p1{
+	background-image: url(../images_configurator/conf_p1.png);
+	width: 310px;
+	height: 250px;
+	top: 130px;
+	right: 40px;
+}
+.conf_p2{
+	background-image: url(../images_configurator/conf_p2.png);
+	width: 245px;
+	height: 265px;
+	top: 230px;
+	right: 40%;
+	z-index: 6;
+}
+
+.conf_how_works{
+	width: 100%;
+	background: #7bab38;
+	min-height: 100px;
+	padding-top: 60px;
+	padding-bottom: 70px;
+}
+.conf_how_works h2{
+	font-size: 30px;
+	color: #fff;
+	background: #262E38;
+	display: inline-block;
+	padding: 10px 15px 17px 23px;
+	font-family: "RobotoBold";
+}
+.conf_list{
+	margin-top: 40px;
+}
+.conf_list li{
+	font-size: 17px;
+	line-height: 20px;
+	padding-left: 50px;
+	position: relative;
+}
+.conf_list li::before{
+	content: '';
+	position: absolute;
+	left: 30px;
+	top: 7px;
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	background-color: #2d323a;
+}
+.conf_list li:not(:last-child){
+	margin-bottom: 15px;
+}
+
+.main_content_conf{
+	background: #fff;
+	color: #282828;
+	padding-top: 60px;
+	padding-bottom: 48px
+}
+.main_content_conf h3{
+	font-size: 32px;
+	line-height: 35px;
+	margin-bottom: 30px;
+	font-family: "RobotoBold";
+}
+.main_content_conf p{
+	font-size: 16px;
+	line-height: 28px;
+	margin-bottom: 40px;
+}
+
+
+.point_img_box{
+	margin-bottom: 40px;
+}
+.point_img_box_wr {
+	position: relative;
+}
+.point_img img {
+	width: 100%;
+	height: auto;
+}
+
+.point_img_list {
+	counter-reset: myCounter;
+}
+
+.point_img_list li {
+	font-size: 16px;
+	line-height: 22px;
+	position: absolute;
+	padding: 10px 15px;
+	color: #fff;
+	background-color: #608798;
+}
+.point_img_list2 li{
+	position: absolute;
+	padding: 0;
+	color: #2d323a;
+	background-color: transparent;
+}
+.point_img_list_resp {
+	padding-left: 20px;
+	display: none;
+	margin-bottom: 30px;
+	list-style-type: decimal;
+}
+.point_img_list_resp li {
+	margin: 0 0 15px 0;
+	text-align: left;
+	line-height: 25px;
+}
+.point_img_list_resp li br {
+	display: none;
+}
+.point_img_list li:before {
+	counter-increment: myCounter;
+	content: counter(myCounter);
+	font-size: 16px;
+	line-height: 20px;
+	font-weight: bold;
+	display: none;
+}
+
+.conf_diag img{
+	max-width: 100%;
+}
+
+.conf_accordeon_list{
+	counter-reset: myCounter2;
+	margin-bottom: 40px;
+}
+.conf_accordeon_title{
+	margin-bottom: 20px !important;
+	color: #0069b5;
+	cursor: pointer;
+	padding-left: 45px;
+	position: relative;
+}
+.conf_accordeon_title::before{
+	content: counter(myCounter2);
+	counter-increment: myCounter2;
+	position: absolute;
+	top: 5px;
+	left: 0;
+	width: 28px;
+	height: 28px;
+	border-radius: 50%;
+	background-color: #3ecd59;
+	box-shadow: 0px 3px 7px 0px rgba(62, 205, 89, 0.25);
+	color: #fff;
+	font-size: 14px;
+	line-height: 28px;
+	font-family: "RobotoBold";
+	text-align: center;
+}
+.conf_accordeon_title:hover span{
+	border-bottom: none;
+}
+.conf_accordeon_list li.active .conf_accordeon_title{
+	color: #2d323a;
+}
+.conf_accordeon_list li.active .conf_accordeon_title span{
+	border-bottom: none;
+}
+.conf_accordeon_title span{
+	font-size: 20px;
+	line-height: 32px;
+	border-bottom: 1px dashed #0069b5;
+	font-family: "RobotoBold";
+}
+.conf_accordeon_title .conf_accordeon_step{
+	border-bottom: none;
+	font-family: "RobotoRegular";
+	display: block;
+}
+.conf_accordeon_content{
+	padding-left: 45px;
+	display: none;
+}
+.conf_accordeon_content p{
+	font-size: 14px;
+	line-height: 24px;
+	margin-bottom: 25px;
+}
+
+.conf_title{
+	display: inline-block;
+	font-size: 26px;
+	line-height: 33px;
+	font-family: "RobotoBold";
+	color: #fff;
+	padding: 15px 30px;
+	background-color: #2d323a;
+	margin-bottom: 40px;
+}
+
+
+
+@media only screen and (max-width: 1301px){
+	.conf_p{
+		display: none;
+	}
+	.conf_title_img{
+		margin-right: -75px;
+		margin-left: -300px;
+	}
+}
+@media only screen and (max-width: 991px){
+	.conf_title_img{
+		margin-right: 0;
+		margin-left: 0;
+	}
+	.conf_title_wrap a.toggle_bottom{
+		display: block;
+		margin-bottom: 20px;
+	}
+}
+@media only screen and (max-width: 767px){
+	.point_img_list_resp {
+		display: block;
+	}
+	.point_img_list li:before {
+		display: block;
+		text-align: center;
+	}
+	.point_img_list li {
+		height: 20px;
+		padding: 0 4px;
+		overflow: hidden;
+	}
+	.point_img_box_wr {
+		margin-bottom: 10px;
+	}
+
+	.keys_conf_top{
+		padding-top: 40px;
+		padding-bottom: 40px;
+		min-height: auto;
+	}
+	.conf_title_wrap h1{
+		font-size: 35px;
+		line-height: 45px;
+	}
+
+	.conf_how_works{
+		padding-top: 40px;
+		padding-bottom: 40px;
+	}
+	.conf_list li{
+		padding-left: 20px;
+	}
+	.conf_list li::before{
+		left: 0;
+	}
+
+	.main_content_conf{
+		padding-top: 40px;
+		padding-bottom: 40px;
+	}
+	.main_content_conf p, .point_img_box, .conf_accordeon_list{
+		margin-bottom: 20px;
+	}
+}
+
+.keys_conf_top{
+	background-image: url(../images_configurator_2/conf_bg2.jpg);
+	background-position-y: top;
+}
+.conf_title_wrap .toggle_bottom{
+	float: none;
+	margin-bottom: 85px;
+}
+.conf_logo_wrap p{
+	font-size: 16px;
+	line-height: 18px;
+	margin-bottom: 20px;
+}
+.conf_title_wrap h1{
+	font-size: 40px;
+	line-height: 54px;
+	font-weight: bold;
+	text-transform: none;
+	color: #fff;
+}
+.conf_title_wrap h1 span{
+	font-family: inherit;
+	font-weight: bold;
+	text-transform: none;
+}
+.conf_p2 {
+	background-image: url(../images_configurator_2/conf_p2_2.png);
+	right: 50%;
+}
+.conf_p1 {
+	background-image: url(../images_configurator_2/conf_p1_2.png);
+	right: 0;
+}
+
+@media only screen and (max-width: 1401px){
+	.conf_p1{
+		right: -100px;
+	}
+}