/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                     RESET                       */

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}

article, aside, figure, footer, header, nav, section, details, summary {display: block;}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
*, *:before, *:after {box-sizing: border-box;-moz-box-sizing: border-box }

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
input[type=file], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button,
input[type=button] {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover 
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                TYPOGRAPHY                       */
html {
	font-family: 'Open Sans', 'open-sans', sans-serif;
	font-size: 10px
}
h1, .margins h2, .margins h4 {
	line-height: 1.2em;
}
h1 {
	font-size: 3.6rem;
	font-weight: 300;
	margin: 0 0 8rem;
	text-align: center;
}
h1 strong {
	color: #404040
}
h1 strong.atomic, h1.epic strong {
	color: #c90062
}
h1.epic {
	margin: 4rem auto;
	font-size: 4.8rem
}
h1, h2, h3 {
	color: #58595a
}
.margins h2, .margins h2 span {
	font-size: 2.6rem;
	font-weight: 300;
	margin: 0 0 1.2rem;
}
.margins h3 {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: .5rem;
}
.margins p, .margins ul {
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.3em;
	margin: 0 0 2rem;
	color: #686868
}
a {
	color: #c90062;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
}
a:hover {
	color: #e8127b;
}
strong {
	color: #243242
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                   BUTTONS                       */

.button, input[type=submit] {
	display: inline-block;
	cursor: pointer;
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 5.6rem;
	padding: 0 7.2rem;
	color: #fff;
	border: .2rem solid #fff;
	border-radius: .4rem;
	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none; 
}
.button:hover, input[type=submit]:hover {
	color: #fff;
	background-color: #c90062;
	border-color: #c90062;
}
.button.atomic, input[type=submit].atomic {
	background-color: #c90062;
	border-color: #c90062;
}
.button.atomic:hover, input[type=submit].atomic:hover {
	background-color: #e8127b;
	border-color: #e8127b;
}
input[type=submit] {
	background-color: transparent;
	font-family: 'Open Sans', 'open-sans', sans-serif;
	text-transform: uppercase
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                    LAYOUT                       */

html, body {
	height: 100%;
	text-align: center
}
section, footer {
	position: relative;
	padding: 12rem 0 9.5rem
}
section.smoke {
	background-color: #fff7f8
}
#about {
}
.margins {
	max-width: 120rem;
	margin: 0 auto;
	position: relative;
}
.col_set {
	text-align: center;
	font-size: 0
}
.col_2, .col_3 {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	margin: 0 3% 4rem 0;
}
.col_2:last-child, .col_3:last-child {
	margin-right: 0 !important
}
.col_2 {
	width: 48.5%
}
.col_3 {
	width: 31.333%;
	min-width: 26rem;
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                      HERO                       */

#hero {
	padding: 0;
	min-height: 100%;
	background: url(../img/hero.jpg) right bottom;
	background-size: cover;
	background-color: #07080d;
	color: #fff;
}
#hero.short {
	height: 20rem;
	min-height: 0;
	background-position: right top
}
#hero .margins {
	padding-bottom: 22rem
}
#bottom_action {
	position: absolute;
	bottom: 1rem;
	left: 0;
	width: 100%
}
#hero h1 {
	color: #fff;
	font-size: 4.8rem;
	margin: 8rem auto 2.7rem;
	max-width: 72rem
}
#hero h2 {
	color: #cbcac9;
	font-size: 2.8rem;
	font-weight: 300;
	margin: 0 auto;
	max-width: 104rem
}
.button.register {
	margin-top: 8rem;
	padding: .8em 3em;
	line-height: 1em
}
#logo_atomia {
	display: inline-block;
	margin-top: 7.7rem;
	font-size: 0;
	height: 3.6rem;
	width: 15.1rem;
	background: url(../img/atomia_w.svg) center center no-repeat;
	background-size: contain
}
.quiet {
	font-size: 1.2rem;
	color: rgba(255, 255, 255, 0.7);
	text-transform: none;
}
#read_more {
	font-size: 0;
	display: inline-block;
	width: 6rem;
	height: 6rem;
	margin-top: 6rem;
	background: url(../img/more.svg) center center no-repeat;
	background-size: 3.8rem auto;
	opacity: .8
}
#hero .col_3 {
	width: 27%;
	position: relative
}
#hero .col_3 p {
	text-align: center;
	color: #cbcac9;
	font-size: 2.8rem;
}
#hero .col_3 p strong {
	color: #fff;
	font-weight: 600
}
#hero .no_break {
	position: absolute;
	left: 50%;
	margin-left: -17.5rem;
	width: 35rem;
}
#hero p.number {
	display: block;
	width: 16rem;
	height: 16rem;
	margin: 6rem auto 2rem;
	border-radius: 100%;
	border: .3rem solid #fff;
	color: #fff;
	font-size: 8.8rem;
	line-height: 15.3rem
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                    ATOMIA                       */

