@charset "UTF-8";

/* CSS Document */

* {
  margin: 0px;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  padding: 0;
}

:root {
  --banner-width: 728px;
  --banner-height: 90px;
}

a img,
a {
  border: none;
  outline: none;
}

/*~~~~~~~~~~~~~~~~
~~~~~~~~~~~
        SECTION 1
            ~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~*/

#container {
  width: var(--banner-width);
  height: var(--banner-height);
  border: 1px solid #000000;
  /* margin: auto; */
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

#section1 {
  width: var(--banner-width);
  height: var(--banner-height);
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
}

#copy1,
#copy2,
#cta,
#bg,
#logo{
  background-size: 100% 100%;
  width: var(--banner-width);
  height: var(--banner-height);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#bg {
  background: url("../images/bg.png") no-repeat;
  background-size: 100% 100%;
  opacity: 1;
}

#logo {
  background: url("../images/logo.png") no-repeat;
  background-size: 100% 100%;
  animation: showdelay .8s forwards ease-in-out;
}

#copy1 {
  background: url("../images/copy1.png") no-repeat;
  background-size: 100% 100%;
  animation: showdelay .8s forwards ease-in-out;
  animation-delay: 0.8s;
}

#copy2 {
  background: url("../images/copy2.png") no-repeat;
  background-size: 100% 100%;
  animation: showdelay .5s forwards ease-in-out;
  animation-delay: 3s;
}

#cta {
  background: url("../images/cta.png") no-repeat;
  background-size: 100% 100%;
  animation: showdelay .5s forwards ease-in-out;
  animation-delay: 6s;
}

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

#clickMain {
  width: var(--banner-width);
  height: var(--banner-height);
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 105; /*    display: none;*/
}