/* Updates for Tier and States Thank You Page Tests 5/9/2022 */


/* Plans */
.plans-container{
	width:100%;
	padding:20px;
	background:#efefef;
}

.plans-container .plan{
	display: flex;
	background:#EBF7FA;
	padding:20px;
	border:1px solid #ccc;
	margin:.5em auto;
	border-radius: 5px;
	align-items: center;
	justify-content: center;
}

.plan__bullets{
	display:flex;
	flex-direction: column;
}

.plan__bullets ul{
	margin-bottom:0;
}

.plans-container .plan .plan__name{
	font-size:16px;
	font-weight: bold;
	text-align: left;
}
.plan__name, .plan__image{
	height:100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.plans-container .plan div{
	width:100%;
}
.plans-container .plan img{
	max-width:200px;
	width:100%;
	margin:20px auto;
}

.jumbotron{
	width:100%;
}

a.cta-button{
	display:inline-block;
	padding:15px 30px;
	background:rgb(255, 153, 0);
	border:3px solid white;
	text-align: center;
	color:white;
	border-radius: 10px;
	width:100%;
	font-weight: bold;
	font-size: 20px;
	
}

/* Tier Plan */

 	.plans-container.tier{
		 display: grid;
          align-content: center;
          grid-auto-rows: 1fr;
          grid-column-gap: 20px;
          grid-row-gap: 20px;
		 grid-template-columns: repeat(3, 1fr);
	 }
	 .plans-container.tier .plan{
		 padding:0 0 20px 0;
		 overflow: hidden;
		 justify-content: flex-start;
		 flex-direction: column;
		 position: relative;
		 padding-bottom:100px;
	 }
	 
	 .plans-container.tier .plan h3{
		background: #007acc;
        padding: 20px;
        color: white;
		 width:100%;
		 text-align: center;
		 margin:0;
		 margin-bottom:10px;
		 
	 }
	 
	 .plans-container.tier .plan .plan__name{
		 height:auto;
	 }
	 
	 .plans-container.tier .plan .plan__pricing,
	 .plans-container.tier .plan .plan__bullets,
	 .plans-container.tier .plan .plan__phone{
		 padding-left:20px;
		 padding-right:20px;
	 }

.plans-container.tier .plan .plan__pricing{
	font-size:40px;
	font-weight: bold;
}

    .plans-container.tier .plan .plan__phone{
		position:absolute;
		bottom:20px;
    }
	 
	 .tier table{
		 background:white;
		 border:none;
	 }
	 
	 .tier table tr td, .tier table tr{
		 border-color:#EBF7FA;
		 border-width: 3px;
	 }
	 
	 .tier td.price{
		 width:75px;
		 font-size:18px;
		 font-weight: bold;
		 text-align: center;
	 }
	 
	  .tier td.type{
		font-size:16px;
		  padding-left:15px;
	 }
        img{
             max-width:100%;
         }
	 
         .popup-wrapper{
             height:100%;
             width:100%;
             position: fixed;
             z-index: 1000;
             left:0;
             top:0;
             display: none;
         }

         .popup-wrapper:before{
             content:'';
             position: absolute;
             left:0;
             top:0;
             width:100%;
             height:100%;
             background:black;
             opacity: .7;
             z-index: 1001;
         }

         .popup-inner{
             width:100%;
             height:100%;
             display:flex;
             position: relative;
             z-index: 1002;
             display:flex;
             align-content: center;
             justify-content: center;
			 align-items: center;
         }
	 
	  	.popup-before{
		  	content:'';
             width:100%;
             height:100%;
             position:absolute;
             z-index: 1;
         }
	 
         .popup-content {
            max-width: 800px;
            width: 96%;
            height: auto;
            text-align: center;
            background-color: #e8eae6;
            box-sizing: border-box;
            z-index: 2;
            position: relative;
            /*to hide popup initially*/
			 border-radius: 10px;    
			 padding-bottom: 30px;
			 overflow: hidden;
         }
	 
         .popup-content img{
             max-width:200px;
         }
          
        .close-btn {
            position: absolute;
            right: 3px;
            top: -3px;
            /* background-color: black; */
            color: #333;
            border-radius: 50%;
            padding: 4px;
            cursor: pointer;
            font-size: 25px;
            line-height: 25px;
        }
	 
	 .popup-img{
		 margin:20px;
	 }
	 
	 .popup-content h3{
		background: #007acc;
        padding: 20px;
        color: white;
	 }
	 
	 .popup-description, .popup-phone{
		 padding-left:20px;
		 padding-right:20px;
	 }
      .hide-desktop{
          display:none;
      }

      .plans-container.states a.callmodal{
          display:block;
      }
      .plans-container.states a.tapcall{
          display:none;
      }

      .plans-container.tier a.tapcall{
          display:none;
      }
@media screen and (max-width: 759px) {
	.plans-container.states a.callmodal{
        display:none;
    }
	
	.plans-container.states .plan__name, .plans-container.states .plan__image{
		height:auto;
	}
	
	.plans-container.states .plan__desc{
        text-align: center;
    }
	
	.plans-container.tier .plan__pricing{
        text-align: center;
    }
	
	.plans-container.states .plan__bullets{
       margin:20px 0;
    }
	
    .plans-container.states a.tapcall{
        display:block;
    }

	.plans-container.tier{
		grid-template-columns: repeat(1, 1fr);
	}
	.plans-container .plan{
		width:100%;
		flex-direction: column;
	}
}