/*
Elise Murphy
Portfolio Site
July 2013
*/


/* Table of Content
---------------------------------------------------
#Resets
#Typography
#Links
#Page Styles
#Header
#Nav
#Portfolio
#About
#Contact
#Form
#Footer
#Media Queries
*/


/* #Resets
--------------------------------------------------- */

* {
    margin:                         0;
    padding:                        0;
    border:                         0;
}

html {
    margin:                         0 auto;
}

article, aside, details, figcaption, figure, footer, header, menu, nav, section, blockquote {
    display:                        block;
}

ol, ul {
    list-style:                     none;
}

img {
    max-width:				        100%;
    height:					        auto;
    width: 					        auto; /* ie8 */
}

/* #Typography
================================================== */

@font-face {
    font-family: 'ashbury-lightregular';
    src: url('../fonts/AshburyLig-webfont.eot');
    src: url('../fonts/AshburyLig-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/AshburyLig-webfont.woff') format('woff'),
    url('../fonts/AshburyLig-webfont.ttf') format('truetype'),
    url('../fonts/AshburyLig-webfont.svg#ashbury-lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Dosis';
    font-style: normal;
    font-weight: 400;
    src: local('Dosis Regular'), local('Dosis-Regular'), url(http://themes.googleusercontent.com/static/fonts/dosis/v1/Ewe0SEXPrakEimFzbOGwB6CWcynf_cDxXwCLxiixG1c.woff) format('woff');
}
@font-face {
    font-family: 'Dosis';
    font-style: normal;
    font-weight: 500;
    src: local('Dosis Medium'), local('Dosis-Medium'), url(http://themes.googleusercontent.com/static/fonts/dosis/v1/A4RWZsncmJ25G8iqn2EHN3YhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}
@font-face {
    font-family: 'Dosis';
    font-style: normal;
    font-weight: 600;
    src: local('Dosis SemiBold'), local('Dosis-SemiBold'), url(http://themes.googleusercontent.com/static/fonts/dosis/v1/f8qltGyj2S-SS_tsOHsjgXYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}


/* #Links
================================================== */

a img[src$=png], a:link img[src$=png],
a:visited img[src$=png], a:active img[src$=png],
a img[src$=jpg], a:link img[src$=jpg],
a:visited img[src$=jpg],a:active img[src$=jpg] {
    text-decoration:					none;
    border:								0 none;
}

a:hover img[src$=png],
a:hover img[src$=jpg] {
    text-decoration:					none;
    border:								0 none;
}

a, a:link, a:visited, a:active  {
    text-decoration:					none;
    color:                              #464659;				
}


/* #Page Styles
--------------------------------------------------- */

html {
    background-color:                 #fff;
    
}

body {
    font:                               normal 1.03em/1.43 Dosis, sans-serif;
    color:                              #464659;
    z-index:                            -99;
    height:								100%;
}

noscript, noscript a,
noscript a:link, noscript a:visited,
noscript a:active {
    color:                              red;
}

/* fades in page as site loads */
.fadein {
    animation:                          fadein 2.5s;
    -moz-animation:                     fadein 2.5s; /* Firefox */
    -webkit-animation:                  fadein 2.5s; /* Safari and Chrome */
    -o-animation:                       fadein 2.5s; /* Chrome */
}
@keyframes fadein {
    0% {
            opacity:                    0;
    }
    100% {
            opacity:                    1;
    }
}
/* Firefox */
@-moz-keyframes fadein {
    0% {
            opacity:                    0;
    }
    100% {
            opacity:                    1;
    }
}
/* Safari and Chrome */
@-webkit-keyframes fadein {
    0% {
            opacity:                    0;
    }
    100% {
            opacity:                    1;
    }
}
/* Chrome */
@-o-keyframes fadein {
    0% {
            opacity:                    0;
    }
    100% {
            opacity:                    1;
    }
}


/* #Header Styles
--------------------------------------------------- */

#top {
	position:							fixed;
	top:								0;
	padding-top:						20px;
	z-index:                            999;
	background-color:					rgba(255,255,255,1.0);
	/*height:								110px;*/
    height:                             auto;
}

.borderline {
	margin-top:							20px;
	background-color:					#d4d4dd;
	height:								10px;
}

header {
	margin:								0 auto;
    height:                             auto;
}

.full-width {
	width:								100%;
}

h1, h2 {
    font:                               normal 1.0em/1.2 ashbury-lightregular, serif;
    color:                              #7F3F70;
    text-align:                         left;
}

h1 {
    font-size:                          2.38em;
    text-transform:                     lowercase;
}

h2 {
	font-size:							.98em;
    letter-spacing:                     .02em;
}
h3 {
    font-size:                          1.15em;
}
h4 {
    padding-bottom:                     5px;
}

#logo-etal, #logo-etal>a, #main-nav {
    height:                         	80px;
}

section #logo-etal {
    float:                              left;
    top:                                0;
    display:                            inline-block;
}

#logo {
    width:                              80px;
    height:                             auto;
}
#name-profession.columns {
    margin-top:                         13px;
}

#design-play {
	position:							relative;
    top:                                0;
    margin-top:                         130px;
	background:							#d4d4dd url('../images/creating_960x480.jpg') no-repeat top center;
	background-size:					cover;
	height:								460px;
	opacity:							.6;
	z-index:							900;
	overflow:							hidden;
}

