@import url(http://fonts.googleapis.com/css?family=Open+Sans);

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), url(fonts/0dTEPzkLWceF7z0koJaX1A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


/* Main elements */
body {
	height: 100%;
	background-image: url(../images/background.png);
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
	background-attachment: fixed;
	margin: 0;
}

.background {

}

.wrapper {
	width: 80%;
	margin: 0 auto;
	/* overflow: hidden; */
	position: relative;
	/* height: 100%; */
	/* min-height: 100%; */
}



header {

	width: 100%;

	height: 134px;

	overflow: hidden;

	/* padding-top: 20px; */

	position: relative;

}







/* Navigation top */



.nav-top {

	height: 35px;

	width: 100%;

	/* background: white; */

	margin-top: -15px;

}



.nav-top-items {

	list-style-type: none;

	font-family: 'Raleway', sans-serif;

	font-size: 13px;

}



.nav-top-items li {

	float: right;

	padding: 13px 0;

	margin-left: 85px;

	color: #222;

	border-bottom: 3px solid transparent;

	transition: 0.2s;

}



.nav-top-items a {

	text-decoration: none;

	/* border-bottom: 3px solid white; */

	color: #222;

	transition: 0.2s;

}



.nav-top-items li:hover { 

	border-bottom: 3px solid #ff722b;

	transition: 0.2s;

}



/* Le navigation */

#menu-wrapper {

	width: 100%;

	background: #222;

	margin-top: 30px;

	margin: 0 auto;

	/* border-radius: 5px; */

}



.navigation {

	/* position: absolute; */

	left: 0;

	/* overflow: hidden; */

	width: 100%;

	height: 54px;

	margin-top: 25px;

}



/* Header stuff */



.logo-mobiler {

	background-image: url(../images/logo4.png);

	height: 135px;

	width: 145px;

	/* margin-top: 20px; */

	position: absolute;

	bottom: 0;

	float: left;

	transition: 0.4s;

}



/*.logo-mobiler:hover {

	background-image: url(../images/logo4_hover.png);

	transition: 0.3s;

}*/



/* Boxes */



.grid-row-1, .grid-row-2 {

	width: 100%;

	height: 150px;

	/* background: grey; */

	overflow: hidden;

	margin-bottom: .5%;

}



.grid-boxes {

	margin-top: .5%;

	overflow: hidden;

}



.box {

	width: 0px;

	height: 0px;

	cursor: pointer;

	/*border: 2px solid rgb(242, 242, 242);*/

	/* background: whitesmoke; */

	transition: 0.2s;

	/*background-size: 80px;*/

	float: left;

	margin-right: .5%;

}



.small {

	height: 73px;

	width: 12.5%;

}



.medium {

	width: 25.5%;

	height: 150px;

}



.big {

	width: 48%;

	height: 150px;

}



/* Brands */

#htc:hover {  /* border: 2px solid rgba(140, 199, 81, 1); */ background: white; background-image: url(../images/brands/htc.png); background-size: 80px; }
#htc { background: rgba(140, 199, 81, 1); transition: 0.2s; background-image: url(../images/brands/htc_hover.png); background-size: 80px;}

#apple:hover { background: white; background-image: url(../images/brands/apple_hover.png); background-size: 80px; transition: 0.2s; }
#apple { background: #222; transition: 0.2s; background-image: url(../images/brands/apple.png); background-size: 80px;}

#nokia:hover { background: white; background-image: url(../images/brands/nokia.png); background-size: 80px; transition: 0.2s; }
#nokia { background: rgb(227,162,26); transition: 0.2s; background-image: url(../images/brands/nokia_hover.png); background-size: 80px;}

#lg:hover { background: white; background-image: url(../images/brands/lg.png); background-size: 70px; transition: 0.2s; }
#lg { background: rgb(239,244,255); transition: 0.2s; background-image: url(../images/brands/lg.png); background-size: 70px;}

#acer:hover { background: white; background-image: url(../images/brands/acer_hover.png); background-size: 70px; transition: 0.2s; }
#acer { background: rgb(120, 191, 65); transition: 0.2s; background-image: url(../images/brands/acer.png); background-size: 70px;}

