@font-face {
    font-family: 'Orbitron';
    src: url('font/Orbitron-ExtraBold.eot');
    src: url('font/Orbitron-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('font/Orbitron-ExtraBold.woff2') format('woff2'),
        url('font/Orbitron-ExtraBold.woff') format('woff'),
        url('font/Orbitron-ExtraBold.ttf') format('truetype'),
        url('font/Orbitron-ExtraBold.svg#Orbitron-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans 18pt';
    src: url('font/DMSans18pt-Regular.eot');
    src: url('font/DMSans18pt-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/DMSans18pt-Regular.woff2') format('woff2'),
        url('font/DMSans18pt-Regular.woff') format('woff'),
        url('font/DMSans18pt-Regular.ttf') format('truetype'),
        url('font/DMSans18pt-Regular.svg#DMSans18pt-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --pink: #ED1F79;
    --pink-rgb: 237,31,121;
    --black: #000000;
    --light: #B3B3B3;
    --gray: #606060;
    --dgray: #242424;
    --red: #e6332a;
    --blue: #0088EC;
    --blue-rgb: 0,136,236;

    --navbar-height: 104px;
    --navbar-height-md: 98px;
}

html {scroll-behavior:smooth;}

a, a:link, a:visited, a.active {color: var(--blue)}
a:hover {color: rgba(var(--blue-rgb),.8)}
pre {color:white}
hr {border-color:white}
.img-div > img {object-fit:cover;width:100%;height:100%}
.img-div {background-repeat:no-repeat;background-position:center;background-size:contain;}

/* chrome autocomplete background change ignore */
input, select {-webkit-background-clip: text !important;background-clip: text !important;}
input:-webkit-autofill{-webkit-text-fill-color: white !important;}
select {appearance:none;}

.form-control.is-valid, .form-control.is-valid:focus {border-color:var(--blue)}
.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 .2rem rgba(var(--blue-rgb),.25);
}
.text-danger {color:var(--gray)!important}
.form-control.is-invalid, .was-validated .form-control:invalid,
.custom-select.is-valid, .was-validated .custom-select:valid,
.custom-select.is-valid:focus, .was-validated .custom-select:valid:focus {border-color:transparent;box-shadow:none}
.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label {color:var(--gray)}
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {border-color:var(--gray);border-bottom-color: var(--gray);box-shadow: 0 0 0 .2rem rgba(255,255,255,.1)}
.custom-select {color:var(--light)}

/* custom input */
.ui-menu.ui-autocomplete.ui-front {z-index:1100}
.form-control::placeholder {color:var(--lgray)}
input:disabled {color:#6c757d!important;background-color:#e9ecef!important}
.custom-check, .custom-radio {
    display: block;
    position: relative;
    padding-left: 1.5rem;
    margin:.5rem 0;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.custom-check input, .custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1rem;
    width: 1rem;
    background-color:white;
}
.custom-radio .checkmark {border-radius:50%}
.custom-check input ~ .checkmark, .custom-radio input ~ .checkmark, .custom-check:hover input ~ .checkmark, .custom-radio:hover input ~ .checkmark {background-color:var(--black);border:1px solid white}
.custom-check input:checked ~ .checkmark {background-color:var(--blue)}
.custom-radio input:checked ~ .checkmark {background-color:white}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.custom-check input:checked ~ .checkmark:after, .custom-radio input:checked ~ .checkmark:after {display:block}
.custom-radio .checkmark:after {
    top: 0;
    left: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background:var(--blue);
}
.custom-check .checkmark:after {
    left: 3px;
    top: 0;
    width: .5rem;
    height: .75rem;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.bg-pink {background-color: var(--pink)}
.bg-black {background-color: var(--black)}
.bg-gray {background-color: var(--gray)}
.bg-light {background-color: var(--light)}
.bg-white {background-color: white}

.text-pink {color: var(--pink)!important}
.text-black {color: var(--black)!important}
.text-gray {color: var(--gray)!important}
.text-light {color: var(--light)!important}
.text-white path {fill: white}
.text-black path {fill: var(--black)}

.btn {border-radius: 0;}
.btn-pink {
    color: white!important;
    background-color: var(--pink);
    border-color: var(--pink)
}
.btn-pink path {fill: white}
.btn-pink:hover, .btn-pink.active {
    color: white!important;
    background-color: var(--black);
    border-color: var(--black)
}

.btn-black {
    color: white;
    background-color: var(--black);
    border-color: var(--black)
}
.btn-black path {fill: white}
.btn-black:hover, .btn-black.active {
    color: white;
    background-color: var(--gray);
    border-color: var(--gray)
}

.btn-iblack {
    color: white;
    background-color: var(--black);
    border-color: white;
    font-family: 'Orbitron';
    font-weight: bold;
}
.btn-iblack path {fill: white}
.btn-iblack:hover, .btn-iblack.active {
    color: var(--blue);
    background-color: var(--black);
    border-color: var(--blue)
}

.btn-transparent, .btn-transparent.active {
    color: white;
    background-color: transparent;
    border-color: transparent
}
.btn-transparent path {fill: white}
.btn-transparent:hover {
    color: var(--gray);
    background-color: transparent;
    border-color: transparent
}

.qc-cmp2-persistent-link {background:var(--black)!important;border-color:var(--black);color:white!important}

.more {border-top:1px solid white;border-bottom:1px solid white;display:flex;align-items:center;margin-bottom: .75rem;padding:.5rem 0}
.point {display:inline-block;width:1.5rem;height:1.5rem;background:white;outline:1px solid white;outline-offset:.5rem;border-radius:50%;margin:1rem}

/* base */
body {
    background-color: var(--black);
    color: white;
    font-family: 'DM Sans 18pt';
    font-weight: normal;
}
.mt-nav {margin-top:var(--navbar-height)}
/*header > section {background-color: var(--black)}*/
.wh-100 {
    min-height: 100vh;
    box-sizing: border-box;
}
body.article .wh-100 {align-content:flex-start;min-height:60vh!important}
.mt-navbar {margin-top: var(--navbar-height)}
.pt-navbar {padding-top: var(--navbar-height)}
ol.carousel-indicators li,
ol.carousel-indicators li.active {
    float: left;
    width: 1rem;
    height: 1rem;
    margin-top: 1.5rem;
    margin-left: .5rem;
    margin-right: .5rem;
    opacity: 1;
    background-color: var(--gray);
}
ol.carousel-indicators li.active {
    background-color: white;
}
.hyphens {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
.d-grid {display:grid;}

/* youtube */
.youtube {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    max-width:100%;
}
.youtube iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* animation */
.otrans {
    transition-property: opacity;
    transition-duration: .5s;
    transition-timing-function: linear;
    transition-delay: 0s;
}

/* logo */
#logo {
    width: 8rem;
    height: auto;
}
@keyframes eyeBlink {
    0% {opacity:1;-webkit-opacity:1}
    1% {opacity:0;-webkit-opacity:0}
    5% {opacity:0;-webkit-opacity:0}
    6% {opacity:1;-webkit-opacity:1}
    100% {opacity:1;-webkit-opacity:1}
}
#logo .left-eye, #logo .right-eye {
    animation: eyeBlink 4s linear infinite;
}

/* navbar */
.header {position:absolute;top:0;left:0}
.header #menu {font-family:'Orbitron';font-weight:bold;text-transform:uppercase;}
.header #menu .nav-fb {display:none}
.header .nav-fb svg {width:1.5rem;height:auto}
#navbar-logo {position:absolute;top:2.25rem;left:calc(50% - 64px);width:128px;height:auto}
.navbar-toggler {border-radius:50%;border-color:white!important;color:white!important;width:3.5rem;height:3.5rem;padding:0 1rem;}
.navbar-toggler:hover {border-color:var(--blue)!important;color:var(--blue)!important}
.navbar .navbar-nav .nav-link {color:white}
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active {color:var(--blue)}
.header #social {-ms-flex-direction:row;flex-direction:row;}
.header #social .nav-link {margin:0 .25rem}
.header #social svg {width:auto;height:1.5rem}
.header #social svg:hover path, .header .nav-fb svg:hover path {fill:var(--blue)!important;stroke:var(--blue)!important}
.header.open {height:100dvh;max-width:100vw;position:fixed;background:var(--black);z-index:2}
.header .collapsing {-webkit-transition:none;transition:none;display:none}
.header .navbar-brand {margin:0;text-align:center}
.header.open .navbar-brand, .header.open #social {display:none}
.header #info {display:none;position:absolute;bottom:1.5rem;right:1.5rem;text-align:right}
.header #info .nav-item .nav-link {color:white;padding:0}
.header #info .nav-item .nav-link:hover, .header #info .nav-item .nav-link.active {color:var(--blue)}
.header.open #info {display:block}
/* menu toggle icon */
.navbar-toggler .bar {
    display: block;
    width: 30px;
    height: 3px;
    border-radius: 1.5px;
    background: white;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-webkit-transition: all 0.4s;
}
.navbar-toggler:hover .bar {background-color:var(--blue)}
.navbar-toggler.collapsed .bar {width:22px}
.navbar-toggler .bar:nth-child(1) {
    margin-bottom: 5px;
    transform: rotate(45deg);
    transform-origin: 10% 10%;
    -ms-transform: rotate(45deg);
    -ms-transform-origin: 10% 10%;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
}
.navbar-toggler .bar:nth-child(2) {margin-bottom:5px;opacity: 0;}
.navbar-toggler .bar:nth-child(3) {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
    -ms-transform: rotate(-45deg);
    -ms-transform-origin: 10% 90%;
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
}
.navbar-toggler.collapsed .bar:nth-child(1) {
    transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
}
.navbar-toggler.collapsed .bar:nth-child(2) {opacity: 1;}
.navbar-toggler.collapsed .bar:nth-child(3) {
    transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
}
.load-modal.fs-6 {text-transform:uppercase;}

/* modal */
.modal-fullscreen {margin:0;max-width:100vw;width:100%}
.modal-fullscreen .modal-content {height:100vh}
.modal-header, .modal-content {border-radius:0}
.modal-body {background:var(--black);padding-top:0;padding-bottom:0}
.modal-body .row {height:100vh}
.close {float:none;color:white;text-shadow:none;opacity:1;width:3.5rem;height:3.5rem;border-radius:50%;padding:0 1rem!important;border:1px solid white!important}
#alert-modal .close {border:0 none!important;color:var(--blue)}
#alert-modal .alert-success {background:rgba(var(--blue-rgb),.25);color:var(--blue);border-radius:0}
#alert-modal .modal-title {font-family:'Orbitron';font-weight:bold;}
.modal-body h2 {margin-top:1.5rem;font-size:2.5rem}
.modal-body .td-text {margin-top:1.5rem}
.modal-body .day {font-family:'Orbitron';font-weight:bold;font-size:1.5rem;padding-bottom:.5rem;border-bottom:1px solid white;margin-bottom:.5rem}
.modal-body .day span {font-family:'DM Sans 18pt';font-weight:normal;font-size:1rem;display:block;float:right;padding-top:.5rem}
#phone-modal h2 {font-size:3.125rem}
#phone-modal .td-text {display:grid;align-items:center;height:calc(100vh - 80px);margin:0}
#openinghours-modal .lead {font-size:1rem}

/* main page */
body.default .carousel-item {
    min-height:calc(100vh - var(--navbar-height));
    margin-top:var(--navbar-height);
    font-family: 'Orbitron';
    font-weight: bold;
    text-transform: uppercase}
body.default .profil {display:grid;align-items:center}
body.default .profil img {max-height:60vh}
/*body.default article svg {margin-bottom:4rem}*/
body.default .logodiv {min-height:calc(100vh - var(--navbar-height))}
body.default article[class*=slide-3] h2 {
    font-size:10rem;
    line-height:.8
}
body.default main > section:first-child {position:relative;}

.d-left {display:none!important}
body.default main section {min-height:calc(100vh - var(--navbar-height));padding:0 3rem}
body.default main section.section-first {min-height:calc(90dvh - var(--navbar-height))}
body.default main section > .row {height:100%}
[class*=text-box-] {height:100%;display:grid;align-items:center;position:relative;z-index:1;}
body.defaut [class*=text-box-] {width:50%}
[class*=text-box-] h2, [class*=text-box-] h1 {text-transform: uppercase;}
.text-box-right {margin-left:auto}
.galaxy {background-image:url('img/galaxys-kod.png');background-position:center;background-size:contain;background-repeat:no-repeat;display:grid;align-items:center}
body.default .galaxy {width:80%}
[class*=line-] {height:50vh;border:1px solid white;display:grid}
.line-right-bottom {width:calc(40% - 1px);border-bottom:0;border-left:0;margin-top:calc((100vh - var(--navbar-height)) / 2);margin-left:10%;margin-right:1px}
.line-left-bottom {width:calc(40% - 1px);border-bottom:0;border-right:0;margin-top:calc((100vh - var(--navbar-height)) / 2);margin-right:10%}
.line-right-top {width:calc(15% - 1px);border-left:0;border-top:0;margin-left:5%}
.line-left-top {width:calc(15% - 1px);border-right:0;border-top:0;margin-right:5%}

#rolunk .tab-pane, #rolunk .tab-pane .about-img {width:100%;height:100%}
.about-img {position:relative;}
.about-img img {
    width: 80%;
    height: auto;
    -webkit-transform: rotate(-10deg) scale(0.2);
    -ms-transform: rotate(-10deg) scale(0.2);
    transform: rotate(-10deg) scale(0.2);}
.about-img .point {position:absolute;background:white;border-color:white;cursor: pointer;width: 27px;height: 27px;z-index:2;opacity:.5}
.about-img .point:hover {opacity:1}
.about-img .point1 {left:13%;top:52%}
.about-img .point2 {left:12%;top:27%}
.about-img .point3 {left:30%;top:4%}
.about-img .point4 {left:45%;top:4%}
.about-img .point5 {left:59%;top:34%}
.about-img .point6 {left:65%;top:54%}
.tooltip.show {border:1px solid white;background:black;border-radius:.5rem;margin-left:-4rem;margin-bottom:1rem}
.tooltip-inner {max-width: 250px;width: auto;white-space: normal;text-align:left!important}

.floating {animation: float 6s linear infinite}
@keyframes float {
    0% {
      transform: translateY(0px) rotate(0deg);
    }
    25% {
      transform: translateY(-10px) rotate(-2deg);
    }
    50% {
      transform: translateY(0px) rotate(0deg);
    }
    75% {
      transform: translateY(10px) rotate(2deg);
    }
    100% {
      transform: translateY(0px) rotate(0deg);
    }
}

.section-first {display:flex}
.first h2 {font-size:3rem}
.first {margin-right:-3rem;position:relative;align-self:center;overflow:hidden}
.first .moon {position:absolute;bottom:0;right:0;width:100%;height:auto}
.first .galaxy-first {position:absolute;top:0;right:0;width:100%;height:auto}
.first .aimg {width:70%;position:relative;left:15%}
.first .shadow {background-image:url('img/shadow.png');background-repeat:no-repeat;background-size:100% auto;background-position:bottom right;width:100%;height:100%;position:absolute;bottom:-2px;right:0;}
.first [class*=customer] {background-image:url('img/customer.png');background-repeat:no-repeat;background-size:100% auto;background-position:bottom center;position:absolute;animation: fadeIn 2s ease forwards;}
.first .customer1 {width:7vw;height:7vw;bottom:85%;right:40%;transform:rotate(-10deg);opacity:0;animation-delay:.25s;}
.first .customer2 {width:8vw;height:8vw;bottom:88%;right:24%;transform:rotate(0deg);opacity:0;animation-delay:1.5s;}
.first .customer3 {width:7vw;height:7vw;bottom:84%;right:10%;transform:rotate(25deg);opacity:0;animation-delay:.75s;}
.first .customer4 {width:11vw;height:11vw;bottom:55%;right:24%;transform:rotate(0deg);opacity:0;animation-delay:1s;}
.first .customer5 {width:7vw;height:7vw;bottom:66%;right:8%;transform:rotate(15deg) scaleX(-1);opacity:0;animation-delay:2s;}
@keyframes fadeIn {to {opacity:1;}}

.icon-down svg {width:2.5rem;height:2.5rem;position: relative;left:1.75rem}

/* column page */
body.column h1 {margin:0}
body.column article {border:1px solid white;padding:1rem 1.5rem;position: relative;}
body.column article > h2 {font-family:'Orbitron';font-weight:bold;text-transform:uppercase;font-size:1.625rem;margin-bottom:15px;}
body.column article .btn-show {font-family: 'Orbitron';text-transform: uppercase;position:absolute;bottom:0;right:0;border-top:1px solid white;border-left:1px solid white;font-family:'Orbitron';color:white}
body.column article .btn-show:hover, body.column article .btn-show.active {background:var(--blue)}

/*.column header > section {background-color: transparent}*/
#column-carousel .lead1 li {list-style: square;margin-bottom:.5rem;}
.blog-lead {
    margin: 1.5rem auto;
    padding: 1.5rem;
    background-color: white
}
.blog-lead:nth-child(1) {margin-top: 4rem;}
.blog-lead a {position:relative}
.blog-lead h2 {
    font-family: 'Orbitron';
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.625rem;
    padding-bottom: .5rem;
}
.btn-blog {
    color: white;
    background-color: var(--pink);
    border-color: var(--pink);
    padding: 0 2rem;
    font-family: 'Orbitron';
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.625rem;
    position: absolute;
    right: .5rem;
    bottom: -3rem;
}

.btn-border {color:white!important;border:1px solid white;margin-top:.5rem}
.btn-border:hover {color:var(--blue)!important;border-color:var(--blue)}

/* pager */
.btn-pager {
    color: var(--pink);
    font-family: 'Orbitron';
    font-weight: bold;
    font-size: 1.25rem!important;
    background-color: transparent;
    border: 0 none;
    border-radius: 0!important;
    margin-left: .25rem;
    margin-right: .25rem;
    padding-left: .75rem!important;
    padding-right: .75rem!important;
}
.btn-pager:hover, .btn-pager.active {
    color: white;
    background-color: var(--transparent);
}

/* about us */
.tab-content [class*=text-box-] {width:100%}
#rolunk .nav-pills .nav-link {color:white;text-align:left;padding:.75rem 0 0 0}
#rolunk .nav-pills .nav-link.active, #rolunk .nav-pills .show > .nav-link {color:#fff;background-color:transparent;text-align:left}
h4.worker {margin-bottom:0;font-family:'Orbitron';text-transform: uppercase;}
#rolunk p {color:var(--light)}
#rolunk .on {display:none;}
#rolunk .off {display:block;}
#rolunk .active .on {display:block;}
#rolunk .active .off {display:none;}
/* contact-us */
/*.btn-field {position:relative}
.btn-field > div {position:absolute;bottom:0}*/
#kapcsolat {padding-top:4rem}
#kapcsolat h2 {font-family:'Orbitron';text-transform: uppercase;font-size: 3rem;}
#kapcsolat input, #kapcsolat select {appearance:none;border-radius:0rem;background:var(--black);border-top:0;border-left:0;border-right:0;border-bottom:2px solid var(--light);color:white!important}
#kapcsolat select option {background:var(--black);}
#kapcsolat textarea {background:var(--black);border:0 none;border-bottom:2px solid var(--light);border-radius:0;color:white}
#kapcsolat label {text-align:left!important;}
#kapcsolat select {background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px !important;}
#kapcsolat label {display:block;text-align:left!important;}

/* blog */
.blog-head {text-align: center;}
h1 {font-family:'Orbitron';text-transform: uppercase;font-size: 3rem;margin-bottom: 16px;}
.blog-title, .tag {font-family:'Orbitron';text-transform: uppercase;color: #0088EC;font-size: 1rem;}
.tags {margin:1rem 0 3rem 0}
.tag {margin:0 .5rem}
article .tag {margin:0 .5rem 0 0}

main .blog-box .row {margin-top:calc(var(--navbar-height) + 2rem);border: 1px solid white;padding: 2rem;margin-left: 0%;margin-right: 0%;}
.blog-box .td-text {text-align: justify;line-height: 1.6;}
.blog-box h2 {font-family:'Orbitron';text-transform: uppercase;font-size: 2rem;}
.blog-box h4 {font-family:'Orbitron';text-transform: uppercase;color: #0088EC;font-size: 1rem;}
.blog-box img {width: 100%;height: auto;display: block;padding: 0px 0px 30px 30px;}
.blog-box .info {padding-bottom: 20px;color: #606060;}
.blog-box .float-right, .blog-box .float-left {width:50%}

.article-list-box {position:relative;background-color:transparent;color:white;border:1px solid white;}
.article-list-box .btn-blog {position: absolute;color:#fff;background-color:transparent;font-family: 'Orbitron';text-transform: uppercase;font-size: 1.3rem;right: 0;bottom: 0;padding: 5px 12px;border:1px solid white;}
.article-list-box .btn-blog:hover {background-color: #0088EC;color: white;}
.article-list-box a {width: fit-content;max-width: 140px;white-space: nowrap;}
.article-list-box h2 {font-family:'Orbitron', sans-serif;text-transform: uppercase;font-size: 20px;color: white;margin-top: 1rem 0 0.5rem 0;padding: 15px;}
.article-list-box .blog-text-body {color: white;font-size: 1rem;padding: 15px;}
.blog-title2 {font-family:'Orbitron';text-transform: uppercase;color: #0088EC;font-size: 1rem;padding: 0px 0px 15px 15px;}
.blog-head .col{margin: 20px 0px 20px;}

.pager-box a {color: white;text-decoration: none;background-color: transparent;padding: 0.25rem 0.75rem;border: 1px solid white;margin: 0 0.25rem;display: inline-block;}
.pager-box a:hover {background-color: #0088EC;color: white;}
.pager-box .current {font-weight: bold;border: 1px solid white;padding: 0.25rem 0.75rem;color: white;background-color: transparent;display: inline-block;text-decoration: none;}
  
/* article-graphic */
.td-text .col-8, .td-text .col-4 {border: 1px solid white;font-family: 'Orbitron';text-transform: uppercase;font-size: 1.2rem;padding: 10px;}
.td-text .col-8 {text-align: start;}
.td-text .col-4 {text-align: center;}
.td-text .col-12 {border: 1px solid white;text-align: start;padding: 10px;font-size: 1rem;}
.td-text .col-12.col-lg-4 {border:0 none}
.graphic-body h5 {font-family: 'Orbitron';font-size: medium;}
.graphic-body p, .graphic-body li {font-size: 1rem;}

/* font */
h2 {font-family:'Orbitron';font-weight:bold;}
.fs-1 {font-size: .75rem}
.fs-2 {font-size: 1rem}
.fs-3 {font-size: 1.25rem}
.fs-4 {font-size: 1.625rem}
.fs-5 {font-size: 1.75rem}
.fs-6 {font-size: 2rem}
.fs-7 {font-size: 3rem}
.fs-8 {font-size: 8rem}
.fs-9 {font-size: 12rem}
.fs-10 {font-size: 15rem}

/* article */
body.article main {margin-top:var(--navbar-height)}
body.article h1 {font-family:'Orbitron';text-transform: uppercase;font-size:3rem;padding-top:0rem}
body.article .leadnode {display:grid;align-items:center;}
body.article article > div.row {text-align:center;margin-bottom: 30px;}
body.article article h3 {font-family: 'Orbitron';text-transform: uppercase;border:1px solid white;padding:.8rem;margin: 0px auto;}
body.article hr {width: 40%; margin: 1em auto;}
body.article .box {border: 1px solid white;padding:.8rem;display: grid;}
body.article .td-text .row span {color: white;text-transform: uppercase;font-family: 'Orbitron';font-size: larger;border: 1px solid white;padding:.8rem;display: grid;}
body.article article h2 {font-family: 'Orbitron';text-transform: uppercase;margin: 20px 0px 15px;}
body.article h2[class*=head] {background:var(--blue);color:white;padding:.75rem 1rem;margin-bottom:0;height:3.5rem;line-height:1;position:relative;margin-top:1rem;align-items:center;display:grid}
body.article h2.head-plus::before {content:'\2b';font: var(--fa-font-solid);background:var(--blue);padding:.75rem;width:4.25rem;height:3.5rem;border:0;border-right:.75rem solid var(--dgray);text-align:center;display:inline-block;position:absolute;top:0;left:0;align-items:center;display:grid}
body.article h2.head-plus {padding-left:5.25rem}
body.article ul.mod li::marker {color:var(--blue);font-size:1.75rem;line-height:1;}
body.article ul.mod {
    background:var(--dgray);padding-top:1rem;padding-bottom:1rem;
    --icon-space: 2rem;
    list-style: none;
    padding-left: 1rem
}
body.article ul.mod li {
    padding-left: var(--icon-space);
}
body.article ul.mod li:before {
    content: "\f00c"; /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    margin-left: calc( var(--icon-space) * -1 );
    margin-right: calc(var(--icon-space) / 2);
    width: calc(var(--icon-space) / 2);
    height: calc(var(--icon-space) / 2);
    border-radius:50%;
    background-color: var(--blue);
    color:white;
    font-size: .75rem;
    text-align: center;
}
body.article img {margin: 5px 5px 21px;}
body.article details {border:1px solid white;padding:1rem;margin-bottom:1rem}
body.article summary {font-family:'Orbitron';font-weight:bold;text-transform:uppercase;}
body.article article > .row .col-lg-4 {text-align:center}

/* article-references */
body.article .ref-box {border:1px solid white;padding:1rem 1.5rem;position: relative;margin: 5px;}
body.article .ref-box > h2 {font-family:'Orbitron';font-weight:bold;text-transform:uppercase;font-size:1.625rem;margin-bottom: 15px;}
body.article .ref-box .btn-show {font-family: 'Orbitron';text-transform: uppercase;position:absolute;bottom:0;right:0;border-top:1px solid white;border-left:1px solid white;font-family:'Orbitron';color:white}
body.article .ref-box .btn-show:hover, body.column article .btn-show.active {background:var(--blue)}
body.article .ref-box .tags {font-family:'Orbitron';text-transform: uppercase;color: #0088EC;font-size: 1rem;}
body .references h6 {margin: 40px 5px 15px;}
body .references p {margin-bottom: 5px;}
body .references .ref-box {border: 1px solid white; margin-bottom: 15px;padding:15px;position: relative;}
#ref {margin-top:calc(var(--navbar-height) + 4rem)}
#ref h1 {font-size:2rem;margin-bottom:4rem}
#ref .ref-lead {border:1px solid white;padding:1rem;margin-bottom:4rem}
#ref .ref-lead p:last-child {margin-bottom:0}
.custom-carousel {overflow:hidden;position:relative;width:100%;height:70vh;margin:40px auto;user-select:none}
.carousel-wrapper {position:relative;width:100%;height:100%}
.carousel-wrapper img {position:absolute;top:50%;left:50%;max-height:100%;max-width:100%;transform-style:preserve-3d;transition:transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;cursor:pointer;user-select:none;filter:grayscale(100%);opacity:0;pointer-events:none;z-index:1}
.carousel-wrapper img.main {transform:translate(-50%, -50%) scale(1);filter:grayscale(0%);opacity:1;pointer-events:auto;z-index:3}
.carousel-wrapper img.side-left {transform:translate(calc(-50% - 150px), -50%) scale(0.75);filter:grayscale(100%);opacity:.5;pointer-events:auto;z-index:2}
.carousel-wrapper img.side-right {transform:translate(calc(-50% + 150px), -50%) scale(0.75);filter:grayscale(100%);opacity:.5;pointer-events:auto;z-index:2}
.carousel-arrow {position:absolute;top:50%;transform:translateY(-50%);border:1px solid white;border-radius:50%;font-size:1.5rem;cursor:pointer;user-select:none;z-index:10;background:transparent;color:white;width:2.5rem;height:2.5rem;text-align:center;align-content:center}
.carousel-arrow.prev {left:0}
.carousel-arrow.next {right:0}

/* course landing */
body.column.course-landing .beauty {color:var(--red);font-size:2rem}
body.column.course-landing #course-top {
    position: relative;
    top:0;
    left:0
}
body.column.course-landing #course-top img {width:50%;height:auto}
body.column.course-landing header > section {background:none}
body.column.course-landing .navbar-toggler {margin-left:auto;}
body.column.course-landing {font-family:'Orbitron';font-weight:bold;overflow-x:hidden;}
body.column.course-landing .course-lead .svg-div svg {width:130%;height:auto;}
body.column.course-landing #course-landing {margin-top:-10%;}

body.column.course-landing .td-text h2 {font-size:1.25rem;}
body.column.course-landing .td-text svg {margin:2rem 0}
body.column.course-landing .td-text ul {text-align:left;}
body.column.course-landing svg#astronaut {width:40%;height:auto}
body.column.course-landing svg#bolt {width:60%;height:auto}
body.column.course-landing svg#target-new,
body.column.course-landing svg#target-edit,
body.column.course-landing svg#target-sell {height:40vh;width:auto}

/* footer */
footer {padding:4rem 0 3rem 0;text-align:center}
footer .row {font-family:'Orbitron';text-align:left}
footer .row a {color:var(--gray)}

@media (min-width: 1513px) { 
    [class*=text-box-] h2 {font-size:4rem}
}

@media screen and (max-width:1199px){
    [class*=contact] p a {margin: 0 3rem;}
    body.column.course-landing #course-landing {margin-top:0;}
}
@media screen and (max-width:992px){
    .fs-6 {font-size: 3rem}
    .fs-9 {font-size: 10rem}
    #logo {width: 6rem;}
    .btn-field > div {position:relative;}
    body.column.course-landing .course-lead .svg-div {text-align:center;}
    body.column.course-landing .course-lead .svg-div svg {width:90%;}

    [class*=line-], .d-right {display:none!important}
    .d-left {display:flex!important}
    .galaxy {margin:auto}
    body.default main section {height:auto}
    [class*=text-box-] {margin:auto;text-align:center;}
    .icon-down svg {width:2.5rem;height:2.5rem;left:calc(50vw - 1.25rem)}
    .about-img img {width: 100%;}

    .about-img .point1 {left:16%}
    .about-img .point2 {left:15%}
    .about-img .point3 {left:38%}
    .about-img .point4 {left:56%}
    .about-img .point5 {left:74%}
    .about-img .point6 {left:82%}
    body.article h1 {font-size:2rem;text-align:center}
    .first {margin-right: -15px}
    .first > div:first-child {margin-bottom:4rem}

    #openinghours-modal .modal-body > .row > div {padding-left:3rem!important;padding-right:3rem!important}
    #openinghours-modal h2, #openinghours-modal .lead {text-align:center}
    #rolunk {padding-top:4rem}

    [class*=text-box-] h2 {font-size:3rem}
    .first h2 {font-size:2.5rem}
    [class*=text-box-] .td-text {font-size:1.25rem}
    body.article h1 {font-size:3rem}
}
@media screen and (max-width:768px){
    .mt-navbar {margin-top: var(--navbar-height-md)}
    .pt-navbar {padding-top: var(--navbar-height-md)}
    .fs-3, .btn-pager {font-size: 1rem!important}
    .fs-4, .blog-lead h2, .btn-blog {font-size: 1.5rem}
    .fs-7 {font-size: 2.5rem}
    .bg-md-site-black {background-color: var(--black)!important}
    body.default .profil img {max-height:40vh}
    body.default .carousel-item {
        min-height:calc(100vh - var(--navbar-height-md));
        margin-top:var(--navbar-height-md)}
    body.default .logodiv {min-height:calc(100vh - var(--navbar-height-md))}
    body.column.course-landing #course-landing {margin-top:5%;}

    .header #social {display:none}
    .header .navbar-brand {text-align:right}
    .header #navbar-logo {right:1rem;left:auto;}
    .header.open .navbar-brand {display:inline-block}
    .header #info .nav-fb {display:none}
    .header #menu .nav-fb {display:block}
    .header #info {right:1rem}
    [class*=text-box-] {width:90%}
    .galaxy {width:100%}
    body.default main section {padding:0 1.5rem 4rem 1.5rem;}
    .first {margin-right:-15px}
    .first > div:first-child {margin-bottom:2rem}
}
@media screen and (max-width:480px){
    .first h2 {font-size: 2rem}
    .first .td-text {padding:0 2rem}
    h2 {font-size: 1.5rem}
    .fs-3, .btn-pager {font-size: 1rem!important}
    .fs-4, .blog-lead h2, .btn-blog {font-size: 1.25rem}
    .fs-6 {font-size: 2rem}
    .fs-7 {font-size: 1.75rem}
    .fs-9 {font-size: 8rem}
    .fs-10 {font-size: 12rem}
    #logo {width: 6rem}
    footer {font-size:.75rem}
    body.column.course-landing #course-landing {margin-top:10%;}
    .first .aimg {width:120%;left:-10%}
    .icon-down svg {top:-10vh}
    .modal-body h2, #kapcsolat h2, #phone-modal h2 {font-size:2rem}
    #ref h1 {font-size:1.5rem}
    body.article h1 {font-size:1.5rem;}
    .first > div:first-child {margin-top:2rem}
    #openinghours-modal .modal-body > .row > div {padding-left:1rem!important;padding-right:1rem!important}
    #openinghours-modal h2 {font-size:1.5rem}
    [class*=text-box-] h2 {font-size:2rem}
    [class*=text-box-] .td-text {font-size:1rem}
    body.default main section {min-height:calc(80vh - var(--navbar-height))}
    .tooltip.show {margin-left:0rem}
    .tooltip-inner {max-width:220px;text-align:center!important;}
    .copyright {font-size:1rem}
    body.article h1 {text-align:center;font-size:2.25rem}
    body.column h1 {font-size:2.25rem}
    body.column h2 {font-size:1.5rem!important}
    body.article h2[class*=head] {font-size:1rem}
}
@media screen and (max-width:420px){
    .icon-down svg {top:-15vh}
    .fs-6 {font-size: 1.75rem}
}
@media screen and (max-width:380px){
    h2 {font-size: 1.375rem}
    .fs-4 {font-size: 1.125rem}
    body.default .profil img {max-height:30vh}
}
@media (orientation: landscape) {
}
@media (orientation: portrait) {
    /*body, html, .wh-100, body.default .carousel-item, body.default .logodiv {min-height: -webkit-fill-available}*/
    /*body.chrome, .chrome .wh-100, body.chrome.default .carousel-item, body.chrome.default .logodiv {min-height: 100vh}*/
    body.default .carousel-item {margin-top:0}
    body.default article svg {margin-bottom:0}
    body.default .profil {margin-top:var(--navbar-height-md)}
    body.default article[class*=slide-3] img {max-height:30vh}
    /*body.android, body.android .carousel-item, body.android .logodiv {height:100%}
    body.android .carousel-item {padding-bottom: 6rem}*/
}
@media (max-width: 991px) and (orientation:landscape) {
    .fs-10 {font-size: 8rem}
    .fs-7 {font-size: 1.5rem}
}
@media (max-width: 768px) and (orientation:landscape) {
    .fs-4 {font-size: 1.125rem}
    h2 {font-size: 1.5rem}
}
@media (max-width: 480px) and (orientation:landscape) {

}
@media (max-width: 480px) and (orientation:portrait) {
    .custom-carousel {height:40vh}
}