/*IMPORT FONTS*/
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900,900italic);

/*RESET*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 62.5%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	transform: translate3d (0,0,0);
	background: url(bg.jpg) no-repeat -9999px -9999px fixed; 

}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearfix:before,
.clearfix:after {
   content: '\0020';
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/*REAL STUFF*/

html {
	
	height:100%;
}

body {
	font-size:62.5%;
	font-family: 'source sans pro', arial;
	color:#58595b;
	padding-bottom:6rem;
	height: 100%;
	background-color:#E4E5E6;
	background-attachment: fixed;
	/*background-image: url('bg.png');*/
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4e5e6+49,c9c9c9+100 */
	background: #e4e5e6; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, #e4e5e6 49%, #c9c9c9 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover, #e4e5e6 49%,#c9c9c9 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center, #e4e5e6 49%,#c9c9c9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

nav {
	padding:2rem;
	margin-left:0;
	font-size:1.2rem;
	font-weight: 400;
	position: relative;
	height:4rem;
	z-index: 999;
	width: 100%;
}

nav ul {
	list-style-type: none;
	float:left;
	position: relative;
	transform: translateY(.625rem);
}

nav ul li {
	display:inline;
	color:yellow;
	margin-left:1.25rem;
	font-weight: 200;
	height:2.5rem;
}

nav ul li a {
	color:#4A4B4C;
	font-weight: 300;
}

nav ul li a:hover {
	color:#4A4B4C;
	text-decoration: underline;
}

nav .charm-nav-container {
	width:50%;
	margin:0 auto;
	height: auto;
}

nav ul li.charm-nav {
	height:3rem;
	width:3rem;
}

nav ul li.charm-nav img {
	width:100%;
	height:auto;
}

/*.external-link::after {
	height:.8rem;
	width:.8rem;
	display: inline-block;
	content: "";
	background-image: url('icon-external-link.png');
	background-size: contain;
	opacity: .4;
	margin-left:.3rem;
}*/

#logomark {
	float:left;
}

#logomark svg {
	height:2.5rem;
	width: auto;
}

#nameplate {
	margin-top: 10rem;
	text-align: center;
	position:relative;
	z-index: 5;
	height:12rem;
	transition:2s;
}

#nameplate h1 {
	font-size: 1.4rem;
	letter-spacing: .35rem;
	font-weight: 300;
	text-transform: uppercase;
	position:relative;
	z-index: 100;
}

#nameplate h2 {
	font-size:1.1rem;
	font-style: italic;
	font-weight: 600;
	position:relative;
	z-index: 100;
}

#nameplate .logo svg {
	z-index: 5;
	transform: translateY(-6.5rem);
	position:relative;
	height:10rem;
	width:auto;
}

#nameplate * {
	transition:1s;
}

#charms {
	position:relative;
	z-index:1000;
	margin-top: -5rem;
}

#charms img {
	display:block;
	margin:0 auto;
	height:10rem;
	max-height: 4.5rem;
	min-width: 5.5rem;
	width:30%;
	transition: .3s;
}

#charms h3 {
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .7px;
	padding: .75rem 0 0 0;
	transition:.2s;
}

#charms h4 {
	font-size: .8rem;
	font-weight: 300;
	padding-top: .1rem;
	text-align: center;
	line-height: 1.2;
	transition: .2s;
}

#charms {
	width:90%;
	margin:1rem auto 0;
}

#charms li {
	border-radius: 5px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 -1001px;
}

#charms li.charmpic-mancala {
	background-image: url('charmpic-mancala.jpg');
}
#charms li.charmpic-nasa {
	background-image: url('charmpic-nasa.jpg');
}
#charms li.charmpic-fuze {
	background-image: url('charmpic-fuze.jpg');
}
#charms li.charmpic-kubo {
	background-image: url('charmpic-kubo.jpg');
}
#charms li.charmpic-thing5 {
	background-image: url('http://lorempixel.com/300/500/abstract');
}
#charms li.charmpic-yocj {
	background-image: url('charmpic-yocj.jpg');
}
#charms li.charmpic-thing7 {
	background-image: url('charmpic-capital.jpg');
}
#charms li.charmpic-thing8 {
	background-image: url('charmpic-laser.jpg');
}



