:root {
  --darkbg: #078293;
  --jofogas_orange: #f07330;
  --jofogas_peach:#FEF1EB;
  --jofogas_blue:#336699;
  --jofogas_green:#18c662;
  --jofogas_extra_dark:#213144;
  --light_bg:#F1F4F7;
  --gutter: 60px;
  --corner: 15px;
  --text_dark: #333333;
  --text_light: #fff;
  --text_footer:#6c8fb1;
  --text_shadow: 1px 1px #00000030;
  --small-text:12px;
}

/* base */
html {
  scroll-behavior: smooth;
}
img {
max-width:100%;
}
.radius-pic {
border-radius:var(--corner);
}
dl, ol, p, ul {
    margin-top: 0;
    margin-bottom: 0;
}
a {
	color:var(--jofogas_blue);
	text-decoration:underline;

}
a:hover {
	color:var(--text_dark);
}
h1 {
font-size:2rem;
font-weight: 800;
color:var(--jofogas_blue);

}

h2 {
	font-size: clamp(18px, 5vw, 30px);
    padding-bottom: 0px;
    margin-bottom: calc(var(--gutter) / 2);
    margin-top: 0px;
    font-weight: 800;
    color:var(--jofogas_blue);
}
@media (max-width: 765px) {
    h2 {
        margin-bottom: calc(var(--gutter) / 4);
    }
}
h3 {
	font-size: clamp(16px, 5vw, 20px);
    padding-bottom: 0px;
    margin-bottom: calc(var(--gutter) / 8);
    margin-top: 0px;
    font-weight: 600;
    color:var(--jofogas_blue);
}
h4 {
	font-size: 16px;
    padding-bottom: 0px;
    margin-bottom: calc(var(--gutter) / 8);
    margin-top: 0px;
    font-weight: 600;
    color:var(--jofogas_blue);
}


h1.center, h2.center, h3.center, p.center {
text-align:center;
}
body {
	background-color:#fff !important;
	color:var(--text_dark);
    background-size: 100%;
    background-repeat: no-repeat;
	line-height:auto;
	font-size:1rem;
 	font-family: "Montserrat", serif;
	font-optical-sizing: auto;
	font-weight:500;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
.pad_top_extra_small {
    padding-top:calc(var(--gutter) / 4);
}
.pad_top_small {
    padding-top:calc(var(--gutter) / 2);
}
.pad_top_large {
    padding-top:calc(var(--gutter) / 1);
}
.text_small {
    font-size:var(--small-text);
}
.pic.mobile_pic {
display:none;
}
.justmobile {
display:none;
}
@media (max-width:992px) {
.justmobile {
display:block;
}
.pic.desktop_pic {
display:none;
}
.pic.mobile_pic {
display:block;
}
.mobil_padding_top {
   margin-top:20px; 
}
}
.custombutton {

font-weight: 600 !important;
    background: var(--jofogas_orange);
    color: #fff;
    padding: 14px 25px;
    border-radius: 5px;
    -webkit-box-shadow: 4px 4px 12px -6px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 4px 4px 12px -6px rgba(0, 0, 0, 0.15);
    box-shadow: 4px 4px 12px -6px rgba(0, 0, 0, 0.15);
    width: auto;
    display: inline-block;
    line-height: 20px;
    text-align: center;
    font-size: clamp(12px, 1.2vw, 14px);
    position: relative;
    transition: background-color 0.5s ease;
    display: inline-block;
    width: auto;
    max-width: 100%;
    text-decoration: none;
    
}
.custombutton.noflex {

margin:10px 0px;
}
.custombutton.outline {
    background: transparent;
    color: var(--jofogas_orange);
    border:solid 2px var(--jofogas_orange);
}
.custombutton.outline:hover {
    color: var(--jofogas_orange);
    border:solid 2px var(--jofogas_orange);
    background:#fff;
    opacity: 0.7;
}
.custombutton span::before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  width: 17px;
  height: 17px;
  background-image: url("./images/plus.svg");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  position: relative;
  top: 0px; 
}
.custombutton.cart span::before {
  background-image: url("./images/cart.svg");
}
.custombutton.plus span::before {
  background-image: url("./images/plus.svg");
}
.custombutton.base span::before {
  display:none;
}
.custombutton.secondary {
	background: var(--darkbg);
}

