@import url("https://webflix.hu/ms-admin/skin/bootstrap/css/bootstrap.min.css");
@import url("https://webflix.hu/ms-admin/skin/bootstrap/css/bootstrap-grid.min.css");
@import url("https://webflix.hu/ms-admin/skin/bootstrap/css/bootstrap-reboot.min.css");
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;700&family=Teko:wght@500&display=swap");
:root{
    --black:#000000;
    --white:#FFFFFF;

	--black_opacity:rgba(0,0,0,.6);

	--yellow:#f29f0e;
	--red:#e62331;
	--purp:#be4794;
	--green:#73b72d;
	--orange:#f2a90e;
	--cian:#40b9bb;

	--font1:"Archivo", sans-serif;
	--font2:"Teko", sans-serif;
}

*{font-size:1rem; font-family:var(--font1); color:var(--black); text-decoration:none; list-style:none; margin:0; padding:0;}
a,a:hover{text-decoration:none;}
h1,h2,h3,h4,h5{font-family:var(--font2);}
h1{font-size:2.2rem;}
h2{font-size:2rem;}
h3{font-size:1.8rem;}
h4{font-size:1.6rem;}
h5{font-size:1.4rem;}
.row{margin:0;padding:0;}
.fancybox-container *{color:var(--white); font-size:.8rem;}
.btn{box-shadow:none!important;}
.form-control{box-shadow:none!important;}
.form-control:focus{border-color:var(--black);}
.dabsolute{width:100%; height:100%; position:absolute; left:0; top:0;}
.fullbg{background:no-repeat center center / cover; background-attachment: fixed;}
.header-top{padding-top:89px!important;}

.btn.v1{background:var(--cian); color:var(--white); border:solid 1px var(--cian); padding:5px 30px; transition:all .5s; border-radius:0;}
.btn.v1:hover{background:var(--white); color:var(--cian);}
.btn.v2{background:var(--cian); color:var(--white); border:solid 1px var(--white); padding:5px 30px; transition:all .5s; border-radius:0;}
.btn.v2:hover{background:var(--white); color:var(--cian);}
.btn.v3{background:var(--red); color:var(--white); border:solid 1px var(--red); padding:5px 30px; transition:all .5s; border-radius:0;}
.btn.v3:hover{background:var(--white); color:var(--red);}
.btn.v3_invert{background:var(--white); color:var(--red)!important; border:solid 1px var(--white); padding:5px 30px; transition:all .5s; border-radius:0;}
.btn.v3_invert:hover{background:var(--red); color:var(--white)!important;}
.btn.v4{background:transparent; color:var(--black); border:solid 3px var(--black); padding:5px 30px; transition:all .5s; border-radius:0; font-weight:bold;}
.btn.v4:hover{background:var(--black); color:var(--white);}
.btn.v4.small{background:transparent; color:var(--black); border:solid 1px var(--black); padding:5px 30px; transition:all .5s; border-radius:0; font-weight:normal;}
.btn.v5{background:var(--orange); color:var(--white); border:solid 1px var(--orange); padding:5px 30px; transition:all .5s; border-radius:0; }
.btn.v5:hover{background:var(--white); color:var(--orange);}

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: var(--white);}
::-webkit-scrollbar-thumb {  background:var(--black); opacity:.4;}
::-webkit-scrollbar-thumb:hover {opacity:1;}


#slider > a img{position:absolute; left:15px; top:15px; z-index:3; width:120px;}
#slider .btns{position:absolute; left:0; bottom:150px; z-index:3; text-align:center; width:100%;}

#slider{width:var(--ww); height:var(--wh); position:relative; overflow:hidden;}
#slider article{position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; transition:all .5s;}
#slider article p{font-family:var(--font2); font-size:3rem; margin:0 .5rem; letter-spacing:5px; transition:all .5s; display:inline-block;}

