.blur{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

a.btn{
  
  text-decoration:none;
 
}

.modal-wrapper{
  width:100%;
  height:100%;
  position:fixed;
  top:0; left:0;
  background:rgba(255,257,153,0.75);
  visibility:hidden;
  opacity:0;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.modal-wrapper.open{
  opacity:1;
  visibility:visible;
  z-index:115;
}

.head{
  width:100%;
  padding:0.5em 3%;
  margin-bottom:20px;
  overflow:hidden;
  background:#ffda6b;
}

.modal{
  
  display:flex;
  justify-content:center;
  
  position:relative;
  top:50%; left:50%;
 background:url("../images/dotss.png");
  background-size: 600px auto;
    background-position: 0 0;
    background-repeat: repeat;
    background-color: white;
  opacity:0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.modal-lc{
  width:900px;
  height:500px;
  display:flex;
  justify-content:center;
  margin:50% 0 0 -450px;
  position:relative;
  top:50%; left:50%;
 background:url("../images/dotss.png");
  background-size: 600px auto;
    background-position: 0 0;
    background-repeat: repeat;
    background-color: white;
  opacity:0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.modal-wrapper.open .modal{
 
  opacity:1;
}

.modal-wrapper.open .modal-lc{
  margin-top:-200px;
  opacity:1;
}

.outline{
    justify-content:center;
    border:1px solid #A57129;
    padding:5%;
    height:92%;
    width:95%;
    align-self: center;
}

.btn-close{
  
    display: block;
    float: right;
    padding-left: 3px;
    padding-top: 3px;
    background: #A57129;
    margin-top: -40px;
    margin-right: -35px;
}


.content{
  padding-bottom:60px;
}
@media (min-width:320px) {
    .dontaion-details{
    font-size:40px;
    padding-top:25px;
    }
    .modal{
        width:800px;
      height:500px;
      margin:50% 0 0 -400px;
    }
    .modal-wrapper.open .modal{
        margin-top:-300px;
    }
    
    .account-heading{
        color:white; font-size:45px; font-weight:700;margin-left:140px;
    }
    .head{
         height:80px;
    }
    .btn-close{
        width: 40px;
        height: 48px;
    }
    .btn-close::before, .btn-close::after{
      content:'';
      width:32px;
      height:10px;
    
      display:block;
      background:white;
    }
    .btn-close::before{
  margin-top:16px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

.btn-close::after{
  margin-top:-10px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
}
@media (min-width:1025px) {
    .dontaion-details{
    font-size:27px;
    padding-top:25px;
    }
    .modal{
        width:600px;
      height:400px;
      margin:50% 0 0 -300px;
    }
    .modal-wrapper.open .modal{
        margin-top:-130px;
    }
    .account-heading{
        color:white; font-size:30px; font-weight:700;margin-left:140px;margin-bottom:30px;
    }
    .head{
         height:60px;
    }
    .btn-close{
        width: 30px;
        height: 35px;
    }
    .btn-close::before, .btn-close::after{
      content:'';
      width:24px;
      height:6px;
    
      display:block;
      background:white;
    }
    .btn-close::before{
  margin-top:12px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

.btn-close::after{
  margin-top:-6px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
}