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;
}
input:focus, button:focus, a:focus {outline: none;}
strong, b {font-weight: 600;}
img {width: auto; max-width: 100%;}
a {-webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -moz-transition: .2s ease-in-out;}

/***********************************************
***************** COLORS ***********************
************************************************
ORANGE - #f2b719
BLACK - #000000


/*font-family*
font-family: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;


/* CLEAR */
body:after, ul:after, ul li:after, .clear:after, .wp1300:after
{content:"."; display:block; height:0px; font-size:0; clear:both; visibility:hidden; line-height: 0px;}
/* BOX SIZING */
* {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

body {height: 100%; width: 100%; padding-bottom: 0; font-family: 'Oswald', sans-serif; font-size: 15px; line-height:  20px; font-weight: 300; color: #000; background: #fff;}

a {-webkit-transition: .2s ease-in-out;
   transition: .2s ease-in-out;
   -moz-transition: .2s ease-in-out;}
h1,h2,h3,h4 {font-family: 'Oswald', sans-serif; font-weight: 600;}
p {margin-bottom: 20px;}
h2 {font-size: 45px; line-height: 55px; font-weight: 100;color: #fff; margin-bottom: 35px;}
h3 {color: #000;}

.wp1300 {max-width: 1300px; width: 100%; height: auto; margin: 0 auto; padding:  0; position: relative;}

#logoScroll {width: 300px; height: 150px; position: fixed; top: 0; background: #000;}

#logoScroll.src span#name {color: #08b3cc;}
#logoScroll.netscroll span#name {color: #324b79; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -moz-transition: .2s ease-in-out;}
#logoScroll.nega span#name {color: #f0b7bd;}
#logoScroll.glasbena-mladina span#name {color: #bc0d1e;}
#logoScroll.aleph span#name {color: #ee9728;}
#logoScroll.spoznaj-se span#name {color: #d3b06f;}
#logoScroll.marko-pus span#name {color: #4c565c;}
#logoScroll.bp-avto span#name {color: #f05a24;}


#logoScroll a {width: 90px; margin: 0 auto; text-decoration: none; display: block; position: relative; top: 20px; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -moz-transition: .2s ease-in-out;}
#logoScroll a span {font-weight: 100; font-size: 30px; line-height: 30px; text-align: center; display: block; color: #fff; font-family: 'Roboto', sans-serif; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -moz-transition: .2s ease-in-out;}
#logoScroll a span#studio {letter-spacing: 5px; text-align: justify; font-size: 23px; padding-left: 3px;}
#logoScroll a span#name {font-size: 70px; line-height: 70px; display: block; text-transform: uppercase; font-family: 'Oswald', sans-serif;}
header nav {position: absolute; right: 100px; top: 70px;}
header nav a {display: block; text-decoration: none; font-size: 50px; line-height: 50px; color: #000;}

#fullPageBoxes {margin-left: 300px; margin-top: 150px;}
#fullPageBoxes a.pageBox {display: block; padding: 150px 90px; text-decoration: none; margin: 50px 0;}

#fullPageBoxes a.pageBox h2 {font-size: 65px; color: #fff; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -moz-transition: .2s ease-in-out;}
#fullPageBoxes a span { -webkit-transition: .2s ease-in-out;
   transition: .2s ease-in-out;
   -moz-transition: .2s ease-in-out;}
#fullPageBoxes a.pageBox#resposniveShowContact {display: none;}   

#fullPageBoxes a span.shortDescription {width: 600px; color: #fff; font-size: 45px; line-height: 55px; display: block;}
#fullPageBoxes a span.design {color: #fff; font-size: 25px; line-height: 35px; display: block;}
#fullPageBoxes a#src {background: #08b3cc url(../images/logo2.svg) no-repeat right 100px center; background-size: auto 100px;}
#fullPageBoxes a#mladina {background: #bc0d1e url(../images/logoGML.svg) no-repeat right 100px center; background-size: 400px 100px;}
#fullPageBoxes a#spoznajSe {background: #d3b06f url(../images/logoSpoznajse.svg) no-repeat right 100px center; background-size: auto 200px;}
#fullPageBoxes a#nega {background: #f0b7bd url(../images/logoNega.svg) no-repeat right 100px center; background-size: auto 90px;}
#fullPageBoxes a#netscroll {background: #324b79 url(../images/logoNetscroll.svg) no-repeat right 100px center; background-size: 250px 100px;}
#fullPageBoxes a#bpavto {background: #f05a24 url(../images/logoBPavto.svg) no-repeat right 100px center; background-size: auto 80px;}
#fullPageBoxes a#markoPus {background: #4c565c url(../images/markoPusLogo.svg) no-repeat right 50px center; background-size: auto 220px;}
#fullPageBoxes a#aleph {background: #ee9728 url(../images/alephLogo.svg) no-repeat right 100px center; background-size: auto 100px;}
#fullPageBoxes a#bmw {background: #1f497f url(../images/bmwLogo.svg) no-repeat right 100px center; background-size: 250px 100px;}
#fullPageBoxes a#milax {background: #dcbf64 url(../images/logo2.svg) no-repeat right 100px center; background-size: auto 100px;}

#fullPageBoxes a.pageBox#netscroll:hover {background: #000 url(../images/logoNetscrollHover.svg) no-repeat right 100px center; background-size: 250px 100px;}
#fullPageBoxes a.pageBox#netscroll:hover h2,
#fullPageBoxes a.pageBox#netscroll:hover span {color: #324b79;}
#fullPageBoxes a.pageBox#nega:hover {background: #000 url(../images/logoNegaHover.svg) no-repeat right 100px center; background-size: auto 90px;}
#fullPageBoxes a.pageBox#nega:hover h2,
#fullPageBoxes a.pageBox#nega:hover span {color: #f0b7bd;}
#fullPageBoxes a.pageBox#mladina:hover {background: #000 url(../images/logoGMLhover.svg) no-repeat right 100px center; background-size: 400px 100px;}
#fullPageBoxes a.pageBox#mladina:hover h2,
#fullPageBoxes a.pageBox#mladina:hover span {color: #bc0d1e;}
#fullPageBoxes a.pageBox#aleph:hover {background: #000 url(../images/alephLogoHover.svg) no-repeat right 100px center; background-size: auto 100px;}
#fullPageBoxes a.pageBox#aleph:hover h2,
#fullPageBoxes a.pageBox#aleph:hover span {color: #ee9728;}
#fullPageBoxes a.pageBox#spoznajSe:hover {background: #000 url(../images/logoSpoznajseHover.svg) no-repeat right 100px center; background-size: auto 200px;}
#fullPageBoxes a.pageBox#spoznajSe:hover h2,
#fullPageBoxes a.pageBox#spoznajSe:hover span{color: #d3b06f;}
#fullPageBoxes a.pageBox#markoPus:hover {background: #000 url(../images/markoPusLogoHover.svg) no-repeat right 50px center; background-size: auto 220px;}
#fullPageBoxes a.pageBox#markoPus:hover h2,
#fullPageBoxes a.pageBox#markoPus:hover span{color: #4c565c;}
#fullPageBoxes a.pageBox#bpavto:hover {background: #000 url(../images/logoBPavtoHover.svg) no-repeat right 100px center; background-size: auto 80px;}
#fullPageBoxes a.pageBox#bpavto:hover h2,
#fullPageBoxes a.pageBox#bpavto:hover span{color: #f05a24;}
#fullPageBoxes a.pageBox#bmw:hover {background: #000 url(../images/bmwLogoHover.svg) no-repeat right 100px center; background-size: 250px 100px;}
#fullPageBoxes a.pageBox#bmw:hover h2,
#fullPageBoxes a.pageBox#bmw:hover span {color: #1f497f;}

#fullPageBoxes a:first-child {margin-top: 0;}
#fullPageBoxes a:last-child {margin-bottom: 0;}

#footer {padding: 50px; text-align: center;}



.tekstSlider {width: auto; height: auto; display: block; font-size: 200px; color: #000; position: fixed; line-height: 200px; bottom: 80px; -ms-transform: rotate(-90deg); /* IE 9 */
  -webkit-transform: rotate(-90deg); /* Safari prior 9.0 */
  transform: rotate(-90deg); /* Standard syntax */
}





@media only screen and (max-width: 1300px) {
        header nav {right: 50px;}
   #fullPageBoxes a.pageBox h2  {line-height: 65px;}
   #fullPageBoxes a#src {background: #08b3cc url(../images/logo2.svg) no-repeat right 50px bottom; background-size: auto 100px;}
   #fullPageBoxes a#mladina {background: #bc0d1e url(../images/logoGML.svg) no-repeat right 50px bottom; background-size: 250px 100px;}
   #fullPageBoxes a#spoznajSe {background: #d3b06f url(../images/logoSpoznajse.svg) no-repeat right 50px bottom 20px; background-size: auto 100px;}
   #fullPageBoxes a#nega {background: #f0b7bd url(../images/logoNega.svg) no-repeat right 50px bottom 20px; background-size: auto 70px;}
   #fullPageBoxes a#netscroll {background: #324b79 url(../images/logoNetscroll.svg) no-repeat right 50px bottom; background-size: 250px 100px;}
   #fullPageBoxes a#bpavto {background: #f05a24 url(../images/logoBPavto.svg) no-repeat right 50px bottom 20px; background-size: auto 70px;}
   #fullPageBoxes a#markoPus {background: #4c565c url(../images/markoPusLogo.svg) no-repeat right bottom; background-size: auto 200px;}
   #fullPageBoxes a#aleph {background: #ee9728 url(../images/alephLogo.svg) no-repeat right 50px bottom 20px; background-size: auto 70px;}
   #fullPageBoxes a#bmw {background: #1f497f url(../images/bmwLogo.svg) no-repeat right 50px bottom; background-size: 250px 100px;}
   #fullPageBoxes a#milax {background: #dcbf64 url(../images/logo2.svg) no-repeat right 50px bottom; background-size: auto 100px;}
   #fullPageBoxes a.pageBox#netscroll:hover {background: #000 url(../images/logoNetscrollHover.svg) no-repeat right 50px bottom; background-size: 250px 100px;}
   #fullPageBoxes a.pageBox#nega:hover {background: #000 url(../images/logoNegaHover.svg) no-repeat right 50px bottom 20px; background-size: auto 70px;}
   #fullPageBoxes a.pageBox#mladina:hover {background: #000 url(../images/logoGMLhover.svg) no-repeat right 50px bottom; background-size: 250px 100px;}
   #fullPageBoxes a.pageBox#aleph:hover {background: #000 url(../images/alephLogoHover.svg) no-repeat right 50px bottom 20px; background-size: auto 70px;}
   #fullPageBoxes a.pageBox#spoznajSe:hover {background: #000 url(../images/logoSpoznajseHover.svg) no-repeat right 50px bottom 20px; background-size: auto 100px;}
   #fullPageBoxes a.pageBox#markoPus:hover {background: #000 url(../images/markoPusLogoHover.svg) no-repeat right bottom; background-size: auto 200px;}
   #fullPageBoxes a.pageBox#bpavto:hover {background: #000 url(../images/logoBPavtoHover.svg) no-repeat right 50px bottom 20px; background-size: auto 70px;}
   #fullPageBoxes a.pageBox#bmw:hover {background: #000 url(../images/bmwLogoHover.svg) no-repeat right 50px bottom; background-size: 250px 100px;}
   
}

@media only screen and (max-width: 1110px) {

   #logoScroll {position: absolute;}
   #fullPageBoxes {margin-left: 0;}
   #fullPageBoxes a.pageBox {padding: 100px 50px; margin: 0;}
   
    #logoScroll.netscroll span#name {color: #fff !important;}
   
}

@media only screen and (max-width: 700px) {  
    #fullPageBoxes a.pageBox {padding-top: 30px;}
    #fullPageBoxes a.pageBox h2 {font-size: 45px; line-height: 50px; text-align: center; margin-bottom: 20px;}
    #fullPageBoxes a span.shortDescription {font-size: 25px; line-height: 30px; text-align: center;}
    #fullPageBoxes a span.design {font-size: 15px; line-height: 20px; text-align: center;}
    #fullPageBoxes a span.shortDescription {width: auto;}
    #fullPageBoxes a.pageBox h2  {line-height: 65px;}
    #fullPageBoxes a#src {background: #08b3cc url(../images/logo2.svg) no-repeat center bottom; background-size: auto 50px;}
    #fullPageBoxes a#mladina {background: #bc0d1e url(../images/logoGML.svg) no-repeat center bottom; background-size: 250px 100px;}
    #fullPageBoxes a#spoznajSe {background: #d3b06f url(../images/logoSpoznajse.svg) no-repeat center bottom 20px; background-size: auto 50px;}
    #fullPageBoxes a#nega {background: #f0b7bd url(../images/logoNega.svg) no-repeat center bottom 20px; background-size: auto 50px;}
    #fullPageBoxes a#netscroll {background: #324b79 url(../images/logoNetscroll.svg) no-repeat center bottom; background-size: 190px 100px;}
    #fullPageBoxes a#bpavto {background: #f05a24 url(../images/logoBPavto.svg) no-repeat center bottom 20px; background-size: auto 50px;}
    #fullPageBoxes a#markoPus {background: #4c565c url(../images/markoPusLogo.svg) no-repeat center bottom -20px; background-size: auto 150px;}
    #fullPageBoxes a#aleph {background: #ee9728 url(../images/alephLogo.svg) no-repeat center bottom 20px; background-size: auto 50px;}
    #fullPageBoxes a#bmw {background: #1f497f url(../images/bmwLogo.svg) no-repeat center bottom; background-size: 250px 50px;}
    #fullPageBoxes a#milax {background: #dcbf64 url(../images/logo2.svg) no-repeat center bottom; background-size: auto 50px;}
    
    #fullPageBoxes a.pageBox#netscroll:hover {background: #000 url(../images/logoNetscrollHover.svg) no-repeat center bottom; background-size: 190px 100px;}
    #fullPageBoxes a.pageBox#nega:hover {background: #000 url(../images/logoNegaHover.svg) no-repeat center bottom 20px; background-size: auto 50px;}
    #fullPageBoxes a.pageBox#mladina:hover {background: #000 url(../images/logoGMLhover.svg) no-repeat center bottom; background-size: 250px 100px;}
    #fullPageBoxes a.pageBox#aleph:hover {background: #000 url(../images/alephLogoHover.svg) no-repeat center bottom 20px; background-size: auto 50px;}
    #fullPageBoxes a.pageBox#spoznajSe:hover {background: #000 url(../images/logoSpoznajseHover.svg) no-repeat center bottom 20px; background-size: auto 50px;}
    #fullPageBoxes a.pageBox#markoPus:hover {background: #000 url(../images/markoPusLogoHover.svg) no-repeat center bottom -20px; background-size: auto 150px;}
    #fullPageBoxes a.pageBox#bpavto:hover {background: #000 url(../images/logoBPavtoHover.svg) no-repeat center bottom 20px; background-size: auto 50px;}
    #fullPageBoxes a.pageBox#bmw:hover {background: #000 url(../images/bmwLogoHover.svg) no-repeat center bottom; background-size: 250px 50px;}
   
}
@media only screen and (max-width: 550px) {  
    header nav {display: none;}
    #fullPageBoxes a.pageBox {padding: 100px 10px; padding-top: 30px;}
    #fullPageBoxes a.pageBox h2 {font-size: 35px; line-height: 50px; text-align: center; margin-bottom: 0;}
    #fullPageBoxes a span.shortDescription {font-size: 20px; line-height: 25px; text-align: center;}
    #fullPageBoxes a span.design {font-size: 15px; line-height: 20px; text-align: center;}
    #fullPageBoxes a span.shortDescription {width: auto;}
    #fullPageBoxes a.pageBox#resposniveShowContact {display: block; background: #000; padding-bottom: 40px; border-top: 1px solid #fff;}   

   
}

@media only screen and (max-width: 550px) {  
    #fullPageBoxes {margin-top: 0;}
    #logoScroll {width: 100%; position: relative;}

   
}