/* 
	Author: Melissa Hy
	Contact: Melissa Hy @ melissa.hy@gmail.com 
	Copyright 2014. All Rights Reserved. 
*/

/* 
	========================================
				Color Palette

				#F1594A
				
	========================================
*/

/* 
	========================================
				General Styles,
				Links,
				Headings,
				Fonts, 
				Navigation
	========================================
*/
* { margin: 0; padding: 0;}
body { width: 100%; background: #fff url('../img/satinweave.png') repeat 0 0;}
h1, h2, h3, h4, h5, h6 { font-family: 'Source Sans Pro', sans-serif; }
h1 { font-size: 2.3wm !important;}
h2 { font-size: 1.8em !important;}
h3 { font-size: 1.6em !important;}
p { font-family: 'Source Sans Pro', Verdana, Helvetica, sans-serif; font-size: 18px !important; line-height: 1.6em !important;}
::selection { color: #fff; background-color: #00BBC9; }

a:link, a:visited, a:active { color: #00BBC9; text-decoration: none; font-weight: bold; -webkit-transition: color .8s ease; -moz-transition: color .8s ease; transition: color .8s ease; }
a:hover { color: #000;}  

div#logo { padding-top: 10px; color: #000; }

/* ======= NAVIGATION ========= */

.navbar-default { background-color: #ffffff !important; border-bottom: 5px solid #F1594A !important; }
.nav > li { font-size: 1.5em; padding-top: 15px; font-family: 'Source Sans Pro', san-serif; text-transform: uppercase;}
.nav > li a { color: #F1594A !important; text-decoration: none !important; font-weight: bold !important; -webkit-transition: color .8s ease !important; -moz-transition: color .8s ease !important; transition: color .8s ease !important; }
.nav > li a:hover { color: #000000 !important;}
.navbar-toggle { margin-top: 22px !important;}

.navbar-brand { width: 80% } 
.navbar-default .navbar-toggle .icon-bar { background-color: #F1594A !important; }
.navbar-toggle:link, .navbar-toggle:visited, .navbar-toggle:hover, .navbar-toggle:active { background-color: transparent !important;}


div#navigation { padding: 8px 0px;}

/* RESETS */ 
.padding-fix { padding: 4px 0px;}
.padding-reset { padding: 0px; }
/* 
	========================================
				Hero Styles
	========================================
*/ 

#hero { padding: 50px 30px; }
#about h1 { font-size: 2em !important; font-weight: 600;}

/* 
	========================================
				Portfolio Styles
	========================================
*/ 
#work { background-color: #F1594A; padding: 20px;}
#work h1 { padding-bottom: 15px;}

#portfolio { padding: 50px 0px 0px 0px; }
#portfolio-img { padding: 0px 0px 50px 0px; }
#portfolio-description { border-bottom: 1px solid #000; padding-bottom: 20px; }
.misc-portfolio { margin: 10px 0px;}
div.misc-portfolio p { font-size: 16px !important; margin: 0px 10px; padding: 0px;}
div.misc-portfolio h3 { margin: 0px 10px; }
p.portfolio-description { font-size: 16px !important;}

.portfolio-display { margin-top: 50px; padding: 0px 10px; } 
.web { margin: 0 auto; border: 0; margin-bottom: 8px; } 
.image { margin: 0; border: 1px solid #808080; margin-bottom: 8px; } 
.portfolio-description p { margin: 0; } 

ol.process-list { font-family: 'Source Sans Pro', Verdana, Helvetica, sans-serif; margin-left: 20px; font-size: inherit; line-height: 1.7em;}



/* 
	========================================
		     Portfolio Index Styles
	========================================
*/ 

.box p { font-size: 1.2em !important; line-height: 1.2em !important; padding-right: .2em; font-family: 'Source Sans Pro', san-serif !important; } 

/* Image Box Style */
.box {
	border: 5px solid #fff;
	cursor: pointer;
	height: 250px;
	background-color: #ffffff;
	margin: 5px;
	position: relative;
	overflow: hidden;
	width: 100%;

}
.box img {
	position: absolute;
	left: 0;
		-webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;	
	transition: all 300ms ease-out;
	width: 100%;
}

.box h3 { padding-right: .3em; font-size: 2em; font-family: 'Roboto Condensed',sans-serif; } 

/* Caption Common Style */
.box .caption {
	/*background-color: rgba(0,0,0,0.8);*/
	background-color: #F1594A;
	position: absolute;
	color: #fff;
	z-index: 100;
		-webkit-transition: all 500ms ease-out;
		-moz-transition: all 500ms ease-out;
		-o-transition: all 500ms ease-out;
		-ms-transition: all 500ms ease-out;	
		transition: all 500ms ease-out;
	left: 0;
	padding: 0px 15px !important;
}
/** Caption 3: Fade **/
.box .fade-caption, .box .scale-caption  {
	opacity: 0;
	width: 100%;
	height: 100%;
	text-align: left;
	padding: 15px;
}

/** Fade Caption :hover Behaviour **/
.box:hover .fade-caption  {
	opacity: .8;
}

/* 
	========================================
				Form Styles
	========================================
*/

#contact { padding: 30px;}

.no-close .ui-dialog-titlebar-close { display: none; }


/* 
	========================================
	
	Tablets // 768px
	
	========================================
*/

@media (min-width: 768px) {

#hero { padding: 100px 50px; }
#work { padding: 70px; }
.padding-fix { padding: 0px 5px;}
.box { height: 200px; }
#portfolio { padding: 50px 0px 0px 0px; }
#contact { padding: 70px 90px 150px 90px;}
	
}

/* 
	========================================
	
	Desktop // 992px
	
	========================================
*/

@media (min-width: 992px) {

// #about { padding: 40px 20px;}
// #hero { padding: 160px 50px; }
#work {  padding: 70px 0px; }
.padding-fix { padding: 0px 5px;}
#portfolio { padding: 50px 0px 0px 0px; }

}

/* 
	========================================
	
	Large Desktop // 1200px
	
	========================================
*/

@media (min-width: 1200px) {
	.container { width: 970px; }
	.padding-fix { padding: 0px 5px;}

}