#quote_play_design {
	color:								#fff;
	position:							relative;
    top:                                20%;
	height:								100px;
	z-index:						 	990;
}

#quote_play_design blockquote {
    font-size:                          2.0em;
    letter-spacing:						.02em;
}

.quote-start {
	float: 								left;
	line-height:						1.0em;
	font-size:							5em;
	margin-top:							-20px;
	font-family:						ashbury-lightregular, serif;
	height:								100px;
}

.quote-indent {
    text-indent:                        60px;
    display:							block;
}

#intro {
	background-color:					#d4d4dd;
	position:							relative;
    top:                                0;
	margin-bottom:						-10px;
	padding-bottom:						100px;
}

#welcome {
	padding-top:						30px;
}

#welcome h4 {
	font-size:							1.5em;
}

div.dot-border {
	position:							relative;
	top:								0;
    border-bottom:                      3px dotted #464659;
    background:							#fff url('../images/grey-checkBG-60x40.png');
    height:								40px; 
}

div.box-shadow {
	box-shadow: 						0 -10px 10px -10px #ccc;
    -moz-box-shadow:                    0 -10px 10px -10px #ccc;
    -webkit-box-shadow:                	0 -10px 10px -10px #ccc;
}

/* #Nav
--------------------------------------------------- */


#main-nav.columns {
    padding-right:                      20px;
}

#main-nav,
#main-nav ul li {
    float:                              left;
    text-transform:                     uppercase;
    background-color:                   #fff;
}

#main-nav ul li {
	height:								24px;
}

#main-nav ul {
    padding-top:                        56px;
}

#main-nav a:hover {
    padding:                            10px;
    background-color:                   #464659;
    color:                              #fff;
    border:                             2px solid #464659;
}

#main-nav a.border-radius-rgba:hover {
    background-color:                   rgba(68,68,68,1.0);
    border-radius:                      3px 3px 3px;
    -webkit-border-radius:              3px 3px 3px;
    -moz-border-radius:                 3px 3px 3px;
}

#portfolio, #about-me, #contact {
    position:                           relative;
    top:                                -130px;
}





/* #Portfolio
--------------------------------------------------- */

article h3, article h4 {
    position:                           relative;
    top:                                -20px;
    text-transform:                     uppercase;
    font-weight:                        400;
    color:                              #fff;
    background-color:                   #7F3F70;
    border-radius:                      3px 3px 3px;
    -webkit-border-radius:              3px 3px 3px;
    -moz-border-radius:                 3px 3px 3px;
    text-indent:                        10px;
    letter-spacing:                     .05em;
    text-shadow:                        1px 1px 1px #464659;
    padding-right:                      10px;
    padding-top:                        5px;
    padding-bottom:                     5px;
    margin-bottom:                      20px;
}

