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


/* Lato Family: 100 Thin, 300 Light, 400 Regular, 700 Bold */

* {
    margin:0;
    padding:0;
    border-collapse: inherit;
} 

html {
	overflow:hidden;
	font-size:62.5%;
	font-family: 'Lato', sans-serif;
	color: white;
}

/*
----------------------------------------------------------------------------Home Section----------------------------------------------------------------------------
*/

#home {
	background-size: cover;
	background-image: url("../photos/christian_bg.jpg");
	background-position: center;
	text-align:center;
	color:#fff;
}

#home h1{
	font-size:4.5rem;
	font-weight:300;
}

#home h2 {
	font-size:2rem;
	font-weight:300;
}

#home .home-text {
	position: relative;
	text-align: center;
	margin-bottom: 5%;
}

.fp-viewing-section0 #fp-nav {
	display: none;
}

.navigation {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}

.navigation ul li {
	list-style-type:none;
}

.navigation a, 
.navigation li {
	color:#fff;
	text-decoration:none;
	font-size:2rem;
}

.navigation span {
	background: rgba(20, 20, 20, 0.3);
	border-radius: 10px;
}

.nav-right span,
.nav-left span,
.nav-bottom span {
	padding: 10px 15px;
}

.navigation li {
	cursor: default;
}

.nav-left {
	position:absolute;
	top:50%;
	-webkit-transform:rotate(-90deg); /* Chrome, Safari, and Opera */
	transform:rotate(-90deg);
}

.nav-bottom {
	position:absolute;
	text-align:center;
	width: 100%;
	bottom:2%;
}

.nav-right {
	position:absolute;
	top:50%;
	right:0;
	-webkit-tranform:rotate(90deg); /* Chrome, Safari, and Opera */
	transform:rotate(90deg);
}

/*
----------------------------------------------------------------- About Section -------------------------------------------------------------------
*/

.about-column {
	display: block;
	float: left;
	width: 25%;
}

.about-column.first {
	width: 50%;
}

.clear {
	clear: both;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    /* padding-top: 0%; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
}

/* Modal Content */
.modal-content {
    background-color: rgba(0,0,0,0.90);
    margin: auto;
    /* padding: 20px; */
	/* border-radius: 20px; */
	height: 100%;
	width: 100%;
    /* border: 1px solid #888; */
}

/* The Close Button */
.close {
    color: #A9A9A9;
    float: right;
    font-size: 28px;
    font-weight: bold;
	padding-right: 0.75%;
}

.close:hover,
.close:focus {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.modal h3 {
 font-size:36px;
 font-weight: bold;
 color: #fefefe; 
}

.modal h4 {
 font-size: 20px;
 font-weight: bold;
 color: #fefefe; 
 margin-bottom: 10px;
}

.modal p {
 margin-bottom: 20px;
}

.modal ul {
 margin-bottom: 20px;
}

.modal ul li {
 margin-left: 40px;
}

.modal .copy-block {
	color: #ffffff;
	padding: 7%;
 	padding-right:12%;
 	font-size: 20px;
}

#about {
	height:auto;
	background-color:black;
}

#about .inner {
	font-size:5rem;
}

/*
---------------------------------------------------------------- Contact Section ------------------------------------------------------------------
*/

.sidr .lead {
	font-size: 1.2em;
	font-weight: 300;
}

.sidr h3 {
	font-size: 3rem;
	font-weight: 300;
	margin: 25px;
}

.sidr .socialize {
	font-size: 2em;
	width: 100%;
	margin-top: 50%;
}

.socialize i {
	font-size: 1.8em;
	margin-right: 4%;
}

.sidr .logo {
	width: 60%;
}

.icons {
	width: 33%;
	display: block;
	float: left;
}

.icons i {
	font-size: 3em;
}

.icons p {
	font-size: 1em;
	margin-top: 4%;
}

.sidr .tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	visibility: hidden;
	position: absolute;
	width: 100%;
	top: 100%;
	left: 0;
	margin-top: 5%;
}

.phone .tooltiptext {
	margin-top: 7.5%;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	white-space: nowrap;
}

