@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,900');

/*
==================
	COLORS & FONTS
==================
		

lightest Gray: #fafafa;
Gray: #e1e1e1;
Dark Gray: #141414;

fonts:
font-family: 'Source Sans Pro', sans-serif;
*/


/*
==================
	UNIVERSAL
==================
		*/

body {
background-color: #fafafa;
}

#fullpage img:hover, a:hover, .display .img-fluid:hover, .circle:hover, .close-modal:hover,
#nav-pages a:hover, #animatedModal button:hover, #thankyou .btn-secondary:hover,
.modal-logo:hover, #nav a:hover, #nav .logo:hover, .btn-success:hover, #header-404 img:hover {
    -webkit-transition: all ease .500s;
    -moz-transition: all ease .500s;
    transition: all ease .500s;
}


/*
==================
	NAV
==================
		*/

#nav {
background: rgba(0,0,0,0.9);
box-shadow: 0 10px 20px -4px rgba(0,0,0,0.4);
position: fixed;
z-index: 100;
width: 100%;
}

#nav .container {
max-width: 1400px;
margin: 0 auto;
}

.logo-xs {
	width: 50px;
	height: auto;
	padding: 10px;
}

.logo {
	display: none !important;
	width: 275px;
	height: auto;
	padding: 10px;
}

/*
.nav-btn img {
	position: absolute;
	max-width: 40px;
	top: 10px;
	right: 10px;
	z-index: 101;
}*/

.nav-btn img {
	position: absolute;
	width: 40px;
    height: 178px;
	right: 10px;
	z-index: 101;
    top: -70px !important;
}

/* MODAL NAVIGATION */

#animatedModal {
  	width: 100%;
  	height: 100%;
  	margin: 0;
  	padding: 0;
	background: rgba(0,0,0,.98);
	overflow-scrolling: touch;
  	-webkit-overflow-scrolling: touch;
}

.modal-content {
	background: rgba(0,0,0,.98);
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 25px;
    width: 50px;
    height: 50px;
    background-color: transparent;
    cursor: pointer;
    z-index: 9999 !important;
}

.close-modal .lr {
    width: 2px;
    height: 35px;
    margin-left: 35px;
    background-color: #888888;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close-modal .lr .rl {
    width: 2px;
    height: 35px;
    background-color: #888888;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

#nav-pages, #animatedModal button {
	font-size: 1.2em;
	color: #fafafa;
	text-align: center;
	text-transform: uppercase;
}

#nav-pages .col-12 {
border-bottom: 2px solid rgba(255,255,255,0.35);
padding: 15px 0;
}

#nav-pages a {
	color: #fafafa;
	padding: 10px;
	font-weight: 900;
}

#animatedModal button {
	font-weight: 600;
	margin-top: 35px;
	background: none;
	border: 2px solid rgba(255,255,255,0.35);
	opacity: 0.4;
}

/* HOVER FX */

#animatedModal a:hover {text-decoration: none;}

.modal-logo:hover, .modal-logo:active,
.modal-logo:focus {opacity: .2;}

.close-modal:hover {  opacity: .25;}

#nav .logo:hover, #nav a:hover, #nav a:focus, #nav a:active, #nav-pages a:hover, #nav-pages a:focus,
#nav-pages a:active {
	opacity: .2;
}

#nav-pages a:hover {border-bottom: none;}

#animatedModal button:hover, #animatedModal button:focus,
#animatedModal button:active {
	opacity: 1;
}

	
/*
==================
	LANDING PAGE
==================
		*/

.header {
top: 50%;
transform: translateY(-50%);
position: relative;
padding: 15px;
}


h1.main{
font-family: 'Source Sans Pro';
font-weight: 900;
line-height: 1em;
margin:0;
padding: 0 20;
color: #fff;
font-size: 1.8em;
}

.sub {
	color: #fafafa;
	font-size: 1em;
	margin: auto;
	width: 100%;
	font-weight: 500;
	line-height: 1.5em;
	padding: 10px 20px;
} 

#fullpage img {
	width: 50px;
    height: auto;
}

#fullpage img:hover {
	opacity: .2;
}

#section2 .sub a {color: #000;}

#section2 .fa-arrow-alt-circle-right {
	color: #000;
}

/* Centered texts in each section
* --------------------------------------- */
.section{
text-align:center;
}


/* Backgrounds will cover all the section
* --------------------------------------- */
#section1,
#section2,
#section3,
#slide1,
#slide2{
background-size: cover;
background-attachment: fixed;
}