#portfolio-section {
    position:                           relative;
    top:                                0;
    z-index:                            500;
}

#portfolio-intro {
    margin-bottom:                     20px;
    font-size:                          1.2em;
    color:                              #fff;
    margin-top:                         -10px;
}

#portfolio-pieces ul li,
#my-statement,
#skills,
#contact-me {
    background-color:                   #fff;
    box-shadow:                         5px 5px 4px rgba(212,212,221,0.65);
    -moz-box-shadow:                    5px 5px 4px rgba(212,212,221,0.65); /* Firefox v3.5+ */
    -webkit-box-shadow:                 5px 5px 4px rgba(212,212,221,0.65); /* Safari v3.0+ and by Chrome v0.2+ */
}

#portfolio-pieces ul li {
    float:                              left;
}

#portfolio-pieces .img-margin {
	margin-left:						70px;
}


#portfolio-pieces ul {
    padding-bottom:                     50px;
}

#portfolio-pieces h4 {
    text-transform:						uppercase;
}

.project-links {
	background-color:                  	#d4d4dd;
	padding:							2px 5px;
}

.project-links a,
.project-links a:link,
.project-links a:visited,
.project-links a:active {
		margin-right:					5px;						
}

.project-links a:hover {
	color:								#fff;
	background-color:					#464659;
	padding-top:						2px;
	padding-bottom:						2px;
}

.thumbnail {
    position:                           relative;
    top:                                0;
    width:                              210px;
    height:                             auto;
    z-index:							50;
}

.overlay {  
    position: 							relative;  
    float: 								left;  
}  
.overlay:before {  
    content: 							"";  
    display: 							block;  
    position: 							absolute;  
    top: 								0;  
    bottom: 							0;  
    left: 								0;  
    right: 								0;  
}  
.overlay:hover:before { 
	content:							"View More Images »";
	text-shadow:						2px 2px 2px black;
	text-indent:						10px;
	padding-top:						50%;
	color:								#fff; 
	font-weight:						600;
    background: 						rgb(70,70,89);	
} 

.thumbnail:hover {
	opacity:							.2;
}
.normal-weight {
    font-weight:                        normal;
    text-transform:                     none;
}

/* #About
--------------------------------------------------- */

#statement-skills {
    padding-bottom:                     20px;
}

#about-me-section {
    padding-bottom:                     120px;
}

#my-statement {
    float:                              left;
}

#my-statement p {
    padding:                            0 5px 12px 10px;
}

.heart {
   color:                               #7F3F70;
}

article #my-statement h4, article #skills h4 {
	position:							relative;
    top:                                0;
    color:                              #464659;
    text-shadow:						none;
    background-color:					#d4d4dd;
    text-indent:						10px;
    padding-right:						0;
    margin-right:						0;
    margin-bottom:                      10px;
}

aside .col {
    float:                              left;
    padding-bottom:                     10px;
}

#resume {
    padding-top:                        50px;
}

#resume a.circle:before,
#resume a.link.circle:before,
#resume a.visited.circle:before,
#resume a.active.circle:before {
	content:							"»";
	position:							absolute;
	left:								820px;
	width:								33px;
	height:								33px;
	border-radius:						50%;	
	-moz-border-radius: 				50%; 
	-webkit-border-radius:				50%;
	background:							#464659;
	color:								#fff;
	text-align:							center;	
}

#resume a:hover.circle:after {
	content:							"»";
	position:							absolute;
	left:								820px;
	width:								33px;
	height:								33px;
	border-radius:						50%;	
	-moz-border-radius: 				50%; 
	-webkit-border-radius:				50%;
	background:							#d4d4dd;
	color:								#fff;
	text-align:							center;	
}

#resume a,
#resume a:link,
#resume a:visited,
#resume a:active {
	font-weight:						600;
	font-size:							1.3em;
	border-bottom:						2px dotted #464659;
}

