/*
----------------------------------------------------------------------------------------------------------------------------------------
  RESETS
----------------------------------------------------------------------------------------------------------------------------------------
*/
:root {
  --default: #31323c;
  --grey: #edeeed;
  --darkgrey:#e7e9e8;
  --yellow: #ffed00;
  --bs-btn-hover-bg: #ffed00;
}

/*
----------------------------------------------------------------------------------------------------------------------------------------
  FONTS
----------------------------------------------------------------------------------------------------------------------------------------
*/
/* bitter-300 - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('/assets/fonts/bitter-v28-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/bitter-v28-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* bitter-regular - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/assets/fonts/bitter-v28-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/bitter-v28-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* bitter-500 - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('/assets/fonts/bitter-v28-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/bitter-v28-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* bitter-700 - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/assets/fonts/bitter-v28-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/bitter-v28-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* bitter-300italic - latin */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 300;
  src: local(''),
       url('/assets/fonts/bitter-v28-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/bitter-v28-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* bitter-italic - latin */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('/assets/fonts/bitter-v28-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/bitter-v28-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* bitter-500italic - latin */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 500;
  src: local(''),
       url('/assets/fonts/bitter-v28-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/bitter-v28-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/* barlow-100 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 100;
  src: local(''),
       url('/assets/fonts/barlow-v5-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/barlow-v5-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* barlow-regular - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/assets/fonts/barlow-v5-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/barlow-v5-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* barlow-500 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('/assets/fonts/barlow-v5-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/barlow-v5-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* barlow-600 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/assets/fonts/barlow-v5-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/barlow-v5-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 900;
  src: local(''),
       url('/assets/fonts/barlow-v5-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/barlow-v5-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html {
  scroll-behavior: smooth;
}

main {
  margin-top:70px;
}

li { list-style:none; text-align:left; padding: 0.3rem; }

body {
	font-family: 'Barlow', sans-serif;
	font-size:16px;
	font-size:1.15rem;
	color: #31323c;
}

a, a:hover, a:active, a:visited {
	color:var(--default);
}

.btn, .btn:hover, .btn:active, .btn:visited {
  border: 0;
  border-radius: 0;
  padding: 1.3rem;
  font-weight: 600;
  text-decoration: underline;
  color: var(--default);
  background-color: var(--yellow);
}

input {
    background: none;
    border: none;
	  color:var(--default);
}

/*
----------------------------------------------------------------------------------------------------------------------------------------
  SCROLLBALKEN
----------------------------------------------------------------------------------------------------------------------------------------
*/
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: var(--darkgrey); 
}
::-webkit-scrollbar-thumb {
  background: var(--yellow); 
}
::-webkit-scrollbar-thumb:hover {
  background: var(--grey); 
}


/*
----------------------------------------------------------------------------------------------------------------------------------------
  DEFAULT COLORS
----------------------------------------------------------------------------------------------------------------------------------------
*/

.bg-grey { background-color: var(--grey)!important; }
.bg-darkgrey { background-color: var(--darkgrey)!important; }
.bg-yellow { background-color: var(--yellow)!important; }

.text-grey { color: var(--grey)!important; }
.text-darkgrey { color: var(--darkgrey)!important; }
.text-yellow { color: var(--yellow)!important; }


/* HEADER GRAFIKEN */

.bg-muster {
  background-image: url(/assets/img/design-on-textur-stoff-schwarz.jpg);
}

.bg-fussball {
    background-image: url(/assets/img/design-on-header-branding-fussball.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-vereine {
  background-image: url(/assets/img/design-on-header-vereine-teams.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-unternehmen {
  background-image: url(/assets/img/design-on-header-unternehmen-arbeit.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-produktkennzeichnung {
  background-image: url(/assets/img/design-on-header-produktkennzeichnung.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-textil {
  background-image: url(/assets/img/design-on-header-textildruck-stick.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.bg-geschenke {
  background-image: url(/assets/img/design-on-header-individuelle-geschenke.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.bg-lasergravur {
  background-image: url(/assets/img/design-on-header-lasergravur.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.bg-50 {
  background-position: right;
  background-repeat: no-repeat;
  background-size: contain;
}




@media (max-width: 767px) {
  .bg-fussball, .bg-geschenke, .bg-lasergravur, .bg-produktkennzeichnung, .bg-textil, .bg-unternehmen, .bg-vereine {
    background-image: unset;
  }
}

/* MEHR */


.rounded-bottom-right-1 {
  border-bottom-right-radius: 3rem;
}

.sender {
	margin-left: auto;margin-right: auto;left: 0;right: 0;text-align: center;bottom: -3rem;
}

.bitter {
  font-family: 'Bitter', sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: xx-large;
}

.form-check-label {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.15rem;
  padding-left: 0.4rem;
}
input[type=checkbox] {
    ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    padding: 10px;
    border: 2px solid #000;
    background-color:var(--grey);
  }

  footer a {
    text-decoration: none;
  }
  footer a:hover {
    text-decoration: underline;
  }


  
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: 0;
}

.navbar-toggler span {
   display: block;
   background-color: #444;
   height: 3px;
   width: 25px;
   margin-top: 4px;
   margin-bottom: 4px;
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   position: relative;
   left: 0;
   opacity: 1;
}

.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
   -webkit-transition: transform .35s ease-in-out;
   -moz-transition: transform .35s ease-in-out;
   -o-transition: transform .35s ease-in-out;
   transition: transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
    position: absolute;
    left: 12px;
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    opacity: 0.9;
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
    height: 12px;
    visibility: hidden;
    background-color: transparent;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
    position: absolute;
    left: 12px;
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.9;
}

.navbar-toggler:focus {
  box-shadow: unset;
}

/* FIX */ 

@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1280px;  } 
}