/* ==========================================================================
   Media queries for responsive layout
   ========================================================================== */
@media only screen and (min-width: 1200px){
	.column-left{
		float:left;
		width: 250px;
		margin-left:-100%;
		padding: 10px;
		background-image: url("../img/leftside_butterfly.png");
		background-repeat: no-repeat;
		background-position: 0 100px;
	}

	.column-main{
		float:left;
		margin: 0 250px 0 250px;
		/*display: inline;*/
		padding: 0 10px;
		width: 620px;
	}

	.column-right{
		float:left;
		width: 250px;
		margin-left: -250px;
		padding: 10px;
		background-color: rgb(242,242,242);
	}
	.nav li{
		height: 38px;
		padding: 8px 16px 0 16px;
		font-size: 15px;
	}
	.navbar-brand{
		display:none;
	}
	.jumbotron{
		height: 377px; /*415px;*/
	}
	.jumbotron-left{
		position: absolute;
		float: left;
		width: 890px; /*calc(100% - 250px);*/
	}
	@-moz-document url-prefix() {
	    .jumbotron-left{
	    	/*margin-top: -80px;*/
		}
	}
	.jumbotron .animation {
		margin-left: 280px; /*250px;*/
		max-width: 590px; /*650px;*/
		/*width: 100%;*/
	}
	.jumbotron-right{
		float: left;
		margin-left: 890px;
		margin-top: 140px;
		font-size: 24px;
	}
	@-moz-document url-prefix() {
		.jumbotron-right{
			margin-top: 60px;
		}
	}
	.jumbotron .register-button{
		height: 52px;
		width: 235px;
		font-size: 22px;
	}
	.jumbotron .about-crossings{
		margin-top: 30px;
		font-size: 20px;
	}
	.chair{
		margin: 0 0 0 40px;
	}
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
	.column-left{
		float:left;
		width: 250px;
		margin-left:-100%;
		padding: 10px;
		background-image: url("../img/leftside_butterfly.png");
		background-repeat: no-repeat;
		background-position: 0 100px;
	}

	.column-main{
		float:left;
		margin: 0 0 0 250px; /* 0 250px 0 250px */
		/*display: inline;*/
		padding: 0 10px;
		width: 670px; /*420px;*/
	}

	.column-right{
		float: left;
		width: 250px;
		margin-left: -100%; /*-250px;*/
		margin-top: 500px;
		padding: 10px;
		background-color: rgb(242,242,242);
	}
	.nav li{
		height: 38px;
		padding: 8px 6px 0 6px;
		font-size: 14px;
	}
	.navbar-brand{
		display:none;
	}
	.jumbotron{
		height: 319px; /*415px;*/
	}
	.jumbotron-left{
		position: absolute;
		float: left;
		width: 690px; /*calc(100% - 250px);*/
	}
	@-moz-document url-prefix() {
	    .jumbotron-left{
	    	/*margin-top: -80px;*/
		}
	}
	.jumbotron .animation {
		margin-left: 75px; /* 0; */
		max-width: 500px; /*650px;*/
		/*width: 100%;*/
		/*width: calc(100% - 500px);*/
	}
	.jumbotron-right{
		float: left;
		margin-left: 690px;
		margin-top: 140px;
		font-size: 24px;
	}
	@-moz-document url-prefix() {
		.jumbotron-right{
			margin-top: 60px;
		}
	}
	.jumbotron .register-button{
		height: 52px;
		width: 235px;
		font-size: 22px;
	}
	.jumbotron .about-crossings{
		margin-top: 30px;
		font-size: 20px;
	}
	.chair{
		margin: 0 0 10px 40px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px){
	.column-left{
		float:left;
		width: 50%;
		max-width: 250px;
		margin-left: 0;
		padding: 10px;
		background-image: url("../img/leftside_butterfly.png");
		background-repeat: no-repeat;
		background-position: 0 100px;
	}

	.column-main{
		/*float:left;*/
		/*margin: 0 250px 0 250px;*/
		/*display: inline;*/
		padding: 0 10px;
		margin-bottom: 30px;
	}

	.column-right{
		float:right;
		width: 50%;
		max-width: 250px;
		margin-left: 0;
		padding: 10px;
		background-color: rgb(242,242,242);
	}
	.navbar-toggle{
		display: block;
	}
	.container>.navbar-collapse.collapse{
		display: none !important;
	}
	.navbar-nav {
		float: none;
	}
	.navbar-header {
		float: none;
	}
	.navbar-nav>li{
		float: none;
	}
	.nav li{
		height: 38px;
		padding: 8px 6px 0 6px;
		font-size: 14px;
	}
	.navbar-brand{
		display:block;
	}
	.jumbotron{
		height: 260px;
	}
	.jumbotron-left{
		position: absolute;
		float: left;
		width: 470px; /*calc(100% - 250px);*/
		max-width: 400px;
	}
	.jumbotron .animation {
		margin-left: 0;
		width: 100%;
	}
	.jumbotron-right{
		float: right;
		margin-top: 70px;
		font-size: 22px;
	}
/*	@-moz-document url-prefix() {
		.jumbotron-right{
			margin-top: 0;
		}
	}*/
	.jumbotron .register-button{
		/*height: 52px;
		width: 235px;*/
		padding: 5px 30px;
		font-size: 20px;
	}
	.jumbotron .about-crossings{
		margin-top: 30px;
		font-size: 18px;
	}
	.chair{
		margin: 0 0 10px 40px;
	}
}
@media only screen and (max-width: 767px){ /* (min-width: 321px) and */
	.column-left{
		float:left;
		width: 50%;
		min-width: 250px;
		max-width: 250px;
		margin-left: 0;
		margin-bottom: 30px;
		margin-right: 50px;
		padding: 10px;
		background-image: url("../img/leftside_butterfly.png");
		background-repeat: no-repeat;
		background-position: 0 100px;
	}

	.column-main{
		/*float:left;*/
		/*margin: 0 250px 0 250px;*/
		/*display: inline;*/
		padding: 0 10px;
		margin-bottom: 30px;
	}

	.column-right{
		float: left;
		width: 50%;
		min-width: 250px;
		max-width: 250px;
		margin-left: 0;
		padding: 10px;
		background-color: rgb(242,242,242);
	}
	.navbar-toggle{
		display: block;
	}
	.container>.navbar-collapse.collapse{
		display: none !important;
	}
	.nav li{
		/*height: 38px;*/
		padding: 8px 6px 0 6px;
		font-size: 14px;
		margin-left: 10px;
	}
	.navbar-brand{
		display:block;
	}
	.jumbotron{
		height: 100%;
	}
	.jumbotron-left{
		float: none;
		width: 70%; /*calc(100% - 250px);*/
		margin-left: 15%;
		margin-right: 15%;
		/*max-width: 400px;*/
	}
	.jumbotron .animation {
		margin-left: 0;
		width: 100%;
		min-width: 193px; /* 70% width for 320px layout */
		max-width: 400px;
	}
	.jumbotron-right{
		/*margin-top: 70px;	*/
		float: none;
		/*margin-left: %;*/
		font-size: 18px;
	}
	.jumbotron .register-button{
		/*height: 52px;
		width: 235px;*/
		padding: 5px 30px;
		font-size: 16px;
	}
	.jumbotron .about-crossings{
		margin-top: 30px;
		font-size: 14px;
	}
	.chair{
		margin: 0 0 10px 40px;
	}
}



/* Laptop/Tablet (1024px) */
/*@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
}
*/
/* Tablet Portrait (768px) */
/*@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
}*/

/* Phone Landscape (480px) */
/*@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
}*/

/* Phone Portrait (320px) */
/*@media only screen and (max-width: 320px) {
}*/