* {
	margin: 0;
	padding: 0;
}

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

@font-face {
  font-family: CHH;
  src: url(fonts/CooperHewitt-Heavy.ttf);
}

@font-face {
  font-family: CHB;
  src: url(fonts/CooperHewitt-Bold.ttf);
}

@font-face {
  font-family: cb;
  src: url(fonts/corbel.ttf);
}

#title, #d2, #d3{
	box-sizing: border-box;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-family: CHH;
	font-size:76px;
	text-align: centre;
	width: 100%;
	min-width: 300px;
}

body {
	background-color: #262626;
}

.center {
	align: center;
}

.navboxes
	{
	display: block;
	}

.flex-container div {
	width: 50%;
}
.flex-container div div{
	width: 50%;
	}
	
#d2 {
	min-width: 100%;
	text-align: center-left;
	padding: 20px;
	padding-bottom: 0px;
}

#d3 {
	min-width: 50%;
}

#d4 {
	width: 225px;
	min-width: 225px;
	height: 100px;
}
	
.flex-container {
	display: flex;
	width: 100%; 
	flex-wrap: wrap;
	align-items: top;
}	

.burger {
	display: none;
}

@media screen and (max-width: 985px) {
	.navboxes {
	display: none;
	}
	.burger {
	display: inline-block;
	}
	.flex-container div {
	width: 100%;
	}
	.flex-container div div{
	width: 100%;
	}
	#d4 {
	height: 250px;
	}
}

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

	.burger {
	display: none;
	}

}

@media screen and (max-width: 730px) {
	#title {
		font-size: 10vw;
		padding-top: 145px;
	}
}

.text-shadow {

	color: #FFFFFF;
	text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
	color: #FFFFFF;
}

.dropshadow {
	background: -webkit-linear-gradient(#474a51, #2f3237); 
    background: -o-linear-gradient(#474a51, #2f3237); 
    background: -moz-linear-gradient(#474a51, #2f3237); 
    background: linear-gradient(#474a51, #2f3237); 
    background-color: #2f3237; 
}

.img-shadow{
	filter: drop-shadow(0 0 0.75rem white);
}

nav {
	width: 100%;
	height: 80;
	z-index: 100;
	background-color: #333333;
}

nav p {
	font-family: arial;
	color: white;
	font-size: 25;
	line-height: 1;
	float: left;
	padding: 0px 20px;
	text-decoration: none;
}

nav a{
	text-decoration: none;
	color: white;
	background-color: transparent;
}

nav ul {
	float:left;
}

nav ul li {
	float: left;
	text-align: centre;
	list-style: none;
}

nav ul li a {
	font-family: arial;
	text-decoration: none;
	height:100%;
	text-align: centre;
	line-height:4.3;
	padding-left: 15px;
	padding-right: 15px;
	color: white;
	font-size: 20;
	float: left;
}

nav ul li a:hover {
	background-color: white;
	color: black;
}

#shop {
	font-family: cb;
	font-size: 10;
}


a.btn-social,
.btn-social
{
    border-radius: 50%;
    color: #ffffff !important;
    display: inline-block;
    height: 70px;
	width: 70px;
    line-height: 54px;
    margin: 8px 4px;
    text-align: center;
    text-decoration: none;
    transition: background-color .3s;
    webkit-transition: background-color .3s;
}

.btn-social .fa,.btn-social i
{
    backface-visibility: hidden;
    moz-backface-visibility: hidden;
    ms-transform: scale(0.5);
    o-transform: scale(0.5);
    transform: scale(0.5);
    transition: all .25s;
    webkit-backface-visibility: hidden;
    webkit-transform: scale(0.5);
    webkit-transition: all .25s;
}
.btn-social:hover,.btn-social:focus
{
    color: #fff;
    outline: none;
    text-decoration: none;
}
.btn-social:hover .fa,.btn-social:focus .fa,.btn-social:hover i,.btn-social:focus i
{
    ms-transform: scale(0.7);
    o-transform: scale(0.7);
    transform: scale(0.7);
    webkit-transform: scale(0.7);
}

.btn-instagram
{
    background-color: #3f729b;
}
.btn-instagram:hover
{
    background-color: #548cb9;
}
.btn-twitter
{
    background-color: #55acee;
}
.btn-twitter:hover
{
    background-color: #83c3f3;
}
.btn-youtube
{
    background-color: #e52d27;
}
.btn-youtube:hover
{
    background-color: #ea5955;
}
.btn-email
{
    background-color: #44c456;
}
.btn-email:hover
{
    background-color: #6bd079;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  width: 100%;
  z-index: 1;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  font-family: arial;
  text-decoration: none;
  text-align: centre;
  color: white;
  font-size: 30;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #fff;
  color: black;
}

.active {
  background-color: #333;
  color: white;
}