/*
	Этот файл содержит стили огромных (во всю ширину) блоков с изображением банковской карты и описанием.
	Блоки расположены вверху страницы после заголовка.
	На десктопе - карта слева, описание справа. В адаптиве - карта сверху, описание снизу
 
	Встречается на следующих страницах:
		Карты
		Выгодные покупки
		Корпоративные
		Спецпредложения
		...
*/
ul.wide-cards > li {
  width: 100%;
  overflow: hidden;
}
ul.wide-cards > li.light {
  color: #eee;
}
ul.wide-cards > li.light .title {
  color: #eee;
}
ul.wide-cards > li.light .download {
  color: #eee;
  background: url(../../images/pages/credit_card/download.png) left center no-repeat;
}
ul.wide-cards > li.light .learn-more {
  color: #eee;
  background: url(../../images/icon/learn_more_light.png) left center no-repeat;
}
ul.wide-cards > li.light .card-icon {
  background: url(../../images/pages/credit_card/icon_card.png) left center no-repeat;
}
ul.wide-cards > li.light ul.additional-info > li {
  border-left: 1px solid #eee;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
ul.wide-cards > li.dark {
  color: #525254;
}
ul.wide-cards > li.dark .title {
  color: #525254;
}
ul.wide-cards > li.dark .download {
  color: #525254;
  background: url(../../images/icon/learn_more_dark.png) left center no-repeat;
}
ul.wide-cards > li.dark .learn-more {
  color: #525254;
  background: url(../../images/icon/learn_more_dark.png) left center no-repeat;
}
ul.wide-cards > li.dark ul.additional-info > li {
  border-left: 1px solid #888;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
ul.wide-cards > li .wrapper {
  display: block;
  position: relative;
  background-position: center top;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
ul.wide-cards > li .wrapper .texts {
  padding: 200px 15px 15px;
}
ul.wide-cards > li .wrapper .texts .title {
  font-weight: bold;
  font-size: 20px;
  line-height: 20px;
}
.self ul.wide-cards > li .wrapper .texts .btn-bl-1{
    margin-top:23px;
  }
.self ul.wide-cards > li .wrapper .texts .btn-center {
  text-align:   center; 
}
.self ul.wide-cards > li .wrapper .texts .btn-bl-2{
  margin: 23px auto 0 ;
  }
.self ul.wide-cards > li .wrapper .texts .title {
  color:#525254;
}
.self ul.wide-cards > li .wrapper .texts .title span{
  font-size:18px;line-height:21px;display:block;padding-top:6px;
}
ul.wide-cards > li .wrapper .texts .details {
  margin: 20px 0;
  font-size: 15px;
}
ul.wide-cards > li .wrapper .texts .details ul > li {
  float: none;
  position: relative;
  padding-left: 20px;
  margin: 10px 0;
}
ul.wide-cards > li .wrapper .texts .details ul > li:before {
  content: "—";
  position: absolute;
  left: 0;
}
ul.wide-cards > li .wrapper .texts .download {
  text-transform: uppercase;
  display: block;
  font-size: 18px;
  line-height: 30px;
  height: 30px;
  font-weight: bold;
  padding-left: 35px;
  margin-bottom: 20px;
}
ul.wide-cards > li .wrapper .texts .download:hover {
  text-decoration: underline;
}
ul.wide-cards > li .wrapper .texts .learn-more {
  display: block;
  height: 28px;
  font-size: 16px;
  line-height: 28px;
  text-transform: uppercase;
  font-weight: bold;
  padding-left: 35px;
}
ul.wide-cards > li .wrapper .texts ul.additional-info {
  display: none;
  margin-top: 20px;
}
ul.wide-cards > li .wrapper .texts ul.additional-info > li {
  padding: 0 15px;
}
ul.wide-cards > li .wrapper .texts ul.additional-info > li:first-child {
  padding-left: 0;
  border-left: 0;
}
ul.wide-cards > li .wrapper .texts ul.additional-info > li b {
  display: block;
}
ul.wide-cards > li a.clickable-img 
{
	display: block;
	width: 100%;
	height:200px;
	position:absolute;
	left:0;
	top:0;
}
@media screen and (min-width:0) {

  ul.wide-cards > li .title.p-t{padding-top:52px} 
  .self ul.wide-cards > li .wrapper .texts .title span{
  font-size:15px;line-height:17px;
}

}
@media screen and (min-width: 480px) {
  
}
@media screen and (min-width: 768px) {
  .self ul.wide-cards > li .wrapper .texts .btn-center {
      text-align:   left; 
  }
  ul.wide-cards > li {
    height: 400px;
    line-height: 400px;
  }
  ul.wide-cards > li.self-bg {
    background:url(../../../../../upload/iblock/5d8/self_big_bg_2.png) repeat-x;
  }

  ul.wide-cards > li .wrapper {
    text-align: center;
  }
  ul.wide-cards > li .wrapper .texts {
    /*position: absolute;
  				left: 50%;
  				top: 90px;*/
  
    max-width: 400px;
    padding-top: 15px;
    line-height: normal;
    margin-left: 450px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
  }
  .self ul.wide-cards > li .wrapper .texts {
    max-width: 431px;
    margin-left: 345px;
  }
  .self ul.wide-cards > li .wrapper .texts .btn-bl-1{
    margin-top:43px;
  }
  ul.wide-cards > li .wrapper .texts .title {
    font-size: 28px;
    line-height: 28px;
  }
  .self ul.wide-cards > li .wrapper .texts .title {
    padding:80px 0 40px;
    font-size: 28px;
    line-height: 28px;
    color:#525254;
  }
  .self ul.visual-descriptions > li .wrapper .texts .btn-bl-1{margin-bottom:66px}
  ul.wide-cards > li .wrapper .texts .title span{
    font-size: 18px;display:block;
  }
  ul.wide-cards > li .wrapper .texts .details,
  ul.wide-cards > li .wrapper .texts .learn-more,
  ul.wide-cards > li .wrapper .texts ul.additional-info {
    display: block;
  }
  ul.wide-cards > li .wrapper .texts .learn-more {
    font-size: 18px;
  }
	ul.wide-cards > li a.clickable-img
	{
		display: block;
		width:400px;
		height:270px;
		position:absolute;
		top:0;
		left:-110%;
	}
  .self ul.wide-cards > li .wrapper .texts .title span{
  font-size:18px;line-height:21px;display:block;padding-top:6px;
}
}
@media screen and (min-width: 1024px) {
  
}

/*Btn-blue-1*/
.btn-bl-1{width:auto;padding:0;margin:0;background-color:transparent;border:0 none;outline:medium none;overflow:visible;cursor:pointer;zoom:1;position:relative}
.btn-bl-1::-moz-focus-inner{padding:0px;border:0px;cursor:pointer}
.btn-bl-1,
.btn-bl-1 span{display:-moz-inline-stack;display:inline-block}
.btn-bl-1 span{padding:0 0 7px;background:#d9d9d9;border-bottom:1px solid #d9d5b5;border-radius:16px}
  .btn-bl-1 span span{background:#5b9fc2;border:0 none;border-radius:15px}
    .btn-bl-1 span span span{height:38px;padding:0 24px;background:#7bc1e4;border:0 none;border-radius:15px;font-size:16px;line-height:38px;font-weight:bold;text-transform:uppercase;color:#fff}

   /*Btn-blue-2*/
.btn-bl-2{width:auto;padding:0;margin:0;background-color:transparent;border:0 none;outline:medium none;overflow:visible;cursor:pointer;zoom:1;position:relative}
.btn-bl-3::-moz-focus-inner{padding:0px;border:0px;cursor:pointer}
.btn-bl-2,
.btn-bl-2 span{display:-moz-inline-stack;display:inline-block}
.btn-bl-2 span{padding:0 0 7px;background:#96a1a9;border-bottom:1px solid #96a1a9;border-radius:16px}
  .btn-bl-2 span span{background:#5b9fc2;border:0 none;border-radius:15px}
    .btn-bl-2 span span span{height:38px;padding:0 24px;background:#7bc1e4;border:0 none;border-radius:15px;font-size:16px;line-height:38px;font-weight:bold;text-transform:uppercase;color:#fff}