/********************************
ANIMATIONS
*********************************/
@keyframes bob {
	0% {
  		-webkit-transform: translateY(0px);
  		transform: translateY(0px); }

  	50% {
  		-webkit-transform: translateY(10px);
  		transform: translateY(10px); }

  	100% { 
  		-webkit-transform: translateY(0px);
  		transform: translateY(0px); }
  }


@keyframes swim {
  0% { 	
  	-webkit-transform: translate3d(0px, 0px, 0px);
  		transform: translate3d(0px, 0px, 0px); }

  50% {	
  	-webkit-transform: translate3d(-60px, 0px, 0px) rotateY(0deg);
  		transform: translate3d(-60px, 0px, 0px) rotateY(0deg); }

  55% { 
  	-webkit-transform: translate3d(-60px, 0px, 0px) rotateY(180deg);
  		-webkit-transform: translate3d(-60px, 0px, 0px) rotateY(180deg); }

  100% { 
  	-webkit-transform: translate3d(0px, 0px, 0px) rotateY(180deg);
  		transform: translate3d(0px, 0px, 0px) rotateY(180deg); }
}

@keyframes up {
	0% {
  		-webkit-transform: translateY(88px);
  		transform: translateY(88px); }

  	100% { 
  		-webkit-transform: translateY(-88px);
  		transform: translateY(-88px); }
}

#fish {
	animation: swim 2s infinite;
	animation-play-state: paused;
	transform-origin: 50% 50%;
}

#tank:hover #fish {
	animation: swim 2s infinite;
	animation-play-state: running;
}

#bob {
	animation: bob 2s infinite;
	animation-play-state: running;
}

#tank:hover #bob {
	animation: bob 2s infinite;
	animation-play-state: running;
}


#bubbles circle {
	animation: up 3s linear infinite;
}


/**************************/
/********** Fonts ********/

@font-face {
	font-family: Karla;
	src: url("../fonts/karla/Karla-Bold.ttf") format("truetype");
	font-weight: bold; }

@font-face {
	font-family: Karla;
	src: url("../fonts/karla/Karla-Regular.ttf") format("truetype");
	font-weight: normal; }

@font-face {
	font-family: Karla;
	src: url("../fonts/karla/Karla-BoldItalic.ttf") format("truetype");
	font-style: italic; }

@font-face {
	font-family: social;
	src: url("../fonts/socialico/Socialico.ttf") format("truetype"); }

strong {
	font-weight: bold; }

em {
	font-style: italic;
}

@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon/icomoon.ttf?siiwrw') format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-twitter:before {
  content: "\ea96";
}
.icon-behance:before {
  content: "\eaa8";
}
.icon-linkedin:before {
  content: "\eaca";
}


/************************************/


body {
	overflow-x: hidden; 
	position: relative; }

html, body {
	height: 100%;
	font-family: Karla;
	font-size: 16px;
	color: #360823;
	 }

p {
	padding-bottom: 20px;
	margin-bottom: 0;
}

.container {
	max-width: 1000px;
}

p:last-child {
	padding-bottom: 0; 
}

a {
	color: #AC1481;
	font-weight: bold;
	font-size: 1.3em;

}

a:hover {
	color: #360823;
}

.download {
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
}

/******* Colours *********/
.palePurple {
	background-color: #DFDDDE;
}

.paleGreen {
	background-color: #D6EFE6
}

.deepGreen {
	background-color: #018F6B;
	padding: 3em 0 3em 0;
}

.white {
	color: white; }

.greyBg {
	background-color: #F6F6F6;
	padding: 3em 0 3em 0;
}

.clearBg {
	padding: 3em 0 3em 0;
}

/**************************/
/****** Navigation ********/

.navbar {
	background: rgba(255,255,255,0.95);
	font-size: 1em;
	padding: 0;
	margin: auto;
}

.fitView {
	height: calc(100vh);
}

/* fix iOS bug not displaying 100vh correctly */
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.fitView {
		height: 768px;
	}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.fitView {
		height: 1024px;
	}
}
/* iphone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
	.fitView {
		height: 320px;
	}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
	.fitView {
		height: 568px;
	}
}
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
	.fitView {
		height: 320px;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
	.fitView {
		height: 480px;
	}
}

/*******/

.navbar-nav {
	text-align: center;
	float: none; }

.navbar-nav li a:hover {
	-webkit-transition-duration: 0.2s; /* Safari */
	transition-duration: 0.2s
	color: #AC1481; 
}

