/* @import "../css/reset.css"; */

      
        @font-face {
            font-family: TeleGroteskNext;
            src: url(/static-ut/alkalmazasok/lp/szamlamagyarazo-uzleti-it/static/fonts/TeleGrotesk-NextRegular.woff2) format('woff2'),
			url(/static-ut/alkalmazasok/lp/szamlamagyarazo-uzleti-it/static/fonts/TeleGrotesk-NextRegular.woff) format('woff'),
			url(/static-ut/alkalmazasok/lp/szamlamagyarazo-uzleti-it/static/fonts/TeleGroteskNext-Regular.ttf) format('truetype')
        }

        @font-face {
            font-family: TeleGroteskNext;
            src: url(/static-ut/alkalmazasok/lp/szamlamagyarazo-uzleti-it/static/fonts/TeleGroteskNext-Medium.woff2) format('woff2'),
			url(/static-ut/alkalmazasok/lp/szamlamagyarazo-uzleti-it/static/fonts/TeleGroteskNext-Medium.woff) format('woff'),
			url(/static-ut/alkalmazasok/lp/szamlamagyarazo-uzleti-it/static/fonts/TeleGroteskNext-Medium.ttf) format('truetype')
        }

        @font-face {
            font-family: TeleGroteskNext;
            src: url(/static-ut/alkalmazasok/lp/szamlamagyarazo-uzleti-it/static/fonts/TeleGroteskNext-Bold.woff2) format('woff2'),
			url(/static-ut/alkalmazasok/lp/szamlamagyarazo-uzleti-it/static/fonts/TeleGroteskNext-Bold.woff) format('woff'),
			url(/static-ut/alkalmazasok/lp/szamlamagyarazo-uzleti-it/static/fonts/TeleGroteskNext-Bold.ttf) format('truetype');
			font-weight: bold;
        }


/*--------------------*/
html.responsiveFrame section#frameContainer *, html.responsiveFrame section#frameContainer :after, html.responsiveFrame section#frameContainer :before {
    box-sizing:content-box; !important
}
	 
        html, body {
            font-family: TeleGroteskNext, Arial, sans-serif;
            font-size: 12px;
        }
        
        /*szĂĄmlĂĄn belĂźl*/     
        p {
            padding-bottom: 24px;
        }           

        #container {
            margin: 0 auto;
            max-width: 1152px;
            overflow: visible;
        }

        .pages {
			padding: 0 2rem;
        }
        
        .page {
            background: white;
            position: relative;
            min-height: 1100px;
        }

        /*-----------------------------------------*/
        /* tabos lapfĂźles cucc*/
        .content {
            background: #fff;
            border: 1px solid black;
            /* width: 800px; */
			min-width: 800px;
        }
       
      /*  .content > section:not(:first-child) {*/
        .content > section {
               display: none;
        }
       
        input {
            display: none;
        }
       
        label {
            margin-bottom: -1px;
            display: inline-block;
            background:#fff;
            padding: 10px 20px;
            text-align: center;
            border: 1px solid #000;
            font-size: 1.5em;
            font-weight: 700;
        }
        
            
        label:hover {
            background: #f3118f;
            color: #000;
            cursor: pointer;
        }
        input:checked + label {
            background: #fff;
            color: #e2007f;
            border-bottom: 1px solid #fff;
        }

        #tab-1:checked ~ .content #page1,
        #tab-2:checked ~ .content #page2,
        #tab-3:checked ~ .content #page3,
        #tab-4:checked ~ .content #page4 {
            display: block;
        }

        /* ----------------------------------------- */
        .page section img {
	    width: 100%;
            padding: 10px 0px;
        }


/*---------------------------------------------------*/
 
       /* TOOLTIP */



/* Popup container */
.popup, .helppopup {
  text-align: center;
  position: absolute;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 5px;
  border: 1px solid #e20074;
  background: #e2007415;
  margin: 0 -2px 2px;
  padding: 0 2px;
  transition: background-color .2s ease-in-out;
  z-index: 1;
}
.popup:hover {
    background-color: #e2007440 !important;
    transition: background-color .2s ease-in-out;
}

