/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@author			Jacques Baars <j@w3d.co.za>
*
*	@notice			This is the property of W3Designs, W3Development, W3D,
*					it is illegal to use this source code without the required permission,
*					contact j@w3d.co.za for further advice or permissions.
*
*	@license		Copyright (c) 2016 W3Designs (PTY) Ltd. (http://www.w3d.co.za)
*/

/* ------------- CORE:ROOT ------------- */

:root{
	--color: #000;
	--color2: #fff;
	
	--bgColor: #2C3777;
	--bgColor2: #20295C;
	--bgColor3: #1D164F;
	--bgColor4: #EEEFF2;
	--bgColor5: #D1D6E5;
	
	--bgColor3Rgba: rgba(29, 22, 79, 0.8);

	--linkColor: #222;
	--linkHoverColor: #008ce5;
	
	--borderRadius: 10px;
	
	--mobileMenuColor: #fff;
	--mobileMenuBtnColor: #2C3777;
	--mobileMenuSelectedColor: #fff;
	--mobileMenuSelectedBgColor: #20295C;
	--mobileMenuContentBgColor: #2C3777;
	
	--btnColor: #fff;
	--btnBgColor: #2C3777;
	--btnHoverColor: #fff;
	--btnBgHoverColor: #20295C;
	
	/* Glow Btn */
	--btnBgColor2: #20295C;
	--btnBgColor3: #1D164F;
	
	--dialogBgColor: #2C3777;
	--dialogBgColor2: #20295C;
	--dialogHeadingColor: #fff;
	
	/* Responsive Devices */
	--rdColor: #1f1f1f;
	--rdColor2: #f8f8f8;
	--rdColor3: #e8ebf0;
}

/* ------------- DOCUMENT ------------- */

/* Body */
body{
	background-color: var(--bgColor4);
	font-family: Lato, Helvetica, Arial, sans-serif;
}

/* Headings */
h1, h2, h3{
	font-weight: normal;
	font-family: Lato, Helvetica, Arial, sans-serif;
}

/* Special Offer */
.special-offer{
	color: var(--redColor);
}

/* Header */
#menu-banner{}

	/* Top Banner */
	#menu-banner .top-banner{
		background-color: var(--bgColor4);
	}

	/* Menu Banner */
	#menu-banner .menu-banner{}
		
		#menu-banner .menu-banner .left{
			width: 41%;
		}
		
		#menu-banner .menu-banner .logo{
			width: 14%;
			margin-left: 2%;
			margin-right: 2%;
		}
		
		#menu-banner .menu-banner .logo.default{
			margin-top: -20px;
		}
		
		#menu-banner .menu-banner .right{
			width: 41%;
		}
	
	/* Menu */
	#menu-banner .menu-banner ul li a{
		color: var(--color);
		padding: 30px 20px;
	}

		#menu-banner .menu-banner .left > ul > li.active-li > a,
		#menu-banner .menu-banner .right > ul > li.active-li > a{
			font-weight: bold;
		}

		#menu-banner .menu-banner .left > ul > li > a:after,
		#menu-banner .menu-banner .right > ul > li > a:after{
			width: 0;
			content: '';
			height: 2px;
			bottom: -5px;
			display: block;
			position: relative;
			background-color: var(--bgColor);
			transition: width 0.3s, left 0.3s;
		}

			#menu-banner .menu-banner .left > ul > li:hover > a:after,
			#menu-banner .menu-banner .right > ul > li:hover > a:after,
			#menu-banner .menu-banner .left > ul > li.active-li > a:after,
			#menu-banner .menu-banner .right > ul > li.active-li > a:after{
				left: 10%;
				width: 80%;
			}

	#menu-banner .menu-banner ul ul{
		border-radius: var(--borderRadius);
	}

		#menu-banner .menu-banner ul ul li{
			margin: 5px;
		}

			#menu-banner .menu-banner ul ul li a{
				color: var(--color);
				border-radius: var(--borderRadius);
			}

				#menu-banner .menu-banner ul ul li:hover > a,
				#menu-banner .menu-banner ul ul li.active-li > a{
					color: var(--color2);
					background-color: var(--bgColor);
				}

					#menu-banner .menu-banner ul ul li:hover > a:after{
						left: 0;
						width: 50%;
						color: var(--bgColor4);
						transition: width 0.5s, right 0.5s;
					}

