/* GRELHA DE BAIXO COM A MESMA DISTANCIA SEMPRE E DEVICE HEIGHT*/

/*
Notas:
O sinal de registado é para estar depois do logo?
*/

/*fonts load*/

@font-face {
  font-family: 'mazzardh_bold';
  src: url('mazzardh-bold-webfont.woff2') format('woff2'),
        url('mazzardh-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'mazzardh_semibold';
  src: url('mazzardh-semibold-webfont.woff2') format('woff2'),
        url('mazzardh-semibold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'mazzardh_black';
  src: url('mazzardh-black-webfont.woff2') format('woff2'),
        url('mazzardh-black-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal
}



 /* Debug */
.item1,
.item2,
.item3,
.item4{
  background-color: gry;
}

.item1 p,
.item2 p,
.item3 p,
.item4 p{
  background-color: darkgry;
}




/*Global*/
body {
  background: #010101;
  color: #ffffff;
  display: inline;
  align-items: center;
  justify-content: center;
  text-align: center;
  /*ONLINE DEBUG ARIAL*/font-family: mazzardh_semibold, Arial, Helvetica neue, roboto;
  }

.gap-default{
  display: block;
  height:50px;
  margin-top: 10%;
  /*ONLINE DEBUG*/ background-color: gry;
  /*ONLINE DEBUG*/ opacity: 15%;
}

.bg-img-src{
  /*ONLINE DEBUG*/ background-image: url('assets/images/bgImg01.jpg');
}
.bg-image,
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: 50% 50%;
  z-index: -1;
}

.bg-image > div,
.bg-video > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: 30% 30%;
}







/*Logo*/

.main-logo{
  margin-top: 15%;
  width: 100%;
}

.megafone{
 display: inline-block;
 /*ONLINE DEBUG ARIAL*/ font-family:'mazzardh_bold';
 font-size: 46.5px;
 vertical-align: middle;
}

.temp{
  margin-top: 0;
  margin-left: 0;
  font-size: 10pt;
}



.dotSmallLeft{
 height: 24px;
 width: 24px;
 background-color: #fff;
 border-radius: 50%;
 margin-right: 7.2px;
 vertical-align: middle;
 display: inline-block;
}


.dotSmallRight{
  height: 32px;
  width: 32px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 17.8px;
  vertical-align: middle;
  display: inline-block;
 }

.dotBig{
 height: 46.5px;
 width: 46.5px;
 background-color: #fff;
 border-radius: 50%;
 margin-right: 7.2px;
 vertical-align: middle;
 display: inline-block;
}










/*Grid setup*/

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto ;
  margin-top: 5%;
  margin-right: 15%;
  margin-left: 20%;
  row-gap: 15%;
  column-gap: 10%;
}



.item1 p,
  .item2 p,
  .item3 p,
  .item4 p{
    line-height: 20px;
    font-size: 10pt; 
  }

.item1 {
  text-align: left;
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
}

.item2 {
  text-align: left;
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
}

.item3 {
  text-align: left;
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 3;
  grid-column-end: 4;
}

