/* 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 */
}

@media only screen 
and (max-width : 1000px), screen and (max-device-width : 1000px) {
	html {
		background: url(images/bg-tablet.jpg);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;
	}

	/* HEADER */
	.header-page-title
	{
		font-size: 28px;
	}

	.fan-left
	{
		display: none;
	}
}

@media only screen 
and (max-width : 850px), screen and (max-device-width : 850px) {
	/* HEADER */
	.header-page-title
	{
		font-size: 26px;
	}

	.fan-right
	{
		width: 75px;
	}
}

/* Left Nav Change */
@media only screen 
and (max-width : 790px), screen and (max-device-width : 790px) {
	.wrapper {
		grid-template-areas: 
		"navigation header"
		"account account"
		"content content"
		"footer footer";
	}

	/* NAVIGATION */
	.navigation
	{
		padding: 10px;
		background: url(images/fabric.png);
		background-color: var(--dark-pink);
		border-radius: 15px 0px 0px 0px;
	}

	.navigation ul {
		border-bottom: 2px var(--medium-purple) solid;
	}

	.navigation li {
		padding: 5px;
		font-size: 18px;
		border-top: 2px var(--medium-purple) solid;
	}

	.navigation-controls
	{
		display: none;
		position: absolute;
		height: min-content;
		height: -webkit-min-content;
		border-radius: 15px;
    	left: 93px;
    	top: 70px;
    	width: auto;
    	width: 50%;
	}

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

	/* HEADER */
	.header-page-title
	{
		font-size: 24px;
	}

	/* FOOTER */
	.footer
	{
		border-radius: 0px 0px 15px 15px;
	}
}

/* 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 : 620px), screen and (max-width : 620px) {
  	/* Styles */
  	.wrapper 
  	{
  		margin: 0px 8% 0px 8%;
  		grid-template-rows: min-content 120px 1fr auto;
		grid-template-rows: -webkit-min-content 120px 1fr auto; 
  	}

	.navigation-controls
	{
	    width: 50%;
	}

	.header-title
	{
		padding: 0px 10px 0px 10px;
	}

	.header-page-title
	{
		font-size: 22px;
	}

	.fan-right
	{
		width: 50px;
	}

	.account 
	{
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, min-content);
		grid-template-rows: repeat(2, -webkit-min-content);
	}

	.account-details
	{
		text-align: center;
		font-size: 26px;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.account-search-box
	{
		width: 100%;
		padding-top: 5px;
		padding-bottom: 0px;
	}

	.account-search-control
	{
		width: 100%;
	}
}

@media only screen 
and (max-device-width : 550px), screen and (max-width : 550px) {
	/* Styles */

	html {
		background: url(images/bg-phone.jpg);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;
	}

	.header
	{
		padding-top: 15px;
		padding-right: 15px;
	}

	.header h1
	{
		margin-top: 0px;
	}

	.header-title
	{
		vertical-align: top;
		padding-top: 5px;
		font-style: 35px;
	}
	.header-page-title
	{
		display: none;
	}

	.fan-right
	{
		position: relative;
		top: -5px;
	}

	.navigation-controls
	{
    	left: 63px;
    	width: 74%;
	}

	.account-details
	{
		font-size: 22px;
	}

	.account-search-box
	{
		padding-top: 0px;
	}
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (max-device-width : 480px), screen and (max-width : 480px) {
  	/* Styles */
  	.wrapper 
  	{
  		margin: 0px 6% 0px 6%;
  	}
  	.header
  	{
  		padding-top: 20px;
  		padding-right: 20px;
  		margin-bottom: -5px;
  	}

  	.header-title
  	{
  		padding: 0px 5px 0px 5px;
  	}

  	.fan-right
	{
		position: relative;
		top: -10px;
	}

}

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



@media only screen 
and (max-device-width : 445px), screen and (max-width : 445px) {
  	/* Styles */
  	.header-title
  	{
  		padding: 0px 0px 0px 0px;
  	}

  	.header h1
  	{
  		font-size: 30px;
  	}

  	.fan-right
  	{
  		display: none;
  	}

  	.account-details
	{
		font-size: 20px;
	}

}

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