@charset "utf-8";

/* CSS Document */

@font-face {

   font-family: 'renue';

  src: url('../renuecyr-bold.ttf');

}

@font-face {

   font-family: 'B52';

  src: url('../B52.ttf');

}

a {
  outline: none;
  border: none;
}

a:hover, a:active, a:focus, a:visited {
  outline: none;
  border: none;
}

* { 

    margin:0; 

    padding:0; 

    outline:none;

    -webkit-box-sizing:border-box;

    -moz-box-sizing:border-box;

    box-sizing:border-box;

}

.igla {

    top: 8.2%;

}

#service .hangen a{

	display: block;

	width: 100%;

	height: 100%;

	background: url(../img/servicesEng/hangen.png) no-repeat;

	background-position: center;

	z-index: 1000 !important;

}

#service .hangen a:hover{

	display: block;

	width: 100%;

	height: 100%;

	background: url(../img/servicesEng/hangenH.png) no-repeat;

	background-position: center;

	z-index: 1000 !important;

}

#service .preprint a{

	display: block;

	width: 100%;

	height: 100%;

	background: url(../img/servicesEng/preprint.png) no-repeat;

	background-position: center;

	z-index: 1000 !important;

}

#service .preprint a:hover{

	display: block;

	width: 100%;

	height: 100%;

	background: url(../img/servicesEng/preprintH.png) no-repeat;

	background-position: center;

	z-index: 1000 !important;

}

#service .adv a{

	display: block;

	width: 100%;

	height: 100%;

	background: url(../img/servicesEng/adv.png) no-repeat !important;

	background-position: center !important;

	z-index: 1000 !important;

}

#service .adv a:hover{

	display: block;

	width: 100%;

	height: 100%;

	background: url(../img/servicesEng/advHover.png) no-repeat !important;

	background-position: center !important;

	z-index: 1000 !important;

}

#service .web a{

	display: block;

	width: 100%;

	height: 100%;

	background: url(../img/servicesEng/web.png) no-repeat;

	background-position: center;

	z-index: 1000 !important;

}

#service .web a:hover{

	display: block;

	width: 100%;

	height: 100%;

	background: url(../img/servicesEng/webH.png) no-repeat;

	background-position: center;

	z-index: 1000 !important;

}

#asphalt {

	position: relative;

}

#asphalt #fox{

	position: absolute !important;

	margin-top: 9% !important;

 	margin-left: 10% !important;

    -webkit-animation: foxMove 6s infinite; /* Chrome, Safari, Opera */

    -webkit-animation-direction: normal; /* Chrome, Safari, Opera */

    animation: foxMove 6s infinite;

    animation-direction: normal;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes foxMove {

    0%   {left: -900px; top: 0;}

    25%  {left: 0; top: 0;}

    50%  {left: 3500px; top: 0px;}

    75%  {left: 3500px; top: 0px;}

    100% {left: -900px; top: 800px;}

}

@keyframes foxMove {

    0%   {left: -900px; top: 0;}

    25%  {left: 0; top: 0;}

    50%  {left: 3500px; top: 0px;}

    75%  {left: 3500px; top: 0px;}

    100% {left: -900px; top: 800px;}

}

.ship {

	position: relative;

	margin-top: 0px !important;

	padding-top: 0px !important;

}

#us {

	position: relative;

	z-index: 10000;

}

#us .bobi{

	position: absolute;

    opacity: 0;

    top: 9.1%;

    left: 11.45%;

    width: 20.37%;

  height: 29.4%;

}

#us .nevena{

    position: absolute;

    opacity: 0;

    bottom: 30.6%;

    left: 39%;

    width: 14%;

    height: 25.5%;

}

#us .megi{

    position: absolute;

    opacity: 0;

    bottom: 26%;

    left: 25%;

    width: 11%;

    height: 25.5%;

}

#us .miro{

    position: absolute;

    opacity: 0;

    bottom: 25.7%;

    left: 8.8%;

    width: 14.2%;

    height: 27.5%;

}

#us .cveti{

    position: absolute;

    opacity: 0;

    top: 10.7%;

    right: 13.5%;

    width: 16.75%;

    height: 41.4%;

}

#us .branka {

    position: absolute;

    opacity: 0;

    top: 26.7%;

    left: 40.4%;

    width: 12.58%;

    height: 8.52%;

}

#us .ico {

    position: absolute;

    opacity: 0;

    bottom: 0.1%;

  right: 13%;

  width: 17%;

  height: 42.4%;

}

