@fontface {
  font-family: circe;
  src: url(../fonts/Circe-Light.ttf);
}

@fontface {
  font-family: warnock;
  src: url(../fonts/WarnockPro.ttf);
}

body {
  margin: 0;
}

h1, h2 {
  font-family: warnock;
}

nav {
  /* height: 11vw;
  background-image: url(https://s3-ap-southeast-1.amazonaws.com/buromy-ads-specs-template/AD+Specification/adspec-header.png);
  background-size: cover; */
  height: 8vw;
  width: 100%;
  font-family: circe;
  text-align: center;
}

.nav-link {
  width: 16%;
  height: 100%;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  vertical-align: top;
}

.nav-link > a > img {
  width: 40%;
  vertical-align: middle;
}

nav > div > a {
  line-height: 8vw;
  color: black;
  /* text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
     -1px 1px 0 #000,
      1px 1px 0 #000;
  background-color: black; */
}

nav > div > a:link, nav > div > a:visited {
  color: black;
  text-decoration: none;
}

.adspec-header {
  margin-left: 9vw;
}

 /* Desktop start */

 .important-text {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 5vw;
   font-family: circe;
 }

 .add-information {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 5vw;
   font-family: circe;
 }

 .bold {
   font-weight: bold;
 }

.ad-container-desktop {
  margin-bottom: 5vw;
}

.ad-container-mobile {
  margin-bottom: 5vw;
}

.ad-spec-image-1 {
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
  position:relative;
}

.ad-spec-image-1 > img {
  width: 100%;
  display: block;
  outline: 1px solid black;
}

.top-leaderboard {
  width: 69.5%;
  height: 6.6%;
  position: absolute;
  top: 3.35vw;
  left: 50%;
  transform: translate(-50%, -50%);
}

.leaderboard-overlay {
  margin-top: -0.2%;
  left: 50%;
  transform: translate(-50%, 0%);
  opacity: 0;
  top: 0;
  width: 50%;
  height: 100%;
  transition: .5s ease;
  background-color: rgba(152, 244, 66, 0.5);
  position: absolute;
  text-align: center;
}

.leaderboard-overlay > img {
  margin-top: 1vw;
}

.leaderboard-overlay-2 {
  margin-top: -0.2%;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  top: 0;
  width: 99.2%;
  height: 100%;
  transition: .5s ease;
  background-color: rgba(54, 128, 247, 0.5);
}

.ad-container-desktop p {
  margin: 0;
  text-shadow :
  -1px -1px 0 #000,
   1px -1px 0 #000,
   -1px 1px 0 #000,
    1px 1px 0 #000;
  width: 100%;
  color: white;
  font-size: 0.8vw;
  position: absolute;
  font-family: circe;
}

.overlay > img {
  width: 3vw;
}

.top-leaderboard:hover .overlay {
  opacity: 1;
}

.halfpage-1:hover .overlay {
  opacity: 1;
}

.halfpage-2:hover .overlay {
  opacity: 1;
}

.halfpage-1:hover .halfpage-slideout {
  width: 38.8vw;
  opacity: 1;
}

.side-skinner-1:hover .overlay {
  opacity: 1;
}

.side-skinner-2:hover .overlay {
  opacity: 1;
}

.full-width-banner:hover .overlay {
  opacity: 1;
}

.top-leaderboard-mobile:hover .overlay {
  opacity: 1;
}

.halfpage-mobile:hover .overlay {
  opacity: 1;
}

.halfpage-1 {
  position: absolute;
  left: 59.4%;
  top: 10.6%;
  width: 11.4vw;
  height: 22.7vw;
}

.halfpage-slideout {
  position: absolute;
  opacity: 0;
  right: 0;
  top: 0;
  width: 12.3vw;
  height: 22.7vw;
  transition: .5s ease;
  background-color: rgba(54, 128, 247, 0.5);
}