/* Slider */
#slider{}

	#slider .content{
		padding: 10% 0;
		position: relative;
		animation: slide 20s linear infinite;
		background-image: url('../images/slider/clouds.png');
	}

	#slider.home .content{
		padding: 14% 0;
	}

		#slider .content:after{
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			content: '';
			position: absolute;
			background-color: rgba(255, 255, 255, 0.3);
		}

		#slider.home .content:after{
			background-color: rgba(255, 255, 255, 0.8);
		}
		
		@keyframes slide{
			from{
				background-position: 0 0;
			}to{
				background-position: -400px -200px;
			}
		}

		#slider .content .splash{
			z-index: 1;
			position: relative;
		}

			#slider .content .splash .block{
				width: 700px;
			}
			
				#slider .content .splash .block .image{
					width: 150px;
					margin: 0 auto;
					max-width: 150px;
				}
				
				#slider .content .splash .block .info{}
				
					#slider .content .splash .block .info .title{
						font-size: var(--fontSize250);
					}
					
					#slider .content .splash .block .info .text{
						margin: 20px 0 25px;
						font-size: var(--fontSize120);
					}
					
					#slider .content .splash .block .info .button{}

/* Slogan */
#slogan{
	color: #fff;
	background-color: var(--bgColor);
}

/* Responsive Panel */
.responsive-panel{
	width: 1000px;
	margin: 0 auto;
}

	/* Info */
	.responsive-panel .info{
		width: 340px;
		margin-left: 40px;
	}
	
		.responsive-panel .info .item{
			color: #fff;
			padding: 20px;
			text-align: left;
			margin: 0 auto 10px;
			background-color: var(--bgColor);
		}
		
			.responsive-panel .info .item .group{
				margin-right: 10px;
				width: calc(100% - 80px);
			}
		
				.responsive-panel .info .item .group .label{
					font-weight: bold;
					font-size: var(--fontSize130);
				}
				
				.responsive-panel .info .item .group .description{}
			
			.responsive-panel .info .item .icon{
				width: 50px;
				padding: 10px;
			}

	/* Devices */
	.responsive-panel .devices{
		width: 620px;
		height: 460px;
		position: relative;
	}
		
		/* Screen */
		.responsive-panel .devices .desktop .screen,
		.responsive-panel .devices .laptop .screen,
		.responsive-panel .devices .phone .screen,
		.responsive-panel .devices .tablet .screen{
			overflow: hidden;
			position: relative;
			background-color: #fff;
		}
		
			/* Animation */
			.responsive-panel .devices .desktop .screen img,
			.responsive-panel .devices .laptop .screen img,
			.responsive-panel .devices .phone .screen img,
			.responsive-panel .devices .tablet .screen img{
				top: 0;
				overflow: auto;
				position: relative;
			
				animation: move-up-and-down 3s infinite;
				animation-direction: alternate;
			}
		
			@keyframes move-up-and-down{
				0%   {top: 0;}
				100%  {top: -200%;}
			}

			/* Lens */
			.responsive-panel .devices .desktop .screen:before,
			.responsive-panel .devices .laptop .screen:before,
			.responsive-panel .devices .phone .screen:before,
			.responsive-panel .devices .tablet .screen:before{
				z-index: 1;
				content: '';
				width: 200px;
				right: -90px;
				height: 300px;
				overflow: hidden;
				position: absolute;
				transform: rotate(45deg);
				background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
			}

		/* Desktop */
		.responsive-panel .devices .desktop{
			top: 0;
			left: 65px;
			width: 450px;
			height: 280px;
			position: absolute;
			background-color: var(--rdColor2);
			
			border-radius: 6px;
			border: 5px solid var(--rdColor);
		}
		
			.responsive-panel .devices .desktop .screen{
				width: 450px;
				height: 280px;
			}
			
			.responsive-panel .devices .desktop .base{
				left: 50%;
				width: 90px;
				height: 50px;
				bottom: -55px;
				position: absolute;
				margin-left: -45px;
				background-color: var(--rdColor3);
			}
			
				.responsive-panel .devices .desktop .base:before{
					top: 0;
					content: '';
					left: -13px;
					position: absolute;
					border-left: 13px solid transparent;
					border-right: 0px solid transparent;
					border-bottom: 50px solid var(--rdColor3);
				}
				
				.responsive-panel .devices .desktop .base:after{
					top: 0;
					content: '';
					right: -13px;
					position: absolute;
					border-right: 13px solid transparent;
					border-left: 0px solid transparent;
					border-bottom: 50px solid var(--rdColor3);
				}
			
				.responsive-panel .devices .desktop .base .grey-shadow{
					top: 0;
					width: 90px;
					height: 12px;
					background-color: #d8dbe1;
				}
			
					.responsive-panel .devices .desktop .base .grey-shadow:before{
						top: 0;
						left: -3px;
						content: '';
						position: absolute;
						border-left: 3px solid transparent;
						border-right: 0px solid transparent;
						border-bottom: 12px solid #d8dbe1;
					}
					
					.responsive-panel .devices .desktop .base .grey-shadow:after{
						top: 0;
						right: -2px;
						content: '';
						position: absolute;
						border-right: 3px solid transparent;
						border-left: 0px solid transparent;
						border-bottom: 12px solid #d8dbe1;
					}
				
				.responsive-panel .devices .desktop .base .foot{
					position: absolute;
					background-color: var(--rdColor3);
				}
				
				.responsive-panel .devices .desktop .base .foot.top{
					left: 50%;
					height: 5px;
					width: 116px;
					bottom: -5px;
					margin-left: -58px;
				}
				
					.responsive-panel .devices .desktop .base .foot.top:before{
						top: 0;
						left: -16px;
						content: '';
						position: absolute;
						border-left: 16px solid transparent;
						border-right: 0px solid transparent;
						border-bottom: 5px solid var(--rdColor3);
					}
					.responsive-panel .devices .desktop .base .foot.top:after{
						top: 0;
						content: '';
						right: -16px;
						position: absolute;
						border-right: 16px solid transparent;
						border-left: 0px solid transparent;
						border-bottom: 5px solid var(--rdColor3);
					}
				
				.responsive-panel .devices .desktop .base .foot.bottom{
					left: 50%;
					height: 5px;
					width: 150px;
					bottom: -10px;
					margin-left: -75px;
				}

		/* Laptop */
		.responsive-panel .devices .laptop{
			right: 9px;
			bottom: 7px;
			width: 350px;
			height: 220px;
			position: absolute;
			background-color: var(--rdColor2);
			
			border-radius: 10px 10px 0 0;
			border: 6px solid var(--rdColor);
		}
		
			.responsive-panel .devices .laptop .screen{
				width: 350px;
				height: 220px;
			}
			
			.responsive-panel .devices .laptop .bottom{
				left: -15px;
				height: 7px;
				width: 380px;
				bottom: -13px;
				position: absolute;
				border-radius: 0 0 20px 20px;
				background-color: var(--rdColor3);
			}

		/* Phone */
		.responsive-panel .devices .phone{
			left: 0;
			bottom: 0;
			width: 65px;
			height: 125px;
			position: absolute;
			border-radius: 7px;
			background-color: var(--rdColor);
			border: 3px solid var(--rdColor);
		}
		
			.responsive-panel .devices .phone .screen{
				width: 65px;
				height: 125px;
				border-radius: 4px;
			}

		/* Tablet */
		.responsive-panel .devices .tablet{
			bottom: 0;
			left: 76px;
			width: 140px;
			height: 190px;
			border-radius: 8px;
			position: absolute;
			border: 6px solid var(--rdColor);
			background-color: var(--rdColor);
		}
		
			.responsive-panel .devices .tablet .screen{
				width: 140px;
				height: 190px;
				border-radius: 3px;
			}

