@charset "utf-8";

/* CSS Document */


@font-face {

   font-family: 'renue';

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

}

@font-face {

   font-family: 'B52';

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

}

* { 

    margin:0; 

    padding:0; 

    outline:none;

    -webkit-box-sizing:border-box;

    -moz-box-sizing:border-box;

    box-sizing:border-box;

}

a {

	transition: all .5s ease;
    outline: none;
	border: none;

}

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

body {

	position: relative;

	width: 100%;

	font-family: 'B52', Century Gothic, Helvetica,CenturyGothic,Open Sans, Verdana, sans-serif;

	background: url(../img/bg.jpg);

	line-height: 0;

    z-index: -9999;

  	-webkit-user-select: none;

  	-moz-user-select: none;

  	-ms-user-select: none;

  	user-select: none;

}

section {

	width: 100%;

	float: left;

	overflow: hidden;

}

#gridcontainer {

    width: 100%;

}

.bg {

	background-position: center center;

	background-repeat: no-repeat;

	background-attachment: fixed;

	background-size: cover;

	height: 100%;

	width: 100%;

}

header {

	position: relative;

    text-align: center;

    width: 100%;

    overflow: hidden;

    height: 530px;

}

header .scrollImg {

	margin-top:20px;

	height: 70px;

}

h1 {

	color: #1c1d1e;

	font-weight: normal;

	font-size: 2.9em;

	font-family: 'B52' ,Calibri, sans-serif;

}

header p {

	color: #1c1d1e;

	font-size: 1.6em;

}

header #brush {

	position: absolute !important;

	margin-top: -10% !important;

 	margin-left: 95% !important;

 	width: 25%;

 	height: 25%;

}

#brush.animate1 {

	transform: translate(-190em,-40em);

  -moz-transform: translate(-190em,-40em);

  -webkit-transform: translate(-190em,-40em);

}

.insta {
	position: absolute;
	top: 100px;
	right:70px;
	width: 40px;
	height: 40px;
	z-index: 15000;
}

.linkedin {
	position: absolute;
	top: 100px;
	right: 20px;
	width: 40px;
	height: 40px;
	z-index: 15000;
}

.langl {

	position: absolute;

	top: 4%;

	right: 3%;

	font-size: 1.6em;

	font-family: 'Comfortaa', Georgia, sans-serif;

	cursor:pointer;

}

header #top > a:hover {

	color: #0b8593;

}

.hsContainer {

	display: table;

	table-layout: fixed;

	width: 100%;

	height: 40%;

	margin-top: 6%;

	overflow: hidden;

	position: relative;

}

.hsContent {

	display: table-cell;

	vertical-align: middle;

	color: #ebebeb;

	padding: 0 8%;

	text-align: center

}

.clear {

	clear: both;

}

#scroll {

	text-align: center;

    background: rgba(0, 53, 110, 0.3);

    overflow: hidden;

}

#submarine {

	position: relative;

}

#submarine ul{

	position: absolute;

	top: 59%;

	left: 38.9%;

	width: 100%;

	list-style: none;

	text-align: center;

    z-index: 1000;

}

#submarine ul li {

	display: block;

	float: left;

	margin-right: 2.55%;

	width: 53px;

	height: 53px;

}

#submarine ul li a{

	float: left;

}

#submarine ul li a img{

	float: left;

	width: 100%;

	height: 100%;

}

#scroll .Ctext{

	margin: 0 auto;

	width: 76%;

  	padding-top: 1%;

}

#scroll .Ctext p {

	font-weight: 400;

	font-size: 1.4em;

  	color: #262626;

  	font-family: 'Comfortaa', Georgia, sans-serif;

  	line-height: 1.5em;

}

#scroll img {

	position: relative;

}

.animate {

	

	transition: all 4s ease;

	-moz-transition: all 4s ease;

	-webkit-transition: all 4s;

}

.animate1 {

	transition: all 9s ease;

	-moz-transition: all 9s ease;

	-webkit-transition: all 9s;

}

#infocloud {

	margin-left: -140%;

	margin-top: 2%;

	margin-bottom: 1%;

	width: 30%;

	height: 30%;

	z-index: 200;

}

.visible {

	visibility: visible;

}

#infocloud.animate1 {

	transform: translate(190em,0);

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

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

}

#truck.animate {

	transform: translate(-10em,0);

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

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

}

#aquaman.animate {

	transform: translate(0,69em);

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

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

}

#aquamanAir.animate {

	transform: translate(0,83em);

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

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

}

#aquaman {

	position: fixed;

	top: -1827px;

    right: 1%;

}

#aquamanAir {

	position: fixed;

	top: -2020px;

    right: 1%;

    z-index: 10001; 

}

