/* Large screens ----------- */
@media only screen 
and (min-width : 1824px), screen and (max-device-width : 1824px) {
  /* Styles */
}

/* Small Screens ----------- */
@media only screen 
and (max-width : 1224px), screen and (max-device-width : 1224px) {
  /* Styles */
}

/* Search and Profile Change */
@media only screen 
and (max-width : 950px), screen and (max-device-width : 950px) {
	.wrapper {
		grid-template-columns: auto 1fr auto auto;
		grid-template-areas:
		"navigation header usersearch profile"
		"navigation title title title"
		"navigation warning warning warning"
		"navigation content content content"
		"navigation footer footer footer";
	}

	.main-header {
		padding-right: 0px;
		padding-left: 115px;
	}
	.sub-header {
		padding-right: 0px;
		padding-left: 115px;
	}

	.content {
		padding-left: 40px;
		padding-right: 40px;
	}

	.usersearch {
		display: none;
	}

	#openSearch {
		grid-area: usersearch;
	}

	.usersearch-controls
	{
		position: absolute;
	    right: 62px;
	    top: 62px;
	    width: 60%;
	}

	.search-icon
	{
		display: inline-block;
	}

	.profile {
		display: none;
	}

	.profile-controls
	{	
		position: absolute;
	    right: 7px;
	    top: 62px;
	    width: 60%;
	}

	.profile-icon
	{
		display: inline-block;
	}

	#openProfile {
		grid-area: profile;
	}

	.navigation
	{
		display: inline-block;;
	}
}

/* Left Nav Change */
@media only screen 
and (max-width : 768px), screen and (max-device-width : 768px) {
	.wrapper {
		grid-template-columns: auto 1fr auto auto;
		grid-template-areas:
		"navigation header usersearch profile"
		"title title title title"
		"warning warning warning warning"
		"content content content content"
		"footer footer footer footer";
	}

	.main-header {
		padding-right: 0px;
		padding-left: 70px;
	}

	.sub-header {
		padding-right: 0px;
		padding-left: 70px;
	}

	.navigation {
		display: none;
	}

	.navigation-controls
	{
		position: absolute;
		height: min-content;
		height: -webkit-min-content;
	    left: 7px;
	    top: 62px;
	    width: 30%;
	}

	.nav-icon
	{
		display: inline-block;
	}

	#openNav {
		grid-area: navigation;
	}

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

/* Tablet (portrait and landscape) ----------- */
@media only screen 
and (max-width : 1024px), screen and (max-device-width : 1024px) {
  /* Styles */
}

/* Tablet (portrait) ----------- */
@media only screen 
and (min-width : 720px) 
and (max-width : 768px) 
and (orientation : portrait), screen and (min-device-width : 720px) 
and (max-device-width : 768px) 
and (orientation : portrait) {
  	/* Styles */
  	
}

/* Tablet (landscape) ----------- */
@media only screen  
and (max-width : 1024px) 
and (orientation : landscape), screen and (max-device-width : 1024px) {
  	/* Styles */
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (max-device-width : 480px), screen and (max-width : 480px) {
  	/* Styles */
  	.wrapper {
		grid-template-columns: auto 1fr auto auto;
		grid-template-rows: min-content min-content min-content 1fr auto;
	grid-template-rows: -webkit-min-content -webkit-min-content -webkit-min-content 1fr auto;
		grid-template-areas:
		"navigation header usersearch profile"
		"title title title title"
		"warning warning warning warning"
		"content content content content"
		"footer footer footer footer";
	}

	.header {
		margin: 3px -3px;
	}
	.main-header {
		padding-left: 30px;
		padding-right: 0px;
		background-color: #e4f2f0;
		width: 100%;
		height: 100%;
		padding: 0px;
		padding-left: 60px;
		margin: 0px;
	}

	.sub-header {
		display: none;
	}

	.content {
		padding-left: 20px;
		padding-right: 20px;
	}

	.navigation-controls
	{
	    width: 50%;
	}

	.profile-controls
	{
	    width: 80%;
	}

	.login-buttons
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas: 
		"login"
		"register"
		"forgot";
	}

	/* Global Event CSS */

	.box {
		margin: 0 auto;
		width: 250px;
		height: 150px;
		position: relative;
		border-radius: 5px;
		overflow: hidden;
		background-image: url('event/leaf_bg.png');
		background-size: cover;
		z-index: 0;
	}

	.box a {
		display: block;
		width: 50px;
		height: 50px;
		position: absolute;
		transform: rotate(45deg);
		z-index: 1;
		-webkit-animation: moveX 1.5s linear 0s infinite alternate, moveY 2.4s linear 0s infinite alternate, spin 5s linear 0s infinite;
		-moz-animation: moveX 1.5s linear 0s infinite alternate, moveY 2.4s linear 0s infinite alternate, spin 5s linear 0s infinite;
		-o-animation: moveX 1.5s linear 0s infinite alternate, moveY 2.4s linear 0s infinite alternate, spin 5s linear 0s infinite;
		animation: moveX 1.5s linear 0s infinite alternate, moveY 2.4s linear 0s infinite alternate, spin 5s linear 0s infinite;
	}

	.box img {
		position: absolute;
		z-index: 2;
	}

	#blocker {
		max-height: 150px;
		left: 100px;
	}

	@-webkit-keyframes moveX {
		from { left: 0; } to { left: 200px; }
	}
	@-moz-keyframes moveX {
		from { left: 0; } to { left: 200px; }
	}
	@-o-keyframes moveX {
		from { left: 0; } to { left: 200px; }
	}
	@keyframes moveX {
		from { left: 0; } to { left: 200px; }
	}
	@-webkit-keyframes moveY {
		from { top: 0; } to { top: 100px; }
	}
	@-moz-keyframes moveY {
		from { top: 0; } to { top: 100px; }
	}
	@-o-keyframes moveY {
		from { top: 0; } to { top: 100px; }
	}
	@keyframes moveY {
		from { top: 0; } to { top: 100px; }
	}

	@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
	@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
	@-o-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
	@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


}

/* Smartphones (landscape) ----------- */
@media only screen 
and (max-width : 480px) 
and (orientation : landscape), screen and (max-device-width : 480px) and (orientation : landscape) {
  	/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px), screen and (max-device-width : 320px) {
  	/* Styles */
}