@charset "UTF-8";

.pricing-panels--{
 text-align: center	
}

.pricing-panels-->.row{
 row-gap: 30px
}

@media ( min-width: 1200px ){

 .pricing-panels-->.row{
  margin-left: -19px;
  margin-right: -19px
 }
 .pricing-panels-->.row>div{
  padding-left: 19px;
  padding-right: 19px
 }

}

.pricing-panels-- .panel{
 padding: 40px 30px;
 border-radius: 10px
}

.pricing-panels-- .panel.bg-white{
 background-color: #fff;
 box-shadow: 0 3px 10px #0000000d
}
.pricing-panels-- .panel.bg-blue{
 background-color: #e0f3fd;
 box-shadow: 0 3px 10px #0000000d
}
.pricing-panels-- .content{
 margin-top: 50px	
}
.pricing-panels-- .flags{
 margin-top: 50px;
 padding-bottom: 30px
}
.pricing-panels-- .flags table{
 margin-top: 14px;
 margin-left: auto;
 margin-right: auto
}

.pricing-panels-- img,
.pricing-panels-- ul.styled-bullet-points{
 margin-left: auto;
 margin-right: auto 
}

.pricing-panels-- .heading p.h1,
.pricing-panels-- .heading p.h2,
.pricing-panels-- .heading p.h3{
 margin-bottom: 14px;
 color: #171d6e
}

.pricing-panels-- ul.styled-bullet-points{
 display: inline-block;
 text-align: left
}

.pricing-panels-- p.h3{
 margin-top: 30px;
 color: #171D6E
}
.pricing-panels-- span.theprice{
 display: flex;
 align-items: center;
 position: relative;
 width: 180px;
 height: 180px;
 margin: 40px auto 40px auto;
 border-radius: 90px;
 background-color: #fff
}
.pricing-panels-- .panel.bg-white span.theprice{
 background-color: #e0f3fd
}
.pricing-panels-- span.theprice span.peryear{
 flex: 1 1 100%;
 max-width: 100%;
 display: block;
 text-align: center
}
.pricing-panels-- span.theprice span.peryear b{
 display: block;
 font-size: 3rem;
 line-height: 1em;
 font-weight: 700;
 color: #1ba1e8
}
.pricing-panels-- span.theprice span.save{
 position: absolute;
 left: 50%;
 bottom: 0;
 display: block;
 width: 124px;
 margin-left: -62px;
 padding: 4px 0;
 background-color: #171d6e;
 color: #fff;
 border-radius: 10px
}
.pricing-panels-- a.btn{
 width: 100%	
}
.pricing-panels-- a.btn+a.btn{
 margin: 14px 0 0 0
}