/*
*** media.css

creating different views for different screen sizes
*/

/* Using Bootstrap Definitions */

/* Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap*/


@media (max-width: 575px){

	.left-panel-title{
		display: none;
	}

	#left-panel{
		display: block;
		position: absolute;
		transition: left 0.3s linear;
		z-index: 1;
	}

	#main-panel {
		position: relative;
		display: inline-block;
		left: 0px;
		padding-left: 35px;
		width: 100%;
		bottom: 50px;
	}

	table{
		font-size: 15px;
	}

	/*	Create button only on mobile*/
	#mobile-button{
		display: block;
		background: var(--theme-color);
	}

	#mobile-header{
		display: block;
		padding-top: 42px;
	}

	#left-panel{
		display: block;
		position: absolute;
		left: -230px;
		transition: left 0.3s linear;
		z-index: 1;
	}

	#left-panel.visible{
		left: 0px;
		transition: left 0.3s linear;
	}

	#left-panel-btn{
		display: block;
		background: var(--theme-color);
		vertical-align: top;
		width: 25px;
		cursor: pointer;
		margin: 10px 20px;
		position: absolute;
		/*		top: 0px;*/
		right: -48px;
		padding: 6px;
		border-radius: 9px;
	}
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { }


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { }


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	/* default css written in this size */
}


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1400px) { 
	/* aka the only reason i'm writing this */

	h1{
		font-size: 45px;
	}

	h2{
		font-size: 34px;
	}
	h3,p,button{
		font-size: 27px;
	}

	p{
		font-size: 50px;
	}

	#left-panel {
		width: 15%;
		height:100%;
		padding-left: 30px;
		padding-right: 30px;
	}

	#main-panel {
		left:	18.5%;
		padding-left: 40px;
	}

	#white-panel {
		left: 990px;
		padding-left: 20px;
		height: 100%;
		width: 100%;
		top: 0px;
	}


	button{
		margin-top: 20px;
	}

	title{
		font-size: .5em;	
	}
	/*  - --------------------------------- */
}