.right{
  background-image: url('/imageserver/Reusable/royal2020/iStock_000051654888_XXXLarge-min.png');
  background-size:cover;
  height:400px;
  position:relative
}

.right-layer{
    background-color: rgba(255,255,255, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding:0 20px;
    font-weight:600;
}

.top{
     color:#201961;
     font-size:2.5em;
font-family: pragmatica, sans-serif;
font-weight: 900;
font-style: normal;

}

.card1{
   background-image: url('/imageserver/Reusable/royal2020/card1-min.png');
  background-size:cover;
  height:600px;
  position:relative;
  border:1px solid white;
  color:white;

}

.card1-layer{
    background-color: rgba(0,0,0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding:0 20px;

      padding:20px 20px;
}


.card2{
    background-image: url('/imageserver/Reusable/royal2020/card2-min.png');
  background-size:cover;
  height:600px;
  position:relative;
  border:1px solid white;
  color:white;
}

.card2-layer{
    background-color: rgba(0,0,0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    padding:0 20px;

      padding:20px 20px;
}

.card3{
    background-image: url('/imageserver/Reusable/royal2020/card3-min.png');
  background-size:cover;
  height:600px;
  position:relative;
  border:1px solid white;
  color:white;
}

.card3-layer{
    background-color: rgba(0,0,0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding:0 20px;
     padding:20px 20px;
}



.btn {
  color: #201961;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  max-width: 170px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  padding-top:10px;
  margin:20px 0!important;
}

.btn-lrg{
  color: #201961;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  max-width: 270px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  padding-top:10px;
  padding-left:5px;
}

@media (min-width: 600px) {
  .btn {
    margin: 0 1em 2em;
  }
}
.btn:hover {
  text-decoration: none;
}

.btn-1 {
  font-weight: 100;
}
.btn-1 svg {
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.btn-1 rect {
  fill: none;
  stroke: #201961;
  stroke-width: 2;
  stroke-dasharray: 422, 0;
  -webkit-transition: all 0.35s linear;
  transition: all 0.35s linear;
}

.btn-1:hover {
  background: rgba(225, 51, 45, 0);
  font-weight: 900;
  letter-spacing: 1px;
color:#201961;
}
.btn-1:hover rect {
  stroke-width: 5;
  stroke-dasharray: 15, 310;
  stroke-dashoffset: 48;
  -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

  -webkit-text-fill-color: transparent;
  margin-top:40px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}