#resume a:hover {
    color:                   			#d4d4dd;
    border-color:						#d4d4dd;
}


/* #Contact
--------------------------------------------------- */
#contact-section {
    padding-bottom:                     50px;
}

img#my-pic {
    width:                              200px;
    height:                             auto;
}

img#my-pic.round {
    border:                             2px solid #d4d4dd;
    border-radius:                      50%;
    -webkit-border-radius:              50%;
    -moz-border-radius:                 50%;
}

#happy-to-help {
    font-size:                          1.3em;
    color:                              #444;
    margin-left:                        40px;
    padding:							10px;
    /*height:								90px; */
}

.talk-bubble { 						
	width: 								120px; 
	height: 							90px; 
	background: 						#d4d4dd; 
	position: 							relative; 
	border-radius:                      3px;
    -webkit-border-radius:              3px;
    -moz-border-radius:                 3px;
} 

.talk-bubble:before { 
	content:							""; 
	position: 							absolute; 
	left: 								100%; 
	top: 								52px; 
	width: 								0; 
	height: 							0; 
	border-top: 						13px solid transparent; 
	border-left: 						52px solid #d4d4dd; 
	border-bottom: 						13px solid transparent;
}


#my-email, #my-phone {
    font-weight:                        500;
}

#social-media {
    padding-top:                        10px;
}

#social-media li {
    float:                              left;
    margin-right:                       8px;
    display:                            inline-block;
}

#social-media img {
    width:                              25px;
    height:                             auto;
    background-color:                   #464659;
    border-radius:                      5px 5px;
    -webkit-border-radius:              5px 5px;
    -moz-border-radius:                 5px 5px;
    border:								2px solid  #464659;
}

#social-media img:hover {
    background-color:                   #d4d4dd;
    border:								2px solid #d4d4dd;
    border-radius:                      5px 5px;
    -webkit-border-radius:              5px 5px;
    -moz-border-radius:                 5px 5px;
}


/* #Form
--------------------------------------------------- */

#contact-me {
    background-color:                   #7F3F70;
    color:                              #fff;
}

input, label {
    display:                            block;
    padding-top:                        4px;
    padding-bottom:                     4px;
}

.hidden {
	display:							none;
}

.container input.four.columns,
.container textarea.four.columns {
    width:                              240px;
}

#contact-me label:first-child {
    margin-top:                         10px;
}

#send {
    margin-top:                         10px;
    margin-bottom:                      20px;
    font:                               inherit;
    text-align:                         center;
    padding-top:                        5px;
    padding-bottom:                     5px;
    padding-right:                      0;
    opacity:                            .3;
    filter:                             alpha(opacity=30);
    border-radius:                      10px 10px;
    -webkit-border-radius:              10px 10px;
    -moz-border-radius:                 10px 10px;
    border:                             1px solid #fff;
}

#send:hover {
    color:                              #fff;
    background: #464659; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #464659 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#464659), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #464659 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #464659 0%,#ffffff 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #464659 0%,#ffffff 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, #464659 0%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464659', endColorstr='#ffffff',GradientType=1); /* IE6-9 fallback on horizontal gradient */
}

/*if gte IE 9 */
.gradient {
        filter:                         none;
}

#thank-you, #form-error {
    margin-top:                         130px;
    padding-top:                        30px;
    height:                             auto;
	min-height:							120px;
    font-size:                          1.15em;
    padding-bottom:                    	30px;
}


/* #Footer
--------------------------------------------------- */

footer {
	position:							relative;
	top:								0;
    color:                              #fff;
}

footer,
#footer-nav {
    background-color:                   #464659;
}

#footer_wrapper {
	margin:								0 auto;
	height:                             80px;
	padding-top:                        25px;
}

#copyright-designer li {
    padding-right:                      5px;
}
#footer-nav ul {
    margin-left:                       10px;
}
#copyright-designer li,
#footer-nav li {
    float:                              left;
    display:                            block;
}

