body {margin: 0;padding: 0;}
    
img {cursor: pointer;}

a img {border: none;}

ul {list-style-type: none;margin: 0;padding: 0;}

a:active, a:focus {outline: none;}

#ad {
  background-image: url("assets/bg.jpg");
  cursor: pointer;
  z-index: 1;
}

/*------------right-animation-------------*/

#right-animation {
  position: absolute;
  width: 139px;
  height: 250px;
  top:0px;
  right:0px;
  z-index: 3;
  overflow: hidden;
}
#lifestyle {
  position: absolute;
  top:0px;
  left:0px;
  z-index: 3;
  -webkit-animation: slide-up 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s 1 forwards;
  -moz-animation: slide-up 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s 1 forwards;
  -o-animation: slide-up 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s 1 forwards;
  animation: slide-up 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s 1 forwards;
}
#circle {
  position: absolute;
  top:-122px;
  left:50px;
  z-index: 4;
  -webkit-animation: bounce-in-top 1.1s linear .5s 1 both;
  -moz-animation: bounce-in-top 1.1s linear .5s 1 both;
  -o-animation: bounce-in-top 1.1s linear .5s 1 both;
  animation: bounce-in-top 1.1s linear .5s 1 both;
}
#triangles {
  position: absolute;
  bottom:0px;
  right:0px;
  z-index: 4;
  -webkit-transform:translateY(100%);
  -moz-transform:translateY(100%);
  -o-transform:translateY(100%);
  transform:translateY(100%);
  -webkit-animation: slide-up .3s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.5s 1 forwards;
  -moz-animation: slide-up .3s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.5s 1 forwards;
  -o-animation: slide-up .3s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.5s 1 forwards;
  animation: slide-up .3s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.5s 1 forwards;
}
#purple {
  position: absolute;
  top:7px;
  left:48px;
  z-index: 4;
  opacity: 0;
  -webkit-animation: roll-in-right .5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1s 1 forwards;
  -moz-animation: roll-in-right .5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1s 1 forwards;
  -o-animation: roll-in-right .5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1s 1 forwards;
  animation: roll-in-right .5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1s 1 forwards;
}
#red {
  position: absolute;
  top:42px;
  left:109px;
  z-index: 4;
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  transform:rotate(180deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-animation: rotate-in-left .75s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.75s 1 forwards;
  -moz-animation: rotate-in-left .75s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.75s 1 forwards;
  -o-animation: rotate-in-left .75s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.75s 1 forwards;
  animation: rotate-in-left .75s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.75s 1 forwards;
}

/* --slide-up-- */

@-webkit-keyframes slide-up {0%{transform:translateY(100%);}100%{transform:translateY(0%);}}
@-moz-keyframes slide-up {0%{transform:translateY(100%);}100%{transform:translateY(0%);}}
@-o-keyframes slide-up {0%{transform:translateY(100%);}100%{transform:translateY(0%);}}
@keyframes slide-up {0%{transform:translateY(100%);}100%{transform:translateY(0%);}}

/* --roll-in-right-- */

@-webkit-keyframes roll-in-right {0%{transform:translateX(-50px)rotate(-600deg);opacity:0;}100%{transform:translateX(0px)rotate(0deg);opacity:1;}}
@-moz-keyframes roll-in-right {0%{transform:translateX(-50px)rotate(-600deg);opacity:0;}100%{transform:translateX(0px)rotate(0deg);opacity:1;}}
@-o-keyframes roll-in-right {0%{transform:translateX(-50px)rotate(-600deg);opacity:0;}100%{transform:translateX(0px)rotate(0deg);opacity:1;}}
@keyframes roll-in-right {0%{transform:translateX(-50px)rotate(-600deg);opacity:0;}100%{transform:translateX(0px)rotate(0deg);opacity:1;}}

/* --rotate-in-left-- */

@-webkit-keyframes rotate-in-left {0%{transform-origin:100% 100%;transform:rotate(180deg);}100%{transform:rotate(0deg);}}
@-moz-keyframes rotate-in-left {0%{transform-origin:100% 100%;transform:rotate(180deg);}100%{transform:rotate(0deg);}}
@-o-keyframes rotate-in-left {0%{transform-origin:100% 100%;transform:rotate(180deg);}100%{transform:rotate(0deg);}}
@keyframes rotate-in-left {0%{transform-origin:100% 100%;transform:rotate(180deg);}100%{transform:rotate(0deg);}}


/* --bounce-in-top-- */

@-webkit-keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}

@keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}

/*------------left-animation-------------*/

