/*Your CSS here*/

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

#heart {
    height: 100vh;
}

.heart-wrapper {
    display: block;
    position: relative;
    width: 100%;
    height: 100vh;
    /*text-align: center;*/
}

.heart-container {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.heart {
    /*font-size: 80vh;*/
    width: 40vw;
}

.heart img {
    /*width: 50vw;*/
    max-width: 100%;
}

#element-1 {
    top: 0;
    left: 0;
    position: absolute;
    display: inline-block;
    color: red;
    /*transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;*/
}

#element-2 {
    top: 0;
    left: 0;
    position: absolute;
    display: inline-block;
    color: green;
    /*-webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;*/
}

#element-3 {
    top: 0;
    left: 0;
    position: absolute;
    display: inline-block;
    color: yellow;
    /*-webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;*/
}

#element-4 {
    top: 0;
    left: 0;
    position: absolute;
    display: inline-block;
    color: blue;
    /*-webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;*/
}

.arrow {
    /*position: fixed;*/
    position: absolute;
    margin: auto;
    /*top: 0;*/
    bottom: 0;
    left: 50%;
    margin-left: -20px;
    /*left: 0;
    right: 0;*/
    width: 40px;
    height: 40px;
    font-size: 40px;
    line-height: 40px;
    -webkit-animation: bounce 2s infinite ease-in-out;
}

.arrow a {
    text-decoration: none;
    color: #333;
}

@keyframes bounce {
    0%,
    20%,
    60%,
    100% {
        -webkit-transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-20px);
    }
    80% {
        -webkit-transform: translateY(-10px);
    }
}

@-webkit-keyframes bounce {
    0%,
    20%,
    60%,
    100% {
        -webkit-transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-20px);
    }
    80% {
        -webkit-transform: translateY(-10px);
    }
}

#second {}

.footer {
    position: relative;
    width: 100%;
    height: 10vw;
    background-color: #6a6a6a;
}

.footer .footer-text {
    color: white;
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#ui-to-top {
    -webkit-transition: .3s all ease;
    transition: .3s all ease;
}

.ui-to-top {
    /*display: none;*/
    width: 50px;
    height: 50px;
    font-size: 24px;
    line-height: 46px;
    color: #FFF;
    background: #2196f3;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 2px 3px 8px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 2px 3px 8px 0px rgba(0, 0, 0, 0.3);
    position: fixed;
    right: 15px;
    bottom: 15px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    z-index: 20;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
}

.ui-to-top:hover {
    color: #FFF;
    background: #39a1f4;
    text-decoration: none;
}

.ui-to-top.active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.menu-first {
    background: #01a4ef;
    position: relative;
    display: block;
    width: 50%;
    height: 50vh;
    float: left;
    -webkit-transform: translateX(10%);
    transform: translateX(-90%);
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.menu-first:hover {
    -webkit-transform: none;
    transform: none;
}

.menu-second {
    background: #7fba00;
    position: relative;
    display: block;
    width: 50%;
    height: 50vh;
    float: right;
    -webkit-transform: translateX(10%);
    transform: translateX(90%);
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.menu-second:hover {
    -webkit-transform: none;
    transform: none;
}

.menu-third {
    background: #f25022;
    position: relative;
    display: block;
    width: 50%;
    height: 50vh;
    float: left;
    -webkit-transform: translateX(10%);
    transform: translateX(-90%);
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.menu-third:hover {
    -webkit-transform: none;
    transform: none;
}

.menu-fourth {
    background: #ffb901;
    position: relative;
    display: block;
    width: 50%;
    height: 50vh;
    float: right;
    -webkit-transform: translateX(10%);
    transform: translateX(90%);
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.menu-fourth:hover {
    -webkit-transform: none;
    transform: none;
}

.rotate-left {
    position: relative;
    /*left: 0;*/
    height: 100%;
    display: block;
}

.rotate-left .inner {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.rotate-left .inner span {
    display: block;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotate-right {
    position: relative;
    height: 100%;
    display: block;
}

.rotate-right .inner {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.rotate-right .inner span {
    display: block;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.description {
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding: 0 3vw;
}

.description-text {
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.description-text a {
    display: block;
    text-align: center;
    text-decoration: none;
    margin: 3% 0;
    color: white;
}


/*#heart-red {
    -webkit-animation: bobble 2s infinite;
    animation: bobble 2s infinite;
}

@-webkit-keyframes bobble {
    0% {
        -webkit-transform: translate3d(50px, 40px, 0px);
        transform: translate3d(50px, 40px, 0px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    50% {
        -webkit-transform: translate3d(50px, 50px, 0px);
        transform: translate3d(50px, 50px, 0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translate3d(50px, 40px, 0px);
        transform: translate3d(50px, 40px, 0px);
    }
}

@keyframes bobble {
    0% {
        -webkit-transform: translate3d(50px, 40px, 0px);
        transform: translate3d(50px, 40px, 0px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    50% {
        -webkit-transform: translate3d(50px, 50px, 0px);
        transform: translate3d(50px, 50px, 0px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translate3d(50px, 40px, 0px);
        transform: translate3d(50px, 40px, 0px);
    }
}*/

.animation {
    /*transform-origin: 50px 5px;*/
    -webkit-transition: -webkit-transform 1s ease-in 0s;
    transition: -webkit-transform 1s ease-in 0s;
    transition: transform 1s ease-in 0s;
    transition: transform 1s ease-in 0s, -webkit-transform 1s ease-in 0s;
    animation-duration: 2.2s;
    animation-name: paragato;
    animation-iteration-count: 2;
    animation-direction: alternate;
    -webkit-animation-duration: 2.2s;
    -webkit-animation-name: paragato;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    /* Chrome, Safari, Opera */
    /*animation-timing-function: ease-in-out;*/
}

@keyframes paragato {
    0% {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }
    100% {
        -webkit-transform: translate3d(0px, 60px, 0px);
        transform: translate3d(0px, 60px, 0px);
    }
}

@-webkit-keyframes paragato {
    0% {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }
    100% {
        -webkit-transform: translate3d(0px, 60px, 0px);
        transform: translate3d(0px, 60px, 0px);
    }
}


/*==========  Mobile First Method  ==========*/


/* Custom, iPhone Retina */

@media only screen and (min-width: 320px) {}


/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) {}


/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {}


/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) {}


/* Large Devices, Wide Screens / 1200 felett*/

@media only screen and (min-width: 1200px) {}


/*==========  Non-Mobile First Method  ==========*/


/* Large Devices, Wide Screens */

@media only screen and (max-width: 1200px) {}


/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {}


/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {}


/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {}


/* Custom, iPhone Retina */

@media only screen and (max-width: 320px) {}