/*Adding background for the slides
* --------------------------------------- */
#section1 {
	background-image: url('../img/home/websites-xs.jpg');
	padding: 6% 0 0 0;
	}

#section2 {
	background-image: url('../img/home/design-xs.jpg');
	padding: 6% 0 0 0;
	}

#section3 {
	background-image: url('../img/home/photo-xs.jpg');
	padding: 6% 0 0 0;
	}
/*
VIDEO PLAYBACK
*/
#myVideo {
position: absolute;
bottom: 0;
top:0;
right:0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-color: black;
background-image: "";
background-position: center center;
object-fit: cover; 
}

/*
==================
	HERO SECTIONS
==================
		*/
		
		
		.hero {	position: relative;	}

		.hero-overlay {
		  background: -webkit-linear-gradient(bottom, rgba(0,0,0,.7), transparent);
		  background: -o-linear-gradient(bottom, rgba(0,0,0,.7), transparent);
		  background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
		  width: 100%;
		  color: #fff;
		  height: 100%;
		}

		.hero-text {
			position: absolute;
			left:0;
			right:0;
			margin: auto;
			bottom: 15px;
			text-transform: uppercase;
			font-weight: 900;
		}

		#websites {
		background: url('../img/hero/web-xs.jpg') center no-repeat;
		background-size: cover;
		height: 550px;
		}

		#design {
		background: url('../img/hero/design-xs.jpg') center no-repeat;
		background-size: cover;
		height: 550px;
		}
        
		#photography {
		background: url('../img/hero/photography-xs.jpg') center no-repeat;
		background-size: cover;
		height: 550px;
		}
        
		#about {
		background: url('../img/hero/about-xs.jpg') center no-repeat;
		background-size: cover;
		height: 550px;
		}

/*
==================
	PROJECTS
==================
		*/

		.display {background: #fafafa;}

		#projects {	padding: 10px; }

		.display .intro {
			font-size: 1.2em;			
			line-height: 2em;
			padding-top: 25px;
			max-width: 1400px;
			margin: auto;
            text-align: left;
		}

		.display .img-fluid {
			margin-top: 25px;
			margin-bottom: 25px;
			box-shadow: 0 10px 20px -4px rgba(144,144,144,0.7);
			width: 100%;
			height: auto;
		}

		.display img {border: 1px solid #e1e1e1;}

		.hover { display: none;}

		.display a:hover .hover {
			display: block;
			position: absolute;
			color: #fafafa;
			font-size: 1.8em;
			width: 90%;
			top: 30%;
			text-align: center;
			z-index: 100;
		}

		.display .img-fluid:hover {
			box-shadow: none;
			transform: scale(.98);
			opacity: 0.8;
			 -webkit-filter: blur(1px);
		}

		.fa-search {
			font-size: 1.2em;
		}

		.project-title {font-size: 1em;}
		
		.project-title {
			font-family: 'Source Sans Pro', sans-serif;
			font-weight: 600;
			color: #141414;
			text-align: center;
			line-height: 1em;
			margin-bottom: 20px;
			text-transform: uppercase;
			font-size: 1.3em;
		}

		.circle {
			background: #141414;
			color: #fff;
			width: 40px;
			height: 40px;
			border-radius: 50px;
			text-align: center;
			font-size: 1.32em;
			padding: 5px 0;
		}

		.circle:hover {
			background: #8E8E8E;
		}
		
		.circle a {
			color: #fafafa;
		}

		.project-links {
			max-width: 130px;
			margin: 0 auto;
			margin-top: -10px;
		}
	
		.arrow { margin: auto; }	

/*
==================
	PHOTOGRAPHY
==================
		*/

* {
    box-sizing: border-box;
}

#photo-collage {
	margin-bottom: 5px;
}

#photo-collage img {
width: 100%;
background: #fafafa;
}

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}


/*
=============
ABOUT SECTION
=============
*/

	#profile {max-width: 225px;	}

	.work-title {
		margin-top: -15px;
		font-size: 1.3em;
		font-weight: 700;
		text-transform: uppercase;
		line-height: 1.2em;
		margin-bottom: 25px;
	}

	#call-out hr {
		height: 0.75px;
		width: 100%;
		background: rgba(0,0,0,0.2);
	}

	#call-out p {
		font-size: 1.25em;
		font-weight: 400;
		text-align: center;
		max-width: 850px;
		margin: auto;
		margin-bottom: 35px;
		padding: 0 35px;
		
	}

	#call-out a {
		text-decoration: none;
		color: #000;
		font-weight: 600;
	}

	#call-out a:hover, #call-out a:focus, #call-out a:active { 
	opacity: .2;
	}