.sidr {
  display: block;
  position: fixed;
  text-align: center;
  top: 0;
  height: 100%;
  z-index: 999999;
  width: 33%;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 15px;
  background-color: rgba(0,0,0,0.90);
  color: #fff;
}

.sidr a {
	text-decoration: none;
	color: #fff;
}
.sidr .sidr-inner {
  padding: 0 0 15px;
}
.sidr .sidr-inner > p {
  margin-left: 15px;
  margin-right: 15px;
}
.sidr.right {
  left: auto;
  right: -33%;
}
.sidr.left {
  left: -33%;
  right: auto;
}

.sidr ul {
  display: block;
  margin: 0 0 15px;
  padding: 0;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #4d4d4d;
}
.sidr ul li {
  display: block;
  margin: 0;
  line-height: 48px;
  border-top: 1px solid #4d4d4d;
  border-bottom: 1px solid #1a1a1a;
}
.sidr ul li:hover, .sidr ul li.active, .sidr ul li.sidr-class-active {
  border-top: 0;
  line-height: 49px;
}
.sidr ul li:hover > a,
.sidr ul li:hover > span, .sidr ul li.active > a,
.sidr ul li.active > span, .sidr ul li.sidr-class-active > a,
.sidr ul li.sidr-class-active > span {
  box-shadow: 0 0 15px 3px #222 inset;
}
.sidr ul li a,
.sidr ul li span {
  padding: 0 15px;
  display: block;
  text-decoration: none;
  color: #fff;
}
.sidr ul li ul {
  border-bottom: 0;
  margin: 0;
}
.sidr ul li ul li {
  line-height: 40px;
  font-size: 13px;
}
.sidr ul li ul li:last-child {
  border-bottom: 0;
}
.sidr ul li ul li:hover, .sidr ul li ul li.active, .sidr ul li ul li.sidr-class-active {
  border-top: 0;
  line-height: 41px;
}
.sidr ul li ul li:hover > a,
.sidr ul li ul li:hover > span, .sidr ul li ul li.active > a,
.sidr ul li ul li.active > span, .sidr ul li ul li.sidr-class-active > a,
.sidr ul li ul li.sidr-class-active > span {
  box-shadow: 0 0 15px 3px #222 inset;
}
.sidr ul li ul li a,
.sidr ul li ul li span {
  color: rgba(255, 255, 255, 0.8);
  padding-left: 30px;
}
.sidr form {
  margin: 0 15px;
}
.sidr label {
  font-size: 13px;
}
.sidr input[type="text"],
.sidr input[type="password"],
.sidr input[type="date"],
.sidr input[type="datetime"],
.sidr input[type="email"],
.sidr input[type="number"],
.sidr input[type="search"],
.sidr input[type="tel"],
.sidr input[type="time"],
.sidr input[type="url"],
.sidr textarea,
.sidr select {
  width: 100%;
  font-size: 13px;
  padding: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 0 10px;
  border-radius: 2px;
  border: 0;
  background: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.6);
  display: block;
  clear: both;
}
.sidr input[type=checkbox] {
  width: auto;
  display: inline;
  clear: none;
}
.sidr input[type=button],
.sidr input[type=submit] {
  color: #333;
  background: #fff;
}
.sidr input[type=button]:hover,
.sidr input[type=submit]:hover {
  background: rgba(255, 255, 255, 0.9);
}

#sidr .contact-sidr {
    color: #A9A9A9;
    float: right;
    font-size: 28px;
    font-weight: bold;
	padding-right: 0.75%;
	text-decoration: none;
}

#sidr .contact-sidr:hover,
#sidr .contact-sidr:focus {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}


/*
---------------------------------------------------------------- Portfolio Section ------------------------------------------------------------------
*/


.video {
	width: 50%;
	margin: 0 1% 0 2%;
	float: left;
	display: block;
}


.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
	height: auto; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
}

.embed-container .share-icon,
.embed-container .watch-later-icon {
	display: none;
}

.description {
	width: 37%;
	float: left;
	display: block;
	margin-right: 10%;
}

.description h2 {
	font-size:5rem;
	line-height:4rem;
	margin-bottom:5px;
}