#slider article[data-type="defaul"]{transform:scale(0); background:var(--orange);}
#slider article[data-type="defaul"].active{transform:scale(1); opacity:1;}
#slider article[data-type="defaul"] p{color:var(--black); transition:color 1s; position:relative; padding:1.5rem 2rem;}
#slider article[data-type="defaul"].active p{color:var(--white);}

#slider article[data-type="reader"]{opacity:0;}
#slider article[data-type="reader"].active{opacity:1;}
#slider article[data-type="reader"] p{opacity:0;}
#slider article[data-type="rain"] p:last-of-type{margin-left:0;}
#slider article[data-type="reader"] p.active{opacity:1;}
#slider article[data-type="reader"] p.extra{opacity:0; position:relative; top:calc(var(--wh) * -1); color:var(--orange); width:0px; overflow:hidden;}
#slider article[data-type="reader"] p.extra.active{opacity:1; top:24px; width:40px; transition-delay:0s, .25s,.5s; transition-property:width,top,opacity;}

#slider article[data-type="border"]{transform:scale(0); background:var(--white);}
#slider article[data-type="border"].active{transform:scale(1); opacity:1;}
#slider article[data-type="border"] p{color:var(--black); transition:color 1s; position:relative; padding:1.5rem 2rem;}
#slider article[data-type="border"].active p{color:var(--black);}
#slider article[data-type="border"] p span{transition:all .25s; position:absolute; background:var(--black); }
#slider article[data-type="border"] p span:nth-child(1){left:0; bottom:0; height:3px; width:0;}
#slider article[data-type="border"] p span:nth-child(1).active{width:100%;}
#slider article[data-type="border"] p span:nth-child(2){right:0; bottom:0; height:0; width:3px;}
#slider article[data-type="border"] p span:nth-child(2).active{height:100%;}
#slider article[data-type="border"] p span:nth-child(3){top:0; right:0; height:3px; width:0;}
#slider article[data-type="border"] p span:nth-child(3).active{width:100%;}
#slider article[data-type="border"] p span:nth-child(4){top:0; left:0; height:0; width:3px;}
#slider article[data-type="border"] p span:nth-child(4).active{height:100%; }

#slider article[data-type="more"]{left:-100%; background:var(--white);}
#slider article[data-type="more"].active{left:0;}
#slider article[data-type="more"] p{position:relative; z-index:20; padding:1.5rem 2rem; background:var(--white);}
#slider article[data-type="more"] img{width:60px; opacity:0; transition:all .5s;}
#slider article[data-type="more"] img.active{opacity:1;}

#slider article[data-type="target_focus"]{left:100%; background:var(--orange);}
#slider article[data-type="target_focus"].active{left:0;}
#slider article[data-type="target_focus"] p.extra{transform:scale(0); margin:0 1rem 0 1.5rem; font-family:var(--font2); font-size:3rem; transition:all .5s; }
#slider article[data-type="target_focus"].active p{color:var(--white);}
#slider article[data-type="target_focus"].active p.extra{transform:scale(1.4); transition-delay:.5s; transition-property:transform;color:var(--black)!important;}

#slider article[data-type="rain"]{top:100%; background:var(--orange);}
#slider article[data-type="rain"].active{top:0;}
#slider article[data-type="rain"] p{color:var(--white); position:relative; top:calc(var(--wh) * -1); opacity:0; transition:all .5s; }
#slider article[data-type="rain"] p:nth-child(3){margin-right:0;}
#slider article[data-type="rain"] p:last-of-type{margin-left:0;}
#slider article[data-type="rain"] p.active{opacity:1;  animation-name:rainA; animation-duration: .75s; animation-iteration-count: reverse; animation-timing-function: ease-out;  animation-fill-mode: forwards; }

@keyframes rainA {
  0% {top:calc((--wh) * -1);}
  80% {top:10px;}
  100% {top:0px;}
}
#slider .scroll_down_icon{width:40px; height:70px; position:absolute; bottom:50px; left:calc(50% - 20px); cursor:pointer; border:solid 3px var(--black); border-radius:25px;}
#slider .scroll_down_icon .point{width:10px; height:10px; margin:5px auto 0; background:var(--black); border-radius:25px; animation: scrollDownButton 1s;animation-iteration-count: infinite;}

