/* globale Einstellungen */


@font-face{
    font-family: "Roboto";
    src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

html, body{
    margin: 0%;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    font-family:Roboto, Arial, Helvetica, sans-serif;
	font: normal 400 16px/ 25px var(--roboto);
}

a{
	color: var(--primary-color);
    font: normal 400 16px/ 25px var(--roboto);
	text-decoration:none;
}

a:hover{
	color: var(--primary-color);
    font: normal 400 16px/ 25px var(--roboto);
	text-decoration:underline;
}

p{
    color: var(--text-color);
    font: normal 400 16px/ 25px var(--roboto);
	margin-bottom: 5rem;
}

h2, h4{
	display: block;
	margin-top: 3rem;
	margin-bottom: 3rem;
	color: var(--primary-color2);
}

.preis{
	display: block;
	margin-top: 2rem;
	margin-bottom: 0rem;
	font-size:1.5rem;
	font-weight:500;
	color: var(--primary-color2);
}

:root{
    --primary-color: #104973;
    --primary-color2: #666;
    --title-color: #141313;
    --text-color: #666;
    --border-color: #201f1f17;
    --gradient-color: linear-gradient(90deg, #104973 0%, #104973 100%);
    --shadow-color:  0px 10px 30px rgba(118, 85, 225, 0.3);
    --box-shadow: 0px 10px 30px rgba(57, 56, 61, 0.205);
	--top-button:rgba(218,35,55,.8);
	--top-button2:rgba(102,102,102,.8);


    /* font family variables. */
    --roboto: 'Roboto', cursive;
}


/* variable Einstellungen */


/* Kopf Einstellungen */

a.headerlink{
	font: normal 400 14px/20px var(--roboto);
	color:#999;
	text-decoration:none;
	margin-top: 1rem;
}

a.headerlink:hover{
	font: normal 400 14px/20px var(--roboto);
	color:#666;
	text-decoration:none;
	margin-top: 1rem;
}

a.top {
	width:35px;
    height:35px;
	position: fixed;
    bottom: 10px;
    right: 10px;
	display: none;
    z-index:999;
	text-decoration:none;
	background-image: url("../pics/top.png");
	-webkit-transition: all .75s ease-in-out;
    -moz-transition: all .75s ease-in-out;
    -o-transition: all .75s ease-in-out;
    -ms-transition: all .75s ease-in-out;
    transition: all .75s ease-in-out;

}


.farben{
	margin-left: -5px;
	list-style: none;
	list-style-position: outside;
	list-style-image: none;
	list-style-type: none;
}

.farben > li{
	display: inline-block;
	list-style: none;
}

/* Navigation Einstellungen */

.navbar_fixed{
    position: fixed;
    width: 100%;
    top: -1px;
    left: 0; right: 0;
    background: #ffffff;
    box-shadow: var(--box-shadow);
    z-index: 999;
    transition: background 1s ease;
}

.header_area .main-menu .nav-item .nav-link{
    font: normal 400 15px/2px var(--roboto);
    padding-left: 1.7rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
    color: var(--title-color);
}

.header_area .main-menu .navbar-nav .active a{
    background: var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header_area .main-menu .navbar-nav a:hover{
    background: var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
	border: none;
}

.header_area .main-menu .navbar-nav .dropdown-menu{
   background-color:#FFF;
   box-shadow: var(--box-shadow);
   border: none;

 }

.header_area .main-menu .navbar-nav .dropdown-menu .nav-link{
   background-color:#FFF;
 }

.dropdown-menu{
	max-height:80vh;
	overflow:auto;
}


/* Body Einstellungen */

.text-uppercase{
    text-transform: uppercase;
}


/* Artikel Einstellungen */

.container .button-group button{
    background: transparent;
    border: none;
    font: normal 400 16px/50px var(--roboto);
    text-transform: uppercase;
	margin-bottom: 3rem;
}

.container .button-group button + button{
    padding-left: 1rem;
}

.grid .our-project > .title h5{
    font: normal 500 18px/20px var(--roboto);
}

.grid .our-project .img a:hover img{
    filter: brightness(1.1) drop-shadow(1px 8px 30px #b1afaf);
}


/* Buttons Einstellungen */

button:focus,
button:active
button:hover
.btn:active,
.btn.active{
    outline: 0px !important;
    box-shadow: none !important;
}

.button{
    padding: .8rem 2.2rem;
    font: normal 500 16px/20px var(--roboto);
    position: relative;
    border: #FFF 3px solid;
    border-radius: 4px;
}

.primary-button{
    display:block;
	font: normal 500 18px/20px var(--roboto);
	padding-top: 15px;
	padding-bottom: 15px;
	background: #104973;
	border: transparent 3px solid;
    background-clip: padding-box;
	border-radius: 8px;
    color: white;
    transition: background .6s ease;
}

.primary-button:hover{
    display:block;
	font: normal 500 18px/20px var(--roboto);
	padding-top: 15px;
	padding-bottom: 15px;
	background: #666;
	border: transparent 3px solid;
    background-clip: padding-box;
	border-radius: 8px;
	text-decoration: none;
    color: white;
}

.secondary-button{
	display:block;
	font: normal 500 18px/20px var(--roboto);
	padding-top: 15px;
	padding-bottom: 15px;
	background: #FFF;
	border: #666 2px solid;
    background-clip: padding-box;
	border-radius: 8px;
    color: #666;
    transition: background .6s ease;

}

.button.secondary-button:hover{
    display:block;
	font: normal 500 18px/20px var(--roboto);
	padding-top: 15px;
	padding-bottom: 15px;
	background: #666;
	border: #666 2px solid;
    background-clip: padding-box;
	border-radius: 8px;
	text-decoration: none;
    color: white;
}

.delete-button{
    display:block;
	font: normal 500 18px/20px var(--roboto);
	padding-top: 15px;
	padding-bottom: 15px;
	background: #D22323;
	border: transparent 3px solid;
    background-clip: padding-box;
	border-radius: 8px;
    color: white;
    transition: background .6s ease;
}

.delete-button:hover{
    display:block;
	font: normal 500 18px/20px var(--roboto);
	padding-top: 15px;
	padding-bottom: 15px;
	background: #666;
	border: transparent 3px solid;
    background-clip: padding-box;
	border-radius: 8px;
	text-decoration: none;
    color: white;
}


/* Fuss Einstellungen */

.copyrights{
	font: normal 400 12px/20px var(--roboto);
}

a.footerlink{
	font: normal 400 12px/20px var(--roboto);
	color:#666;
	text-decoration:none;
	margin-top: 1rem;
}

a.footerlink:hover{
	font: normal 400 12px/20px var(--roboto);
	color:#666;
	text-decoration:underline;
	margin-top: 1rem;
}

i4_submenulink{
	font: normal 400 12px/20px var(--roboto);
	color:#FFF;
	text-decoration:none;
}

i4_submenulink:hover{
	font: normal 400 12px/20px var(--roboto);
	color:#FFF;
	text-decoration:none;
}


a.footerlink1{
	font: normal 400 16px/20px var(--roboto);
	color:#666;
	text-decoration:none;
	margin-top: 1rem;
}

a.footerlink1:hover{
	font: normal 400 16px/20px var(--roboto);
	color:#666;
	text-decoration:underline;
	margin-top: 1rem;
}

footer.footer-area{
    padding: 2rem 0;
    background: url(../pics/footer-bg.png) no-repeat;
}

a.cart_link{
	display:block !important;
	width: 110px !important;
	height: 33px !important;
	/*background: url(../pics/cart.png) no-repeat !important;*/
	font: normal 400 11px/22px var(--roboto) !important;
	color: #FFF !important;
	padding-left:40px !important;
	padding-top:6px !important;
	text-decoration: none !important;
	margin-left: 25px;
}
a.cart_link:hover{
	display:block !important;
	width: 110px !important;
	height: 33px !important;
	/*background: url(../pics/cart.png) no-repeat !important;*/
	font: normal 400 11px/22px var(--roboto) !important;
	color: #D2E2ED !important;
	padding-left:40px !important;
	padding-top:6px !important;
	text-decoration: none !important;
}
a.cart_link:focus{
	display:block !important;
	width: 110px !important;
	height: 33px !important;
	background: url(../pics/cart.png) no-repeat !important;
	font: normal 400 11px/22px var(--roboto) !important;
	color: #D2E2ED !important;
	padding-left:40px !important;
	padding-top:6px !important;
	text-decoration: none !important;
}

.cartbtn {
	cursor: pointer;
	background: url(../pics/reload.png);
	float:right;
	background: none;
  	border: none;
  	color: inherit;
	outline: inherit;
	font: inherit;
	height:  20px;
	width:  20px;
	padding: 0;
}


#chat {
	position: relative;
	border: 1px solid #DDDDDD;
	height: 400px;
	width: 500px;
	margin: 100px auto;

}

#chatcontent {
	position: relative;
	overflow: hidden;
	height: 378px;
	overflow-y: scroll;
}

.ajaxform {
	position: absolute;
	border-top: 1px solid #DDDDDD;
	width: 100%;
	bottom: 0;
	background: white;
	margin: 0;
}

.ajaxform input {
	width: 80%;
}

a.sponsor_link{
	display:block !important;
	width: 250px !important;
	height: 72px !important;
	background-repeat: no-repeat;
	font: normal 400 14px/22px var(--roboto) !important;
	color: #FFF !important;
	padding-left:50px !important;
	padding-top:15px !important;
	text-decoration: none !important;
	margin-left: 15px;
}

a.sponsor_link:hover{
	display:block !important;
	width: 250px !important;
	height: 72px !important;
	background-repeat: no-repeat;
	font: normal 400 14px/22px var(--roboto) !important;
	color: #D2E2ED !important;
	padding-left:50px !important;
	padding-top:15px !important;
	text-decoration: none !important;
}