#sony:hover { background: white; background-image: url(../images/brands/sony.png); background-size: 80px; transition: 0.2s; }
#sony { background: rgb(0,171,169); transition: 0.2s; background-image: url(../images/brands/sony_hover.png); background-size: 80px;}

#motorola:hover { background: white; background-image: url(../images/brands/motorola_hover.png); background-size: 100px; transition: 0.2s; }
#motorola { background: rgb(0,171,169); transition: 0.2s; background-image: url(../images/brands/motorola.png); background-size: 100px;}

#samsung:hover { background: white; background-image: url(../images/brands/samsung.png); background-size: 80px; transition: 0.2s; }
#samsung { background: rgb(237, 92, 92); transition: 0.2s; background-image: url(../images/brands/samsung_hover.png); background-size: 80px;}

#huawei:hover { background: white; background-image: url(../images/brands/huawei.png); background-size: 170px; transition: 0.2s; }
#huawei { background: rgb(221, 120, 120); transition: 0.2s; background-image: url(../images/brands/huawei_hover.png); background-size: 170px;}

.brand {
	width: 100%;
}



/* Footer */



.main-footer {

	width: 80%;

	margin: 0 auto;

	height: 100%;

}


/* Footer */
.page-footer {

	margin-top: 40px;

	width: 100%;

	bottom: 0;

	border-top: 1px solid rgba(229, 229, 229, 0.44);

	height: 250px;

	background: rgba(247, 247, 248, 0.4);

}



.column-footer {

	width: 24.25%;

	margin-left: 1%;

	float: left;

	/* background: rgb(236, 236, 236); */

	height: 100%;

}

.column-footer li {
	list-style-type: none;
	font-family: 'Raleway';
}

.column-footer li a {
	text-decoration: none;
	color: #888888;
	font-weight: bold;
	font-size: 13px;
	line-height: 22px;
	transition: 0.2s;
}

.column-footer li a:hover {
	text-decoration: none;
	color: #666666;
	font-size: 13px;
	transition: 0.2s;
}

.column-footer ul {
	width: 100%;
	padding: 0;
	margin: 0;
}

.column-footer .footer-top-text { /* Footer kolom top text */
	color: rgb(236, 137, 88);
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	margin-bottom: 12px;
	/* letter-spacing: 2px; */
	margin-top: 35px;
}


.column-footer:first-child {

	margin-left: 0%;

}



#top-grid-text {

	display: none;

}







/* Overig */

.search-box {

	float: right;

	width: 400px;

	bottom: 0;

	right: 0;

	position: absolute;

	border: 1px solid #e5e5e5;

	/* margin-top: 10%; */

	height: 45px;

	background: #FFFFFF;

	outline: 0;

	color: rgb(173, 173, 173);

	font-size: 16px;

	font-family: 'Raleway', sans-serif;

	padding-left: 15px;

	transition: 0.2s;

}



.search-box:hover {

	transition: 0.2s;

	opacity: 0.7;

}



#shoppingcart span {



}










.nav-brand-box {

	float: left;

	width: 200px;

	height: auto;

	z-index: 0;

	transition: 0.2s;

	position: absolute;

}



.nav-brand-box .nav-box-top-text {

	  font-family: 'Raleway', sans-serif;

	  font-size: 16px;

	  /* letter-spacing: -1px; */

	  padding-top: 25px;

	  width: 80%;

	  line-height: 34px;

	  padding-left: 15px;

	  /*border-bottom: 1px solid rgba(128, 128, 128, 0.29);*/

	  color: #222;

	  z-index: -1;

}



.nav-brand-box ul {

	list-style-type: none;

	left: 0;

	padding-left: 10px;

	transition: 0.2s;

}



.arrow {

	background-image: url(../images/arrow.png);

	background-repeat: no-repeat;

	transition: 0.2s;

}



.nav-brand-box li {

	font-family: 'Raleway', sans-serif;

	font-size: 14px;

	color: #222;

	padding-left: 25px;

	margin-bottom: 10px;

	font-weight: bold;

	transition: 0.2s;

}



.nav-brand-box li a {

	color: #222;

	text-decoration: none;

	transition: 0.2s;

}



.nav-brand-box li a:hover {

	color: #222;

	padding-left: 8px;

	text-decoration: none;

	transition: 0.2s;

}



