.c-app {
    @extend %rel;
    padding-bottom: 100px;
    background: {
        repeat: no-repeat;
        position: center 0;
        color: white;
    }
    overflow: hidden;

    [class^="icon-"], [class*=" icon-"] {
        &:before {
            @extend %abs-pseudo;
            left: 6%; top: 0;
            width: 46px; height: 46px;
            background: {
                repeat: no-repeat;
                position: center;
            }
            
            @media ( max-width: $tablet + px ) {
                left: 30px;
            }
        }
    }
    
    .blue & {
        background-image: url(../img/app/bg-gradient--blue.jpg);
    }
    
    .gray & {
        background-image: url(../img/app/bg-gradient--gray.jpg);
    }
    
    .violet & {
        background-image: url(../img/app/bg-gradient--violet.jpg);
    }

    .green & {
        overflow: visible;

        &:first-of-type {
            margin-top: -30rem;
            padding-top: 5rem;
            padding-bottom: 6rem;
            background: transparent;

            @media ( max-width: $tablet + px ) {
                padding-top: 8rem;
            }

            @media ( max-width: $smartphone + px ) {
                margin-top: -37rem;
            }

            &:before {
                height: 37.5rem;
                background-image: url(../img/app/bg--green.png);
            }

            .c-app__content {
                margin-top: -4rem;
                padding-bottom: 8rem;

                @media ( max-width: $tablet + px ) {
                    padding-bottom: 0;
                }
            }

            .c-app__slider {
                margin-top: -7rem;

                @media ( max-width: $tablet + px ) {
                    margin-top: 7rem;
                }
            }
        }

        &:last-of-type {
            margin-top: -5rem;
            padding-bottom: 0;

            &:before {
                height: 40rem;
                background-image: url(../img/app/bg--green2.jpg);
            }

            .o-wrap {
                transform: translateY(-6rem);
                margin-bottom: -12rem;

                @media ( max-width: $tablet + px ) {
                    transform: translateY(-4rem);
                    margin-bottom: -8rem;
                }

                @media ( max-width: $smartphone_portrait + px ) {
                    transform: translateY(-2rem);
                    margin-bottom: 2rem;
                }
            }
        }

        &:before {
            content: '';
            position: absolute;
            left: 0; top: 0; right: 0;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: top;
        }

        .c-app__info {
            position: relative;

            ul {
                margin-bottom: 0;
                background-color: transparent;
                box-shadow: none;
                padding: 20px 5% 20px 20%;

                li {
                    margin-bottom: 0;
                    &::marker {
                        color: $c-green-01;
                        font-size: 2em;
                    }

                    span {
                        display: block;
                        transform: translateY(-.5em);
                    }
                }
            }
        }
    }
    

    &__content, &__subcontent {
        @extend %flex;
         
        @media ( max-width: $tablet + px ) {
        	flex-wrap: wrap;
        }
    }

    &__subcontent {
        position: relative;
        margin-top: 2em;

        .absolute-header {
            position: absolute;
            top: 0; left: 0; right: 0;
        }

        .o-cols {
            width: 100%;

            &__item {
                &:first-of-type {
                    width: 25%;
                    margin-top: -1rem;

                    @media ( max-width: $tablet + px ) {
                        margin-top: 18rem;
                    }
                }
                &:last-of-type {
                    width: 75%;

                    padding-top: 22rem;
                    padding-left: 11.5%;

                    p {
                        max-width: 70%;

                        strong {
                            color: $c-green-01;
                        }
                    }

                    @media ( max-width: $tablet + px ) {
                        padding-top: 14rem;
                    }
                }
            }

            @media ( max-width: $tablet + px ) {
                align-items: center;
            }
        }
    }
    
    &__info {
        width: 100%;
        
        @media ( min-width: 1501px ) {
            width: grid(900);
            padding-right: 50px;
        }
        
        @media ( max-width: 1500px ) {
        	width: 50%;
        }
        
        @media ( max-width: $tablet + px ) {
            width: 100%;
        }

        ul {
            box-shadow: 0 0 250px rgba(0, 0, 0, 0.05);
            background-color: white;
            margin-bottom: 30px;
            border-radius: 30px;   
        }
        
        &--disc {
            ul {
                padding: 40px 10%;
                list-style: disc;
                
                li {
                    &:not(:last-child) {
                        margin-bottom: .5em;
                    }
                }
            }
        }
        
        &--icons {
            
            ul {
                padding: {
                    top: 40px;
                    bottom: 40px;
                }
                
                li {
                    @extend %rel;
                    @extend %flex;
                    @extend %flex-y;
                    min-height: 46px;
                    padding-left: 150px;
                    padding-right: 20px;
                    
                    @media ( max-width: 1400px ) {
                    	padding-left: 120px;
                    }
                    
                    @media ( max-width: $tablet + px ) {
                    	padding-left: 100px;
                    }
                    
                    &:not(:last-child) {
                        margin-bottom: .5em;
                    }
                }
            }            
        }
        
        .o-cols {
            padding: 0 10px;
        }
    }
    
    
    
    &__slider {
        @extend %rel;
        width: 100%;
        
        .gray & {
            padding-top: 80px;
        }
        
        @media ( min-width: 1501px ) {
            width: grid(674);
        }
        
        @media ( max-width: 1500px ) {
            width: 50%;
        }
        
        @media ( max-width: $tablet + px ) {
            width: 100%;
        }
    }
    
    .c-download {
        
        .gray & {
            position: relative;
            z-index: 10;
        }
        
        @media ( min-width: 1500px ) {
            display: flex;
            width: grid(980);
            margin-bottom: 150px;
        }
        
        @media ( max-width: $base + 80px ) {
        	@include responsive-margin-bottom(base(150), rem(50));
        }
        
        @media ( max-width: $tablet + px ) {
        	margin: 0 auto 100px auto;
            max-width: 400px;
        }
        
        @media ( max-width: $tablet_portrait + px ) {
            max-width: 300px;
        }
        
        &__buttons {
            @extend %flex-y;
            
            @media ( min-width: 1500px ) {
                width: auto;
                margin-left: 50px;
            }
            
            @media ( max-width: 1500px ) {
            	margin-top: 20px;
            }
            
            @media ( max-width: $tablet + px ) {
                display: flex;
                justify-content: center;
                max-width: 400px;
                margin-left: 0;
            }
            
            @media ( max-width: $tablet_portrait + px ) {
                width: 300px;
            }
        }
        
/*
        @media ( max-width: $tablet + px ) {
            flex-wrap: wrap;
            width: 400px;
            margin: 0 auto 150px auto;
        }
        
        @media ( max-width: $tablet_portrait + px ) {
        	width: 300px;
        }

        
*/
    }
    
    .swiper-container {
        width: 337px;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        top: 40%;
        width: 29px;
        height: 55px;
        background-repeat: no-repeat;
    }
    
    .swiper-button-next {
        background-image: url(../img/icons/arrow-right.png);
        right: calc( ((100% - 337px) / 2)/2 );
    }
    
    .swiper-button-prev {
        left: calc( ((100% - 337px) / 2)/2 );
        background-image: url(../img/icons/arrow-left.png);
    }
    
    .swiper-slide {
        img {
            .gray & {
                margin: 0 auto;
            }
        }
    }
}