.strong {
  font-weight: 500;
}

.b {
  font-weight: 500;
}


body {
  font-family: 'Roboto', sans-serif;
  position: relative;
  width: 100%;
  height: 100%;
  font-weight: 300;
}

html {
  width: 100%;
  height: 100%;
  font-weight: 300;
  background-color: #FFFFFF;
}

h3,
h5,
h6 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  margin-top: 20px;
  letter-spacing: 1px;
  font-size: 120%;
}

h1
 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 120%;
  margin-bottom: 20px;
  margin-top: 0px;
}


h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  margin-top: 20px;
  letter-spacing: 1px;
  font-size: 110%;
  margin-bottom: 15px;
  margin-top: 5px;
}



/* Fix select dropdown arrow - consistent across devices */
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px !important; /* Make room for arrow */
    position: relative;
}

/* Fix for larger screens - ensure arrow isn't cut off */
@media (min-width: 768px) {
    select.form-control {
        background-position: right 15px center;
        padding-right: 45px !important;
    }
}

/* Ensure arrow shows on mobile (iOS/Android) */
select.form-control::-ms-expand {
    display: none;
}

/* Optional: Hover effect */
select.form-control:hover {
    border-color: #adb5bd;
}

/* Focus style */
select.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}



.blubar {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  padding-top: 8px;
  letter-spacing: 1px;
  font-size: 120%;
}

.bluheader {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  padding-top: 8px;
  letter-spacing: 1px;
  background-color: #002439;
  color: #FFFFFF;
  font-size: 100%;
}

.row-flex {
  display: flex;
  flex-wrap: wrap;
}

.pazero {
   padding: 0px;
}

.realbox {
 width: 100%;
 height: 100px;
 overflow: auto;
}

.cookietitle {
 font-weight: 700;
 font-size: 1.5em !important;
} 

.img-responsive {
    display: block;
    width: 100%;
    height: auto;
} 

.harminc {
	width: 30%;
}

.hetven {
	width: 70%;
}

ul.alap li {
    display: block;
    margin-bottom: 5px;
    padding-left: 5px;
  }
  
table ul.normalis {
    margin-left:20px;
	list-style-type: disc;
    margin-bottom: 25px;
	padding-top: 0px !important;
  }
  
ul.normalis {
    margin-left:20px;
	list-style-type: disc;
    margin-bottom: 25px;
	padding-top: -35px !important;
  }
  
.minidate{
    font-size: 70%;
  }
  
.norma{
  margin-bottom: 0px;
  margin-top: 0px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 100%;
  letter-spacing: normal;
  }

p,label {
  font-weight: 300;
  line-height: 1.5;
  margin: 0 0 25px;
}


.icon {
	  width: 1em;
	  height: 1em;
      fill: currentColor; /* Inherits text color */
      vertical-align: middle; /* Aligns nicely with text */
}


.bigspace {
  margin-bottom: 25px;
  text-align:left;
  color:#000000;
}

@media (min-width: 768px) {
  p {
    line-height: 1.6;
    margin: 0 0 35px;
  }
  
  .img-responsive {
    display: block;
    width: 100%;
    height: auto;
    }     
}

.hezag8 {
    margin-top:8px;
}

a {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  color: #002439;
  /*font-style: italic;*/
}

.normi {
    font-style: normal;
}

a:focus, a:hover {
  color: #0092ea;
}

.team-section img {
  max-height: 200px;
  border-radius: 50%;
}

.team-section h4 {
  margin-bottom: 10px;
}

.team-section h6 {
  margin: 10px;
}

    .awe-icon
    {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      speak: never;
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-left: .2em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;

    }

/* Ez a bodoz az általános dobozméretet állítja a szövegekhez*/
.stbox {
  min-height: 370px;
}
.stbox2 {
  min-height: 440px;
}
.stbox3 {
  min-height: 270px;
}

.ucl {
  margin-top: 14px;
}

.felsos {
 padding-top:80px;
 vertical-align:top;
}

.morespace {
 padding-top:28px;
}

.felsosm {
 padding-top:50px;
 vertical-align:top;
}

.ittvagyok
{
  background-color: #002439;
  color: #FFFFFF;
  font-weight:bold;
}

.thumbnails
{
  max-width: 100%;
  height: auto;
}

.lenti
{
  padding-bottom: 10px;
}

