@font-face {
	font-family: 'Lobster';
	src: url('../fonts/Lobster_1.1_-webfont.eot');
	src: local('☺'), url('../fonts/Lobster_1.1_-webfont.woff') format('woff'), url('../fonts/Lobster_1.1_-webfont.ttf') format('truetype'), url('../fonts/Lobster_1.1_-webfont.svg#webfont30G9S4nm') format('svg');
	font-weight: normal;
	font-style: normal; }
    
@font-face {
	font-family: 'RalewayThin';
	src: url('../fonts/raleway_thin-webfont.eot');
	src: local('☺'), url('../fonts/raleway_thin-webfont.woff') format('woff'), url('../fonts/raleway_thin-webfont.ttf') format('truetype'), url('../fonts/raleway_thin-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal; }

@font-face 
{
    font-family: 'Sansus';
    src: url('../fonts/sansus-webissimo-regular-webfont.eot');
    src: url('../fonts/sansus-webissimo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sansus-webissimo-regular-webfont.woff') format('woff'),
         url('../fonts/sansus-webissimo-regular-webfont.ttf') format('truetype'),
         url('../fonts/sansus-webissimo-regular-webfont.svg#SansusWebissimoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face 
{
    font-family: 'Collator';
    src: url('../fonts/collator-webfont.eot');
    src: url('../fonts/collator-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/collator-webfont.woff') format('woff'),
         url('../fonts/collator-webfont.ttf') format('truetype'),
         url('../fonts/collator-webfont.svg#CollatorRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
	font-family: 'GothamHTFMedium';
	src: url('../fonts/gothamhtf-medium-webfont.eot');
	src: url('../fonts/gothamhtf-medium-webfont.eot?iefix') format('eot'),
	     url('../fonts/gothamhtf-medium-webfont.woff') format('woff'),
		 url('../fonts/gothamhtf-medium-webfont.ttf') format('truetype'),
		 url('../fonts/gothamhtf-medium-webfont.svg#webfont2ghG5I8Y') format('svg');
	font-weight:normal;font-style: normal
}

@font-face
{
	font-family: 'GothamHTFBold';
	src: url('../fonts/gothamhtf-bold-webfont.eot');
	src: url('../fonts/gothamhtf-bold-webfont.eot?iefix') format('eot'),
	     url('../fonts/gothamhtf-bold-webfont.woff') format('woff'),
		 url('../fonts/gothamhtf-bold-webfont.ttf') format('truetype'),
		 url('../fonts/gothamhtf-bold-webfont.svg#webfont0xBiO3b4') format('svg');
	font-weight: normal;
	font-style: normal
}

@font-face{
	font-family: 'GothamHTFBlack';
	src: url('../fonts/gothamhtf-black-webfont.eot');
	src: url('../fonts/gothamhtf-black-webfont.eot?iefix') format('eot'),
	     url('../fonts/gothamhtf-black-webfont.woff') format('woff'),url('../fonts/gothamhtf-black-webfont.ttf') format('truetype'),
	     url('../fonts/gothamhtf-black-webfont.svg#webfont0xBiO3b4') format('svg');
	font-weight: normal;
	font-style: normal
}

@import url(http://fonts.googleapis.com/css?family=Ruda:400,900);

/*
 * Body
 * ====
 */

/* For the sticky footer */
html 
{
	position: relative;
	min-height: 100%;

	/* For IE and Chrome,
	   see http://stackoverflow.com/questions/20099844/chrome-not-respecting-rem-font-size-on-body-tag*/
	font-size: 100%;
}

body 
{
	/* Must match navbar height */
	padding-top: 50px;
  	/* Must match footer height */
	margin-bottom: 240px;

	background-color: #f6f6f4; /* #faf4f1; */

	/* To ensure (r)ems are computed consistently everywhere */
	font-size: 1em;
}

@media (max-width: 992px)
{
	body
	{
  		/* Must match footer height */
		margin-bottom: 200px;
	}
}

.other-page-content
{
	padding-top: 55px;
}

.main-page-content
{
	padding-top: 0;
}

/* Stretchable container that extends horizontally all the way to the page border */
.colored-background 
{
	margin: 0;
	padding: 0;
	width: 100%;
}

.blue-background
{
	background-color: #6cf;
}

.orange-background
{
	background-color: #ef4832;
	background-color: #F05C44; /* #F07057; #E74C3C; */
	background-color: #ff9933;
	
	background-color: #F56432;
	background-color: #F35C32;
	background-color: #F46032;

	background-color: #FF7A4C;

	/*background: radial-gradient(circle at center,#E4542D,#8B190C);
	background: radial-gradient(circle at center,#FF7A4C,#ef4832);*/
}

section
{
	padding-top: 50px;
	padding-bottom: 80px;
}

@media (max-width: 768px) 
{
	section
	{
		padding-bottom: 70px;
	}
}

@media (max-width: 400px) 
{
	section
	{
		padding-bottom: 50px;
	}
}

/*
 * Grid Adjustments
 * ================
 */
 
@media (min-width: 768px)
{
	/* Bigger gutter for sm5 */
	.left-col
	{
		padding-right: 30px;
	}

	.right-col
	{
		padding-left: 30px;
	}
}

@media (min-width: 992px) 
{
	/* Bigger gutter for sm5 */
	.left-col
	{
		padding-right: 50px;
	}

	.right-col
	{
		padding-left: 50px;
	}
}

@media (max-width: 768px) 
{
	[class*="row"]
	{
		/* Don't use column padding to do that (e.g. xs-12 would overflow) */
		margin-left: 40px;
		margin-right: 40px;
	}

	[class*="col-"]
	{
		/* Could be better to set the left and right padding just for the first and last column */
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 30px;
	}
	
	/* If no more content follows in the same section, remove the margin bottom 
	   to ensure we got the same amount empty space:

	   - between the last list column and the section end
	   - between a small tag line and the section end

	   For small sizes, the small tag line shows a separator line at its bottom 
	   that visually splits and reduces the space below it.
	   
	   To do so, we mark the last (visible) list column with 'last-content-col'. */
	[class*="last-content-col"]
	{
		margin-bottom: 0;
	}
}

/*
 * Links
 * =====
 */

.basic-content a:not(.btn):link, .basic-content a:not(.btn):visited
{
	font-weight: 600;
	text-decoration: none;
	/* color: #222; */
}

.basic-content a:not(.btn):hover, .basic-content a:not(.btn):active
{
	font-weight: 600;
	text-decoration: none;

	border-bottom: 3px solid lightgray; /* #2980B9; rgba(0, 0, 0, 0.8); */
}

.blue-background a:not(.btn):link,  .blue-background a:not(.btn):active, .blue-background a:not(.btn):visited
{
	color: #444;
}

.blue-background .tagline a:not(.btn):link,  .blue-background .tagline a:not(.btn):active, .blue-background .tagline a:not(.btn):visited
{
	color: #333;
}

.blue-background .tagline .highlighted-text a:not(.btn):link,  .blue-background .tagline .highlighted-text a:not(.btn):active,  .blue-background .tagline .highlighted-text a:not(.btn):visited
{
	color: #ef4832;
}

.blue-background a:not(.btn):hover, .blue-background a:not(.btn):active, .orange-background a:not(.btn):hover, .orange-background a:not(.btn):active
{
	font-weight: 600;
	text-decoration: none;
}

.blue-background a:not(.btn):hover, .blue-background a:not(.btn):active
{
	border-bottom: 3px solid rgba(255, 255, 255, 0.4);
}

.orange-background a:not(.btn):hover, .orange-background a:not(.btn):active
{
	border-bottom: 3px solid rgba(255, 255, 255, 0.3);
}

/*a:hover 
{
	color: #111;
	opacity: 0.8;
	background-color: #AEE4FF;
	text-decoration: none;
	border-bottom: 3px darkgray dotted;
}*/

/*
 * Navigation Bar 
 * ==============
 */

.navbar
{
	margin-bottom: 0;

	background-color: #FFFFFF; /* #383428; #f6f6f4; */
	opacity: 0.96;

	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 0.8em;
	text-transform: uppercase;
}

.navbar-brand
{
	font-family: 'Lobster';
	font-weight: 200;
	font-size: 1.5em;
	text-transform: none;
}

/* If the navbar is a dropdown menu, don't apply */
@media (min-width: 768px)
{
	/* To prevent the navbar bottom line to appear pushed downwards on a:hover */
	.nav li a
	{
		border-bottom: 1px solid rgba(0, 0, 0, 0);
	}

	.nav li a:hover, .nav li a:active, .nav .active a, .nav .active a:hover, .nav .active a:active
	{
		color: black;
		border-bottom: 1px solid #ef4832; /* #FF7A4C #ef4832 #AEE4FF */
	}
}

/*
 * Headers and Paragraphs
 * ======================
 */

.container h1
{
	margin-top: 0px;
	margin-bottom: 30px;

	text-align: center;
	font-family: 'Raleway', sans-serif;
	font-weight: 100;
	font-size: 2em;
}

.colored-background h1
{
	text-transform:uppercase;
	color: #F8F8FF;
}

.colored-background h2 a
{
	color: #FFFFFF !important; /* HACK */
}

h2
{
	margin-top: 0;

	text-align: left;
	text-transform: uppercase;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 1.375em;
	color: #585858;
}

h3
{
	margin-top: 0;

	text-align: left;
	text-transform: uppercase;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 1.000em;
	color: #585858;
}

@media (max-width: 992px)
{
	.container h1
	{
		font-size: 1.7em;
	}
	
	h2
	{
		font-size: 1.1em;
	}
}

.container p
{
	font-family: 'Open Sans', sans-serif;
	font-size: 0.875em;
}

/*
 * Tag Lines
 * =========
 */

.tagline
{
	padding-bottom: 80px;

	text-align: justify;
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
	font-size: 1.25em;
}

.small-tagline
{
	margin-top: 40px;
	padding-bottom: 30px;

	text-align: center;
	line-height: 230%;
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
	font-size: 0.875em;
}

@media (max-width: 768px) 
{
	.tagline
	{
		margin-left: 15px;
		margin-right: 15px;
		padding-bottom: 50px;

		font-size: 1em;
	}
	
	.small-tagline
	{
		margin-left: 40px;
		margin-right: 40px;
		/* TODO: We should have a zero margin-top at all sizes, we could just set a custom column padding-bottom at all sizes. */
		margin-top: 0px;
		padding-top: 15px;
		padding-bottom: 15px;
		
		border-top: 1px solid lightgray;
		border-bottom: 1px dotted lightgray;

		text-align: justify;
		font-size: 0.813em;
	}
}

.small-tagline p:not(:first-child)
{
	margin-top: 20px;
}

/* TODO: Improve, a bit convoluted (this doesn't work when targeting padding-bottom, not sure why)
.small-tagline:not(:last-child)
{
	margin-bottom: 30px;
}*/

.highlighted-text
{
	text-style: bold;
	color: #ef4832;
}

/*
 * Lists and Annotations
 * =====================
 */

.basic-content ul
{
	margin: 0;
	padding: 0;

	list-style-type: none;
}

.basic-content li
{
	margin-top: .5em;
	margin-bottom: .5em;

	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 0.813em;
}

.annotation
{
	/* Compensate the line-height for .annotation p and matches the visual space 
	   at the bottom of the last list in other sections. */
	margin-bottom: -5px;
	text-align: left;
}

.annotation p
{
	margin: 0;
	padding: 0;



	/*color: #F8F8FF;*/

	text-align: left;
	line-height: 180%;

	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 0.813em;

	text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1);
	
 	color: #484848;
	text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px)
{
	.annotation p
	{
		padding: 5px;
		padding-left: 10px;
		border-left: 1px solid rgba(255, 255, 255, 0.95);
		/*border-left: 6px solid rgba(255, 204, 2, 0.7);*/
		opacity: 0.95;
	}
}

.annotation .glyphicon
{
	/* Override [class*="row"] that matches glyph-right-arrow */
	margin-left: 0;

	margin-right: 5px;
}

@media (max-width: 768px)
{
	.annotation .glyphicon
	{
		color: rgba(255, 255, 255, 0.8);
	}
}

/*
 * Code Snippets
 * =============
 */

.codewrapper
{

}

.code
{
	padding: 5px;

	border-left: 6px solid rgba(255, 204, 2, 0.7);
	background-color: rgba(255, 204, 2, 0.3);
	opacity: 0.95;

	white-space: nowrap;
	font-style: normal;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 1em;
	color: white;
}

@media (max-width: 768px)
{
	.code
	{
		font-size: 0.85em;
	}
}

@media (max-width: 380px)
{
	.code
	{
		font-size: 0.77em;
	}
}

/* With these settings, for a non-retina iPhone screen width (320px), both code and tagline blocks uses the same width. */
@media (max-width: 350px)
{
	.code
	{
		font-size: 0.75em;
		letter-spacing: -0.06em;
	}
}

/*
 * Images
 * ======
 */
 
img 
{
	max-width: 100%;
}
 
.small-screenshot
{
	display: block;

	width: 400px;

	border: 1px solid lightgray;
	border-radius: 6px;
}

 
.big-screenshot
{
	display: block;

	width: 900px;
	margin: auto;
	/* TODO: Remove by adjusting margin-bottom for the previous element */
	margin-top: 30px;

	border: 1px solid lightgray;
	border-radius: 6px;
}


/*
 * Top Area
 * ========
 */
 
.jumbotron
{
	margin-top: 30px;
	/* Override Bootstrap margin bottom 30px */
	margin-bottom: 0;
	background-color: 0;
}

#splash
{
	background-color: rgba(255, 204, 2, 0.44);
}

#splash h1
{
	text-align: center;
	font-family: 'Raleway Dots', sans-serif;
	font-weight: 100;
	font-size: 4em;
}

@media (max-width: 768px) 
{
	#splash h1
	{
		font-size: 2.8em;
	}
}

#splashline
{	
    padding-bottom: 30px;

	text-align: right;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 1em;
	color: #585858;
}

@media (min-width: 992px)
{
    #splashline
    {
        padding: 30px;
    }
}

@media (max-width: 992px) 
{
	/* Override the margin bottom set on .row in Grid section (for the same media max-wdith) */
	#introduction .col-md-6
	{
		margin-bottom: 0;
	}

	#splashline
	{
		/*padding-bottom: 0;*/

		font-size: 0.9em;
	}
}


#splashline em
{
	background-color: #AEE4FF;
	opacity: 0.8;

	font-style: normal;
	color: #111;
}

#introduction
{
	border-bottom: dotted 1px lightgray;
	border-bottom: dotted 1px #e4e4e4;
	border-bottom: solid 1px #ededed;	
}

#video
{
	padding-bottom: 50px;
	border-bottom: dotted 6px white;
	border-bottom: dotted 1px lightgray;
}

#video h2
{
	margin-top: 0;

	text-align: left;
	text-transform: uppercase;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size: 1.375em;
	color: #ababab; /* #585858; */
}

#video a
{
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size: 0.875em;
}

.videoline
{
	padding-top: 30px;
	text-align: center;
}

@media (min-width: 768px)
{
    .videoline
    {
        padding: 30px;
    }
}

.container .videoline a:link, .container .videoline a:hover
{
	/*line-height: 70px;*/

	font-family: 'Raleway', sans-serif;
	font-weight: 200;
	font-size: 1.0em;
	color: #585858;
}

@media (min-width: 768px)
{
    .container .videoline a:link, .container .videoline a:hover
    {
        font-size: 1.3em;
    }
}

.videoline .glyphicon
{
	/*font-size:30px;*/
	font-weight: 100;
	vertical-align: middle;
	/*line-height: 70px;*/
}

#video .glyphicon
{
	font-size: 0.8em;
	font-weight: 100;
	vertical-align: baseline;
}

/*
 * User Experience
 * ===============
 */

#userexperience
{
	/* Additional sections on the same page uses a bit less padding (50px) at the top */
	padding-top: 70px;
}

#userexperience h2
{
	color: #585858;
}

#userexperience .inner-row
{
	/*margin-bottom: 20px;*/
}

#userexperience ul
{
	color: #686868;
}

/*
 * Features
 * ========
 */

#features h2
{
	color: white;
}

#features ul
{
 	color: #686868;
	text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.06);
}

/*
 * Framework
 * =========
 */

@media (min-width: 768px)
{
	#overall-design .small-tagline
	{
		padding-bottom: 0;
	}
}

/*
 * Download
 * ========
 */

#download h2
{
	/* Same color as tagline in Features section */
	color: #333; /* #383838; */
	color: #F8F8FF;
	/* text-shadow: 0px 5px 6px rgba(0, 0, 0, 0.07); */
}

#download .row div:nth-child(2)
{
	text-align: center;
}

#download .tagline
{
	color: #F8F8FF;
	color: #333;
	text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.07);
}

#download .small-tagline
{
	text-shadow: 0px 3px 4px rgba(5, 5, 5, 0.07);
}

@media (min-width: 768px)
{
	#download .small-tagline
	{
		padding-bottom: 0;
	}
}

@media (max-width: 768px)
{
	#download .small-tagline
	{
		border-top: 1px dotted #F8F8FF;
	}
}

.download-button
{
	height: 160px;
	width: 160px;
	
	font-weight: 100;
	font-family: 'Open Sans';
}

.download-button:first-child
{
	margin-right: 30px;
}

.download-icon
{
	height: 90px;
	width: 90px;
	margin: 10px 20px 10px 20px;

	text-align: center;
	/* Not expressed in 'em', it is a text-based icon inside a button (not resizable without a media query) */
	font-size: 90px;
}

.github-icon
{
	height: 90px;
	width: 90px;
	margin: 10px 20px 10px 20px;

	background: url('../images/GitHub-Mark-Light-120px-plus.png') center no-repeat;
	background-size: 90px;
}

@media (max-width: 992px)
{
	.download-button
	{
		height: 140px;
		width: 140px;
		
		font-size: 16px; /* Bootstrap set .btn-lg fontsize to 18px */
		font-weight: 100;
		font-family: 'Open Sans';
	}

	.download-icon
	{
		height: 70px;
		width: 70px;
		margin: 10px 20px 10px 20px;

		/* Not expressed in 'em', it is a text-based icon inside a button (not resizable without a media query) */
		font-size: 70px;
	}

	.github-icon
	{
		height: 70px;
		width: 70px;
		margin: 10px 20px 10px 20px;

		background-size: 70px;
	}
}

@media (max-width: 768px)
{
	.download-button
	{
		height: 120px;
		width: 120px;
		margin-bottom: 20px;
		
		font-size: 13px; /* Bootstrap set .btn-lg fontsize to 18px */
		font-weight: 100;
		font-family: 'Open Sans';
	}

	.download-icon
	{
		height: 60px;
		width: 60px;
		margin: 10px 15px 10px 15px;

		/* Not expressed in 'em', it is a text-based icon inside a button (not resizable without a media query) */
		font-size: 60px;
	}

	.github-icon
	{
		height: 60px;
		width: 60px;
		margin: 10px 15px 10px 15px;

		background-size: 60px;
	}
}

@media (max-width: 400px) 
{
	.download-button 
	{
		height: 90px;
		width: 90px;
		padding-left: 8px;
		padding-right: 8px;

		font-size: 11px; /* Bootstrap set .btn-lg fontsize to 18px */
		font-weight: 100;
		font-family: 'Open Sans';
	}

	.download-button:first-child 
	{
		margin-right: 15px;
	}

	.download-icon 
	{
		/* We make the download icon slightly smaller to correct the visual 
		   impression it gives of being bigger than the Github icon */
		height: 48px;
		width: 48px;
		margin: 2px 13px 6px 13px;
		
		/* Not expressed in 'em', it is a text-based icon inside a button (not resizable without a media query) */
		font-size: 48px;
	}

	.github-icon 
	{
		height: 50px;
		width: 50px;
		margin: 2px 12px 4px 12px;

		background-size: 50px auto;
	}
}

/*
 * Community
 * =========
 */


#community h2
{
	color: #585858;
}

#community ul
{
	color: #686868;
}

/*
 * Team
 * ====
 */

#team h2
{
	color: white;
}

#team ul
{
 	color: #686868;
	text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px)
{
	#team .small-tagline
	{
		border-top: 1px dotted #F8F8FF;
	}
}

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

/* See sticky footer with nav bar in Bootstrap examples */
#footer
{
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Must match body margin bottom */
	height: 240px; /* ~160 (.container) + 80 (.full-container) */
	padding: 0;

	background-color: #F6F6F4;
	
	text-align: center;
}


/* Main container */
#footer .container
{
	padding-top: 80px;
	/* For the splash line inside, the bottom padding is 30px, for the small 
	   print, the bottom margin is 10px, this stretches the last column 
	   vertically in the row, and translates as a 40px between main and pattern 
	   containers. */
	padding-bottom: 0;
}

/* Pattern container */
#footer .colored-background
{
	height: 80px;
	vertical-align: center;
	border-top: 1px dotted lightgray;

	background-image: url('../images/struckaxiom.png');
}

@media (max-width: 992px) 
{
	#footer
	{
  		/* Must match body margin bottom */
		height: 200px;
	}
	
	#footer .container
	{
		padding-top: 40px;
	}

	#footer h2
	{
		text-align: center;
	}
}

/* Override special rule that adds a margin between columns stacked up at small sizes */
@media (max-width: 768px) 
{
	#footer .container .row > *
	{
		margin-bottom: 0px;
	}
}


#footer #splashline
{
	padding-top: 0;
}

/* Copyright notice */
#footer small
{
	/* Make it look like a paragraph element */
	display: block;
	margin-bottom: 10px;

	opacity: 0.7;

	letter-spacing: 0.05em;
	font-size: 0.875em;
	font-family: 'Raleway', sans-serif;
}