/*remove shape on mobile*/
@media (max-width: 767px){
.remove-shape-mobile:before {
    display: none;
}}

/*triangle01*/
.triangle-01 {
    position: relative
}

.triangle-01:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 200px 0 0 120px;
    border-color: transparent transparent transparent #e21f26;
    bottom: 0;
    left: 0;
}

/*triangle02*/
.triangle-02 {
    position: relative
}

.triangle-02:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 220px 400px 0;
    border-color: transparent #e21f26 transparent transparent;
    bottom: -200px;
    right: 0;
}

@media (max-width: 767px){
.triangle-02:before {
    border-width: 0 100px 200px 0;
    bottom: -50px;
    right: 0px;
}}

/*triangle03*/
.triangle-03 {
    position: relative
}

.triangle-03:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 400px 220px 0 0;
    border-color: #e21f26 transparent transparent transparent;
    bottom: -200px;
    left: 0;z-index: -1;
}

@media (max-width: 767px){
.triangle-03:before {
    border-width: 200px 100px 0 0;
    bottom: -50px;
    left: 0px;
}}


/*triangle04*/
.triangle-04 {
    position: relative
}

.triangle-04:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 220px 400px 0;
    border-color: transparent #e21f26 transparent transparent;
    top: 0px;
    right: 0;
}

@media (max-width: 767px){
.triangle-04:before {
    border-width: 0 100px 200px 0;
    bottom: -50px;
    right: 0px;
}}

/*mask 01*/
.foc-image-mask-01 img {
    -webkit-mask: url("/images/00-foc/others/mask01.png");
    mask: url("/images/00-foc/others/mask01.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-position: bottom;
}

/*mask 02*/
.foc-image-mask-02 img {
    -webkit-mask: url("/images/00-foc/others/mask02.png");
    mask: url("/images/00-foc/others/mask01.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

/*mask 03*/
.foc-image-mask-03 img {
    -webkit-mask: url("/images/00-foc/others/mask03.png");
    mask: url("/images/00-foc/others/mask03.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

/*mask 05*/
.foc-image-mask-05 img {
    -webkit-mask: url("/images/00-foc/others/mask05.png");
    mask: url("/images/00-foc/others/mask05.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-position: bottom;
}

/*mask 07*/
.foc-image-mask-07 img {
    -webkit-mask: url("/images/00-foc/others/mask07.png");
    mask: url("/images/00-foc/others/mask07.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-position: bottom right;
}

/*header mask*/
@media (max-width: 991px){
.foc-header{
    -webkit-mask: url("/images/00-foc/others/mask08.png");
    mask: url("/images/00-foc/others/mask08.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    -webkit-mask-position: bottom center;
    mask-size: 100%;
}}

@media only screen and (min-width: 992px) {
.foc-header{
    -webkit-mask: url("/images/00-foc/others/mask06.png");
    mask: url("/images/00-foc/others/mask06.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    -webkit-mask-position: top center;
    mask-size: 100%
}}


/*gguard*/
.trapezium01 {
    position: relative;transition:0.5s ease;
}

.trapezium01:before {
    position: absolute;
    width:30%;
    content: '';
    right: 0;
    bottom: 0;transition:0.5s ease;
	border-bottom: 18px solid #e00414;
	border-left: 15px solid transparent;
	border-right: 0px solid transparent;
}

.trapezium01:hover:before {
    width: 40%; transition:0.5s ease;background-size: 200% auto;
}


.trapezium02{
    position: relative;transition:0.5s ease;
}

.trapezium02:after {
    position: absolute;
    width:30%;
    content: '';
    right: 0;
    top: -27px;
    transition:0.5s ease;
    border-bottom: 18px solid #e00414;
    border-left: 15px solid transparent;
    border-right: 0px solid transparent;
}

.trapezium02:hover:after {
    width: 40%; transition:0.5s ease;background-size: 200% auto;
}


.trapezium03{
    position: relative;transition:0.5s ease;
}

.trapezium03:after {
    position: absolute;
    width:30%;
    content: '';
    left: 0;
    top: -18px;
    transition:0.5s ease;
    border-bottom: 18px solid #e00414;
    border-right: 15px solid transparent;
    border-left: 0px solid transparent;
}

.trapezium03:hover:after {
    width: 40%; transition:0.5s ease;background-size: 200% auto;
}

.cta-trapezium{
    position: relative;transition:0.5s ease;
}

.cta-trapezium:after {
    position: absolute;
    width:30%;
    content: '';
    right: 0;
    top: -18px;
    transition:0.5s ease;
    border-bottom: 18px solid #e00414;
    border-left: 15px solid transparent;
    border-right: 0px solid transparent;
}

.cta-trapezium:hover:after {
    width: 40%; transition:0.5s ease;background-size: 200% auto;
}
/*image trapezium 1*/

.image-trapezium-01 {
    position: relative;
    transition:0.5s ease;
    /* margin-bottom: 17px; */
}

.image-trapezium-01:before {
    position: absolute;
    width:30%;
    content: '';
    right: 0;
    bottom: -15px;
    transition:0.5s ease;
    border-bottom: 18px solid #e00414;
    border-left: 15px solid transparent;
    border-right: 0px solid transparent;
}

.image-trapezium-01:hover:before {
    width: 40%; transition:0.5s ease;background-size: 200% auto;
}


/*image trapezium 2*/

.image-trapezium-02 {
    position: relative;transition:0.5s ease;
}

.image-trapezium-02:before {
    position: absolute;
    width:30%;
    content: '';
    left: 0;
    bottom: -17px;
    transition:0.5s ease;
    border-bottom: 18px solid #e00414;
    border-right: 15px solid transparent;
    border-left: 0px solid transparent;
}

.image-trapezium-02:hover:before {
    width: 40%; transition:0.5s ease;background-size: 200% auto;
}



/*polygon-left*/
@media (min-width: 768px){
.polygon-left-img img {
    min-height: 300px;
    object-fit: cover;
    object-position: right;
}}

.polygon-left {
    position: relative;min-height: 310px;
}


@media (max-width: 767px){
.polygon-left {
    position: relative;height: auto;
}}

.polygon-left:before {
    position: absolute;
    content:'';
    left: -125px;
    width: 0;
    top: 0;
    height: 100%;
    border-bottom: 310px solid #f7f7f7;
    border-left: 127px solid transparent;
    z-index: 10;
    }

@media (min-width: 1024px) and (max-width: 1199px){
.polygon-left {min-height: 355px;}
.polygon-left:before {
    left: -125px;
    border-bottom: 355px solid #f7f7f7;
    border-left: 127px solid transparent;
}}


/*polygon-right*/
@media (min-width: 768px){
.polygon-right-img img {
    min-height: 300px;
    object-fit: cover;
    object-position: left;
  }}

.polygon-right {
    position: relative;height: 310px;
}
.polygon-right:before {
    position: absolute;
    content:'';
    right: -125px;
    width: 0;
    top: 0;
    height: 100%;
    border-bottom: 310px solid #f7f7f7;
    border-right: 127px solid transparent;
    z-index: 10;
    }