@charset "UTF-8";
/* CSS Document */
@import url('reset.css');


body {
	margin:0;
	background:#000 url(../../assets/_bg.jpg) no-repeat; background-size:cover; background-attachment:fixed;
	font-family: 'Roboto', sans-serif;
}

p {
	font-size:1em;
	font-weight:400;
	color:rgba(0,0,0,.84);
	letter-spacing:-.02em;
	line-height:1.5em;
}

h1 {
	font-size:3em;
	font-weight:300;
	color:rgba(0,0,0,1);
	letter-spacing:-.02em;
	margin:0;
}

h2 {
	font-size:1em;
	font-weight:400;
	color:rgba(0,0,0,.54);
	letter-spacing:-.02em;
}

.content-wrapper {
	display:block;
	overflow:hidden;
	width:100%;
	max-width:1024px;
	/*height:100%;*/
	height:auto;
/*	background:#fff;*/
	position:relative; 
	margin:0 auto;
	box-shadow:0 0 21px rgba(0,0,0,.15);
	
}

header.content-header {
	display:block;
	position:relative;
	width:100%;
	height:12em;
	border-bottom:1px solid rgba(0,0,0,.1);
	box-sizing:border-box;
	margin:0;
	top:0;
	background:rgba(255,255,255,1);

}

h1.advertiser-label {
	display:inline-block;
	font-size:1em;
	text-transform:uppercase;
	letter-spacing:.02em;
	font-weight:400;
	line-height:1em;
	text-align:center;
	width:100%;
	height:auto;
	position:absolute;
	bottom:0;
	padding:1em 0;
}

h1.advertiser-label span#product {
	color:rgba(0,0,0,.54);
}

nav.content-nav {
	position:absolute;
	top:0;
	right:.5em;
}

a.content-nav-btn{ 
display:inline-block;
font-size:.75em;
color:rgba(0,0,0,1);
padding:1.25em 2.5em;
border:1px solid rgba(0,0,0,.1);
border-radius:3px;
text-transform:uppercase;
letter-spacing:.02em;
margin:1.25em .5em 0 0;
box-shadow:0 1px 3px -1px rgba(0,0,0,.15);
background-color:rgba(0,0,0,.05);
background-image:linear-gradient(rgba(255,255,255,1),rgba(255,255,255,.5));
transition:background-color .25s ease;
}


a.content-nav-btn:hover { 
background-color:rgba(0,0,0,.0);
background-image:linear-gradient(rgba(255,255,255,1),rgba(255,255,255,.5))
}

a.content-nav-btn.active, a.content-nav-btn.active:hover, a.content-nav-btn:active { 
background-color:rgba(0,0,0,.05);
background-image:none;
transition:none;
box-shadow:none;
}


.advertiser-logo {
	width:auto;
	height:80%;
	position:absolute; top:45%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);

}


/* -- CONTENT -- */

.col-half {
	width:50%;
	float:right;
	
}

.demo-page-header {
	
	margin-left:calc(18.75%/2);
	margin-bottom:2em;
}

.demo-page-header h1{
	
	margin-top:1.1458333em;
}

.demo-page-header .delivery {
	display:block;
	width:100%;
	margin-top:.5em;
	color:rgba(0,0,0,.54);
}

strong {
	font-weight:500;
}

.content {
	width:80%;
	margin-left:18.75%;
	padding-bottom:1em;
}

p.official-name {
	color:rgba(0,0,0,1)
}

.ad-container {
	display:block;
	float:right;
	margin-right:2.5em;
	width:80%;
	height:auto;
}

.box-unit {
	display:block;
	width:300px;
	height:250px;
	background:rgba(0,0,0,.05);
}

/* -- FOOTER -- */

footer.google-footer {
	display:block;
	overflow:hidden;
	position:absolute;
	width:100%;
	border-top:1px solid rgba(0,0,0,.1);
	bottom:0;
	left:0;
	background:rgba(255,255,255,1);

}
footer.google-footer .logo {
	
	display:block;
	overflow:hidden;
	width:100%;
	height:12em;
	background:url(../ui/google_logo.png) no-repeat center center; background-size:auto 85px;
	
}