@keyframes pulse { 
    0% { transform: scale(1); } 
    40% { transform: scale(1.5); } 
    100% { transform: scale(1.4); } 
} 

.charm-container {
	position:relative;
	height:5rem;
}

#charms li:hover {
	background-color:#4A4B4C;
	background-position: center;
	background-size: cover;
	cursor: pointer;
	cursor: hand;
	height:9rem;
}

#charms ul li a {
	width:100%;
	height:100%;
	display:none;
}

@media screen {
	#charms ul li:hover a {
		display:block;
		position:absolute;
		top:0;
		left:0;
	}
}

@media (min-width: 768px) {
	#charms li:hover {
	transform:scale(1.25,1.25);


	/*RELATED TO PULSE ANIMATION*/
    animation-name: pulse; 

	animation-duration: .5s; 
    animation-direction:alternate;
    animation-fill-mode: both;
	}

	#charms li:hover .charm-container img {
		transform:translateY(-4rem);
		opacity:.95;
		transition:.5s;
	}

	#charms li:hover h3 {
		transform:translateY(4.25rem);
		transition: .5s;
		font-size: 1.0rem;
	}

	#charms li:hover h4 {
		transform:translateY(4.25rem);
		transition: .5s;
		font-size: .8rem;
	}
}

#charms ul {
	position:relative;
	width:100%;
	margin:0 auto 10rem;
}

#charms li:hover .seemore::before {
	content:"+";
	font-size:3rem;
	color:#F3F4F4;
	opacity:.8;
	height:3rem;
	text-transform: uppercase;
	display:inline-block;
	width:100%;
	transform:translateY(-2rem);
	text-align: center;
	overflow: hidden;
}




/*PORT CODE */


.port-page .port-container {
	width:65%;
	max-width: 80rem;
	margin:5rem auto;
	background-color: #dddddd;
	padding:0;
}

.port-page::after {
	content:"";
	font-size: .001px;
	background-color: #000000;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:-300px;
	z-index: -100;
	animation: darkensite .3s;
	opacity:.5;

}

@keyframes darkensite {
  0% {
    opacity:0;
  }
  100% {
    opacity:.5;
  }
}

@keyframes charmdrop {
  0% {
    opacity:0;
    transform: translateY(-5rem);
  }
  100% {
    opacity:1;
    transform: translateY(0rem);
  }
}


/*MOBILE CODE*/

.port-container .columns {
	padding:0;
}

.port-container h1, 
.port-container h2,
.port-container h3,
.port-container h4,
.port-container h5,
.port-container h6,
.port-container p,
.port-container ul {
	margin: 0 3rem;
	color:#58595b;
	font-size: 1rem;
	font-weight: 300;
	margin-top: 1rem;
}

.port-container h1 {
	font-size: 3rem;
	font-family: 'source sans pro', arial;
	text-transform: uppercase;
	font-weight: 700;
	margin-top:3rem;
	border-top:1px solid #828282;
	padding-top: 1rem;
}

.port-container h2 {
	font-size: 1rem;
	font-family: 'source sans pro', arial;
	text-transform: uppercase;
	font-weight: 400;
	margin-top: 0;
	line-height: 1.2;
}

.port-container p {
	font-size: 1.3rem;
	line-height: 1.4;
}

.port-container p:last-of-type {
	padding-bottom: 2rem;
	border-bottom: 1px solid #828282;
	margin-bottom: 2rem;	
}

.port-container img {
	padding: 1.5rem 3rem;
	width:100%;
	height:auto;
}

.port-container img:nth-of-type(1) {
	margin: 0;
	padding:0;
	width:100%;
}

.port-container img:nth-of-type(2) {
	margin-top: 0;
}

.port-container img:last-of-type {
	margin-bottom: 3rem;
}

.port-page .st0 {
	fill:#e4e5e6;
}

.port-page nav ul li a {
	color:#e4e5e6;
}

