html, body {
  height: 100%;
  width: 100%;
  background: #4FA359;
}

li {
	list-style-type: none
}

p {
    font-size: 18px;
}

p.small {
    font-size: 12px;
}

a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}
	
#topHeader-text {
	color: #fffafa;
	font-family: "Open Sans";
	font-size: 96px;
	line-height: 107px;
	text-transform: none;
	text-shadow: black 2px 2px 4px;
	text-transform: uppercase;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#topHeader {
	display: table;
	height: 100%;
	position: relative;
	width: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#video-bg {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
	background: transparent;
	height:100%;
    width:100%;
	opacity: 0.6;
}

#video-bg > video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	background-color: #9AC464;
	object-fit: fill;
	min-width: 100%;
    min-height: 100%;
}

#video-bg > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 20%;
	height: auto;
	background-color: #9AC464;
	object-fit: fill;
}


.image-section img {
	display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 783px) {
    .image-section img {
        width: 150%;
		height: auto;
    }
}

.navbar-custom-style {
	background: #2e3f30;
}

.hide-element {
	display: none;
}

.navbar .navbar-nav {
    letter-spacing: 1px;
}

.navbar .navbar-nav li a:focus {
    outline: 0;
}

.navbar-default,
.navbar-inverse {
    border: 0;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li.active>a:focus {
    color: #fff;
    background: #4fa359;
}

.navbar-default .navbar-nav>li>a:focus {
    color: white;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
    color: #fff;
    background-color: #4fa359;
    -webkit-transition: 0.8s all ease;
    -o-transition: 0.8s all ease;
    transition: 0.8s all ease;
}

.section-icon {
	max-width: 100%; 
	height: auto;
	border: 2px solid #4fa359;
	border-radius: 60%;
	display: inline-block;
	font-size: 60px;
	height: 140px;
	line-height: 140px;
	text-align: center;
	vertical-align: middle;
	width: 140px;
	color: #90ee90;
}

.greyout {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

.section-icon:hover {
	border: 2px solid #626262;
}

.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:focus {
	background: #4FA359;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:active {
	background: #fffafa;
}

.navbar-default .navbar-toggle:hover .icon-bar {
	background: #626262;
	color: #626262;
	border-color: #626262;
}



.play-pause-btn {
	position:absolute;
	right:30px;
	top:100px;
}

#trailer-youtube-button {
	position:absolute;
	top: 100px;
	left: 30px;
	padding: 10px 15px;
	font-size: 14px;
}

.play-pause-btn:after {
	content: "\f04c";
	font-size: 32px;
	font-family: FontAwesome;
	text-decoration: none;
}

.paused-btn:after {
	content: "\f04b";
	font-size: 32px;
	font-family: FontAwesome;
	text-decoration: none;
}

.btn-round,
.btn-round:focus {
	border: none;
	border-radius: 50%;
	display: inline-block;
	font-size: 60px;
	height: 70px;
	line-height: 27px;
	text-align: center;
	vertical-align: middle;
	width: 70px;
	color: rgba(255,255,255,1);
    background: rgba(1,1,1,0.4);
}

.btn-round:hover {
	color: rgba(255,255,255,1);
    background: rgba(0,0,0,1);
}


.close-trailer-btn,
.close-trailer-btn:focus {
	position:absolute;
	right:30px;
	top:100px;
	z-index:102;
}

.close-trailer-btn:after {
	content: "\f00d";
	font-size: 32px;
	font-family: FontAwesome;
	text-decoration: none;
}

.start-trailer-button {
	position:absolute;
	z-index:200;
	display: table;
	color: rgba(255,255,255,1);
    background: rgba(0,0,0,0.4);
	padding: 30px 55px;
	font-size: 22px;
	margin-top: 25px;
	width: 100%;
}

.stroke {
	color: #F00;
	text-shadow:
		-1px -1px 0 #000,  
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
	margin: 0 0;
}

.share-background {
	position:absolute;
	z-index:200;
	display: table;
	margin-top: 125px; 
	background: rgba(0,0,0,0.4);
	color: rgba(255,255,255,1);
	width: 100%;
	margin: 125px auto 0px auto;
}

.start-trailer-button:hover {
	color: rgba(255,255,255,1);
    background: rgba(0,0,0,1);
}

/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
	#video-bg > video {
		top: 0; left: 0;
		width: 100%; height: 100%;	
    }
	
	#video-bg > img {
		top: 0; left: 0;
		width: 100%; height: 100%;
	}
}