.item4 {
  text-align: left;
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 4;
  grid-column-end: 5;
}


 

 /* Device Sizes */




  /* Extra small devices (phones, 600px and down) */
  @media only screen and (max-width: 600px) {
    .main-logo{
      margin-top: 25%;
      width: 100%;
    }
    .gap-default{
      display: block;
      height:50px;
      margin-top: 0;
    }
  
    .grid-container {
      display: grid;
      grid-template-columns: auto auto;
      margin-top: 15%;
      margin-right: 2%;
      margin-left: 5%;
      row-gap: 5%;
      column-gap: 10%;
    }
  
    .item1 p,
    .item2 p,
    .item3 p,
    .item4 p{
      line-height: 15px;
      font-size: 8pt; 
    }
  
  
    .megafone{
      font-size: 37.2px;
     }
    .dotSmallLeft{
    height: 19.2px;
    width: 19.2px;
    margin-right: 5.7px;
    }
    .dotSmallRight{
      height: 25.6px;
      width: 25.6px;
      margin-right: 14.2px;
    }
    .dotBig{
    height: 37.2px;
    width: 37.2px;
    margin-right: 5.7px;
    }
  
    item1 {
      grid-row-start: 1;
      grid-row-end: 2;
      grid-column-start: 1;
      grid-column-end: 2;
    }
    
    .item2 {
      grid-row-start: 1;
      grid-row-end: 2;
      grid-column-start: 2;
      grid-column-end: 3;
    }
    
    .item3 {
      grid-row-start: 2;
      grid-row-end: 3;
      grid-column-start: 1;
      grid-column-end: 2;
    }
    
    .item4 {
      grid-row-start: 2;
      grid-row-end: 3;
      grid-column-start: 2;
      grid-column-end: 3;
    }
    /*
    .item1 {
      grid-row-start: 1;
      grid-row-end: 2;
      grid-column-start: 1;
      grid-column-end: 2;
    }
    
    .item2 {
      grid-row-start: 2;
      grid-row-end: 3;
      grid-column-start: 1;
      grid-column-end: 2;
    }
    
    .item3 {
      grid-row-start: 3;
      grid-row-end: 4;
      grid-column-start: 1;
      grid-column-end: 2;
    }
    
    .item4 {
      grid-row-start: 4;
      grid-row-end: 5;
      grid-column-start: 1;
      grid-column-end: 2;
    } */
   }
  


 /* extra extra small width && extra small height (iphone 5s)*/
@media only screen and (max-width: 600px) and (max-height: 600px) {
  .main-logo{
    margin-top: 0;
    width: 100%;
  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 0;
  }
}

/* extra extra small width && extra small height (iphone 5s)*/
@media only screen and (max-width: 600px) and (max-height: 600px) {
  .main-logo{
    margin-top: 50%;
    width: 100%;
  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 0;
  }
}


/* extra extra small width && small height (iphone 5 6)*/
 @media only screen and (max-width: 600px) and (min-height: 600px) {
  .main-logo{
    margin-top: 50%;
    width: 100%;
  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 5%;
  }
}

/* extra extra  small width && small height (iphone7s and above)*/
 @media only screen and (max-width: 600px) and (min-height: 700px) {
  .main-logo{
    margin-top: 25%;
    width: 100%;
  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 15%;
  }
}

 /* Extra small devices ( phones, 600px and down)
 @media only screen and (min-width: 600px) and (max-height: 500px) {
  .main-logo{
    margin-top: 15%;
    width: 100%;
  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 0;
  }
  .grid-container {

    margin-top: 15%;

  }
}

 */



 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
  .main-logo{
    margin-top: 15%;
    width: 100%;
  }

  .gap-default{
    display: block;
    height:50px;
    margin-top: 10%;
  }

  .grid-container {
    display: grid;
    grid-template-columns: auto auto;
    margin-top: 0;
    margin-right: 10%;
    margin-left: 25%;
    row-gap: 15%;
    column-gap: 7%;
  }

  .debug2{
    display: inline-block;
  }
  
  .item1 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  
  .item2 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
  }
  
  .item3 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  
  .item4 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
  }
 }



 /*small width && extra small height (landscape phone)*/
 @media only screen and (min-width: 600px) and (max-height: 450px) {
  .main-logo{
    margin-top: 2%;
    width: 100%;
  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 0;
  }
}

