/* ==========================================================================
   Base Styles, Bootstrap Modifications & Fonts Import
   ========================================================================== */
::-moz-selection {
    background: #7acab8;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #7acab8;
    color: #fff;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding-bottom: -10px;
}

.centered {
	text-align: center
}

.mt {
	margin-top: 80px;
}

.mt2 {
	margin-top: 25px;
}

.mt3 {
	margin-top: 50px;
}

.mb {
	margin-bottom: 25px;
}

.mb2 {
	margin-top:10px;
	margin-bottom: 20px;
}

.mb3 {
	margin-bottom:50px;
}

hr {
    display: block;
    height: 0.5px;
    border: 0;
    border-top: 1px solid #000;
    margin-top: -10px;
}

.clr {
    padding-top: 5px;
}

.clr h3 {
	padding-top: 10px;
	padding-bottom: 10px;
	color: #4d367e;
}

.clr2 h5 {
	color: #75C6EF;
}

.clr2 h3 {
	color: #4d367e;
}

.clr2 h4 a {
	color: #75C6EF;
	text-decoration: none;
}

.clr2 h4 a:hover {
	color: #4d367e;
	text-decoration: none;
}

/* ==========================================================================
   General styles
   ========================================================================== */


body {
    font-family: 'Josefin Sans', 'Avenir', 'Avant Garde', 'Helvetica', sans-serif;
    font-weight: 400;
    font-size: 18px;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

h1, h2, h3, h4, h5, h6 {
    color: #000;
}


p {
    font-family: 'Josefin Sans', 'Avenir', 'Avant Garde', 'Helvetica', sans-serif;
    font-weight:400;
	font-size: 13px;
}

h2 {
    font-family: 'Josefin Sans', 'Avenir', 'Avant Garde', 'Helvetica', sans-serif;
    font-weight:600;
	font-size:55px;
	color: #000;
}

.img-strip a {
	text-decoration: none;
	color:#000;
}

.img-strip h2 {
	position: relative;
	border: 5px solid #7acab8;
	top:-100px;
	margin-left:25px;
	padding-top:7px;
	color:#000;
	visibility: hidden;
	z-index:1;
}

.img-strip:hover h2 {
	visibility: visible;
	background-color: rgba(255, 255, 255, 0.4);
	max-height:70px;
	padding-top:7px;
	padding-left:5px;
	
}

.img-strip:hover img {
	opacity: 0.2;
}

.img-strip a {
	z-index: 100;
}

h3 {
    font-family: 'Josefin Sans', 'Avenir', 'Avant Garde', 'Helvetica', sans-serif;
    font-weight:600;
	font-size:20px;
	color: #000;
	margin-top: 0px;
}

h4 {
    font-family: 'Josefin Sans', 'Avenir', 'Avant Garde', 'Helvetica', sans-serif;
    font-weight:600;
	font-size:15px;
	color: #000;
}

h6 {
    font-family: 'Josefin Sans', 'Avenir', 'Avant Garde', 'Helvetica', sans-serif;
    font-weight:600;
	font-size: 15px;
	color: #000;
}

.project h6 {
    font-family: 'Josefin Sans', 'Avenir', 'Avant Garde', 'Helvetica', sans-serif;
    font-weight:600;
	font-size:12px;
	margin-top:-5px;	
}

.img-brdr {
	border: 1px solid #646464;
}

.navbar-brand {
	font-weight: 700;
}

.navbar-default .navbar-brand {
	color: #75C6EF;
}

.navbar-default {
	background-color: rgba(255, 255, 255, 0.85);
	border-color: transparent;
	box-shadow: 0px 0px 3px grey;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	color: #ff00ff;
	border-bottom: 2px solid #FFF;
}

.navbar-default .navbar-nav > li > a {
    font-family: 'Josefin Sans', 'Avenir', 'Avant Garde', 'Helvetica', sans-serif;
    font-weight:700;
	color: #000;
}

.navbar-header .navbar-brand img {
	height: 30px;
}

.navbar-header .navbar-brand a {
	height: 30px;
}

.navbar-default .navbar-toggle {
	border: none;
}

.navbar-default .navbar-toggle:hover {
	background-color: #FFF;
}

.bd {
	border: 1px solid #ccc;
}

.img-strip {
	margin-top:-15px;
}

a h4 {
    font-family: 'Josefin Sans', 'Avenir', 'Avant Garde', 'Helvetica', sans-serif;
    font-weight:700;
	color: #000;
	text-decoration: none;
}

a:hover h4 {
    font-family: 'Josefin Sans', 'Avenir', 'Avant Garde', 'Helvetica', sans-serif;
    font-weight:700;
	color: #7acab8;
	text-decoration: none;
}

a:visited h4 {
	text-decoration: none;
}

/* ==========================================================================
   Link H2 Styles
   ========================================================================== */

#SI h2 {
	max-width:683px;
}

#EPM h2 {
	max-width:385px;
}

#RTL h2 {
	max-width:594px;
}

#WWWP h2 {
	max-width:225px;
}

#AoS h2 {
	max-width:535px;
}

#DP h2 {
	max-width:490px;
}

#IVDB h2 {
	max-width:382px;
}

#DITL h2 {
	max-width:442px;
}

#TMA h2 {
	max-width:660px;
}

#jordan h2 {
	max-width:235px;
}

#hannah h2 {
	max-width:263px;
}

#jackie h2 {
	max-width:192px;
}

#emily h2 {
	max-width:200px;
}

#jessica h2 {
	max-width:223px;
}

/* ==========================================================================
   Wrap Sections
   ========================================================================== */