#wave {

	width: 100%;

	height: 50px;

	background: url(../img/wave.gif) repeat-x;

	margin-bottom: 0;

}

#nav {

	position: fixed;

	width: 9.6%;

	height: 90%;

	top: -630px;

	right: 0.05%;

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

	z-index: 10002;

}

#nav ul {

	list-style: none;

	margin-top: 15%;

}

#nav ul li {

	display: block;

	width: 9%;

	height: 80px;

	margin-bottom: 27%;

}

#nav ul li a{

	display: block;

	text-decoration: none;

	width: 150px;

	height: 100%;

}

/*  Submarine navigation  */

.firstBut {

    position: absolute;

    top: 57.98%;

    left: 38.76%;

}

.secondBut {

    position: absolute;

    top: 57.98%;

    left: 44.5%;

}

.thirdBut {

    position: absolute;

    top: 57.98%;

    left: 50.17%;

}

.fourthBut {

    position: absolute;

    top: 57.98%;

    left: 55.91%;

}

#submarine img {

	width: 30%;

	height: 30%;

}

#submarine a {

	width: 3.55%;

	height: 21.85%;

}

#submarine a img{

	width: 100%;

	height: 100%;

}

#nav.animate {

	transform: translate(0,53em);

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

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

}

#contact {

	position: relative;

	z-index: 800;

}

#contact p.renue {

	font-family: 'renue' ,Calibri, sans-serif;

	font-size: 4.5em;

  	color: #ef4632;

  	position: absolute;

  	top: 26%;

  	left: 41%;

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

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

    transform: rotate(-32deg);

    text-shadow: -4px -2px 16px rgba(11, 11, 11, 1);

}

#asphalt p.asphaltTxt{

	font-family: 'renue' ,Calibri, sans-serif;

	font-size: 6.5em;

  	color: #f57f20;

  	position: absolute;

  	top: 70%;

  	left: 31%;

}

#about iframe {

	position: absolute;

	  top: 48.6%;

  left: 57.7%;

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

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

    transform: rotate(16.6deg);

    -webkit-box-shadow: inset -1px 0px 1px 1px rgba(50, 50, 50, 0.75);

    -moz-box-shadow:    inset -1px 0px 1px 1px rgba(50, 50, 50, 0.75);

	box-shadow:         inset -1px 0px 1px 1px rgba(50, 50, 50, 0.75);

    border-radius: 3px;

    -webkit-user-select: user-select;

  	-moz-user-select: user-select;

  	-ms-user-select: user-select;

  	user-select: user-select;

  	z-index: 11000;

}

#about {

	position: relative;

	z-index: 900;

}

.cafe {

	position: absolute;

	top: 67.4%;

  	right: 43.92%;

}

.vinyl {

	position: absolute;

	top: 2.2%;

  	left: -11.5%;

  	display: block;

  	width: 879px;

  	height: 879px;

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

    background-position: center;

    -webkit-animation-name: spin;

    -webkit-animation-duration: 4000ms;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;

    -moz-animation-duration: 4000ms;

    -moz-animation-iteration-count: infinite;

    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;

    -ms-animation-duration: 4000ms;

    -ms-animation-iteration-count: infinite;

    -ms-animation-timing-function: linear;

    animation-name: spin;

    animation-duration: 4000ms;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}

@-ms-keyframes spin {

    from { -ms-transform: rotate(0deg); }

    to { -ms-transform: rotate(360deg); }

}

@-moz-keyframes spin {

    from { -moz-transform: rotate(0deg); }

    to { -moz-transform: rotate(360deg); }

}

@-webkit-keyframes spin {

    from { -webkit-transform: rotate(0deg); }

    to { -webkit-transform: rotate(360deg); }

}

@keyframes spin {

    from {

        transform:rotate(0deg);

    }

    to {

        transform:rotate(360deg);

    }

}

.igla {

	position: absolute;

	display: block;

	top: 12.2%;

  	left: -11.72%;

  	width: 382px;

  	height: 449px;

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

  	background-position: center;

}

#service {

	display: block;

	position: absolute;

	overflow: hidden;

	top: 5%;

    left: 4%;

    width: 22%;

    height: 23%;

    text-align: center;

    z-index: 1000 !important;

}

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

	display: block;

	width: 100%;

	height: 23%;

	z-index: 1000 !important;

}

#service .hangen a:hover, #service .preprint a:hover, #service .adv a:hover, #service .web a:hover {

	transition: all 0.5s ease;

	-moz-transition: all 0.5s ease;

	-webkit-transition: all 0.5s;

}

#service .preprint {

	display: block;

	width: 100%;

	height: 20%;

	z-index: 1000 !important;

}