#mainNav {
  font-family: 'Roboto', sans-serif;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  background-color: #002439;
}

#mainNav .navbar-toggler {
  font-size: 14px;
  padding: 6px;
  color: white;
  border: 1px solid #002439;
}

/* Főmenü Színe itt kezdődik */
#mainNav .navbar-brand {
  text-transform: none;
  font-size: 160%;
  color: #FFFFFF;
}

#mainNav a {
  color: #FFFFFF;
}
/* Főmenü színe itt végződik */

#mainNav .navbar-nav .nav-item {
/*
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
 */
}

#mainNav .navbar-nav .nav-item:hover {
  color: fade(white, 80%);
  outline: none;
  color: #0069a9;
}

#mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus {
  outline: none;
  color: #0069a9;
}

.LogoHolder {
	padding: 0px;
	position: relative;
	width: 160px;
	height: 147px;
}

.PNHolder {
          display: none;
          color: #FFFFFF;
}

.extrakontrol {
          display: none;
}

.LogoBack {
	      max-width: 160px;
		  max-height: 147px;
		  padding: 10px;
		  background: #FFFFFF;
}



.logoimage {
          position: relative;
          width: 100%;
          height: 100%;
}

@media (min-width: 992px) {

  #mainNav {
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 200;
    letter-spacing: 1px;
    border-bottom: none;
  }
  #mainNav.navbar-shrink {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid black;
    background-color: #002439;
  }
  #mainNav .nav-link.active {
    outline: none;
	color: #0069a9;
    /*background-color: rgba(33, 33, 33, 0.3);*/
  }
  #mainNav .nav-link.active:hover {
    color: 0069a9;
  }
}

@media (max-width: 1200px) {
.LogoHolder {
	margin-top:-10px;

}
#mainNav {
  margin-left:0px;
}
}

.kek {
min-width:30px;
font-size: 100%;
width: 100%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #002439;
margin-top:5px;
color: #FFFFFF;
padding: 4px;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
border: 1px solid #002439;
outline: 1px;
}

.kek:hover {
  color: #002439;
  border: 1px solid #002439;
  outline: 1px;
  background-color: #FFFFFF;
}

.kekrss {
 max-width:60px;
 margin-left:20px;
 font-size:80%;
}


.lbx{
	background-color:#f8f8f8;
	padding:5px;
	text-align:left;
}


.lbxc{
	background-color:#f8f8f8;
	padding:5px;
	text-align:center;
}

.lbb{
	background-color:#f8f8f8;
	padding-bottom:20px;
	padding-top:10px;
	text-align:center;
}

.keklist {
font-size: 100%;
width: 100%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #002439;
color: #FFFFFF;
padding: 1px;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
border: 1px solid #002439;
outline: 1px;
}

.keklist:hover {
  font-size: 100%;
  color: #002439;
  border: 1px solid #002439;
  outline: 1px;
  background-color: #FFFFFF;
}



#SearchTitle{
display: none;
}

ol.m {list-style-type: lower-latin;}


.bordo {
font-size: 100%;
width: 100%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #670000;
color: #FFFFFF;
padding: 4px;
margin-top:5px;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
border: 1px solid #002439;
outline: 1px;
}


.bordo:hover {
  color: #002439;
  border: 1px solid #002439;
  outline: 1px;
  background-color: #FFFFFF;
}

#advancedcontrols{
  position: relative;
  display: none;
  font-weight: normal;
}

.izq{
  text-align:left;
}