/* ROI Panel */
.roi-panel{
	width: 1000px;
	margin: 0 auto;
}

	.roi-panel .analytics{
		width: 420px;
	}
	
	.roi-panel .info{
		width: 640px;
		margin-left: 40px;
	}
	
		.roi-panel .info .item{
			color: #fff;
			padding: 20px;
			text-align: left;
			margin: 0 auto 10px;
			background-color: var(--bgColor);
		}
		
			.roi-panel .info .item .group{
				margin-right: 10px;
				width: calc(100% - 80px);
			}
		
				.roi-panel .info .item .group .label{
					font-weight: bold;
					font-size: var(--fontSize130);
				}
				
				.roi-panel .info .item .group .description{}
			
			.roi-panel .info .item .icon{
				width: 50px;
				padding: 10px;
			}

/* Sum-Div */
#sum-div{
	background-color: #fff;
}
	/* Title */
	#sum-div .sum-row.cover .title,
	#sum-div .sum-row.summary .title,
	#sum-div .sum-row .sum-row-wrapper > .title{
		position: relative;
		text-align: center;
		padding-bottom: 25px;
		font-size: var(--fontSize250);
	}
	
	#sum-div .sum-row.responsive .sum-row-wrapper > .title{
		color: #fff;
	}

		#sum-div .sum-row.cover .title:before,
		#sum-div .sum-row.summary .title:before,
		#sum-div .sum-row .sum-row-wrapper > .title:before{
			left: 25%;
			width: 25%;
			content: '';
			bottom: 3px;
			height: 5px;
			position: absolute;
			border-radius: 5px 0 0 5px;
			background-color: var(--bgColor);
		}
	
		#sum-div .sum-row.responsive .sum-row-wrapper > .title:before{
			background-color: #fff;
		}

		#sum-div .sum-row.cover .title:after,
		#sum-div .sum-row.summary .title:after,
		#sum-div .sum-row .sum-row-wrapper > .title:after{
			right: 25%;
			width: 25%;
			content: '';
			bottom: 3px;
			height: 5px;
			position: absolute;
			border-radius: 0 5px 5px 0;
			background-color: var(--bgColor3);
		}
	
		#sum-div .sum-row.responsive .sum-row-wrapper > .title:after{
			background-color: #aaa;
		}

	/* Services */
	#sum-div .sum-row.services{}
	
		#sum-div .sum-row.services .sum-row-wrapper{
			padding-left: 10%;
			padding-right: 10%;
		}
		
			#sum-div .sum-row.services .sum-row-wrapper .sum-column{}
			
				#sum-div .sum-row.services .sum-row-wrapper .sum-column .image{
					width: 100px;
				}

	/* Cover */
	#sum-div .sum-row.cover{
		background-image: url('../images/home/bg.jpg');
	}
	
		#sum-div .sum-row.cover .sum-column{
			background-color: rgba(255, 255, 255, 0.95);
		}

	/* Why Us */
	#sum-div .sum-row.why-us{
		background-color: var(--bgColor4);
	}

		#sum-div .sum-row.why-us .sum-column{}
		
			#sum-div .sum-row.why-us .sum-column .text:nth-child(1){
				color: #fff;
				width: 100px;
				height: 100px;
				display: flex;
				margin: 0 auto;
				border-radius: 50%;
				align-items: center;
				justify-content: center;
				font-size: var(--fontSize300);
				background-color: var(--bgColor);
			}
		
			#sum-div .sum-row.why-us .sum-column .text:nth-child(2){
				font-weight: bold;
				font-size: var(--fontSize120);
			}

	/* Professional */
	#sum-div .sum-row.professional{}
	
		#sum-div .sum-row.professional .sum-column{}
		
			#sum-div .sum-row.professional .sum-column .text{
				margin-bottom: 50px;
			}
		
			#sum-div .sum-row.professional .sum-column .icons{
				max-width: 700px;
				margin: 0 auto 25px;
			}
		
				#sum-div .sum-row.professional .sum-column .icon{
					margin-bottom: 30px;
				}
				
					#sum-div .sum-row.professional .sum-column .icon .image{
						width: 100px;
						margin: 0 auto;
					}
					
					#sum-div .sum-row.professional .sum-column .icon h3{
						margin-top: 20px;
						font-size: var(--fontSize160);
					}

	/* Responsive */
	#sum-div .sum-row.responsive{
		position: relative;
		background-image: url('../images/home/bg.jpg');
	}
	
		#sum-div .sum-row.responsive:before{
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			content: '';
			position: absolute;
			background-color: var(--bgColor3Rgba);
		}

	/* ROI Analytics */
	#sum-div .sum-row.roi-analytics{}

