/* swbicska.css 0.01 2023.07.16. by Dudás Gergely */
/* Svájci Bicska CSS keretrendszer */
/* ANNO 2023.07.16. */


/* Svájci Bicska CSS keretrendszer nagymértékben támaszkodik az alábbi munkákra: */
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
/* https://stackoverflow.com/questions/13637106/what-are-the-best-width-ranges-for-media-queries és a hivatkozott oldalak */
/* https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
/* https://css-tricks.com/a-complete-guide-to-css-media-queries/ */
/* https://www.w3.org/TR/mediaqueries-3/ */


/* A megfelelő működéshez a html head-ben az alábbiaknak kell legalább szerepelniük: */
/* <meta charset="UTF-8"> */
/* <meta name="viewport" content="width=device-width, initial-scale=1"> */
/* <link rel="stylesheet" type="text/css" href="elérésiút/swbicska.css"> */





/* ELŐBEÁLLÍTÁS - MEGJELENÍTÉS NORMALIZÁLÁSA */
html{
    box-sizing:border-box
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
    overflow-x:hidden
    font-family:Verdana,sans-serif;
    font-size:15px;
    line-height:1.5
    }


body{
    margin:0
    font-family:Verdana,sans-serif;
    font-size:15px;
    line-height:1.5
    }


article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{
    display:block
    }


summary{
    display:list-item
    }


audio,canvas,progress,video{
    display:inline-block
    }


progress{
    vertical-align:baseline
    }


audio:not([controls]){
    display:none;
    height:0
    }


[hidden],template{
    display:none
    }


a{
    background-color:transparent
    color:inherit
    }


a:active,a:hover{
    outline-width:0
    }


abbr[title]{
    border-bottom:none;
    text-decoration:underline;
    text-decoration:underline dotted
    }


b,strong{
    font-weight:bolder
    }


dfn{
    font-style:italic
    }


mark{
    background:#ff0;
    color:#000
    }


small{
    font-size:80%
    }


sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
    }


sub{
    bottom:-0.25em
    }


sup{
    top:-0.5em
    }


figure{
    margin:1em 40px
    }


img{
    border-style:none
    vertical-align:middle
    }


code,kbd,pre,samp{
    font-family:monospace,monospace;
    font-size:1em
    }


hr{
    box-sizing:content-box;
    height:0;
    overflow:visible
    border:0;
    border-top:1px solid #eee;
    margin:20px 0
    }


button,input,select,textarea,optgroup{
    font:inherit;
    margin:0
    }


optgroup{
    font-weight:bold
    }


button,input{
    overflow:visible
    }


button,select{
    text-transform:none
    }


button,[type=button],[type=reset],[type=submit]{
    -webkit-appearance:button
    }


button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{
    border-style:none;
    padding:0
    }


button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{
    outline:1px dotted ButtonText
    }


fieldset{
    border:1px solid #c0c0c0;
    margin:0 2px;
    padding:.35em .625em .75em
    }


legend{
    color:inherit;
    display:table;
    max-width:100%;
    padding:0;
    white-space:normal
    }


textarea{
    overflow:auto
    }


[type=checkbox],[type=radio]{
    padding:0
    }


[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
    height:auto
    }


[type=search]{
    -webkit-appearance:textfield;
    outline-offset:-2px
    }


[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
    }


::-webkit-file-upload-button{
    -webkit-appearance:button;
    font:inherit
    }


*,*:before,*:after{
    box-sizing:inherit
    }


h1{
    font-family:"Segoe UI",Arial,sans-serif;
    font-weight:400;
    margin:10px 0
    font-size:36px
    }


h2{
    font-family:"Segoe UI",Arial,sans-serif;
    font-weight:400;
    margin:10px 0
    font-size:30px
    }


h3{
    font-family:"Segoe UI",Arial,sans-serif;
    font-weight:400;
    margin:10px 0
    font-size:24px
    }


h4{
    font-family:"Segoe UI",Arial,sans-serif;
    font-weight:400;
    margin:10px 0
    font-size:20px
    }


h5{
    font-family:"Segoe UI",Arial,sans-serif;
    font-weight:400;
    margin:10px 0
    font-size:18px
    }


h6{
    font-family:"Segoe UI",Arial,sans-serif;
    font-weight:400;
    margin:10px 0
    font-size:16px
    }


.serif{
    font-family:serif
    }


.sans-serif{
    font-family:sans-serif
    }


.cursive{
    font-family:cursive
    }


.monospace{
    font-family:monospace
    }

/* END - ELŐBEÁLLÍTÁS - MEGJELENÍTÉS NORMALIZÁLÁSA */