.felsokep {
  min-height:250px;
  width: 100%;
  height: 30%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.felsokep_mobile {
  min-height:180px;
  width: 100%;
  height: 30%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 90%;
		background-color:#333333;
        margin: 20px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }

.velemenyek { text-align:left;
              padding: 20px 20px 20px 20px;
    }

.masthead {

}

.masthead .intro-body {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .LogoHolder {
	/*padding-top:-50px;*/
}


.redfont{
  font-size:85%;
}


.noshowmob{
  display:none;
}

}


@media (min-width: 768px) {

.felsokep {
  /*padding-top:-50px;*/
  }

  .masthead {
    height: 90%;
    padding: 0;
  }
  .masthead .intro-body .brand-heading {
    font-size: 100px;
  }
  .masthead .intro-body .intro-text {
    font-size: 22px;
  }


   
}

.content-section {
    padding-top: 20px;
    padding-bottom: 20px;
}


.searchbox-section .row {
  padding: 0px;
}

.nincspad {
  padding: 0px;
  margin-top: 0px;
}


.searchbox-section {
  background-color: #f8f8f8;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #000000;
}

.helptofind-section {
  background-color: #FFFFFF;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #000000;
}


.gyik-section {
  background-color: #b5b6a6;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #000000;
}

.csapatunk-section {
  background-color: #e8e7da;
  color: #000000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align:left;
}


.ingatlanlista-section {
  background-color: #FFFFFF;
  color: #000000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.nopad{
width:100%;
text-align:center;
 margin-left:0px;
 padding-left:0px;
  margin-right:0px;
 padding-right:0px;
}

.nolr{
text-align:center;
 padding-top:3px;
 padding-left:3px;
 padding-right:3px;
 padding-bottom:0px;
}

.cspc {
    text-align:left;
    font-size: 80%;
	margin-top:25px;
	margin-bottom:2px;
	padding:0px;
}

.cspc_m {
    font-size: 140%;
}

.reszletesingatlan-section {
  background-color: #FFFFFF;
  color: #000000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.about-section {
  padding-top:0px;
  background-color: #FFFFFF;
  text-align:left;
  color: #000000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.about-section-text{
  background-color: #FFFFFF;
  text-align:left;
  color: #000000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.minitext{
	text-align: left;
	font-size:80%;
}


.kapcsolat-section {
  background-color: #e8e8e8;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #000000;
}

#map {
  width: 100%;
  height: 300px;
}

.kapcsolat-adatvedelem {
  background-color: white;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #000000;
}


@media (min-width: 992px) {

.felsokep {
  padding-top:0px;
  }

  .content-section {
    padding-top: 20px;
    padding-bottom: 100px;
  }
  #map {
    height: 350px;
  }
  
  .trukkos {
     margin-left:8px;
     color: #FFFFFF;
  }
}

.btn {
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 10;
  padding-top:6px;
  padding-bottom:7px;
  color: #FFFFFF;
}


.bremove {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 10;
  color: #FFFFFF;
  background-color: #670000;
}


.jobbos {
    text-align:center;
} 

.bordo:focus, .bordo:hover {
  color: #002439;
  border: 1px solid #002439;
  outline: 1px;
  background-color: #FFFFFF;
}

.btn:focus, .btn:hover {
  color: #002439;
  border: 1px solid #002439;
  outline: 1px;
  background-color: #FFFFFF;
}

ul.banner-social-buttons {
  margin-top: 0;
}

@media (max-width: 1199px) {


  ul.banner-social-buttons {
    margin-top: 15px;
  }
}

/* Mobilméretre vonatkozó előírások */
@media (max-width: 767px) {
  ul.banner-social-buttons li {
    display: block;
    margin-bottom: 20px;
    padding-left: 20px;
  }
  
  ul.banner-social-buttons li:last-child {
    margin-bottom: 0;
  }
  
.LogoHolder {
	margin-top: 0px;
	position: relative;
	max-width: 100px;
	max-height: 100px;
}

.mobcenter {
    text-align:center; 
  }
  
.mobspace {
    padding-top:20px;center; 
  }


.felsos {
 padding-top:100px;
 vertical-align:top;
}

.PNHolder {
          display: inline-block;
          top:0;
          position: absolute;
          float: left;
          padding-top:7.5px;
          margin-left:40px;
          font-size:85%;
}
 .zaszlo {
          display: none;
}

.extrakontrol {
          display: block;
}



#SearchTitle{
display: block;
}


#mainNav .nav-item {
font-weight:300;
font-size: 120%;
}

.trukkos {
 display:none;
}

.jobbos {
text-align:right;
} 
}


.panel-title{
	text-align: center;
	color: #48413e;
	font-size:120%;
}

.panel-body{
	text-align: left;
	color:#000000 !important;
	padding-left: 20px;
	font-size:100%;
}

footer {
  padding: 20px 0;
  background: #f8f8f8;
}

footer p {
  font-size: 100%;
  margin: 0;
}

::-moz-selection {
  background: #fcfcfc;
  background: rgba(255, 255, 255, 0.2);
  text-shadow: none;
}

::selection {
  background: #fcfcfc;
  background: rgba(255, 255, 255, 0.2);
  text-shadow: none;
}

img::selection {
  background: transparent;
}

img::-moz-selection {
  background: transparent;
}

