html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}


img {
   display: block;
    max-width: 100%;
    height: auto;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


html {
   height: 100%;
   width:100%;
   display:table;
}

body {
   margin:0;
   padding:0;
   display:table-cell;
   height:100%;
   width:100%;
   text-align:center;
   vertical-align:middle;
   background:#F79F00;
   background: -webkit-linear-gradient(0deg, #F17F00, #F79F00 30%) no-repeat; 
   background: -o-linear-gradient(0deg, #F17F00, #F79F00 30%) no-repeat; 
   background: -moz-linear-gradient(0deg, #F17F00, #F79F00 30%) no-repeat; 
   background: linear-gradient(0deg, #F17F00, #F79F00 30%) no-repeat;
   font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
}

h1 {margin:0;padding:0}
a, img {outline:0}
a img {border:0}

div.adres button:hover {
   cursor: pointer;
}

#main_container {
   display:inline-block;
   position: relative;
   background:#fff;
   margin:0;
   width:320px;
   min-height: 1050px;
}

#main_container #logo img,
#main_container #identyfikator img,
#main_container #dlugopis img {
   display: inline-block;
}


#main_container #logo {
   position: absolute;
   top:-22px;
   width:100%;
   text-align:center;
}
#main_container #logo img {
    max-width:255px;
    margin-left: 14%;
}

#main_container #identyfikator { 
   position: absolute;
   width:100%;
   top:75px;
   left:-10%;;
   text-align:left;
}
#main_container #identyfikator img {
 max-width:218px;
}

#main_container #dlugopis {
   position:absolute;
   top: 8%;
   right:-18%;
}
#main_container #dlugopis img {
   max-width:118px;
}


/* APTEKI */

#apteki {
   position:absolute;
   top: 300px;
   width:100%;
   padding: 0 25px;
}
#apteki p {
   text-align: left;
}
#apteki p span {
   display: inline-block;
   padding: 0 5px 0 15px;
}
#apteki p span:before { 
   content: "";
   display: inline-block;
   width: 6px;
   height: 6px;
   background-color: #595959;
   position: relative;
   top: -3px;
   left: -8px;
}
#apteki p span.kwadrat-3:before { 
   content: "";
   display: inline-block;
   width: 4px;
   height: 4px;
   background-color: #595959;
   position: relative;
   top: -3px;
   left: -8px;
}

div.adres {
   padding: 0 0 26px 0;
}
p.adres1 {
   padding: 0 0 4px 0;
}
div.adres p span {
   display:inline-block;
}
div.adres button {
   display: inline-block;
   vertical-align: middle;
   border: 0;
   margin:0;
   background: #ffffff;
   padding: 0 0 0 12px;
}
div.adres img {
   display: inline-block;
   position: relative;
   top: 0;
   left: 6px;
}

.zakupy-online {
   position: absolute;
   bottom: 160px;
   left: 23px;
   width: 272px;
   height: 62px;
   background-color: #e51522;
}
.zakupy-online a {
   display: block;
   padding: 18px 0 0 50px;
   text-align: left;
   height: 100%;
   position: relative;
}
   
   

.arrow {
  cursor: pointer;
  display: block;
  width: 15px;
  height: 30px;
  position: absolute;
  top: 15px;
  right: 45px;
   background-color: #e51522;
}
.arrow span {
   background: #fff;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  top: 17px;
  right: 0;
  transform-origin: right 50%;
  transition: width 0.3s, right 0.3s 0.05s;
  width: 0;
}
.zakupy-online:hover .arrow span {
   width: 42px;
   right: -21px;
}
.arrow::before,  
 .arrow::after {
  background: #fff;
  content: "";
  display: block;
  width: 14px;
  height: 2px;
  position: absolute;
  top: 17px;
  right: 0;
  transform-origin: right 50%;
  transition: right 0.3s 0.05s;
}
.arrow::after {
  transform: rotate(45deg);
}
.arrow::before {
  transform: rotate(-45deg);
}
.zakupy-online:hover .arrow::before, 
.zakupy-online:hover .arrow::after {
  right: -21px;
}

.exlibris {
   position: absolute;
   bottom: 20px;
   right: 25px;
}


