@import url(https://fonts.googleapis.com/css?family=Montserrat:100,400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,700,900);
/* --- Reseter --- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin: 0; padding: 0; border: 0; outline: 0; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline:0; }
a:active { outline:none; }
ul { list-style:none; }

/* --- Body --- */

body {
	margin: 0;
	padding: 0;
	font-family: "Lato", Helvetica, Arial, sans-serif;
	color: #333;
	font-size: 10pt;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
	opacity: 1;
  transition: 2s opacity;
}

body.fade {
    opacity: 0;
    transition: none;
}

/* --- Assets --- */

::selection {
	background: #ffff33; /* Safari */
	color: #333;
}

::-moz-selection {
	background: #ffff33; /* Firefox */
	color: #333;
}

.amp { font-family: Baskerville, "Goudy Old Style", "Palatino","Book Antiqua", serif; font-weight: 400; font-size: 120%;  }
.small-caps { font-variant: small-caps; font-weight: bold; color: #ec005e; }
.clear { clear: both; }
img { display: block; }

a { color: #ec005e; text-decoration: none; }
a:hover { color: #333; }

hr.top-line { height: 3px; border: none; background: #ec005e; margin: 0; }

p { margin: 10px 0; line-height: 16pt; }

#cssdesignawards { position: fixed; top: 20px; right: 0; z-index: 99999; }
#csswinner { position: fixed; top: 140px; right: 0; z-index: 99999; }
#css-light { width: 90px; height: 34px; position: fixed; top: 230px; right: 0px; z-index: 99999; text-indent: -9999px; }
#best-css { width: 80px; height: 19px; position: fixed; top: 290px; right: 0px; z-index: 99999; text-indent: -9999px; }

.wrapper { max-width: 960px; min-width: 300px; margin: 0 auto; }

/* --- Header --- */

header {
	position: fixed;
	width: 100%;
	height: 75px;
	background: rgba(255,255,255,1);
	border-bottom: 1px solid #ec005e;
	z-index: 1;
}

#content-pages-spacer { height: 75px; }

#logo { position: fixed; font-family: "Montserrat"; padding: 20px; font-size: 20pt; letter-spacing: -.075em; z-index: 2; font-weight: 400; }
#logo a { color: #333; }
#logo a span { color: #ec005e; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#logo a:hover span { color: #333; }

hr.content-line { height: 1px; border: none; background: #ec005e; margin: 0; }

/* --- New Menu --- */

#menu-hold {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
}

.menu_toggle_container {
	display: block;
	height: 40px;
	width: 40px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 2;
	background: none;
	padding: 17.5px 25px;
	margin: 0 auto;
}

.menu_toggle_container.loading .menu_toggle {
	-moz-animation: loading 1s ease-out infinite 0.75s;
	-webkit-animation: loading 1s ease-out infinite 0.75s;
	animation: loading 1s ease-out infinite 0.75s;
}

.menu_toggle_container.loading .menu_toggle:after {
	-moz-animation: loading 1s infinite ease-out 0.35s;
	-webkit-animation: loading 1s infinite ease-out 0.35s;
	animation: loading 1s infinite ease-out 0.35s;
}

.menu_toggle_container.loading .menu_toggle:before {
	-moz-animation: loading 1s infinite ease-out;
	-webkit-animation: loading 1s infinite ease-out;
	animation: loading 1s infinite ease-out;
}

.menu_toggle, .menu_toggle:before, .menu_toggle:after {
	width: 40px;
	background: #ec005e;
	height: 4px;
	display: inline-block;
	border-radius: 3px;
}

.menu_toggle {
	position: relative;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}

.menu_toggle:before, .menu_toggle:after {
  content: "";
  position: absolute;
  left: 0;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.menu_toggle:before {
	top: 16px;
}

.menu_toggle:after {
	top: 8px;
}

.menu_toggle_container:hover .menu_toggle, .menu_toggle_container:hover .menu_toggle:before, .menu_toggle_container:hover .menu_toggle:after { background: #ec005e; }

.menu_open .menu_toggle_container .menu_toggle {
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 10px;
	background: #fff;
}

.menu_open .menu_toggle_container .menu_toggle:after {
	opacity: 0;
}

.menu_open .menu_toggle_container .menu_toggle:before {
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	top: 0;
	background: #fff;
}

/* --- Menu Overlay --- */

.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(51,51,51,.9);
	z-index: 1;
}

.overlay nav {
	text-align: center;
	position: relative;
	top: 60%;
	height: 80%;
	font-size: 150px;
	text-transform: uppercase;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	width: 100%;
	position: relative;
}

.overlay ul li {
	display: block;
	height: 20%;
	height: calc(100% / 5);
	min-height: 54px;
}

.overlay ul li a {
	font-weight: 900;
	display: block;
	padding: 5px 0;
	width: 100%;
	color: #fff;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
	color: #ec005e;
}

/* Effects */

.overlay-hugeinc {
	visibility: hidden;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
	transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}

.overlay-hugeinc.open {
	visibility: visible;
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
	-webkit-transition: -webkit-transform 0.4s ease-in-out;
	transition: transform 0.4s ease-in-out;
}

.overlay-hugeinc nav {
	-webkit-perspective: 1200px;
	perspective: 1200px;
}

.overlay-hugeinc nav ul {
	opacity: 0.4;
	-webkit-transform: translateY(-25%) rotateX(35deg);
	transform: translateY(-25%) rotateX(35deg);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

.overlay-hugeinc.open nav ul {
	opacity: 1;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

.overlay-hugeinc.close nav ul {
	-webkit-transform: translateY(25%) rotateX(-35deg);
	transform: translateY(25%) rotateX(-35deg);
}

@media screen and (max-height: 35.5em) {
	.overlay nav {
		height: 70%;
		font-size: 34px;
	}
	.overlay ul li {
		min-height: 34px;
	}
}

/* --- Banner --- */

#banner {
	width: 100%;
	height: 600px;
}

#banner-text {
	position: absolute;
	top: 275px;
	left: 50px;
	color: #fff;
	font-size: 80pt;
	font-family: "Montserrat", Helvetica, Arial, sans-serif;
	font-weight: 100;
}

/* ---- particles.js container ---- */

canvas {
  display: block;
  vertical-align: bottom;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 600px;
  background-color: #ec005e;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

/* --- Portfolio --- */

#portfolio { margin: 10px 0; }

#portfolio figure.port-fig {
	width: 225px;
	height: 225px;
	margin: 10px 20px 10px 0;
	background: #ec005e;
	float: left;
}

#portfolio figure.port-fig:nth-of-type(4n) { margin-right: 0; clear: right; }

figure.port-fig a {
	position: relative;
	display: block;
	line-height: 0px;
	text-decoration: none;
}

figure.port-fig a img { margin: 0 auto; }

figure.port-fig a span {
	color: #ec005e;
	display: block;
	background: #333;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0px;
	overflow: hidden;
	opacity: 0;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

figure.port-fig a:hover span { height: 220px; opacity: 1; }

figure.port-fig a span hr { background: #ec005e; width: 55%; height: 1px; border: none; }

figure.port-fig a span section {
	color: #fff;
	text-align: center;
	margin: 25px auto;
	font-size: 21pt;
	line-height: 50px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	background: #ec005e;
}

figure.port-fig a span h1 {
	color: #fff;
	text-align: center;
	font-size: 18pt;
	font-weight: normal;
	margin: 50px 0 25px 0;
}

figure.port-fig a span h2 {
	color: #fff;
	text-align: center;
	font-size: 9pt;
	text-transform: uppercase;
	font-weight: normal;
	margin: 20px 0;
}

/* --- Content --- */

#content { margin: 20px 0; }

/* >>> Home Page <<< */

.home-module { clear: both; }
.home-module h3 { font-weight: 400; font-size: 18pt; margin: 0; color: #333; }
hr.home-title-sep { height: 2px; border: none; background: #ec005e; margin: 15px 0; width: 10%; }
.home-module section { float: right; width: 620px; margin: 5px 0; }
.home-module section p { font-size: 10.5pt; line-height: 19pt; margin: 0; }

.port-module { margin: 25px 0; }
.port-module aside { float: left; width: 280px; }
.port-module section { float: right; width: 620px; }

#content figure.home-fig {
	width: 290px;
	height: 155px;
	margin: 0 40px 20px 0;
	background: #ec005e;
	float: left;
}

#content figure.home-fig:nth-of-type(2) { margin-right: 0; clear: right; }

figure.home-fig a {
	position: relative;
	display: block;
	line-height: 0px;
	text-decoration: none;
}

figure.home-fig a img { margin: 0 auto; }

figure.home-fig a span {
	color: #ec005e;
	display: block;
	background: #333;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0px;
	overflow: hidden;
	opacity: 0;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

figure.home-fig a:hover span { height: 150px; opacity: 1; }

figure.home-fig a span hr { margin: 20px auto; background: #ec005e; width: 55%; height: 1px; border: none; }
figure.home-fig a span { text-align: center; color: #fff; }
figure.home-fig a span h6 { margin: 55px 0 25px 0; font-size: 21pt; }
figure.home-fig a span h7 {  margin: 20px 0; font-size: 8pt; text-transform: uppercase; }

p.catalog { text-align: center; font-size: 99%; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
p.catalog span { font-size: 80%; }
p.catalog a { float: left; padding: 15px 10px; margin: 10px 0; width: 596px; border: 2px solid #ec005e; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
p.catalog a:hover { color: #fff; background: #ec005e; letter-spacing: 5px; }

/* >>> Secondary Pages <<< */

#left-content { width: 650px; float: left; }

#content h1 { font-size: 18pt; font-weight: 600; }
#content h2 { font-size: 10pt; text-transform: uppercase; font-weight: 600; color: #ec005e; letter-spacing: 2px; }

#easter-eight:hover font { color: #ec005e; }

hr.page-sep { width: 10%; height: 1px; background: #333; border: none; margin: 20px 0; }
hr.page-sep-blue { width: 100%; height: 1px; background: #ec005e; border: none; margin: 20px 0; }

/* >>> Aside <<< */

aside.side-info { float: right; width: 225px; margin-top: 45px; }

.block-head-hold {
    float: left;
    width: 225px;
}

.block-head {
    background: #333;
    color: #fff;
    float: left;
    padding: 5px 10px;
    width: 176px;
}

.block-head-icon {
    background: #ec005e;
    color: #fff;
    float: right;
    padding: 5px 10px;
}

aside.side-info ul { margin: 5px 0 20px 2px; float: left; }
aside.side-info ul li { margin: 5px 0; }
aside.side-info ul li a { font-weight: bold; }

/* --- About Me --- */

hr.about-sep { float: right; width: 675px; height: 1px; background: #fff; border: none; margin: 20px 0; }

.about-module { clear: both; }
.about-module aside { float: left; width: 225px; }
.about-module aside .creighton { float: left; width: 80px; height: 80px; background: #ec005e; border-radius: 0 0 100% 0; }

.about-module:first-child section { margin: 0 0 20px 0; }
.about-module section { float: right; width: 675px; margin: 0 0 10px 0; }
hr.title-top { height: 2px; border: none; background: #ec005e; margin: 5px 0; width: 65%; }
.about-module aside h3 { font-weight: 700; margin: 5px 0; color: #333; }

.about-module section h2 i { color: #333; }
.about-module section h4 { font-size: 16pt; }
.about-module section h5 { font-size: 9pt; color: #ec005e; text-transform: uppercase; letter-spacing: 2px; }
.about-module section h6 { font-size: 10pt; margin: 3px 0; }
.about-module section p { margin: 3px 0; }
.about-module section p a { font-weight: 700; }
.about-module section span { margin: 0 3px; color: #ec005e; }

.about-module section ul {  margin: 0; font-size: 10pt; font-size: .9em; font-weight: 600; display: inline-block; margin-right: 80px; }
.about-module section ul:last-child { margin-right: 0; }
.about-module section ul li { margin: 0 0 10px 0; }
.about-module section ul li:before {
	content: '+';
	margin-right: 5px;
	color: #ec005e;
	font-size: 120%;
}

dl.group {
    border-bottom: 1px dotted #999;
    padding: 7px 0;
}

dt {
    clear: left;
    float: left;
    font-weight: 700;
}

dd { text-align: right; }
dd a { font-weight: 700; }

/* --- Creative --- */

#creative-info { float: left; width: 225px; }

#creative-info section { margin-bottom: 15px; width: 50px; height: 50px; border-radius: 50px; background: #ec005e; text-align: center; line-height: 50px; font-size: 16pt; color: #fff; }
#creative-info h2 { font-size: 100%; font-weight: bold; }
#creative-info hr { clear: left; width: 100%; height: 1px; background: #ec005e; border: none; margin: 10px 0; }

p.site-link { margin: 20px 0; font-size: 90%; }
p.site-link a { padding: 5px 15px; background: #ec005e; color: #fff; border: 1px solid #ec005e; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
p.site-link a:hover { background: #fff; color: #ec005e; }

#creative-info nav { text-transform: uppercase; font-size: 9pt; font-weight: bold; color: #ec005e; }
#creative-info nav #back { float: left; padding-left: 15px; background: url("../img/back.png") no-repeat scroll 0 2px; }
#creative-info nav #next { float: right; }
#creative-info nav a { color: #333; }
#creative-info nav a:hover { color: #ec005e; }

#creative { float: right; width: 650px; }
#creative img { margin: 0 auto 5% auto; }
#creative a img { display: block;  }

#logo-list {
	padding: 0;
	list-style: none;
	font-size: 9pt;
	font-weight: 600;
}

#logo-list li { margin: 3px 0; }

#logo-list li:before {
	content: '+';
	margin-right: 5px;
	color: #ec005e;
}

.trip-row { clear: both; }
.trip-row img.left { float: left; }
.trip-row img.right { float: right; }

/* --- POPUPS --- */

#fade {
	display: none;
	background: #000;
	position: fixed; left: 0; top: 0;
	z-index: 10;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}

.popup_block {
	display: none;
	background: #000;
	padding: 4%;
	border: 1px solid #fff;
	float: left;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
}

.close-pop { float: right; margin: -45px -35px 0 0; }
.close-pop:hover { color: #fff; }

/*--Making IE6 Understand Fixed Positioning--*/
*html #fade { position: absolute; }
*html .popup_block { position: absolute; }

/* --- HTML5 Banners--- */



/* --- Contact --- */

form {  }

input.contact-page-input { width: 41%; padding: 2% 2% 2% 5%; border: 1px solid #ec005e; font-size: 10pt; font-family: "Lato", Century Gothic, Helvetica, sans-serif; background: url('../img/icons-contact.gif') no-repeat; }

/* --- The border is fucking us --- */

#name { background-position: 15px -35px; }
#name:focus { background-position: 15px 9px; }

#email { background-position: 15px -167px; float: right; }
#email:focus { background-position: 15px -123px; }

textarea {
	width: 96%;
	height: 250px;
	padding: 2%;
	border: 1px solid #ec005e;
	resize: none;
	margin: 3% 0 20px 0;
	font-size: 10pt;
	font-family: "Lato", Century Gothic, Helvetica, sans-serif;
}

textarea:focus, input:focus {
	border: 1px solid #333;
	background-color: #fff;
}

input.submit-btn {
	font-size: 12pt;
	cursor: pointer;
	background: #ec005e;
	padding: 3% 0;
	width: 100%;
	color: #fff;
	float: left;
	border: 1px solid #ec005e;
	margin: 0 0 10px 0;
	text-transform: uppercase;
	-moz-transition-duration: 0.5s;
    -moz-transition-property: background-color;
    -webkit-transition: all 0.4s ease-in-out 0s;
	-o-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}

input.submit-btn:hover { background: #fff; color: #ec005e; }

/* --- Thank You --- */

#thanks { padding: 0 10%; text-align: center; }
#thanks h1 { color: #ec005e; font-size: 30pt; }
#thanks p { color: #333; font-size: 12pt; }

/* --- Footer --- */

footer {
	width: 100%;
	background: #333;
	padding: 3% 0 6% 0;
	margin-top: 10px;
	clear: both;
}

#foot {
	width: 960px;
	margin: 0 auto;
	color: #fff;
}

#foot aside { float: left; }

#foot aside a { line-height: .8em; font-size: 30pt; letter-spacing: -.09em; color: #555555; font-family: "Montserrat", Helvetica, Arial, sans-serif; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#foot aside a:hover { color: #666; }

#copy-sep { border: none; height: 2px; width: 50%; background: #ec005e; margin: 15px 0 12px 0; }

#foot small { font-size: 75%; }
#foot small span { color: #ec005e; }

#foot #foot-right { float: right; }
#foot section { width: 210px; float: left; margin: 0 50px; }
#foot:last-child section { margin-right: 0; }

#foot section h5 { color: #fff; font-size: 9pt; font-weight: 400; text-transform: uppercase; padding: 7px 10px; width: 190px; background: #ec005e; }
#foot section ul { font-size: 9pt; margin: 10px 2px; }
#foot section ul li { margin: 5px 0; }
#foot section ul li a:hover { color: #fff; }

#foot section ul li span { color: #ec005e; }
#foot section ul li a.scroll-top { text-transform: uppercase; cursor: pointer; color: #fff; }
#foot section ul li a.scroll-top:hover { color: #ec005e; }

/* --- Responsive Design --- */

@media only screen and (max-width: 980px) {
	#cssdesignawards, #css-light, #csswinner, #best-css { display: none; }

	.flash { display: none; }

	#portfolio { margin: 1% 0 0 2%; }

	#portfolio figure.port-fig { margin: 1%; width: 30.6%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
	#portfolio figure.port-fig:nth-of-type(4n) { margin: 1%; } /* Un-Inheriting */

	/* --- Home --- */

	#banner { height: 300px; }
	#banner-text { 	position: absolute; top: 115px; left: 5px; padding: 0 0 0 15px; font-size: 48pt; }

	#particles-js { height: 300px; }

	.home-module section { width: 75%; }

	.port-module { margin: 10px 0; }
	.port-module aside { float: left; width: 25%; }
	.port-module section { float: right; width: 75%; }

	#content figure.home-fig { margin: 1.75%; width: 48%; }
	#content figure.home-fig:nth-of-type(1) { margin-left: 0; }
	#content figure.home-fig:nth-of-type(2) { float: right; }

	p.catalog a { float: left; padding: 15px 4.8%; margin: 10px 0; width: 90%; border: 1px solid #ec005e; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

	/* --- Footer --- */

	#foot { padding: 5% 3%; width: 94%; }
	#foot section { margin: 0 20px; }


	/* --- About Me --- */

	.about-module { clear: both; padding: 0 3%; width: 94%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
	.about-module aside { float: left; width: 25%; }

	.about-module section { float: right; width: 70%; }
	.about-module section ul { font-weight: 600; display: inline-block; margin-right: 7%; }

	.about-module section h4 { font-size: 200%; }
	.about-module section h5 { font-size: 100%; }
	.about-module section h6 { font-size: 85%; }
	.about-module section p { font-size: 95%; line-height: 1.5em; }
	.about-module section span { margin: 0; color: #ec005e; }

	/* --- Creative --- */

	#creative-info { float: left; width: 30%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
	#creative { float: right; width: 65%; }
	#creative img { width: 100%; }

	.popup_block { padding: 1px; left: 60%; }
	.close { float: none; }

	/* --- Contact & Content --- */

	#content { margin: 15px 3% 0 3%; width: 94%; }
	#left-content { width: 70%; float: left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

	input.contact-page-input { width: 40%; padding: 2% 2% 2% 6%; }
	textarea { width: 95.75%; padding: 2%; }

	aside.side-info { float: right; width: 25%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

	.block-head-hold { float: left; width: 100%; }
	.block-head { background: #333; color: #fff; float: left; padding: 3% 5%; width: 74%; }
	.block-head-icon { background: #ec005e; color: #fff; margin-left: 1px; float: left; padding: 3% 5%; }
}

@media only screen and (max-width: 830px) {

	/* --- Home Ports --- */


	/* --- Portfolio Page --- */

	#portfolio { margin: 1% 0 0 2%; }
	#portfolio figure.port-fig { width: 46.9%; }
	.about-module section ul { margin-right: 2%; }

	/* --- Contact ---*/

	input.submit-btn { padding: 5% 0; }
	input.contact-page-input { padding: 2% 6% 2% 2%; background: none; }

}


@media only screen and (max-width: 675px) {

	header { }

	#banner { height: 250px; }
	#banner-text { 	position: absolute; top: 95px; left: 5px; padding: 0 0 0 15px; font-size: 42pt; }

	#particles-js { height: 250px; }

	#content { margin: 15px 3%; width: 94%; }

	nav ul { margin: 10px 0; text-align: center; width: 100%; }
	nav ul li a { margin: 0 1%; color: #333; }

	/* --- Home Page --- */

	#carousel { margin: 0 3%; width: 94%; height: 250px; }
	.slide { width: 100%; height: 250px; }
	.slide section p { display: none; }
	.tabs { left: 1%; }

    .home-module section { width: 100%; }
    .port-module aside h3 { font-weight: 400; text-align: center; font-size: 12pt; margin: 10px 0; color: #fff; background: #333; padding: 3%; width: 94%; }
	.port-module aside { float: left; width: 100%; }
	.port-module section { float: left; width: 100%; }

	#content figure.home-fig { margin: 1.75%; width: 100%; float: left; }


	p.catalog { font-size: 110%; }
	p.catalog a { float: left; padding: 15px 4.8%; margin: 10px 0; width: 90%; border: 1px solid #ec005e; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

	#foot-right { display: none; }


	/* --- Portfolio Page --- */

	#portfolio figure.port-fig { width: 96%; margin: 1%; }
	#portfolio figure.port-fig:nth-of-type(4n) { margin: 1%; } /* Un-Inheriting */

	/* --- Creative --- */

	#creative-info { background: #fff; padding: 2% 0; position: absolute; width: 94%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
	#creative-info section { float: left; margin: 0; width: 30px; height: 30px; border-radius: 30px; line-height: 30px; font-size: 12pt; }
	#creative-info h1 { font-size: 100%; text-align: right; }
	#creative-info h2 { font-size: 80%; text-align: right; }
	#creative-info p { display: none; }
	#logo-list { display: none; }

	#creative-info hr { clear: left; width: 100%; height: 1px; background: #ec005e; border: none; margin: 5px 0; }

	#creative-info nav { text-transform: uppercase; font-size: 7pt; font-weight: bold; color: #ec005e; }
	#creative-info nav #back { float: left; padding-left: 15px; background: url("../img/back.png") no-repeat scroll 0 1px; }
	#creative-info nav #next { float: right; }
	#creative-info nav a { color: #333; }
	#creative-info nav a:hover { color: #ec005e; }

	#creative { width: 100%; }
	#creative > img:first-child, #creative img.rhap-1,  #creative img.links { margin-top: 75px; }

	/* --- About --- */

	hr.about-sep, hr.title-top { display: none; }
	.about-module aside .creighton { display: none; }
	.about-module aside { float: left; width: 100%; }
	.about-module section { float: right; width: 100%; }
	.about-module section ul { font-weight: 600; display: inline-block; margin-right: 6%; }

	.about-module:first-child section p { margin-top: 15px; }
	.about-module section h1, .about-module section h2 { text-align: center; padding: 0; width: 100%; color: #fff; background: #333; }
	.about-module section h1 { padding-top: 8px; }
	.about-module section h2 { padding-bottom: 8px; }
	.about-module section h2 i { color: #fff; }
	.about-module aside h3 { background: #333; color: #fff; padding: 8px 0; margin: 20px 0; width: 100%; text-align: center; }

	/* --- Contact & Content --- */

	#left-content { margin-top: 15px; width: 100%; float: left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

	aside.side-info { width: 100%; float: left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

	.block-head-hold { float: left; width: 100%; }
	.block-head { background: #333; color: #fff; float: left; padding: 3% 5%; width: 74%; }
	.block-head-icon { background: #ec005e; color: #fff; margin-left: 1px; float: left; padding: 3% 5%; }

	#searchform input { float: left; width: 100%; }
	#searchsubmit { padding: 20px 15px; }

	input.contact-page-input { width: 96%; margin: 1% 0; padding: 4% 2%; background: none; }
	#email { float: left; }
}

@media only screen and (max-width: 465px) {

	/* --- Home --- */

	#banner { height: 200px; }
	#banner-text { 	position: absolute; top: 100px; left: 0px; padding: 0 0 0 15px; font-size: 24pt; }

	#particles-js { height: 200px; }

	/* --- About Small List --- */

	.about-module section ul { margin: 5px 0; width: 100%; text-align: center; }
	.about-module section ul li { display: inline; }
	.about-module section ul li:first-child:before { content: none; }
	.about-module section ul li:before {
		content: '+';
		margin: 0 2% 0 1%;
		color: #ec005e;
	}
}