.description h3 {
	font-size:2rem;
	font-weight:200;
	margin-bottom:10px;
}

.description p {
	font-size: 1.5rem;
}


#portfolio5 {
	text-align:center;
}

#portfolio5 .fp-slidesNav.bottom{
	bottom: 25px;
}

#portfolio5 .extras {
	text-align: center;
	position: relative;
	top: 20%;
	z-index: 99;
}

#portfolio5 .extras h2 {
	font-size: 4em;
}

#portfolio5 .extras p {
	font-size: 2em;
}

#portfolio5 .extras a {
	text-decoration: none;
	color: #1efff7;
}

.fp-controlArrow {
	border-width: 0;
	background-image: url("../photos/arrow.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 30px !important;
	height: 45px;
}

.fp-controlArrow.fp-prev {
	border-width: 0;
	-webkit-transform:rotate(-180deg); /* Chrome, Safari, and Opera */
	transform:rotate(-180deg);
	margin-left: 2.5%;
}

.fp-controlArrow.fp-next {
	border-width: 0;
	margin-right: 2.5%;
}

#portfolio5 .video {
	margin: 0 auto;
	float: none;
}



/*
---------------------------------------------------------------- Mobile/Small Screen Optimization ------------------------------------------------------------------
*/

/* ----------------------- iPhone 6s, 7, 8 Portrait --------------------- */

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	
	/* ------------------- Home Section -------------------*/
	
	#home h1{
		font-size:8rem;
	}
	
	#home h2 {
		font-size:4rem;
	}
	
	#home .home-text {
		margin-bottom: 25%;
	}
	
	.navigation a, 
	.navigation li {
		font-size:4rem;
	}
	
	/* -------------------- About Section -----------------*/
	  
	.about-column {
		width: 100%;
	}

	.about-column.first {
		width: 100%;
	}
	
	  
	.modal {
    	overflow: scroll; /* Enable scroll if needed */
		background-color: rgba(0,0,0,0.90);
	}
	
		/* Modal Content */
	.modal-content {
		background-color: rgba(0,0,0,0.0);
	}
	
		/* The Close Button */
	.close {
		position: fixed;
		font-size: 84px;
		padding-right: 2.25%;
		right: 1.75%;
	}
	
	.modal h3 {
		font-size: 50px;
		margin-bottom: 40px;
	}
	
	.modal h4 {
		font-size: 45px;
	 	margin-bottom: 10px;
		margin-top: 30px;
	}
	
	.modal p {
		 margin-bottom: 30px;
	}
	
	.modal ul {
		 margin-bottom: 20px;
	}
	
	.modal ul li {
		 margin-left: 40px;
	}

	.modal .copy-block {
 		font-size: 40px;
	}

	/* ----------------- Contact Section ---------------- */
	
	.sidr .lead {
		margin: 0 auto;
		font-size: 3em;
	}

	.sidr h3 {
		font-size: 9rem;
		font-weight: 300;
		margin: 25px;
	}

	.sidr .socialize {
		font-size: 5em;
		margin-top: 43%;
	}
	
	.socialize i {
		font-size: 1.8em;
		margin-right: 4%;
	}
	
	.sidr.right {
	  right: -100%;
	}
	
	#sidr .contact-sidr {
		font-size: 84px;
		padding-right: 2.25%;
	}
	
	.sidr {
	  display: block;
	  position: fixed;
	  text-align: center;
	  top: 0;
	  height: 100%;
	  z-index: 999999;
	  width: 100%;
	  overflow-x: hidden;
	  overflow-y: auto;
	  font-size: 15px;
	  background-color: rgba(0,0,0,0.90);
	}
	
	.icons i {
		font-size: 12em;
	}
	
	.icons p {
		font-size: 3em;
		margin-top: 4%;
	}
	
	.icons.resume p {
		margin-top: 7%;
	}
	
	.icons.phone p {
		margin-top: 14%;
	}
	
	.icons.email p {
		margin-top: 10%;
	}
	  
	.tooltiptext {
		  font-size: 45px;
	}
	
	/* ------------------- Portfolio Section ------------------- */
	
	#portfolio1 .fp-tableCell,
	#portfolio2 .fp-tableCell,
	#portfolio3 .fp-tableCell,
	#portfolio4 .fp-tableCell {
		vertical-align: top;
	}
	
	.video {
		width: 80%;
		margin: 30% auto 0;
		float: none;
	}
	
	.description {
		width: 80%;
		float: none;
		margin: 2% auto 0;
	}
	
	.description h2 {
		font-size:7rem;
		line-height:6rem;
		margin-bottom:5px;
	}
	  
	#portfolio2 h2 {
		  font-size: 6rem;
	}
	
	.description h3 {
		font-size:4rem;
		font-weight:300;
		margin-bottom:20px;
	}
	
	.description p {
		font-size: 3.5rem;
	}
	  
	#portfolio5 .fp-tableCell {
		vertical-align: baseline;
		padding-top: 37%;
	}
	  
	#portfolio5 .extras {
		top: 20%;
	}

	#portfolio5 .extras h2 {
		font-size: 8em;
	}

	#portfolio5 .extras p {
		font-size: 4em;
	}
	  
	.fp-controlArrow {
		border-width: 0;
		background-size: contain;
		background-repeat: no-repeat;
		width: 60px !important;
		height: 90px;
		top: 80% !important;
	}

	.fp-controlArrow.fp-prev {
		margin-left: 25%;
	}

	.fp-controlArrow.fp-next {
		margin-right: 25%;
	}
}