.custombutton:hover {
	 box-shadow:none;
     color:#fff;
     background:#ffa45e;
     text-decoration:none;
}

.navbar-expand-lg {
	background:#fff !important;
}
@media (max-width:992px) {
.navbar-expand-lg {
    background: #29242473;
}
}
.navbar-expand-lg .container {
	position: relative;
	z-index:100000;
	padding:5px;
}
.title {
	padding-top:0;
	padding-bottom:calc(var(--gutter) / 2);
	margin: 0px;
	font-weight:600;
	text-align:center;
}
ul {
	padding-left:15px;	
}





.text {
padding-top: calc(var(--gutter) * 1.3);
padding-bottom: 0;

}
@media (max-width: 765px) {
.text {
    padding-top: calc(var(--gutter) / 2);
    padding-bottom: 0;
}
}
.text.plane .container {
padding:0;

}
.social a path {
  fill: var(--darkbg);
}
.icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .4rem 0;
}

.icon-list li::before {
  content: "";
  display: inline-block;
  width: 20px;   
  height: 20px;
  flex: 0 0 20px;

  background-image: url("./images/liicon_green.svg"); 
  background-size: contain;  
  background-repeat: no-repeat;
  background-position: center;
}
.icon-list li span {
  flex: 1;
  display: inline;
}
/* /base */
/* hero */
.sc_block {
	position:relative;
	padding:0;
}
.logo {
	height:30px;
	width:auto;
}
@media (max-width:992px) {
.logo {
	height:20px;
}
}
.header .social a {
    color:var(--darkbg);
    margin-left: 20px;
    font-size: 12px;
}
.header .social a:hover {
	color:#ccc;
}
.sc {
    background-size: auto 100%;
    background-position: top right;
    background-repeat:no-repeat;
    padding: 0px;
    color:var(--text_dark);
    height: auto;
    background-color: var(--jofogas_peach);
    font-size: 18px;
	margin-top: 0px;
    padding-top: 0px;
	text-shadow:none;
	background-image:url(./images/spot.svg);
    
}
.sc.v_02 {

    background-color: var(--light_bg);

	background-image:url(./images/spot2.svg);
    
}


@media (max-width:992px) {
	.sc, .sc.v_02 {
	background-image: none;
	padding: 2rem;

	
	}

}
@media (max-width:570px) {
	.sc {

		padding: 2rem;

	
	}

}
@media (max-width:450px) {
	.sc {
 
        padding: 1.5rem;

	
	}

}

.sc_block.vertical-middle {
display:flex;
flex-direction:column;
justify-content: center;
}


.sc h1 {
color:var(--jofogas_blue);
}
.monitor {
display:none;
}

.sc h1 {

	font-weight:800;
	font-size:  clamp(1.5rem, 3.5vw, 4rem);

}
.sc p {
   
    font-weight: 500;
    font-size:  clamp(1.2rem, 2vw, 1.3rem);
        max-width: 530px;
}
.sc h1 span {

color:var(--jofogas_orange);


}
.sc.v_02 h1 {
	color:var(--jofogas_green);
}
.sc.v_02 h1 span {
	color:var(--jofogas_blue);
}

@media (max-width:992px) {
.sc p {

  padding-right:0;



}
}

@media (min-width:992px) {
    .sc .container {
        height: 100%;
        padding-top: calc(var(--gutter) / 1.5);
		padding-bottom: calc(var(--gutter) / 1.5);
        align-content: center;
		min-height:374px;
    }
}

.action {
	position: absolute;
    top: inherit;
    bottom: 0px;
  	max-width: 100%;
  	max-height: 380px;
  	opacity: 0;
  	transform: translateX(-100px); 
  	transition: opacity 1s ease, transform 3s ease; 
}
.just_badge .action {
width:500px; 
}
#spaceanim {
  position: relative;
  transition: transform 1s ease-in-out;
  width:500px;
  height:auto;
}
@media (max-width:992px) {
#spaceanim {
margin-top:2rem;
}
}
.action.loaded {
  	opacity: 1; 
  	transform: translateX(0); 
}


