.p-container {
   position: fixed;
   width: 90%;
   max-width: 600px;
   min-height: 10px;
   background-color: #fff;
   -webkit-box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
   box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
   z-index: 9999;
   font-family: sans-serif;
   -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* IE10+/Edge */
   user-select: none; /* Standard */
}
.p-container.top-left {
   top: 10px;
   left: 10px;
}
.p-container.top-right {
   top: 10px;
   right: 0px;
}
.p-container.top-center {
   top: 10px;
   left: calc(100vw - 100vw/2 - 400px/2);
}
.p-container.bottom-left {
   bottom: 10px;
   left: 10px;
}
.p-container.bottom-right {
   bottom: 10px;
   right: 10px;
}
.p-container.bottom-center {
   bottom: 10px;
   left: calc(100vw - 100vw/2 - 400px/2);
}
.p-container.show.top-left, .p-container.show.top-center, .p-container.show.top-right {
   -webkit-animation-name: popin-top;
   animation-name: popin-top;
   -webkit-animation-duration: 2s;
   animation-duration: 2s;
   -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
   animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
}
.p-container.show.bottom-left, .p-container.show.bottom-center, .p-container.show.bottom-right {
   -webkit-animation-name: popin-bottom;
   animation-name: popin-bottom;
   -webkit-animation-duration: 2s;
   animation-duration: 2s;
   -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
   animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
}
.p-container.hide {
   display: none;
}
.p-content {
   position: relative;
   padding: 5px;
   min-height: 47px;
   background: #e1ffff;
   background: -moz-linear-gradient(-45deg, #e1ffff 0%, #e1ffff 7%, #e1ffff 12%,
                     #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%);
   background: -webkit-linear-gradient(-45deg, #e1ffff 0%, #e1ffff 7%,
                     #e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
   background: linear-gradient(135deg, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,
                     #fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff',
                     endColorstr='#b1d8f5',GradientType=1 );
   border-radius: 5px;
   border: none;
}
.cookie-image {
   display: inline-block;
   margin: 1px 0 0 1px;
   float: left;
}
.text-message {
   display: inline-block;
   float: left;
   margin: 10px 0 0 40px;
   text-align: left;
   font-size: 12px;
   color: darkblue;
}
.agree-button {
   display: inline-block;
   float: left;
   margin: -40px 0 0 510px;
   padding: 5px 10px;
   background: snow;
   cursor: pointer;
   border-radius: 30px;
   border: none;
   font-size: 13px;
   text-decoration: none;
   color: blue;
}
.agree-button:hover {
   background-color: dodgerblue;
   color: white;
}

@-webkit-keyframes popin-bottom {
   0% {
       -webkit-transform: translateY(120%);
       transform: translateY(120%);
  }
   100% {
       -webkit-transform: translateY(0px);
       transform: translateY(0px);
  }
}
@keyframes popin-bottom {
   0% {
       -webkit-transform: translateY(120%);
       transform: translateY(120%);
  }
   100% {
       -webkit-transform: translateY(0px);
       transform: translateY(0px);
  }
}
@-webkit-keyframes popin-top {
  0% {
       -webkit-transform: translateY(-120%);
       transform: translateY(-120%);
  }
   100% {
       -webkit-transform: translateY(0px);
       transform: translateY(0px);
  }
}
@keyframes popin-top {
  0% {
       -webkit-transform: translateY(-120%);
       transform: translateY(-120%);
  }
   100% {
       -webkit-transform: translateY(0px);
       transform: translateY(0px);
  }
}


  /*
  -- screen min width --
     320px : smartphones, portrait iPhone, portrait 480x320 phones (Android)
     480px : smartphones, Android phones, landscape iPhone
     600px : portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android)
     801px : tablet, landscape iPad, lo-res laptops ands desktops
     1025px: big landscape tablets, laptops, and desktops
     1281px: hi-res laptops and desktops
  */

@media (max-width:320px)   {
}
@media (max-width:480px)   { /* phone portrait  */
}
@media (max-width:600px)   { /* phone landscape, ipad portrait */
   .p-content { min-height: 90px; }
   .text-message { margin-top: -15px; margin-left: 5px; }
   .agree-button { margin: -80px 0 0 310px;}
}
@media (min-width:801px)   {                                        } /* ipad portrait   */
@media (min-width:1025px)  {                                        } /* ipad landscape  */