@fs:16px;
@blue: #164363;
@orange: #F25212;


/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../font/OpenSans-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../font/OpenSans-Bold.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
	font-family:'Open Sans', sans-serif;
	font-size:@fs;
	
	background-image:url(../bg.png);
	
	> .black {
		position:fixed;
		z-index:2000;
		
		top:0;
		right:0;
		bottom:0;
		left:0;
		
		background-color: rgba(0,0,0,0.5);
		
		opacity:0;
		transition:opacity 0.15s linear;
		
		> iframe {
			position:relative;
			display:block;
			
			top:50%;
			margin: -253px auto 0 auto;
			
			box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.20);
		}
	}
	
	> .menubar {
		position:fixed;
		z-index:1000;
		top:0;
		left:0;
		right:0;
		
		height:55px;
		
		overflow:hidden;
		
		background-color:@blue;
		background-image:linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 95%, rgba(0, 0, 0, 0) 96%, rgba(0, 0, 0, 0.75) 100%);
		color:#FFF;
		
		> .container {
			height:100%;
		}
		
		.logo-logo, .logo-tel {
			position:absolute;
			transition:all 0.3s;
			left:0;
			width:240px;
			height:55px;
		}
		
		.logo-logo .title {
			position:absolute;
			left:50px;
			top:13px;
			width:175px;
			height:35px;
			background-image:url(../gfx/qp_long.png);
		}
		
		.logo-tel {
			top:60px;
			
			.tel {
				position:relative;
				display:inline-block;
				vertical-align:middle;
				left:50px;
				
				font-size:20px;
			}
		}
		
		.logo {
			position:absolute;
			left:5px;
			top:10px;
			width:35px;
			height:35px;
			background-image:url(../gfx/nut.png);
		}
		
		.menu {
			position:relative;
			display:none;
			float:right;
			
			height:100%;
			
			> ul {
				list-style:none;
				
				> li {
					position:relative;
					display:inline-block;
					
					padding-top:15px;
					
					&.act {
						color:@orange;
					}
				}
			}
		}
		
		.mobilemenuicon {
			position:absolute;
			top:10px;
			right:14px;
			
			width:32px;
			height:32px;
			
			background-image:url(../gfx/sortgrab.png);
			background-repeat:no-repeat;
			background-position:center;
			
			cursor:pointer;
		}
	}
		
	.mobilemenu {
		position:fixed;
		top:-1000px;
		
		width:100%;
		
		background-color:#164363;
		background-image:linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 95%, rgba(0, 0, 0, 0) 96%, rgba(0, 0, 0, 0.75) 100%);
		color:#FFF;
		
		z-index:100;
		
		transition:all 0.5s;
		
		ul {
			list-style:none;
			
			li {
				position:relative;
				display:block;
				margin-bottom:0;
				margin-top:0;
				
				a {
					position:relative;
					display:block;
					padding-top:10px;
					padding-bottom:10px;
				}
			}
		}
	}
	
	.content {
		position:relative;
		display:block;
		margin-top:55px;
		
		min-height:200px;
		
		.frame {
			padding-top:60px;
			margin-top:-60px;
		}
		
		.banner {
			color:#FFF;
			
			.image {
				.img {
					position:relative;
					display:block;
					width:100%;
					height:600px;
					
					background-position:center;
					background-repeat:no-repeat;
					background-size:cover;
				}
			}
			
			.banner_content {
				position:absolute;
				display:table;
				top:0;
				
				width:100%;
				height:600px;
				margin:0 auto;
				
				text-align:center;
				
				.banner_content_middle {
					display:table-cell;
					padding:15px;
					vertical-align:middle;
					
					h2 {
						font-size:45px;
						font-weight:900;
					}
					
					p {
						margin-top:20px;
						font-size:18px;
					}
					
					span.play {
						position:relative;
						display:block;
						margin: 25px auto 0 auto;
						
						height:84px;
						width:84px;
						
						background-image:url(/fileadmin/templates/gfx/play.png);
						
						cursor:pointer;
						
						&:hover {
							background-image:url(/fileadmin/templates/gfx/play_hover.png);
						}
					}
				}
			}
		}
	}
	
	.footer {
		position:relative;
		display:block;
		top:100px;
		
		min-height:200px;
		
		background-image:url(../bg_alt.png);
		
		.container {
			display:flex;
			flex-direction:column;
			align-items:center;
		}
		
		.footer-box {
			position:relative;
			display:block;
			
			margin:40px 0;
			
			height:100%;
			width:150px;
			
			vertical-align:top;
			
			.footer-title {
				display:block;
				
				margin-bottom:10px;
				
				text-transform:uppercase;
				font-size:15px;
				font-weight:900;
				letter-spacing:1px;
			}
			
			ul {
				list-style:none;
				
				li {
					margin-left:0;
				}
			}
		}
	}
	
	.container {
		position:relative;
		display:block;
		
		margin-right:auto;
		margin-left:auto;
		padding-left:15px;
		padding-right:15px;
	}
	
	.tax {
		position:relative;
		display:block;
		
		margin-top:-20px;
		
		text-align:right;
		font-size:12px;
	}
	
	.packages {
		position:relative;
		display:block;
		
		margin:10px auto 0 auto;
		width:350px;
		height:20px;
		
		font-size:0px;
		
		> .package {
			position:relative;
			display:inline-block;
			
			width:calc(~"50% - 2px");
			
			text-align:center;
			
			cursor:pointer;
			background-color:#FFF;
			
			font-size:@fs;
			
			&:first-child {
				border-top:1px solid @blue;
				border-bottom:1px solid @blue;
				border-left:1px solid @blue;
				
				border-top-left-radius:5px;
				border-bottom-left-radius:5px;
			}
			
			&:not(:first-child):not(:last-child) {
				border-top:1px solid @blue;
				border-bottom:1px solid @blue;
			}
			
			&:last-child {
				border-top:1px solid @blue;
				border-right:1px solid @blue;
				border-bottom:1px solid @blue;
				
				border-top-right-radius:5px;
				border-bottom-right-radius:5px;
			}
			
			&:not(:last-child) {
				border-right:1px solid @blue;
			}
			
			&:hover {
				background-color:@blue;
				color:#FFF;
			}
			
			&.selected {
				background-color:@blue;
				color:@orange;
			}
		}
	}
	
	.packagedescription {
		position:relative;
		display:block;
		
		margin:0 auto;
		margin-top:30px;
		width:350px;
		height:50px;
		
		text-align:center;
		
		font-weight:bold;
	}
	
	.boxes {
		position:relative;
		display:block;
		
		margin-top:30px;
		width:100%;
		
		text-align:center;
		//background-color:#F00;
		
		> .box {
			position:relative;
			display:inline-block;
			
			margin-left:5px;
			margin-right:5px;
			margin-bottom:10px;
			
			width:250px;
			height:350px;
						
			text-align:left;
			
			font-size:0px;
			
			vertical-align:top;
			
			> .size {				
				position:absolute;
				display:inline-block;
				
				left:0px;
				top:0px;
				
				width:100%;
				height:65px;
				
				border-top-left-radius:8px;
				border-top-right-radius:8px;
				background-color:@blue;
				background-image:linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 95%, rgba(0, 0, 0, 0) 96%, rgba(0, 0, 0, 0.75) 100%);

				color:#FFF;
				
				> .letter,
				> .max {
					position:absolute;
	
					left:0px;
					
					width:100%;
					
					text-align:center;
				}
				
				> .letter {
					top:0px;
					
					font-size:2 * @fs;
					font-weight:bold;
				}
				
				> .max {
					bottom:3px;
					font-size:@fs;
				}
			}
			
			> .inner {
				position:absolute;
				
				left:0px;
				top:65px;
				
				width:calc(~"100% - 2px");
				height:calc(~"100% - 65px");
				
				border-left:1px solid @blue;
				border-right:1px solid @blue;
				border-bottom:1px solid @blue;
							
				border-bottom-left-radius:8px;
				border-bottom-right-radius:8px;

				background-color:#FAFAFA;				
			
				> .slogan {
					position:relative;
					display:inline-block;
					
					left:0px;
					width:100%;
					height:60px;
					
					text-align:center;
					
					border-bottom: 1px solid #CCC;
					
					> .slogan {
						position:relative;
						display:inline-block;
						
						margin-left:10px;
						
						width:calc(100% - 20px);
						
						font-size:0.75 * @fs;
						
						vertical-align:middle;	
					}
				}
						
				> .price {
					position:relative;
					display:inline-block;
					
					margin-top:25px;
					
					width:100%;
					height:50px;
				
					> .from {
						position:relative;
						display:inline-block;
						
						top:2px;
						
						width:20px;
						
						font-size:0.75 * @fs;
						text-align:right;
						
						vertical-align:middle;
					}

					> .rent {
						position:relative;
						display:inline-block;
						
						margin-left:0px;
						width:130px;
						
						font-size:3 * @fs;
						font-weight:bold;
						
						color:@blue;
						text-align:center;
						vertical-align:middle;
					}

					> .per {
						position:relative;
						display:inline-block;
						
						margin-left:10px;
						width:calc(100% - 20px - 130px - 10px - 10px);
						
						font-size:0.75 * @fs;

						vertical-align:middle;
					}
					
					> .each {
						position:relative;
						display:block;
						
						left:0px;
						width:100%;
						
						font-size:0.75 * @fs;
						
						text-align:center;
						opacity:0.75;
					}
				}
			
				> .buy {
					position:absolute;
					display:inline-block;
					
					bottom:5px;
					left:10px;
					
					width:calc(100% - 20px);
					
					font-size:0.75 * @fs;
					
					vertical-align:middle;
					text-align:center;
				}
			}

			&.selected {				
				> .size {
					background-color:@orange;
				}
				
				> .inner {
					border-color:@orange;
					
					> .price > .rent {
						color:@orange;
					}
				}
			}
		}
		
		.line {
			position:relative;
			display:inline-block;
			
			margin-left:10px;
			margin-right:10px;

			width:2px;
			height:100%;

			background-color:@blue;
		}
	}
	
	.calculator {
		position:relative;
		display:block;
		
		margin:0 auto 80px auto;
		width:90%;
		height:190px;
		
		> .header {
			position:absolute;
			
			left:0px;
						
			width:100%;
			
			text-align:center;
			font-size:2 * @fs;
			
			color:@blue;
		}
		
		> .slider {
			position:absolute;
			
			left:30px;
			top:130px;
			
			width:calc(~"100% - 60px");
			height:10px;
			
			border:1px solid @blue;
			
			z-index:1;
			
			> .ui-slider-handle {
				position:absolute;
				display:inline-block;
				
				left:0px;
				top:-5px;
				
				margin-left:-20px;
				
				width:40px;
				height:20px;
				
				background-color:@blue;
				
				cursor:pointer;
			}
		}
		
		> .result {
			position:absolute;
			
			left:0px;
			top:50px;
			
			width:100%;
			height:calc(~"100% - 90px");
			
			text-align:center;			
			
			> .box {
				position:relative;
				display:inline-block;
				
				width:120px;
				height:100%;
				
				> .text,
				> .number,
				> .maintenance {
					position:absolute;
					
					left:0px;
					
					width:100%;
					
					text-align:center;					
				}
				
				> .text {
					top:0px;
					
					font-size:1 * @fs;
				}
				
				> .number {
					top:1.5 * @fs;
					
					font-size:2 * @fs;
					font-weight:bold;
					
					color:@blue;
				}
				
				> .maintenance {
					bottom:0px;
					
					font-size:0.75 * @fs;
				}
				
				&.box-employees {
					width:100%;
					margin-bottom:20px;
					
					> input {
						font-family:"Segoe UI", Verdana, sans-serif;
						
						border:0px solid transparent;
						background-color:transparent;
					}
				}
			}
			
			> .or {
				position:relative;
				display:inline-block;
				
				top:4px;
				
				vertical-align:top;
				
				font-weight:bold;
				font-size:0.75 * @fs;
			}
			
			&.ask > .box > .maintenance {
				display:none;
			}
		}
	}
	
	.element {
		text-align:center;
		margin-top:20px;
		
		img.icon {
			display:inline-block;
			width:64px;
			height:64px;
			
			margin-right:10px;
			
			vertical-align:middle;
			box-shadow:unset;
		}
		
		img.icon+h2 {
			display:inline-block;
			vertical-align:middle;
			margin-bottom:0;
		}
		
		img.icon+h2+.image {
			margin-top:25px;
		}
		
		h2 {
			margin-bottom:25px;
			
			text-align:center;
			font-size:22px;
			line-height:1.2;
			font-weight:700;
		}
		
		p {
			margin-top:20px;
			
			color:#303030;
			
			text-align:initial;
			
			font-size:16px;
			font-weight:400;
			line-height:1.65;
		}
		
		> .image {
			text-align:center;
		}
		
		&.pic-left, &.pic-right {
			h2 {
				text-align:left;
			}
			
			.text {
				position:relative;
				margin-bottom:40px;
			}
			
			.image {
				position:relative;
				margin-bottom:40px;
				
				/*.img {
					position:relative;
					display:block;
					
					width:100%;
					height:400px;
					
					background-repeat:no-repeat;
					background-size:contain;
					background-position:center;
				}*/
			}
		}
		
		&.pic-left {
			display:flex;
			flex-direction:column-reverse;
		}
		
		/*.img {
			position:relative;
			display:block;
			
			max-width:100%;
			height:150px;
			
			background-position:center;
			background-repeat:no-repeat;
			background-size:contain;
			
			box-shadow:#333 0px 0px 5px 0px;
		}*/
		
		img {
			position:relative;
			display:block;
			
			width:100%;
			height:100%;
			
			box-shadow:#333 0px 0px 5px 0px;
		}
	}
	
	.columns {
		margin-top:20px;
		
		.box {
			position:relative;
			display:inline-block;
			vertical-align:top;
			
			width:100%;
			
			margin-bottom:20px;
			
			text-align:center;
			
			.image {
				position:relative;
				display:block;
				
				width:100%;
				height:64px;
				
				margin:0 0 10px 0;
			}
			
			h4 {
				margin:8px 0;
				
				font-size:20px;
				font-weight:bold;
			}
			
			p {
				display:inline-block;
				
				max-width:80%;
				
				margin-bottom:20px;
				font-size:18px;
				
				color:#303030;
			}
			
			.button {
				position:relative;
				display:inline-block;
				
				padding:6px 18px;
				
				text-align:center;
				font-size:15px;
				
				border:1px solid transparent;
				border-radius:4px;
				white-space:nowrap;
				
				background-color:@blue;
				background-image:linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 95%, rgba(0, 0, 0, 0) 96%, rgba(0, 0, 0, 0.75) 100%);
				color:#FFF;
			}
			
			a {
				position:absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				cursor:pointer;
			}
			
			&:hover {
				.button {
					color:@orange;
				}
			}
		}
	}
	
	.featurelist {
		margin-top:20px;
		
		.features {
			position:relative;
			display:block;
			
			.feature {
				position:relative;
				display:none;
				
				padding:10px 15px;
				
				cursor:pointer;
				
				h4 {
					font-size:20px;
					font-weight:bold;
				}
				
				p {
					margin-bottom:20px;
					font-size:18px;
					color:#303030;
				}
				
				&.active {
					display:block;
					background-color:hsl(17,100%,84%);
					
					h4 {
						color:@orange;
					}
				}
			}
		}
		
		.pager {
			position:relative;
			display:block;
			
			height:25px;
			width:100px;
			
			margin:15px auto;
			padding:6px 18px;
			
			text-align:center;
			
			border:1px solid transparent;
			border-radius:4px;
			
			background-color:@blue;
			background-image:linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 95%, rgba(0, 0, 0, 0) 96%, rgba(0, 0, 0, 0.75) 100%);
			
			.dot {
				position:relative;
				display:inline-block;
				vertical-align:middle;
				
				height:14px;
				width:14px;
				
				margin:0 3px;
				
				border-style:solid;
				border-radius:50%;
				border-width:4px;
				border-color:#FFF;
				
				cursor:pointer;
				
				&.active {
					border-color:#FFF;
					background-color:#FFF;
					
					/*&:hover {
						background-color:@orange;
					}*/
				}
				
				&:hover {
					background-color:#FFF;
					/*border-color:@orange;*/
				}
			}
		}
		
		.pictures{
			position:relative;
			display:block;
			margin-bottom:40px;
			
			.image {
				position:relative;
				display:none;
				width:100%;
				
				&.active {
					display:block;
				}
				
				/*.img {
					position:relative;
					display:block;
					height:100%;
					width:100%;
					
					background-repeat:no-repeat;
					background-position:center;
					
					box-shadow:#333 0px 0px 5px 0px;
				}*/
				
				img {
					position:relative;
					display:block;
					
					width:100%;
					height:100%;
					
					box-shadow:#333 0px 0px 5px 0px;
				}
			}
		}
		
		&.left {
			display:flex;
			flex-direction:column-reverse;
		}
	}
	
	form {
		margin-top:20px;
		
		h2 {
			margin-bottom:25px;
			
			text-align:center;
			font-size:22px;
			line-height:1.2;
			font-weight:700;
		}
		
		.form-group {
			label {
				position:relative;
				display:block;
				
				font-size:18px;
			}
			
			input {
				position:relative;
				display:block;
				
				width:calc(~"100% - 24px");
				height:48px;
				
				padding:0 12px;
				margin-bottom:12px;
				
				border:1px solid #DDD;
				border-radius:3px;
				
				font-size:18px;
			}
			
			textarea {
				position:relative;
				display:block;
				
				width:calc(~"100% - 16px");
				height:100px;
				
				padding:8px;
				margin-bottom:12px;
				
				border:1px solid #DDD;
				border-radius:3px;
				
				font-size:18px;
				line-height:1.3;
			}
		}

		button {
			position:relative;
			display:block;

			padding:6px 18px;

			text-align:center;
			font-size:18px;
			color:#FFF;

			border:1px solid transparent;
			border-radius:4px;

			background-color:@blue;
			background-image:linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 95%, rgba(0, 0, 0, 0) 96%, rgba(0, 0, 0, 0.75) 100%);
			
			cursor:pointer;
			
			&:hover {
				color:@orange;
			}
		}
		
		.required {
			color:@orange;
		}
	}
	
	#c39 {
		img {
			width:unset;
			height:unset;
			box-shadow:unset;
			margin:auto;
		}
	}
	
	.frame.frame-type-text {
		h1 {
			margin-top:25px;
			
			font-size:26px;
			line-height:1.2;
			font-weight:700;
		}
		
		h2 {
			margin-top:25px;
			margin-bottom:10px;
			
			font-size:22px;
			line-height:1.2;
			font-weight:700;
		}
		
		h3 {
			margin-bottom:5px;
			
			line-height:1.2;
			font-weight:700;
		}
		
		p {
			margin:10px 0;
		}
	}
}
.valign {
	position:relative;
	display:inline-block;
	
	width:0px;
	height:100%;
	
	vertical-align:middle;
}