#service .hangen a{

	display: block;

	opacity: 0.01;

	width: 100%;

	height: 100%;

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

	background-position: center;

	z-index: 1000 !important;

}

#service .hangen a:hover{

	display: block;
	opacity: 0.01;

	width: 100%;

	height: 100%;

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

	background-position: center;

	z-index: 1000 !important;

}

#service .preprint a{

	display: block;

	width: 100%;

	height: 100%;

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

	background-position: center;

	z-index: 1000 !important;

}

#service .preprint a:hover{

	display: block;

	width: 100%;

	height: 100%;

	background: url(../img/services/preprintH.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;

}

.government {
	position: absolute;
	bottom: 2%;
    right: 21%;
	width: 30%;
	height: auto;
}

/* 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: 12.5%;

  width: 20.05%;

  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: 12.4%;
    right: 12.9%;
    width: 16.75%;
    height: 41.4%;

}

#us .branka{

    position: absolute;

    opacity: 0;

    top: 6.75%;

  left: 37.1%;

  width: 15.85%;

  height: 28.42%;

}

#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;

   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;

	line-height: 2em;

	-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;

	line-height: 2em;

	-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: 7%;

  		  left: 0%;

  		  width: 25%;

    }

#scroll .Ctext p {

    font-size: 0.5em;

}

    #service .hangen a{

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

	background-position: center;

}

#service .hangen a:hover{

	text-align: center;

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

	background-position: center;

}

#service .preprint a{

	text-align: center;

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

	background-position: center;

}

#service .preprint a:hover{

	text-align: center;

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

	background-position: center;

}

#service .adv a{

	text-align: center;

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

	background-position: center;

}

#service .adv a:hover{

	text-align: center;

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

	background-position: center;

}

#service .web a{

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

	background-position: center;

}

#service .web a:hover{

	background: url(../img/services/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 {

  	bottom: 5.5%;

  	left: 13.6%;

  	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: 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/services/hangen2.png) no-repeat;

	background-position: center;

}

#scroll .Ctext p {

    font-size: 0.57em;

}

#service .hangen a:hover{

	text-align: center;

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

	background-position: center;

}

#service .preprint a{

	text-align: center;

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

	background-position: center;

}

#service .preprint a:hover{

	text-align: center;

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

	background-position: center;

}

#service .adv a{

	text-align: center;

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

	background-position: center;

}

#service .adv a:hover{

	text-align: center;

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

	background-position: center;

}

#service .web a{

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

	background-position: center;

}

#service .web a:hover{

	background: url(../img/services/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/services/hangen1.png) no-repeat;

	background-position: center;

}

#service .hangen a:hover{

	text-align: center;

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

	background-position: center;

}

#service .preprint a{

	text-align: center;

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

	background-position: center;

}

#service .preprint a:hover{

	text-align: center;

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

	background-position: center;

}

#service .adv a{

	text-align: center;

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

	background-position: center;

}

#service .adv a:hover{

	text-align: center;

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

	background-position: center;

}

#service .web a{

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

	background-position: center;

}

#service .web a:hover{

	background: url(../img/services/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%;

  	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/services/hangen1.png) no-repeat;

	background-position: center;

}

#service .hangen a:hover{

	text-align: center;

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

	background-position: center;

}

#service .preprint a{

	text-align: center;

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

	background-position: center;

}

#service .preprint a:hover{

	text-align: center;

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

	background-position: center;

}

#service .adv a{

	text-align: center;

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

	background-position: center;

}



#service .adv a:hover{

	text-align: center;

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

	background-position: center;

}

#service .web a{

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

	background-position: center;

}

#service .web a:hover{

	background: url(../img/services/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 {

  	top: 35%;
    left: 17.6%;

  	font-size: 0.9em;

  	line-height: 1.3em;

    }

    footer a {

	top: 50.3%;
    left: 13.2%;
	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/services/hangen1.png) no-repeat;

	background-position: center;

}

#service .hangen a:hover{

	text-align: center;

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

	background-position: center;

}

#service .preprint a{

	text-align: center;

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

	background-position: center;

}

#service .preprint a:hover{

	text-align: center;

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

	background-position: center;

}

#service .adv a{

	text-align: center;

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

	background-position: center;

}

#service .adv a:hover{

	text-align: center;

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

	background-position: center;

}

#service .web a{

	text-align: center;

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

	background-position: center;

}

#service .web a:hover{

	text-align: center;

	background: url(../img/services/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 (max-width: 600px) {
	.insta {
		width: 25px;
		height: 25px;
	}
	.linkedin {
		width: 25px;
		height: 25px;
	}
  }

}

@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%;

	}

}