/*
=============
Footer Section
=============
*/


footer {
	background: #000;
	text-align: center;
}

footer, footer a  {
    color: #fff;
	text-transform: none;
}

footer .footer-col { margin-bottom: 50px;}

footer { padding: 25px 0;}

footer {
font-family: inherit;
font-weight: 400;
font-size: 1.2em;
margin-bottom: 0;
}

footer img {
width: 450px;
height: auto;
padding: 50px 0;
}

.footer-logo {
display: inline-block;
max-width: 450px;
margin: 0 auto;
}

footer #social {
max-width: 350px;
padding-bottom: 50px;
margin: 0 auto;
font-size: 2em;
z-index: 100;
position: relative;
}

footer .btn {
background: none;
border: 1px solid #fafafa;
font-size: 0.6em;
padding: 10px 20px;
}

footer p {padding: 0 25px;}

.footer-logo:hover, .footer-logo:focus, 
.footer-logo:active {
	opacity: .2
}

#social .btn:hover, #social .btn:focus, #social .btn:active {
color: #fff;
background: none;
border: 1px solid #fafafa;
opacity: .2;
}

/*LANDING PAGE OVERRIDE */

#footer-home {
	position: fixed;
	z-index: 100;
	bottom: 0;
	width: 100%;
	padding: 5px 0;
	font-size: 1em;
	
}

#footer-home p {
	margin-bottom: 0;
	font-size: 0.65em;
}
/*
=============
CONTACT MODAL
=============
*/

#modal-contact {
	color: #fafafa;
	font-weight: 400;
	padding: 50px 0;
	background: #000;
	z-index: 9999 !important;
}

.modal-dialog-centered {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	border: 2px solid #fafafa;
	padding: 25px;
	margin-top: 5%;
}

.modal-title {
	text-transform: uppercase;
	font-weight: 800;
	color: #fff;
	font-size: 1.5em;
	position: relative;
	margin-left: 5px;
}

.modal-header {
	border: none !important;
}
.modal-body p {
	font-size: 1em;
	font-weight: 600;
}

.form-control {
	border: 2px solid #fafafa;
	color: #fafafa;
	height: 55px;
	background: #000;
	font-size: 1em;
	font-weight: 400;
}

.form-control#message {
	height: 155px;
}

.btn-success {
	font-size: 1.25em;
	font-weight: 600;
	text-transform: uppercase;
	background: #000;
	border: 2px solid #fafafa !important;
	color: #fafafa;
	width: 100%;
	height: 50px;
	margin-top: -20px;
}

#modal-contact a {
	font-weight: 600;
	color: #fafafa;
	text-decoration: none;
}

#modal-contact a:hover, #modal-contact a:focus {
	opacity: 0.25;
}

.btn-success:hover, .btn-success:focus, .btn-success:active {
	background: #fafafa;
	color: #000;
	border: 2px solid #fafafa !important;
}

/*
=============
CONTACT PAGE
=============
*/

body.contact-body {
	background-color: #000 !important;
}

#contact {
	background: #fafafa;
	width: 100%;
}

#contact-container {
	max-width: 1500px;
	margin: auto;
}

#contact h1 {
	margin-top: 50px;
	text-transform: uppercase;
	font-weight: 900;
	text-align: center;
}

#contact .display p:first-of-type {
	text-align: center;
	padding: 0 15px;
}

#contact .form-control {
	border: 2px solid #3d3d3d;
	color: #3d3d3d;
	height: 55px;
	background: #fafafa;
	font-size: 1em;
	font-weight: 400;
}

#contact .form-control#message {
	height: 155px;
}

#contact .btn-success {
	font-size: 1.25em;
	font-weight: 600;
	text-transform: uppercase;
	background: #fafafa;
	border: 2px solid #000 !important;
	color: #000;
	max-width: 225px;
	height: 50px;
	margin-top: -25px;
}

#contact .btn-success:hover, #contact .btn-success:focus, #contact .btn-success:active {
	background: #000;
	color: #fafafa;
}

#contact a {
	font-size: 1.2em;
	font-weight: 600;
	color: #3d3d3d;
	border-radius: 50px;
	text-decoration: none;
	padding: 0 10px;
}



#contact .btn-primary {
	background: #fafafa;
	border-radius: 100%;
	border: 2px solid #3d3d3d;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 2.25em;
	font-size: 1em;
	margin-bottom: 10px;
}


#contact .contact-info {
	position: absolute;
	font-weight: 600;
	font-size: 1em;
	margin-top: 7px;
	margin-left: 10px;
}


