body {
margin:0; 

background: #231f20;
}

#main
{
 text-align:center;
}

#mainpic
{
  width: 100%;
  margin: 0px;  
}


#s-blanka
{
  width: 1px;
  height: 700px;
}
@media screen and (max-height: 600px) and (max-width: 1000px) { #s-blanka{ top:500px;  }}


#s-logo
{
  position: absolute;
  top: 2%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 1511px;   
}
@media screen and (max-width: 1600px) { #s-logo{width: 95%;}} 
@media screen and (max-width:  500px) { #s-logo{top:  7%;}}
@media screen and (max-width:  350px) { #s-logo{top: 10%;}}

#s-yel1
{
 position: absolute;
 top: 35%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0; 
}
@media screen and (max-width: 1200px) { #s-yel1{ top:25%;  width: 66%; }}
@media screen and (max-height: 600px) { #s-yel1{ top:250px;  }}
@media screen and (max-height: 600px) and (max-width: 1000px) { #s-yel1{ top:150px;  }}


#s-yel2
{
 position: absolute;
 top: 35%;
 left: 51%; 
}
@media screen and (max-width: 1200px) { #s-yel2{  left: 25%; width: 50%; }}
@media screen and (max-height: 600px) { #s-yel2{ top:320px;  }}
@media screen and (max-height: 600px) and (max-width: 1000px) { #s-yel2{ top:220px;  }}


#s-kon1
{
 position: absolute;
 top: 55%;
 right: 80%; 
}
@media screen and (max-width: 1200px) { #s-kon1{ top: 48%;    right: 40%;    width: 200px;}}
@media screen and (max-width:  800px) { #s-kon1{               right: 35%;    width: 30%;}} 
@media screen and (max-height: 600px) { #s-kon1{ top:390px;  }}
@media screen and (max-height: 600px) and (max-width: 1000px) { #s-kon1{ top:290px;  }}


#s-kon2
{
 position: absolute;
 top: 55%;
 right: 31%; 
}
@media screen and (max-width: 1200px) { #s-kon2{ top: 60%; right: 41%; width: 58% }}
@media screen and (max-height: 600px) { #s-kon2{ top:450px;  }}
@media screen and (max-height: 600px) and (max-width: 1000px) { #s-kon2{ top:350px;  }}

#s-kon3
{
 position: absolute;
 top: 55%;
 left: 71%; 
}
@media screen and (max-width: 1200px) { #s-kon3{ top: 60%; left: 61%;  width: 32% }}
@media screen and (max-height: 600px) { #s-kon3{ top:450px;  }}
@media screen and (max-height: 600px) and (max-width: 1000px) { #s-kon3{ top:350px;  }}



#bottompic
{
  height: 20%;
  width: 100%;
  margin: 0px;
  z-index: 100;
  position: fixed;
  bottom: 0;
}

#soc1
{
 position: fixed;
 right: 70%;
 z-index: 200;
 bottom: 5%;
 width: 100px;
}
@media screen and (max-width: 1000px) { #soc1{ width: 10% }}
@media screen and (max-width:  500px) { #soc1{ width: 50px }}       
@media screen and (max-height: 350px) { #soc1{ bottom: 0px; width: 50px}}




#soc2
{
 position: fixed;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0;
 z-index: 200;
 bottom: 5%;         
 width: 100px;
}                              
@media screen and (max-width: 1000px) { #soc2{ width: 10% }}
@media screen and (max-width:  500px) { #soc2{ width: 50px }}             
@media screen and (max-height: 350px) { #soc2{ bottom: 0px; width: 50px}}

#soc3
{
 position: fixed;
 left: 70%;
 z-index: 200;
 bottom: 5%;      
 width: 100px;
}                       
@media screen and (max-width: 1000px) { #soc3{ width: 10% }}
@media screen and (max-width:  500px) { #soc3{ width: 50px }}         
@media screen and (max-height: 350px) { #soc3{ bottom: 0px; width: 50px}}