:root {
	--c-black: hsl(240, 8%, 10%);
	--c-white: hsl(0, 0%, 100%);
	
	--c-lightgray: hsla(240,4%,95%,1);
	--c-mediumgray: hsl(240,1%,83%);
	--c-gray: hsl(240,1%,70%);
	--c-darkgray: hsl(240,1%,48%);
	--c-dark: hsl(240,4%,20%);
	--c-labelgray: hsl(240,1%,40%);
	/*--Primary--*/
	--c-primary-lighter: hsl(220,90%,70%);
	--c-primary-light: hsl(220, 90%, 63%);
	--c-primary: hsl(220, 90%, 56%);
	--c-primary-dark: hsl(220, 90%, 49%);
	--c-primary-darker: hsl(220, 90%, 42%);
	--c-primary-shadow: hsl(220,90%,90%);
	--c-primary-shadow2: hsla(220,90%,56%,0.5);
	/*--Accent--*/
	--c-accent-lighter: hsl(349, 75%, 67%);
	--c-accent-light: hsl(349, 75%, 59%);
	--c-accent: hsl(349, 75%, 51%);
	--c-accent-dark: hsl(349, 75%, 44%);
	--c-accent-darker: hsl(349, 75%, 36%);
	--c-accent-shadow: hsl(349, 75%, 90%);
	/*--Success--*/
	
	--c-success-lighter: hsl(94, 48%, 74%);
	--c-success-light: hsl(94, 48%, 65%);
	--c-success: hsl(94, 48%, 56%);
	--c-success-dark: hsl(94, 48%, 48%);
	--c-success-darker: hsl(94, 48%, 42%);
	--c-success-shadow: hsl(94, 48%, 85%);
	--c-success-shadow2: hsl(94, 48%, 85%,0.5);
	/*--Error--*/
	--c-error-lighter: hsl(349, 75%, 67%);
	--c-error-light: hsl(349, 75%, 59%);
	--c-error: hsl(349, 75%, 51%);
	--c-error-dark: hsl(349, 75%, 44%);
	--c-error-darker: hsl(349, 75%, 36%);
	--c-error-shadow: hsl(349, 75%, 90%);
	/*--Warning--*/
	--c-warning-lighter: hsl(46, 100%, 80%);
	--c-warning-light: hsl(46, 100%, 71%);
	--c-warning: hsl(46, 100%, 61%);
	--c-warning-dark: hsl(46, 100%, 50%);
	--c-warning-darker: hsl(46, 100%, 47%);
	--c-warning-shadow: hsl(46, 100%, 90%);
	
	--fs-xxxxl: 3.815em;
	--fs-xxxl: 4em;
	--fs-xxl: 2.441em;
	--fs-xl: 1.953em;
	--fs-lg: 1.563em;
	--fs-md: 1.25em;
	--fs-base: 1em;
	--fs-sm: 0.85em;
	--fs-sm2: 0.8em;
	--fs-sm3: 0.7em;
	--fs-xs: 0.64em;
	
	--ipt-radius: 0.25em; 
	--ipt-radius-sm: 0.2em; 
	--btn-radius: 0.25em;
	
	--tr-all-02s: all 0.2s ease;
	--tr-all-03s: all 0.3s ease;
	--nav-box-shadow: 0 10px 20px rgba(0,0,0,0.2);
	--box-shadow: 0 0 20px rgba(0,0,0,0.2);
	--navstart-width: 180px; /*-- pl. a navigációs sávval egy vonalban levő logo block szélessége --*/
	--navend-width: 180px; /*-- pl. a navigációs sávval egy vonalban levő ikonos block szélessége --*/
	
	--space-unit: 1.25em;
	--gap: 0.75em;
	--gap2: 1.5em;
	--gap3: 2em;
	
	--space-xxxxs: calc(0.125 * var(--space-unit));
    --space-xxxs: calc(0.25 * var(--space-unit));
    --space-xxs: calc(0.375 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(3.25 * var(--space-unit));
    --space-xxl: calc(5.25 * var(--space-unit));
    --space-xxxl: calc(8.5 * var(--space-unit));
    --space-xxxxl: calc(13.75 * var(--space-unit));
	
	/*--text-vspace-multiplier: 1em;*/
}

/*---sliders---*/

.tr-gradient-top {
background: -moz-linear-gradient(top,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); 
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); 
background: linear-gradient(to bottom,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#00000000',GradientType=0 ); 
}

.tr-gradient-bottom {
background: -moz-linear-gradient(top,  rgba(25,28,74,0) 0%, rgba(25,28,74,0.7) 100%);
background: -webkit-linear-gradient(top,  rgba(25,28,74,0) 0%,rgba(25,28,74,0.7) 100%); 
background: linear-gradient(to bottom,  rgba(25,28,74,0) 0%,rgba(25,28,74,0.7) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); 
}








/*---billboard - majd külön css-be kerül, mert ez csak spec oldalakon jelenik meg pl. home---*/
.bb-wrapper {width: 100%; position:relative; margin-bottom: 0; padding-bottom: 50px; margin-top: 0;float: left; overflow: hidden; min-height: 70vh; display: inline-block; }

.bb-wrapper,
.bb-wrapper .bb,
.bb-wrapper .owl-carousel,
.bb-wrapper .owl-stage,
.bb-wrapper .owl-stage-outer,
.bb-wrapper .owl-item {/*height: 70vh;*/}

.bb-wrapper .owl-carousel {background: #2f358b;}



.bb-wrapper .owl-stage {display:flex !important;
    flex-direction: row;
    flex-wrap: wrap;
background: #2f358b;	
}

.bb-wrapper .owl-item {min-height: 300px;    display: flex;
    justify-content: flex-start;
    height: auto;
background: #2f358b;	
}

.bb-wrapper .owl-item:hover, .bb-wrapper .owl-item:active {outline: none;}

.bb-wrapper .owl-item:after {
	position: absolute;
	background: rgba(255,255,255,0.2);
	height: 100%;
	width: 1px;
	top: 0;
	right: 0;
	content: '';
}

.bb {width: 100%; float: left; outline: none; position:relative;}
.bb-inner {position: relative; width: 100%; text-align: left; padding: 60px 40px 30px 40px; color: #fff; background: #2f358b;}

.bb-img-container {width: 100%; padding: 50%; position: relative;} 
.bb-img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; overflow: hidden;  transition: border-radius 3s ease;}
.bb-bottom {width: 100%; padding: 50px 0 0 0; float: left;}


.owl-item:nth-child(1) .bb-img {border-radius: 56% 44% 64% 36% / 34% 59% 41% 66% }
.owl-item:nth-child(2) .bb-img {border-radius: 62% 38% 45% 55% / 38% 53% 47% 62% }
.owl-item:nth-child(3) .bb-img {border-radius: 37% 63% 40% 60% / 47% 36% 64% 53% }
.owl-item:nth-child(4) .bb-img {border-radius: 56% 44% 64% 36% / 34% 59% 41% 66% }
.owl-item:nth-child(5) .bb-img {border-radius: 62% 38% 45% 55% / 38% 53% 47% 62% }
.owl-item:nth-child(6) .bb-img {border-radius: 37% 63% 40% 60% / 47% 36% 64% 53% }
.owl-item:nth-child(7) .bb-img {border-radius: 56% 44% 64% 36% / 34% 59% 41% 66% }
.owl-item:nth-child(8) .bb-img {border-radius: 62% 38% 45% 55% / 38% 53% 47% 62% }
.owl-item:nth-child(9) .bb-img {border-radius: 37% 63% 40% 60% / 47% 36% 64% 53% }
.owl-item:nth-child(10) .bb-img {border-radius: 56% 44% 64% 36% / 34% 59% 41% 66% }
.owl-item:nth-child(11) .bb-img {border-radius: 62% 38% 45% 55% / 38% 53% 47% 62% }
.owl-item:nth-child(12) .bb-img {border-radius: 37% 63% 40% 60% / 47% 36% 64% 53% }

.owl-item.on .bb-img {transition: border-radius 3s ease;}
/*
.owl-item:nth-child(1):hover .bb-img {border-radius: 37% 63% 40% 60% / 47% 36% 64% 53%}
.owl-item:nth-child(2):hover .bb-img {border-radius: 35% 65% 33% 67% / 56% 49% 51% 44%}
.owl-item:nth-child(3):hover .bb-img {border-radius: 62% 38% 45% 55% / 38% 53% 47% 62%}
.owl-item:nth-child(4):hover .bb-img {border-radius: 37% 63% 40% 60% / 47% 36% 64% 53%}
.owl-item:nth-child(5):hover .bb-img {border-radius: 58% 42% 33% 67% / 56% 49% 51% 44%}
.owl-item:nth-child(6):hover .bb-img {border-radius: 62% 38% 45% 55% / 38% 53% 47% 62%}
.owl-item:nth-child(7):hover .bb-img {border-radius: 37% 63% 40% 60% / 47% 36% 64% 53%}
.owl-item:nth-child(8):hover .bb-img {border-radius: 35% 65% 33% 67% / 56% 49% 51% 44%}
.owl-item:nth-child(9):hover .bb-img {border-radius: 62% 38% 45% 55% / 38% 53% 47% 62%}
.owl-item:nth-child(10):hover .bb-img {border-radius: 37% 63% 40% 60% / 47% 36% 64% 53%}
.owl-item:nth-child(11):hover .bb-img {border-radius: 58% 42% 33% 67% / 56% 49% 51% 44%}
.owl-item:nth-child(12):hover .bb-img {border-radius: 62% 38% 45% 55% / 38% 53% 47% 62%}
*/


.owl-item:nth-child(1).on .bb-img {animation: bolb1 3s ease-in-out infinite alternate;}
.owl-item:nth-child(2).on .bb-img {animation: bolb2 3s ease-in-out infinite alternate;}
.owl-item:nth-child(3).on .bb-img {animation: bolb3 3s ease-in-out infinite alternate;}
.owl-item:nth-child(4).on .bb-img {animation: bolb1 3s ease-in-out infinite alternate;}
.owl-item:nth-child(5).on .bb-img {animation: bolb2 3s ease-in-out infinite alternate;}
.owl-item:nth-child(6).on .bb-img {animation: bolb3 3s ease-in-out infinite alternate;}
.owl-item:nth-child(7).on .bb-img {animation: bolb1 3s ease-in-out infinite alternate;}
.owl-item:nth-child(8).on .bb-img {animation: bolb2 3s ease-in-out infinite alternate;}
.owl-item:nth-child(9).on .bb-img {animation: bolb3 3s ease-in-out infinite alternate;}
.owl-item:nth-child(10).on .bb-img {animation: bolb1 3s ease-in-out infinite alternate;}
.owl-item:nth-child(11).on .bb-img {animation: bolb2 3s ease-in-out infinite alternate;}
.owl-item:nth-child(12).on .bb-img {animation: bolb3 3s ease-in-out infinite alternate;}


@keyframes bolb1 {
from {border-radius: 56% 44% 64% 36% / 34% 59% 41% 66%}
to {border-radius: 37% 63% 40% 60% / 47% 36% 64% 53%}
}

@keyframes bolb2 {
from {border-radius: 62% 38% 45% 55% / 38% 53% 47% 62%}
to {border-radius: 35% 65% 33% 67% / 56% 49% 51% 44%}
}

@keyframes bolb3 {
from {border-radius: 37% 63% 40% 60% / 47% 36% 64% 53%}
to {border-radius: 62% 38% 45% 55% / 38% 53% 47% 62%}
}




.bb-img img {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; transition: transform 8s ease; z-index: 2; }
.bb-img video {position: absolute; z-index: 50 !important; top: 0; left: 50%; bottom: 0; right: 0; width: auto; height: 100% !important;  transform: translateX(-50%);}


.owl-item:hover .bb-img img {transform: scale(1.2, 1.2); transition: transform 8s ease;}
.owl-item:hover .bb-img video {}

.bb-title {font-size: 34px; line-height: 38px; font-weight: normal; letter-spacing: 0px; font-family: 'Bold';}
.bb-title span {color: #ffcc00;}
.bb-text {padding-top: 10px; font-size: 20px; line-height: 25px; font-family: 'Roboto', Arial, sans-serif; font-weight: normal;}

.bb-prices {width: 180px; height: 180px; float: left; background: crimson; position: absolute; bottom: -30px; right: 0; border-radius: 50%; display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 55;
}

.akciospot {width: 120px; height: 120px; float: left; background: crimson; position: absolute; top: -15px; left: 0; border-radius: 50%; display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 10;
font-size: 25px;
font-weight: bold;
}

.bb-price {font-size: 35px; line-height: 40px; font-family: 'Medium'; width: 100%; text-align: center; }
.bb-price-from {font-size: 20px; line-height: 25px; width: 100%; text-align: center; }
.bb-price-small {font-size: 13px; line-height: 18px; width: 100%; text-align: center; padding: 0px 25px 0 25px; opacity: 0.5;}

.bb-price small {font-size: 18px; line-height: 20px; font-weight: normal; width: 100%; display: inline-block;}
.bb-price small strike {display: inline-block; font-size: 18px; line-height: 20px; font-weight: normal; width: 100%; color: #ffcc00;}
.bb-more {float: right; border-radius: 8px; width: auto !important;}


.bb-title, .bb-text, .bb-price-original, .bb-price, .bb-price-small {float: left; clear: left;}


.bb-text .bb-alcim b {color:#ffcc00; font-size: 24px;}




.bb-wrapper .owl-dots {position: absolute; bottom: -60px; padding: 10px 20px; width: 100%; text-align: center; left: 0;}
.bb-wrapper .owl-dots button {width: 18px; height: 18px; float: none; background-color: rgba(47,53,139,0.3); margin: 10px 5px; outline: 0 !important; border: 0 !important; border-radius: 50%;transform: translate(0,2px); box-shadow: 0 0 0 2px rgba(0,0,0,0.1); transition: var(--tr-all-02s);}

.bb-wrapper .owl-dots button.active {background-color: #0099ff;border: 0;}
.bb-wrapper .owl-dots button:hover {box-shadow: 0 0 0 5px rgba(255,255,255,0.3);border: 0;}


.owl-nav {outline: none;}
.bb-wrapper .owl-nav {position: absolute; top: 50%; left: 0; height: 0; width: 100%;}
.bb-wrapper .owl-nav button {width: 60px; height: 60px; top: -30px; border-radius: 50%; outline: 0 !important; border: 0 !important; position: absolute; background-color: transparent;line-height: 60px; text-align:center; transition: var(--tr-all-02s);}
.bb-wrapper .owl-nav button:hover {background-color: rgba(255,255,255,0.7) !important;}
.bb-wrapper .owl-nav button span {text-indent: -300px; overflow: hidden; height: 60px; width: 60px;background-repeat: no-repeat; background-position:center; background-size: 30px auto;filter: invert(1);transition: var(--tr-all-02s);}
.bb-wrapper .owl-nav button.owl-prev {left: 10px;}
.bb-wrapper .owl-nav button.owl-next {right: 10px;}
.bb-wrapper .owl-nav button.owl-prev span {background-image: url('../img/arrow-prev.svg'); }
.bb-wrapper .owl-nav button.owl-next span {background-image: url('../img/arrow-next.svg'); }
.bb-wrapper .owl-nav button:hover span {filter: invert(0);}
.owl-nav button.disabled {opacity: 0;}
.video-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #2e3373;
}
.video-bg video {
	position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    max-width: none;
	object-fit: cover;
    height: 100%;
    width: 100%;
	
	filter: saturate(1.2) contrast(1.2);/**/
}

.bb-szoveg {color: #ffff00;}

/*---youtube---*/
.yt-wrapper {
	position: absolute;
	height: 140%;
	width: 140%;
	top: -20%;
	left: -20%;
	background: #000;
}
.yt-wrapper:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0);
}

.yt-wrapper iframe {width: 100%;height: 100%;}


.bb-videowrapper {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; transition: transform 8s ease; overflow: hidden;}
.bb-videowrapper iframe {width: 200%;height: 200%; position: absolute; transform: translate(-25%, -25%);}





/*---full width--slider---*/
/*.full-width-header .bb-wrapper,
.full-width-header .bb-wrapper .bb,
.full-width-header .bb-wrapper .owl-carousel,
.full-width-header .bb-wrapper .owl-stage,
.full-width-header .bb-wrapper .owl-stage-outer,
.full-width-header .bb-wrapper .owl-item {height: 80vh;}
.full-width-header .bb-wrapper .bb-inner {width: 100%; padding: 100px calc((100% - 1360px)/2) 80px calc((100% - 1360px)/2);}
*/

.bb img {object-fit: cover; object-position: center center; height: 100%; width: 100%; }

@media screen and (max-width: 1500px){
/*.full-width-header .bb-wrapper .bb-inner {padding: 60px 60px;}	*/

.bb-inner {padding: 60px 25px 25px 25px;}
.bb-bottom {padding-top: 80px;}
.bb-prices {bottom: -60px;}

}	

/*--ipad x-pro miatt--*/
@media screen and (max-width: 1200px) and (min-height: 1200px){
	/*---billboard slider---*/
	/*.bb-wrapper,
	.bb-wrapper .bb,
	.bb-wrapper .owl-carousel,
	.bb-wrapper .owl-stage,
	.bb-wrapper .owl-stage-outer,
	.bb-wrapper .owl-item {height: 40vh !important;}*/
}






@media screen and (max-width: 800px){
	 
.bb-bottom {padding-top: 50px;}
.bb-prices {bottom: -20px;}
.bb-wrapper .owl-dots {width: auto; right: 0; left: 0; transform: translateX(0); width: 100%; text-align:center; padding: 5px 20px; bottom: -40px;}	
.bb-wrapper .owl-dots .owl-dot {float: none; width: 12px; height: 12px;}


.bb-videowrapper {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; transition: transform 8s ease; overflow: hidden;}
.bb-videowrapper iframe {width: 200% !important;height: 200% !important; position: absolute !important; transform: translate(-30%, -25%);}


}


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

.bb-img-container {padding: 40% 50%;}
.bb-inner {padding-top: 40px;}
.bb-img {height: 100%; width: 86%;margin-left: 5%;}
.bb-title {font-size: 25px; line-height: 30px;}
.bb-bottom {padding-top: 40px;}
.bb-prices {bottom: -60px; transform: scale(0.7, 0.7);}
.bb-wrapper .owl-item:after {display: none;}


}

@media screen and (max-width: 500px){
.bb-videowrapper {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; transition: transform 8s ease; overflow: hidden;}
.bb-videowrapper iframe {width: 200% !important;height: 200% !important; position: absolute !important; transform: translate(-50%, -25%);}
}