.navbar-nav li a {
	-webkit-transition-duration: 0.2s; /* Safari */
	transition-duration: 0.2s
	color: #AC1481; 
}

.nav a {
	color: #2D3837;
	font-size: 1.2em;
	text-transform: none;
	font-weight: bold;
	text-decoration: none;
}

.navbar-nav li {
	margin-left: 0;
}

.navbar-brand {
	height: 80px;
	margin-top: 10px;
	width: auto;
}

.glyphicon-menu-hamburger {
	font-size: 30px;
	color: #2D3837;
}

.active {
	color: #A82480;
}

.navbar-nav > li > a {
	padding-top:30px !important; 
	padding-bottom:30px !important;
}

.navbar {
	min-height:60px !important
}

.nav>li>a:hover, .nav>li>a:focus {
	color: #A82480;
	background: none;
}

.btn-primary {
	border: none;
	-webkit-box-shadow: none;
	text-shadow: none; }

button:focus {
	outline:none !important; }

.btn-info {
	border: none;
	-webkit-box-shadow: none;
	text-shadow: none; }


.imgPop {
  position: relative;
  top: 0;
  left: 0;
}

.meImg {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: 260px;
	margin-top: 18px;
}

.interests {
  position: relative;
  top: 0;
  left: 0;
  width: 400px;
  transform: scale(0.1); 
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
transform-origin: 50% 50%;
}


.imgPop:hover .interests {
	transform: scale(1); 
}

figure {
	margin: 0;
}

figcaption {
	padding-top: 10px;
}

.navbar-brand img {
	height: 100%;
}

a:hover {
	text-decoration: none;
}

ul.projectPoints {
	padding: 0 0 0 0;
}

ul.projectPoints li {
	display: block;
	margin: 0;
	padding: 0 0 20px 0;
}

ul.projectPoints li:last-child {
	padding: 0;
}


/****************************/
/********* Headings ********/
h1 {
	font-family: Karla;
	font-weight: bold;
	font-size: 2.7em;
	padding: 0;
	margin: 0 0 0.5em 0;
}

h2 {
	font-family: Karla;
	font-weight: bold;
	font-size: 2.5em;
	margin: 0 0 1em 0;
}

h3 {
	font-family: Karla;
	font-weight: bold;
	font-size: 2em;
	margin: 0 0 1em 0;
}

h3.center {
	text-align: center;
}

h4 {
	font-family: Karla;
	font-size: 1.3em;
	font-weight: bold;
}

h5 {
	font-family: Karla;
	font-weight: bold;
	color: white;
	text-align: center;
	font-size: 2em;
	margin: 1em 0 1em 0;
}

.no-padding {
	margin: 0;
	padding: 0;
}

.container-fluid.work-section {
	margin: 0;
	padding: 0;
}

.centre {
	margin: auto;
	text-align: center;
}

.pageTitle {
	padding-top: 20px;
	text-align: center;
}

.webpage .row {
	padding: 0;
}

.detail li {
	margin: 0 1em; }

.me.img-responsive {
	margin: 2em auto 0 auto; }

.img-responsive {
	margin: 1em auto 1em auto;
}

@media screen and (min-width:992px) {
	.img-responsive {
	margin: 2em auto 2em auto;
	}
}

.no-gutters div {
	padding: 0;
}

@media screen and (min-width:1000px) {
	.img-responsive {
	margin: auto;
	}
}

.border {
  	border: solid 1px #D1D2D4;
  }

.main-button {
	background-color: #128466;
	padding: 20px 30px 20px 30px;
	color: white;
	font-weight: bold;
	text-decoration: none;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-duration: 0.5s; 
	font-size: 1.2em;
	border-radius: 10px;
}

.main-button:hover {
	color: white;
	background-color: #28DB96;
}

#intro p {
	font-size: 1.4em;
	padding-top: 2em;
}

#intro {
	padding: 4em 0 2em 0;
}

svg {
	margin: -30px auto -30px auto;
}


/********* Footer ********/

.submit {
	background-color: transparent;
	padding: 10px 20px 10px 20px;
	border: solid white 2px;
	color: white;
	-webkit-transition-duration: 0.2s; /* Safari */
	transition-duration: 0.2s;
	border-radius: 5px;
}

.submit:hover {
	background-color: #A82480;
	border-color: #A82480;
}

