/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

#pricing_table .icon{
 	width: 30%;
 	max-width: 75px;
 	height: auto;
 	margin-bottom: 15px;
}

#pricing_table .title{
	font-weight: bold;
}

#pricing_table .cta .btn-link{
 	margin: 3px;
}

#pricing_table .pricing_row{
 	display: flex;
 	width: 100%;
}

#pricing_table .pricing_row div{
 	width: 18%;
 	
 	display: flex;
  	align-items: center;
  	justify-content: center;

  	padding-top: 7px;
	padding-bottom: 7px;
	border-bottom: 0.5px solid rgba(0,0,0,0.1);
}

#pricing_table .edition_sudo{
	border-left: 0.5px solid rgba(0,0,0,0.1);
}

#pricing_table .edition_box.edition_sudo{
	border-bottom: none;
}

#pricing_table.editions_5 .pricing_row div{
	width: 15%;
}

#pricing_table .pricing_row_header div{
 	display: block;
 	text-align: center;
 	padding: 0;
}

#pricing_table .pricing_row_header div a:first-child
{
 	color: rgb(76, 76, 76);
 	display: block;
 	width: 100%;
 	height: 100%;
 	padding: 10px;
}

#pricing_table .pricing_row div p, #pricing_table .pricing_row_header div p{
 	text-align: center;
}



#pricing_table .pricing_row_header div a:hover{
 	background-color: rgba(0,0,0,0.04);
}

#pricing_table .pricing_row div:first-of-type{
 	width: 28%;
 	display: block;
 	text-align: right; 
}

#pricing_table.editions_5 .pricing_row div:first-of-type{
	width: 25%;
}

#pricing_table .pricing_row_hover{
 	cursor: pointer;
}

#pricing_table .pricing_row_hover:hover{
 	background-color: rgba(0,0,0,0.04);
}

#pricing_table .description_row{
	padding: 15px 5px 45px 5px;
	border-bottom: 0.5px solid rgba(0,0,0,0.1);
}

#pricing_table .description_row img{
	float: left;
	width: 60%;
	margin-right: 30px;
	margin-bottom: 30px;
}

#pricing_table .description_row h3{
	margin-top: 25px;
}

#edition-page section{
	padding: 50px 0px 50px 0px;
}

#edition-page .alternative-edition{
	
	margin-bottom: 1px;
}

#edition-page .container h2{
	margin: 25px 0px 25px 0px;
}

#edition-page .container img{
	width: 60%;
	float: left;
	margin-right: 30px;
	margin-bottom: 40px;
}

#edition-page .section-link{
	display: block;
	width: 100%;
	background-color: #ff00ff;
}

#edition-page .section-link:hover{
	background-color: #ff00aa;
}

.text-link{
	display: block;
}

/* #####################################
 * BRANDS
 * ##################################### */

.brand-community{
	color: #aed036 !important;
}
.brand-community_plus{
	color: #31a366 !important;
}
.brand-indy{
	color: #1a99ce !important;
}
.brand-business{
	color: #515151 !important;
}
.brand-html5{
	color: #e34c25 !important;
}


.btn.btn-link.brand-community{
	box-shadow: 0px 0px 0px 1px #aed036 !important;
	color: #aed036 !important;
}

.btn.btn-link.brand-community_plus{
	box-shadow: 0px 0px 0px 1px #31a366 !important;
	color: #31a366 !important;
}

.btn.btn-link.brand-indy{
	box-shadow: 0px 0px 0px 1px #1a99ce !important;
	color: #1a99ce !important;
}

.btn.btn-link.brand-business{
	box-shadow: 0px 0px 0px 1px #515151 !important;
	color: #515151 !important;
}

.btn.btn-link.brand-html5{
	box-shadow: 0px 0px 0px 1px #e34c25 !important;
	color: #e34c25 !important;
}

.btn.btn-link.brand-community:hover{
	background-color: #aed036 !important;
}

.btn.btn-link.brand-community_plus:hover{
	background-color: #31a366 !important;
}

.btn.btn-link.brand-indy:hover{
	background-color: #1a99ce !important;
}

.btn.btn-link.brand-business:hover{
	background-color: #515151 !important;
}

.btn.btn-link.brand-html5:hover{
	background-color: #e34c25 !important;
}

.btn.btn-link.brand-community:hover, .btn.btn-link.brand-community_plus:hover, .btn.btn-link.brand-indy:hover, .btn.btn-link.brand-business:hover, .btn.btn-link.brand-html5:hover{
	color: white !important;
	text-decoration: none;
}

@media (max-width: 1100px) {
	#pricing_table .pricing_row div p, #pricing_table .pricing_row_header div p{
	 	font-size: 0.9em;
	}

	#pricing_table .pricing_row div p.title{
		font-size: 1em;
	}
}

@media (max-width: 900px) {
	#pricing_table .pricing_row_header div{
	 	padding: 0px;
	}

	#pricing_table .pricing_row div p, #pricing_table .pricing_row_header div p{
	 	font-size: 0.8em;
	}

	#pricing_table .pricing_row div p.title{
		font-size: 1em;
	}
}

@media (max-width: 600px) {
	#pricing_table{
		font-size: 0.8em;
	}

	#pricing_table .pricing_row div p.title{
		margin-top: 40px;
		font-size: 1em;
	}

	#pricing_table .pricing_row_header div a:first-child
	{
	 	padding: 5px;
	}

	#pricing_table .title .rotate{
		display: block;
		text-align: left;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
		white-space: nowrap;
	}

	#pricing_table .pricing_row_header div{
	 	height: 175px;
	}

	#pricing_table .pricing_row div{
		width: 15%;
	}

	#pricing_table .pricing_row div:first-of-type{
 		width: 40%;
 	}

 	#pricing_table .icon{
	 	width: 60%;
	 	margin-bottom: 0px;
	}

	#pricing_table .pricing_row .description, #pricing_table .pricing_row .learn{
		display: none;
	}

	#pricing_table .description_row img{
		width: 100%;
		margin: 0;
		margin-bottom: 30px;
	}

	#pricing_table .cta{
	 	display: block;
	}

	#pricing_table .btn-link{
	 	white-space: normal;
	 	padding: 4px;
	 	line-height: normal;
	}

	#pricing_table .btn{
		width: 90%;
		display: block;
	}
}

@media (max-width: 480px) {
	#pricing_table .pricing_row div p.title{
		margin-top: 30px;
	}

	#pricing_table .pricing_row div{
		width: 14%;
	}

	#pricing_table .pricing_row div:first-of-type{
 		width: 44%;
 	}

 	#pricing_table .icon{
	 	width: 70%;

	}

	.small{
		font-size: 75% !important;
	}

	#pricing_table .btn{
		font-size: 75% !important;
	}
}