.pipe:after {
    content:                            "|";
    padding-left:                       10px;
    padding-right:                      10px;
}

footer a,
footer a:link,
footer a:visited,
footer a:active {
    color:                              #fff;
}

footer a:hover {
    border-bottom:                      1px dotted #fff;
}

/* #Media Queries
--------------------------------------------------- */

/* larger than 768 (devices and browsers) */
@media screen and (min-width: 768px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

    body {
        font-size:                          .88em;
    }
    #top {
    	/*height:								94px;*/
    }
    #logo-etal>a, #logo {
        width:                              64px;
    }
    #logo-etal, #logo-etal>a, #main-nav {
        height:                             64px;
    }
    #name-profession {
        width:                             244px;
        padding-left:						8px;
    }
    #name-profession.columns {
        margin-top:                         7px;
    }
    #main-nav a:hover {
    	padding:                            7px;
    }

    #design-play {
    	height:								368px;
        margin-top:                         114px;
    } 
    #quote_play_design {
        top:                                10%;
    }
    .quote-start {
		margin-top:							-17px;
    }
    #intro {
    	padding-bottom:						80px;
    }
    #main-nav ul {
        padding-top:                        45px;
    }
    #main-nav ul li {
		height: 							19px;
	}
    article h3 {
        text-indent:                        3px;
    }
    .thumbnail {
        width:                              162px;
    }
	#portfolio-pieces .img-margin {
		margin-left:						50px;
	}
	#resume a.circle:before,
	#resume a.link.circle:before,
	#resume a.visited.circle:before,
	#resume a.active.circle:before {
		left:								674px;
	}
	#resume a:hover.circle:after {
		left:								674px;
	}
    .container input.four.columns,
    .container textarea.four.columns {
        width:                              190px;
    }
    #happy-to-help {
    	height:								100px;
    }
    img#my-pic {
        width:                              174px;
    }
    #portfolio, #about-me, #contact {
    	top:                                -114px;
	}
}