a {
	color:inherit;
	text-decoration:none;
}

a:hover {
	color:@orange;
}

strong {
	font-weight:bold;
}

em {
	font-style:italic;
}

hr {
	margin:30px 0;
}

p {
	a {
		font-weight:bold;
		//color:@orange;
		color:@blue;
		
		&:hover{
			//color:initial;
			color:@orange;
		}
	}
}

p.text-center {
	text-align:center !important;
}

.askSmaller() {
	body .calculator {
		> .result.ask > .box.box-month, 
		> .result.ask > .box.box-buy {
			> .number {
				top:32px;
				
				font-size:1.25 * @fs;
			}
		}
	}
}

.tagcloud {
	display:flex;
	
	flex-wrap:wrap;
	align-content:space-around;
	justify-content:space-between;
	align-items:center;
	
	> .tag {
		position:relative;
		display:inline-block;
		
		padding-left:10px;
		padding-right:10px;
				
		font-size:18px;
		
		&[data-prio='0'] {font-size:14px;}
		&[data-prio='1'] {font-size:18px;}
		&[data-prio='2'] {font-size:22px; font-weight:bold;}
	}	
}

@media only screen and (min-width:780px) {
	body {
		> .menubar {
			.menu {
				display:inline-block;
			}
			
			.mobilemenuicon {
				display:none;
			}
		}
			
		.mobilemenu {
			display:none;
		}
		
		.container {
			width:750px;
		}
		
		.element {
			h2 {
				font-size:26px;
			}
		}
		
		.packages {
			width:400px;
		}
		
		.packagedescription {
			width:600px;
		}
		
		.calculator {
			left:50%;
			margin-left:-250px;
			width:500px;
			
			> .result {
				> .box {
					width:200px;
				}
			}
		}
		
		.columns {
			&.four {
				.box{
					width:50%;
				}
			}
			
			&.three {
				text-align:center;
				
				.box {
					width:50%;
				}
			}
		}
		
		form {
			h2 {
				font-size:26px;
			}
		}
	}
}

