@charset "UTF-8";
.section {
  position: relative;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  overflow: hidden;
}
.section .bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;opacity: 0.4;
	}
.white {background: white;}
.intro{max-width:1380px;z-index: 10;}
.intro img {padding: 0; margin: 0;-webkit-box-shadow:0 0 35px 20px rgba(0,0,0,0.4);box-shadow:0 0 35px 20px rgba(0,0,0,0.4)}
.pit h1{font-size:20px;font-weight:700;margin-bottom:.5em}
.pit h2{font-size:18px;font-weight:700;margin-bottom:.5em}
.pit p{margin:0}
.pit{text-align:center; position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0);background-color:rgba(255,255,255,0.3);width:90%;max-width:700px;padding:5px;border:2px solid #C3D6ED;box-shadow: 0px 0px 20px 1px rgba(52,85,120,0.2);-webkit-box-shadow: 0px 0px 20px 1px rgba(52,85,120,0.2);-moz-box-shadow: 0px 0px 20px 1px rgba(52,85,120,0.2);}
.pit:before,.pit:after{content:"•";position:absolute;width:14px;height:14px;font-size:14px;color:
#C3D6ED;border:2px solid #C3D6ED;line-height:12px;top:5px;text-align:center}
.pit:before{left:5px}
.pit:after{right:5px}
.pit-inner{position:relative;border:2px solid #C3D6ED;padding:40px}
.pit-inner:before,.pit .pit-inner:after{content:"•";position:absolute;width:14px;height:14px;font-size:14px;color:#C3D6ED;border:2px solid #C3D6ED;line-height:12px;bottom:-2px;text-align:center}
.pit-inner:before{left:-2px}
.pit-inner:after{right:-2px}

#container section{height: 100vh;position:relative}
.smoothscroll5{position:absolute;z-index:999;left:calc(50% - 15px);-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom: 100px;}

.page1{width:100%; background:url(../banner/bg-akcija-2.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#C3D6ED;}
.page2a{width:100%; background:url(../banner/web_grafike_graficki_dizajn_bg_01.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page2{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_01.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page3{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_02.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page4{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_03.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page5{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_04.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page6{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_05.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page7{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_06.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page8{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_07.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page9{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_08.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page10{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_09.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page11{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_10.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page12{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_11.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page13{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_12.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page14{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_13.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page15{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_14.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page16{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_15.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page17{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_16.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page18{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_17.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page19{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_18.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page20{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_19.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page21{width:100%; background:url(../banner/back/web_grafike_graficki_dizajn_valeron_20.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}

.page22{width:100%; background:url(../banner/back/web-banner-web-design-3.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page23{width:100%; background:url(../banner/back/web-banner-web-design-4.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page24{width:100%; background:url(../banner/back/web-banner-web-design-5.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page25{width:100%; background:url(../banner/back/web-banner-web-design-6.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page26{width:100%; background:url(../banner/back/web-banner-web-design-7.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}
.page27{width:100%; background:url(../banner/back/web-banner-web-design-8.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#F2F5FF;}

.banner5 {margin: 0;position: absolute;top: 50%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%) }
.effect{position:relative;max-width: 1280px;max-height: 90vh;}
.effect figure{position:relative;float:left;overflow:hidden;margin:10px 1%;width:100%;text-align:center;cursor:pointer;-webkit-box-shadow:0 0 35px 20px rgba(0,0,0,0.4);box-shadow:0 0 35px 20px rgba(0,0,0,0.4)}
.effect figure img{position:relative;clear:both;display:block;width:100%;max-height:90vh;}
.effect figure figcaption{padding:2em;color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.effect figure figcaption::before,.effect figure figcaption::after{pointer-events:none}
.effect figure figcaption,.effect figure figcaption>a{position:absolute;top:0;left:0;width:90%;max-width: 700px; height:100%}
.effect figure figcaption.desno,.effect figure figcaption.desno>a{position:absolute;top:0;right:0!important;left:auto;width:90%;max-width: 700px; height:100%}
.effect figure figcaption>a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}
.effect figure h2{font-size: 32px;color:#ddd}
.effect figure h2 span{font-weight:700}
.effect figure h2,.effect figure p{margin:0}
.effect figure p{letter-spacing:1px;font-size:68.5%;font-weight: 700; background:rgba(0,0,0,0.4)}
.effect figure p span{text-transform:none;font-weight: 400;font-style: italic}

.effect figure figcaption.nero{color:#000;}
.effect figure figcaption.nero h2{color:#000}
.effect figure figcaption.nero p{background: rgba(255,255,255,0.5)}

figure.reference img{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale(1);transform:scale(1)}
figure.reference:hover img{-webkit-transform:scale(1.1);transform:scale(1.1)}
figure.reference figcaption{text-align:left}
figure.reference h2{position:relative;overflow:hidden;padding:.5em 0}
figure.reference h2::after{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#fff;content:'';-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
figure.reference:hover h2::after{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.reference p{padding:1em;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
figure.reference:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

.last {display: flex;flex-direction: column;}
#footer-box {flex: 1 0 auto;}
.footer {flex-shrink: 0;}

@media screen and (max-width:50em){.effect figure{display:inline-block;float:none;margin:10px auto;width:100%}
}
@media only screen and (max-width: 768px) {
.smallnone{display: none}
.effect figure h2{font-size: 24px;}
.effect figure p{font-size:62%;line-height: 2.6rem;}
.page1{width:100%; background:url(../banner/back/bg-akcija-2b.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#C3D6ED;}	
}
@media only screen and (max-width: 480px) {
.pit .pit-inner{padding:20px}
.smoothscroll{display: none}
	.effect figure p{font-size:60%;line-height: 2.4rem;}
	.page1, .page2, .page3, .page4, .page5, .page6, .page7, .page8, .page9, .page10, .page11, .page12, .page13, .page14, .page15{background-image:none}
}
@media only screen and (max-width: 992px) {
.pit2{position:absolute;top:auto;bottom:0;left:50%;-webkit-transform: translateX(-50%);transform: translateX(-50%)}
	}