/* Import czcionki */
@font-face {
  font-family: Nexa-Heavy;
  src: url("Upload/Libraries/Nexa-Heavy.ttf")
}

/* Animacja otwierania menu */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Główny styl i tło
#2C3E50 gray
#E74C3C red
#ECF0F1 brudny bialy
#A8C545 olive
#2980B9 blue
#FEA13B yellow
#E2DFD0 kremowy

tlorgba(236,240,241,1)*/

.bodyGlowne{
  font-family: 'Tahoma', sans-serif;
  color: #2C3E50;
  text-align: center;
  background: #E2DFD0;
  background: linear-gradient(50deg, rgba(226,223,208,1) 36%, rgba(236,240,241,1) 58%, rgba(226,223,208,1) 74%);
}

/* Nagłówek strony tytułowej */
.divNaglowek{
  background: 
  linear-gradient(32deg, rgba(226,223,208,0.2) 1%,
   rgba(226,223,208,1) 29%,
    rgba(226,223,208,1) 74%,
     rgba(226,223,208,0.1) 97%),
      url("Upload/Libraries/naglowek.png");
  border-top: 30px solid #2C3E50;
  border-bottom: 20px solid #2C3E50;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-areas:
  'o o o o o A z z z z z z'
  'o o o o o A B C F F F F'
  'o o o o o A D D D D D f';
}
.a{
  grid-area: A;
  text-align: right;
}
.b{
  grid-area: B;
  text-align: left;
  font-family: 'Nexa-Heavy';
}
.c{
  grid-area: C;
  text-align: left;
  font-family: 'Nexa-Heavy';
  margin: auto;
  padding-left: 0px
}
.d{
  grid-area: D;
  text-align: left;
  font-size: 22px;
  font-family: 'Arial Black';
  color: #2C3E50
}

.hM93{
  text-align: left;
  font-family: 'Nexa-Heavy';
  font-size: 70px;
}

/* Guziki główne, na górnym pasku */
.btn-dark:active, .btn:active, .guzik:active{
  color: #ffffff !important;
  background-color: #ffffff !important;
}

.guzikMenuGorne{
  font-size: 26px;
  font-family: 'Arial Black';
  margin: 2px;
  color: #ECF0F1;
  background-color:#2C3E50;
  min-width: 380px;
  border-radius: 0px;
}
.g1, .g2,.g3,.g4 {width: 20vw;}

.guzikSubMenu{
  justify-self: center;
  font-size: 22px;
  font-family: 'Arial Black';
  margin: 6px;
  color: #ECF0F1;
  background-color: #E74C3C;
  width: 400px;
  height: 80px;
  border-radius: 0px;
  border: 0px;
}


.b1{grid-area: B1;}
.b2{grid-area: B2;}
.b3{grid-area: B3;}
.b4{grid-area: B4;}
.d1, .d2, .d3, .d4 {grid-area: RR;}
.divMenuGorne{
  justify-content: center;
  display: grid;
  grid-template-areas: "B1  B2  B3  B4"
                       "RR  RR  RR  RR";
}

.ramka{
  animation: fadeIn 0.5s ease-out forwards;
  justify-content: center;
  display: none;
}

.divProjekty{
  position: relative;
  animation: fadeIn 0.5s ease-out forwards;
  justify-content: center;
  display: none;
  width: 60vw;
  left: 20vw;
}

.logo{width: 160px;}

.qr{width: 60px;}