.popup::before {
	content: "";
/* 	background: green; */
	height: 8px;
	top: -8px;
	width: 282px;
	left: 35px;
	position: absolute;
	display: none;
}


/* The actual popup */
.popuptext {
  display: none;
  background-color: #e20074;
  width: 272px;
  position: absolute;
  z-index: 10;
  bottom: calc(100% + 8px);
  border-radius: 8px;
  padding: 10px;
  left: 30px;
  height: fit-content;
  color: #fff;
  text-align: justify;
  hyphens: auto;
  font-size: 1.1rem;
  line-height: 15px;
}

/* Popup arrow */
.popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 21%;
    border-width: 5px;
    border-style: solid;
    border-color: #e20074 transparent transparent transparent;
}
   

.popuptext a {        
    color: white;
}

.popuptext h3 {
    font-weight: 700;
    margin-bottom: 5px;
}

.popuptext > ul {
	list-style-type: square;
	padding-left: 15px;
}
		
.popuptext h3:nth-child(n+2) {
    margin-top: 14px;
}



.popup:hover > .popuptext,
.popup:hover::before{
  display: block;
}



       
       
        
/* ------------- HELP ----------- */
.help {
    color:  #e20074;
    top: 8px;
    position: relative !important;
}

.help:hover .far,
.help .fas {
    display: none;
}

.help:hover .fas {
    display: inline;
    cursor: pointer;
}

.helptext {
    top: 25px;
    left: -48px;
    display: block;
    visibility: hidden;
}

.helptext::after {        
    top: -10px;
    border-color: transparent transparent #e20074 transparent;
}

.show {
    visibility: visible;
    -webkit-animation: fadeIn .3s;
    animation: fadeIn .3s;
}

@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}


        @media only screen and (max-width: 640px) {  
          .helptext {
             left: -140px;
          }
	  .popuptext::after {
             left: 52%;
          }  
        }    

        @media only screen and (max-width: 480px) {
          label {
             padding: 10px 15px;
          } 
          .popuptext::after {
             left: 85%;
          }    
          .helptext {
             left: -235px;
          }
        }
           

/* ------------- 1. oldal ------------ */

#page1 .popup:nth-child(1) {
    top: 13%;
    left: 1%;
    width: 48%;
    height: 11%;
}

#page1 .popup:nth-child(2) {
    top: 24.5%;
    left: 1%;
    width: 48%;
    height: 1.3%;
}

#page1 .popup:nth-child(3) {
    top: 26%;
    left: 1%;
    width: 48%;
    height: 2.4%;
}

#page1 .popup:nth-child(4) {
    top: 29.8%;
    left: 1%;
    width: 48%;
    height: 4.5%;
}

#page1 .popup:nth-child(5) {
    top: 34.5%;
    left: 1%;
    width: 48%;
    height: 3%;
}

#page1 .popup:nth-child(6) {
    top: 37.7%;
    left: 1%;
    width: 48%;
    height: 1.2%;
}

#page1 .popup:nth-child(7) {
    top: 44.1%;
    left: 1%;
    width: 54%;
    height: 1.2%;
}

#page1 .popup:nth-child(8) {
    top: 45.5%;
    left: 1%;
    width: 54%;
    height: 1.2%;
}

#page1 .popup:nth-child(9) {
    top: 46.9%;
    left: 1%;
    width: 54%;
    height: 1.2%;
}

#page1 .popup:nth-child(10) {
    top: 48.3%;
    left: 1%;
    width: 54%;
    height: 5.1%;
}

#page1 .popup:nth-child(11) {
    top: 55.8%;
    left: 59%;
    width: 40%;
    height: 6.6%;
}

#page1 .popup:nth-child(12) {
    top: 66.4%;
    left: 1%;
    width: 98%;
    height: 20.7%;
}

#page1 .popup:nth-child(13) {
    top: 87.3%;
    left: 1%;
    width: 98%;
    height: 3.4%;
}

/* ------------- 2. oldal ------------ */

#page2 .popup:nth-child(1) {
    top: 8.8%;
    left: 20%;
    width: 79%;
    height: 6.9%;
}