/* style.scss

Main styles for this project.
---------------------------------------- */
/* Settings
---------------------------------------- */
/* Mixins
---------------------------------------- */
/* Animations
---------------------------------------- */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes slideRight {
  from {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  to {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px); } }

@keyframes slideRight {
  from {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  to {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px); } }

@-webkit-keyframes slideLeft {
  from {
    -webkit-transform: translate(0px);
            transform: translate(0px); }
  to {
    -webkit-transform: translatex(-300px);
            transform: translatex(-300px); } }

@keyframes slideLeft {
  from {
    -webkit-transform: translate(0px);
            transform: translate(0px); }
  to {
    -webkit-transform: translatex(-300px);
            transform: translatex(-300px); } }

@-webkit-keyframes slideTop {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  to {
    -webkit-transform: translateY(-250px);
            transform: translateY(-250px); } }

@keyframes slideTop {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  to {
    -webkit-transform: translateY(-250px);
            transform: translateY(-250px); }
		}


		@-webkit-keyframes slideTop2 {
		  from {
		    -webkit-transform: translateY(0px) scale(1,1);
		            transform: translateY(0px) scale(1,1) }
		  to {
		    -webkit-transform: translateY(-50px) scale(0.7,0.7);
		            transform: translateY(-50px) scale(0.7,0.7); }
				}

		@keyframes slideTo2 {
		  from {
		    -webkit-transform: translateY(0px) scale(1,1);
		            transform: translateY(0px) scale(1,1); }
		  to {
		    -webkit-transform: translateY(-50px) scale(0.7,0.7);
		            transform: translateY(-50px) scale(0.7,0.7); }
				}
@-webkit-keyframes imgMove {
  from {
    -webkit-transform: translate(0px 0px);
            transform: translate(0px 0px); }
  to {
    -webkit-transform: translate(0px, 74px);
            transform: translate(0px, 74px); } }

@keyframes imgMove {
  from {
    -webkit-transform: translate(0px 0px);
            transform: translate(0px 0px); }
  to {
    -webkit-transform: translate(0px, 74px);
            transform: translate(0px, 74px); } }

.a-f1 {
  -webkit-animation: 0.5s ease-in 1s forwards 1 fadeIn, 0.5s ease-out 3s forwards 1 fadeOut, 0.5s ease-in 7s forwards 1 fadeIn, 0.5s ease-in 7s forwards 1 slideTop2, 0.5s ease-out 11s forwards 1 fadeOut;
  animation: 0.5s ease-in 1s forwards 1 fadeIn, 0.5s ease-out 3s forwards 1 fadeOut, 0.5s ease-in 7s forwards 1 fadeIn, 0.5s ease-in 7s forwards 1 slideTop2, 0.5s ease-out 11s forwards 1 fadeOut; }

.a-pic {
  -webkit-animation: 0.5s ease-in 3.5s forwards 1 fadeIn, 1s ease-in-out 6s forwards 1 imgMove;
  animation: 0.5s ease-in 3.5s forwards 1 fadeIn, 1s ease-in-out 6s forwards 1 imgMove; }

.a-cta {
  -webkit-animation: 0.5s ease-in 11s forwards 1 fadeIn;
  animation: 0.5s ease-in 11s forwards 1 fadeIn; }

/* Utils
---------------------------------------- */
/* Base
---------------------------------------- */
body {
  width: 300px;
  height: 250px;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer; }

* {
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-animation-fill-mode: forwards !important;
          animation-fill-mode: forwards !important; }

.l-banner-wrap {
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
  overflow: hidden;
  background-color: #9e1d2c; }

/* Components
---------------------------------------- */
.c-bg {
  position: absolute;
  top: 0px;
  left: 0px; }

.c-logo {
  position: absolute;
  top: 4px;
  left: 52px; }

.c-f1 {
  position: absolute;
  top: 104px;
  left: 15px;
  opacity: 0; }

.c-pic {
  position: absolute;
  top: 28px;
  left: 0px;
  opacity: 0; }

.c-cta {
  position: absolute;
  top: 70px;
  left: 83px;
  opacity: 0; }

.c-clicktag {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999;
  cursor: pointer; }