/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

    body {
        font-size:                          .88em;
    }
    #top {
        padding-top:                        10px;
    }
    header {
        padding-left:                       10px;
    }
    .borderline {
        position:                           relative;
    	margin-top:							0;
        top:                                0;
    }
    #logo-etal>a, #logo {
        width:                              66px;
    }
    #name-profession {
        width:                              260px;
        padding-left:						10px;
    }
    #logo-etal, #logo-etal>a {
        height:                             66px;
    }
    #name-profession.columns {
        margin-top:                         9px;
    }
    #logo-etal,
    .container #main-nav.seven.columns {
        padding-right:                      0;
        width:                              400px;
    }
    #main-nav {
        height:                             64px;
    }
    #main-nav ul {
        padding-top:                        20px;
        padding-bottom:                     24px;
    }
    #main-nav ul li {
        width:                              120px;
    }
    #design-play {
        margin-top:                         150px;
    	height:								260px;
    }
    #quote_play_design {
        top: 								5%;
    }
	#quote_play_design blockquote  {
		font-size:							1.6em;
	}
    .quote-start {
        font-size:							4em;
        margin-top:							-8px;
        line-height:                        1;
    }
	.quote-indent {
		text-indent:						25px;
	}
	#intro {
		height:								100px;
		padding-bottom: 					60px;
		margin-bottom:						76px;
	}
    div.row.dot-border {
        margin-left:                        -10px;
    }
    article h3 {
        text-indent:                        8px;
        top:                                -16px;
    }
    .container article h3.two.columns {
        width:                              90px;
    }
    #portfolio-pieces ul li {
    	padding-bottom:						20px;
    	box-shadow:							none;
    }
    #portfolio-pieces .img-margin {
		margin-left: 						0;
	}
	#portfolio-pieces a, 
	#portfolio-pieces h4, 
	#portfolio-pieces p {
		width:								200px;
	}
	#portfolio-pieces h4, 
	#portfolio-pieces p {
		float:								left;
		margin-left:						10px;
	}
	.project-links {
    	padding: 							0;
    	margin-top:							8px;
	}
	.project-links a,
	.project-links a:link,
	.project-links a:visited,
	.project-links a:active {
		display:							block;
		background-color:					#d4d4dd;	
		border-bottom:						1px dotted #fff;
		padding:							5px;		
	}
	.project-links a:hover {
		margin-right:						5px;	
		color:								#fff;
		background-color:					#464659;
	}
    #main-nav, #my-statement,
   .container aside.four.columns, #skills,
   .container #skills h4.four.columns,
    .container section.fifteen.columns,
    #resume, #contact-me {
        width:                              400px;
    }
    #about-me-section {
        padding-bottom:                     80px;
    }
    .container #skills h3.three.columns,
    .container #resume a.three.columns {
        width:                            370px;
    }
    aside .col {
        padding-bottom:                     0;
    }
    #skills {
        padding-bottom:                     10px;
    }
    #resume a.circle:before,
	#resume a.link.circle:before,
	#resume a.visited.circle:before,
	#resume a.active.circle:before {
		left:								130px;
	}
	#resume a:hover.circle:after {
		left:								130px;
	}
	#resume {
		padding-top: 						30px;
	}
    input.columns,
    textarea.columns {
        padding-right:                      28px;
    }
    .container ul.col,
    .container label.four.columns,
    .container input.four.columns,
    .container textarea.four.columns {
        width:                              360px;
        margin-left:                        10px;
    }
    input.columns, textarea.columns {
        padding-right:                      0;
    }
    .container #happy-to-help.four.columns {
        width:                               300px;
        margin-top:							 20px;
        margin-left:                         0;
        padding-top:                         10px;
    }
    .talk-bubble {
		height:								60px;
	}
    .talk-bubble:before {
    	border-bottom:		0;
		border-left: 26px solid rgba(0, 0, 0, 0);
		border-right: 26px solid rgba(0, 0, 0, 0);
		border-top: 52px solid #D4D4DD;
		bottom:	 100%;
		top:  60px;
		left: 130px;
	}
    img#my-pic {
        width:                              174px;
        margin-top:							20px;
    }
    #my-email, #my-phone {
        padding-bottom:                     3px;
    }
    footer {
        padding-bottom:                     20px;
    }
    footer #copyright-designer,
    footer nav{
        padding-top:                       10px;
    }
    .container footer #copyright-designer.nine.columns,
    .container footer nav.five.columns {
        width:                              380px;
        margin-left:                        10px;
    }
    #footer-nav ul {
        margin-left:                        0;
    }
    #footer-nav li {
        width:                             80px;
    }
     #portfolio, #about-me, #contact {
    	top:                                -166px;
	}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    body {
        font-size:                          .789em;
    }
    header {
        padding-left:                       10px;
    }
	.borderline {
        margin-top:							0;
        top:                                0;
    }
    #logo-etal {
        width:                              280px;
    }
    #logo-etal>a, #logo {
        width:                              55px;
    }
    #name-profession {
        width:                              215px;
        padding-left:						10px;
    }
    #logo-etal, #logo-etal>a {
        height:                             55px;
    }
    #name-profession.columns {
        margin-top:                         3px;
    }
    .container #main-nav.seven.columns {
        padding-right:                      0;
    }
    #main-nav {
        height:                             60px;
    }
    #main-nav ul {
        padding-top:                        25px;
    }
    #main-nav ul li {
        width:                              90px;
    }
    #design-play {
        margin-top:                         145px;
    	height:								200px;
    }
    #quote_play_design {
		top: 								5%;
	}
	.quote-start {
		font-size:							3.5em;
		margin-top:							-4px;
	}
	#quote_play_design blockquote  {
		font-size:							1.45em;
	}
	.quote-indent {
		text-indent:						18px;
	}
	#intro {
		height:								80px;
		padding-bottom: 					60px;
		margin-bottom:						65px;
	}
    #welcome {
        padding-bottom:                     25px;
    }
	#portfolio-pieces ul li {
    	padding-bottom:						25px;
    	box-shadow:							none;
    }
	#portfolio-pieces .img-margin {
		margin-left: 						0;
	}
	
	#portfolio-pieces a {
		width:								145px;
	} 	
	#portfolio-pieces h4, 
	#portfolio-pieces p {
		float:								left;
		width:								140px;
		margin-left:						5px;
		margin-right:						10px;
	}
	.project-links {
    	padding: 							0;
    	margin-top:							8px;
	}
	.project-links a,
	.project-links a:link,
	.project-links a:visited,
	.project-links a:active {
		display:							block;
		background-color:					#d4d4dd;	
		border-bottom:						1px dotted #fff;
		padding:							5px;		
	}
	.project-links a:hover {
		margin-right:						5px;	
		color:								#fff;
		background-color:					#464659;
	}
    div.row.dot-border {
        margin-left:                        -10px;
    }
    article h3 {
        text-indent:                        5px;
        top:                                -15px;
    }
    .container article h3.two.columns {
        width:                              80px;
    }
    #about-me-section {
        padding-bottom:                     50px;
    }
    #main-nav, #my-statement,
    .container aside.four.columns,
    .container #skills h4.four.columns,
    .container section.fifteen.columns,
    #skills, #resume, #contact-me {
        width:                              280px;
    }
    .container #skills h3.three.columns,
    .container #resume a.three.columns {
        width:                              250px;
    }
    aside .col {
        padding-bottom:                     0;
    }
    #skills {
        padding-bottom:                     10px;
    }
    .circle {
    	font-size:							2em;
    }
    #resume a.circle:before,
	#resume a.link.circle:before,
	#resume a.visited.circle:before,
	#resume a.active.circle:before {
		left:								125px;
	}
	#resume a:hover.circle:after {
		left:								125px;
	}
	#resume {
		padding-top: 						30px;
	}
    input.columns,
    textarea.columns {
        padding-right:                      28px;
    }
    .container ul.col, .container #resume p.four.columns,
    .container label.four.columns,
    .container input.four.columns,
    .container textarea.four.columns {
        width:                              260px;
        margin-left:                        10px;
    }
    input.columns, textarea.columns {
        padding-right:                      0;
    }
    .container #happy-to-help.four.columns {
        width:                               260px;
        margin-left:                         0;
        margin-top: 						 20px;
        padding-top:                         15px;
        padding-bottom:                      15px;         
    }
    .talk-bubble {
		height:								60px;
	}
    .talk-bubble:before {
    	border-bottom:		0;
		border-left: 26px solid rgba(0, 0, 0, 0);
		border-right: 26px solid rgba(0, 0, 0, 0);
		border-top: 52px solid #D4D4DD;
		bottom:	 100%;
		top:  60px;
		left: 130px;
	}
    img#my-pic {
        width:                              174px;
        margin-top:							20px;
    }
    #my-email, #my-phone {
        padding-bottom:                     3px;
    }
    footer {
        padding-bottom:                     20px;
    }
    footer #copyright-designer,
    footer nav{
        padding-top:                       10px;
    }
    .container footer ul#copyright-designer.nine.columns,
    .container footer nav.five.columns {
        width:                              280px;
        margin-left:                        5px;
    }
    #copyright-designer {
        clear:                              both;
    }
    #copyright-designer li {
        padding-right:                       1px;
    }
    #footer-nav ul {
        margin-left:                        0;
    }
    #footer-nav li {
        width:                              80px;
    }
    #portfolio, #about-me, #contact {
    	top:                                -165px;
	}
}

@media only screen and (max-width: 600px) {
    .sticky {
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto;
        z-index: 100;
        border-top: 0;
        border-bottom: 10px solid #d4d4dd;
        background-color: #fff;
        height: auto;

    }
    .container #main-nav.offset-by-one.seven.columns.sticky {
        width: 100%;
    }
    ul.seven.columns.container {
        position: relative;
        top: 0;
        width: 420px;
        padding: 10px 30px;
        margin: 0 auto;
    }
}