ul.iconic {
	margin: 6rem 0;
	font-size: 0;
}
.iconic li {
	display: inline-block;
	margin: 4rem 3% 4rem 0;
	padding: 6rem 18rem 0 0;
	min-height: 16rem;
	width: 40%;
	min-width: 42rem;
	position: relative;
	text-align: right;
	font-size: 2rem;
	line-height: 1.2em;
	font-weight: 700;
	text-transform: uppercase;
	color: #58595a;
	vertical-align: top
}
.iconic li:nth-child(even) {
	margin: 4rem 0 4rem 3%;
	padding: 6rem 0 0 18rem;
	text-align: left
}
.iconic li:before {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 16rem;
	height: 16rem;
}
.iconic li:nth-child(even):before {
	left: 0;
	right: auto
}
#s_atomia_1:before {
	background: url(../img/s_atomia_1.svg) center center;
}
#s_atomia_2:before {
	background: url(../img/s_atomia_2.svg) center center;
}
#s_atomia_3:before {
	background: url(../img/s_atomia_3.svg) center center;
}
#s_atomia_4:before {
	background: url(../img/s_atomia_4.svg) center center;
}
#s_atomia .epic {
	max-width: 80rem;
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                 OPENSTACK                       */

#s_ostack h1 strong, #s_ostack h1.epic strong {
	color: #c72a19
}
ul.stars {
	max-width: 75rem;
	margin: 16rem auto;
	position: relative
}
#s_ostack_logo {
	padding-left: 30rem
}
#s_ostack_logo:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 23rem;
	height: 20.8rem;
	background: url(../img/ostack.png) center center no-repeat
}
.stars li {
	font-size: 2rem;
	line-height: 1.2em;
	font-weight: 700;
	text-transform: uppercase;
	color: #58595a;
	text-align: left;
	margin: 3.4rem 0;
	padding: 0 0 0 4rem;
	position: relative
}
.stars li:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 2.25rem;
	height: 2.25rem;
	background: url(../img/star.svg)
}
#s_ostack .epic {
	max-width: 80rem;
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                   OPTIONS                       */

#s_options .col_2 {
	width: 45%;
	min-width: 45.6rem;
	margin-right: 10%
}
#s_options .col_2 h1 {
	text-align: inherit;
	margin-bottom: .5em
}
#s_options .col_2 p {
	font-size: 2.4rem;
	min-height: 12rem
}
#s_options .col_2:after {
	content: '';
	display: inline-block;
	width: 100%;
	max-width: 49.8rem;
	height: 58.2rem;
	background-size: contain
}
#s_options_1:after {
	background: url(../img/s_options_1.png) no-repeat;
}
#s_options_2:after {
	background: url(../img/s_options_2.png) no-repeat;
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                  POWERFUL                       */