/* ----------------------- iPhone 6s, 7, 8 Landscape --------------------- */

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

	/* -------------------- About Section -----------------*/
	  
	.about-column {
		width: 100%;
	}

	.about-column.first {
		width: 100%;
	}
	
	  
	.modal {
    	overflow: scroll; /* Enable scroll if needed */
		background-color: rgba(0,0,0,0.90);
	}
	
		/* Modal Content */
	.modal-content {
		background-color: rgba(0,0,0,0.0);
	}
	
		/* The Close Button */
	.close {
		position: fixed;
		font-size: 54px;
		padding-right: 2.25%;
		right: 1.75%;
	}
	
	.modal h3 {
		font-size: 50px;
		margin-bottom: 40px;
	}
	
	.modal h4 {
		font-size: 45px;
	 	margin-bottom: 10px;
		margin-top: 30px;
	}
	
	.modal p {
		 margin-bottom: 30px;
	}
	
	.modal ul {
		 margin-bottom: 20px;
	}
	
	.modal ul li {
		 margin-left: 40px;
	}

	.modal .copy-block {
 		font-size: 40px;
	}

	/* ----------------- Contact Section ---------------- */
	
	.sidr .clear {
		clear: none;
		}
	
	.sidr .lead {
		margin: 0 auto;
		font-size: 1.5em;
	}

	.sidr h3 {
		font-size: 4.5rem;
		font-weight: 300;
		margin: 25px;
	}
	
	.sidr .logo {
		width: 24%;
		float: left;
	}

	.sidr .socialize {
		font-size: 2em;
		margin-top: 27%;
	}
	
	.icons.resume::after {
		clear:both;
	}
	
	.socialize i {
		font-size: 1.8em;
		margin-right: 4%;
	}
	
	.sidr.right {
	  right: -100%;
	}
		/* The Close Button */
	#sidr .contact-sidr {
		font-size: 54px;
		padding-right: 2.25%;
	}
	
	.sidr {
	  display: block;
	  position: fixed;
	  text-align: center;
	  top: 0;
	  height: 100%;
	  z-index: 999999;
	  width: 100%;
	  overflow-x: hidden;
	  overflow-y: auto;
	  font-size: 15px;
	  background-color: rgba(0,0,0,0.90);
	}
	
	.icons {
		width: 25%;
		margin-top: 6%;
	}
	
	.icons i {
		font-size: 5em;
	}
	
	.icons p {
		font-size: 1.5em;
		margin-top: 4%;
	}
	
	.icons.resume p {
		margin-top: 7%;
	}
	
	.icons.phone p {
		margin-top: 14%;
	}
	
	.icons.email p {
		margin-top: 10%;
	}
	  
	.tooltiptext {
		  font-size: 45px;
	}
	  
	  /* --------------------------- Portfolio Section -------------------- */
	  
	  .description h3 {
		font-weight:300;
	}
	  
	.fp-controlArrow {
		margin-top: 5%;  
	}

	.fp-controlArrow.fp-prev {
		margin-left: 10%;
	}

	.fp-controlArrow.fp-next {
		margin-right: 10%;
	}
}

