/* Icon Dark */
.dark-mode {
	position: fixed;
	top: 12px;
	right: 50px;
	z-index: 999;
}
.dark-mode:hover {
	cursor: pointer;
}
.dark-mode img {
	width: 25px;
}


/* CSS Dark */
.darkMode {
	background-color: #2A2B3C;
	color: #ddd;
}
.darkMode nav .brand h1 a, .darkMode nav ul a {
	color: #2F8F9D;
	transition: all .3s;
}
.darkMode nav .brand h1 a:hover, .darkMode nav ul a:hover {
	color: #33b2c4;
}
.darkMode nav, .darkMode footer p {
	background-color: #212529;
	color: #ddd;
}
.darkMode footer svg path.svg-footer {
	fill: #212529;
}
.darkMode footer a {
	transition: all .3s;
}
.darkMode footer a:hover {
	color: #33B2C4;
}
.darkMode .jumbotron {
	background-color: #313347;
	color: #ddd;
}
.darkMode .jumbotron .info a.btn-shop:hover {
	box-shadow: 3px 3px 5px 3px rgba(255,255,255, .2);
	border: none;
}
.darkMode svg path.color-dark {
	fill: #313347;
}
.darkMode .card, .darkMode .card-product, .darkMode .contact form, .darkMode aside .info-founder {
	background-color: #46485A;
	color: #ddd;
	transition: all .3s;
}
.darkMode aside .info-founder img {
	border: 5px solid #666C8C;
}
.darkMode .card:hover, .darkMode .card-product {
	box-shadow: 1px 2px 20px 6px rgba(000, 000, 000, .3) !important;
}
.darkMode .contact input, .darkMode .contact textarea {
	background-color: #666c8c;
	border: 2px solid #979ec4;
}
.darkMode .contact input::-webkit-input-placeholder, .darkMode .contact textarea::-webkit-input-placeholder {
	color: #000;
}
.darkMode .contact input:focus, .darkMode .contact textarea:focus {
	box-shadow: 2px 2px 10px rgba(000, 000, 000, .5);
}
.darkMode .skills a, .darkMode .sosmed a {
	background-color: #2A2B3C;
	color: #ddd;
	transition: all .3s;
}
.darkMode .skills a:hover, .darkMode .sosmed a:hover {
	background-color: #7e84a8;
	color: #fff;
	outline: none;
}
.darkMode aside article figcaption {
	background-color: #666C8C;
}

/* ================================================================== */

/* Responsive Breakpoint Dark Mode */
@media screen and (max-width: 990px) {
	/* Icon Dark */
	.dark-mode {
		top: 70px;
		right: 30px;
		z-index: 5;
	}
}

@media screen and (max-width: 570px) {
	.darkMode nav ul {
		background-color: #2A2B3C;
		box-shadow: 1px 2px 8px rgba(000, 000, 000, .5);
	}

	/* Icon Dark */
	/*.dark-mode {
		top: 12px;
		right: 115px;
		z-index: 999;
	}*/
}