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

#compare-columns {
	
	}
	
	h2.small-descriptor {
		color: #00b373;
	}
	
	#compare-columns .column {
		flex: 1;
		margin: auto;
		border: 1px solid #dcdcdc;
		display: flex;
		background: white;
		flex-direction: column;
		background-position: top left;
		transform: scale(1);
		-moz-transition: 0.15s ease-in-out;
		-webkit-transition: 0.15s ease-in-out;
		-o-transition: 0.15s ease-in-out;
		transition: background-color 0.25s ease, transform 0.25s ease, background-position 0.25s ease-in-out, color 15s ease;
		border-radius: 6px;
		max-width: 380px;
	}
	
	#compare-columns .column:nth-of-type(1) {
		background-position: top left;
	}
	
	#compare-columns .column:nth-of-type(2) {
		background-position: top center;
	}
	
	#compare-columns .column:nth-of-type(3) {
		background-position: top right;
	}
	
	/* Column Hover */	
	#compare-columns .column:hover {
		transform: scale(1.05);
		box-shadow: 0 8px 40px rgba(0,0,0,.35);
		background: #091927 url("/imagens/bgs/retail-header.jpg") no-repeat;
		background-position: bottom center;
/* 	    background-position: bottom right; */

	}
	
	#compare-columns .column:nth-of-type(1):hover {
		background-position: left 50%;
	}
	
		#compare-columns .column:nth-of-type(2):hover {
		background-position: center 50%;
	}
	
		#compare-columns .column:nth-of-type(3):hover {
		background-position: right 50%;
	}
	
	
	#compare-columns .column:hover h2, #compare-columns .column:hover h6 {
    color: white;
    max-width: none;
    margin-top: 10px;
	}	

#compare-columns .column:hover h2, #compare-columns .column:hover .cc-product-label-a {
    color: white;
    max-width: none;
    margin-bottom: 0px;
	}	

	#compare-columns .column:hover .cc-product-label img {
/* 		background: #0e2940; */
	}
	
	#compare-columns .column:hover ul.product-list li {
/* 		border-bottom: 1px solid #00b373; */
		border-bottom: 1px solid #253544;
		border-top: 1px solid #07141f;
	}
	
/*
	#compare-columns .column ul.product-list li:last-of-type {
		border-bottom: none;
	}
*/
	
	#compare-columns .column:hover ul.product-list li a {
		color: white;
	}
	
	#compare-columns .column:hover .feature-list {
    background-color: rgba(9,25,39,0.50);
    color: white;
		
	}

/*
	#compare-columns .column:hover .feature-list .callout-container {	
		padding-top: 0;
	}
*/

	
	
	
	
	
	#compare-columns h2.cc-product-label img {
		max-width: 40px;
/* 		background: #091927; */
		background: white;
		border: 1px solid #dcdcdc;
		border-radius: 40px;
		padding: 16px;
		position: absolute;
		top: -30px;
		display: none;
        
	}


	#compare-columns ul.product-list {
		list-style: none;
		margin: 10px 0;
		display: flex;
		flex-direction: column;
		min-height: 10px;
		padding: 0;
	}
		
	#compare-columns ul.product-list li {
		border-bottom: 1px solid #dcdcdc;
		border-top: 1px solid transparent;
		transition: 0.15s ease-in-out;
	}
	
	#compare-columns ul.product-list li:first-of-type {
		border-top: 1px solid transparent !important;
	}
	
	#compare-columns ul.product-list li a {
		text-decoration: none;
		font-size: 14px;
		color: #091927;
		display: inline-block;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 20px;
		box-sizing: border-box;
	
	}
	
	#compare-columns ul.product-list li a:hover {
		font-weight: bold;	
	}
	
	#compare-columns ul.product-list li a:hover span {
		background: #00b373;
		color: white;
	}
	
	#compare-columns ul.product-list li a span {
		float: right;
	    color: #00b373;
	    border: 2px solid #00b373;
	    text-transform: uppercase;
	    border-radius: 20px;
		padding: 4px 10px 2px;
	    font-size: 12px;
	    font-weight: 700;
	    transition: .1s ease-in-out;
	    -moz-transition: .1s ease-in-out;
	    -webkit-transition: .1s ease-in-out;
	    -o-transition: .1s ease-in-out;
	    min-width: 67px;
	    text-align: center;
	    margin-left: 5px;
	}
	
	.callout-container {
		padding: 20px;
		transition: 0.25s ease-in-out;
		-moz-transition: 0.25s ease-in-out;
		-webkit-transition: 0.25s ease-in-out;
		-o-transition: 0.25s ease-in-out;
		
	}
	.callout-header {
		margin-bottom: 20px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: start;
    align-content: flex-start;
	}
	.callout-header h3 {
		margin-bottom: 0;
		font-size: 14px !important;
	}
	
	.callout-container ul {
		font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Lato,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;

    font-weight: 300;
    letter-spacing: .42px;
    line-height: 18px;
    list-style-type: none;
    padding-left: 0;
	}
	
	.price-header {
		display: flex;
		flex-direction: column;
		text-align: center;
		margin: 40px 20px 20px 20px;
	}
	
	.price-header .cc-product-label, .price-header .cc-from, .price-header .cc-peryear {
		margin: 0;
	}
	.price-header .cc-product-label {
		font-size: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #091927;
        margin-bottom: 15px;
	}
	.price-header .cc-from {
		text-transform: uppercase;
	}
	.alignCenter {
		text-align: center;
	}
	
	.feature-list {
		display: flex;
		flex-grow: 1; 
		background: #f6f6f5;
		border-radius: 0 0 6px 6px;
	}
	
	.feature-list ul li {
		position: relative;
	    margin-top: 10px;
	    width: 100%;
	    display: flex;
	    align-items: center;
	    font-size: 13px;
	    font-weight: 400;
	}

	.feature-list ul li.x-mark {
		text-decoration: line-through;
		color: #828e96;		
	}
	
	.feature-list ul li.x-mark i {
		color: #828e96;
    border: 1px solid #828e96;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    line-height: 18px;
    text-align: center;
    font-size: .7rem;
    margin-right: 5px;
	}
	
	.fa-times:before {
		content: "\f00d";
	}
	
	.fa-checkmark:before {
		content: "\f00c";
	}
	


	
	.feature-list ul li.check-mark i {
		color: #00b373;
    border: 1px solid #00b373;
    display: inline-block;
    width: 20px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    line-height: 18px;
    text-align: center;
    font-size: .7rem;
    margin-right: 5px;
	}
	
	@media screen and (max-width: 1076px) {
		#compare-columns {
			flex-direction: column;
		}
		
		#compare-columns .column {
			margin: 0 auto;
			margin-bottom: 60px;
		}
	}