/* ----------------------- iPhone 7+, 8+ Portrait ----------------------- */

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
	
	/* ------------------- Home Section -------------------*/
	
	#home h1{
		font-size:8rem;
	}
	
	#home h2 {
		font-size:4rem;
	}
	
	#home .home-text {
		margin-bottom: 25%;
	}
	
	.navigation a, 
	.navigation li {
		font-size:4rem;
	}
	
	/* -------------------- About Section -----------------*/
	  
	.about-column {
		width: 100%;
	}

	.about-column.first {
		width: 100%;
	}
	
	  
	.modal {
    	overflow: scroll; /* Enable scroll if needed */
		background-color: rgba(0,0,0,0.90);
	}
	
		/* Modal Content */
	.modal-content {
		background-color: rgba(0,0,0,0.0);
	}
	
		/* The Close Button */
	.close {
		position: fixed;
		font-size: 84px;
		padding-right: 2.25%;
		right: 1.75%;
	}
	
	.modal h3 {
		font-size: 50px;
		margin-bottom: 40px;
	}
	
	.modal h4 {
		font-size: 45px;
	 	margin-bottom: 10px;
		margin-top: 30px;
	}
	
	.modal p {
		 margin-bottom: 30px;
	}
	
	.modal ul {
		 margin-bottom: 20px;
	}
	
	.modal ul li {
		 margin-left: 40px;
	}

	.modal .copy-block {
 		font-size: 40px;
	}

	/* ----------------- Contact Section ---------------- */
	
	.sidr .lead {
		margin: 0 auto;
		font-size: 3em;
	}

	.sidr h3 {
		font-size: 9rem;
		font-weight: 300;
		margin: 25px;
	}

	.sidr .socialize {
		font-size: 5em;
		margin-top: 43%;
	}
	
	.socialize i {
		font-size: 1.8em;
		margin-right: 4%;
	}
	
	.sidr.right {
	  right: -100%;
	}
	
	#sidr .contact-sidr {
		font-size: 84px;
		padding-right: 2.25%;
	}
	
	.sidr {
	  display: block;
	  position: fixed;
	  text-align: center;
	  top: 0;
	  height: 100%;
	  z-index: 999999;
	  width: 100%;
	  overflow-x: hidden;
	  overflow-y: auto;
	  font-size: 15px;
	  background-color: rgba(0,0,0,0.90);
	}
	
	.icons i {
		font-size: 12em;
	}
	
	.icons p {
		font-size: 3em;
		margin-top: 4%;
	}
	
	.icons.resume p {
		margin-top: 7%;
	}
	
	.icons.phone p {
		margin-top: 14%;
	}
	
	.icons.email p {
		margin-top: 10%;
	}
	  
	.tooltiptext {
		  font-size: 45px;
	}
	
	/* ------------------- Portfolio Section ------------------- */
	
	#portfolio1 .fp-tableCell,
	#portfolio2 .fp-tableCell,
	#portfolio3 .fp-tableCell,
	#portfolio4 .fp-tableCell {
		vertical-align: top;
	}
	
	.video {
		width: 80%;
		margin: 30% auto 0;
		float: none;
	}
	
	.description {
		width: 80%;
		float: none;
		margin: 2% auto 0;
	}
	
	.description h2 {
		font-size:7rem;
		line-height:6rem;
		margin-bottom:5px;
	}
	  
	#portfolio2 h2 {
		  font-size: 6rem;
	}
	
	.description h3 {
		font-size:4rem;
		font-weight:300;
		margin-bottom:20px;
	}
	
	.description p {
		font-size: 3.5rem;
	}
	  
	#portfolio5 .fp-tableCell {
		vertical-align: baseline;
		padding-top: 37%;
	}
	  
	#portfolio5 .extras {
		top: 20%;
	}

	#portfolio5 .extras h2 {
		font-size: 8em;
	}

	#portfolio5 .extras p {
		font-size: 4em;
	}
	  
	.fp-controlArrow {
		border-width: 0;
		background-size: contain;
		background-repeat: no-repeat;
		width: 60px !important;
		height: 90px;
		top: 80% !important;
	}

	.fp-controlArrow.fp-prev {
		margin-left: 25%;
	}

	.fp-controlArrow.fp-next {
		margin-right: 25%;
	}
}