.form-control {
    font-weight:300;
}

.property_box {
    background-color: #f8f8f8;
    padding: 0px;
    /*box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.11);*/
	margin-bottom: 20px;
	text-align:left;
}

.inproperty {
    padding: 10px 10px 0px;
	text-align:left;
}

.redalert {
	color:red;
}

.greenalert {
	color:green;
}

.inpropertyN {
    padding: 25px 25px 25px 80px;
	text-align:left;
}

.S1 {
  background-image: url('/img/money.jpg');
  background-repeat: repeat-y;
}
.S2 {
  background-image: url('/img/houses.jpg');
  background-repeat: repeat-y;
}
.S3 {
  background-image: url('/img/skyscrapers.jpg');
  background-repeat: repeat-y;
}
.S4 {
  background-image: url('/img/blueprint.jpg');
  background-repeat: repeat-y;
}
.S5 {
  background-image: url('/img/charts.jpg');
  background-repeat: repeat-y;
}
.S6 {
  background-image: url('/img/column.jpg');
  background-repeat: repeat-y;
}
.S7 {
  background-image: url('/img/forest.jpg');
  background-repeat: repeat-y;
}
.S8 {
  background-image: url('/img/newspaper.jpg');
  background-repeat: repeat-y;
}

.bbar {
  background-color:#002338;
  height:40px;
  padding-top: 200;
  text-align:center;
  color:white;
}

#property {
    background-color: rgb(219, 219, 219);
    padding: 10px 10px 0px;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.11);
	margin-bottom: 20px;
	text-align:left;
}

.checkbox_box {
    background-color: rgb(248, 248, 248);
    padding: 10px 10px 10px;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.11);
	margin-bottom: 20px;
	text-align:left;
}



/* Cookie Dialog */
#gdpr-cookie-message {
    position: fixed;
    -webkit-transform: translate3d(0,0,0);
    z-index: 999;
    right: 30px;
    bottom: 30px;
    max-width: 420px;
    background-color: rgba(0,36,57,0.8);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 6px 6px rgba(0,0,0,0.25);
    margin-left: 30px;
    font-family: 'Roboto', sans-serif;
}
#gdpr-cookie-message h4 {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 10px;
	font-family: 'Roboto', sans-serif;
}
#gdpr-cookie-message h5 {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 300;
    margin-bottom: 10px;
	font-family: 'Roboto', sans-serif;
}
#gdpr-cookie-message p, #gdpr-cookie-message ul {
    color: white;
    font-size: 15px;
    line-height: 1.5em;
	font-family: 'Roboto', sans-serif;
}
#gdpr-cookie-message p:last-child {
    margin-bottom: 0;
    text-align: right;
	font-family: 'Roboto', sans-serif;
}
#gdpr-cookie-message li {
    width: 49%;
    display: inline-block;
	font-family: 'Roboto', sans-serif;
}
#gdpr-cookie-message a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 15px;
    padding-bottom: 2px;
    border-bottom: 1px dotted rgba(255,255,255,0.75);
    transition: all 0.3s ease-in;
	font-family: 'Roboto', sans-serif;
}
#gdpr-cookie-message a:hover {
    color: white;
    border-bottom-color: #FFFFFF;
    transition: all 0.3s ease-in;
	font-family: 'Roboto', sans-serif;
}
#gdpr-cookie-message button,
button#ihavecookiesBtn {
    border: none;
    background: #002439;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    padding: 7px;
    border-radius: 3px;
    margin-left: 15px;
    cursor: pointer;
    transition: all 0.3s ease-in;
}
#gdpr-cookie-message button:hover {
    background: #002439;
    color: #white;
    transition: all 0.3s ease-in;
}
button#gdpr-cookie-advanced {
    background: #002439;
    color: #FFFFFF;
}
#gdpr-cookie-message button:disabled {
    opacity: 0.3;
}
#gdpr-cookie-message input[type="checkbox"] {
    float: none;
    margin-top: 0;
    margin-right: 5px;
}

strong, b {
  font-weight: 600;
}

/*=============== BASE ===============*/
*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}


ul{
	list-style: none;
	// Color highlighting when pressed on mobile devices
	// -webkit-tap-highlight-color: transparent;
	font-style: normal;
}





/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 340px){
   .container{
      margin-inline: 1rem;
   }

   .nav__link{
      padding-inline: 1rem;
	  font-style: normal;
   }

}