@keyframes scrollDownButton {
	0%{margin-top:5px; opacity:0;}
	50%{opacity:1;}
	100%{margin-top:45px; opacity:0;}
}



#service{width:var(--ww); overflow:hidden; }

#service h2{}
#service h2 span{color:var(--yellow); font-family:var(--font2); font-size:2rem;}

#service ul.ai {width:100%;}
#service ul.ai li{background-image:url("/imgs/checkbox_f29f0e.svg"); text-align:left; background-repeat:no-repeat; background-position:top left; background-size:20px; padding-left:25px; margin:5px 0; margin-bottom:.5rem;}

#service .card{border-radius:0; border-color:var(--black); transition:all .5s; transform:scale(.95);}
#service .card:hover{ transform:scale(1);}
#service .card img{width:100px; filter: invert(1); margin:1.5rem calc(50% - 50px) 3rem; }
#service .card img.sale{position:absolute; right:-30px; top:-30px; width:100px; margin:0; padding:0; filter: invert(0); transform:rotate(15deg); }
#service .card .text{border-top:solid 1px rgba(0,0,0,.1);border-bottom:solid 1px rgba(0,0,0,.1); margin:1.5rem; padding:.5rem 0; height:400px; overflow:hidden;}
#service .card .text *{ font-size:.8rem;}
#service .card .text p{text-align:left;}
#service .card .text ul{width:100%;}
#service .card .text ul li{background-image:url("/imgs/checkbox_f29f0e.svg"); text-align:left; background-repeat:no-repeat; background-position:top left; background-size:20px; padding-left:25px; margin:5px 0;}
#service .card .text ul.color_1ca4e9 li{background-image:url("/imgs/sale/checkbox_1ca4e9.svg"); }
#service .card .text ul.color_18b940 li{background-image:url("/imgs/sale/checkbox_18b940.svg"); }
#service .card .text ul.color_73b72d li{background-image:url("/imgs/sale/checkbox_f29f0e.svg"); }
#service .card .text ul.color_be4794 li{background-image:url("/imgs/sale/checkbox_be4794.svg"); }
#service .card .text ul.color_d45511 li{background-image:url("/imgs/sale/checkbox_d45511.svg"); }
#service .card .text ul.color_f29f0e li{background-image:url("/imgs/sale/checkbox_f29f0e.svg"); }
#service .card .h5{display: flex;  height:100px;  align-items: center; flex-wrap:wrap; width:100%; justify-content:center;}
#service .card h5{font-size:2.4rem; display:flex; flex-direction:column; margin:0;}
#service .card h5 span{font-size:1.6rem; opacity:.6; color:var(--red); position:relative; overflow:hidden; margin-bottom:.5rem;}
#service .card h5 span:before{content:""; position:absolute; left:0; top:0; width:100%; height:calc(60%); border-bottom:solid 2px var(--red); transform:rotate(7deg);}
#service .card a.btn{border-radius:0; border:solid 1px var(--orange)!important; background-color:var(--orange)!important; color:var(--white); width:75%; margin:1.5rem auto; transition:all .5s;}
#service .card a.btn:hover{background:var(--white)!important; color:var(--orange);}
#service .card p.best{position:absolute; right:-10px; top:130px; width:min-content; text-transform:uppercase; color:var(--white); padding:5px 5px; -webkit-box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.4); box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.4);}

#service > div > p{font-size:1.6rem; color:var(--red); font-weight:700;}

#choose_me{}
#choose_me h2{color:var(--orange);}
#choose_me ul{width:90%; margin:1.5rem 5%;}
#choose_me ul li{padding:.5rem .5rem .5rem 1.5rem; position:relative;}
#choose_me ul li strong{text-transform:uppercase;}
#choose_me ul li:before{content:".";font-size:8rem; color:var(--orange); position:absolute; left:0; top:-100px;	 transform:rotate(45deg);}