.footer-nav {
	display:block;
	width:80%;
	height:auto;
	margin:0 auto 4em;
}
.footer-nav a {
	display:inline-block;
	width:30%;
	text-align:center;
	margin:0;
	font-size:.75em;
	border:1px solid rgba(0,0,0,.1);
	padding:1em 0;
	box-sizing:border-box;
	text-transform:uppercase;
	margin:0 1.4% 0;
	border-radius:3px;
	
	border-radius:3px;
text-transform:uppercase;
letter-spacing:.02em;
box-shadow:0 1px 3px -1px rgba(0,0,0,.15);
background-color:rgba(0,0,0,.05);
background-image:linear-gradient(rgba(255,255,255,1),rgba(255,255,255,.5));
transition:background-color .25s ease;
}
.footer-nav a:first-of-type {
	
}
.footer-nav a:hover {background-color:rgba(0,0,0,.0);
background-image:linear-gradient(rgba(255,255,255,1),rgba(255,255,255,.5))}
.footer-nav a:active {background-color:rgba(0,0,0,.05);
background-image:none;
transition:none;
box-shadow:none;}

 
article.in-site {
	position:relative;
	width:100%;
	height:100%;
	min-height:800px;
	background:url(../ui/in-site.jpg) no-repeat; background-position: right top;
}

.box-unit iframe {
	display:block;
	overflow:hidden;
	width:300px;
	height:250px;
	margin-bottom:2em;
}

article.in-site .box-unit {
	position:absolute;
	top:20px;
	right:20px;
	
}

.demo-list {
}

article.list-item {
	display:block;
	overflow:hidden;
	width:100%;
	height:auto;
	border-bottom:1px dotted rgba(0,0,0,.1);
	border-right:1px dotted rgba(0,0,0,.1);
	cursor:pointer;
	padding:0;
	margin:0;
	transition:all .25s ease;
	background:rgba(255,255,255,.84);
	float:left;
	box-sizing:border-box;
}

article.list-item:hover {background:rgba(255,255,255,1);}

article.list-item:last-of-type {
	
	border-bottom:none;
	
}

footer.google-footer {position:relative; border-top:1px solid rgba(0,0,0,.1);}

h1.demo-title {
	font-size:1.5em;
}

h1.demo-title:after {
	content:' »';
	position:relative;
	right:.25em;
	opacity:0;
	transition:all .25s ease;
}

article.list-item:hover  h1.demo-title:after {
	content:'»';
	position:relative;
	right:-.25em;
	opacity:1;
}

/*@media all and (max-height: 1024px) {
	
	footer.google-footer {position:relative; border-top:1px solid rgba(0,0,0,.1);}
	
	.content-wrapper {height:1024px; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); margin:0;}
	
	.content-wrapper {height:auto; position:relative; top:0; left:0; -webkit-transform:translate(0,0); transform:translate(0,0); margin:0 auto;}
 
}*/

.contact-sheet {
display:block;
overflow:hidden;
	padding:1em;
	background:rgba(0,0,0,.84);
	text-align:center;	
	color:#fff;
	font-weight:300;
	text-transform:uppercase;
	letter-spacing:.02em;
}


@media all and (max-width: 767px) {
	
.demo-page-header {
	width:90%;
	margin:0 auto .5em;
	margin-bottom:0em;
}

.demo-page-header h1{
	font-size:2em;
	margin-top:.5em;
}

.demo-page-header .delivery {
	display:block;
	width:100%;
	margin:.5em 0;
	color:rgba(0,0,0,.84);
	padding-bottom:1em;
}
  
 .col-half {width:100%; clear:left;}
 
 .ad-container {
	display:block;
	margin:0 auto 0;
	width:90%;
	float:none;
	padding-bottom:2em;
	
	
}
 .ad-unit { display:block; margin:0 0 2em 0; float:none; clear:left;}
 .box-unit {display:block; margin:0 0 2em 0; float:none; clear:left;}
 
 .content {
	width:90%;
	margin:0 auto;
}

footer.google-footer {position:relative; border-top:1px solid rgba(0,0,0,.1);}
.content-wrapper {height:auto; position:relative; top:0; left:0; -webkit-transform:translate(0,0); transform:translate(0,0); margin:0 auto;}
 .main-nav {display:none;}
.advertiser-logo {
	width:auto;
	height:90%;
	position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
}
.advertiser-label {display:none; visibility:hidden;}

.footer-nav a {
	width:100%;
	margin:0 auto .5em;
}

h1.demo-title:after {
	content:'';
	position:relative;
	right:0;
	opacity:0;
}

h1.demo-title:hover:after {
	content:'';
	position:relative;
	right:0;
	opacity:0;
}


}