@media only screen and (min-width:1050px) {
	body {
		.container {
			width:970px;
		}
		
		.element {
			margin-top:100px;
		
			h2 {
				font-size:36px;
			}
			
			p {
				font-size:18px;
			}
			
			&.pic-left, &.pic-right {
				.text {
					display:inline-block;
					vertical-align:top;
					width:45%;
					margin-bottom:0;
				}
				
				.image {
					display:inline-block;
					vertical-align:top;
					width:55%;
					margin-bottom:0;
				}
			}
		
			&.pic-right {
				.text p, .text h2 {
					padding-right:20px;
				}
				
				.image {
					.img {
						background-position:left;
					}
				}
			}
			
			&.pic-left {
				display:block;
				flex-direction:unset;
				
				.text p, .text h2 {
					padding-left:20px;
				}
			
				.image {
					.img {
						background-position:right;
					}
				}
			}
			
			.img {
				height:300px;
			}
		}
		
		.packagedescription {
			left:50%;
			
			width:1000px;
			height:20px;
			
			margin-left:-500px;
		}
		
		.calculator {
			left:50%;
			margin-left:-400px;
			width:800px;
			margin-bottom:0;
			
			> .slider {
				left:0px;
				top:50px;
				width:calc(~"100% - 5px");
			}
			
			> .result {
				top:auto;
				bottom:0px;
				
				> .box {
					&.box-employees {
						width:200px;
						
						margin-right:100px;
						margin-bottom:0;
					}
				}
			}
		}
		
		.featurelist {
			margin-top:100px;
			
			.features {
				display:inline-block;
				width:calc(~"45% - 20px");
				vertical-align:top;
				
				.feature {
					display:block;
				}
			}
			
			.pager {
				display:none;
			}
			
			.pictures {
				display:inline-block;
				width:55%;
				vertical-align:top;
				margin-bottom:0;
			}
			
			&.right  {
				.features {
					margin-right:20px;
				}
			}
			
			&.left  {
				display:block;
				flex-direction:unset;
				
				.features {
					margin-left:20px;
				}
			}
		}
		
		form {
			margin-top:100px;
			
			h2 {
				font-size:36px;
			}
		}
		
		.footer {
			.container {
				display:flex;
				flex-direction:row;
				justify-content:space-around;
				align-items:initial;
			}
			
			.footer-box {
				width:auto
			}
		}
	}
}

@media only screen and (min-width:1250px) {
	body {
		.container {
			width:1200px;
		}
		
		.columns {
			.box {
				p {
					max-width:100%;
				}
			}
			
			&.four {
				.box{
					width:25%;
				}
			}
			
			&.three {
				.box {
					width:33%;
				}
			}
		}
	}
}