.port-page img.port-charm-hero {
	position:absolute;
	top:2rem;
	width:10rem;
	max-height: 10rem;
	text-align: center;
	display:inline;
	z-index: 90;
	left:50%;
	margin-left: -5rem;
	animation: charmdrop 1s;


}

.port-page .xbutton {
	width:3rem;
	height:3rem;
	position:absolute;
	z-index: 100;
	right: -4rem;
}

.port-page .xbutton a {
	display: block;
	height:3rem;
	width:3rem;
}

.port-page .xbutton a svg {
	fill:#e4e5e6;
}

.port-page .xbutton a svg:hover {
	animation:spin .3s;
	transform: scale(1.4,1.4);
}

@keyframes spin {
  0% {
    transform: scale(1,1);
  }
  100% {
    transform: scale(1.4,1.4);
  }
}

/*iPad Code*/
@media (max-width: 1024px) {
	.port-page .port-container {
		width:80%;
}

/*iPHONE CODE*/
@media (max-width: 668px) {

  html {
  		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b8babc+49,a6a5aa+100 */
background: #b8babc; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #b8babc 49%, #a6a5aa 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #b8babc 49%,#a6a5aa 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #b8babc 49%,#a6a5aa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  }

  #nameplate {
    margin-top:8rem;
    height:9rem;
  }

  #charms {
  	width:95%;
  }

  .port-page .port-container {
  	width:92%;
  	margin-top:2rem;
  }

  .port-page .port-container img {
  	margin-left:0;
  	margin-right:0;
  	padding-left:1.5rem;
  	padding-right:1.5rem;
  	display:block;
  	width:100%;
  }

  .port-page .port-container img:first-of-type {
	padding:0;
  }  

  .port-page img.port-charm-hero {
  	display:none!important;
  }

  .port-page .xbutton {
  	position: absolute;
  	top: -5.4rem;
  	left: 18rem;
  	padding:2rem;
  	padding-left: 1.5rem;
  }

  .port-container h1, 
  .port-container h2,
  .port-container h3,
  .port-container h4,
  .port-container h5,
  .port-container h6,
  .port-container p,
  .port-container ul {
	margin: 0 1.5rem;
	color:#58595b;
	font-size: 1rem;
	font-weight: 300;
	margin-top: 1rem;
  }

  .port-container h1 {
	font-size: 2.2rem;
	margin-top:1.5rem;
	border-top:1px solid #828282;
	padding-top: 1rem;
	font-weight: 700;
  }

  .port-container h2 {
	font-size: .9rem;
	margin-top: 0;
	font-weight: 400;
  }

  .port-container p {
	font-size: 1.1rem;
	line-height: 1.4;
  }



  #charms ul {
  	width:90%;
  }

  #charms ul li {
  	margin-bottom: 7rem;
  	background-position:center;
  	height:20rem;
  	padding:0;
  	border-bottom-right-radius: 0;
  	border-bottom-left-radius: 0;
  }

  #charms ul li:hover {
  	transform: scale(1,1);
  	height:20rem!important;
  }

  #charms ul li img {
  	transform:translate(-2rem,16.5rem);
  	max-height:5rem;
  	margin:0;
  	position: relative;
  	z-index: 1000;
  }

  #charms ul li h3,
  #charms ul li h4 {
  	transform: translateY(-6rem);
  	background-color:#e4e5e6;
  	margin:0;
  	width:100%;
  }

  #charms ul li h3:hover,
  #charms ul li h4:hover,
  #charms ul li:hover h3,
  #charms ul li:hover h4 {
  	transform: translateY(15rem);
  	background-color:#e4e5e6;
  	margin:0;
  	width:100%;
  	transition:0s;
  }

  #charms ul li h3 {
  	font-size: 1.3rem;
  	font-weight: 400;
  }

  #charms ul li h4 {
  	font-size: 1.1rem;
  	border-bottom-right-radius: 5px;
  	border-bottom-left-radius: 5px;
  	padding-bottom: 1rem;
  	transform: translateY(-6.01rem);

  }

  #charms ul li a {
  	display:block;
  	position: relative;
  	z-index: 100;
  }

  #charms .charm-container {
  	height:20rem;
  }

  body {
  	background: none;
  }
}