#s_powerful .iconic {
	margin-bottom: 10rem;
	position: relative;
	top: -2rem
}
#s_powerful .iconic li {
	margin-top: 6rem;
	margin-bottom: 6rem
}
#s_powerful .iconic li:nth-child(even) {
	position: relative;
	top: 14.5rem
}
#s_powerful_1:before {
	background: url(../img/s_powerful_1.svg) center center;
}
#s_powerful_2:before {
	background: url(../img/s_powerful_2.svg) center center;
}
#s_powerful_3:before {
	background: url(../img/s_powerful_3.svg) center center;
}
#s_powerful_4:before {
	background: url(../img/s_powerful_4.svg) center center;
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                       HOW                       */

#s_how .iconic li {
	text-align: center;
	margin: 4rem 2rem;
	padding: 18rem 0 0;
	max-width: 27rem;
	min-width: 20rem
}
#s_how .iconic li:first-child {
	margin-left: 0
}
#s_how .iconic li:last-child {
	margin-right: 0
}
#s_how .iconic li:before {
	left: 50%;
	right: auto;
	margin-left: -8rem
}
#s_how_1:before {
	background: url(../img/s_how_1.svg) center center;
}
#s_how_2:before {
	background: url(../img/s_how_2.svg) center center;
}
#s_how_3:before {
	background: url(../img/s_how_3.svg) center center;
}
#s_how_4:before {
	background: url(../img/s_how_4.svg) center center;
}
#s_how .epic {
	max-width: 108rem;
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                      FORM                       */

#s_form {
	background: url(../img/form.jpg) right bottom;
	background-size: cover;
	padding-bottom: 20rem
}
#s_form h1 {
	margin-bottom: 12rem
}
#s_form h1, #s_form h2 {
	color: #404040
}
#s_form .col_2 {
	margin-bottom: 0
}
form, #msg_submitting, #msg_submitted {
	max-width: 86rem;
	margin: 0 auto 6rem
}
input[type=text], input[type=email], textarea {
	width: 100%;
	line-height: 6.8rem;
	font-family: 'Open Sans', 'open-sans', sans-serif;
	font-size: 2.2rem;
	font-weight: 700;
	background-color: rgba(0, 0, 0, 0.33);
	color: #fff;
	border: none;
	border-radius: .2rem;
	padding: 0 3.2rem;
	transition: background-color .2s ease-in-out;
	-webkit-transition: background-color .2s ease-in-out;
	-moz-transition: background-color .2s ease-in-out;
}
input[type=text]:focus, input[type=email]:focus, textarea:focus {
	outline: none;
	background-color: rgba(0, 0, 0, 0.4);
}
textarea {
	line-height: 1.4em;
	height: 42rem;
	padding: 1.8rem 3.2rem
}
::-webkit-input-placeholder {
	color: #deded8;
	text-transform: uppercase
}
::-moz-placeholder {
	color: #deded8;  
	text-transform: uppercase
}
:-ms-input-placeholder {  
	color: #deded8;  
	text-transform: uppercase
}
.s_form_row {
	position: relative
}
input.error {
	box-shadow: 0 0 0 .3rem #ff886c
}
label.error {
	position: absolute;
	bottom: .3rem;
	right: 1rem;
	color: #f5d7cf;
}
.fine {
	position: relative;
	top: -1rem
}
#msg_submitting, #msg_submitted {
	display: none
}
#msg_submitted h1 {
	margin-bottom: 1rem;
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                    FOOTER                       */