#us .nevena:hover, #us .megi:hover, #us .miro:hover, #us .cveti:hover, #us .branka:hover, #us .ico:hover, #us .bobi:hover  {

   opacity: 1;

   cursor:pointer;

   transition: all .4s ease;

   webkit-transition: all .4s ease;

   moz-transition: all .4s ease;

   z-index: 10000;

}

footer {

	position: relative;

	float: left;

	width: 100%;

}


footer p {

	position: absolute;

	top: 35.55%;

    left: 19.2%;

	color: #222;

	font-size: 1.3em;

	text-align: center;

	-ms-transform: rotate(25deg); /* IE 9 */

    -webkit-transform: rotate(25deg); /* Chrome, Safari, Opera */

    transform: rotate(25deg);

}

footer a {

  position: absolute;

  top: 50.7%;

    left: 14.2%;

  color: #222 !important;

  font-size: 1.3em;

  text-align: center;

  -ms-transform: rotate(25deg); /* IE 9 */

    -webkit-transform: rotate(25deg); /* Chrome, Safari, Opera */

    transform: rotate(25deg);

}

/*  --------------------   @media   ---------------------------------------------------*/

@media only screen and (min-width: 320px) and (max-width: 479px) {



    h1 {

        font-size: 1.7em;

    }



    header p {

    	font-size: 1em;

	}

	header {

		position: relative;

         height:230px;

    }

    .vinyl {

    width: 200px;

    height: 200px;

    top: 2%;

  	left: -15%;

    background: url(../img/vinyl320.png) no-repeat;

    background-position: center;

    }

    .igla {

  	display: none;

    }

    #nav {

	position: fixed;

	width: 80px;

	height: 90%;

	top: -630px;

	right: 1%;

	background: url(../img/menuSmall.png) no-repeat;

	z-index: 10020;

}

#nav ul {

	list-style: none;

	margin-top: 0;

}

#nav ul li {

	display: block;

	height: 35px;

	margin-bottom: 28px;

}

#nav ul li a{

	display: block;

	text-decoration: none;

	width: 80px;

	height: 55px;

}

#aquaman {

	display: none; 

}

#aquamanAir {

	position: fixed;

	top: -1050px;

    right: 1%;

    width: 120px;

    height: 1020px;

    z-index: 10010; 

}

#aquamanAir.animate {

  transform: translate(0,42em);

  -moz-transform: translate(0,42em);

  -webkit-transform: translate(0,42em);

}

/* -------------------------------------------------------------------------------------------- */

    #submarine img {

	width: 90%;

	height: 90%;

	}

	header .scrollImg {

	margin-top:20px;

	width: 40px;

	height: auto;

	}

	#submarine a {

	width: 9.8%;

	height: 21.85%;

	}

	.firstBut {

    position: absolute;

    top: 58.13%;

    left: 16.75%;

	}

	.secondBut {

    position: absolute;

    top: 58.13%;

    left: 34%;

	}

	.thirdBut {

    position: absolute;

    top: 58.13%;

    left: 51.05%;

	}

	.fourthBut {

    position: absolute;

    top: 58.13%;

    left: 68.05%;

	}

	#infocloud {

	display: none;

	}

    #truck {

    	width: 30%;

		height: 30%;

    }

    #service {

    	  top: 6%;

  		  left: 3.2%;

  		  width: 17%;

    }

#scroll .Ctext p {

    font-size: 0.5em;

}

    #service .hangen a{

	background: url(../img/servicesEng/hangen2.png) no-repeat;

	background-position: center;

}

#service .hangen a:hover{

	text-align: center;

	background: url(../img/servicesEng/hangen2H.png) no-repeat;

	background-position: center;

}

#service .preprint a{

	text-align: center;

	background: url(../img/servicesEng/preprint2.png) no-repeat;

	background-position: center;

}

#service .preprint a:hover{

	text-align: center;

	background: url(../img/servicesEng/preprint2H.png) no-repeat;

	background-position: center;

}

#service .adv a{

	text-align: center !important;

	background: url(../img/servicesEng/adv2.png) no-repeat !important;

	background-position: center !important;

}

#service .adv a:hover{

	text-align: center;

	background: url(../img/servicesEng/adv2H.png) no-repeat !important;

	background-position: center;

}

#service .web a{

	background: url(../img/servicesEng/web2.png) no-repeat;

	background-position: center;

}

#service .web a:hover{

	background: url(../img/servicesEng/web2H.png) no-repeat;

	background-position: center;

    }

    #contact p.renue {

	font-size: 0.8em;

}

#asphalt p.asphaltTxt {

	font-size: 1.8em;

}