/* BEÁLLÍTÁSOK - RESZPOSZÍV MEGJELENÍTÉSHEZ  */


/* TÖRÉSPONTOK DEFINIÁLÁSA  */

/* ~~~ Orientációk (portrait / landscape) ~~~ */

@media all and (orientation:portrait) { /* Styles */ }
@media all and (orientation:landscape) { /* Styles */ }



/* ~~~ Képarányok - megjelenítő (width:height) ~~~ */

@media screen and (aspect-ratio: 4/3) { /* Styles */ }
@media screen and (aspect-ratio: 16/10) { /* Styles */ }
@media screen and (aspect-ratio: 16/9) { /* Styles */ }

@media screen and (aspect-ratio: 18/9) { /* Styles */ }
@media screen and (aspect-ratio: 19.5/9) { /* Styles */ }
@media screen and (aspect-ratio: 21/9) { /* Styles */ }



/* ~~~ Képarányok - eszköz (device-width:device-height) ~~~ */

@media screen and (device-aspect-ratio: 4/3) { /* Styles */ }
@media screen and (device-aspect-ratio: 16/10) { /* Styles */ }
@media screen and (device-aspect-ratio: 16/9) { /* Styles */ }

@media screen and (device-aspect-ratio: 18/9) { /* Styles */ }
@media screen and (device-aspect-ratio: 19.5/9) { /* Styles */ }
@media screen and (device-aspect-ratio: 21/9) { /* Styles */ }



/* ~~~ ESZKÖZSPECIFIKUS TÖRÉSPONTOK ~~~ */

/* ~~~ Nagy kijelzők: TV-k, monitorok és laptopok ~~~ */
@media only screen and (min-width: 1824px) { /* Styles */ }
@media only screen and (min-width: 1200px) { /* Styles */ }
@media only screen and (min-width: 1224px) { /* Styles */ }



/* ~~~ Tabletek általánosan ~~~ */
@media only screen and (max-width: 767px) { /* Styles (Landscape phone to portrait tablet) */ }
@media only screen and (min-width: 768px) and (max-width: 979px) { /* Styles (Portrait tablet to landscape and desktop) */ }


/* ~~~ Okostelefonok általánosan ~~~ */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* Styles (portrait and landscape) */ }
@media only screen and (min-width: 321px) { /* Styles (landscape) */ }
@media only screen and (max-width: 320px) { /* Styles (portrait) */ }
@media only screen and (max-width: 480px) { /* Styles (Landscape phones and down) */ }



/* ~~~ iPad-ek általánosan ~~~ */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* Styles (portrait and landscape) */ }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { /* Styles (landscape) */ }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* Styles (portrait) */ }



/* ~~~ iPad 3 ~~~ */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { /* Styles (landscape) */ }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { /* Styles (portrait) */ }



/* ~~~ iPhone 4 ~~~ */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { /* Styles (landscape) */ }
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { /* Styles (portrait) */ }



/* ~~~ iPhone 5 ~~~ */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { /* Styles (landscape) */ }
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { /* Styles (portrait) */ }


/* ~~~ iPhone 6 ~~~ */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { /* Styles (landscape) */ }
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { /* Styles (portrait) */ }



/* ~~~ iPhone 6+ ~~~ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { /* Styles (landscape) */ }
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { /* Styles (portrait) */ }



/* ~~~ Samsung Galaxy S3 ~~~ */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { /* Styles (landscape) */ }
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { /* Styles (portrait) */ }



/* ~~~ Samsung Galaxy S4 ~~~ */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) { /* Styles (landscape) */ }
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) { /* Styles (portrait) */ }



/* ~~~ Samsung Galaxy S5 ~~~ */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) { /* Styles (landscape) */ }
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) { /* Styles (portrait) */ }










/* EZEK MÉG BEKERÜLNEK DE AZ ESZKÖZSPECIFIKUS ÉS NEM ÁLTALÁNOSRA VÁLASZTHATÓ FELBONTÁSOK KÜLÖN FILEBA KERÜLNEK KIEMELÉSRE A SEBESSÉGNÖVELÉS ÉRDEKÉBEN. AZT A FILET NEM TÖLTJÜK BE CSAK REFERENCIÁT SZOLGÁLTAT TERVEZÉSHEZ. IDE A KIVÁLASZTOTT NÉHÁNY ALAPPONT KERÜL CSAK BE A TÖBBI ÁTKERÜL ODA! */
/* https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */















/* ~~~ FRAMEWORK SPECIFIKUS TÖRÉSPONTOK ~~~ */

