@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block; }

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

  /* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/*----- General Styles -----*/

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
	margin:0;
	padding:0;
	border:none;
	outline: none;
}

img{
  border: none;
  }

.clear{
	clear:both;
}

body{
	font-family: 'PT Sans', sans-serif;
	background:url(../images/bokeh1.jpg);
	background-repeat: no-repeat center center;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;	
  	background-attachment: fixed;
  	color: #444;
}


h2{
	font-size:34px;
	font-family: 'Lobster', cursive;	
	color:#444;
	margin-bottom: 1%;
}

h3, h4{
	text-align: center;
}

h3{
	font-family: 'Lobster', cursive;
	letter-spacing: 2px;	
	font-size: 50px;
	color:#ff6600;
	margin-bottom: 2%;
}

h4{
	font-size: 30px;
	line-height: 50px;
}

h5{
	font-size: 15px;
}

h6{
	font-size: 15px;
	margin-top: 2%;
	font-weight: normal;
}

p{
	font-size:18px;
	line-height: 25px;
}

.work-link{
	color: #ff6600;
	margin-top: 5%;
	font-size: 25px;
	margin-bottom: 5px; /* ↓ Change this to reduce spacing */
}

.container{
	margin:0 auto;
	width:80%;
	background-color: #ffffff;
	box-shadow: 0px 0px 5px #444;
}

/*----- Header -----*/

#header{
	padding-top:1%;
	border-bottom: 6px solid #e88e34;
	background-color: #E7E6E6;
	position: fixed;
	width: 100%;
	z-index: 900;
	top:0px;
}

#header img{
	width:15%;
	margin-left:5%;
}

.header-container{
	margin:0 auto;
	width:80%;
}

nav{
	color:white;
	float:right;
	width:45%;
	margin-top:6%;
	margin-right: 5%;
	padding-bottom: 1%;
}

nav ul li{
	text-decoration: none;
  	list-style-type: none;
	font-size: 16px;
	float:left;
	margin-left:5%;
	padding-right:5%;
	text-transform: uppercase;
	border-right: 2px solid white;
}

nav ul li:last-of-type{
	border-right: none;
	padding-right: 0;
}

a{
	text-decoration: none;
	list-style-type: none;
	cursor: pointer;
	color: #444;
	font-weight: bolder;
}

.active{
 	color: #e88e34;
}

/*----- Home Page -----*/

#home-page{
	padding:15% 10% 12% 10%;
}

#home-page p{
	text-align: center;
	padding-bottom: 5%;
	font-size: 25px;
	font-weight: bold;
}

.intro{
	font-size: 20px;
	margin: 0 auto;
	padding-bottom: 10%;
}

.spacebefore{
	margin-top: 5%;
}

.cycle-slideshow {
    background-color: #ff6600;
    color: #ffffff;
    border-radius: 50px;
    font-size: 20px;
	margin: 0.5rem auto 0rem auto; /* top right bottom left */

    display: flex;
    justify-content: center;
    padding: 0; /* Let inner div handle spacing */
    width: 100%;
    max-width: 900px; /* Controls width of the entire orange box */
    box-sizing: border-box;
}

.cycle-slideshow > div {
    padding: 50px;
    width: 100%;
    box-sizing: border-box;
}

/*----- Story Page -----*/

#the-story{
	padding:12% 10% 12% 10%;
	background-color: #E7E6E6;
}

.story-left{
	float:left;
	width:60%;
	margin-right: 5%;
}

.story-right{
	float:right;
	width:30%;
}

.story-right img{
	width:100%;
	border-radius: 10px;
	border: 2px solid #fff;
}

/*----- Contact Page -----*/

#contact-page{
	padding:12% 10% 17% 10%;
}

#contact-1, #contact-2, #contact-3{
	float:left;
	width: 33%;
	text-align: center;
	padding-top: 5%;
}

#contact-page a{
	color: #444;
	font-weight: normal;
}

.fa-paper-plane, .fa-file-pdf-o, .fa-linkedin-square{
	color: #444;
	font-size: 65px;
	margin: 20% 0 5% 0;
}

