.c-cloud {
    @extend %rel;
/*
    background: {
        image: url(../img/review/cloud.png);
        repeat: no-repeat;
        size: 100% 100%;
    }
*/
    padding: 0 120px 0 100px;
    
    @media ( max-width: $design + px ) {
        @include responsive-padding-left(design(100), rem(50));
    	@include responsive-padding-right(design(100), rem(0));
    }
    
    @media ( min-width: $tablet + 1px ) and ( max-width: 1500px ) {
    	width: calc(100% + 80px);
    }
    
    @media ( max-width: $tablet + px ) {
    	
    }
    
    @media ( max-width: $smartphone + px ) {
    	padding: 0;
    }
    
    &__cloud {
        @extend %abs;
        left: -80px; 
        top: -40px;
        width: calc(100% + 160px);
        z-index: -1;
        max-width: none;
        height: calc(100% + 260px);
        
        @media ( min-width: 1501px ) {
        	height: calc(100% + 200px);
        }
        
    }
    
    &__photo {
        width: 280px;
        margin: 0 auto 20px auto;
        
        .gray & {
            position: relative;
            top: -30px;
        }
        
    	@media ( max-width: $design + px ) {
        	@include responsive-width(design(280), rem(200));
        }
    }
    
    blockquote {
        @extend %rel;
        padding: {
            left: 80px;
        }
        
        @media ( max-width: $design + px ) {
        	@include responsive-padding-left(design(80), rem(60));
        }
        
        @media ( max-width: $smartphone + px ) {
            padding-left: 60px;
        }

        p {
            font-style: italic;

            @media ( max-width: $design + px ) {
            	@include responsive-font(design(24), rem(18));
            }
            
            @media ( max-width: $smartphone + px ) {
            	font-size: rem(18);
            }
            
            &.author {
                margin-top: 1.5em;
                font-size: rem(25);
                font-style: normal;
                font-weight: $black;
                
                @media ( max-width: $design + px ) {
                	@include responsive-font(design(25), rem(14));
                }
            }
        }
        
        &:before {
            @extend %abs-pseudo;
            left: -10px; top: 0;
            width: 99px;
            height: 75px;
            background: {
                image: url(../img/assets/quote.png);
                repeat: no-repeat;
                position: right top;
                size: 100% auto;
            }
            
            @media ( max-width: $design + px ) {
            	@include responsive-width(design(80), rem(60));
            }
            
            @media ( max-width: $smartphone + px ) {
                left: 0;
                width: 40px;
            }
        }
    }
}
