/* 
 * overlay.css v1.0.0
 * Copyright 2014 Joah Gerstenberg (www.joahg.com)
 */

.overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.79);
  cursor: pointer;

  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.overlay .modal {
  cursor: auto;
  position: absolute;
  z-index: 11;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  max-width: 85%;
  max-height: 80%;
  padding: 20px 0px;
  /*background-color: rgba(5,5,5,.5);*/
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  overflow: auto;
  
}

.overlay.shown {
  opacity: 1;
}

.modal.myproduct{
  overflow: visible;
}

.cominfo{
  background: #fff;
  padding: 25px 15px;
  border-radius: 10px;
}

.poptitle{
  font-size: 2.5em;
  text-align: center;
  margin:0 0 30px 0;
  line-height: 1.2em;
  letter-spacing: 0px;
  color: #154198;
  font-weight: bold;
}

.poparea{
  padding:20px 0px ;
  border-top:1px solid #ccc;
  margin: 0 0 15px 0;
 
}
.poparea:first-child{
  border-top:0px solid #ccc;
}
.poparea:last-child{
  border-right:0px;
}
.popproduct{
  margin:10px 0 8px 0;
  color: #154198;
}

.poplink{
  padding: 10px 0;
}

.links{
  /*background: #f00;*/
  border-radius: 50px;
  padding: 8px 15px;
  text-align: center;
  margin: 5px 0;
  letter-spacing: 0px;
  color: #5A5A5A;
}

.links:hover{
  color: #fff;
  background: #097cf2;
  -o-transition:background .3s linear,box-shadow .3s linear,border .15s linear,transform .15s linear;
  -webkit-transition:background .3s linear,box-shadow .3s linear,border .15s linear,transform .15s linear;
  -moz-transition:background .3s linear,box-shadow .3s linear,border .15s linear,transform .15s linear;
  transition:background .3s linear,box-shadow .3s linear,border .15s linear,transform .15s linear;
  transform: scale(1.1);
  box-shadow: 0px 3px 8px #154198;
  border-radius: 50px;
}

.links i{
  margin: 0 10px 0 0;
}

.popinfo{
  padding: 10px 15px;
  margin: 15px 0 0px 0;
  letter-spacing: 0px;
  font-size: 1.1em;
  color: #787878;
}

.gotoweb{
  background: #154198;
  padding: 10px 5px;
  border-radius: 50px;
  font-size: 1.1em;
  color: #fff;
  letter-spacing: 0px;
}

.gotoweb:hover{
  color: #fff;
  background: #097cf2;
  -o-transition:background .3s linear,box-shadow .3s linear,border .15s linear,transform .15s linear;
  -webkit-transition:background .3s linear,box-shadow .3s linear,border .15s linear,transform .15s linear;
  -moz-transition:background .3s linear,box-shadow .3s linear,border .15s linear,transform .15s linear;
  transition:background .3s linear,box-shadow .3s linear,border .15s linear,transform .15s linear;
  transform: scale(1.1);
  box-shadow: 0px 3px 8px #154198;
}

.closeset{
  position: absolute;
  top:15px;
  right: 15px;
  width: 30px;
  height:30px;
  border:1px solid #aaa;
  border-radius: 50px;
  /*background: violet;*/
  text-align: center;
  line-height: 3.5em;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  -ms-transition: -ms-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;  
  background-image: url(../../image/close.svg);
  background-position: center center;
  background-repeat: no-repeat;
}


.closeset:hover{
  cursor: pointer;
  /*transform: rotate(25deg);*/
  background-color: #222;
  background-image: url(../../image/close-w.svg);
}

@media screen and (min-width: 360px){
  .gotoweb{
  
    padding: 10px 10px;
  }

  .cominfo{

    padding: 25px 30px;

  }

}
@media screen and (min-width: 1000px){

  .gotoweb{
  
    padding: 10px 15px;
  
  }
  .overlay .modal {
  

    max-width: 1000px;
    max-height: 88%;
   padding: 20px 35px;
   max-height: 100%;
   display: flex;
  align-items: center;
  }

  .poparea{
    padding:0 15px ;
    border-right:1px solid #ccc;
    border-top:0px solid #ccc;
   
  }
  .popinfo{
   
    margin: 13px 0 0px 0;
    
  }
  

}

@media screen and (min-width: 1200px){
  .overlay .modal {
    cursor: auto;
    position: absolute;
    z-index: 11;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    max-width: 1000px;
    max-height: 88%;
    overflow:hidden;
  }
}

@media screen and (min-width: 1680px){
  .overlay .modal {
   
    max-width: 1000px;
    max-height: 70%;
  
  }
}