/* ~~~ W3.CSS ~~~ */
@media only screen and (max-width: 992px) and (min-width: 601px) { /* Styles [w3.css] */ }
@media only screen and (max-width: 1400px) { /* Styles [w3.css] */ }
@media only screen and (max-width: 1205px) { /* Styles [w3.css] */ }
@media only screen and (min-width: 993px) { /* Styles [w3.css] */ }
@media only screen and (max-width: 992px) { /* Styles [w3.css] */ }
@media only screen and (max-width: 768px) { /* Styles [w3.css] */ }
@media only screen and (min-width: 601px) { /* Styles [w3.css] */ }
@media only screen and (max-width: 600px) { /* Styles [w3.css] */ }



/* ~~~ Bootstrap 5 breakpoints ~~~ */
@media only screen and (min-width: 0px) { /* Styles [grid-xs] (portrait phones) BOOTSTRAPBAN EZ A DEFAULT */ }
@media only screen and (min-width: 576px) { /* Styles [grid-sm] (landscape phones) */ }
@media only screen and (min-width: 768px) { /* Styles [grid-md] (tablets) */ }
@media only screen and (min-width: 992px) { /* Styles [grid-lg] (desktops) */ }
@media only screen and (min-width: 1200px) { /* Styles [grid-xl] (large desktops) */ }
@media only screen and (min-width: 1400px) { /* Styles [grid-xxl] (larger desktops) */ }

@media only screen and (max-width: 575.98px) { /* Styles [grid-xs] (portrait phones) */ }
@media only screen and (max-width: 767.98px) { /* Styles [grid-sm] (landscape phones) */ }
@media only screen and (max-width: 991.98px) { /* Styles [grid-md] (tablets) */ }
@media only screen and (max-width: 1199.98px) { /* Styles [grid-lg] (desktops) */ }
@media only screen and (max-width: 1399.98px) { /* Styles [grid-xl] (large desktops) */ }
 /* [grid-xxl] (ITT MÁR NINCS FELSŐ HATÁR EZÉRT NEM LÉTEZIK) */


/* ~~~ Foundation's media queries ~~~ */
@media only screen and (min-width: 768px) { /* Styles [screenSmall] */ }
@media only screen and (min-width: 1279px) { /* Styles [screenMedium] */ }
@media only screen and (min-width: 1441px) { /* Styles [screenXlarge] */ }



/* ~~~ Foundation 6 breakpoints ~~~ */
@media only screen and (min-width: 0px) { /* Styles [small] */ }
@media only screen and (min-width: 640px) { /* Styles [medium] */ }
@media only screen and (min-width: 1024px) { /* Styles [large] */ }
@media only screen and (min-width: 1200px) { /* Styles [xlarge] */ }
@media only screen and (min-width: 1440px) { /* Styles [xxlarge] */ }



/* ~~~ Foundation 6 hidpi breakpoints ~~~ */
@media only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio: 1) { /* Styles [hidpi-1] */ }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* Styles [hidpi-1-5] */ }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { /* Styles [hidpi-2] */ }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { /* Styles [retina] */ }
@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) { /* Styles [hidpi-3] */ }



/* FELEX KONTÉNEREK DEFINIÁLÁSA (HORIZONTÁLIS -> VERTIKÁLIS MEGJELENÍTÉS)  */

@media screen and (max-width: 1400px) {
	.flex-container {
		flex-direction: column;
	}
}


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


.flex-container > div {
	/*background-color: #555;*/
	margin: 10px;
	padding-left: 20px;
	padding-right: 20px;
}



/* END - BEÁLLÍTÁSOK - RESZPOSZÍV MEGJELENÍTÉSHEZ */





/* BEÁLLÍTÁSOK - ÁLTALÁNOS MEGJELENÍTÉSI PARAMÉTEREK */
/* END - BEÁLLÍTÁSOK - ÁLTALÁNOS MEGJELENÍTÉSI PARAMÉTEREK */





/* FUNKCIÓK - EGYEDI FUNKCIÓK ÉS MEGJELENÍTÉSEK "swb_" kezdetűek */
/* END - FUNKCIÓK - EGYEDI FUNKCIÓK ÉS MEGJELENÍTÉSEK "swb_" kezdetűek */





/* EGYÉB - MÁSHOVÁ BE NEM SOROLHATÓ VAGY MÉG BE NEM SOROLT BEÁLLÍTÁSOK ÉS FUNKCIÓK */
/* END - EGYÉB - MÁSHOVÁ BE NEM SOROLHATÓ VAGY MÉG BE NEM SOROLT BEÁLLÍTÁSOK ÉS FUNKCIÓK */





/* END - Svájci Bicska CSS keretrendszer */