@charset "utf-8";
/* CSS Document */

* { margin: 0px; padding: 0px; }

img { border: none; outline:none; }

a { text-decoration: none; outline: none;  border: none;}

h1, h2, h3, h4, h5, h6, span, ul, li, p, a { margin: 0px; padding: 0px; }

body {font-family:Verdana; color: #000; overflow-x: hidden; font-size:18px; }

input, input[type="text"], textarea, select, option{font-family:Verdana;}

input[type="text"]:focus, .input[type="text"]:hover, textarea:hover, textarea:focus, .input[type="button"]:hover, .input[type="button"]:focus, select, option{ outline:0;}

#wrapContainer{float:left; width:100%; background:#fff; clear:both;}

.wrapContent{ 	/*max-width: 768px;*/width:100%;float: none;margin: 0 auto;position: relative;}

.header{ float:left; width:100%; display: flex;
align-items: center;}

.leftMenu, .cartIcon{ float:left; margin:0 30px;}
.cartIcon{ float:right;}
.logo{ margin:12px auto; max-width:124px; float:none;}

.banner, .abholungbanner{ background:url(../images/bannerBg.jpg) no-repeat top center; width:100%; float:left; height:432px;position: relative; display: table; vertical-align: middle; background-size:cover;    background-attachment: fixed;}

.banner img, .abholungbanner img{ max-width:100%;}

.banner h1, .abholungbanner h1{ font-size:28px; color:#fff; text-align:center; font-weight:400;line-height: normal; display:table-cell; vertical-align:middle;    padding: 70px;}

.banner h1 span, .abholungbanner h1 span{ font-size:60px; font-weight:bold;}

.abholungbanner{ background:url(../images/abholungbanner.jpg) no-repeat top center; background-size:100% 100%;background-attachment: fixed;}

.thirdsection, .fourthsection, .fifthsection, .sixthsection, .sevethsection, .eightsection{ float:left;position: relative; background:#fff; padding:20px;}

.thirdsection h2, .fourthsection h2 , .fifthsection h2, .sixthsection h2, .sevethsection h2, .GreenCommomDiv h2{ font-size:24px; color:#000; text-align:center; font-weight:400;line-height: normal;  padding:20px 0;}

.thirdsection p, .fourthsection p , .fifthsection p, .sixthsection p, .sevethsection p, .eightsection p , .GreenCommomDiv p{ font-size:18px; color:#000; text-align:center; font-weight:400;line-height: normal;  padding:20px;}

.thirdsection p.padding{ padding:20px 30px;}

.fourthsection{ background:#7bab32; width:100%; padding:3.2vw 0 3.35vw;}

/*.fifthsection{ background:#c6d9f1;}*/


.fifthsection {
    background: #c6d9f1;
    padding: 2vw 0 1.7vw;
}

.headIcon{ margin:20px auto 0; text-align: center; float:none;}

.boxIcon{ margin:20px auto 0; max-width:80px; float:none;}

.fourthsection p, .GreenCommomDiv p{ color:#fff;padding:10px 30px;} 

.sevethsection p{padding:10px 30px;}

.fourthsection h2, .GreenCommomDiv h2{ color:#fff;padding:10px 30px;} 

.fifthsection p{ padding:10px 30px;}

.roundWrap{ max-width:340px; clear:both; margin:30px auto; text-align:center;}

a.roundBtn, a.greenroundBtn{ background:#eaeaea; color:#000; font-size:18px; padding:5px 20px; border-radius:20px;width:100%; float:none; text-align:center;}

a.greenroundBtn{ background:#63b32f; color:#fff;}

.sixthsection{ background:#eaeaea; width: 100%;
padding: 3.2vw 0;}

.facebookIcon{ margin:20px auto 0; max-width:77px; float:none;}

.sevethsection h2{ font-size:24px; text-transform:uppercase; text-align:center; padding-top:20px; font-weight:400;}

.sevethsection h3, .eightsection h3{ font-size:30px; text-align:center; padding-top:20px; font-weight:400;}

.logo img{max-width:100px;}

.logoBig{ margin:80px auto; text-align:center; float:none;}

.logoBig img{ max-width:100%; display:inline-block;}

.eightsection{ padding:50px 0; width:100%;}

.leftMenu button{ border:0; outline:0; border-radius:0; width:35px; height:19px;}

.contactwrap{ max-width:600px; margin:0 auto;    padding: 0 20px;}

.contactwrap h4{ font-size:24px; font-weight:bold; color:#000;margin: 20px 0;}

.contactwrap label{ color:#000; font-size:18px; font-weight:400; margin-bottom:10px; float:left; font-family: verdana;}

.contactwrap input[type="text"], .contactwrap input[type="email"]{ border:1px solid #3f3f3f; float:left; clear:left; margin:0 0 10px; padding:10px; width:100%;font-size:14px; font-weight:400; border-radius:5px;transition: all 0.5s ease 0s;}

.commonSection{ float:left;position: relative; background:#fff; padding:20px 0; width:100%;}

.conatactTextarea{ border:1px solid #3f3f3f; float:left; clear:left; margin:0 0 10px; padding:10px; width:100%;font-size:14px; font-weight:400; border-radius:5px; height:100px;transition: all 0.5s ease 0s;}

.contactBtn{ background:#63b32f; color:#fff; font-size:16px; float:left; border:0; border-radius:5px; padding:15px 50px;    margin-top: 10px;    font-family: verdana;transition: all 0.5s ease 0s;}

.contactBtn:hover{ background:#000; transition: all 0.5s ease 0s;}

.contactwrap input[type="text"]:focus, .contactwrap input[type="email"]:focus, .conatactTextarea:focus{ border:1px solid #63b32f; outline:0;transition: all 0.5s ease 0s;}



/* 2nd screen Css  */

.myform{ max-width:600px; margin:0 auto; width:100%;}

.myform input[type="text"]{ width:100%; background:#fff; border:1px solid #fff; color:#999999; font-size:18px; font-weight:400; padding:15px; margin-bottom:20px;float: left;}

.myform input[type="text"].herrtextbox{ width:20%; margin-right: 10px;}

.myform input[type="text"].vorname{ width:40%; margin-right: 10px;}

.myform input[type="text"].nachname{ width:36%; float:right;}

.myform input[type="text"].streetname{ width:83%; margin-right: 10px;}

.myform input[type="text"].Nr{ width:15%; float:right;}

.myform input[type="text"].PLZ{ width:15%; margin-right: 10px;}

.myform input[type="text"].Ort{ width:83%; float:right;}

.myform label{ text-align:center; color:#fff; font-size:18px; width:100%; float:left; margin-bottom:10px;}

.myform textarea{width:100%; background:#fff; border:1px solid #fff; color:#999999; font-size:18px; font-weight:400; padding:15px; margin-bottom:20px;float: left; height:135px; resize:none;}

.myformBtnWrap{ max-width:340px; clear:both; margin:0 auto;}

.myformBtn{background:#fff; color:#000; font-size:18px; padding:15px; border-radius:20px;width:100%;text-align:center;margin: 30px 0; border:1px solid #fff; cursor:pointer;}

.myform input[type="checkbox"]{ float:left; height:30px; margin:0 10px 0 0; padding:0; background:#fff; border-radius:0; border:1px solid #fff; width:30px;}

.termsText{ color:#fff; font-size:18px;}

.footerNav{margin:20px auto;padding-bottom: 20px; text-align:center;}

.footerNav ul{ list-style:none; width:100%; float:left;}

.footerNav ul li{ display:inline; list-style:none; font-size:14px; color:#fff; margin:0 5px;}

.footerNav ul li a{ color:#fff;}

.myform label.rightLabel{ text-align:right; margin-top:20px; color:#000;}

.selectbox{width:100%; background:#fff; border:1px solid #fff; color:#999999; font-size:18px; font-weight:400; padding:15px; margin-bottom:20px;float: left;}

.fifthsection .myform label ,.fifthsection .myform .termsText, .sixthsection .myform .termsText{ color:#000;}

.fifthsection .footerNav ul li, .fifthsection .footerNav ul li a, .sixthsection .footerNav ul li a, .sixthsection .footerNav ul li{ color:#000;}

.GreenCommomDiv{    background: #7bab32;    width: 100%;padding: 20px 0; float:left;}

.LightBtn, .GreenBtn{ font-size:18px; background:#eaeaea; color:#000; border:0; padding: 10px 30px;border-radius: 20px; text-align:center; cursor:pointer;}

.GreenBtn{ background:#63b32f;color:#fff;}

.LightBtn:focus, .GreenBtn:focus, .myformBtn:focus{ outline:none;}

.abholungbanner-new {background: url(../images/recycling-banner.jpg) }
.datenloeschung {background: url(../images/datenlöschung.jpg) }
.gebrauchte-hardware {background: url(../images/gebrauchte-hardware.jpg) }

.abholungbanner-new,.datenloeschung,.gebrauchte-hardware{background-attachment: scroll;  background-size: auto;
width: 100%;float: left;height: 432px;position: relative;display: table;vertical-align: middle;background-size: cover;background-attachment: fixed;}

a.link{color:#63b32f; margin-top:10px; display:block;}
a.link:hover{color:#000;}







/*  Checkbox Css Starts  */

input[type=checkbox]:not(old){
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}

input[type=checkbox]:not(old) + label{
  display      : inline-block;
  line-height  : 1.5em;
}

input[type=checkbox]:not(old) + label > span{
  display          : inline-block;
  width            : 25px;
  height           : 25px;
  margin           : 0.25em 0.5em 0.25em 0;
  border           : 1px solid #fff;
  border-radius    : 0;
  background       : #fff;
  vertical-align   : bottom;
  float:left;
}

input[type=checkbox]:not(old):checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}

input[type=checkbox]:not(old):checked + label > span:before{
  content     : '✓';
  display     : block;
  color       : rgb(153,204,102);
  font-size   : 22px;
  line-height : 1em;
  text-align  : center;
 font-weight : bold;
 background:#fff;
}

.terms{ float:left; width:90%; text-align:left;}

.eightsection .footerNav ul li a, .eightsection .footerNav ul li {
    color: #000;
}

.GreenCommomDiv a{ color:#fff;}

.alink{ text-decoration:underline;}

/*  Checkbox Css Ends */

.show_loading{    float: right;
    text-align: center;
   
    font-size: 16px;
    margin: 10px 0;    width: 100%;}

/*  Responsive Css  */


@media only screen and (max-width:767px){
.logo img{max-width:75px;}
.logo {
    margin:0 auto;
    max-width: 124px;
    float: none;
    text-align: center;
}

.leftMenu{
    margin: 0 0 0 20px !important;
    position:absolute;

}

.header{padding:5px 0 1px;}


}


@media only screen and (max-width:1399px){

.abholungbanner,.gebrauchte-hardware,.datenloeschung{height:300px;}

}



@media only screen and (min-width : 320px) and (max-width : 400px) {
	body{overflow-x:hidden;}
	.banner h1, .abholungbanner h1 { padding: 5%;  font-size: 20px;}
	.banner h1 span, .abholungbanner h1 span {  font-size: 45px;}
	.logoBig { max-width: 300px;}
	a.roundBtn, a.greenroundBtn {padding: 5px 15px;}
	.thirdsection, .fourthsection, .fifthsection, .sixthsection, .sevethsection, .eightsection {padding: 15px;width: auto;}
	.myform input[type="text"]{ width:100% !important;}
	.footerNav ul li{ font-size:11px;}
	.myform label, .termsText{ font-size:16px;}
	.footerNav { max-width: 285px;}
	.terms{ width:85%;}
	.myformBtn, .LightBtn, .GreenBtn{min-height: 60px;}
}

@media only screen and (min-width : 401px) and (max-width : 500px) {
	body{overflow-x:hidden;}
	.banner h1, .abholungbanner h1 { padding: 5%;}
	a.roundBtn, a.greenroundBtn {padding: 5px 15px;}
	.thirdsection, .fourthsection, .fifthsection, .sixthsection, .sevethsection{padding: 15px;width: auto;}
	.eightsection{ width:100%;}
	.myform input[type="text"]{ width:100% !important;}
	.terms{ width:85%;}
	.myformBtn, .LightBtn, .GreenBtn{min-height: 60px;}
}


@media only screen  and (min-device-width: 320px) and (orientation: portrait) {
	.logo { max-width: 110px;}
	.leftMenu, .cartIcon { margin: 30px 20px 13px;}
	.myformBtn, .LightBtn, .GreenBtn{min-height: 60px;}
}

@media only screen and (max-width : 768px) {
	.banner{ height:auto;background-position:inherit; background-size:cover; background-attachment:inherit;}
	.myformBtn, .LightBtn, .GreenBtn{min-height: 60px;}
	
}


@media only screen and (min-width : 769px) and (max-width : 1024px) {
	.abholungbanner-new,.gebrauchte-hardware,.datenloeschung{ height:190px; background-position:inherit; background-size:100%;}
	.banner{ height:auto;background-position:inherit; background-size:cover; background-attachment:inherit;}
}

@media only screen and (max-width:991px){

.abholungbanner-new, .datenloeschung, .gebrauchte-hardware,.abholungbanner{background-attachment: inherit;}


}


@media only screen and (max-width :767px)  {
	.abholungbanner-new,.gebrauchte-hardware,.datenloeschung,.abholungbanner{  height:180px;}
  .fourthsection p, .GreenCommomDiv p{padding: 10px;}
  a.roundBtn, a.greenroundBtn {padding: 5px 15px;}
}



@media only screen and (max-width :479px)  {
	.abholungbanner-new,.gebrauchte-hardware,.datenloeschung.abholungbanner{  height:150px;}
}