.textblock {
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gutter) / 4);
}


.textblock h1 {
    font-size: 2rem;
    margin-bottom: 0px;
    font-weight: 800;
    display: block;
	color:#fff;
}

b.headmain {
    font-weight: 800;
    /* line-height: 130%; */
    display: inline-flex
;
    align-items: center;
}
.textblock h1 span {
display: block;
    font-size: 20px;
    padding-top: 0px;
    line-height: 35px;
    font-weight: 600;

}
@media (max-width: 992px) {
.navbar-expand-lg .container {
    border-bottom: none;
    position: relative;
    z-index: 100000;
	
}


.textblock {
    margin-top: 0px;
}


.sc .container {
	background-image: none;
	
}


}


/* /hero */

/* hero-biztonsag_new_version */
.sc.v_03 {
  background-image:
    url('./images/zsozso_corner.svg'), 
    url('./images/bubble.svg'),        
    url('./images/girl.jpg');          

  background-position:
    right bottom, 
    left -10vw top -5vh,   
    center;

  background-repeat: no-repeat, no-repeat, no-repeat;

  background-size:
    15vw auto,   
    60vw auto,   
    cover;       

  min-height: 360px;
}

.sc.v_03 h1 {
    color: var(--jofogas_green);
}
.sc.v_03 span {
    color: #fff;
}
.sc.v_03 p {
    color: #fff;
}
.sc.v_03 h1 {

	font-weight:800;
	font-size:  clamp(1.5rem, 3.5vw, 3.5rem);

}
@media (min-width: 1400px) {
  .sc.v_03 {
    background-position:
      right bottom,                 
      left -10vw top -5vh,          
      50% 30%;                       
  }
}
@media (max-width: 992px) {
.sc.v_03 {
  background-image:
    url('./images/zsozso_corner.svg'), 
    url('./images/bubble_mobile.svg'),        
    url('./images/girl.jpg');          
  background-size:
    23vw auto,   
    100vw auto,   
    cover;       
  background-position:
    right bottom, 
    left -50vw top -5vh,   
    top;
}

}


@media (max-width: 765px) {
.sc.v_03 {

  background-position:
    right bottom, 
    left -30vw top -5vh,   
    top;
}    
.sc.v_03 p {
    font-size:16px;
}

}
@media (max-width: 400px) {
.sc.v_03 {
  background-size:
    23vw auto,   
    100vw auto,   
    cover;       
  background-position:
    right bottom, 
    left -30vw top 0vh,   
    top;
}    


}
/* hero-biztonsag_new_version */



/* felso3kep */

.icon-text {
    display: flex;
    gap: calc(var(--gutter) / 4);
    align-items: flex-start;
    flex-direction: column;
    margin-top: calc(var(--gutter) / 4);
    text-align: left;

}
@media (max-width: 992px) {
.icon-text {
flex-direction:row;

}
}

@media (max-width: 765px) {
.icon-text {
flex-direction:column;
padding: 0px;

}
.icon-text img {
width:100%;

}
@media (max-width: 765px) {
.icon-text img.lowq {
width:auto;

}
}



}

/* kétoldalas rész */
.bigblock {
    background: #EBF0F5;
    border-radius: var(--corner);
    padding: calc(var(--gutter) / 2);
    text-align:left;
}
.bigblock.padding-xl {

    padding: calc(var(--gutter));

}
.bigblock.nobg {
    background: transparent;
    padding-left:0;
    padding-right:0;

}
@media (max-width: 765px) {
.bigblock {
     padding: calc(var(--gutter) / 4);
    
}
}
.bigblock .content {
display:flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 765px) {
.bigblock.inverse .row {
flex-direction: column-reverse;
}
}
.bigblock .content p {
margin-bottom: calc(var(--gutter) / 2);

}
.bigblock .content p.subtitle {
margin-bottom: calc(var(--gutter) / 2);
color:var(--jofogas_blue);
font-weight: 700;

}
.bigblock .content ul {
margin-bottom: calc(var(--gutter) / 2);

}
@media (max-width: 765px) {
.bigblock .content {
    padding-top: calc(var(--gutter) / 2);
    
}
}