#references{height:1245px; overflow:hidden; position:relative;}
#references h2{color:var(--orange);}
#references iframe{position:absolute; left:0; top:120px; height:calc(100% - 120px); width:100%; margin:0; padding:0;}

#request{}
#request .form-control{border-radius:0; border-color:var(--black);}
#request .form-control.error{border-color:var(--red);}
#request input[type="number"].form-control::-webkit-outer-spin-button,#request input[type="number"].form-control::-webkit-inner-spin-button {  -webkit-appearance: none;  margin: 0;}
#request p.error{color:var(--red); padding-top:0!important;}
#request textarea.form-control{height:120px; resize:none;}
#request .row p{font-size:.8rem; margin:0; padding:1rem .5rem 0 .5rem;}
#request .row input[type="checkbox"]{width:30px; height:30px; border:none; background:url("https://webflix.hu/page/imgs/checkbox_no_dark.svg") no-repeat center center / 30px; appearance: none; margin-top:8px;}
#request .row input[type="checkbox"]:checked{ background:url("https://webflix.hu/page/imgs/checkbox_ok_dark.svg") no-repeat center center / 30px; }
#request .row .aszf{margin-top:1.5rem;}
#request .row .aszf p{font-size:1rem; padding:.5rem; margin-top:3px!important;}
#request .row .aszf p a{color:var(--red);text-decoration:underline;}
#request .row button{margin-top:1.75rem;}
#request .row .col-md-12 p{font-size:1rem;}

#footer{height:550px; overflow:hidden; position:relative;}
#footer iframe{position:absolute; left:0; top:0; width:100%; height:100%; margin:0; padding:0;}

#pageup{width:50px;height:50px;position:fixed;right:35px!important;bottom:98px!important;cursor:pointer;z-index:300}
#pageup div{position:absolute;left:0px;bottom:0px;width:100%;height:100%;overflow:hidden}
#pageup div div{width:50px;height:50px}
#pageup{width:40px;height:40px;position:fixed;bottom:5%;right:5%;border-radius:25px;overflow:hidden;border:solid 2px var(--dark);background:var(--dark);cursor:pointer;z-index:200}
#pageup svg{position:absolute;left:0;top:0;width:40px;height:40px;z-index:1}
#pageup svg circle{cx:18;cy:18;r:25;stroke:var(--orange);stroke-width:50;fill:transparent;stroke-dasharray:160;stroke-dashoffset:160;}
#pageup #arrow{background:url("https://webflix.hu/page/imgs/arrow_green.svg") no-repeat center center / 80%;z-index:2;position:absolute;left:0;top:0;width:100%;height:100%}

#cookie{position:fixed; left:0; bottom:20px; background:var(--white); border:solid 2px var(--black); z-index:20; width:90%; margin:0 5%; display:none;}
#cookie h4{background:url("https://webflix.hu/page/imgs/cookie.svg") no-repeat center left / 40px; padding:.5rem .5rem .5rem 50px; margin:.5rem 0;}
#cookie p{margin:0; padding:.5rem;}
#cookie button{background:var(--orange);color:var(--white); border:solid 1px var(--orange); border-radius:0; transition:all .5s;  margin:.5rem; width:250px;}
#cookie button:hover{color:var(--orange); background:var(--white);}
#cookie a{background:var(--white);color:var(--black); border:solid 1px var(--black); border-radius:0; transition:all .5s;margin:.5rem;}
#cookie a:hover{color:var(--white); background:var(--black); }

@media only screen and (max-width: 1740px) {
	#cookie button,#cookie a{width:100%;}
}

@media only screen and (max-width: 800px) {
	::-webkit-scrollbar {display:none;}
	#service .card .text{height:auto;}
	#references{height:1005px;}
	#request .row .aszf p{width:calc(100% - 30px);}
	#request .row .aszf p.error{width:100%; margin-top:15px!important; font-size:.8rem; text-align:center;}
	#request .row .aszf input{margin-top:20px;}
	#request .row button{width:100%; padding:5px 0; text-align:center;}
	#footer{height:1235px;}
}