#fox {

	display: none;

}

    footer p {

  	position: absolute;

  	bottom: 5.5%;

  	left: 13.6%;

  	color: #222;

  	font-size: 0.1em;

  	line-height: 1.15em;

    }

	footer a {

  bottom: 3.5%;

    left: 10.2%;

  font-size: 0.1em;

  line-height: 1.15em;

}

}

@media only screen and (min-width: 320px) and (max-width: 359px) {

	#service {

  		left: 8%;		

	}

}

@media only screen and (min-width: 480px) and (max-width: 639px) {

    h1 {

        font-size: 1.9em;

    }

    header p {

    font-size: 1.2em;

}

header {

         height: 350px;

    }

	#infocloud {

	display: none;

	}

    #truck {

    	width: 30%;

		height: 30%;

    }

    #nav {

    	width: 80px;

	height: 90%;

	top: -630px;

	right: 1%;

	background: url(../img/menuSmall.png) no-repeat;

	z-index: 10020;

    }

    #aquamanAir {

	position: fixed;

	top: -1050px;

    right: 1%;

    width: 120px;

    height: 1020px;

    z-index: 10010; 

	}

	#aquamanAir.animate {

  transform: translate(0,42em);

  -moz-transform: translate(0,42em);

  -webkit-transform: translate(0,42em);

}

    #service {

    left: 2.5%;

  	top: 3.5%;

    }

    .vinyl {

    width: 200px;

    height: 200px;

    top: 2%;

  	left: -8%;

    background: url(../img/vinyl320.png) no-repeat;

    background-position: center;

    }

    .igla {

    	display: none;

    }

    #service .hangen a{

	background: url(../img/servicesEng/hangen2.png) no-repeat;

	background-position: center;

}

#scroll .Ctext p {

    font-size: 0.57em;

}

#service .hangen a:hover{

	text-align: center;

	background: url(../img/servicesEng/hangen2H.png) no-repeat;

	background-position: center;

}

#service .preprint a{

	text-align: center;

	background: url(../img/servicesEng/preprint2.png) no-repeat;

	background-position: center;

}

#service .preprint a:hover{

	text-align: center;

	background: url(../img/servicesEng/preprint2H.png) no-repeat;

	background-position: center;

}

#service .adv a{

	text-align: center;

	background: url(../img/servicesEng/adv2.png) no-repeat !important;

	background-position: center;

}

#service .adv a:hover{

	text-align: center;

	background: url(../img/servicesEng/adv2H.png) no-repeat !important;

	background-position: center;

}

#service .web a{

	background: url(../img/servicesEng/web2.png) no-repeat;

	background-position: center;

}

#service .web a:hover{

	background: url(../img/servicesEng/web2H.png) no-repeat;

	background-position: center;

    }

    #contact p.renue {

	font-size: 1.3em;

}

#asphalt p.asphaltTxt {

	font-size: 1.8em;

}

    footer p {

  	position: absolute;

  	bottom: 6.5%;

  left: 16.6%;

  	color: #222;

  	font-size: 0.1em;

  	line-height: 1.15em;

    }

    footer a {

  bottom: 3.5%;

    left: 11.2%;

  font-size: 0.1em;

  line-height: 1.15em;

}

}

/* iphone 5*/

@media only screen and (min-width: 640px) and (max-width: 749px){  

	h1 {

        font-size: 2.2em;

    }

    header p {

    font-size: 1.2em;

	}

	header {

         height: 290px;

    }

    header .scrollImg {

	margin-top:15px;

	width: 38px;

	height: auto;

	}

	#aquaman {

		display: none;

	}

	#aquamanAir {

 		right: 1.5%;

	}

	#nav {

		width: 24%;

  		height: 90%;

  		top: -630px;

  		right: 0.75%;

	}

	#scroll .Ctext p {

    font-size: 0.75em;

	}

	.vinyl {

    width: 540px;

    height: 540px;

    top: -17%;

  	left: -24.5%;

    background: url(../img/vinyl768.png) no-repeat;

    background-position: center;

    }

    .igla {

  	width: 230px;

  	height: 270px;

  	left: -19%;

  	top: 2%;

  	background: url(../img/igla768.png) no-repeat;

  	background-position: center;

    }

    #service {

    	top: 5%;

  		left: 8%;

    }

    #service .hangen a{

	background: url(../img/servicesEng/hangen1.png) no-repeat;

	background-position: center;

}

#service .hangen a:hover{

	text-align: center;

	background: url(../img/servicesEng/hangen1H.png) no-repeat;

	background-position: center;

}