#headerwrap {
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 675px;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#headerwrap img {
	margin-top:-70px;
	padding-top: 450px;
}

#headerwrap h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 70px;
	font-weight: bold;
}

#headerwrap h4 {
	font-weight: 400;
	color: #ffffff
}

#social {
	padding-top: 25px;
	padding-bottom: 25px;
	background-color: #f2f2f2;
}

#footerwrap i {
	font-size: 12.5px;
	text-align: center;
	padding-top: 5px;
	margin-left:3px;
	margin-right:3px;
	color: #000;
	background-color: #FFF;
	height:25px;
	width:25px;
	border-radius: 25px;
}

#footerwrap i:hover {
	color: #FFF;
	background-color: #7acab8;
}

#footerwrap {
	padding-top: 40px;
	padding-bottom: 20px;
	background-color: #000;
}

#footerwrap h6 {
	color: #f2f2f2;
}

/* Gallery */
.gallery {
	margin-top: 0px;
	margin-bottom: -80px;
}

.gallery img {
	z-index:100;
}

.gallery img:hover {
	opacity: 0.2;
}

/* ==========================================================================
   LazyLoad
   ========================================================================== */

.lazyload,
.lazyloading {
    opacity: 1;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 1000ms;
}

/* ==========================================================================
   Media Styles
   ========================================================================== */
   
@media(min-width:501px) and (max-width:990px) {

	div.gallery.img-strip {
		max-height:70px;
	}

	.img-strip h2 {
		font-size:19px;
		background-color:#FFF;
		border: 3px solid #7acab8;
		position: relative;
		top:-42px;
		padding-left:5px;
		padding-top:6px;
		margin-left:25px;
		margin-bottom:3px;
		color:#000;
		visibility: visible;
		z-index:1;
	}
	

	.img-strip:hover h2 {
		font-size:19px;
		background-color: #7acab8;
		color: #FFF;
	}


	.img-strip {
		margin-top:0px;
	}

	.gallery {
		margin-top: 0px;
		margin-bottom: 0px;
	}


/* ==========================================================================
   Link H2 Styles
   ==========================================================================  */

	#SI h2 {
		max-width:245px;
		}

	#EPM h2 {
		max-width:142px;
	}

	#RTL h2 {
		max-width:215px;
	}

	#WWWP h2 {
		max-width:86px;
	}
		
	#AoS h2 {
		max-width:192px;
	}

	#DP h2 {
		max-width:177px;
	}
	
	#IVDB h2 {
		max-width:140px;
	}

	#DITL h2 {
		max-width:160px;
	}

	#TMA h2 {
		max-width:236px;
	}

	#jordan h2 {
		max-width:87px;
	}
	
	#hannah h2 {
		max-width:99px;
	}
	
	#jackie h2 {
		max-width:75px;
	}
	
	#emily h2 {
		max-width:76px;
	}

	#jessica h2 {
		max-width:82px;
	}

}

@media(min-width:100px) and (max-width:500px) {

	#headerwrap {
		min-height:600px;
	}

	div.gallery.img-strip {
		min-height:50px;
		max-height:92px;
		margin-bottom:-15px;
	}

	.img-strip h2 {
		font-size:19px;
		background-color:#FFF;
		border: 3px solid #7acab8;
		position: relative;
		top:-35px;
		padding-left:5px;
		padding-top:7px;
		margin-left:10px;
		margin-bottom:3px;
		color:#000;
		visibility: visible;
		z-index:1;
}

	.img-strip:hover h2 {
		font-size:19px;
		background-color: #7acab8;
		color: #FFF;
}


	.img-strip {
		margin-top:0px;
}

	.gallery {
		margin-top: 0px;
		margin-bottom: -10px;
}


/* ==========================================================================
   Link H2 Styles
   ==========================================================================  */

	#SI h2 {
		max-width:245px;
		}

	#EPM h2 {
		max-width:142px;
	}

	#RTL h2 {
		max-width:215px;
	}

	#WWWP h2 {
		max-width:94px;
	}
		
	#AoS h2 {
		max-width:192px;
	}

	#DP h2 {
		max-width:177px;
	}
	
	#IVDB h2 {
		max-width:140px;
	}

	#DITL h2 {
		max-width:160px;
	}

	#TMA h2 {
		max-width:236px;
	}

	#jordan h2 {
		max-width:87px;
	}
	
	#hannah h2 {
		max-width:99px;
	}
	
	#jackie h2 {
		max-width:75px;
	}
	
	#emily h2 {
		max-width:76px;
	}

	#jessica h2 {
		max-width:82px;
	}

}

@media(min-width:501px) and (max-width:767px) {

	#headerwrap {
		min-height:600px;
	}

	div.gallery.img-strip {
		min-height:80px;
		max-height:90px;
	}

}

@media(min-width:768px) and (max-width:991px) {

	#headerwrap {
		min-height:600px;
	}

	div.gallery.img-strip {
		max-height:95px;
	}

}

@media(min-width:992px) and (max-width:1200px) {

	#headerwrap {
		min-height:650px;
	}

}

@media(min-width:1201px) and (max-width:3001px) {

	div.gallery.img-strip {
		max-height:210px;
	}

}
/*@media(min-width:300px) and (max-width:990px) {


#headerwrap {
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 450px;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#workwrap h1 {
	color:#4a4a4a;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 45px;
	font-weight: bold;
}

.clr h3 {
	padding-top: 10px;
	padding-bottom: 10px;
	color: #4d367e;
	text-align: center;
}

.bckgrnd {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	margin: auto;
	z-index: -1000; 
	opacity: 0.1;
}

.mt3 {
	margin-top: 10px;
}


p {
	font-size: 15px;
}

}*/