/* ----------------------- iPhone 7+, 8+ Landscape ----------------------- */

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
	
	/* ------------------- Home Section -------------------*/
	
	#home h1{
		font-size:8rem;
	}
	
	#home h2 {
		font-size:4rem;
	}
	
	#home .home-text {
		margin-bottom: 25%;
	}
	
	.navigation a, 
	.navigation li {
		font-size:4rem;
	}
	
	/* -------------------- About Section -----------------*/
	  
	.about-column {
		width: 100%;
	}

	.about-column.first {
		width: 100%;
	}
	
	  
	.modal {
    	overflow: scroll; /* Enable scroll if needed */
		background-color: rgba(0,0,0,0.90);
	}
	
		/* Modal Content */
	.modal-content {
		background-color: rgba(0,0,0,0.0);
	}
	
		/* The Close Button */
	.close {
		position: fixed;
		font-size: 84px;
		padding-right: 2.25%;
		right: 1.75%;
	}
	
	.modal h3 {
		font-size: 50px;
		margin-bottom: 40px;
	}
	
	.modal h4 {
		font-size: 45px;
	 	margin-bottom: 10px;
		margin-top: 30px;
	}
	
	.modal p {
		 margin-bottom: 30px;
	}
	
	.modal ul {
		 margin-bottom: 20px;
	}
	
	.modal ul li {
		 margin-left: 40px;
	}

	.modal .copy-block {
 		font-size: 40px;
	}

	/* ----------------- Contact Section ---------------- */
	
	.sidr .lead {
		margin: 0 auto;
		font-size: 3em;
	}

	.sidr h3 {
		font-size: 9rem;
		font-weight: 300;
		margin: 25px;
	}

	.sidr .socialize {
		font-size: 5em;
		margin-top: 43%;
	}
	
	.socialize i {
		font-size: 1.8em;
		margin-right: 4%;
	}
	
	.sidr.right {
	  right: -100%;
	}
	
	#sidr .contact-sidr {
		font-size: 84px;
		padding-right: 2.25%;
	}
	
	.sidr {
	  display: block;
	  position: fixed;
	  text-align: center;
	  top: 0;
	  height: 100%;
	  z-index: 999999;
	  width: 100%;
	  overflow-x: hidden;
	  overflow-y: auto;
	  font-size: 15px;
	  background-color: rgba(0,0,0,0.90);
	}
	
	.icons i {
		font-size: 12em;
	}
	
	.icons p {
		font-size: 3em;
		margin-top: 4%;
	}
	
	.icons.resume p {
		margin-top: 7%;
	}
	
	.icons.phone p {
		margin-top: 14%;
	}
	
	.icons.email p {
		margin-top: 10%;
	}
	  
	.tooltiptext {
		  font-size: 45px;
	}
	
	/* ------------------- Portfolio Section ------------------- */
	
	#portfolio1 .fp-tableCell,
	#portfolio2 .fp-tableCell,
	#portfolio3 .fp-tableCell,
	#portfolio4 .fp-tableCell {
		vertical-align: top;
	}
	
	.video {
		width: 80%;
		margin: 30% auto 0;
		float: none;
	}
	
	.description {
		width: 80%;
		float: none;
		margin: 2% auto 0;
	}
	
	.description h2 {
		font-size:7rem;
		line-height:6rem;
		margin-bottom:5px;
	}
	  
	#portfolio2 h2 {
		  font-size: 6rem;
	}
	
	.description h3 {
		font-size:4rem;
		font-weight:300;
		margin-bottom:20px;
	}
	
	.description p {
		font-size: 3.5rem;
	}
	  
	#portfolio5 .fp-tableCell {
		vertical-align: baseline;
		padding-top: 37%;
	}
	  
	#portfolio5 .extras {
		top: 20%;
	}

	#portfolio5 .extras h2 {
		font-size: 8em;
	}

	#portfolio5 .extras p {
		font-size: 4em;
	}
	  
	.fp-controlArrow {
		border-width: 0;
		background-size: contain;
		background-repeat: no-repeat;
		width: 60px !important;
		height: 90px;
		top: 80% !important;
	}

	.fp-controlArrow.fp-prev {
		margin-left: 25%;
	}

	.fp-controlArrow.fp-next {
		margin-right: 25%;
	}
}