/*small width && extra small height (portrait tablet)*/
 @media only screen and (min-width: 600px) and (min-height: 450px) {
  .main-logo{
    margin-top: 15%;
    width: 100%;
  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 5%;
  }
}







 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
  .main-logo{
    margin-top: 15%;
    width: 100%;
  }

  .gap-default{
    display: block;
    height:50px;
    margin-top: 10%;
  }

  .grid-container {
    display: grid;
    grid-template-columns: auto auto;
    margin-top: 5%;
    margin-right: 15%;
    margin-left: 25%;
    row-gap: 15%;
    column-gap: 10%;
  }

  .debug3{
    display: inline-block;
  }
  
  .item1 {
    
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  
  .item2 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
  }
  
  .item3 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  
  .item4 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
  }
 }


/*medium width && small height (landscape tablets)*/
@media only screen and (min-width: 768px) and (max-height: 550px) {
  .main-logo{
    margin-top: 5%;
    width: 100%;
  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 0;
  }
}

/*medium width && medium height (strange square)*/
 @media only screen and (min-width: 768px) and (min-height: 550px) {
  .main-logo{
    margin-top: 10%;
    width: 100%;
  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 10%;
  }
}






 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
  .main-logo{
    margin-top: 15%;
    width: 100%;
  }

  .gap-default{
    display: block;
    height:50px;
    margin-top: 10%;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 22% 34% 23% 20%;
    margin-top: 7%;
    margin-right: 15%;
    margin-left: 20%;
    row-gap: 15%;
    column-gap: 0;
  }

  .debug4{
    display: inline-block;
  }
  
  .item1 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
    max-width: 250px;
  }
  
  .item2 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    max-width: 250px;
  }
  
  .item3 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 4;
    max-width: 250px;
  }
  
  .item4 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 4;
    grid-column-end: 5;
    max-width: 250spx;
  }

  .item1 p,
  .item2 p,
  .item3 p,
  .item4 p{
    line-height: 20px;
  }
 } 

/*large width && medium height (laptops / desktops)*/
@media only screen and (min-width: 992px) and (max-height: 700px) {
  .main-logo{
    margin-top: 10%;
    width: 100%;
  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 10%;
  }
}

/*large width && large height (laptops / desktops)*/
 @media only screen and (min-width: 992px) and (min-height: 700px) {
  .main-logo{
    margin-top: 15%;
    width: 100%;
  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 10%;
  }
}






 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
  .main-logo{
    margin-top: 15%;
    width: 100%;
  }

  .gap-default{
    display: block;
    height:50px;
    margin-top: 10%;
  }

  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    margin-top: 1%;
    margin-right: 17%;
    margin-left: 25%;
    row-gap: 15%;
    column-gap: 20px;
  }

  .debug5{
    display: inline-block;
  }
  
  .item1 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
    max-width: 300px;
  }
  
  .item2 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    max-width: 300px;
  }
  
  .item3 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 4;
    max-width: 300px;
  }
  
  .item4 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 4;
    grid-column-end: 5;
    max-width: 300px;
  }

  .item1 p,
  .item2 p,
  .item3 p,
  .item4 p{
    line-height: 20px;
  }
 } 


  /* Extra extra large devices (large laptops and desktops, 2000px and up) */
  @media only screen and (min-width: 2000px) {
    .main-logo{
      margin-top: 15%;
      width: 100%;
    }
  
    .gap-default{
      display: block;
      height:50px;
      margin-top: 10%;
    }
  
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      margin-top: 1%;
      margin-right: 17%;
      margin-left: 25%;
      row-gap: 15%;
      column-gap: 20px;
    }
  
    .debug5{
      display: inline-block;
    }
    
    .item1 {
      grid-row-start: 1;
      grid-row-end: 2;
      grid-column-start: 1;
      grid-column-end: 2;
      max-width: 300px;
    }
    
    .item2 {
      grid-row-start: 1;
      grid-row-end: 2;
      grid-column-start: 2;
      grid-column-end: 3;
      max-width: 300px;
    }
    
    .item3 {
      grid-row-start: 1;
      grid-row-end: 2;
      grid-column-start: 3;
      grid-column-end: 4;
      max-width: 300px;
    }
    
    .item4 {
      grid-row-start: 1;
      grid-row-end: 2;
      grid-column-start: 4;
      grid-column-end: 5;
      max-width: 300px;
    }
  
    .item1 p,
    .item2 p,
    .item3 p,
    .item4 p{
      line-height: 20px;
    }
   } 