.form-control {
	font-size: 16px;
	border: none;
	border-radius: 2px;
	padding: 0 15px;
	background-color: rgba(255, 255, 255, 0.2);
	color: white;
}

input.form-control {
	height : 40px;
}

.form-control:focus {
	box-shadow: none;
}

textarea.form-control {
	height: 80px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.form-control::-webkit-input-placeholder {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
}

.form-control:-ms-input-placeholder {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
}

.form-control::-moz-placeholder {
	font-size: 12px; 
	color: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
}

.form-control:focus::-webkit-input-placeholder {
	font-size: 16px;
}

.form-control:focus:-ms-input-placeholder {
	font-size: 16px;
}

.form-control:focus::-moz-placeholder:focus {
	font-size: 16px; 
}

#wrap {min-height: 100%; }

main {	
	padding-bottom: 250px; /* must be same height as the footer */
	margin-top: 80px;}  

@media screen and (min-width:768px) {
	main {
		margin-top: 90px;
	}
}

footer { 
	position: relative;
	margin-top: -250px; /* negative value of footer height */
	height: 250px;
	clear: both;  } 

footer h2 {
	color: white;
}

footer a {
	text-decoration: none;
	color: white;
	
}

footer a:hover {
	color: white;
	text-decoration: underline;
	color: white;
}

.social {
	margin-top: 3em;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.social p {
	padding: 0;
}

.social a {
	display: block;
}

/****************************/

em {
	font-style: italic; }

.fixed-md {
	position: relative; }

video {
	height: auto;
	width: 100%; }

div.row  {
  		padding-bottom: 20px;
  	}

.about-section {
	padding: 80px 0 80px 0;
	text-align: center;
}

.about-section ul {
		list-style-type: none;
		padding: 0;
}
.about-section ul li::before

#work { 
	margin-top: -80px;
	padding-top: 80px; }

/****** Portfolio Thumbnails ********/
	.work-section ul {
		list-style: none;
  		margin: 0;
  		padding: 0;
	}

	.hovertext p, .hovertext:hover p {
		color: rgba(0, 0, 0, 1);
	}

	.hovertext div {
		margin: 0 0 20px 0;
	}

/********/

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

	.intro {
		width: 400px;
		margin: auto;
	}

	div.row {
  		padding-bottom: 40px;
  	}

	.fixed-md {
		position: fixed; } 

	a.horizontal:after {
		top: 20%;
		font-size: 1em;
	}


	/****************************/
	/****** Portfolio Thumbnails ********/


	.work-section ul li {
		overflow: hidden;
  		box-sizing: border-box;
  		margin-bottom: 2em;
  		padding: 0;
  		margin-left: 1.5%;
  		margin-right: 1.5%;
  		width: 47%;
	}

	.hovertext img {
		max-width: 100%;
		transition: all .3s ease-in-out;
		transform: scale(1.01);
		-webkit-backface-visibility: hidden; /* fixed slight movement bug on chrome when hover*/
	}

	.hovertext:hover img {
		transform: scale(1.1);
	}

	.hovertext div {
		position: absolute;
		z-index: 3;
		top: 50%;
    	transform: translateY(-50%);
		left: 0;
		right: 0;
		text-align: center;
		padding: 0;
		margin: 0;
	}

	.hovertext h4 {
		font-size: 1.5em;
		transition: all .2s ease-in-out;
		color: rgba(174, 5, 130, 0);
	}

	.hovertext:hover h4 {
		color: rgba(174, 5, 130, 1);
	}

	.hovertext p {
		transition: all .2s ease-in-out;
		color: rgba(0, 0, 0, 0);
	}

	.hovertext:hover p {
		color: rgba(0, 0, 0, 1);
	}

	.hovertext div {
		margin: 0;
	}

	.hovertext::after {
		content: "";
		display: block;
		position: absolute;
		background-color: rgba(255, 255, 255, 0);
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;
		transition: all .2s ease-in-out;
	}

	.hovertext:hover::after {
		background-color: rgba(255, 255, 255, 0.9);
	}

	/****************************/


}

@media screen and (min-width:768px) {
  	.socialize {
  		text-align: right; }

	.navbar-nav {
		display: flex;
		justify-content:space-between;
		float: right; }

	.navbar-nav li {
		margin-left: auto;
	}

	div.navbar-header {
		border-bottom: none; }

	a.horizontal:after {
	  	top: 20%;
	  	font-size: 0.95em;
  	}

}