@charset "utf-8";
/* CSS Document */

h1, h2, h3, h4, p {
	font-family: 'Raleway';
}

body {
	margin:0; padding:0; 
	font-family: 'Raleway'
}

.hp-container {
	background-color: blue;
}

h1 {
	color: white !important;
	font-weight: bold !important;
	font-size: 3em !important;
	margin: 20px;
}

.hp-intro {
	height: 100vh;
	background-color: #000942;
}

.hp-services {
	background-color: white; 
	height: 100vh; 
	padding: 40px 20px 20px 28px;
}


.white-text {
	color: white;
	font-weight: 900;
	font-size: 8em;
	margin: 80px 0 40px 20px;
}

.services {
	font-weight: bold;
	font-size: 4em;
}

.hp-big-text {
	font-size: 6em;
	font-weight: bold;
}

.hp-logos {
	display: flex;
	flex-direction: row;
	width: 30%;
	margin: 90px 0 40px 40px;

}

.HomePageTitle, .Project-page-title, .Project-page-title-1 {
	position: absolute;
	top: 600px; right: 40px; z-index: 100;
	color: orange !important;
	font-size: 40pt;
	padding-left:220px; padding-right: 10px;
	font-family: 'Merriweather Sans', sans-serif !important;  font-weight: bold;
}

article {
	min-height: 100vh;
}
	article p {
		font-size: 1.5em;
	}

section {
	/*height: 80vh;*/
	padding: 0;
	margin:0;
}

article: {
	margin: 0;
	padding: 0;
}


.portfolio-container {
	display: flex;
	flex-direction: row;
}

.portfolio-item {
	width: 400px;
	height: 300px;
	background-color: #FFF0D6;
	margin: 20px 10px 10px 0;
	padding: 30px;
}

.InternalPagesImg {max-height: 650px; width: 100%;} 

