/* Big tablet to 1200px (wdths smaller than the 1140px row) */
@media only screen and (max-width: 1140px) {

	

	.floater-text-box {
	    width: 100%;
	    padding: 0 2%;
	}

	.row { padding: 0 2%; }
    
    .sticky .mobile-nav-icon ion-icon { color: #555; }

    .formPopup {
    	width: 90%;
	}
	
	.premiumtext-box {
		width: 500px;
	}
    
}

/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px){
	body:before {
		background-attachment: scroll;
	}

	body { 
		font-size: 18px;
	}
	section { padding: 60px 0; }

	

	.row,
	.floater-text-box {
		width: 100%;
		padding: 0 2%;
	}

	.floater-text-box {
		width: 85%;
	}
    
    .floater-text-box h1,
    .floater-text-box .btn-green {
        margin: 20px 0 0 20%;
    }

	.long-copy {
	    width: 100%;
		margin-left: 10%;
		padding: 20px;
	}
    
    .logo {
    	height: 100px;
    	width: auto;
	}
    
    .welcome-text {
		position: inherit;
	}
	
	.default-box {
		width: 90%;
		margin-left: 0px;
		/* top: 270px; */
		left: 55%;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
	}

	.default-box input[type=text],
	.default-box input[type=username],
	.default-box input[type=email],
	.default-box input[type=password],
	.default-box input[type=date],
	.default-box input[type=tel],
	.default-box input[type=file],
	.default-box input[type=datetime-local],
	.default-box input[type=select],
	.default-box input[type=number],
	.default-box textarea {

		width: 100%;
	}


	.main-nav { 
		display: none; 
		position: absolute;
		background-color: rgba(255, 255, 255, 0.97);
		border-radius: 5px;
		width: 60%;
		z-index: 9999;
		margin: 10px 0 0 0;
		left: 50%;
		transform: translate(-50%);
	}

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

	.main-nav li {
		display: block;
	}

	.main-nav li a:link,
	.main-nav li a:visited {
		display: block;
		border: 0;
		padding: 10px 0;
		font-size: 100%;
		color: black;
	}

	.main-nav li a:hover,
    .main-nav li a:active {
        color: black;
	}
    
 
     
    .booking-box {
        width: 55%;
    }
    .booking-box h1 {
        margin-bottom: 20px;
    }

    .myway-box {
    	width: 90%;
    }
    .myway-box h1 {
        margin-bottom: 20px;
    }
    .myway-box .btn,
    .myway-box .input,
    .myway-box a {
    	margin: 10px;
    }

    .formPopup {
    	width: 90%;
    }
    
    s1 {
		text-align: center;
		font-size: 90%;
	}
	
    .booking-box input[type=checkbox] {
        float: left;
	}
	
	.premiumtext-box {
		width: inherit;
	}

	/* =============== SHOP =============== */

	.shop input[type=button],
	.shop input[type=submit] {
		font-size: 100%;
		color: #fff;
		text-shadow: 2px 2px 5px black;
	}

	.shop textarea {
		height: 200px;
	}

	.shop-table, 
	.shop-table thead, 
	.shop-table tbody, 
	.shop-table th, 
	.shop-table td, 
	.shop-table tr { 
		display: block; 
		font-weight: 600;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.shop-table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.shop-table td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 40%; 
		padding-top: 10px;
		padding-right: auto;
		width: auto;
	}


	.shop-table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}

	.shop-table td:nth-of-type(1):before { content: "Dátum"; }
	.shop-table td:nth-of-type(2):before { content: "Megrendelő"; }
	.shop-table td:nth-of-type(3):before { content: "Termék"; }
	.shop-table td:nth-of-type(4):before { content: "Mennyiség"; }
	.shop-table td:nth-of-type(5):before { content: "Ár"; }
	.shop-table td:nth-of-type(6):before { content: "Kontakt"; }

	.shop-table td:nth-of-type(7) {
		border-bottom: 1px solid #eee; 
	}

	.completed-orders td:nth-of-type(1):before { content: "Leadva"; }
	.completed-orders td:nth-of-type(6):before { content: "Teljesítve"; }

	.user-view td:nth-of-type(1):before { content: ""; }
	.user-view td:nth-of-type(2):before { content: "Termék"; }
	.user-view td:nth-of-type(3):before { content: "Válaszd ki:"; }
	.user-view td:nth-of-type(4):before { content: "Mennyiség" }
	.user-view td:nth-of-type(4) { 
		border-bottom: 2px solid #fff; 
	}

	.order-view td:nth-of-type(1):before { content: "Dátum"; }
	.order-view td:nth-of-type(2):before { content: "Termék"; }
	.order-view td:nth-of-type(3):before { content: "Mennyiség"; }
	.order-view td:nth-of-type(4):before { content: "Ár" }
	.order-view td:nth-of-type(4) { 
		border-bottom: 2px solid #fff; 
	}

	.shop-checkout td:nth-of-type(1):before { content: "Termék"; }
	.shop-checkout td:nth-of-type(2):before { content: "Egységár"; }
	.shop-checkout td:nth-of-type(3):before { content: "Mennyiség"; }
	.shop-checkout td:nth-of-type(4):before { content: "Összesen"; }
	.shop-checkout td:nth-of-type(4) { 
		border-bottom: 2px solid #fff; 
	}


	.pwa-banner {
		display:block;
	}
	

}