/* Body */
#body{}

	/* Left */
	#left{}
		
		/* Label Box */
		#left > .label-box{}

			#left > .label-box > .title{
				width: 80%;
				margin: 0 auto;
				border-bottom: 3px solid var(--bgColor);
			}

			#left > .label-box > .content{}

	/* Content */
	#content{}

		/* Spread */
		#content > .spread{}
		
			/* Title */
			#content > .spread > .title{
				width: 93%;
				margin: 0 auto;
				position: relative;
			}

				#content > .spread > .title:before{
					left: 0;
					width: 300px;
					content: '';
					bottom: -3px;
					height: 3px;
					position: absolute;
					border-radius: 5px 0 0 5px;
					background-color: var(--bgColor);
				}
		
			/* Data */
			#content > .spread > .data{}
		
				/* H3 */
				#content > .spread > .data h3{
					font-weight: bold;
					border-bottom: 1px solid var(--bgColor4);
				}

#body.wide{}

	/* Content */
	#content{}

		/* Panel */
		#content > .panel{}

		#content > .panel:nth-child(even){
			background-color: var(--bgColor4);
		}
		
			#content > .panel h1,
			#content > .panel h2{
				width: 600px;
				padding-bottom: 15px;
				font-size: var(--fontSize250);
			}
			
				#content > .panel h1:before,
				#content > .panel h2:before{
					left: 25%;
					width: 25%;
					content: '';
					bottom: 3px;
					height: 5px;
					position: absolute;
					border-radius: 5px 0 0 5px;
					background-color: var(--bgColor);
				}

				#content > .panel h1:after,
				#content > .panel h2:after{
					right: 25%;
					width: 25%;
					content: '';
					bottom: 3px;
					height: 5px;
					position: absolute;
					border-radius: 0 5px 5px 0;
					background-color: var(--bgColor3);
				}
		
			#content > .panel h3{
				border-bottom: 1px solid var(--bgColor5);
			}

		/* Services */
		#content > .panel.services{}
		
			#content > .panel.services .image{
				width: 200px;
				margin-right: 20px;
				margin-left: calc(100% - 220px);
			}
		
			#content > .panel.services .info{}

		/* Files */
		#content > .panel.files{
			text-align: center;
		}
		