hr.star-light,
hr.star-primary,
hr.star-secondary,
hr.star-ccraft {
    margin: 25px auto 30px;
    padding: 0;
    max-width: 250px;
    border: 0;
    border-top: solid 5px;
    text-align: center;
	margin-bottom: 30px;
}

hr.star-light:after,
hr.star-primary:after, 
hr.star-secondary:after,
hr.star-ccraft:after {
    content: "\f005";
    display: inline-block;
    position: relative;
    top: -.8em;
    padding: 0 .25em;
    font-family: FontAwesome;
    font-size: 2em;
}

hr.hr-icon-what-is-it:after {
    content: "\f05a";
}

hr.hr-icon-about-us:after {
    content: "\f19c";
}

hr.hr-icon-contact:after {
    content: "\f0e0";
}

hr.hr-icon-getting-started:after {
    content: "\f11b";
}

hr.hr-icon-help:after {
    content: "\f059";
}

hr.hr-icon-computercraft:after {
    content: "\f121";
}

hr.hr-icon-faq:after {
    content: "\f059";
}

hr.hr-icon-games:after {
    content: "\f11b";
}

hr.star-light {
    border-color: #fff;
}

hr.star-light:after {
    color: #fff;
    background-color: #fffafa;
}

hr.star-primary {
    border-color: #fffafa;
}

hr.star-secondary {
    border-color: #626262;
}

hr.star-primary:after {
    color: #fffafa;
    background-color: #4fa359;
}

hr.star-secondary:after {
    color: #626262;
    background-color: #fffafa;
}

.first-section {
    background: #4fa359;
}

.mobile-header-section-1280 {
	background-image: url("../img/mobile_headers/header-1280.png");
	background-color: #4fa359;
	background-size: cover;
    background-repeat: no-repeat;
	height: 450px;
	width: 100%;
}

.mobile-header-section-900 {
	background-image: url("../img/mobile_headers/header_900.png");
	background-color: #4fa359;
	background-size: cover;
    background-repeat: no-repeat;
	height: 450px;
	width: 100%;
}

.mobile-header-section-600 {
	background-image: url("../img/mobile_headers/header_600.png");
	background-color: #4fa359;
	background-size: cover;
    background-repeat: no-repeat;
	height: 450px;
	width: 10%;
}

.ccraft-section {
	background-color: #4fa359;
}

.ccraft-section h1,
.ccraft-section h2,
.ccraft-section h3,
.ccraft-section h4 {
	color: #fffafa;
}

.ccraft-section p {
	color: #fffafa;
	text-align: justify;
}

.ccraft-section a {
	color: #2E3F30;
}

.ccraft-section a:hover {
	color: #fffafa;
}

.ccraft-section hr {
	color: #fffafa;
}

.mobile-header {
	background-size: cover;
    background-repeat: no-repeat;
	width: 100%;
	overflow: hidden;
	object-fit: cover
}

hr.star-ccraft {
    border-color: transparent;
}

hr.star-ccraft:after {
    color: #fffafa;
    background-color: transparent;
	border-color: #fffafa;
}

.first-section h1,
.first-section h2,
.first-section h3,
.first-section h4 {
	color: #fffafa;
}

.first-section p {
	color: #fffafa;
}

.first-section a,
.first-section a:focus,
.first-section a:active {
	color: #fffafa;
	border-color: transparent;
}

.first-section hr {
	color: #fffafa;
}

.link-section a {
	color: #fffafa;
	font-size: 35px;
}

