/* ==========================================================================
   Author's custom styles
   ========================================================================== */


.main-tools {
    width: 100%;
    max-width: 800px;
}

.main-tools img {
    position: absolute;
    left:0;
    bottom:0;
    width:100%;
}

.main-tools-screen {

}

.main-tools div {
    position: relative;
    float:left;
    animation-name: main-homepage-build;
    animation-iteration-count: once;
    animation-duration: 1000ms;
    animation-fill-mode: both;
}

.main-tools-phone {
    width: 10%;
    height:320px;
}

.main-tools-tablet {
    width: 20%;
    margin:0 1%;
    height:320px;
    animation-delay: 500ms;
}

.main-tools-laptop {
    width: 68%;
    height:320px;
    animation-delay: 1000ms;
}

.main-tools-screen {
    animation-name: screencycle;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-fill-mode: both;
    opacity:0;
}

.share {

}

.main-tools-phone .share {

}

.main-tools-phone .follow {
    animation-delay: 1750ms;
}

.main-tools-phone .related {
    animation-delay: 3750ms;
}

.main-tools-phone .link {
    animation-delay: 5750ms;
}

.main-tools-phone .email {
    animation-delay: 7750ms;
}



.main-tools-tablet .share {
    animation-delay: 250ms;
}

.main-tools-tablet .follow {
    animation-delay: 2000ms;
}

.main-tools-tablet .related {
    animation-delay: 4000ms;
}

.main-tools-tablet .link {
    animation-delay: 6000ms;
}

.main-tools-tablet .email {
    animation-delay: 8000ms;
}


.main-tools-laptop .share {
    animation-delay: 500ms;
}

.main-tools-laptop .follow {
    animation-delay: 2250ms;
}

.main-tools-laptop .related {
    animation-delay: 4250ms;
}

.main-tools-laptop .link {
    animation-delay: 6250ms;
}

.main-tools-laptop .email {
    animation-delay: 8250ms;
}


@keyframes screencycle {
    0%   {transform:translateY(20px); opacity:0;}
    15%   {transform:translateY(20px); opacity:0;}
    20%   {transform:translateY(0px); opacity:1;}
    30%   {transform:translateY(0px); opacity:1;}
    40%  {transform:translateY(-20px); opacity:0;}
    100%  {transform:translateY(-20px); opacity:0;}
}

@keyframes main-homepage-build {
    0%   {transform:translateY(20px); opacity:0;}
    100%  {transform:translateY(0px); opacity:1;}
}

section svg {
    opacity:0;
    transition:.2s;
    width:100%;
    max-width: 600px
}

section svg.active {
    opacity:1;
}

svg.active .homepage-illo-device-background-wrapper {
    animation-name: svg-trans-in;
    animation-duration: 500ms;
    animation-delay: 0;
    animation-fill-mode: backwards;
}

svg.active .homepage-illo-screen-wrapper {
    animation-name: svg-trans-in;
    animation-duration: 500ms;
    animation-delay: 175ms;
    animation-fill-mode: backwards;
}

svg.active .homepage-illo-tool-mockup-wrapper {
    animation-name: svg-move-in;
    animation-duration: 1000ms;
    animation-delay: 500ms;
    animation-fill-mode: backwards;
    animation-timing-function: cubic-bezier(.17,.69,.02,1);

}

svg.active .homepage-illo-dotted-line-2 {
    animation-name: svg-fade-in;
    animation-duration: 500ms;
    animation-delay: 1300ms;
    animation-fill-mode: backwards;
}

svg.active .homepage-illo-text2 {
    animation-name: svg-fade-in;
    animation-duration: 500ms;
    animation-delay: 1500ms;
    animation-fill-mode: backwards;
}


svg.active .homepage-illo-dotted-line-1 {
    animation-name: svg-fade-in;
    animation-duration: 500ms;
    animation-delay: 800ms;
    animation-fill-mode: backwards;
}


svg.active .homepage-illo-text1 {
    animation-name: svg-fade-in;
    animation-duration: 500ms;
    animation-delay: 1000ms;
    animation-fill-mode: backwards;
}



.tool-illustration-wrapper {
    position: relative;
}

.tool-background-img, .tool-foreground-img {
    width:133%;
}

.tool-illustration-wrapper .tool-foreground-img {
    position:absolute;
    left:0;
    top:-20px;
    opacity:0;
    left:-12.5%;
    transition: 500ms;
}

.tool-illustration-wrapper .tool-background-img {
    opacity:0;
    transition: 500ms;
    position:relative;
    top:20px;
    left:-12.5%;
}

.tool-illustration-wrapper.active .tool-foreground-img {
    opacity:1;
    top:0;
    transition-delay: 250ms;
    transition: 2000ms;
}

.tool-illustration-wrapper.active .tool-background-img {
    opacity:1;
    top:10px;
    transition: 1000ms;

}



@media screen and (max-width: 600px) {
    .tool-background-img, .tool-foreground-img {
        width:200%;
    }

    .tool-illustration-wrapper .tool-background-img {
        left:-50%;
    }

    .tool-illustration-wrapper .tool-foreground-img {
        left:-50%;
    }

    .main-tools-phone {
        height:20vh;
    }
    .main-tools-tablet {
        height:20vh;
    }
    .main-tools-laptop {
        height:20vh;
    }

    section svg {
        display: none;
    }
}








@keyframes svg-fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes svg-trans-in {
    from {transform: rotate(10deg) scale(.8) ; opacity: 0;}
    to {transform: rotate(0deg) scale(1); opacity: 1;}
}

@keyframes svg-move-in {
    from {transform: translateX(60px) scale(1.5); opacity: 0; transform-origin: 150% 0%}
    to {transform: translateX(0px) scale(1); opacity: 1; transform-origin: 150% 0%}
}