/* Packages */
#packages{}

	/* Note */
	#packages .note{
		padding: 20px;
		text-align: center;
	}

	/* Focus */
	#packages .focus{
		margin: 30px 0;
	}

		#packages .focus .package{
			overflow: hidden;
			border: 1px solid var(--bgColor4);
		}
			
			#packages .focus .package > .title{
				margin: 0;
				color: #fff;
				border: none;
				padding: 20px 0;
				text-align: center;
				background-color: var(--bgColor);
			}
		
			#packages .focus .package > .sub{
				padding: 30px;
				text-align: center;
				background-color: #fff;
			}
		
				#packages .focus .package > .sub span{
					display: block;
					padding: 0 0 20px;
					font-size: var(--fontSize180);
				}
		
			#packages .focus .package > .info{
				background-color: #fff;
			}
		
				#packages .focus .package > .info .tick-list{}

					#packages .focus .package > .info .tick-list .row .title{
						position: relative;
					}

					#packages .focus .package > .info .tick-list .row .title:after{
						top: 10px;
						left: 37px;
						content: '...';
						position: absolute;
					}
				
					#packages .focus .package > .info .tick-list > .row{
						padding: 15px 20px;
						border-top: 1px solid var(--bgColor4);
					}

	/* List */
	#packages .list{
		margin: 30px 0;
	}

		#packages .list .package{
			display: flex;
			overflow: hidden;
			margin-bottom: 10px;
			background-color: #fff;
			border: 1px solid var(--bgColor4);
		}

		#packages .list .package:last-child{
			margin-bottom: 0;
		}

			#packages .list .package > *{
				flex: 1;
				padding: 20px;
				align-content: center;				
				width: calc((100% / 3) - 40px);
			}

			#packages .list .package > *:not(.title){
				text-align: center;
			}

			#packages .list .package > .title{
				margin: 0;
				color: #fff;
				border: none;
				padding: 20px;
				background-color: var(--bgColor);
			}

/* Page Options */
#page-options{
	background-color: var(--bgColor);
}

	#page-options a{
		color: #fff;
	}

	#page-options .left:hover,
	#page-options .right:hover{
		background-color: var(--bgColor2);
	}