.link-section a:hover {
	color: #303030;
}

.contact-link-section a {
	color: #303030;
	font-size: 35px;
}

.contact-link-section a:hover {
	color: #4fa359;
}

.second-section {
    background: #fffafa;
	color: #626262;
}

.second-section h1,
.second-section h2,
.second-section h3,
.second-section h4 {
	color: #626262;
}

.second-section p {
	color: #626262;
}



.second-section hr {
	color: #626262;
	border-color: #626262;
}

/* OS containers */

.responsive-os-container {
    position: relative;
    padding-bottom: 10%;
    height: 0;
}

.responsive-os-container,
.responsive-os-container iframe,�� 
.vresponsive-os-container object,� 
.vresponsive-os-container embed {
����position: absolute;
����top: 0;
����left: 0;
����width: 100%;
����height: 100%;
}

/* padded section */
.pad-section {
  padding: 40px 0;
}

.pad-section img {
  width: 100%;
  height: auto;
}

.started-hidden-sections {
	background: #fffafa;
	color: #626262;
}

.started-hidden-sections hr {
	border-color: #626262;
}
.game-image {
    width: 50%;
	height: auto;
}

@media (max-width: 768px) and (min-width: 500px) {
    .game-image {
        width: 50%;
    }
}


/* vertical-centered text */
.text-vcenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.text-vcenter h1 {
  font-size: 4.5em;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

.btn-stretch {
    transition: 0.5s all ease;
    width: 33%;
    text-decoration: none !important;
	margin: 20px 0px 20px 0px;
}

.btn-long {
    transition: 0.5s all ease;
    width: 100%;
    text-decoration: none !important;
	margin: 20px 0px 20px 0px;
}

.btn-mid {
	transition: 0.5s all ease;
    width: 48%;
    text-decoration: none !important;
	margin-bottom: 8px;
	background: #4fa359;
	font-size: 17px;
	padding: 15px 0;
}

.btn-mid:hover {
	background: #303030;
}	

#users .glyphicon {
	border: 2px solid #90ee90;
	border-radius: 50%;
	display: inline-block;
	font-size: 60px;
	height: 140px;
	line-height: 140px;
	text-align: center;
	vertical-align: middle;
	width: 140px;
	color: #90ee90;
}

#users .glyphicon:hover {
	color: #303030;
	border: 2px solid #303030;
}

#readMore .glyphicon {
	display: inline-block;
	font-size: 60px;
	height: 140px;
	line-height: 100px;
	text-align: center;
	vertical-align: middle;
	width: 140px;
	color: #000;
}

#readMore .glyphicon:hover {
	color: #fff;
}

#readMore h4 {
	margin-top: 60px;
}

.hover-link {
	font-size: 35px; 
	color: #fffafa;
}

.hover-link.hover {
	color: black;
}

.faq-question {
	font-weight: bold;
	font-size: 20px;
	color: #2e3f30;
}

.faq-answer {
	text-align: justify;
	padding-bottom: 25px;
}

.faq-answer a:hover {
	color: #2e3f30;
}

.hide-section {
	border-radius: 50%;
	border-color: transparent;
	display: inline-block;
	font-size: 25px;
	height: 65px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
	width: 65px;
	color: #fffafa;
	background: #626262;
	transition: 0.5s all ease;
}

.hide-section:hover {
	background: #303030;
}

.button-color {
	transition: 0.5s all ease;
	color: #fffafa;
	background: #626262;
	border: 1px solid #303030;
}

.button-color:hover {
	background: #303030;
}

.button-color:active,
.button-color:focus {
	color: #fffafa;
	background: #626262;
}

.button-borderless {
	border: 2px solid #fffafa;
}

.arrow-border {
	border: 2px solid #fffafa;
	border-radius: 60%;
	padding: 10px;
}

.arrow-border:hover {
	border: 2px solid #626262;
}

.arrow-border-dark {
	border: 2px solid #626262;
	border-radius: 60%;
	padding: 10px;
}