/*----- Footer -----*/

#footer{
	padding: .5% 0 .5% 0;
	background-color: #E7E6E6;
}

#footer h5{
	margin-top: .5%;
	margin-left: 5%;
	float:left;
	width:200px;
}

#footer img{
	margin-right: 5%;
	float:left;
	width:50px;
}

/****************** Work Page ***********************/

.top-image{
	float:left;
	width:45%;
	padding-left: 20%;
	padding-top: 3%;
}

.top-image img{
	width: 100%;
}

.top-p{
	float:right;
	width:50%;
	padding-right: 20%;
	padding-top: 3%;
	text-align: left;
	font-weight: normal;
}

.work-left{
    float:left;
    width: 30%;
    margin-left:5%;
}

.work-right{
    float:right;
    width: 50%;
    margin:0 10% 0 0;
}

.work-right img{
	width: 100%;
	padding-bottom: 5%;
}

.work-right iframe{
	width: 100%;
}

.grey{
    background-color: #E7E6E6;
}

.fa-circle-down {
  font-size: 60px;
  margin-top: 5%;
  margin-bottom: 3%;
  width: 100%;
  text-align: center;
  display: block; /* Add this if not present */
}


.greytext{
    color: #dcdcdc;
}

.whitetext {
  color: white;
}

.accordion-section-title h1{
    text-align: center;
    padding-top: 30px;
}

.top{
	margin-top: 5%;
}

.work-left h4{
	text-align: left;
	line-height: 35px;
}

.border{
	border-top: 1px solid #dcdcdc;
	margin: 0 0 5% 0;
}

.border-white{
	border-top: 1px solid #fff;
	margin: 0 0 5% 0;
}

.slicknav_menu {
	display:none;
}

/*------------------- Media Queries ----------------------*/

@media screen and (max-width: 640px) {
	.js #menu {display:none;}
	
	.js .slicknav_menu {display:block;}
}

@media only screen and (max-width: 1270px) {
	nav{width:50%;}
}

@media only screen and (max-width: 1080px) {
	nav{width:60%;}
}

@media only screen and (min-width: 641px) and (max-width: 1024px){
	  
	  body {background:none; box-shadow:none; background-color: white;}  

	  .container {width: 100%;}
	  
	  nav ul li{margin-left:10px;padding-right:10px;border-right: none;}

	  #header img{width: 20%;margin-left: none;}
}

@media only screen and (min-width: 320px) and (max-width: 640px) {
  	
  	body {background:none; box-shadow:none; background-color: white;}  
  
	.container {width: 100%;}

	#header img, #nav{float:none;}

	#header img{margin:0 auto; width:100%; position: relative; padding: 15% 20% 0 20%;}

	.slicknav_nav{margin:0 auto;}

	#home-page{	padding:50% 5% 10% 5%;}

	#home-page p {font-size: 20px;padding-bottom: 3%;}

	#the-story{padding:15% 5% 5% 5%;}

	#contact-page{padding:5% 5% 5% 5%;}

	.story-left, .story-right{float:none;}

	.story-left{width: 100%}

	.story-right{width:80%; margin:0 auto; padding-top: 5%;}

	h3{font-size: 40px;line-height: 45px;}

	h4{font-size: 20px;line-height: 30px;}

	#contact-1, #contact-2, #contact-3{float:none;margin:0 auto;width: 80%;text-align: center;padding-top: 1%;}
	
	.fa-paper-plane, .fa-file-pdf-o, .fa-linkedin-square{margin: 7% 0 2% 0;}

	#footer h5{margin:0 auto;text-align: center;float:none;width:100%;}

	#footer img{display: none;}

	.top-image, .top-p{float:none;}

	h1:first-of-type{padding-top: 30%;}

	.top-image{width:80%;margin:0 5% 0 5%;padding-left: 0;}

	.top-p{width: 90%;margin:0 auto;padding-right: 0;}

	.work-left, .work-right{float: none;}

	.work-left{width:90%;margin:0 5% 5% 5%;}

	.work-right{width: 80%;margin:0 auto;}
}