/* Footer */
#footer{
	color: #fff;
	background-color: var(--bgColor2);
}

	#footer .title{
		color: #fff;
	}

	#footer a{
		color: #fff;
	}

		#footer a:hover{
			color: #fff;
		}

/* 1750px */		
@media screen and (max-width: 1750px){
	#menu-banner .menu-banner ul li a{
		padding: 28px 19px;
	}
}

/* 1650px */		
@media screen and (max-width: 1650px){
	#menu-banner .menu-banner ul li a{
		padding: 28px 18px;
	}
}

/* 1550px */		
@media screen and (max-width: 1550px){
	#menu-banner .menu-banner ul li a{
		padding: 27px 16px;
	}
}

/* 1380px */		
@media screen and (max-width: 1380px){
	#menu-banner .menu-banner ul li a{
		padding: 27px 15px;
	}
}

/* 1250px */		
@media screen and (max-width: 1250px){
	#menu-banner .menu-banner ul li a{
		padding: 25px 14px;
	}
	
	#sum-div .sum-row.services .sum-row-wrapper{
		padding-left: 0;
		padding-right: 0;
	}
}

/* 1100px */		
@media screen and (max-width: 1100px){
	#menu-banner .menu-banner ul li a{
		padding: 23px 8px;
	}
	
	/* Responsive Panel */
	.responsive-panel{
		width: 100%;
		display: block;
	}
	
		/* Info */
		.responsive-panel .info{
			width: 90%;
			margin: 50px auto 0;
		}
	
		/* Devices */
		.responsive-panel .devices{
			margin: 0 auto;
		}
		
	/* ROI Panel */
	.roi-panel{
		width: 100%;
		display: block;
	}

		.roi-panel .analytics{
			margin: 0 auto;
		}
		
		.roi-panel .info{
			width: 90%;
			margin: 50px auto 0;
		}
}

/* 1024px */		
@media screen and (max-width: 1024px){
	#menu-banner .menu-banner ul li a{
		padding: 21px 6px;
	}
}

/* 600px */
@media screen and (max-width: 600px){
	#slider.home .content{
		padding: 45% 0 35%;
	}
	
	#slider .content{
		padding: 30% 0;
	}

		#slider .content .splash .block{
			width: 80%;
			margin: 0 auto;
			text-align: center;
		}

			#slider .content .splash .block .info .title{
				margin: 40px 0 0;
			}
	
	/* Devices */
	.responsive-panel .devices{
		width: 300px;
		height: 630px;
	}

		/* Monitor */
		.responsive-panel .devices .desktop{
			left: 5px;
			width: 280px;
			height: 175px;
		}
		
			.responsive-panel .devices .desktop .screen{
				width: 280px;
				height: 175px;
			}
		
			.responsive-panel .devices .desktop .base:before{
				left: -12px;
			}
			
			.responsive-panel .devices .desktop .base:after{
				right: -12px;
			}

		/* Laptop */
		.responsive-panel .devices .laptop{
			top: 215px;
			right: 19px;
			bottom: auto;
			width: 250px;
			height: 155px;
		}
		
			.responsive-panel .devices .laptop .screen{
				width: 250px;
				height: 155px;
			}
			
			.responsive-panel .devices .laptop .bottom{
				left: -15px;
				width: 280px;
				bottom: -13px;
			}

		/* Phone */
		.responsive-panel .devices .phone{
			left: 20px;
			top: 425px;
			bottom: auto;
		}

		/* Tablet */
		.responsive-panel .devices .tablet{
			left: auto;
			top: 425px;
			right: 20px;
			bottom: auto;
		}

	.roi-panel .analytics{
		width: 90%;
	}

	#content > .spread > .title{
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}

		#content > .spread > .title:before{
			width: 100%;
		}
		
	#content > .panel.services .image{
		margin: 0 auto;
	}

	#content > .panel.services .info{
		padding: 20px 0 0;
		text-align: center;
	}

	#packages .list .package{
		flex-direction: column;
	}
	
		#packages .list .package > *{
			width: auto;
		}
	
		#packages .list .package > *:nth-child(2){
			border-bottom: 1px solid var(--bgColor6);
		}

		#packages .list .package > .title{
			text-align: center;
		}
}