#praise p {
	text-align: left !important;
	margin-top: 20px;
	margin-left: 25px;
	font-weight: 400;
	font-size: 1em;
	padding: 0 15px;
}

#praise .praise-name {
	font-weight: 900;
	font-size: 1em;
}

#praise .praise-city {
	position: relative;
	margin-top: -15px;
	font-size: 1em;
	font-weight: 900;
}


#praise .praise-link {
	position: relative;
	margin-top: -15px;
	margin-left: 15px;
	margin-bottom: 60px;
	opacity: 0.4;
}

#praise .praise-link a {
	font-size: 1em;
	font-weight: 900;
}


.carousel-indicators li {
  background: rgba(61, 61, 61, 0.2) !important;
  width: 25px;
  height: 3px;
}

.carousel-indicators .active {
	background: rgb(61, 61, 61) !important;
}


/* HOVER FX */

#contact a:hover, #contact a:focus,
#contact a:active {
	opacity: .15;
}


/*
=============
THANK YOU
=============
*/

#thankyou {
	background: rgba(250, 250, 250, 0.95);
}

#thankyou p {
	padding: none;
}

#thankyou .modal-dialog-centered {
	border: none;
}

#thankyou .modal-content {
	background: #fafafa;
	position: relative;
}

#thankyou h2 {
	position: relative;
	margin-top: 50px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.25em;
}

#thankyou p {
	margin-top: 15px;
	text-align: center;
	line-height: 1.25em;
	font-weight: 400;
}

#thankyou img {
	max-width: 250px;
	height: auto;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	margin-top: -10px;
}

#thankyou #close {
	border-top: 2px solid rgba(61, 61, 61, 0.2);
	margin-top: 255px;
}

#thankyou .btn-secondary {
	left: 0;
	right: 0;
	margin: auto;
	margin-top: 10px;
	width: 150px;
	background: #fafafa;
	border: 2px solid #3d3d3d;
	color: #3d3d3d;
	font-weight: 600;
}

#thankyou .btn-secondary:hover, #thankyou .btn-secondary:focus, 
#thankyou .btn-secondary:active {
	background: #3d3d3d;
	border: 2px solid #3d3d3d;
	color: #fafafa;
	font-weight: 600;
}



/*
======================
MEDIA QUIERIES
======================
*/

	/*
	======================
	MOBILE NAV OVERRIDE
	======================
	*/

	.modal-home #nav-pages {margin-top: 40px;}
	#animatedModal #nav-pages {font-size: 1.1em;}
	#animatedModal .btn {margin-top: 10px;}


@media (min-width: 375px){
	.logo {
	display: inline-block !important;
	width: 250px;
	height: auto;
	padding: 10px;
}
	.logo-xs {display: none !important; }

    /*
	.nav-btn img {
		top: 12px;
	}
*/
	#contact .display p:first-of-type {
	padding: 0 10px;
	}

		/*
	====
	LANDING
	====
	*/
	
	.main {	font-size: 2.25em !important;	}

	footer p {padding: 0 50px;}

	#call-out p {padding: 0 25px;}

}

@media (min-width: 768px){

	/*  .nav-btn img {top: 18px;}*/

		/*
	====
	LANDING
	====
	*/
	
	.main {
	font-size: 4.5em !important;
	}
	.sub {	font-size: 1.5em;	}

	.logo {	width: 350px;	}
    
	#section1{
	background-image: url('../img/home/websites-sm.jpg');
	padding: 6% 0 0 0;
	}
    
	#section2{
	background-image: url('../img/home/design-sm.jpg');
	padding: 6% 0 0 0;
	}
    
	#section3{
	background-image: url('../img/home/photo-sm.jpg');
	padding: 6% 0 0 0;
	}
	
		/*
	====
	MODAL NAV
	====
	*/
	        
	#animatedModal #nav-pages {
		font-size: 2em; 
		
		margin-top: 55px !important;
		margin: auto;

		}

	.modal-content .btn {margin-top: 25px !important;}
		/*
	====
	PROJECTS
	====
	*/

	
	#websites {
	background: url('../img/hero/web-sm.jpg') center no-repeat;
	background-size: cover;
	height: 800px;
	}
	
	#design {
	background: url('../img/hero/design-sm.jpg') center no-repeat;
	background-size: cover;
	height: 800px;
	}
    
	#photography {
	background: url('../img/hero/photography-sm.jpg') center no-repeat;
	background-size: cover;
	height: 800px;
	}
    
	#about {
	background: url('../img/hero/about-sm.jpg') center no-repeat;
	background-size: cover;
	height: 800px;
	}
	
	.hero-text {font-size: 4em;}
	
	.project-title, .display .intro {font-size: 1.5em;}

	#footer-home p {font-size: 1.2em;}

	#contact .display .intro p {
		font-size: 0.95em;
	}
	#contact #contact-display {
	padding: 10px;
	}

	#thankyou h2 {
		padding: 0 55px;
	}

}