.product-brand-box {

	float: left;

	width: 70%;

	/* height: 100%; */

}

/* Brand content */
.brand-content {

	width: 100%;

	/* height: 100%; */

	/* padding: 40px 0; */

	overflow: hidden;

}

.brand-box-inner {
	/* background: rgb(249, 249, 249); */
	margin: 8% auto;
	/* height: 80%; */
	vertical-align: middle;
	width: 90%;
}

.price {
	/* font-size: 20px; */
}

.brand-box {
	width: 49%;
	margin-left: 1%;
	margin-bottom: 1%;
	height: auto;
	overflow: hidden;
	float: left;
	/* background: white; */
	transition: 0.2s;
}

.brand-box:hover {
	cursor: pointer;
	transition: 0.2s;
	background: whitesmoke;
}

.brand-box:hover .watch-box {
	background: rgb(236, 137, 88);
	color: white;
	transition: 0.2s;
}

.brand-box-text-top {
	font-family: 'Raleway', sans-serif;
	font-size: 17px;
	text-align: center;
}

.photo-box {
	width: 100%;
	height: 300px;
	margin-top: 30px;
	overflow: hidden;
	text-align: center;
	/* background: black; */
}

.photo-box img {
    width: 150px;
}

.price-box {
	width: 100%;
	height: 50px;
	/* margin-top: 30px; */
	padding-top: 20px;
	font-size: 20px;
	/* font-weight: bold; */
	overflow: hidden;
	text-align: center;
	/* background: black; */
	font-family: 'Raleway';
}

.price-box span {
	/*border-bottom: 2px solid rgb(255, 135, 74);*/
	padding-bottom: 5px;
}

.product-brand-box a {
	color: #222;
}

.watch-box {
    height: 30px;
	
    width: 60%;
    /* background-color: rgb(255, 255, 255); */
    font-family: 'Raleway';
    text-align: center;
    border: 2px solid rgb(236, 137, 88);
    padding-top: 10px;
    margin: 0 auto;
}

.stick {

	position: fixed;

	top: 0;

	width: 250px;

	transition: 0.2s;

}



.nav-wrapper {

	height: 100%;

	float: left;

	width: 30%;

	position: relative;

}



.nav-active {

	color: #ff722b !important;

}



#fix-div {

	height: 100px;

	width: 200px;

	background: white;

}


/* Product pagina */
.product-big-box {
	width: 100%;
	margin-top: 10px;
	height: auto;
	padding: 20px 0;
	background: rgba(128, 128, 128, 0.06);
	overflow: hidden;
}

.product-big-box > .left {
	width: 35%;
	height: auto;
	float: left;
}

.product-big-box > .right {
	width: 65%;
	height: auto;
	float: right;
}

.products {
	width: 100% !important;
	transition: 0.2s;
}

.products:hover {
	cursor: default !important;
}

.products img {
	transition: 0.2s;
}

.products img:hover {
	transition: 0.2s;
	opacity: 0.8;
	background: transparent !important;
	cursor: pointer;
}

.product-top-name {
	font-family: 'Raleway', sans-serif;
	font-size: 30px;
	color: #424242;
	margin-top: 40px;
}

.product-top-price {
	font-family: 'Raleway', sans-serif;
	font-size: 20px;
	color: #424242;
	width: 350px;
	margin-top: 10px;
}

.product-top-price span {
	font-weight: bold;
	padding-left: 20px;
}

.product-top-box {
	width: 300px;
	/* height: 40px; */
	box-shadow: 0px 1px 4px -3px black;
	/* text-align: right; */
	font-size: 13px;
	color: #323232;
	padding: 13px;
	font-family: 'Raleway', sans-serig;
	background: white;
	transition: 0.2s;
	cursor: pointer;
	/* border: 2px solid rgb(236, 137, 88); */
}

.product-top-box:hover {
	transition: 0.2s;
	cursor: pointer;
	background: rgb(236, 137, 88);
	color: white;
}

.product-description {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: grey;
    width: 600px;
    margin: 30px 0;
    cursor: pointer;
    transition: 0.2s;
}

.product-description:hover {
	transition: 0.2s;
	color: #222;
}