@media (min-width: 320px) {
   #main_container {
      width:320px;
      min-height: 1050px;
   }
   #main_container #logo {
      position: absolute;
      top:-22px;
      width:100%;
      text-align:center;
   }
   #main_container #logo img {
       max-width:255px;
       margin-left: 14%;
   }
   #main_container #identyfikator { 
      position: absolute;
      width:100%;
      top:75px;
      left:-20%;
   }
   #main_container #identyfikator img {
    max-width:218px;
   }
   #main_container #dlugopis{
      top: 8%;
      right:-18%;
   }
   #main_container #dlugopis img {
    max-width:118px;
   }

   /* APTEKI */

   #apteki {
      top: 280px;
   }
   
}

@media (min-width: 768px) {
   #main_container {
      width:658px;
      min-height: 794px;
      margin:55px 0 35px 0;
   }
   #main_container #logo {
      top:-35px;
   }
   #main_container #logo img {
      max-width:386px;
   }
   #main_container #identyfikator {
      top:-20px;
      left:-8.5%;
   }
   #main_container #identyfikator img {
      max-width:300px;
   }
   #main_container #dlugopis{
      top: 10%;
      right:-3%;
   }
   #main_container #dlugopis img {
      max-width:169px;
   }

   #apteki {
      top: 300px;
      padding: 0 60px;
   }

   .zakupy-online {
      position: absolute;
      bottom: 100px;
      left: 60px;
      width: 272px;
      height: 62px;
   }
}

@media (min-width: 992px) {
   #main_container {
      width:841px;
      min-height: 910px;
      margin:65px 0 35px 0;
   }
   #main_container #logo {
      top:-46px;
   }
   #main_container #logo img {
      max-width:499px;
   }
   #main_container #identyfikator img {
      max-width:375px;
   }
   #main_container #dlugopis {
      top: 19%;
      right:-9%;
   }
   #main_container #dlugopis img {
      max-width:225px;
   }
   #apteki {
      top: 340px;
      padding: 60px 30px 0 120px
   }
   .zakupy-online {
     bottom: 110px;
     left: 120px;
   }
}

@media (min-width: 1200px) {
   #main_container {
      width:984px;
      min-height: 940px;
   }
   #main_container #logo img {
      margin-left: 10%;
   }
   #main_container #identyfikator {
      left: -8%;
      top: -48px;
   }
   #main_container #identyfikator img {
      max-width: 469px;
   }
   #main_container #dlugopis img {
      max-width:100%;
   }

   #apteki {
      padding: 80px 30px 0 200px;
   }

   .zakupy-online {
     bottom: 100px;
     left: 200px;
   }
   

}





div[class*="popup-overlay"] {
   display: none;
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 1000;
   background-color: rgba(0, 0, 0, 0.75);
}
div[class*="popup-overlay"].active {
   display: block;
   text-align: center;
} 
div[class*="popup-content"] {
   visibility: hidden;
   width: 640px;
   height: 525px;
   border: 20px solid #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
div[class*="popup-content"].active {
  visibility: visible;
}

div[class*="popup-overlay"] button {
  display: inline-block;
  vertical-align: middle;
  border: 0;
  margin:0;
  width: 100%;
  height: 35px;
  background: #009139;
  color: #fff;
}





.popup-content iframe {
   width: 300px !important;
}



/* FONTY */


body {
   font-family: 'Lato', sans-serif;
   font-weight: 400;
   line-height: 1.5;
   font-size: 16px;
}  
strong,
#apteki p.adres1,
.adres button,
.zakupy-online a  { 
   font-family: 'Lato', sans-serif;
   font-weight: 700;
}  

#apteki p.adres1 {
  font-size: 15px;
}



#apteki p.adres2,
.adres button {
   font-size: 14px;
}


a {
   text-decoration: none;
}


@media (min-width: 768px) {
   #apteki p.adres1 {
      font-size: 16px;
   }
}

@media (min-width: 992px) {
   #apteki p.adres1 {
      font-size: 18px;
   }
}

/* KOLORY */


.adres button {
   color: #009139;
}

.zakupy-online  a  {
   color: #fff;
}