@import url('https://fonts.googleapis.com/css?family=Lato');

:root {
    --standardHeaderColor: #648d7c;
	--proHeaderColor: #878bc2;
	--platHeaderColor: #185886;
	--tableBackgroundColor: white;
  }

 body {
	 padding-top: 70px;
}

.priceTableContainer{
	display: flex;
	flex-direction: row;
	background-color: rgb(223, 223, 223);
}

.pricePlans{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding-top: 20px;
	padding-bottom: 20px;
}


.singlePlan{
	background: #fff;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
	z-index: 1;
	max-width: 300px;
	max-height: 800px;
}

.singlePlan:hover {
	box-shadow: 0px 11px 30px 0px rgba(0, 0, 0, 0.75);
	z-index: 2;
	-webkit-transform: scale(1.06);
	-ms-transform: scale(1.06);
	-moz-transform: scale(1.06);
	transform: scale(1.06);
	border: 0;
	-webkit-transition: 0.5s all;
	transition: 0.5s all;
	border: none;
}

.singlePlan .plan-header {
	 background: var( --standardHeaderColor);
	 color: #fff;
	 text-transform: capitalize;
	 padding: 2px 0;
}
 .singlePlane .plan-header h3 {
	 margin: 0;
	 padding: 20px 0 5px 0;
	 text-transform: uppercase;
}
 .singlePlan .plan-price {
	 display: inline-block;
	 color: var( --standardHeaderColor);
	 margin: 0 0 10px 0;
	 font-size: 25px;
	 font-weight: bold;
	 background: #fff;
	 border-radius: 50%;
	 color: var( --standardHeaderColor);
	 padding: 33px 15px;
}
 .singlePlan .plan-price span {
	 font-size: 14px;
	 font-weight: normal;
}
 .singlePlan ul {
	 margin: 0;
	 padding: 20px 0;
	 list-style: none;
}
 .singlePlan ul li {
	 padding: 8px 0;
	 margin: 0 20px;
	 border-bottom: 1px solid #fff;
	 font-size: 15px;
	 font-weight: bold;
}
 .singlePlan .plan-submit {
	 display: inline-block;
	 text-decoration: none;
	 margin: 20px 0 30px 0;
	 padding: 10px 40px;
	 border: 2px solid var( --standardHeaderColor);
	 color:var( --standardHeaderColor);
	 font-size: 15px;
	 text-transform: uppercase;
	 border-radius: 3px;
	 -webkit-transition: all 0.25s linear;
	 -moz-transition: all 0.25s linear;
	 -ms-transition: all 0.25s linear;
	 -o-transition: all 0.25s linear;
	 transition: all 0.25s linear;
}
 .singlePlan .plan-submit:hover {
	 background: var( --standardHeaderColor);
	 color: #fff;
	 -webkit-transition: all 0.25s linear;
	 -moz-transition: all 0.25s linear;
	 -ms-transition: all 0.25s linear;
	 -o-transition: all 0.25s linear;
	 transition: all 0.25s linear;
}

/* standard */

.standPlan ul{
	padding-bottom: 20px;
}

#standardDropDown .dropdown-item:hover{
  
    color: black;
	font-weight:bold;
	background-color:  var( --standardHeaderColor);
    
}

#standardBtnId{
	background-color: #8ba6bd;
	color: black;
	border: 2px solid #637788;;
}


/* Pro Plan */

 .proPlan .singlePlan .plan-header {
	 background: var( --proHeaderColor);
	 color: #fff;
}
 .proPlan .singlePlan .plan-header .plan-price {
	 color: var( --proHeaderColor);
	 background: #fff;
}
 .proPlan .singlePlan .plan-submit {
	 border: 2px solid var( --proHeaderColor);
	 color: var( --proHeaderColor);
}
 .proPlan .singlePlan .plan-submit:hover {
	 background: var( --proHeaderColor);
	 color: #fff;
}

 .proPlan .hvr-bubble-float-right:hover:before, .proPlan .hvr-bubble-float-right:focus:before, .proPlan .hvr-bubble-float-right:active:before {
	 -webkit-transform: translateX(10px);
	 transform: translateX(10px);
	 border-color: transparent transparent transparent var( --proHeaderColor);
}

.proPlan .singlePlan ul {
	padding-top: 20px;
}

#proDropDown .dropdown-item:hover{
  
    color: black;
	font-weight:bold;
	background-color:  var( --proHeaderColor);
    
}

#proBtnId{
	background-color: #8ba6bd;
	color: black;
	border: 2px solid #637788;;
}


/* Platinum Plan */
 .platPlan .singlePlan .plan-header {
	 background: var( --platHeaderColor);
	 color: #fff;
}
 .platPlan .singlePlan .plan-header .plan-price {
	 color: var( --platHeaderColor);
	 background: #fff;
}
 .platPlan .singlePlan .plan-submit {
	 border: 2px solid var( --platHeaderColor);
	 color: var( --platHeaderColor);
}
 .platPlan .singlePlan .plan-submit:hover {
	 background: var( --platHeaderColor);
	 color: #fff;
}
 .platPlan .hvr-bubble-float-right:hover:before, .platPlan .hvr-bubble-float-right:focus:before, .platPlan .hvr-bubble-float-right:active:before {
	 -webkit-transform: translateX(10px);
	 transform: translateX(10px);
	 border-color: transparent transparent transparent var( --platHeaderColor);
}


@media screen and (max-width: 991px){

	.priceTableContainer .container{
        flex-direction: column;  
        max-width: 500px;     
        justify-content: space-between; 
    }

	.singlePlan{
		width: 300px;
	}
	

}