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

a {	text-decoration: none;
  color:white;
  font-family: 'Arvo', serif;
  text-align: center;}

body {
	background: white;
  position: absolute; left: 0px; top:0px;
  padding-top: 110px;
  width:99%;
  }

p {font-family: 'Raleway', sans-serif;}
h1 {font-family: 'Poppins', sans-serif;}
h2 {font-family: 'Poppins', sans-serif;}

.firstdone {width: 2%; display: inline-block;}
.firstdtwo {width:0px; display: inline-block;}
.twodone {display: none;}

#arrow {
  background-color: white;
  color: black;
  padding-top:10px;
  cursor: pointer;
  border:none;
  flex-grow: 1;
  position: fixed; right: 0px;
  }
#arrow img {height:30px; display: none;}
#arrow:hover {background-color: #2980B9;}

#buttonparade {
  display: inline-flex; 
  height: 50px; 
  width: 57%;
}




.broad {min-width:120px; max-width: 31%; display: inline-block;}
.broad img {min-width:120px; max-width: 100%; display: inline-block; }
.broad:hover {background-color: grey; color: white; cursor: pointer;}
.broad:hover p {display: inline-block; z-index: 1}
.broad:hover .broadword a {color: white;}
.broad:hover .broadword a:hover {color: blue;}
.broad:hover img {opacity: 0.3;}
.broad p {padding-top:3.5%; padding-left:5.5%; font-weight: bold; position: absolute; display: none;}

.secret {max-width:30%;}
.secret p {width:100%; text-align: center;}
.secret img {width: 100%; margin:0px; padding:0px;}
.secret h2 {text-align: center}
.secret:hover {opacity:0.3; cursor: pointer;}

.hidden {display: none;}
.hidden p {width: 30%; margin-right: 20px;}
.hoo {padding-bottom: 20px;}




.broad2 {width:100%; margin-bottom:15px;}
.broad2 p {}
.broadword {min-width: 100px; max-width: 63%; float: left; margin-left: 15px; margin-top:10px;}
.broadword p {display: inline-block; margin: 0px;}
.broadword h2 {display: inline;}
.broadword a {display:none; color: black;}
.broadword a:hover {color: blue;}

.column {flex-grow: 1; max-width: 48%;}
.container {display: inline-flex; width: 100%; justify-content: space-between;}
.containerround {display: inline-flex; width: 100%; justify-content: space-around;}
.center {align-items: center;}
.start {align-items: flex-start;}

#contact {}
#contact h1 {}
#contact img {height: 150px; margin-right: 5px;}
#contact p {padding-top: 10px; margin-right: 5%;}

.caption {display: none;}

.divider {margin: 0px; padding: 0px; height: 5px;}

.hovering {float: right;}
.hovering2 {display: none; color:white;}
.hovering:hover .hovering2 {display: block;}

#imglist{padding:0; float:right;}
#imglist img {display:inline-block; max-width:100%; border: 1px solid black;}
#imglist img:hover {opacity: 0.5;}
#imglist a {width:75px; display:inline-block;}

.link{color: black; font-style: bold;}
.link:hover {background-color: grey;}

.linkdivider {}
.linkdivider img {flex-grow: 1; max-width:30%; margin-right:5px;}
.linkdivider p {flex-grow: 2; color: black; text-align: left;}
.linkdivider:hover p {opacity:0.3;}
.linkdivider:hover img {opacity:0.3;}

.etsy {}
.etsy img {flex-grow: 1; max-width: 30%; margin-left: 10px;}
.etsy p {flex-grow: 2; color: black; text-align: right;}
.etsy:hover p {opacity:0.3;}
.etsy:hover img {opacity:0.3;}

#logo {width:40%; max-height: 100px;}
#logo img {display: inline-block; max-width:100%; max-height: 100px;}

.menu {
  flex-grow: 1;
  padding-top: 15px;
}

.mobile {padding: 10px 15px; display: block; background-color: #2980B9;}
.mobile:hover {background-color: grey;}

#myDropdown{
  display: none;
  position: fixed;
  right:0px;
  top:53px;
  background-color: #2980B9;
  height: 190px;
  width: 145px;
  }

#navbar {
  z-index:3;
  background-color: white;
  position: fixed;
  top:0px;
  display: inline-flex;
  justify-content: space-between;
  height: 100px;
  width: 99%;
}

#portf {position: relative;}
#portfo {display: none; position: absolute; right:145px; top:0px; width: 145px;}
#portf:hover ~ #portfo {display: block;}
#portfo:hover {display: block;}

#portfm {display: block; margin-bottom:0px; height: 35px;}
#portfom {display: none; position: absolute; top:50px; left:0px;}
#portfm:hover ~ #portfom {display: block;}
#portfom:hover {display: block;}
#portfml {position: relative; flex-grow: 1; height: 50px;}

#press{width: 75%; color: black;}
#press p {margin-right:5px; margin-top: 0px; width: 100%}
#pressbox{margin-bottom: 5px;}
#pressbox p {margin-bottom: 0px;}
#pressbox a:hover > img {opacity:0.3;}
#pressbox div:hover {opacity:0.3;}
.presslogo {max-width:20%; max-height: 75px; margin-right: 5px;}

.readmore {display: none; margin: 0px; padding: 0px; height: 0px;}



.slideshow { 
  width:69%; 
  float:right;
}
.slideshow img {width: 90%; padding: 5%}
.slideshow p { width: 30%; padding:5%; color: black; display: inline-block;}
.slideshow h3 {margin:0px; padding:0px; display: inline-block; width: 50%;}

.show {display: all;}
.show a {display: all;}

#wrap {padding-bottom: 20px;}
#wrap img {position: relative; width: 100%}
.wrap {flex-wrap: wrap;}

.widthcontrol {
  width:86%; 
  padding-left: 7%; 
  padding-right: 7%;  
}
.sidepad {width:90%; padding-left: 6%}
.bottom {padding-bottom: 50px;}

@media (max-width: 800px)
{
  #arrow {padding: 15px;}
  #arrow img {display: inline-block;}
  #buttonparade{display: none}
  .broad p {padding-left: 1%; padding-top: 1%;}
  #logo {width:auto; max-width: 85%;}
  #logo img {max-height:65px;}
}
@media (max-width: 550px) 
{
  .broadword {}
  .broadword p {display:none;}
  .readmore {display: inline-block;}
  .broadword a {display:inline-block;}
  .broad {max-width: 100%}
  .broad p {padding-top: 7%; padding-left: 10%}
  }
@media (max-width:475px) {
  .broadword {margin-top: 0px; max-width: 60%;}
  .broadword a {display: inline-block;}
}
@media (max-width:400px)
{
  #arrow {padding-right:50px; float: left;}
  .broad {width: 100%}
  .broadword {max-width: 50%;}
  .broadword a {margin-top: 0px; margin-left: 8px;}
  .readmore {display: none;}
  #imglist a {max-width: 45%}
  #myDropdown {right:15%;}
  #contact p {margin-left: 5%}
  #wrap img {position:relative;}
  #home {color: black;}
}