/* colours Red #EC185B Light Red #f69680 Yellow #FDB813 Light Yellow #FFD88F 
Teal #00A79D Light Teal #78CCD0 Slate #C0BEB7 Cloud #EAE5DA Dark Indigo #232439 Light indigo #4c4f6d */

/*Backgrounds by <a href="http://subtlepatterns.com/">Subtle Patterns</a>*/

/* Nautik @font-face Generated by Font Squirrel (http://www.fontsquirrel.com) on October 5, 2014 */

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

}

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


@media screen{
	body {
		font-family: 'Open Sans', sans-serif;
		font-weight: 300;
		background-color: #4c4f6d;
		color: #333;
		
	}

	/*push content down below nav bar and between containers*/
	#pushit{
		margin-top:15px;
	}

	#pushit2{
		margin-top:70px;
	}

	.spacey:nth-of-type(1n){
	   padding: 15px 30px 0px 25px;
	 }

	 .spacey:nth-of-type(2n){
	   padding: 0px 30px 0px 25px;
	 }

	 .spacey:nth-of-type(3n){
	   padding: 0px 30px 20px 25px;
	 }

	.container-color{
		background-color:rgba(250, 250, 250, 0.8);
	}


	/* Nav Styles */
	nav li a{
		font-size:1.5em;
	}

	img#logo {
		margin-top:-8px;
	}


	/* Hello Content Section */
	#hello {
		display: inline;
		float: right;
		color: #011A3E;
	}

	#aboutpic{
		padding-top: 20px;
	}

	#hello h1{
		padding: 0px 0px 20px 0px;
		font-size: 4em;
		font-family: 'nautikbold', Georgia, serif;
		color:#00A79D;
		margin:30px 0px 0px 0px;
		padding-bottom:0px;
	}

	#hello h2{
		color: #444;
		font-size: 1.8em;
		font-family: 'Open Sans', sans-serif;
		text-transform: none;
	}

	#hello h2:first-of-type{
		padding: 0px 0px 20px 0px;
	}

	#hello h2:last-of-type{
		padding: 0px;
	}	


	/* text styles */

	h1 {
		font-family: 'nautikbold', Georgia, serif;
		color: #00A79D;
		font-size: 2.5em;
	}

	h2 {
		font-family: 'nautikbold', sans-serif;
		color: #EC185B;
		margin-bottom:-5px;
		padding-bottom:0px;
		padding-top:10px;
		font-size: 1.9em;
		text-transform: uppercase;
	}

	h3 {
		margin-bottom: -10px;
		color: #EC185B;
		font-family: 'Open Sans', sans-serif;
		margin: 5px 0px 0px 0px;
		font-size: 1em;
	}

	p {
		margin: 5px 0px;
		font-size: 1.3em;
	}

	p a {
		color: #011A3E;
		text-decoration: underline;
	}

	p a:hover {
		color: #EC185B;
	}

	p a:visited {
		color: #00A79D;
	}
	

	/*Portfolio */
	ul.portfolio li {
	    display: inline-block;
	    vertical-align: top;
	    width: 30%;
		max-width: 400px;
		min-width:150px;
		margin-right: 20px;
		margin-bottom: 20px;
		text-align: center;

	}
	ul.portfolio li a img{
	    display: block;
	    margin: 0 auto;
	}

	ul.portfolio li h4, ul.portfolio li p{
	    margin: 5px;
	    color:#011A3E;
	    text-decoration:none;
	    font-size: 1.4em;
	    margin-top:-5px;
	}

	ul.portfolio {
		padding-left:0;
	}

	ul.portfolio li a.hidden{
		display:none;
	}

	ul.portfolio li a{
		color:#00A79D;
		margin-left: 2px;
		font-size: 1.2em;
	}


	/* Contact Section */
	.contact p a{
		color: #EC185B; 
		font-family: 'Open Sans', sans-serif;
	}

	.contact p a:hover{
		color: #00A79D;
	}

	.contact p{
		color: #011A3E;
		font-family: 'Open Sans', sans-serif;
		font-size: 1.5em;
		margin-top: 0px;
	}

	#hellocat img {
		z-index:1000;
		max-width: 80%;
	  	height: auto;
	  	margin-top:10px;
	}
	

	/* Sticky footer styles
	-------------------------------------------------- */
	html {
	  position: relative;
	  min-height: 100%;
	}
	body {
	  /* Margin bottom by footer height */
	  margin-bottom: 60px;
	}

	.footer {
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  /* Set the fixed height of the footer here */
	  height: 60px;
	  background-color: #00A79D;
	  /*opacity: 0.5;*/
	}

	.footer > .container {
	  padding-right: 15px;
	  padding-left: 15px;
	}

	footer ul li {
		list-style: none;
		display:inline-block;	
	}	

	footer a, footer a:visited{
		text-decoration: none;
	}

	footer ul.soc{
		float: right;
		margin-top:12px;
		margin-bottom:12px;
		color: #fff;
	}

	/* Social Media icons from http://perfecticons.com/ */
	 
	 
	@media screen and (-webkit-min-device-pixel-ratio:0) {
	    @font-face {
	        font-family:si;
	        src: url(../fonts/socicon.svg) format(svg);
	    }
	}

	.soc a {
	    font-family:si!important;
	    font-style:normal;
	    font-weight:400;
	    -webkit-font-smoothing:antialiased;
	    -moz-osx-font-smoothing:grayscale;
	    -webkit-box-sizing:border-box;
	    -moz-box-sizing:border-box;
	    -ms-box-sizing:border-box;
	    -o-box-sizing:border-box;
	    box-sizing:border-box;
	    overflow:hidden;
	    text-decoration:none;
	    text-align:center;
	    display:block;
	    position: relative;
	    z-index: 1;
	    width: 35px;
	    height: 35px;
	    line-height: 34px;
	    font-size: 20px;
	    -webkit-border-radius: 100px;
	    -moz-border-radius: 100px;
	    border-radius: 100px;
	    margin-right: 4px;
	    color: #00A79D;
	    background-color: #c4f0f2;
	}

	.soc-icon-last{
	    margin:0 !important;
	}

	.soc-linkedin:before {
	    content:'j';
	}
	.soc-twitter:before {
	    content:'a';
	}
	.soc-tumblr:before {
	    content:'z';
	}
	.soc-instagram:before {
	    content:'x';
	}
	.soc-pinterest:before {
	    content:'d';
	}

}




@media (max-width: 767px) {
	#hello h1{
		text-align: center;
    }
}

@media screen and (max-width: 860px){
	
	nav {
		font-size: 1.4em;
	}

	#hellocat img{
		min-height: 120px;
		min-width:114px;
	}	
}

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

	#hello aside:first-of-type {
		padding: 10px;
		}

	#aboutpic img{
		display: block;
	    margin-left: auto;
	    margin-right: auto;
	}
}


@media screen and (max-width: 430px) {
	#hellocat img{
		display:none;
	}
}


@media print {
	
	nav {
		display: none;
	}

	* {
		background-image: none;
		background-color:#fff;
		color:#000;
		list-style: none;
	}

	#hellocat img{
		display:none;
	}
}