﻿.section2{ background:#edefee;height:auto}
@media only screen and (min-width: 1200px) {
  .b-info-clr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
	width:90%;
	margin:auto;
    padding-bottom: 0px;
  }

  
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .b-info-clr {
    padding-right: 30px;
    padding-left: 30px;
    margin-bottom: 10px;
	
  }
}
@media only screen and (max-width: 767px) {
  .b-info-clr {
    margin-bottom: 15px;
  }
}
.b-info-clr__item {
  position: relative;
  overflow: hidden;
  color: #fff;
}
@media only screen and (max-width: 1919px) {
  .b-info-clr__item {
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media only screen and (min-width: 1200px) {
  .b-info-clr__item { 
    flex: 1 1 calc(100% / 3 - 40px / 3);
    width: calc(100% / 3 - 40px / 3);
    align-self: auto; 
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .b-info-clr__item {
    height: 325px;
  }
}
@media only screen and (max-width: 767px) {
  .b-info-clr__item {
    width: 100%;
    height: 307px;
  }
}
@media only screen and (min-width: 1200px) {
  .b-info-clr__item:not(:first-child) {
    margin-left: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .b-info-clr__item:not(:first-child) {
    margin-top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .b-info-clr__item:not(:first-child) {
    margin-top: 15px;
  }
}
.b-info-clr__item_or .b-info-clr__content {
  background: #F39527;
}
.b-info-clr__item_or .button:not(:hover) {
  background: #F39527;
}
.b-info-clr__item_or .button:hover {
  background: #fff;
  color: #F39527;
}
@media only screen and (max-width: 767px) {
  .b-info-clr__item_or .b-info-clr__title {
    margin-right: 155px;
  }
}
.b-info-clr__item_re .b-info-clr__content {
  background: #FF7358;
}
.b-info-clr__item_re .button:not(:hover) {
  background: #FF7358;
}
.b-info-clr__item_re .button:hover {
  background: #fff;
  color: #FF7358;
}
.b-info-clr__item_gr .b-info-clr__content {
  background: #96CA2D;
}
.b-info-clr__item_gr .button:not(:hover) {
  background: #96CA2D;
}
.b-info-clr__item_gr .button:hover {
  background: #fff;
  color: #96CA2D;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .b-info-clr__item_gr .b-info-clr__title {
    max-width: 340px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .b-info-clr__item_gr .b-info-clr__desc {
    max-width: 320px;
  }
}
@media only screen and (max-width: 767px) {
  .b-info-clr__item .button {
    min-width: 132px;
  }
}
.b-info-clr__content {
  
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: center;
  align-items: stretch;
  height: 100%;
}
@media only screen and (min-width: 1400px) {
  .b-info-clr__content {
    width: 60%;
  }
}
@media only screen and (min-width: 1200px) {
  .b-info-clr__content {
    width: 56%;
    padding: 5% 50px 30px 37px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1700px) {
  .b-info-clr__content {
    width: 72%;
    padding: 25px 60px 51px 17px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .b-info-clr__content {
    padding: 35px 30px 40px;
  }
}
@media only screen and (max-width: 767px) {
  .b-info-clr__content {
    padding: 25px 15px 30px;
  }
}
.b-info-clr__text,
.b-info-clr__cta {
  flex: 0 1 auto;
  align-self: auto;
}
.b-info-clr__text {
  line-height: 1.2;
  height:200px
}
.b-info-clr__img {
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
}
@media only screen and (max-width: 767px) {
  .b-info-clr__img {
    transform: translateX(22%);
  }
}
.b-info-clr__img img {
  width: auto;
  height: 100%;
  display: block;
}
.b-info-clr__img img.is-mobile {
  display: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .b-info-clr__img img.is-mobile {
    display: block;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1700px) {
  .b-info-clr__img img.is-mobile {
    transform: translateX(26%);
  }
}
@media only screen and (min-width: 1200px) {
  .b-info-clr__img img.is-mobile {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .b-info-clr__img img.is-mobile {
    display: block;
  }
}
@media only screen and (min-width: 1920px) {
  .b-info-clr__img img.is-desktop {
    transform: translateX(11%);
  }
}
@media only screen and (min-width: 1200px) {
  .b-info-clr__img img.is-desktop {
    display: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .b-info-clr__img img.is-desktop {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .b-info-clr__img img.is-desktop {
    display: none;
  }
}
.b-info-clr__title,
.b-info-clr__desc,
.b-info-clr__cta {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1200px) {
  .b-info-clr__title,
  .b-info-clr__desc {
    max-width: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .b-info-clr__title,
  .b-info-clr__desc {
    max-width: 290px;
  }
}
@media only screen and (max-width: 767px) {
  .b-info-clr__title,
  .b-info-clr__desc {
    margin-right: 135px;
  }
}
.b-info-clr__title {
  font-weight: 700;
}
@media only screen and (min-width: 1200px) {
  .b-info-clr__title { 
	padding-top:10px;
	line-height:30px;
    margin-bottom: 20px;
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .b-info-clr__title {
    margin-bottom: 15px;
    font-size: 28px;
  }
}
@media only screen and (max-width: 767px) {
  .b-info-clr__title {
    margin-bottom: 10px;
    font-size: 22px;
    margin-right: 105px;
  }
}
@media only screen and (min-width: 1200px) {
  .b-info-clr__desc {
    font-size: 20px;
    max-width: 230px;
  }
}
@media only screen and (min-width: 401px), only screen and (max-width: 767px) {
  .b-info-clr__desc {
    font-size: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .b-info-clr__desc {
    font-size: 15px;
    line-height: 26px;
    max-width: 250px;
  }
}
@media only screen and (max-width: 400px) {
  .b-info-clr__desc {
    font-size: 14px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1700px) {
  .b-info-clr__desc {
    font-size: 15px;
	line-height:20px;
	font-weight:500;
	color:#fff;
	}
}
.b-info-clr__cta {
  padding-top: 40px;
}
.b-info-clr .button:before {
  border-style: dotted;
}
@media only screen and (min-width: 1200px) and (max-width: 1700px) {
  .b-info-clr .button {
    min-width: 175px;
    font-size: 18px;
  }
} 
.b-info-clr__item a.button{
	border:1px #fff solid;
	color:#fff;
	padding:5px;
	font-size:12px;
	background:transparent
} 
.b-info-clr__item a.button:hover {
   color:#fff;  
   background:#083366;
   border:1px #083366 solid;
}
.b-info-clr__item:nth-child(2) a.button:hover {
   color:#fff;  
   background:#d6b764;
   border:1px #d6b764 solid;
}

.b-info-clr {
    @media @m-desk {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-content: stretch;
        align-items: stretch;
        margin-bottom: 20px;
    }
    @media @m-tabl {
        padding-right: @w-gap-t;
        padding-left: @w-gap-t;
        margin-bottom: 10px;
    }
    @media @m-mob {
        margin-bottom: @w-gap-m;
    }
    &__item {
        position: relative;
        overflow: hidden;
        color: @clr-dfl-wht;
        @media @m-desk-x-no {
            max-width: 800px;
            margin-right: auto;
            margin-left: auto;
        }
        @media @m-desk {
            height: 400px;
            flex: 1 1 ~'calc(100% / 3 - 40px / 3)';
            width: ~'calc(100% / 3 - 40px / 3)';
            align-self: auto;
            max-width: 620px;
        }
        @media @m-tabl {
            height: 325px;
        }
        @media @m-mob {
            width: 100%; height: 307px;
        }
        &:not(:first-child) {
            @media @m-desk {
                margin-left: 20px;
            }
            @media @m-tabl {
                margin-top: 20px;
            }
            @media @m-mob {
                margin-top: 15px;
            }
        }
        &_or {
            .b-info-clr__content {
                background: @clr-dfl-org;
            }
            .button {
                &:not(:hover) {
                    background: @clr-dfl-org;
                }
                &:hover {
                    background: @clr-dfl-wht;
                    color: @clr-dfl-org;
                }
            }
            .b-info-clr__title {
                @media @m-mob {
                    margin-right: 155px;
                }
            }
        }
        &_re {
            .b-info-clr__content {
                background: @clr-dfl-red;
            }
            .button {
                &:not(:hover) {
                    background: @clr-dfl-red;
                }
                &:hover {
                    background: @clr-dfl-wht;
                    color: @clr-dfl-red;
                }
            }
        }
        &_gr {
            .b-info-clr__content {
                background: @clr-dfl-grn;
            }
            .button {
                &:not(:hover) {
                    background: @clr-dfl-grn;
                }
                &:hover {
                    background: @clr-dfl-wht;
                    color: @clr-dfl-grn;
                }
            }
            .b-info-clr__title {
                @media @m-tabl {
                    max-width: 340px;
                }
            }
            .b-info-clr__desc {
                @media @m-tabl {
                    max-width: 320px;
                }
            }
        }
        .button {
            @media @m-mob {
                min-width: 132px;
            }
        }
    }
    &__content {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-content: center;
        align-items: stretch;
        height: 100%;
        @media @m-desk-xst {
            width: 60%;
        }
        @media @m-desk {
            width: 56%;
            padding: 45px 50px 30px 37px;
        }
        @media @m-cstm-1 {
            width: 72%;
            padding: 25px 60px 51px 17px;
        }
        @media @m-tabl {
            padding: 35px @w-gap-t 40px;
        }
        @media @m-mob {
            padding: 25px @w-gap-m 30px;
        }
    }
    &__text,
    &__cta {
        flex: 0 1 auto;
        align-self: auto;
    }
    &__text {
        line-height: 1.2;
    }
    &__img {
        height: 100%;
        position: absolute;
        right: 0; bottom: 0;
        @media @m-mob {
            transform: translateX(22%);
        }
        img {
            width: auto; height: 100%;
            display: block;
            &.is-mobile {
                display: none;
                @media @m-desk-xs-no {
                    display: block;
                }
                @media @m-cstm-1 {
                    transform: translateX(26%);
                }
                @media @m-desk {
                    display: block;
                }
                @media @m-mob {
                    display: block;
                }
            }
            &.is-desktop {
                @media @m-desk-x {
                    transform: translateX(11%);
                }
                @media @m-desk {
                    display: none;
                }
                @media @m-desk-xs-no {
                    display: none;
                }
                @media @m-mob {
                    display: none;
                }
            }
        }
    }
    &__title,
    &__desc,
    &__cta {
        position: relative;
        z-index: 1;
    }
    &__title,
    &__desc {
        @media @m-desk {
            max-width: 240px;
        }
        @media @m-tabl {
            max-width: 290px;
        }
        @media @m-mob {
            margin-right: 135px;
        }
    }
    &__title {
        font-weight: 700;
        @media @m-desk {
            margin-bottom: 20px;
            font-size: 30px;
        }
        @media @m-tabl {
            margin-bottom: 15px;
            font-size: 28px;
        }
        @media @m-mob {
            margin-bottom: 10px;
            font-size: 22px;
            margin-right: 105px;
        }
    }
    &__desc {
        @media @m-desk {
            font-size: 20px;
            max-width: 230px;
        }
        @media @m-mob-l-no {
            font-size: 20px;
        }
        @media @m-tabl {
            font-size: 18px;
            line-height: 26px;
            max-width: 250px;
        }
        @media @m-mob-l {
            font-size: 14px;
        }
        @media @m-cstm-1 {
            font-size: 18px;
        }
    }
    &__cta {
        padding-top: 20px;
    }
    .button {
        &:before {
            border-style: dotted;
        }
        @media @m-cstm-1 {
            min-width: 175px;
            font-size: 18px;
        }
    }
}
