/* YUI 3.4.1 (build 4118) Copyright 2011 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{font-size:100%}
legend{color:#000}

html {
    height: 100%;
}

body {
	font-family: 'Fira Sans', sans-serif;
	height: 100%;
    color: #000000;
	background: #ffffff;
}

h2 {
	font-size: 2rem;
	line-height: 2.4rem;
	text-align: center;
	margin-bottom: 2rem;
	font-weight: 500;
}

h4 {
	font-size: 1.1rem;
	text-align: center;
	margin-bottom: 1rem;
	font-weight: 500;
}

p, li {	
	line-height: 130%;
}

img {
	vertical-align: top;
}

a {
	color: #59b2ff;
}

a:hover {
	color: #ffa6e0;
}

a.button {
	display: block;
	border-radius: 1rem;
	min-height: 1.5rem;
	line-height: 1.5rem;
	font-size: 1.5rem;
	padding: 0.75rem 1rem;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background: #59b2ff linear-gradient(75deg, #a25e81, #59b2ff, #59b2ff, #a25e81);
}

a.button:hover {
	background: #ffa6e0 linear-gradient(75deg, #a25e81, #ffa6e0, #ffa6e0, #a25e81);
}

div.clear {
	clear: both;
}

.inverted {
	background: #59b2ff linear-gradient(75deg, #a25e81, #59b2ff, #59b2ff, #a25e81);
	color: #ffffff;
}

.inverted a {
	color: inherit;
}

ul.text > li {
	padding-left: 1.3rem;
	text-indent: -1.3rem;
	margin-bottom: 0.5rem;
}

ul.text > li:last-child {
	margin-bottom: 0;
}

ul.text > li:before {
	content: "— ";
}

body > section, body > .section {
	position: relative;
	box-sizing: border-box;
}

body > header.section {
	background: #e6e6e6;
	overflow: hidden;
}

body > header.section #header-content {
	position: relative;
}

body > header.section #header-content #left-line,
body > header.section #header-content #right-line {
	position: absolute;
    top: 0;
	width: 900px;
}

body > header.section #header-content #left-line {
    left: 100%;
    margin-left: 1rem;
}

body > header.section #header-content #right-line {
    right: 100%;
    margin-right: 1rem;
}

body > header.section > div.content div.column {
	width: 33.3334%;
}

body > header.section > div.content div.column-2 {
	width: 66.6666%;
}

body > header.section > div.content div.column-2 div.column {
	width: 50%;
}

body > header.section > div.content div.column > *,
body > header.section > div.content div.column-2 > * {
	margin-top: 1rem;
}

body > header.section > div.content div.column > *:first-child,
body > header.section > div.content div.column-2 > *:first-child {
	margin-top: 0;
}

body > header.section > div.content div.comics {
	background-size: cover;
	background-position: 50% 0%;
	overflow: hidden;
	border-radius: 1rem;
}

body > header.section > div.content div#grisha.comics {
	background-image: url('images/grisha.jpg');
	height: 24rem;
}

body > header.section > div.content div#header-la.comics {
	background-image: url('images/los-angeles.jpg');
	height: 20rem;
}

body > header.section > div.content div#header-blaster.comics {
	background-image: url('images/ghettoblaster.jpg');
	height: 9.5rem;
}

body > header.section > div.content div#header-bb.comics {
	background-image: url('images/big-ben.jpg');
	height: 24rem;
}

body > header.section > div.content div#header-donny.comics {
	background-image: url('images/donny.jpg');
	height: 24rem;
}

body > header.section > div.content div#header-aussie.comics {
	background-image: url('images/aussie.jpg');
	height: 24rem;
}

body > header.section > div.content div#header-hrshoe-bend.comics {
	background-image: url('images/horseshoe-bend.jpg');
	height: 11.5rem;
}

body > header.section > div.content div#header-lady-l.comics {
	background-image: url('images/lady-l.jpg');
	height: 11.5rem;
}

body > header.section > div.content div#header-booth.comics {
	background-image: url('images/booth.jpg');
	height: 11.5rem;
}

body > header.section > div.content div#header-rushmore.comics {
	background-image: url('images/rushmore.jpg');
	height: 11.5rem;
}

body > header.section > div.content div#header-nyc.comics {
	background-image: url('images/nyc.jpg');
	height: 11.5rem;
}

body > header.section > div.content div#header-india.comics {
	background-image: url('images/india.jpg');
	height: 11.5rem;
}

body > header.section > div.content div#header-wagon.comics {
	background-image: url('images/wagon.jpg');
	height: 11.5rem;
}

body > header.section > div.content div#video-preview.comics {
	height: 9.5rem;
	cursor: pointer;
	text-align: center;
	background: #cccccc;
}

body > header.section > div.content div#video-preview.comics video {
	width: 352px;
    height: 288px;
    margin-top: -4.5rem;
    margin-left: -0.25rem;
}

body > footer.section {
	min-height: 0;
	color: #acb6bf;
}

body > section > div.content, body > .section > div.content {
	max-width: 1400px;
	padding: 3rem 4rem;
	box-sizing: border-box;
	margin: 0 auto;
}

body > header.section > div.content {
	padding: 1rem 4rem;
	max-width: 1200px;
}

body > footer.section > div.content {
	padding: 2rem 4rem;
}

.line {
	display: flex;
	margin: 0 -1rem;
}

.line > * {
	width: 25%;
	padding: 0 1rem;
	box-sizing: border-box;
}

.line > *.w15 {
	width: 37.5%;
}

.line > *.w2 {
	width: 50%;
}

.line > *.w3 {
	width: 75%;
}

.line > *.m1 {
	margin-left: 25%;
}

.line > *.m05 {
	margin-left: 12.5%;
}

.line > *.m3 {
	margin-left: 75%;
}

.column-image-title {
	display: block;
	width: 100%;
	margin-bottom: 1rem;
}

div#chat-container {
	position: absolute;
	top: 9rem;
    left: 19.5rem;
}

div#chat-element {
	position: relative;
}

svg#chat-arrow {
	top: 4rem;
	right: 100%;
	width: 5rem;
	position: absolute;
}

svg#chat-arrow > polygon {
	fill: #ffffff;
}

h1#chat {
    padding: 1rem 4rem 1rem 2rem;
    font-size: 1.8rem;
    line-height: 2rem;
    background: #ffffff;
	border-radius: 1rem;
	box-shadow: 0.5rem 0.5rem 0 rgba(0,0,0,0.5);
}

h1#chat span {
	position: relative;
	color: #59b2ff;
}

#contacts div.promo {
	font-size: 2rem;
}

#contacts .contacts {
	display: flex;
	margin-top: 2rem;
}

#contacts .contacts > span {
	line-height: 3rem;
}

#contacts .contacts > a {
	margin-left: 1rem;
}

#contacts .contacts img {
	width: 3rem;
}

#hello-video {
	margin-top: 1rem;
	display: none;
}

#hello-video video {
	border-radius: 1rem;
}

#results .column-image-title {
	border-radius: 64rem;
	width: 70%;
	max-width: 206px;
	margin-left: auto;
	margin-right: auto;
}

#results > li {
	width: 33.3334%;
}

#results > li > p {
	margin-bottom: 1rem;
}

#results > li > p:last-child {
	margin-bottom: 0;
}

#contact-container {
	margin-top: 3rem;
}

#dog {
	background-size: contain;
	background-position: 15% 50%;
	background-image: url('images/dog.png');
	background-repeat: no-repeat;
	height: 407px;
    margin: -8rem 0 -7rem 0;
}

p#copyrights {
	letter-spacing: 0.2rem;
    text-transform: uppercase;
}


@media only screen and (max-width: 1440px) {
	body > section > div.content, body > .section > div.content {
		max-width: 1200px;
	}	
}

@media only screen and (max-width: 1280px) {
	body > header.section #header-content #left-line,
	body > header.section #header-content #right-line {
		display: none;
	}
	div#chat-container {
		left: 33.3334%;
		margin-right: -5rem;
	}
}

@media only screen and (max-width: 800px) {
	body > section > div.content, body > .section > div.content {
		padding: 2.4rem 2rem;
	}
	body > header.section > div.content {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media only screen and (max-width: 640px) {
	h2 {
		margin-bottom: 1.6rem;
	}
	#header-content .line {
		flex-direction: column;
	}
	#header-content .line > * {
		width: auto;
	}
	body > header.section > div.content div#video-preview.comics.clicked {
		display: none;
	}
	svg#chat-arrow {
		top: -3rem;
		left: 0rem;
		right: auto;
		width: 6rem;
		position: absolute;
		transform: rotate(112.5deg);
	}
	body > header.section > div.content div#header-la.comics {
		margin-top: 1rem;
		margin-bottom: 1rem;
		height: 9.5rem
	}
	div#chat-container {
		left: 5%;
		right: 5%;
		margin-right: 0;
	}
	div#chat-container {
		top: 19.5rem;
	}
	h1#chat {
		padding: 1rem 2rem;
	}
	#about {
		flex-direction: column;
	}
	#about > .w2 {
		width: auto;
		margin-bottom: 2.4rem;
	}
	#about > .w2:last-child {
		margin-bottom: 0;
	}
	#results {
		overflow-y: hidden;
		overflow-x: scroll;
		margin-bottom: -2.4rem;
		padding-bottom: 2.4rem;
	}
	#results > li {
		min-width: 14rem;
	}
	#results > li > p {
		font-size: 0.85rem;
	}
	#comics {
		flex-direction: column;
		margin-bottom: -2.4rem;	
	}
	#comics .column-image-title {
		margin-bottom: 0;
	}
	#comics > * {
		width: auto;
		display: flex;
		padding-left: 0.5rem;
		padding-top: 0.5rem;
		border-top: 0.2rem solid #a25e81;
		margin-top: 0.5rem;
	}
	#comics > *:last-child {
		padding-bottom: 0.5rem;
		border-bottom: 0.2rem solid #a25e81;
	}
	#comics > * > * {
		width: 50%;
		box-sizing: border-box;
	}
	#comics > * > *:first-child {
		padding-right: 0.5rem;
	}
	#comics > * > *:last-child {
		text-align: center;
		padding-left: 0.5rem;
	}
	#comics > *:nth-child(even) {
		flex-direction: row-reverse;
	}
	#comics > *:nth-child(even) > *:first-child {
		padding-right: 0;
		padding-left: 0.5rem;
	}
	#comics > *:nth-child(even) > *:last-child {
		padding-left: 0;
		padding-right: 0.5rem;
	}
	#contact-container {
		margin-top: 0;
	}
	#contacts {
		flex-direction: column-reverse;
	}
	#contacts > * {
		width: auto;
	}
	#contacts .contacts {
		flex-direction: column;
		position: absolute;
		left: 58%;
		bottom: 2.5rem;
	}
	#contacts div.promo {
		line-height: 2.4rem;
		margin-bottom: 1.8rem;
		text-align: center;
	}
	#contacts .contacts > span {
		transform: rotate(90deg);
		transform-origin: right top 0;
		margin-bottom: -17.25rem;
		width: 10rem;
		text-align: center;
		margin-left: -1.5rem;		
	}
	#contacts .contacts > a {
		margin-left: 0;
		margin-bottom: 1rem;
	}
	#contacts .contacts img {
		width: 5.5rem;
	}
	#dog {
		background-position: 0 50%;
		height: 27rem;
		margin: 0;
	}
	#footer > * {
		margin-left: 0;
		width: auto;
	}
	body > footer.section > div.content {
		padding: 2rem;
	}
}

@media only screen and (max-width: 480px) {
	body > header.section > div.content,
	body > section > div.content, body > .section > div.content {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}