/*extra large width && medium height (large laptops / desktops)*/
@media only screen and (min-width: 1200px) and (max-height: 800px) {
  .main-logo{
    margin-top: 15%;
    width: 100%;

  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 10%;
  }
}

/*extra large width && large height (large laptops / desktops)*/
 @media only screen and (min-width: 1200px) and (min-height: 800px) {
  .main-logo{
    margin-top: 25%;
    width: 100%;
  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 10%;
  }
}

/*extra large width && large height (large laptops / desktops hp Ruas)*/
@media only screen and (min-width: 1800px){
  .main-logo{
    margin-top: 20%;
    width: 100%;
  }
  .gap-default{
    display: block;
    height:50px;
    margin-top: 10%;
  }
}





























/*perfect ratio size (factor 0.711 1440/1024 && 1298/923

 @media only screen and (min-width: 1440px) and (min-height: 1024px){
  .main-logo{
    margin-top: 25%;
    width: 100%;
    background-color: yellow;
  }

  .gap-default{
    display: block;
    height:50px;
    margin-top: 10%;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 22% 34% 23% 20%;
    margin-top: 9%;
    margin-right: 19%;
    margin-left: 23%;
    row-gap: 15%;
    column-gap: 0;
  }

  .debug4{
    display: inline-block;
  }
  
  .item1 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
    max-width: 300px;
  }
  
  .item2 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    max-width: 300px;
  }
  
  .item3 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 4;
    max-width: 300px;
  }
  
  .item4 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 4;
    grid-column-end: 5;
    max-width: 300px;
  }

  .item1 p,
  .item2 p,
  .item3 p,
  .item4 p{
    line-height: 20px;
  }
 }

 */


 /*
@keyframes scale {
   from { transform : scale(0.44) }
   10%   { transform : scale(0.44) }
   20%   { transform : scale(0.44) }
   30%   { transform : scale(0.44) }
   40%   { transform : scale(0.44) }
   50%   { transform : scale(0.44) }
   55%   { transform : scale(0.44) }
   65%   { transform : scale(0.48) }
   75%   { transform : scale(0.44) }
   to   { transform : scale(0.44) }
}
*/

@keyframes scale {
  from { transform : scale(0.92) }
  10%   { transform : scale(0.92) }
  20%   { transform : scale(0.92) }
  30%   { transform : scale(0.92) }
  40%   { transform : scale(0.92) }
  50%   { transform : scale(0.92) }
  51%   { transform : scale(0.92) }
  62%   { transform : scale(1) }
  72%   { transform : scale(0.92) }
  to   { transform : scale(0.92) }
}

@keyframes jump {
   from { transform : none }
   6.25% { transform : translateY(-60%)}
   12.5% { transform : translateY(0%)}
   18.75% { transform : translateY(60%)}
   25% { transform : translateY(0%)}
   31.25% { transform : translateY(-60%)}
   37.5% { transform : translateY(0%)}
   43.75% { transform: none}
   50%   { transform: none}
   56.25% { transform: none}
   62.5% { transform: none}
   68.75% { transform: none}
   75% { transform: none}
   81.25% { transform: none}
   87.5% { transform: none}
   93.75% { transform: none}
   to{ transform : none }
}

.jump {
 transform-origin: 50% 50%;
 animation: jump 2.1s linear infinite;
}

.scale {
 transform-origin: 50% 50%;
 animation: scale 2.1s linear infinite;
}


.leftCircle { animation-delay: 0s }
.middleCircle { animation-delay: 0.125s }
.rightCircle { animation-delay: 0.25s }

.invisible{
  display: none;
}