/* For large devices */
@media screen and (min-width: 1118px){
   .container{
      margin-inline: auto;
   }

   .nav{
      height: calc(var(--header-height) + 2rem);
      display: flex;
      justify-content: space-between;

      &__toggle{
         display: none;
      }
      &__list{
         height: 100%;
         display: flex;
         column-gap: 1.5rem;
      }
      &__link{
         height: 100%;
         padding: 0;
         justify-content: initial;
         column-gap: .25rem;

         &:hover{
            background-color: transparent;
         }
      }
   }

   .dropdown{
      &__item,
      &__subitem{
         position: relative;
      }
      &__menu,
      &__submenu{
         max-height: initial;
         overflow: initial;
         position: absolute;
         left: 0;
         top: 6rem;
         opacity: 0;
         pointer-events: none;
         transition: opacity .3s, top .3s;
      }
      &__link,
      &__sublink{
         padding-inline: 1rem 3.5rem;
      }
      &__subitem &__link{
         padding-inline: 1rem ;
      }
      &__submenu{
         position: absolute;
         left: 100%;
         top: .5rem;
      }
      // Show dropdown menu
      &__item:hover &__menu{
         opacity: 1;
         top: 5.5rem;
         pointer-events: initial;
         transition: top .3s;
      }
      // Show dropdown submenu
      &__subitem:hover > &__submenu{
         opacity: 1;
         top: 0;
         pointer-events: initial;
         transition: top .3s;
      }
   }
}





/*=============== HEADER ===============*/
.header{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: var(--black-color);
   box-shadow: 0 2px 16px hsla(220, 32%, 8%, .3);
   z-index: var(--z-fixed);
}

/*=============== NAV ===============*/
.nav{
   height: var(--header-height);

   &__logo,
   &__burger,
   &__close{
      color: var(--white-color);
   }

   &__data{
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
   &__logo{
      display: inline-flex;
      align-items: center;
      column-gap: .25rem;
      font-weight: var(--font-semi-bold);
      // Color highlighting when pressed on mobile devices
      // -webkit-tap-highlight-color: transparent;

      & i{
         font-weight: initial;
         font-size: 1.25rem;
      }
   }
   &__toggle{
      position: relative;
      width: 32px;
      height: 32px;
   }
   &__burger,
   &__close{
      position: absolute;
      width: max-content;
      height: max-content;
      inset: 0;
      margin: auto;
      font-size: 1.25rem;
      cursor: pointer;
      transition: opacity .1s, transform .4s;
   }
   &__close{
      opacity: 0;
   }

   // Navigation for mobile devices
   @media screen and (max-width: 1118px){
      &__menu{
         position: absolute;
         left: 0;
         top: 2.5rem;
         width: 100%;
         height: calc(100vh - 3.5rem);
         overflow: auto;
         pointer-events: none;
         opacity: 0;
         transition: top .4s, opacity .3s;

         &::-webkit-scrollbar{
            width: 0;
         }
      }
      &__list{
         background-color: var(--black-color);
         padding-top: 1rem;
      }
   }
   &__link{
      color: var(--white-color);
      background-color: var(--black-color);
      font-weight: var(--font-semi-bold);
      padding: 1.25rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background-color .3s;

      &:hover{
         background-color: var(--black-color-light);
      }
   }
}

/* Show menu */
.show-menu{
   opacity: 1;
   top: 3.5rem;
   pointer-events: initial;
}

/* Show icon */
.show-icon .nav__burger{
   opacity: 0;
   transform: rotate(90deg);
}

.show-icon .nav__close{
   opacity: 1;
   transform: rotate(90deg);
}

/*=============== DROPDOWN ===============*/
.dropdown{
   &__item{
      cursor: pointer;
   }
   &__arrow{
      font-size: 1.25rem;
      font-weight: initial;
      transition: transform .4s;
   }
   &__link, 
   &__sublink{
      padding: 1.25rem 1.25rem 1.25rem 2.5rem;
      color: var(--white-color);
      background-color: var(--black-color-light);
      display: flex;
      align-items: center;
      column-gap: .5rem;
      font-weight: var(--font-semi-bold);
      transition: background-color .3s;

      & i{
         font-size: 1.25rem;
         font-weight: initial;
      }
      &:hover{
         background-color: var(--black-color);
      }
   }
   &__menu,
   &__submenu{
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease-out;
   }
   // Show dropdown menu & submenu
   &__item:hover &__menu,
   &__subitem:hover > &__submenu{
      max-height: 1000px;
      transition: max-height .4s ease-in;
   }
   // Rotate dropdown icon
   &__item:hover &__arrow{
      transform: rotate(180deg);
   }
}

/*=============== DROPDOWN SUBMENU ===============*/
.dropdown{
   &__add{
      margin-left: auto;
   }
   &__sublink{
      background-color: var(--black-color-lighten);
   }
}



/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --black-color: #002439;
  --black-color-light: #dcdcdc;
  --black-color-lighten: #f3f3f3;
  --white-color: #fff;
  --body-color: hsl(220, 100%, 97%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Poppins', sans-serif;
  --normal-font-size: .938rem;

  /*========== Font weight ==========*/
  --font-regular: 300;
  --font-semi-bold: 300;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1024px) {
  :root {
    --normal-font-size: 1rem;
  }
}



/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1120px;
  margin-inline: 1.0rem;
}

