$color1: #493458;
$color2: white;
$color5: #ED4142;
$color3: #DE9092;
$color4: #F8CAB0;
$color5: #2092A9;
    
$photo-width: 80px;
$photo-height: 80px;
$photo-border: $photo-width / 15;
$photo-border-bottom: $photo-border * 3;
$photo-border-radius: 4px;

$tube-width: $photo-width + 10;

body {
    background-color: $color1;
    height: 100%;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.tube-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    height: 100px;
}

.tube {
    position: relative;
    height: 80px;
    width: $tube-width;
    background-color: $color3;
    margin: 0 10px;
    z-index: 999;
    border-bottom: 10px dashed darken($color3, 5%);
    border-radius: 18px 18px 0 0;
    svg {
        display: block;
        margin: auto;
        width: 70%;
    }
}

.photo-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.photo {
    margin: 15px;
    color: lighten($color1, 35%);
    padding-top: 5px;
    position: relative;
    border-radius: $photo-border-radius;
    width: $photo-width;
    height: $photo-height;
    background-color: $color1;
    border: $photo-border solid $color2;
    border-bottom: $photo-border-bottom solid $color2;
    box-shadow: 0px 0px 25px 1px rgba(50, 50, 50, 0.1);
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
    
    &:after, &:before {
        content: "";
        position: absolute;
        transform: rotate(-45deg);
        top: 60%;
        left: 25%;
        width: 80%;
        height: 70%;
        background-color: $color4;
    }
    
    &:after {
        top: 80%;
        left: -20%;
        width: 80%;
        height: 70%;
        background-color: $color3;
    }
    
    /*svg {
        position: absolute;
        top: 130%;
        left:0;
    }*/
    
}

$cont:0;
@for $i from 1 through 9 {
  .photo:nth-child(#{$i}) {
    $rnd: random(300);
    $cont: $rnd + 700;
    animation: photo-fall #{$cont}ms ease-in-out #{$cont}ms infinite;
  }
  
    @if $i <= 3 {
        .tube:nth-child(#{$i}) {
            animation: tube-scale #{$cont}ms ease-in-out #{$cont}ms infinite;
        }
    }
}

.photo-left {
    //transform: rotate(-25deg) scale(0.7);
}

.photo-right {
    //transform: rotate(30deg) scale(0.7);
}

.funnel-wrapper {
    position: relative;
    width: 400px;
    left: calc(50% - 200px);
    height: 320px;
    margin-top: 110px;
    background-color: $color1;
    margin-bottom: 100px;

    .funnel-body {
        position: absolute;
        top: 30px;
        width: 400px;
        border-width: 200px 170px 0;
        border-style: solid;
        border-color: $color3 transparent;
        &:after {
            content: "";
            position: absolute;
            top: -150px;
            color: red;
            left: 10px;
            font-family: 'Lato', sans-serif;
            font-weight:400;
            font-size:80px;
            color: $color3;
        }
    }
    .funnel-head {
        position: absolute;
        top:0;
        left:-30px;
        height: 40px;
        width: 460px;
        background-color: darken($color3, 5%);
        border-radius: 5px;
    }
    
    .funnel-tail {
        position: absolute;
        top:220px;
        left:calc(50% - 30px);
        height: 100px;
        width: 60px;
        background-color: $color3;
        
        &:after, &:before {
            content: "";
            position: absolute;
        }
            
        &:after {
            top: 100px;
            left: 0;
            width: 0;
            height: 0;
            border-top: 30px solid $color3;
            border-right: 60px solid transparent;
        }
        
        &:before {
            top: 110px;
            left: 15px;
            background-color: $color5;
            width: 30px;
            height: 30px;
            border-radius: 0 100% 100% 100%;
            transform: rotate(45deg);
            z-index: -5;
            animation: drop-fall 1000ms ease-in infinite, drop-opacity 1000ms ease-in infinite;
        }
    }
}

.phone-body {
	position: relative;
	height: 300px;
	width: 160px;
    min-width: 160px;
	margin: 100px auto 100px auto;
	border-radius: 23px;
	box-shadow: 0 5px 0px 0 lighten($color1, 25%);
    background-color: $color2;

    &:before, &:after {
        content: "";
        position: relative;
        display: block;
        margin: 0 auto;
    }
    
    &:before {
        top: 16px;
        height: 4px;
        width: 30px;
        background-color: lighten($color1, 25%);
        border-radius: 5px;
    }

    &:after {
        top: 265px;
        border-radius: 50%;
        height: 24px;
        width: 24px;
        border: 2px solid lighten($color1, 25%);
    }
}

.phone-screen {
    position: absolute;
	height: 235px;
	width: 140px;
    background-color: $color4;
    top: 30px;
    left: 10px;
    overflow: hidden;
}

.phone-photos-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-top:5px;
    animation: phone-photos-move 3s ease-in-out infinite;
        
    .photo {
        display: flex;
        flex-flow: column;
        width: 62px;
        height:62px;
        margin: 1px 0;
        padding: 0;
        animation: none;
        transform:scale(1);
        border: 2px solid $color2;
    }
}

@keyframes photo-fall {
	0% { 
        top: -100px;
    }
    100% { 
        top: 230px; 
        transform: rotate(15deg);
    }
}

@keyframes tube-scale {
	50% {
	    height: 90px;
	}
}

@keyframes drop-fall {
	0% { 
        top: 0;
    }
    100% { 
        top: 200px; 
    }
}

@keyframes drop-opacity {
	0% { 
        background-color: $color5;
    }
    85% { 
        background-color: $color5;
    }
    100% { 
        background-color: $color1;
    }
}

@keyframes phone-photos-move {
    50% {
        transform: translateY(-100px);
    }
}