/* ----------------------- iPhone X Portrait ----------------------- */

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
	
	/* ------------------- Home Section -------------------*/
	
	#home h1{
		font-size:8rem;
	}
	
	#home h2 {
		font-size:4rem;
	}
	
	#home .home-text {
		margin-bottom: 25%;
	}
	
	.navigation a, 
	.navigation li {
		font-size:4rem;
	}
	
	/* -------------------- About Section -----------------*/
	  
	.about-column {
		width: 100%;
	}

	.about-column.first {
		width: 100%;
	}
	
	  
	.modal {
    	overflow: scroll; /* Enable scroll if needed */
		background-color: rgba(0,0,0,0.90);
	}
	
		/* Modal Content */
	.modal-content {
		background-color: rgba(0,0,0,0.0);
	}
	
		/* The Close Button */
	.close {
		position: fixed;
		font-size: 84px;
		padding-right: 2.25%;
		right: 1.75%;
	}
	
	.modal h3 {
		font-size: 50px;
		margin-bottom: 40px;
	}
	
	.modal h4 {
		font-size: 45px;
	 	margin-bottom: 10px;
		margin-top: 30px;
	}
	
	.modal p {
		 margin-bottom: 30px;
	}
	
	.modal ul {
		 margin-bottom: 20px;
	}
	
	.modal ul li {
		 margin-left: 40px;
	}

	.modal .copy-block {
 		font-size: 40px;
	}

	/* ----------------- Contact Section ---------------- */
	
	.sidr .lead {
		margin: 0 auto;
		font-size: 3em;
	}

	.sidr h3 {
		font-size: 9rem;
		font-weight: 300;
		margin: 25px;
	}

	.sidr .socialize {
		font-size: 5em;
		margin-top: 43%;
	}
	
	.socialize i {
		font-size: 1.8em;
		margin-right: 4%;
	}
	
	.sidr.right {
	  right: -100%;
	}
	
	#sidr .contact-sidr {
		font-size: 84px;
		padding-right: 2.25%;
	}
	
	.sidr {
	  display: block;
	  position: fixed;
	  text-align: center;
	  top: 0;
	  height: 100%;
	  z-index: 999999;
	  width: 100%;
	  overflow-x: hidden;
	  overflow-y: auto;
	  font-size: 15px;
	  background-color: rgba(0,0,0,0.90);
	}
	
	.icons i {
		font-size: 12em;
	}
	
	.icons p {
		font-size: 3em;
		margin-top: 4%;
	}
	
	.icons.resume p {
		margin-top: 7%;
	}
	
	.icons.phone p {
		margin-top: 14%;
	}
	
	.icons.email p {
		margin-top: 10%;
	}
	  
	.tooltiptext {
		  font-size: 45px;
	}
	
	/* ------------------- Portfolio Section ------------------- */
	
	#portfolio1 .fp-tableCell,
	#portfolio2 .fp-tableCell,
	#portfolio3 .fp-tableCell,
	#portfolio4 .fp-tableCell {
		vertical-align: top;
	}
	
	.video {
		width: 80%;
		margin: 30% auto 0;
		float: none;
	}
	
	.description {
		width: 80%;
		float: none;
		margin: 2% auto 0;
	}
	
	.description h2 {
		font-size:7rem;
		line-height:6rem;
		margin-bottom:5px;
	}
	  
	#portfolio2 h2 {
		  font-size: 6rem;
	}
	
	.description h3 {
		font-size:4rem;
		font-weight:300;
		margin-bottom:20px;
	}
	
	.description p {
		font-size: 3.5rem;
	}
	  
	#portfolio5 .fp-tableCell {
		vertical-align: baseline;
		padding-top: 37%;
	}
	  
	#portfolio5 .extras {
		top: 20%;
	}

	#portfolio5 .extras h2 {
		font-size: 8em;
	}

	#portfolio5 .extras p {
		font-size: 4em;
	}
	  
	.fp-controlArrow {
		border-width: 0;
		background-size: contain;
		background-repeat: no-repeat;
		width: 60px !important;
		height: 90px;
		top: 80% !important;
	}

	.fp-controlArrow.fp-prev {
		margin-left: 25%;
	}

	.fp-controlArrow.fp-next {
		margin-right: 25%;
	}
}