/* Small phones to tablets: from 481 to 767px */
@media only screen and (max-width: 768px) {
	body:before {
		background-attachment: scroll;
	}

	body { 
		font-size: 18px; 
	}
	section { padding: 30px 0px; }

	.add-to-calendar {
		left: 0%;
	}

	.logo {
    	height: 100px;
    	width: auto;
    	float: left;
    	margin-top: 20px;
	}

	.row {
		padding: 0 3%;
	}

	.floater-text-box {
		padding: 0 8%;
	}
    
    .floater-text-box h1,
    .floater-text-box .btn-green {
        margin: 20px 0 0 2%;
	}
	
	.default-box {
		left: 50%;
	}
    
    .profile-form {
        margin-left: 10%;
    }

	.welcome-text {
		width: 150px;
		display: none;
	}

	.profile-pic-container {
		position: relative;
		text-align: center;
		width: 150px;
		display: block;
		left: 50%;
		transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
	}

	.profile-pic {
		position: unset;
		margin-bottom: 20px;
	}


	/* make the columns stack on each other */
	.col { width: 100%; }

	.main-nav { display: none; }
	.mobile-nav-icon { display: inline-block; }
 
	/*
	.main-nav {
		float: left;
		margin-top: 35px;
		margin-left: 25px;
	}
	*/

	.main-nav li {
		display: block;
	}

	.main-nav li a:link,
	.main-nav li a:visited {
		display: block;
		border: 0;
		padding: 10px 0;
		font-size: 100%
	}


	.sticky .main-nav { 
        margin-top: 10px; 
    }

	.sticky .main-nav li a:link,
	.sticky .main-nav li a:visited {
	    padding: 10px 0px;
	}
	.sticky .mobile-nav-icon { margin-top: 0px; }
	.sticky .mobile-nav-icon ion-icon { color: #555; }



	h1 { font-size: 180%; }
	h2 { font-size: 150%; }

	.long-copy {
	    width: 100%;
	    margin-left: 0%;
	}

	.footer-nav,
	.social-links {
		float: none;
		text-align: center;
	}

	.social-links li a ion-icon {
    	font-size: 120%;
	}

	.footer-nav {
		margin-top: 0px;
		margin-bottom: 10px;
	}

	.footer-nav li {
    	margin-right: 10px;
	}

	.floater-quote {
		padding-right: 10px;
	}
    
    .booking-box {
        width: 80%;
        margin-top: 80px;
    }
    .booking-box h1 {
        margin-bottom: 20px;
    }

    .myway-box {
    	width: 90%;
    	margin-top: 80px;
    }
    .myway-box h1 {
        margin-bottom: 20px;
    }
    .myway-box .btn,
    .myway-box .input,
    .myway-box a {
    	margin: 10px;
    }

    .formPopup {
    	width: 90%;
    }
    
    s1 {
        text-align: center;
    }
    .booking-box input[type=checkbox] {
        float: left;
    }

    .rank-box {
    	display: none;
    }
    .mobile-rank-box {
    	display: inline;
	}

	input[type=text],
	input[type=username],
	input[type=email],
	input[type=password],
	input[type=date],
	input[type=tel],
	input[type=file],
	input[type=datetime-local],
	input[type=select],
	input[type=number],
	textarea {
		margin-bottom: 20px;
	}

	.default-box-selector {
		margin-bottom: 20px;
	}

	input[type=button] {
		margin: 10px 0px 10px 0px;
	}
}


/* Only narrow screens (phones) */
@media only screen and (max-width: 540px) {
	body:before {
		background-attachment: scroll;
	}

	.default-box input[type=text],
	.default-box input[type=username],
	.default-box input[type=email],
	.default-box input[type=password],
	.default-box input[type=date],
	.default-box input[type=tel],
	.default-box input[type=file],
	.default-box input[type=datetime-local],
	.default-box input[type=select],
	.default-box input[type=number],
	.default-box textarea {

		width: 100%;
	}

	.default-box {
		margin-left: 0px;
		/* top: 270px; */
		width: 100%;
		left: 50%;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
	}
}

/* Small phones */
@media only screen and (max-width: 346px) {
	body:before {
		background-attachment: scroll;
	}


}



@media only screen and (max-height: 415px) {
	.floater-text-box {
		top: -5%;
	}

	.floater-quote {
		top: -25%;
	}
}


@media all and (display-mode: fullscreen) {
	.pwa-banner {
		display: none;
	}
  }