#left-animation{
  position: absolute;
  z-index: 2;
  width: 300px;
  height: 250px;
  top:0px;
  left:0px;
  overflow: hidden;
}
#square {
  position: absolute;
  top:0px;
  left:0px;
  z-index: 2;
  -webkit-transform:translateY(-100%);
  -moz-transform:translateY(-100%);
  -o-transform:translateY(-100%);
  transform:translateY(-100%);
  -webkit-animation: slide-down 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) .25s 1 forwards;
  -moz-animation: slide-down 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) .25s 1 forwards;
  -o-animation: slide-down 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) .25s 1 forwards;
  animation: slide-down 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) .25s 1 forwards;
}
#squares {
  position: absolute;
  bottom:0px;
  left:0px;
  z-index: 2;
  -webkit-transform:translateY(100%);
  -moz-transform:translateY(100%);
  -o-transform:translateY(100%);
  transform:translateY(100%);
  -webkit-animation: slide-up 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) .25s 1 forwards;
  -moz-animation: slide-up 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) .25s 1 forwards;
  -o-animation: slide-up 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) .25s 1 forwards;
  animation: slide-up 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) .25s 1 forwards;
}
#course {
  position: absolute;
  top:110px;
  left:37px;
  z-index: 3;
  opacity: 0;
  -webkit-animation: slide-down 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2.35s 1 forwards;
  -moz-animation: slide-down 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2.35s 1 forwards;
  -o-animation: slide-down 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2.35s 1 forwards;
  animation: slide-down 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2.35s 1 forwards;
}
#build {
  position: absolute;
  top:87px;
  left:25px;
  z-index: 3;
  opacity: 0;
  -webkit-animation: slide-in-right 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1.25s 1 forwards;
  -moz-animation: slide-in-right 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1.25s 1 forwards;
  -o-animation: slide-in-right 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1.25s 1 forwards;
  animation: slide-in-right 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1.25s 1 forwards;
}
#cta {
  position: absolute;
  top:183px;
  left:17px;
  z-index: 3;
  opacity: 0;
  -webkit-animation: grow-in 1.25s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2.9s 1 forwards;
  -moz-animation: grow-in 1.25s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2.9s 1 forwards;
  -o-animation: grow-in 1.25s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2.9s 1 forwards;
  animation: grow-in 1.25s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2.9s 1 forwards;
}
#logo {
  position: absolute;
  top:37px;
  left:26px;
  z-index: 3;
  -webkit-transform:translateY(-600%);
  -moz-transform:translateY(-600%);
  -o-transform:translateY(-600%);
  transform:translateY(-600%);
  -webkit-animation: slide-down-two 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) .25s 1 forwards;
  -moz-animation: slide-down-two 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) .25s 1 forwards;
  -o-animation: slide-down-two 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) .25s 1 forwards;
  animation: slide-down-two 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) .25s 1 forwards;
}

/* --grow-in-- */

@-webkit-keyframes grow-in {0%{opacity:0;transform:scale(0);}60%{opacity:1;transform:scale(1.1);}100%{opacity:1;transform:scale(1);}}
@-moz-keyframes grow-in {0%{opacity:0;transform:scale(0);}60%{opacity:1;transform:scale(1.1);}100%{opacity:1;transform:scale(1);}}
@-o-keyframes grow-in {0%{opacity:0;transform:scale(0);}60%{opacity:1;transform:scale(1.1);}100%{opacity:1;transform:scale(1);}}
@keyframes grow-in {0%{opacity:0;transform:scale(0);}60%{opacity:1;transform:scale(1.1);}100%{opacity:1;transform:scale(1);}}

/* --slide-in-right-- */

@-webkit-keyframes slide-in-right {0%{opacity:0;transform:translateX(-200px);}40%{opacity:0;}100%{opacity:1;transform:translateX(0px);}}
@-moz-keyframes slide-in-right {0%{opacity:0;transform:translateX(-200px);}40%{opacity:0;}100%{opacity:1;transform:translateX(0px);}}
@-o-keyframes slide-in-right {0%{opacity:0;transform:translateX(-200px);}40%{opacity:0;}100%{opacity:1;transform:translateX(0px);}}
@keyframes slide-in-right {0%{opacity:0;transform:translateX(-200px);}40%{opacity:0;}100%{opacity:1;transform:translateX(0px);}}

/* --slide-down-- */

@-webkit-keyframes slide-down {0%{transform:translateY(-100%);}100%{transform:translateY(0%);opacity:1;}}
@-moz-keyframes slide-down {0%{transform:translateY(-100%);}100%{transform:translateY(0%);opacity:1;}}
@-o-keyframes slide-down {0%{transform:translateY(-100%);}100%{transform:translateY(0%);opacity:1;}}
@keyframes slide-down {0%{transform:translateY(-100%);}100%{transform:translateY(0%);opacity:1;}}

/* --slide-down-two-- */

@-webkit-keyframes slide-down-two {0%{transform:translateY(-600%);}100%{transform:translateY(0%);}}
@-moz-keyframes slide-down-two {0%{transform:translateY(-600%);}100%{transform:translateY(0%);}}
@-o-keyframes slide-down-two {0%{transform:translateY(-600%);}100%{transform:translateY(0%);}}
@keyframes slide-down-two {0%{transform:translateY(-600%);}100%{transform:translateY(0%);}}