/* Product informatie */
.product-information-content {
	margin-top: 10px;
	width: 100%;
	overflow: hidden;
	/* height: 100%; */
}

.product-information-content > .left {
	float: left;
	width: 59.5%;
	/* height: 100%; */
}

.product-information-content > .right {
	float: right;
	width: 40%;
	/* height: 100%; */
}

.product-information-box-big {
	width: 98%;
	float: left;
	border: 2px solid rgb(249, 249, 249);
	height: auto;
	padding-bottom: 15px;
	margin-bottom: 2%;
	background: rgb(255, 255, 255);
}

.product-information-box-small {
	width: 100%;
	float: right;
	margin-bottom: 3%;
	border: 2px solid rgb(249, 249, 249);
	padding-bottom: 15px;
	height: auto;
	background: rgb(255, 255, 255);
}

.information-box-top {
	margin: 2%;
	width: 96%;
	margin-bottom: 21px;
	height: 50px;
	border-bottom: 2px solid rgb(236, 137, 88);
	/* box-shadow: 0px 1px 4px -3px rgb(236, 137, 88); */
	/* background: white; */
}

.information-top-text {
    font-family: 'Raleway';
	
    padding: 15px;
    padding-left: 20px;
    color: grey;
    /* font-weight: bold; */
}

.information-box-description {
    margin: 3%;
    font-family: 'Raleway';
    color: grey;
    font-size: 13px;
    margin: 0 auto;
    width: 90%;
    line-height: 22px;
}

.information-box-description > table {
	width: 100%;
	/* border: 1px solid grey; */
	line-height: 20px;
	border-collapse: collapse;
}

.information-box-description td {
	/* padding: 2%; */
	color: grey;
	font-size: 13px;
	padding-left: 2%;
	padding-top: 1%;
	margin-bottom: 1%;
}

.information-box-description tr {
	/* border-left: 3px solid orange; */
	margin-bottom: 1%;
	border-top: 1px solid rgb(234, 234, 234);
}

.information-box-description tr:first-child {
	border-top: 0px;
}




/* Klantenservice */
.klanten-content {
	width: 100%;
	padding-top: 10px;
	/* height: 100%; */
	/* background: grey; */
	margin: 10px auto 0 auto;
}

.klanten-content-top-text {
	font-family: 'Raleway', sans-serif;
	font-size: 25px;
	padding-bottom: 10px;
	padding-top: 30px;
	/* padding-left: 35px; */
	color: rgb(236, 137, 88);
	border-bottom: 2px solid;
}

.vraag-niet-bij {
	font-family: 'Raleway';
	font-size: 14px;
	padding-top: 20px;
}

.vraag-close {
	cursor: pointer;
	font-family: 'Raleway';
	display: none;
	font-size: 14px;
	padding-top: 10px;
}




/* Bedankt Pagina */
.bedankt-content {
	width: 85%;
	padding-top: 40px;
	height: 400px;
	margin: 10px auto 0 auto;
}

.bedankt-content-top-text {
	font-family: 'Raleway', sans-serif;
	font-size: 40px;
	padding-bottom: 10px;
	padding-top: 30px;
	padding-left: 35px;
	color: rgb(236, 137, 88);
	border-bottom: 2px solid;
	text-align: center;	
}

.bedankt-content-bottom-text {
	font-family: 'Raleway', sans-serif;
	font-size: 20px;
	padding-bottom: 10px;
	padding-top: 30px;
	padding-left: 35px;
	color: rgb(236, 137, 88);
	text-align: center;	
}


/* Overig */
.td-right {
	text-align: right;
	padding-right: 20px;
}

.error-message {
	width: 100%;
	height: auto;
	background: rgb(236, 137, 88);
	color: white;
	font-family: 'Raleway';
	font-size: 14px;
}

.error-message-text {
	padding: 2%;
}


/* Winkelwagen */
.artikel-content {
	width: 100%;
	height: 300px;
	margin-top: 2%;
}

.artikel-content ul {
	width: 100%;
	/* background: grey; */
	margin: 0;
	padding: 0;
}

