body {
	background-image: url(../img/tlokratka1.png);
	background-repeat: repeat;
	background-position:  center center;
margin: 0;
	padding: 0;
	box-sizing: border-box;

  

  
}

.illustration img {
  
  display: block;
}
  
  /* This gets Google to fall into place */
    .social {
        font-size: 1px;
        margin: 2px;
          display: inline-block;
          padding: 10px;
        width: 300px;
    }

    /* This gets Facebook to fall into place */
    .social iframe {
        vertical-align: bottom;
    }

    /* Set an optional width for your button wrappers */
    .social span {
        display: inline-block;
        width: 100px;
    }

    /* Adjust the widths individually if you like */
    .social .google {
        width: 75px;
    }

.wrap {
  
position: absolute;
  top: 0%;
  left: 50%;
  transform:translate(-50%, 0);
  
  width: 100%;
 
 
}

div.motywacja button {
    background:url(../img/przyciskgenerujmotywacje.png) no-repeat ;
    background-position:  center;
    background-size:      contain;
    background-repeat:    no-repeat;
	color: transparent;
  	cursor:pointer;
    width: 250px;
    height:40px;
    border: none;
}

.guzik-content {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0);
}

div.belkot button {
    background:url(../img/przyciskkorpobelkot.png) ;
    background-position:  center;
    background-size:      contain;
    background-repeat:    no-repeat;
	color: transparent;
  	cursor:pointer;
    width: 250px;
    height: 40px;
    border: none;
}

.mazniecie-content {
    position: absolute;
    bottom: 60%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 300px;
  
}
  
  
.guzik-content {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 20%);
}
.socjalne {
    position: relative;
   
    margin: 5px;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
     
}
a:link, a:visited, a:hover { 
    color:#808080;
    text-decoration: underline;
    cursor: pointer;
}


   .wrap .mazniecie1  {
	position: relative;
	visibility: visible;
	opacity: 1;
	background-position:  center;
	background-size:      cover;
	background-repeat:    no-repeat;
	top: 0px;
	margin-bottom: 5px;
	left:50%;
	height: 130px;
	background-image: url(../img/mazniecie.png);
	transform: translate(-50%, 0);
	
}   
  


 .wrap .mazniecie2  {
	position: relative;
	visibility: visible;
	opacity: 1;
	background-position:  center;
	background-size:      cover;
	background-repeat:    no-repeat;
	left:50%;
	height: 130px;
	background-image: url(../img/mazniecie.png);
	transform: translate(-50%, 0);
}
.box { 
	position: relative;
	margin: 2px; 
	text-align: center;
	top: 0%;
	left: 50%;
	font-size: 0.95em;
	transform: translate(-50%, 0);
}

.box-content {
	 position: relative;
    top: 0%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,0%);
    font-size: 0.85em;
}