.halfpage-slideout > img {
  left: 50%;
  top: 50%;
  width: 3vw;
  transform: translate(-50%, -50%);
  position: absolute;
}

.slideout-text {
  top: 60%;
  position: absolute;
  width: 100%;
  text-align: center;
}

.halfpage-2 {
  position: absolute;
  left: 59.4%;
  top: 34.4%;
  width: 11.4vw;
  height: 22.7vw;
}

.halfpage-overlay {
  opacity: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  background-color: rgba(152, 244, 66, 0.5);
  text-align: center;
}

.halfpage-overlay > img {
  margin-top: 8vw;
}

.side-skinner-1 {
  position: absolute;
  top: 10.6%;
  width: 18.2vw;
  height: 40.8vw;
  left: 2.4%;
}

.side-overlay-1 {
  background-color: rgba(54, 128, 247, 0.5);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: .5s ease;
}

.side-overlay-2 {
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0;
  height: 70%;
  width: 45%;
  transition: .5s ease;
  background-color: rgba(152, 244, 66, 0.5);
  text-align: center;
}

.side-overlay-2 > img {
  margin-top: 10vw;
}

.side-skinner-2 {
  position: absolute;
  top: 10.6%;
  right: 2.45%;
  width: 18.2vw;
  height: 40.8vw;
}

.side-overlay-3 {
  background-color: rgba(54, 128, 247, 0.5);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: .5s ease;
}

.text-7 {
  text-align: right;
  clear: right;
  top: 3.5vw;
}

.side-overlay-3 > img {
  float: right;
}

.side-overlay-4 {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  height: 70%;
  width: 45%;
  transition: .5s ease;
  background-color: rgba(152, 244, 66, 0.5);
  text-align: center;
}

.side-overlay-4 > img {
  margin-top: 10vw;
}

.full-width-banner {
  position: absolute;
  top: 77%;
  left: 26.45%;
  width: 35.85vw;
  height: 6.1vw;
}

.full-width-overlay {
  background-color: rgba(152, 244, 66, 0.5);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: .5s ease;
  text-align: center;
}

.full-width-overlay > img {
  margin-top: 1vw;
}

/* Desktop end */


/* Mobile start */

.ad-container-mobile p {
  margin: 0;
  text-shadow :
  -1px -1px 0 #000,
   1px -1px 0 #000,
   -1px 1px 0 #000,
    1px 1px 0 #000;
  width: 100%;
  color: white;
  font-size: 0.8vw;
  position: absolute;
  font-family: circe;
}

.ad-spec-image-2 {
  margin-right: auto;
  margin-left: auto;
  height: 60vw;
  width: auto;
  text-align: center;
  position: relative;
}

.ad-spec-image-2 > img {
  height: 100%;
  outline: 1px solid black;
}

.top-leaderboard-mobile {
  position: absolute;
  top: 2.35%;
  right: 40.3%;
  height: 9.1vw;
  width: 19.4vw;
}

.mobile-leaderboard-overlay {
  background-color: rgba(54, 128, 247, 0.5);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: .5s ease;
}

.halfpage-mobile {
  position: absolute;
  top: 67%;
  right: 40.8%;
  height: 15.3vw;
  width: 18.4vw;
}

.halfpage-mobile-overlay {
  background-color: rgba(152, 244, 66, 0.5);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: .5s ease;
}

.mobile-leaderboard-overlay > img {
  margin-top: 2vw;
}

.halfpage-mobile-overlay > img {
  margin-top: 4vw;
}


/* Mobile end */

/* Table start */

.adspec-table {
  width: 98vw;
  text-align: center;
  margin-bottom: 5vw;
  font-family: circe;
}

.adspec-table > table {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  position:relative;
}

.adspec-table td {
  border: 1px solid black;
}

.adspec-table-head {
  color: white;
  background-color: black;
  border: 1px solid black;
}

.important-info {
  font-size: 0.7vw;
  color: green;
}

/* Table end */