html, body { height: 100%; }

html { background-color: #222; }

body {
	background-color: #F0F0F0;
	font-family: custom-sans;
}

pre { font-family: monospace; }

::selection {
	color: white;
	background: purple;
}
::-moz-selection {
	color: white;
	background: purple;
}

p { padding: 0.5em; }

a {
    color: #333;
	text-decoration: none;
}

a:hover { text-decoration: underline; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: custom-serif; }
h1, .h1 { font-size: 2.5em; }
h2, .h2 { font-size: 2em; }
h3, .h3 { font-size: 1.5em; }
h4, .h4 { font-size: 1em; }
h5, .h5 { font-size: 0.8em; }
h6, .h6 { font-size: 0.5em; }

.clearfix {
    clear: both;
    padding: 0 !important;
    margin: 0 !important;
}

.begin-wrapper {
    position: relative;

    min-height: 100%;
    background-color: #EBEAEF;

	overflow: hidden;
}

.mbody {
	position: relative;
	width: 100%;
}

.main-column {
	width: 85%;
	margin: 0 auto;
}

.right { text-align: right; }
.panel { padding: 1.2em; }

/* transition properties */
div#header, div#mbody, div#contact, div#horizon {
	
	-webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-ms-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

	-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}

@keyframes spin {
    0% { transform: rotate( 0deg ); }
    25% { transform: rotate( 90deg ); }
    50% { transform: rotate( 180deg ); }
    75% { transform: rotate( 270deg ); }
    100% { transform: rotate( 360deg ); }
}

@keyframes aspin {
    0% { transform: rotate( 0deg ); }
    25% { transform: rotate( -90deg ); }
    50% { transform: rotate( -180deg ); }
    75% { transform: rotate( -270deg ); }
    100% { transform: rotate( -360deg ); }
}

.spin {
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: aspin;
}

.cw { animation-name: spin; }

/* end transition properties */