/*=============== HEADER ===============*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--black-color);
  box-shadow: 0 2px 16px hsla(220, 32%, 8%, .3);
  z-index: var(--z-fixed);
  letter-spacing: 1px;
}

/*=============== NAV ===============*/
.nav {
  height: var(--header-height);
}

.nav__logo, 
.nav__burger, 
.nav__close {
  color: var(--white-color);
}

.nav__data {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  column-gap: .25rem;
  font-weight: var(--font-semi-bold);
  /* Color highlighting when pressed on mobile devices */
  /*-webkit-tap-highlight-color: transparent;*/
}

.nav__logo i {
  font-weight: initial;
  font-size: 1.25rem;
}

.nav__toggle {
  position: relative;
  width: 32px;
  height: 32px;
}

.nav__burger, 
.nav__close {
  position: absolute;
  width: max-content;
  height: max-content;
  inset: 0;
  margin: auto;
  font-size: 1.25rem;
  cursor: pointer;
  transition: opacity .1s, transform .4s;
}

.nav__close {
  opacity: 0;
}

/* Navigation for mobile devices */
@media screen and (max-width: 1118px) {
  .nav__menu {
    position: absolute;
    left: 0;
    top: 2.5rem;
    width: 100%;
    height: calc(100vh - 3.5rem);
    overflow: auto;
    pointer-events: none;
    opacity: 0;
    transition: top .4s, opacity .3s;
  }
  .nav__menu::-webkit-scrollbar {
    width: 20px;
  }
  .nav__list {
    background-color: var(--black-color);
    padding-top: 1rem;
	text-decoration: none;
  }
}

.nav__link {
  color: var(--white-color);
  /*background-color: var(--black-color);*/
  font-weight: var(--font-semi-bold);
  padding: 0.2rem 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color .3s;
  font-style: normal;
}

.nav__link:hover {
  background-color: var(--black-color-light);
  color: #0092ea;
  text-decoration: none;
  font-style: normal;
}

/* Show menu */
.show-menu {
  opacity: 1;
  top: 3.5rem;
  pointer-events: initial;
}

/* Show icon */
.show-icon .nav__burger {
  opacity: 0;
  transform: rotate(90deg);
}
.show-icon .nav__close {
  opacity: 1;
  transform: rotate(90deg);
}

/*=============== DROPDOWN ===============*/
.dropdown__item {
  cursor: pointer;
}

.dropdown__arrow {
  font-size: 0.7rem;
  font-weight: initial;
  transition: transform .4s;
}

.dropdown__link, 
.dropdown__sublink {
  font-style: normal;
  padding: 0.2rem 0.2rem 0.2rem 2.2rem;
  color: var(--black-color);
  background-color: var(--black-color-light);
  display: flex;
  align-items: center;
  column-gap: .5rem;
  font-weight: var(--font-semi-bold);
  transition: background-color .3s;
}

.dropdown__link i, 
.dropdown__sublink i {
  font-size: 1.0rem;
  font-weight: initial;
  color: var(--black-color);
}

.dropdown__link:hover, 
.dropdown__sublink:hover {
  background-color: #FFFFFF;
  text-decoration: none;
  color: var(--black-color);
}

.dropdown__menu, 
.dropdown__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease-out;
}

/* Show dropdown menu & submenu */