#service .preprint a{

	text-align: center;

	background: url(../img/servicesEng/preprint1.png) no-repeat;

	background-position: center;

}

#service .preprint a:hover{

	text-align: center;

	background: url(../img/servicesEng/preprint1H.png) no-repeat;

	background-position: center;

}

#service .adv a{

	text-align: center;

	background: url(../img/servicesEng/adv1.png) no-repeat;

	background-position: center;

}

#service .adv a:hover{

	text-align: center;

	background: url(../img/servicesEng/adv1H.png) no-repeat;

	background-position: center;

}

#service .web a{

	background: url(../img/servicesEng/web1.png) no-repeat;

	background-position: center;

}

#service .web a:hover{

	background: url(../img/servicesEng/web1H.png) no-repeat;

	background-position: center;

    }

     #contact p.renue {

	font-size: 1.3em;

	left: 48%;

  	top: 23%;

}

#asphalt p.asphaltTxt {

	font-size: 2em;

	left: 42%;

}

    footer p {

  	position: absolute;

  	top: 33.3%;

  	left: 14.5%;

  	color: #222;

  	font-size: 0.9em;

  	line-height: 1.2em;

    }

    footer a {

  top: 50.3%;
    left: 12.2%;
  font-size: 0.9em;
  line-height: 1.2em;

}

}

@media only screen and (min-width: 750px) and (max-width: 959px) {

    h1 {

        font-size: 2.2em;

    }

    header p {

    font-size: 1.2em;

	}

	header {

         height: 290px;

    }

    header .scrollImg {

	margin-top:15px;

	width: 38px;

	height: auto;

	}

	#aquaman {

		display: none;

	}

	#nav {

		width: 19.6%;

  		height: 90%;

  		top: -630px;

  		right: 0.75%;

	}

	#scroll .Ctext p {

    font-size: 0.89em;

	}

	.vinyl {

    width: 540px;

    height: 540px;

    top: -7%;

    left: -12.5%;

    background: url(../img/vinyl768.png) no-repeat;

    background-position: center;

    }

    .igla {

  	width: 230px;

  	height: 270px;

  	background: url(../img/igla768.png) no-repeat;

  	background-position: center;

    }

    #service {

    	top: 10%;

  		left: 12.5%;

    }

    #service .hangen a{

	background: url(../img/servicesEng/hangen1.png) no-repeat;

	background-position: center;

}

#service .hangen a:hover{

	text-align: center;

	background: url(../img/servicesEng/hangen1H.png) no-repeat;

	background-position: center;

}

#service .preprint a{

	text-align: center;

	background: url(../img/servicesEng/preprint1.png) no-repeat;

	background-position: center;

}

#service .preprint a:hover{

	text-align: center;

	background: url(../img/servicesEng/preprint1H.png) no-repeat;

	background-position: center;

}

#service .adv a{

	text-align: center;

	background: url(../img/servicesEng/adv1.png) no-repeat;

	background-position: center;

}

#service .adv a:hover{

	text-align: center;

	background: url(../img/servicesEng/adv1H.png) no-repeat;

	background-position: center;

}

#service .web a{

	background: url(../img/servicesEng/web1.png) no-repeat;

	background-position: center;

}

#service .web a:hover{

	background: url(../img/servicesEng/web1H.png) no-repeat;

	background-position: center;

    }

     #contact p.renue {

	font-size: 1.4em;

	left: 49%;

  	top: 23%;

}

#asphalt p.asphaltTxt {

	font-size: 2em;

	left: 42%;

}

    footer p {

  	position: absolute;

  	bottom: 6.55%;

  	left: 16.6%;

  	color: #222;

  	font-size: 0.9em;

  	line-height: 1.3em;

    }

}

@media only screen and (min-width: 960px) and (max-width: 1159px) {

	#nav {

  		

  		width: 15.4%;

	}

    .vinyl {

    width: 540px;

    height: 540px;

    background: url(../img/vinyl1024.png) no-repeat;

    background-position: center;

    }

    .igla {

  	width: 230px;

  	height: 270px;

  	background: url(../img/igla1024.png) no-repeat;

  	background-position: center;

    }

  #service .hangen a{

  	text-align: center;

	background: url(../img/servicesEng/hangen1.png) no-repeat;

	background-position: center;

}

#service .hangen a:hover{

	text-align: center;

	background: url(../img/servicesEng/hangenH1.png) no-repeat;

	background-position: center;

}