.artikel-content li {
	width: 89%;
	height: 15px;
	padding: 21px 0;
	font-size: 14px;
	margin-bottom: 2px;
	background-color: white;
	border: 1px solid rgba(0, 0, 0, 0.06);
	list-style: none;
	text-align: center;
	font-family: 'Raleway';
	transition: 0.2s;
	cursor: pointer;
	color: grey;
}

.artikel-content li:hover {
	transition: 0.2s;
	cursor: pointer;
	background: rgb(236, 137, 88);
	color: white;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.artikel-content li .image {
  width: 16%;
  /* height: 100%; */
  float: left;
  margin-top: -14px;
  overflow: hidden;
}

.artikel-content li .image img {
	width: 21px;
	height: 38px;
	margin-top: 3px;
}

.artikel-content li .name {
  width: 58%;
  height: 100%;
  /* padding: 10px 0; */
  float: left;
  border-left: 2px solid rgb(236, 137, 88);
  border-right: 2px solid rgb(236, 137, 88);
}

.artikel-content li .price {
  width: 24%;
  height: 100%;
  float: left;
}

.no-display {
	display: none;
}



/* MM */
.klanten-content table {
	width: 100%;
	background-color: white;
	border: 1px solid grey;
}

.klanten-content .order {
	width: 40%;
	text-align: center;
}

.klanten-content .datum {
	width: 40%;
	text-align: center;
}

.klanten-content .prijs {
	width: 20%;
	text-align: center;
}

.mijn-mobiler-menu {
	width: 100%;
	height: auto;
	/* border-top: 2px solid rgb(236, 137, 88); */
	border: 2px solid rgb(242, 242, 242);
	border-left: 2px solid rgb(242, 242, 242);
	border-bottom: 2px solid rgb(242, 242, 242);
	border-right: 2px solid rgb(242, 242, 242);
	overflow: hidden;
	margin-top: 2%;
	margin-bottom: 2%;
	background: white;
}

.mijn-mobiler-menu ul {
	width: 100%;
	/* height: 100%; */
	/* padding: 10px 0; */
	padding: 0;
	/* text-align: center; */
	margin: 0 auto;
	list-style-type: none;
}

.mijn-mobiler-menu li {
	list-style-type: none;
	width: 33.3333333%;
	float: left;
	text-align: center;
	color: rgb(182, 182, 182);
	/* text-transform: lowercase; */
	padding: 15px 0px;
	font-family: 'Raleway';
	font-size: 13px;
	border-bottom: 2px solid white;
	transition: 0.2s;
	cursor: pointer;
}

.mijn-mobiler-menu li:hover {
	transition: 0.2s;
	color: #222;
	cursor: pointer;
	border-bottom: 2px solid rgb(236, 137, 88);
}

.mijn-mobiler-menu .active {
	border-bottom: 2px solid rgb(236, 137, 88);
	color: #222;
}

.mijn-mobiler-menu .regi a {
	color: grey !important;
}

.bestelling {
	width: 100%;
	border-collapse: collapse;
}

.bestelling td {
	text-align: center;
	font-family: 'Raleway';
	font-size: 14px;
	padding: 10px 0;
	width: 33% !important;
	color: grey;
	transition: 0.2s;
}

.bestelling td:hover {
	transition: 0.2s;
	color: #222;
}

.bestelling tr {
	border: 2px solid rgb(242, 242, 242) !important;
	transition: 0.2s;
}

.bestelling .order, .datum, .prijs {
    border-bottom: 2px solid rgb(236, 137, 88);
    color: #222 !important;
}




.klanten-content-top-text span {
	font-size: 13px;
	text-align: right;
	float: right;
	padding: 10px 0;
	color: rgb(236, 137, 88);
}

.klanten-content-top-text span a {
	font-size: 12px;
	text-align: right;
	float: right;
	padding: 10px 0;
	color: rgb(236, 137, 88);
	text-decoration: none;
	transition: 0.2s;
}

.klanten-content-top-text span:hover {
	font-weight: bold;
	transition: 0.2s;
}




/* Bevestiging */
.brand-content > .bevestig-left {
	width: 49%;
	height: 100%;
	float: left;
}

.brand-content > .bevestig-right {
	width: 40%;
	height: 100%;
	font-size: 15px;
	float: right;
	font-family: 'Raleway';
}

#prul, #prul-li {
	transition: 0.2s;
}