footer {
	background-color: #040406;
	color: #bcbcbc;
	padding: 6rem 0 0
}
#s_form + footer {
	padding: 0
}
footer .margins p {
	color: #919295;
	font-size: 1.8rem;
}
footer .margins h2 {
	color: #fff
}
.margins ul.links {
	margin: 2rem 0 3rem
}
#atomia_future span {
	display: none;
}
#atomia_future {
	color: #fff;
	text-transform: none;
	font-size: 1.6rem;
	display: block;
	width: 28.5rem;
	margin: 0 auto
}
#atomia_future svg {
	display: block;
	margin: 0 auto;
	width: 27.2rem;
	height: 7.29rem;
	font-size: 0;
}
#atomia_future path {
	transition: fill .2s ease-in-out;
	-webkit-transition: fill .2s ease-in-out;
	-moz-transition: fill .2s ease-in-out;
}
#atomia_future:hover path {
	fill: #c90062
}
#f_about {
	max-width: 58rem;
	margin: 2rem auto 4rem
}
#ppolicy_box {
	padding-bottom: 20rem;
	background-color: #1a1b23;
	text-align: left;
	transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
}
#ppolicy_box .margins, #attributions_box .margins {
	max-width: 80rem
}
#ppolicy_box.expanded, #attributions_box.expanded {
	max-height: 1000rem;
	padding: 10rem 0 
}
#ppolicy_box h1, #ppolicy_box h2, #attributions_box h1, #attributions_box h2 {
	color: #c9cbd1
}
#ppolicy_box p, #attributions_box p {
	color: #919295
}
#attributions_box p {
	text-align: center
}
.margins p.action {
	margin-top: 6rem;
	text-align: center;
	color: #e9e9e9;
	text-shadow: 0 0 3px #010714
}
.margins p.action input {
	display: block;
	margin: 0 auto 1rem
}
.margins p.action a {
	color: #eee;
	text-transform: none
}
.margins p.action a:hover {
	color: #fff
}
#bottom_nav {
	height: 6rem;
	background-color: #1a1b23;
	position: relative
}
#bottom_nav p {
	line-height: 6rem;
	color: #58595a;
	font-size: 1.8rem;
	font-weight: 300;
	text-align: left;
	margin: 0 4.8rem
}
.links {
	position: absolute;
	right: 4.8rem;
	top: 0
}
.links li {
	display: inline;
}
.links a {
	white-space: nowrap;
	margin: 0 2rem;
	line-height: 6rem;
	font-weight: bold;
	font-size: 1.6rem;
	color: #919295
}
.links a:hover {
	color: #c90062
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                                    RETINA                       */
@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
	#s_ostack_logo:before {
		background: url(../img/ostack@2x.png);
		background-size: 23rem 20.8rem
	}
	#s_options_1:after {
		background: url(../img/s_options_1@2x.png) no-repeat;
	}
	#s_options_2:after {
		background: url(../img/s_options_2@2x.png) no-repeat;
	}
}

/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\*/

/*!|                                                                                                                              BREAK POINTS                       */