#service .preprint a{

	text-align: center;

	background: url(../img/servicesEng/preprint1.png) no-repeat;

	background-position: center;

}

#service .preprint a:hover{

	text-align: center;

	background: url(../img/servicesEng/preprintH1.png) no-repeat;

	background-position: center;

}

#service .adv a{

	text-align: center;

	background: url(../img/servicesEng/adv1.png) no-repeat;

	background-position: center;

}

#service .adv a:hover{

	text-align: center;

	background: url(../img/servicesEng/advH1.png) no-repeat;

	background-position: center;

}

#service .web a{

	text-align: center;

	background: url(../img/servicesEng/web1.png) no-repeat;

	background-position: center;

}

#service .web a:hover{

	text-align: center;

	background: url(../img/servicesEng/web1H.png) no-repeat;

	background-position: center;

    }

    #contact p.renue {

	font-size: 1.9em;

	left: 47%;

  	top: 23%;

}

#scroll .Ctext p {

	font-size: 0.97em; 	

    }

#asphalt p.asphaltTxt {

	font-size: 2.5em;

	left: 42%;

}

footer p {

    top: 34.5%;
    left: 17%;

    font-size: 1.2em;

    line-height: 1.3em;

    }

    footer a {

  top: 49.3%;
    left: 12.2%;
  font-size: 1.2em;
  line-height: 1.3em;

} 

}

@media only screen and (min-width: 1160px) and (max-width: 1259px) {

	#nav {

  		width: 13.6%;

	}

	#service {

		top: 5%;

 		left: 12%;

  		width: 24%;

  		height: 29%;

	}

	#contact p.renue {

	font-size: 1.9em;

	left: 47%;

  	top: 23%;

}

#scroll .Ctext p {

	font-size: 1.05em; 	

    }

#asphalt p.asphaltTxt {

	font-size: 2.5em;

	left: 42%;

}

}

@media only screen and (min-width: 1260px) and (max-width: 1359px) {

	#nav {  		

  		width: 12%;

	}

	#service {

		top: 4.7%;

 		left: 4.5%;

  		width: 24%;

  		height: 29%;

	}

	#service .hangen, #service .preprint, #service .adv, #service .web {

		height: 19%;

	}

	#contact p.renue {

	font-size: 1.9em;

	left: 47%;

  	top: 23%;

}

#scroll .Ctext p {

	font-size: 1.05em; 	

    }

#asphalt p.asphaltTxt {

	font-size: 2.5em;

	left: 42%;

}

.vinyl {

    width: 700px;

    height: 700px;

    background: url(../img/vinyl1280.png) no-repeat;

    background-position: center;

    }

    .igla {

  	width: 230px;

  	height: 270px;

  	left: -8%;

  	background: url(../img/igla1024.png) no-repeat;

  	background-position: center;

    }

}

@media only screen and (min-width: 1360px) and (max-width: 1450px) {

	#nav { 		

  		width: 12%;

	}

	#service {

		top: 5%;

 		left: 8%;

  		width: 22%;

  		height: 26%;

	}

	.vinyl {

		top: 1.2%;

  		left: -14.5%;

	}

	.igla {

		left: -13.72%;

	}

	#contact p.renue {

	font-size: 2.5em;

	left: 49%;

  	top: 23%;

}

#scroll .Ctext p {

	font-size: 1.1em; 	

    }

#asphalt p.asphaltTxt {

	font-size: 3.5em;

	left: 42%;

}

}

@media only screen and (min-width: 1550px) and (max-width: 1679px) {

	#nav {

  		width: 10%;

	}

	#service {

		top: 5%;

 		left: 8%;

  		width: 22%;

  		height: 26%;

	}

	.vinyl {

  		top: 2.2%;

  		left: -9.5%;

	}

	.igla {

		left: -9.72%;

	}

	#contact p.renue {

	font-size: 2.5em;

	left: 49%;

  	top: 23%;

}

#scroll .Ctext p {

	font-size: 1.3em; 	

    }

#asphalt p.asphaltTxt {

	font-size: 3.5em;

	left: 42%;

}

}

@media only screen and (min-width: 1910px) and (max-width: 2260px) {

	#service {

		top: 4%;

 		left: 1.4%;

  		width: 21%;

  		height: 21%;

	}

	#nav {

		right: -0.9%;

	}

	#scroll .Ctext p {

	font-weight: 400;

	font-size: 1.5em; 	

    }

}

@media only screen and (min-width: 2261px) and (max-width: 2560px) {

	#service {

		top: 4.2%;

  		left: 1%;

  		width: 10%;

  		height: 17%;

	}

}