.dropdown__item:hover .dropdown__menu, 
.dropdown__subitem:active > .dropdown__submenu {
  max-height: 1000px;
  transition: max-height .4s ease-in;
}


/* Rotate dropdown icon */
.dropdown__item:hover .dropdown__arrow {
  transform: rotate(180deg);
}

/*=============== DROPDOWN SUBMENU ===============*/
.dropdown__add {
  margin-left: auto;
}

.dropdown__sublink {
  background-color: var(--black-color-lighten);
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
  .container {
    margin-inline: 1rem;
  }

  .nav__link {
    padding-inline: 1rem;
    font-style: normal;
  }
  
 
}

/* For large devices */
@media screen and (min-width: 1118px) {
  .container {
    margin-inline: auto;
  }

  .nav {
    height: calc(var(--header-height) + 0.5rem);
    display: flex;
    justify-content: space-between;
  }
  .nav__toggle {
    display: none;
  }
  .nav__list {
    height: 100%;
    display: flex;
    column-gap: 1.3rem;
  }
  .nav__link {
    height: 100%;
    padding: 0;
    justify-content: initial;
    column-gap: .25rem;
	font-style: normal;
  }
  .nav__link:hover {
    background-color: transparent;
	font-style: normal;
  }

  .dropdown__item, 
  .dropdown__subitem {
    position: relative;
  }

  .dropdown__menu, 
  .dropdown__submenu {
    max-height: initial;
    overflow: initial;
    position: absolute;
    left: 0;
    top: 6rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, top .3s;
	font-size:76%;
	min-width:300px;
  }

  .dropdown__link, 
  .dropdown__sublink {
    padding-inline: 1rem 3.5rem;
  }

  .dropdown__subitem .dropdown__link {
    padding-inline: 1rem;
  }

  .dropdown__submenu {
    position: absolute;
    left: 100%;
    top: .5rem;
  }

  /* Show dropdown menu */
  .dropdown__item:hover .dropdown__menu {
    opacity: 1;
    top: 4.0rem;
    pointer-events: initial;
    transition: top .3s;
  }

  /* Show dropdown submenu */
  .dropdown__subitem:hover > .dropdown__submenu {
    opacity: 1;
    top: 0;
    pointer-events: initial;
    transition: top .3s;
  }
}


/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #a67f59;
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}



/* Functional styling wrapper;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-target {
  position: relative;
}
.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
/* Wrapper for all connect elements.
 */
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}
.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}
.noUi-connect {
  height: 100%;
  width: 100%;
}
.noUi-origin {
  height: 10%;
  width: 10%;
}
/* Offset direction
 */
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}
/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-vertical .noUi-origin {
  width: 0;
}
.noUi-horizontal .noUi-origin {
  height: 0;
}
.noUi-handle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
.noUi-touch-area {
  height: 100%;
  width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}
.noUi-state-drag * {
  cursor: inherit !important;
}
/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 18px;
}
.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  right: -17px;
  top: -6px;
}
.noUi-vertical {
  width: 18px;
}
.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  right: -6px;
  top: -17px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: -17px;
  right: auto;
}
/* Styling;
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D3D3D3;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-connects {
  border-radius: 3px;
}
.noUi-connect {
  background: #DDDDDD;
}
/* Handles and cursors;
 */
.noUi-draggable {
  cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}
.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
.noUi-active {
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/* Handle stripes;
 */
.noUi-handle:before,
.noUi-handle:after {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #E8E7E6;
  left: 14px;
  top: 6px;
}
.noUi-handle:after {
  left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}
.noUi-vertical .noUi-handle:after {
  top: 17px;
}
/* Disabled state;
 */
[disabled] .noUi-connect {
  background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}
/* Base;
 *
 */
.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-pips {
  position: absolute;
  color: #999;
}
/* Values;
 *
 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}
.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}
/* Markings;
 *
 */
.noUi-marker {
  position: absolute;
  background: #CCC;
}
.noUi-marker-sub {
  background: #AAA;
}
.noUi-marker-large {
  background: #AAA;
}
/* Horizontal layout;
 *
 */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}
.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}
/* Vertical layout;
 *
 */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}
.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}
.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}
.noUi-horizontal .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
  left: auto;
  bottom: 10px;
}
.noUi-vertical .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(0, -18px);
  transform: translate(0, -18px);
  top: auto;
  right: 28px;
}