.stopka{color: #2C3E50; background: #E2DFD0;}

.info{
  z-index: 5 !important;
  position: fixed;
  right: 0;
  bottom: 0;
  margin: 30px;
}
.guzikInfo{
  opacity: 0.5;
  border: 0px;
  border-radius: 0px;
  line-height: 20px;
  font-family: 'Garamond';
  font-size: 80px;
  font-weight: bold;
  height: 80px;
  width: 120px;
  background-color: #A8C545;
  color: white;
}

.divInstruktarz{
  display: grid;
}

.instrukcja{
  font-size: 22px;
}

.guzik2{
  font-size: 30px;
  font-family: 'Arial Black';
  justify-self: center;
  color: #ECF0F1;
  background-color: #FEA13B;
  border: 0px;
  border-radius: 0px;
}

.boczek{
  color: #2C3E50;
  background-color: #ECF0F1;
  font-family: Nexa-Heavy;
}
.boczekLogo{width: 40px;}
.boczekH1{font-size: 32px;}
.boczekP{font-size: 16px;}
.boczekGuzik{
  color: white;
  background-color: #FEA13B;
  border: 0px;
}

.opisMenuGorne{
  font-family: 'Arial Black';
  font-size: 18px;
}

.projektPng{
  width: 35vw;
  justify-self: center;
}
a{
  color: #2980B9;
  font-weight: bold;
}
.gray{color:#2C3E50; font-weight: bold;}
.red{color:#E74C3C; font-weight: bold;}
.white{color:#ECF0F1; font-weight: bold;}
.green{color:#A8C545; font-weight: bold;}
.blue{color:#2980B9; font-weight: bold;}
.orange{color:#FEA13B; font-weight: bold;}
.kremowy{color:#E2DFD0; font-weight: bold;}

.guzikSubMenuInfo{background-color: #A8C545;}
.footP{
    margin: auto;
    width: 65%;
}
/* HD Ready/Laptopy */

@media (max-width: 1380px){

.guzikMenuGorne{
  font-size: 24px;
  font-family: 'Arial Black';
  margin: 2px;
  color: #ECF0F1;
  background-color:#2C3E50;
  min-width: 270px
}
.g1,.g2,.g3,.g4 {width: 20vw;}

}
.footP{
    margin: auto;
    width: 75%;
}



/* Smartfony */

@media (max-width: 768px) {
  @font-face {
    font-family: 'ArialBlack';
    src: url("Upload/Libraries/ArialBlack.ttf");
  }
  .guzikMenuGorne, .opisMenuGorne, .guzik2, .guzikSubMenu {
    font-family: 'ArialBlack';
  }

  .divNaglowek {
    background: 
    linear-gradient(32deg, rgba(226,223,208,0.2) 1%,
     rgba(226,223,208,1) 29%,
      rgba(226,223,208,1) 74%,
       rgba(226,223,208,0.1) 97%),
        url("Upload/Libraries/naglowekMobile.png");
    display: grid;
    grid-template-areas:
      'A B'
      'C C'
      'D D';
      border-top: 22px solid #2C3E50;
      border-bottom: 15px solid #2C3E50;
  }

  .a, .b, .c, .d {
    text-align: center;
  }
  .strona {
    font-size: 30px;
  }
  .c, h2{
    font-size: 24px;
    line-height: 100%;
  }
    .divMenuGorne {
      justify-self: center;
      text-align: center;
        grid-template-areas:'B1'
                            'R1'
                            'R4'
                            'R2'
                            'B4'
                            'B2'
                            'R3'
                            'B3';
    }
    .b1m { grid-area: B1; }
        .r1 { grid-area: R1; }
    .b2m { grid-area: B2; }
        .r2 { grid-area: R2; }
    .b3m { grid-area: B3; }
        .r3 { grid-area: R3; }
    .b4m { grid-area: B4; }
       .r4 { grid-area: R4; }

  .guzikMenuGorne{

    justify-self: center;
    font-size: 20px;
    width: 300px;
    height: 80px;
  }

  .guzikSubMenu{
    justify-self: center;
    font-size: 18px;
    width: 280px;
    height: 80px;
  }

  .logo{width: 60px}
  .qr{width: 60px}
  .hM93{
    font-size: 48px;
    line-height: 100%;
    }
  .c{font-size: 12px;}
  .d{
    font-size: 10px;
    line-height: 100%; 
  }
  .logoBoczek{width: 20px;}
  .boczekH1{font-size: 22px;}
  .boczekP{font-size: 14px;}
  .opisMenuGorne{font-size: 14px}
  .instrukcja{
    font-size: medium;
  }
  .info{
    position: fixed;
    right: 0;
    bottom: 0;
    margin: 25px;
  }
  .guzikInfo{
    opacity: 0.5;
    border: 0px;
    border-radius: 0px;
    line-height: 5px;
    font-family: 'Garamond';
    font-size: 80px;
    font-weight: bold;
    height: 80px;
    width: 80px;
    background-color: #A8C545;
    color: white;
  }
  .projektPng{
    width: 70vw;
    justify-self: center;
  }
  .divProjekty{
    width: unset;
    left: unset;
  }
  .wideo{
    width: 70vw;
    height: 38vw;
  }
  .footP{
    margin: auto;
    width: 85%;
    }
    .guzik2{
        font-size: 36px;
    }
    .redder{
        font-size: 20px;
    }
}