/*===========================Farben */
/*
#100236  #effdc9  #363102  #3D08CF
#352863  #cad79c  #635D28  #8665FC
#342A62  #cbd59d  #615B2A  #866BFA
#55518C  #aaae73  #8C8351  #8E8C9F
#63629E  #9c9d61  #9E9462  #AAA9E8
#8AD3EB

red       blue white black #181E23
#F51C00   #0074F5
#F54A7D
#F4385F

Loggo: dunkel #100235
       hell #615E96
       #9A95ED
       #09041b
 */

/*===========================Spruch================================*/
#werbeSpruch {
  background-image: linear-gradient(356deg, #09041b 10%, #281460, #09041b 90%);
  color: #AAA9E8;
  color: white;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#werbeBack {
  width: 100%;
  height: auto;
}

#absolut {
  position: absolute;
  width: 30%;
  margin-top: -50%;
  padding-left: 60%;
}

#spruch {
  width: 100%;
  text-align: center;
  font-family: "Chakra-Bold";
  font-size: 60px;
  transform: rotate(358deg);
}

/*===========================Ueber=================================*/
#ueber {
  background-image: linear-gradient(356deg, #09041b 10%, #281460, #09041b 90%);
  text-align: center;
}

#ueber .grid-4 {
  padding: 20px;
}

#ueberH1 {
  font-size: 40px;
}

/*===========================leistungen============================*/
#leistungenGross {
  background-image: linear-gradient(356deg, #09041b 10%, #281460, #09041b 90%);
  display: block;
}

#leistungenMittel {
  background-image: linear-gradient(356deg, #09041b 10%, #281460, #09041b 90%);
  display: none;
}

#leistungenKlein {
  background-image: linear-gradient(356deg, #09041b 10%, #281460, #09041b 90%);
  display: none;
}

#leistungH1 {
  font-size: 45px;
}

.leistungen h2 {
  text-shadow: 2.5px 2.5px 2.5px black,
               2.5px -2.5px 2.5px black,
               -2.5px 2.5px 2.5px black,
               -2.5px -2.5px 2.5px black;
}

#buildsPresentation {
  background-image: url("./../../pictures/builds/Deep-Main.jpg");
  background-size: cover;
  background-position: center;
}

#moddsPresentation {
  background-image: url("./../../pictures/mods/ModdingDev.jpg");
  background-size: cover;
  background-position: center;
}

#videosPresentation {
  background-image: url("./../../pictures/parts/Parts-SSUPD.jpg");
  background-size: cover;
  background-position: center;
}

#partsPresentation {
  background-image: url("./../../pictures/parts/GPU-SSUPD-Present.jpg");
  background-size: cover;
  background-position: center;
}

#behindPresentation {
  background-image: url("./../../pictures/RR/RR_Mix.png");
  background-size: cover;
  background-position: center;
}

#clothesPresentation {
  background-color: black;
}

.leistungen-presentationd {
  height: 500px;
  transition: all 1s;

}

.leistungen-presentation {
  height: 500px;
  transition: all 1s;

}

.leistungen-presentationd.hovered {
  width: 40%;
}

.leistungen-presentationd.shrink {
  width: 12%;
}

.leistungen-presentation.hovered {
  width: 40%;
}

.leistungen-presentation.shrink {
  width: 12%;
}

.leistungen-presentationd p {
  color: white;
  padding-top: 130px;
  font-size: 30px;
}

.leistungen-presentation p {
  color: white;
  padding-top: 130px;
  font-size: 30px;
}

/*===========================Sponsoren=============================*/
#sponsorenDesk {
  background-image: linear-gradient(356deg, #09041b 10%, #281460, #09041b 90%);
}

#sponsorenMobil {
  background-image: linear-gradient(356deg, #09041b 10%, #281460, #09041b 90%);
  display: none;
}

#sponsorenH1 {
  font-size: 45px;
}

.description {
  padding-left: 10%;
  padding-right: 10%;
  font-size: 30px;
}

.sponsorsPic {
  width: 40%;
  height: auto;
}

.sponsorenAbstand {
  padding-bottom: 60px;
}

/*===========================Kontakt===============================*/
#kontakt {
  background-image: linear-gradient(356deg, #09041b 10%, #281460, #09041b 90%);
}

#kontakt .row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#kontakt p {
  font-size: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

#kontaktH1 {
  font-size: 40px;
}

/*===========================Responsive===============================*/

@media (max-width: 1100px) {
  #leistungenGross  {display: none;}
  #leistungenMittel {display: block;}
  #ueber .row       {display: block;}
  #ueber .grid-4    {width: 100%; padding: 0;}
  #ueber .grid-6    {width: 100%;}
  .t1.hovered       {width: 50%;}
  .t2.hovered       {width: 50%;}
  .t1.shrink        {width: 25%;}
  .t2.shrink        {width: 25%;}
}

@media (max-width: 768px) {
  #ueberH1            {font-size: 35px;}
  #leistungenMittel   {display: none;}
  #leistungenKlein    {display: block;}
  #sponsorenDesk      {display: none;}
  #sponsorenMobil     {display: block;}
  .t1.hovered         {width: 100%;}
  .t2.hovered         {width: 100%;}
  .t1.shrink          {width: 100%;}
  .t2.shrink          {width: 100%;}
}

@media (max-width: 400px) {
  .leistungen-presentation   {height: 300px;}
  .leistungen-presentation p {padding-top: 70px;}
  .sponsorsPic               {padding-top: 20px;}
  .description               {font-size: 20px; padding-top: 20px;}
  .sponsorenAbstand          {padding-bottom: 30px;}
}