.arrow-border-dark:hover {
	border: 2px solid #4FA359;
}


/* NAVBAR */

@media(min-width:840px) {
    header .container {
        padding-top: 200px;
        padding-bottom: 100px;
    }

    header .intro-text .name {
        font-size: 4.75em;
    }

    header .intro-text .skills {
        font-size: 1.75em;
    }
}

.navbar-header img {
	width: auto;
	height: auto;
	max-height: 50px;
	padding-left: 20px;
	padding-top: 5px;
}

@media(min-width:840px) {
    .navbar-fixed-top {
        padding: 10px 0;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }

    .navbar-fixed-top .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .navbar-fixed-top.navbar-shrink {
        padding: 0px 0px;
    }

    .navbar-fixed-top.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }
}


/* FOOTER */

footer {
    color: #fff;
}

footer h3 {
    margin-bottom: 30px;
}

footer .footer-above {
    padding-top: 50px;
    background-color: #2e3f30;
}

footer .footer-col {
    margin-bottom: 50px;
}

footer .footer-below {
    padding: 25px 0;
    background-color: #2e3f30;
}

.footer-social-box {
			/*width: 220px;
			float: right;*/
		}

footer .footer-social-box p {
	font-family: "Raleway", "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 500;
	font-size: 11px;
	color: #7d8182;
	margin-top: 40px;
}

.navbar-social-container {
	padding-left: 15px;
	padding-right: 15px;
}

/*@media all and (min-width: 768px) {
  .navbar-social-container {
    max-width: 970px;
   }
}

@media all and (min-width: 1200px) {
  .navbar-social-container {
    max-width: 1170px;
  }
}*/

.navbar-social {
	/*width:135px;*/
	margin-top: 10px;

	font-size: 45px;
}

#connect-text" {
	font-size: 20px;
}

.navbar-social ul {
	list-style: none;
	padding: 0;
}

.navbar-social ul li {
	display: inline;
}

.navbar-social ul li a {
	color: #7bb163;
}

.navbar-social ul li a:hover {
	color: #999;
}

.about-us-social,
.about-us-social a,
.about-us-social a:focus {
	font-size: 45px;
	color: #4fa359;
}

.media {
	background: #4fa359;
}

.media-margin {
	margin-top: 20px;
}

.help-buttons a,
.help-buttons a:focus,
.help-buttons a:active {
	background: #2e3f30;
	border-color: #626262;
}

.help-buttons p {
	margin-top: -10px;
	margin-bottom: 30px;
}

.vcenter {
    margin: auto auto;
}

.about-us-social a:hover {
	color: #303030;
}

.game-kerbaledu-img {
	margin-bottom: 40px;
}

.active-event,
.active-event:focus,
.active-event:active {
	color: #2c3e50;
	background: #fffafa;
}

.btn-mid {
	transition: 0.5s all ease;
    width: 48%;
    text-decoration: none !important;
	margin-bottom: 8px;
	background: #4fa359;
	font-size: 17px;
	padding: 15px 0;
}

.store-button { 
	transition: 0.5s all ease;
	width: 100%; 
	margin-top: 20px; 
	background: #4fa359;
	padding: 10px 0;
	font-size: 17px;
}

.login-button { 
	transition: 0.5s all ease;
	width: 100%; 
	margin-top: 45px; 
	background: #4fa359;
	padding: 10px 0;
	font-size: 17px;
}

.instructions-button { 
	transition: 0.5s all ease;	
	width: 100%; 
	margin-top: 70px; 
	background: #4fa359;
	padding: 10px 0;
	font-size: 17px;
}

@media (max-width: 1200px) and (min-width: 992px) {
    .store-button { margin-top: 20px; }
    .login-button { margin-top: 45px; }
    .instructions-button { margin-top: 122px; }
}

@media (max-width: 992px) and (min-width: 768px) {
    .store-button { margin-top: 35px; font-size: 13px; }
    .login-button { margin-top: 35px; font-size: 13px; }
    .instructions-button { margin-top: 112px; font-size: 13px; }
	.btn-long { width: 130%; margin-left: -35px; }
	#ccedu-button img { width: 80%;}
}