/* kiemelt rész */

.separated {
    margin-top: calc(var(--gutter) / 1);
    margin-bottom: 0;
    padding-bottom: calc(var(--gutter) * 1.3);
    background-color: #EBF0F5;

  background-image: url('./images/bolygo.svg'), url('./images/bolygo2.svg');
  background-position: top 20px left 10%, bottom 20px right 10%;
  background-repeat: no-repeat, no-repeat;
  background-size: auto;
}
@media (max-width: 991.98px) {
  .separated {
    background-position: top -20px left -20px, bottom -20px right -20px;
  }
}
@media (max-width: 775.98px) {
  .separated {
    background-image: none, url('./images/bolygo2.svg');
    background-position: bottom -20px right -20px;
    background-repeat: no-repeat;
    
  }
}
.separated h2 {
    color: var(--jofogas_orange);
}
.buttons {
    width:100%;
    display:flex;
    justify-content: center;
    align-items:center;
    gap:calc(var(--gutter) / 2);


}
.buttons .custombutton {
    width:250px;



}
@media (max-width: 765px) {
    .buttons {
flex-direction: column;


}
    .buttons .custombutton {
    width:250px;



}
}

/* kiemelt rész II. */

.separated.secondary {
    background-color: #e9e9e9;
    margin-top:0;
    background-image:none;
}
.separated.secondary .banner {
    background-color: var(--jofogas_peach);
    margin-top:0;
    background-image:none;
    padding:0;
    border-radius: var(--corner);
    
}
.apps {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
justify-content: center;
padding:calc(var(--gutter) / 2);
gap:calc(var(--gutter) / 4);
text-align:center;
}
.apps a {
display: inline-block;
    -webkit-box-shadow: 4px 4px 12px -6px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 4px 4px 12px -6px rgba(0, 0, 0, 0.15);
    box-shadow: 4px 4px 12px -6px rgba(0, 0, 0, 0.15);
    border:solid 1px #000000;
    border-radius:7px;

}
.apps a:hover {

    box-shadow: none;
    border:solid 1px #fff;

}
.separated.secondary .banner .phone {
height:100%;
max-width: none;
padding-left:calc(var(--gutter) / 2);
}
@media (max-width: 765px) {
    .apps a {
    margin:0.3rem;

    }
    .banner .picture {
    display:none;   
    }
    .separated.secondary .banner { 
    background-image:url(./images/telo.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    }
    .apps {
    background-color: #fef1ebcf;

    }
}
.apps h1, .apps h2, .apps h3 {
color:var(--text_dark);
}


/* footer */
.footer {
    font-size:var(--small-text);
    background-color: var(--jofogas_extra_dark);
    color:var(--text_footer);
    padding:var(--gutter) 0;
}
.footer a {
    color:var(--text_footer);
    text-decoration:none;
}
.footer a:hover {
    color:#fff;
}
.footer h4 {
    color:var(--text_footer);
}
.footer ul {
  list-style: none;
  padding-left:0px;

}

.footer .vertical ul li {
padding-top:0.5rem;

}
.footersocial {
    background-color: #ffffff;
    display:flex;
    justify-content: center;
    padding:2rem 0;
    align-items: center;
    gap:1rem;

}
.footersocial a {

    display:inline-block;


}
@media (max-width: 765px) {
    .footersocial {
    flex-direction:column;

    }
}

.footerlinks ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.footerlinks ul li {
  display: flex;
  align-items: center;
}

.footerlinks ul li a {
  text-decoration: none;
  color: inherit;
  padding: 0 8px;
  position: relative;
  padding-left: 0;
}

/* Elválasztó csík a linkek között, de az utolsón nincs */
.footerlinks ul li:not(:last-child) a::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  background-color: var(--text_footer);
  margin-left: 8px;
  vertical-align: middle;
}