/*********************************** 
GENERAL
************************************/

/*Body*/

/*Product text*/
.product-description {
	border-bottom: 1px solid #E1E8EE;
	margin-bottom: 20px;
}

.product-description p {
	font-size: 12px;
	font-weight: 300;
	/*color: #86939E;*/
	color:#000;
	line-height: 6px;
}

/*
.text p{
	float: left;
	color:#000;
	font-size:12px;
}
*/

/*Product*/

.product {
	float: left;
	padding: 25px;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #ffffff;
  color: #000000;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  padding-top: 2%;
  padding-bottom: 0%;
  font-size: 0.75 em;
  color: #000000;
}

.container {
  height: 70%;
  width: 70%;
}

.container2 {
  height: 100%;
  width: 100%;
}

.container3 {
  height: 83%;
  width: 83%;
}

.container4 {
  height: 60%;
  width: 60%;
}

/*Lightbox*/

/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 6%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}

/*Products*/

.products {
  display: flex;
  flex-wrap: wrap;
}

div {
   text-align: center;
}

/*Image*/

img {
    /*height: 200px;
	width: 200px;*/
	padding: 25px;
	margin: 0 10px 10px 10px;
}

.container {
  height: 50%;
  width: 50%;
}


img {
  max-width: 100%;
}

img.stretchy {
  width: 100%;
  height: 100%;
}

/*.img-with-text {
    text-align: center;
    width: [width of img];
	float: left;
}
*/

img li {
    list-style: none;
}

/*Text*/

p {
   float: left;
   text-align: center;
   padding: 10px;
}

/*primary-light-blue: #8DB9ED;
primary-line-color: #ccc
* {
  box-sizing: border-box
}
*/

html, body {
  height: 100%
}

/*Text*/

p {
   float: left;
   text-align: center;
   padding: 10px;
}

/*primary-light-blue: #8DB9ED;
primary-line-color: #ccc
* {
  box-sizing: border-box
}
*/

html, body {
  height: 100%
}

body {
	font: 11px "Open Sans", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: auto;
  
  	justify-content: space-between
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color:#fff;
}

/*********************************** 
SLIDER
************************************/

/*Slideshow*/

#slider {
    width:1200px;
    height:60vh;
    background:url('your_image.jpg') no-repeat center center;
    background-size:cover;
    overflow:hidden;
}

#slider {
	overflow: hidden;
}

#slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	left: 0;
	animation: 20s slider infinite;
}

#slider figure img {
	float: left;
	width: 20%;
	height: 450px;
	padding: 0;
	margin: 0;
}

@keyframes slider {
	0% {
		left: 0;
	}
	20% {
		left: 0;
	}
	25% {
		left: -100%;
	}
	45% {
		left: -100%;
	}
	50% {
		left: -100%;
}

}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/*********************************** 
HEADING
************************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
} 

h1  {
  font-family: 'Open Sans', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: bold;
  line-height: 0.8em;
}

h2 {
   font-size: 0.75em;
   margin: -5px 0 0;
   font-weight: normal;
}

h3 {
   margin: 0 0 1em 0;
}

/*********************************** 
NAVIGATION
************************************/

/*navigation*/

nav {
	padding: 0;
	margin-top: 10px;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

nav li {
    display: inline-block;
    margin: 10px;
}

a {
	text-decoration: none;
}


ul {
	text-decoration: none;
	list-style: none;
	padding: 5px 0px;
}

ul li {
	padding: 5px;
}

/*********************************** 
FOOTER
************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  color: #000;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

footer {
  width: 100%;
  bottom: 0px;
  height: 60px;
  text-align: center;
  padding-top: 150px;
}

/*********************************** 
PAGE: ABOUT
************************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

/*********************************** 
PAGE: PORTFOLIO
************************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #ffffff;
  color: #000000;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  padding-top: 2%;
  padding-bottom: 0%;
  font-size: 0.75 em;
  color: #000000;
}

img.stretchy {
  width: 100%;
  height: 100%;
}

.container {
  height: 70%;
  width: 70%;
}

.container2 {
  height: 100%;
  width: 100%;
}

.container3 {
  height: 83%;
  width: 83%;
}

.container4 {
  height: 60%;
  width: 60%;
}

/*********************************** 
PAGE: CONTACT
************************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}

/*********************************** 
PAGINATION
************************************/

.pagination {
    float:right;
}

/*********************************** 
COLORS
************************************/


/* site body */
body {
  background-color: #ffffff;
  color: #000;
}

/* white header */
header  {
  background: #ffffff;
  border-color: #ffffff;
}

/* nav background on mobile */
nav {
  background: #ffffff;
}

/* logo text */
h1, h2 {
    color: #000;
}

/* links */
a {
  color: #000;
}

/* nav link */
/*nav a, nav a:visited {
  color: #000;
}
*/
/* selected nav link */
nav a.selected {
  padding: 0;
}

nav a:hover {
  color: #808080;
}

nav .dropdown-content a:hover {
  color: #fff;
}

/*********************************** 
LIGHTBOX
************************************/


/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 6%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}