@media (max-width: 768px) {
    .store-button { margin-top: 10px; }
    .login-button { margin-top: 10px; }
    .instructions-button { margin-top: 10px; }
	.pad-section img { width: 60%; }
	#topHeader-text { font-size: 40px; }
	#ccedu-button img { width: 70%;}
}

@media (max-width: 400px) {
	#topHeader-text { font-size: 26px; }
}

#ccedu-button img {
	float: left;
	margin: 0;
	padding: 0;
	max-width: 85%;
	height: auto;
	padding-top: 15px;
}

.split-section {
	margin-top: 50px;
}

.link-color,
.link-color:focus {
	color: #4fa359;
}

.link-color:hover {
	color: #2e3f30;
}


.featurette-contactForm {
	padding: 4em 0;
	font-family: "Raleway", "Helvetica Neue",Helvetica,Arial,sans-serif;
}

	.featurette-contactForm .container {
		padding-left: 40px;
		padding-right: 40px;
	}

	.featurette-contactForm label {
		text-transform: uppercase;
		font-weight: normal;
	}

	.featurette-contactForm input,
	.featurette-contactForm select,
	.featurette-contactForm textarea
	{
		border: 1px solid #7e8384;
	}

	.featurette-contactForm input[type='text'] {
		margin-bottom: 10px;
		width: 80%;
		height: 2em;
	}

	.featurette-contactForm select {
		width: 70%;
		height: 2em;
		background: #fff;
	   	border: 1px solid #7e8384;
	    padding: 0.2em;
	    vertical-align: bottom;
	    margin-bottom: 20px;
	}

	.featurette-contactForm textarea {
		width: 100%;
		height: 14em;
		margin-bottom: 20px;
	}

	.featurette-contactForm input[type='submit'] {
		border: none;
	    color: #fffafa;
	    background: #4fa359;
	    text-transform: uppercase;
	    font-weight: bold;
	    font-size: 1.25em;
	    padding: 0.75em 1.5em;
	    float: right;
	}
	
	.featurette-contactForm input[type='submit']:hover {
		background: #90ee90;
	}

	.featurette-contactForm .formErrors {
		margin-bottom: 4em;
		background: #f99;
		color: #955;
		padding: 1em;
		display: block;
	}

		.featurette-contactForm .formErrors ul {
			margin: 0;
		}

.contactHeading-blurb p {
	margin-bottom: 0;
}
	
	.contactHeading-blurb p.boldText {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.contactHeading-blurb a {
		text-decoration: none;
		color: #4f8c34;
	}

		.contactHeading-blurb a:hover {
			text-decoration: underline;
		}

	.contactHeading-blurb h3 {
		color: #4f8c34;
	}

.contactAddresses {
}

.addressUS {
}

.addressEU {
	padding-top: 20px;
}

input.isMeduUser {
	margin-bottom: 20px;
}

#contact-success,
#contact-success p {
	background: #4fa359;
	color: #fffafa;
}

#contact-fail,
#contact-fail p {
	background: #cc6666;
	color: #fffafa;
}

.borderless {
	border: none;
}


.iframe-full-screen .iframe-header {
  display: block;
  position: absolute;
  height: 50px;
  width: 100%;
}

.iframe-full-screen .iframe-content {
  position: absolute;
  top: 50px;
  bottom: 0;
  width: 100%;
  height: auto;
}

.iframe-full-screen .iframe-header a {
  padding: 0;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border: 3px solid #131C28;
}

.iframe-full-screen body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.iframe-full-screen .iframe.iframe-active{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  border: none;
}

.iframe-full-screen .iframe iframe {
  position: absolute;
  height: 100%;
  width: 100%;
  border: none;
}

.trailer-button-color {
	background: #FFF;
	opacity: 0.4;
	color: #000;
}

.trailer-button-color:hover {
	background: #000;
	opacity: 1;
	color: #FFF;
}