@media (min-width: 1024px){

		/*
	====
	LANDING
	====
	*/
	
	.main {
	font-size: 5.2em !important;
	margin: 0 auto;
	}

	.sub {font-size: 1.8em;	}

	#section1{
	background-image: url('../img/home/websites-md.jpg');
	padding: 6% 0 0 0;
	}

	#section2 {
	background-image: url('../img/home/design-md.jpg');
	padding: 6% 0 0 0;
	}

	#section3 {
	background-image: url('../img/home/photo-md.jpg');
	padding: 6% 0 0 0;
	}

		/*
	====
	PROJECTS
	====
	*/
	

	#websites {
	background: url('../img/hero/web-md.jpg') center no-repeat;
	background-size: cover;
	}
	
	#design {
	background: url('../img/hero/design-md.jpg') center no-repeat;
	background-size: cover;
	}
    
	#photography {
	background: url('../img/hero/photography-md.jpg') center no-repeat;
	background-size: cover;
	}
    
	#about {
	background: url('../img/hero/about-md.jpg') center no-repeat;
	background-size: cover;
	}
	
	.hero-text {font-size: 5em;}
	
	.display .intro {font-size: 1.5em;}

	.display .col-lg-4 {margin-bottom: 30px;}

	.project-title {font-size: 1.2em;}
	
	#contact {
		padding-top: 75px;
		padding-bottom: 100px;
	}

	#contact .display .intro p {font-size: 1.1em;	}

}

@media (min-width: 1200px){

    .logo {	width: 400px; padding: 15px;	}
    
    .nav-btn img {	top: -65px !important; }
    
	#animatedModal #nav-pages {font-size: 3em; }
	
	.close-modal .lr {   height: 50px;}

	.close-modal .lr .rl {   width: 2px; height: 50px; }
	
	
	.sub {	
	font-size: 1.7em;
	padding: 15px 0;

	}

		/*
	====
	LANDING
	====
	*/
	
	#section1{
		background-image: url('../img/home/websites-lg.jpg');
		padding: 6% 0 0 0;
	}

	#section2 {
	background-image: url('../img/home/design-lg.jpg');
	padding: 6% 0 0 0;
	}

	#section3 {
	background-image: url('../img/home/photo-lg.jpg');
	padding: 6% 0 0 0;
	}

		/*
	====
	PROJECTS
	====
	*/

	#websites {
	background: url('../img/hero/web-lg.jpg') center no-repeat;
	background-size: cover;
	}
	
	#design {
	background: url('../img/hero/design-lg.jpg') center no-repeat;
	background-size: cover;
	}
    
	#photography {
	background: url('../img/hero/photography-lg.jpg') center no-repeat;
	background-size: cover;
	}
    
	#about {
	background: url('../img/hero/about-lg.jpg') center no-repeat;
	background-size: cover;
    background-color: #000;
	}

	.display .intro {
		padding-top: 35px;
		padding-bottom: 10px;
		max-width: 1150px;
		}

	.project-title { font-size: 1.3em; }


}

@media (min-width: 1400px){
	
	.project-title {font-size: 1.7em;}

}

/*
==================
	OVERRIDE
==================
		*/
.txt-black {color: #000 !important;}

.header {
z-index: 91 !important;
} 

.modal-home .close-modal {z-index: 100 !important;}


/*
=============
404 ERROR PAGE
=============
*/

#header-404 {
font-family: 'Source Sans Pro', sans-serif;
color: #3D3D3D;
padding: 125px 0;
background: #fafafa;
}
#header-404 h2 { 
font-size: 2em; 
text-transform: none !important;
padding: 50px 0;
line-height: 1.5em;
}

#header-404 h3 {
	font-size: 1.5em; 
	padding: 20px 0;
	line-height: 1.5em;
	font-weight: 700;
	text-transform: uppercase;
	color: #3d3d3d;
}

#header-404 p {
font-size: 1.5em;
color: #3d3d3d;
font-weight: 600;
}

#header-404 img {
	opacity: 0.7;
	box-shadow: 0 10px 20px -4px rgba(0,0,0,0.4);
	}
#header-404 img:hover {opacity: 1.0;}
#header-404 a:hover { 
text-decoration: none;}