@charset "UTF-8";
/* CSS Document */

/* Phones */
@media only screen and (max-width: 768px) {
	
	.desktop-hide { 
		display: block; 
	}
	.mobile-hide {
		display: none;
	}
	.mobile-navbar {
		display:block;
		margin:0 auto;
		width: 100%;
		height: 54px;
		padding:15px;
		overflow: auto;
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.navbar-text {
		float: left;
	}
	.navbar-menu {
		float: right;
		cursor: pointer;
	}
	.topbar-web {
		height: 90px;
	}
	.topbar-web .text {
		text-align: left;
		padding-left: 10px;
		line-height: 1.5em;
		font-size: 1.1em;
	}
	.topbar-web .button {
		padding: 10px 15px;
		border-radius: 4px;
		margin-right: 10px;
		height: auto;
	}
	.website-template {
		margin-top: 85px;
	}
	.nav {
		overflow-x: hidden;
		height: 100%;
		position: fixed;
		left: 0;
  		transform: translate3d(-100%, 0, 0);
		visibility: hidden;
		z-index:999;
	}
	.nav.isvisible {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.bottombar {
		max-width: 180px;
		z-index: 888;
	}
	#main {
		margin-left: 0;
		margin-top: 50px;
	}
	.container-normal {
		padding: 40px 0 !important;
		width: 340px;
		max-width: 80%;
	}

	.container-widemode {
		padding: 40px 0 !important;
		max-width: 80%;
	}

	.container-normal h1:lang(de), .container-widemode h1:lang(de) {
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}

	.container-video-normal, .container-video-wide {
		padding: 20px 0;
		width: 100%;
		max-width: 340px;
	}
	.uk-width-1-2 {
		width: 100%;
	}
}

/* Grid line items for all screens smaller than 1024px */
@media only screen and (max-width : 1024px) {

	.pt-lineitem .uk-width-1-1 {
		grid-column: 1 / span 3;
	}

	.pt-lineitem .uk-width-1-2.uk-padding-x-small {
		grid-row: 1;
		grid-column: 2;
	}

	.pt-lineitem.uk-grid {
		display: grid;
		grid-template-columns: 10% 48% 42%;
		grid-template-rows: auto auto;
	}

	.pt-col40, .pt-col60 {
		grid-row: 1;
		grid-column: 2 / span 2;
	}

	.pt-col30 {
		grid-row: 2;
		grid-column: 1 / span 2;
	}

	.pt-col20 {
		grid-row: 2;
		grid-column: 3;
	}

	.lineitem-contenteditable-label, .lineitem-contenteditable-description {
		width: 100%;
	}

	.pt-col50 { width: 100%;}
	.pt-col10, .pt-col20, .pt-col30, .pt-col40, .pt-col60, .pt-col70, .pt-col80 { width: auto;}
	.pt-price {font-size: 1em;}

	.table-responsive {
		overflow: auto !important;
		overflow-y: hidden;
	}

	.pt:not(.uk-sortable) .pt-lineitem {
		display: grid;
		grid-template-columns: 58% 42%;
		grid-template-rows: auto auto;
	}

	.pt:not(.uk-sortable) .pt-lineitem .pt-col50,
	.pt:not(.uk-sortable) .pt-lineitem .pt-col70,
	.pt:not(.uk-sortable) .pt-lineitem .pt-col80 {
		grid-row: 1;
		grid-column: 1 / span 2;
	}

	.pt:not(.uk-sortable) .pt-lineitem .pt-col30 {
		grid-row: 2;
		grid-column: 1;
	}

	.pt:not(.uk-sortable) .pt-lineitem .pt-col20 {
		grid-row: 2;
		grid-column: 2;
	}

	.pt .totals {
		display: flex !important;
		flex-direction: column;
		align-items: end;
	}
    
    .totals.hidden {
        display: none !important;
    }

	.pt .totals .pt-col60,
	.pt.table-summary-wrapper .pt-lineitem .pt-col60 {
		display: none;
	}

	.pt .totals > div > div,
	.pt.table-summary-wrapper .pt-lineitem > div > div {
		line-height: 24px;
	}

	.pt .totals .pt-col20:not(.pt-lineitem-total),
	.pt.table-summary-wrapper .pt-lineitem .pt-col20:not(.pt-lineitem-total) {
		position: absolute;
		right: 9.5rem;
	}

	.pt.table-summary-wrapper .pt-lineitem {
		display: flex;
		flex-direction: column;
		align-items: end;
	}

	.pt-choice-button {
		word-break: normal;
		padding: 3px 9px;
		margin-left: -30px;
	}

}

/* iPads (portrait) & up to 1200px */
@media only screen and (min-width : 768px) and (max-width : 1200px) {
/* Styles */
	.container-normal, .container-widemode {
		padding-left: 40px;
		padding-right: 40px;
		max-width: 100%;
	}
}

/* Screen width up to 1500px */
@media only screen and (min-width : 1200px) and (max-width: 1500px) {
	.container-normal, .container-widemode {
		padding-left: 30px;
		padding-right: 30px;
		max-width: 100%;
	}
}

/* Screen width over 5000px to cater for iMac 
@media screen and (min-width: 2000px) {
	.addmenu-button {
		padding-top: 0px !important;
	}
	.addmenu-button .icon-plus {
		padding-top: 2px !important;
		padding-right: 1px !important;
	}
}
*/