@charset "utf-8";
/* CSS Document */

body
{
	background: white;
}

p
{
    font-family: 'Nunito', sans-serif;
	font-size: 18px;
	color: #333333;
}

a
{
	color: #666666;
	text-decoration: none;
	
	-webkit-transition: color 0.5s ease-out;
  	-moz-transition: color 0.5s ease-out;
  	-o-transition: color 0.5s ease-out;
}

a:hover
{
	color: #333333;
	
	-webkit-transition: color 0.5s ease-out;
  	-moz-transition: color 0.5s ease-out;
  	-o-transition: color 0.5s ease-out;
}

.navBar
{
	position: fixed;
	background: linear-gradient(to right, #28BBEB, #FF637E);
	width: 100%;
	padding: 4px;
	padding-left: 20px;
	z-index: 1000;
}

#navName
{
	font-family: 'Raleway', sans-serif;
    font-size: 1.4rem;
	/*color: #606167;*/
	color: white;
	font-weight: bold;
	margin-left: -22px;
	
	-webkit-transition: color 0.5s ease-out;
  	-moz-transition: color 0.5s ease-out;
  	-o-transition: color 0.5s ease-out;
}

#navName:hover
{
	color: #4A5963;
	
	-webkit-transition: color 0.5s ease-out;
  	-moz-transition: color 0.5s ease-out;
  	-o-transition: color 0.5s ease-out;
}

#navMenu li
{
	display: inline;
	padding-right: 20px;
	font-family: 'Raleway', sans-serif;
}

#navMenu li > a
{
	color: white;
}

#navMenu li > a:hover
{
	color: #c2bbb3;
}

h3 <!-- UX Designer / UI Designer / Product Designer -->
{
	margin-top: -5px;
	font-family: 'Raleway', sans-serif;
	color: white;
	font-size: 0.5 rem;
}

h1
{
	font-family: 'Lobster Two', cursive;
    font-size: 2.0rem;
	color: #606167;
}

h2
{
	font-family: 'Raleway', sans-serif;
	color: #606167;
}

h5
{
	font-family: 'Raleway', sans-serif;
	font-size: 45px;
	color: white;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	margin-bottom: 20px;
}

/* ------------------------------------ Title animations ---------------------- */

#title1
{
	animation-duration: 4.25s;
  	animation-name: titleFade1;
  	animation-iteration-count: infinite;
}

@keyframes titleFade1 
{
  from 
  {
    opacity: 0;
  }

  33% 
  {
    opacity: 1;
  }
  
  66%
  {
  	opacity: 0;
  }

  to 
  {
    opacity: 0;
  }
}

#title2
{
	animation-duration: 4.25s;
  	animation-name: titleFade2;
  	animation-iteration-count: infinite;
}

@keyframes titleFade2
{
  from 
  {
    opacity: 0;
  }

  33% 
  {
    opacity: 0;
  }
  
  66%
  {
  	opacity: 1;
  }

  to 
  {
    opacity: 0;
  }
}

#title3
{
	animation-duration: 4.25s;
  	animation-name: titleFade3;
  	animation-iteration-count: infinite;
}

@keyframes titleFade3
{
  from 
  {
    opacity: 0;
  }

  33% 
  {
    opacity: 0;
  }
  
  66%
  {
  	opacity: 0;
  }

  to 
  {
    opacity: 1;
  }
}

/*h5
{
	font-family: 'Raleway', sans-serif;
	font-size: 25px;
	color: white;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}*/

.titleRow
{
	font-family: 'Raleway', sans-serif;
	font-size: 21px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.imgBox > img
{
	width: 100%;
}

#myPic
{
	top:0px;
}

/* --------- Project Cycle --------- */
.projectCycle
{
	width: 90%;
	display: block;
	position: inherit;
}

.projectCycle > li#leftList
{
	display: inline;
	float: left;
}

.projectCycle > li#rightList
{
	display: inline;
	float: right;
}

/* --------- Color Categories --------- */
.color1
{
	/*background: #FDC162;*/
	/*background: linear-gradient(to right, #28BBEB, #FF637E, #FFE226, #1CD5AF, #28BBEB);*/
	background: linear-gradient(to right, #28BBEB, #FF637E);
	color: white;
	width: 100%;
	padding-bottom: 30px;
	height: 210px;
}

#heliosIcon
{
	border: 3px solid #666666;
	opacity: 1;
	width: 14%;
	
	-webkit-transition: opacity 0.5s ease-out;
  	-moz-transition: opacity 0.5s ease-out;
  	-o-transition: opacity 0.5s ease-out;
}

#heliosIcon:hover
{
	opacity: 0.5;
	-webkit-transition: opacity 0.5s ease-out;
  	-moz-transition: opacity 0.5s ease-out;
  	-o-transition: opacity 0.5s ease-out;
}

#wonkyIcons
{
	width: 96px;
	height: auto;
	opacity: 1;
	
	-webkit-transition: opacity 0.5s ease-out;
  	-moz-transition: opacity 0.5s ease-out;
  	-o-transition: opacity 0.5s ease-out;
}

#wonkyIcons:hover
{
	opacity: 0.5;
	
	-webkit-transition: opacity 0.5s ease-out;
  	-moz-transition: opacity 0.5s ease-out;
  	-o-transition: opacity 0.5s ease-out;
}

.imgBox, .heliosIconBar
{
	text-align: center;
}

.reviewRow
{
	display: inline;
}

.reviewRow > p
{
	position: relative;
}

.btn-lg 
{
    margin: 15px;
    /*background-color: #343a40;*/
	background: #e95a44;
    color: rgba(255,255,255);
	font: 400 15px Arial;
    border: none;
	border-radius: .3rem;
	padding: 1rem 1.5rem;
	
	-webkit-appearance: button;
	
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}

.btn-lg:hover
{
    /*background-color: #666666;*/
	background: #FD6A62;
	
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}

@media only screen and (max-width: 767px) 
{
	.titleRow
	{
		width: 70%;
	}
	
	h5
	{
		width: 70%;
	}
}

@media only screen and (max-width: 455px) 
{
	
	h5
	{
		font-size: 25px;
		width: 90%;
	}
	
	.titleRow
	{
		width: 90%;
	}
}

@media only screen and (max-width: 415px) 
{
	.titleRow
	{
		font-size: 12px;
	}
	
	h5
	{
		font-size: 20px;
	}
}