/* ----------------------- iPhone X Landscape ----------------------- */

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
	
	/* ------------------- Home Section -------------------*/
	
	#home h1{
		font-size:5rem;
	}
	
	#home h2 {
		font-size:2rem;
	}
	
	#home .home-text {
		margin-bottom: 11%;
	}
	
	.navigation a, 
	.navigation li {
		font-size:2rem;
	}
	
	/* -------------------- About Section -----------------*/
	  
	.about-column {
		width: 100%;
	}

	.about-column.first {
		width: 100%;
	}
	
	  
	.modal {
    	overflow: scroll; /* Enable scroll if needed */
		background-color: rgba(0,0,0,0.90);
	}
	
		/* Modal Content */
	.modal-content {
		background-color: rgba(0,0,0,0.0);
	}
	
		/* The Close Button */
	.close {
		position: fixed;
		font-size: 54px;
		padding-right: 2.25%;
		right: 1.75%;
	}
	
	.modal h3 {
		font-size: 50px;
		margin-bottom: 40px;
	}
	
	.modal h4 {
		font-size: 45px;
	 	margin-bottom: 10px;
		margin-top: 30px;
	}
	
	.modal p {
		 margin-bottom: 30px;
	}
	
	.modal ul {
		 margin-bottom: 20px;
	}
	
	.modal ul li {
		 margin-left: 40px;
	}

	.modal .copy-block {
 		font-size: 40px;
	}

	/* ----------------- Contact Section ---------------- */
	
	.sidr .lead {
		margin: 0 auto;
		font-size: 1.5em;
	}

	.sidr h3 {
		font-size: 4.5rem;
		font-weight: 300;
		margin: 25px;
	}
	
	.sidr .logo {
		margin-top: -4%;
	}

	.sidr .socialize {
		font-size: 2em;
		margin-top: 23%;
	}
	
	.socialize i {
		font-size: 1.8em;
		margin-right: 4%;
	}
	
	.sidr.right {
	  right: -100%;
	}
	
	#sidr .contact-sidr {
		font-size: 54px;
		padding-right: 2.25%;
	}
	
	.sidr {
	  display: block;
	  position: fixed;
	  text-align: center;
	  top: 0;
	  height: 100%;
	  z-index: 999999;
	  width: 100%;
	  overflow-x: hidden;
	  overflow-y: auto;
	  font-size: 15px;
	  background-color: rgba(0,0,0,0.90);
	}
	
	.icons i {
		font-size: 5em;
	}
	
	.icons p {
		font-size: 1.5em;
		margin-top: 4%;
	}
	
	.icons.resume p {
		margin-top: 7%;
	}
	
	.icons.phone p {
		margin-top: 14%;
	}
	
	.icons.email p {
		margin-top: 10%;
	}
	  
	.tooltiptext {
		  font-size: 24px;
	}
	
	/* ------------------- Portfolio Section ------------------- */
	
	#portfolio5 .video {
		margin-bottom: 4%;
	}
	
	#portfolio5 .extras {
		top: 15%;
	}
	 .description h3 {
		font-weight:300;
	}
	  
	.fp-controlArrow {
		margin-top: 5%;  
	}

	.fp-controlArrow.fp-prev {
		margin-left: 10%;
	}

	.fp-controlArrow.fp-next {
		margin-right: 10%;
	}
}