@media only screen 
and (max-width : 1200px) {
	#s_how .iconic li, #s_how .iconic li:first-child, #s_how .iconic li:last-child {
		margin: 4rem 7rem
	}
	.margins, #hero {
		padding: 0 2rem
	}
}
@media only screen 
and (max-width : 1024px) {
	section {
		padding: 8rem 0 4.5rem
	}
	#hero h1 {
		margin-top: 4rem
	}
	#hero p.number {
		height: 13rem;
		width: 13rem;
		line-height: 12.3rem
	}
	#hero .no_break {
		position: static;
		margin-left: 0;
		width: auto
	}
	#read_more {
		margin-top: 3rem !important
	}
	h1 {
		margin-bottom: 2rem
	}
	ul.iconic {
		margin: 0
	}
	ul.stars {
		margin: 10rem auto
	}
	#s_options h1 + .col_set {
		margin-top: 6rem
	}
	#s_options .col_2 {
		margin-right: 5rem
	}
	#s_powerful .iconic li {
		margin-top: 4rem;
		margin-bottom: 4rem
	}
	#s_form {
		padding-bottom: 8rem
	}
	#s_form h1 {
		margin-bottom: 7rem
	}
	footer:before {
		height: 8rem;
		top: -8rem
	}
}
@media only screen 
and (max-width : 960px) {
	#hero .col_set {
		margin: 2rem 0
	}
	#hero .col_3 {
		width: 31%;
		min-width: 15rem
	}
	#hero p.number {
		margin: 2rem auto 1rem
	}
	#bottom_nav {
		height: auto;
	}
	#bottom_nav p {
		text-align: center;
	}
	.links {
		position: static
	}
}
@media only screen 
and (max-width : 934px) {
	#s_atomia .iconic, #s_powerful .iconic {
		overflow: hidden;
	}
	#s_atomia .iconic li, #s_powerful .iconic li {
		width: auto;
		max-width: 45rem;
		top: 0 !important;
		margin: 2rem 0;
		float: left
	}
	#s_atomia .iconic li:nth-child(even), #s_powerful .iconic li:nth-child(even) {
		float: right
	}
	#s_ostack_logo {
		padding: 22rem 0  0;
		max-width: 32rem
	}
	#s_ostack_logo:before {
		left: 50%;
		margin-left: -11.5rem
	}
}
@media only screen
and (max-height: 900px) {
	#hero .margins {
		padding-bottom: 12rem
	}
	#logo_atomia {
		margin-top: 2rem
	}
	#hero.short #logo_atomia {
		margin-top: 7.7rem
	}
	#read_more {
		margin-top: 0
	}
}
@media only screen 
and (max-width : 800px) {
	.col_2 {
		margin-right: 0;
		width: 100%
	}
	textarea {
		height: 30rem
	}
}
@media only screen
and (max-width: 736px) {
	section, footer {
		padding: 5rem 0 3.5rem
	}
	footer {
		padding-bottom: 0
	}
	.col_3 {
		margin: 0 0 2rem;
		width: 100%
	}
	h1 {
		margin-bottom: 5rem
	}
	#hero h1 {
		font-size: 4rem;
		margin-top: 3rem
	}
	#hero .col_3 {
		width: 100%;
		margin: 0
	}
}
@media only screen 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	#hero .margins {
		padding-bottom: 12rem
	}
	#logo_atomia {
		margin-top: 2rem
	}
	#hero.short #logo_atomia {
		margin-top: 7.7rem
	}
	#read_more {
		margin-top: 0
	}
	#s_atomia .iconic li, #s_powerful .iconic li {
		max-width: 53rem;
		width: 53rem
	}
	#s_powerful .iconic {
		margin: 8rem 0 3rem
	}
	#s_how .iconic li, #s_how .iconic li:first-child, #s_how .iconic li:last-child {
		margin: 4rem
	}
	.col_2 {
		width: 48.5%;
		margin-right: 3%
	}
	textarea {
		height: 42rem
	}
	#bottom_nav {
		height: auto;
	}
	#bottom_nav p {
		text-align: center;
	}
	.links {
		position: static
	}
}
@media only screen
and (max-width: 480px) {
	#hero .margins {
		padding-bottom: 0
	}
	#bottom_action {
		position: static
	}
	.button, input[type=submit] {
		line-height: 2.6rem;
		padding: 1.3rem 7.2rem
	}
	#s_atomia .iconic li, #s_powerful .iconic li {
		width: 100%;
		min-width: 0;
		padding-top: 2rem
	}
	#s_options .col_2 {
		margin-right: 0;
		width: 100%;
		min-width: 0
	}
	#s_options .col_2:after {
		width: 89vw;
		height: 93vw
	}
	.col_2 {
		margin-right: 0;
		width: 100%;
	}
	#bottom_nav p {
		line-height: 1.2em;
		padding-bottom: 2rem
	}
	h1 {
		font-size: 2.8rem
	}
	h1.epic {
		font-size: 3.6rem
	}
	#s_options .col_2 p {
		font-size: 2rem
	}
	#s_how .iconic li, #s_how .iconic li:first-child, #s_how .iconic li:last-child {
		margin: 2rem 0
	}
}
@media only screen
and (max-width: 320px) {
	.iconic li:before {
		width: 12rem;
		height: 12rem
	}
	#s_atomia .iconic li, #s_powerful .iconic li {
		padding-top: 1rem;
		margin: 0
	}
	.iconic li {
		padding-right: 13rem;
		font-size: 1.8rem
	}
	.iconic li:nth-child(even) {
		padding-left: 13rem
	}
	#s_how .iconic li {
		padding-top: 13rem
	}
	#s_how .iconic li:before {
		margin-left: -6rem
	}
}