/* **** Footer **** */
footer {
	min-height: 100px; 
	width: 100%;
	background-color: #323a45;
	color: #ced3d8;
	margin: 0;
}
	footer h3 {margin-top: 0;  color: #ced3d8;}
	footer a {
		text-decoration:none;
	}

.footer-row {
	background-color: #323a45;
	padding: 20px 0 40px 0;
}
	
.SocialIcons {width: 50px; height: 50px;}


.menu-toggle-grippy {
  border-bottom: 5px solid #fff;
  border-top: 5px solid #fff;
  float: left;
  line-height: 0;
  margin-right: 1em;
  padding: 5px 0;
  text-indent: -999em;
  width: 35px;
  &:after:
    background: #fff;
    content: '';
    display: block;
    height: 5px;
}
/* ----------------------------------------------- */


/*------------------------------------------*/
/*   Internal Pages
/*------------------------------------------*/
.InternalPagesBox {
	width:95%;
	height: 300px;
	margin: 35px 35px 35px 0;
	padding: 40px;
	background-color: #FFE7B9;
}

.InternalPagesImg {width: 100%; max-height: 750px !important; } 
 
.InternalPhotos {width: 900px; }

.Project-page-title, .Project-page-title-1 {
	color: orange !important;
	top: 470px; left: 70px;
	font-size: 60pt;
    padding-right: 260px;
}

.Project-page-title-1 {top: 650px;}

 
/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 321px) {
	.intro {
		height: 20vh;
	}
	.hp-intro {
		height: 70vh;
	}
	.white-text {
		font-size: 3em;
	}
	.services {
		font-size: 2em;
	}
	.hp-big-text {
		font-size: 3em;
	}
	
	.portfolio-container {
		flex-direction: column;
	}
	
	.portfolio-item {
		width: 95%;
	}

	.HomePageTextBox {
		padding: 20px 10px 20px 10px;
	}
	
	.VideoTextBox, .VideoBox {
		padding: 20px 4px 20px 10px;
	}
	
	.parallaxBox {
		background:url(images/cup-of-coffee-HP-main-Mobile.jpg) fixed;
		margin: 0; padding: 0; 
		background-repeat:no-repeat;
		background-size: 100% 100%;

		height: 300px;
		display:block;
	}
	
	.HP-TextBox {margin-top: 15px; }
	
	.HP-TextBox-Left {
		width:20%;
		float:left;
	}
	
	.HP-Text-box {
		margin: 4px;
		float: left;
	}
		
	.LogoImg { width: 260px; margin: 0 auto;}
	
	.navbar-collapse {background-color: #323a45 !important; }
		
	
	 h1 {
        font-size: 16px !important;
	}
	
	.navbar-nav  {background-color: #323a45 !important; }
	
	.InternalPagesBox {
		width:80%;
		height: 120px;
		margin: 10%;
		padding: 5%;
	
	}
	
	.Project-page-title {
		top: 80px; left: 20px;
		font-size: 20pt;
		padding-left:20px; padding-right: 60px;
	}
	
	.ProjectBox {height: 270px !important;}
	.InternalPagesImg {max-height: 250px !important; } 
}
 
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
	.intro {
		height: 20vh;
	}
	.hp-intro {
		height: 70vh;
	}
	.white-text {
		font-size: 3em;
	}
	.services {
		font-size: 2em;
	}
	.hp-big-text {
		font-size: 2em;
	}
	
	.portfolio-container {
		flex-direction: column;
	}
	
	.portfolio-item {
		width: 95%;
	}

    .HomePageTextBox {
		padding: 20px 10px 20px 10px;
	}
	
	.VideoTextBox, .VideoBox {
		padding: 20px 4px 20px 10px;
	}
	
	.parallaxBox {
		background:url(images/cup-of-coffee-HP-main-Mobile.jpg) fixed;
		margin: 0; padding: 0; 
		background-repeat:no-repeat;
		background-size: 100% 100%;

		height: 200px;
		display:block;
	}
	
	.HP-TextBox {margin-top: 15px; }
	
	.HP-TextBox-Left {
		width:20%;
		float:left;
	}
	
	.HP-Text-box {
		margin: 4px;
		float: left;
	}
		
	.LogoImg { width: 260px; margin: 0 auto;}
	
	.navbar-collapse {background-color: #323a45 !important; }
		
	
	 h1 {
        font-size: 16px !important;
	}
	
	.navbar-nav  {background-color: #323a45 !important; }
	
	.InternalPagesBox {
		width:80%;
		height: 120px;
		margin: 10%;
		padding: 5%;
	
	}
	
	.Project-page-title, .Project-page-title-1 {
		top: 80px; left: 20px;
		font-size: 20pt;
		padding-left:20px; padding-right: 60px;
	}
	
	.ProjectBox {height: 270px !important;}
	.InternalPagesImg {max-height: 250px !important; } 
}

/* --- Extra small devices portrait phones, less than 544px --- */
@media (max-width: 543px) {
	.intro {
		height: 20vh;
	}
	.hp-intro {
		height: 70vh;
	}
	.white-text {
		font-size: 3em;
	}
	.services {
		font-size: 2em;
	}
	.hp-big-text {
		font-size: 2em;
	}
	.portfolio-container {
		flex-direction: column;
	}
	.portfolio-item {
		width: 95%;
	}
	.parallaxBox {
		height: 350px;
	}
	.HomePageTitle {
		top: 270px; 
		font-size: 20pt;
		padding-left: 5px; padding-right: 5px;
	}
	
	.HomePageTextBox {
		padding: 20px 10px 20px 10px;
	}
	
	.VideoTextBox, .VideoBox {
		padding: 20px 4px 20px 10px;
	}
	
	
	.HP-TextBox {margin-top: 15px; }
	
	.HP-TextBox-Left {
		width:20%;
		float:left;
	}
	
	.HP-Text-box {
		margin: 0 auto;
	}
		
	.LogoImg { width: 260px; margin: 0 auto;}
	
	.navbar-collapse {background-color: #323a45 !important; }
		
	
	 h1 {
        font-size: 16px !important;
	}
	
	.navbar-nav  {background-color: #323a45 !important; }
	
	.InternalPagesBox {
		width:80%;
		height: 120px;
		margin: 10%;
		padding: 5%;
	
	}
	
	.Project-page-title, .Project-page-title-1 {
		top: 150px; left: 20px;
		font-size: 20pt;
		padding-left:20px; padding-right: 20px;
	}
	
	.ProjectBox {height: 270px !important;}
	.InternalPagesImg {max-height: 250px !important; } 
}

/* --- Small devices (landscape phones, 544px and up) --- */
@media (min-width: 544px) and (max-width: 767px) {
	.intro {
		height: 20vh;
	}
	.hp-intro {
		height: 80vh;
	}
	.white-text {
		font-size: 4em;
	}
	.services {
		font-size: 2em;
	}
	.hp-big-text {
		font-size: 4em;
	}
	.parallaxBox {
		height: 350px;
	}
	.HomePageTitle {
		top: 280px; 
		font-size: 22pt;
		padding-left:10px; padding-right: 10px;
	}
	
	.HomePageTextBox {
		padding: 10px 10px 20px 10px;
	}
	
	.VideoTextBox, .VideoBox {
		padding: 20px 4px 20px 10px;
	}
	
	.HP-TextBox {margin-top: 15px; }
	
	.HP-TextBox-Left {
		width:20%;
		float:left;
	}
	
	.HP-Text-box {
		margin: 0 auto;
	}
		
	.LogoImg { width: 260px; margin: 0 auto;}
	
	.navbar-collapse {background-color: #323a45 !important; }
		
	
	 h1 {
        font-size: 16px !important;
	}
	
	.navbar-nav  {background-color: #323a45 !important; }
	
	.InternalPagesBox {
		width:80%;
		height: 120px;
		margin: 10%;
		padding: 5%;
	
	}
	
	.Project-page-title, .Project-page-title-1 {
		top: 310px; left: 20px;
		font-size: 30pt;
		padding-left:20px; padding-right: 60px;
	}
	
	.ProjectBox {height: 250px !important;}
	.InternalPagesImg {max-height: 450px !important; } 
}


/* --- Medium devices (tablets, 768px and up) --- */
@media (min-width: 768px) and (max-width: 991px) {
	.parallaxBox {
		height: 400px;
	}
	.HomePageTitle {
		top: 320px; 
		font-size: 25pt;
		padding-left:120px; padding-right: 10px;
	}
	.hp-big-text {
		font-size: 4em;
	}
	
	.HomePageTextBox {
		padding: 20px 10px 20px 10px;
	}
	
	.VideoTextBox, .VideoBox {
		padding: 20px 10px 20px 50px;
	}
		
	.HP-TextBox {margin-top: 15px; width: 95%;  }
	
	.HP-TextBox-Left {
		width:15%;
		float:left;
	}
	
	.HP-Text-box {
		margin: 0 auto;

	}
	
	.LogoImg { width: 260px; margin: 0 auto;}
	
	.navbar-collapse {background-color: #323a45 !important; }	

	h1 {
        font-size: 36px !important;
	}
	
	.navbar-nav  {background-color: transparent !important; }	
	
	.Project-page-title, .Project-page-title-1 {
		top: 360px; left: 20px;
		font-size: 40pt;
		padding-left:20px; padding-right: 60px;
	}
	
	.ProjectBox {height: 250px !important;}
	.InternalPagesImg {max-height: 500px !important; } 
}
  
 
/* --- Large devices (desktops, 992px and up) --- */
@media (min-width: 992px) and (max-width: 1199px) { 
	.parallaxBox {
		height: 600px;
	}
	.HomePageTitle {
		top: 530px; 
		font-size: 30pt;
		padding-left:120px; padding-right: 10px;
	}
	.HomePageTextBox {
		padding: 20px 100px 20px 100px;
	}
	
	.VideoTextBox, .VideoBox {
		padding: 20px 40px 20px 200px;
	}
	
	.HP-TextBox {margin-top: 15px; width: 95%;  }
	
	.HP-TextBox-Left {
		width:15%;
		float:left;
	}
	
	.HP-Text-box {
		margin: 0 auto;

	}
	
	h1 {
        font-size: 36px !important;
	}
	
	.navbar-nav  {background-color: transparent !important; }
	
	.Project-page-title, .Project-page-title-1 {
		top: 350px;
		font-size: 50pt;
		padding-left:20px; padding-right: 60px;
	}
	.ProjectBox {height: 250px !important;}
	.InternalPagesImg {max-height: 500px !important; }
}

/* --- Large devices (desktops, 1200px to 1475px) --- */
@media (min-width: 1200px) and (max-width: 1575px) { 
	.Project-page-title, .Project-page-title-1 {
		top: 500px;
		font-size: 50pt;
		padding-left:20px; padding-right: 40px;
	}
	
}
 
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
{
	h1 {
        font-size: 36px !important;
	}
	
	.navbar-nav  {background-color: transparent !important; }
	
	.Project-page-title, .Project-page-title-1 {
		top: 350px;
		font-size: 50pt;
		padding-left:20px; padding-right: 60px;
	}
	
	.ProjectBox {height: 250px !important;}
	.InternalPagesImg {max-height: 500px !important; }
}