/* Your CSS stuff
================================================== */

/* Basics */

body {
	color: #444;
	font-family: 'museo500', helvetica, arial, sans-serif; 
 	background: #e6e6e6 url(img/bg-page.png) 0 0 repeat;
}

#container {}

[class^="col-"] {
	/* padding: 10px; The padding gutter ! */
}

.inner {
	max-width: 980px; margin: 0 auto;
}

.row-section {
	text-align: center;
	padding: 10px;
}


/* #Header
================================================== */

#site_head {
	background-color: #fff;
	text-align: center;
	padding-top: 200px;
	margin-bottom: 2em;
	height: 360px;
}

.site-title, .site-desc {
	text-align: center; margin: 0;
	position: relative;
} 
.site-title {font-size: 1.8em;}

.site-desc {
	font-size: 1em; line-height: 1;
	font-family: 'museo500', helvetica, arial, sans-serif; 
	color: #8def12;	
}

.site-title:before {
	content: ""; display: block; width: 290px; height: 180px;
	position: absolute; left: 50%; margin-left: -145px; top: -190px;
	background: url(img/sprite.svg) 0 -65px no-repeat;
}




/* #Nav
================================================== */

#trigger {display: none;}

#menu {
	padding: 35px 0 0 0;	
/* 	transition: all .2s linear; */
}

.main-menu {margin-bottom: 0;}

.main-menu > li {
	display: inline-block;
	margin: 0 2em;
	text-transform: uppercase;
}
.main-menu > li a {
	text-decoration: none;
	transition: color .2s ease-in-out;
}
.main-menu > li a:hover, .main-menu > li a.active {
	color: #8def12;
}

.shrinked #menu {
	position: fixed; 
	top: 0; left: 0; width: 100%;
	padding: .75em 0;
	background-color: #fff;
	background-color: rgba(255,255,255,0.95);
/* 	display: none; */
	z-index: 999;
}
.shrinked .main-menu {
	margin-bottom: 0;
}


/* #Typo & Content
================================================== */

/*
#content {
	padding-top: 2em;
}
*/

h1, h2, h3, h4, h5, h6,
.h1-like, .h2-like, .h3-like, .h4-like, .h5-like, .h6-like {
	color: #3c3c3c;
	font-weight: normal; 
	font-family: 'museo900ital', helvetica, arial, sans-serif;
}

.section-title {
	display: inline-block;
	padding: .75em;
	border-bottom: #ccc 1px solid;
	border-top: #ccc 1px solid;
	background-color: #fff;
	margin-bottom: 1.5em;
}
.section-subtitle {
	margin: 1.5em 0 1.5em 0;
	text-shadow: 2px 2px #fff;
	border-top: #999 1px solid;
	padding-top: 1em;
}

p, li, label, legend, blockquote {
	font-family: 'museo500', helvetica, arial, sans-serif;
}

figcaption {
 	font-size: .85em;
	font-family: 'museo500ital', helvetica, arial, sans-serif;
}

.grid, .typo {text-align: left;}

.typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6 {margin: 0; line-height: 1.5;}

.grid {
	margin: 0 0 2em 0;
}

.grid p {
	background: #fff; 
	padding: 10px; margin: 0;
	border-radius: 4px; 
	text-align: center;
}

.grid .grid {margin: 0;}

.grid .grid p {
	background: #8def12; color: #333; 
} 
	
code {background-color: #fff; color: #8def12;}

pre {
	text-align: left;
	background-color: #f6f6f6;
	font-size: 1em;
	padding: 1em;
}

figure img {display: block; border: #fff 5px solid;}

.download a {
	display: inline-block;
}
.download a:before {
	content: ""; display: block;
	width: 160px; height: 150px;
	margin: 0 auto;
	background: url(img/sprite.svg) 0 -260px no-repeat;
	transition: all .1s linear;
}
.download a:hover:before {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	opacity: .7;
}

.download.github a:before {
	background-position: -235px -260px;
}

table {background-color: #fff;}


/* #Footer
================================================== */


#site_foot {
	margin-top: 1.5em; padding: 1.5em .5em;
	background-color: #d6d6d6;
	border-top: #fff 4px solid;
}


#scrolltotop {display: none;}

#scrolltotop button {
	display: block;
	width: 48px; height: 45px;
	border: 0; margin: 0;
	background: url(img/sprite.svg) -160px -260px no-repeat;
	text-indent: 50px; white-space: nowrap; overflow: hidden;
	position: fixed; bottom: 10px; left: 50%; margin-left: -24px;
	opacity: .7;
}
#scrolltotop button:hover {
	opacity: 1;
	cursor: pointer;
}

.ie8 .site-title:before,
.ie8 .download a:before,
.ie8 #scrolltotop button {
	background-image: url(img/sprite.png);
}


/* #Fonts
================================================== */


@font-face {
    font-family: 'museo500';
    src: url('fonts/MuseoSlab-500.eot');
    src: url('fonts/MuseoSlab-500.eot?#iefix') format('embedded-opentype'),
         url('fonts/MuseoSlab-500.woff') format('woff'),
         url('fonts/MuseoSlab-500.ttf') format('truetype'),
         url('fonts/MuseoSlab-500.svg#MuseoSlab-500') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo500ital';
    src: url('fonts/MuseoSlab-500Italic.eot');
    src: url('fonts/MuseoSlab-500Italic.eot?#iefix') format('embedded-opentype'),
         url('fonts/MuseoSlab-500Italic.woff') format('woff'),
         url('fonts/MuseoSlab-500Italic.ttf') format('truetype'),
         url('fonts/MuseoSlab-500Italic.svg#MuseoSlab-500Italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo900ital';
    src: url('fonts/MuseoSlab-900Italic.eot');
    src: url('fonts/MuseoSlab-900Italic.eot?#iefix') format('embedded-opentype'),
         url('fonts/MuseoSlab-900Italic.woff') format('woff'),
         url('fonts/MuseoSlab-900Italic.ttf') format('truetype'),
         url('fonts/MuseoSlab-900Italic.svg#MuseoSlab-900Italic') format('svg');
    font-weight: normal;
    font-style: normal;
}


@media screen and (min-width: 1440px) {
	
	.inner {max-width: 1120px;}
	#site_head {height: 370px;}
	

}

@media screen and (max-width: 768px) {
	.second-figure {display: none;}
}


@media screen and (max-width: 620px) {

	#site_head {margin-bottom: 0;}	
	.main-menu > li {margin: 0 .5em;}
	
}

@media screen and (max-width: 420px) {
	
	#site_head {height: 345px;}
	
	.site-title {font-size: 1.55em;}
	
	.main-menu > li {
		font-size: .8em;
		margin: 0 .2em;
	}

}