#four { 
  	position: relative;
   	margin: 0px; 
  	text-align: center;
 	top: 10px;
  	left: 50%;
   	transform: translate(-50%, 0);
}
#five { 
  	position: relative;
  	display:inline-block;
   	margin-top: 15px; 
  	text-align: center;
   	left: 50%;
   	transform: translate(-50%, 0);
}

 

 
 .reklama { width: 320px; height: 100px; }

 @media screen
  and (min-width: 780px)
  and (min-height: 440px) {

   .reklama { width: 728px; height: 90px; }
   

.mazniecie-content {
    position: absolute;
    bottom: 60%;
    left: 50%;
    transform: translate(-50%, 50%);
    min-width: 320px;
    
}
.wrap .logo  {
	display: block;
     position: relative;
     background-position:  center;
     background-size:      contain;
     background-repeat:    no-repeat;
     
	 top:0%;
     left:50%;
    min-width: 300px;
     max-width: 600px;
     width: 60%;
     min-height: 0px;
     max-height: 5px;
     height: 60%;
     /* background-image: url(../img/logo.png); */
      transform: translate(-50%, 0);
   }
 




   .logo-content1 
   {
	   position: absolute;
	   bottom: 10%;
	   left: 15%;
	   
   }
   .logo-content2 
   {
	   position: absolute;
	   bottom: 10%;
	   right: 5%;
	   
   }

    .wrap .telefon  {
     position: absolute;
     visibility: visible;
     opacity: 1;

     background-position:  center;
     background-size:      contain;
     background-repeat:    no-repeat;

     
 }
 
 
  .wrap .telefon {
     top: 5%;
     left: 10%;
 
   }
   .wrap .telefon {
        min-width: 166px;
     max-width: 250px;
     width: 27.53353260869565%;
     min-height: 132px;
     max-height: 250px;
     height: 30%;
     background-image: url(../img/telefonkabel.png);
     transform: translate(-11%, 0);
   }
  
      .wrap .wykres  {
     position: absolute;
     visibility: visible;
     opacity: 1;

     background-position:  center;
     background-size:      contain;
     background-repeat:    no-repeat;

  
 }
  .wrap .wykres {
	  top: 0;
     right: 10%;
     
   }
    
   .wrap .wykres {
      min-width: 166px;
     max-width: 250px;
     width: 27.53353260869565%;
     min-height: 132px;
     max-height: 250px;
     height: 30%;
     background-image: url(../img/kawa.png);
     transform: translate(-11%, 0);
   }
   
   
    .wrap .klawiatura  {
     position: absolute;
     visibility: visible;
     opacity: 1;

     background-position:  center;
     background-size:      contain;
     background-repeat:    no-repeat;

   
 }
  .wrap .klawiatura {
	  bottom: 0%;
     left: 10%;
     
   }
    
   .wrap .klawiatura {
	   z-index: -1;
       min-width: 166px;
     max-width: 250px;
     width: 27.53353260869565%;
     min-height: 132px;
     max-height: 250px;
     height: 30%;
     background-image: url(../img/klawiatura.png);
     transform: translate(-11%, 0);
   }
   
   
      .wrap .kawa  {
     position: absolute;
     visibility: visible;
     opacity: 1;
z-index: -1;
     background-position:  center;
     background-size:      contain;
     background-repeat:    no-repeat;

 }
  .wrap .kawa {
	  bottom: 0%;
     right: 5%;
     
   }
    
   .wrap .kawa {
     min-width: 100px;
     width: 27.53353260869565%;
     min-height: 100px;
     height: 30%;
     background-image: url(../img/wykres.png);
     transform: translate(-11%, 0);
   }
   
   
      .wrap .strzalka  {
     position: absolute;
     visibility: visible;
     opacity: 1;

     background-position:  center;
     background-size:      contain;
     background-repeat:    no-repeat;

 }
  .wrap .strzalka {
	  bottom: 60%;
     right: 10%;
     
   }
    
   .wrap .strzalka {
     min-width: 50px;
     width: 15%;
     min-height: 50px;
     height: 15%;
     background-image: url(../img/strzalka.svg);
     transform: translate(-20%, 5%);
   }
   
   
   
    .wrap .kropki  {
     position: absolute;
     visibility: visible;
     opacity: 1;

     background-position:  center;
     background-size:      contain;
     background-repeat:    no-repeat;

 }
  .wrap .kropki {
	  top: 0%;
     right: 50%;
     z-index: -1;
   }
    
   .wrap .kropki {
     min-width: 720px;
     width: 27.53353260869565%;
     min-height: 440px;
     height: 30%;
     background-image: url(../img/kropki.png);
     transform: translate(50%, 0%);
   }
button:focus {outline:0;}
   
   div.belkot button {
    background:url(../img/przyciskkorpobelkot.png)no-repeat ;
    background-position:  center;
    background-size:      contain;
    background-repeat:    no-repeat;
	color: transparent;
  	cursor:pointer;
    width: 300px;
    height:60px;
    border: none;
}
  div.motywacja button {
    background:url(../img/przyciskgenerujmotywacje.png) no-repeat ;
    background-position:  center;
    background-size:      contain;
    background-repeat:    no-repeat;
	color: transparent;
  	cursor:pointer;
    width: 300px;
    height:60px;
    border: none;
}
.box { 
	position: relative;
	margin-top: -7px; 
	text-align: center;
	
	left: 50%;
	font-size: 1em;
	transform: translate(-50%, 0);
	min-width: 720px;
	
}

.mazniecie-content {
    position: absolute;
    bottom: 60%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 720px;
  
}
.box-content{
	 position: relative;
   top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
    font-size: 0.9em;
    margin: 0px;
}
  .wrap .mazniecie1  {
	position: relative;
	visibility: visible;
	opacity: 1;
	background-position:  center;
	background-size:      contain;
	background-repeat:    no-repeat;
	margin-bottom: 5px;
	top: -10px;
	left:50%;
	height: 130px;
	background-image: url(../img/mazniecie.png);
	transform: translate(-50%, 0);
} 
.wrap .mazniecie2  {
	position: relative;
	visibility: visible;
	opacity: 1;
	background-position:  center;
	background-size:      contain;
	background-repeat:    no-repeat;
	margin-bottom: 5px;
	top: -10px;
	left:50%;
	height: 130px;
	background-image: url(../img/mazniecie.png);
	transform: translate(-50%, 0);
}
}

.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 780px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 1680px) { .example_responsive_1 { width: 728px; height: 90px; } }