/* COMMON STYLES */
body {font-family: arial, sans-serif;background-color: #444;margin:0;overflow-x:hidden;}
body.light {background-color: #f1f1f1;}
.orb {font-family: arial, sans-serif;}
.sai {font-family: arial, cursive;}
.white {color: #fff;}
.green {color: #c6d327;}
.gray {color: #808080;}
.right {text-align:right;}
.left {text-align:left;}
#mobileIndicator {display:none;height:1px;}
a {color: #fff;}
body.light a {color: #000;}
body * {box-sizing: border-box;}

header {display:block;box-sizing:border-box;width:100%;background-color: #000;padding: 0 0 2px;position:sticky;top:-1px;z-index:9999;transition:  all 1s;background: linear-gradient(to right, #333, #a1ab1f, #333);box-shadow: 0 2px 5px rgba(0,0,0,0.5);}
header.sticky {padding: 0 0 2px;box-shadow: 0 2px 10px rgba(0,0,0,0.5);}
	header .innerFrame {display:block;box-sizing:border-box;width:100%;padding: 20px;background-color: #111;transition:  all 1s;}
	body.light header .innerFrame {background-color: #fff;}
	header.sticky .innerFrame {padding: 5px;}
		header .inner {display:flex;justify-content: space-between;align-items: center;box-sizing:border-box;width:100%;max-width: 1600px;margin:auto;}
			#logo {display:flex;justify-content: flex-start;align-items: flex-end;flex-grow:2;}
				#logo .logoCube {box-sizing:border-box;display: grid;grid-template-columns: repeat(3, auto);grid-template-rows: repeat(3, auto);grid-row-gap: 3px;grid-column-gap: 3px;}
				header.sticky #logo .logoCube {grid-row-gap: 2px;grid-column-gap: 2px;}
					#logo .logoCube span {display:block;box-sizing:border-box;width:16px;height:16px;background-color: #808080;border-radius:1px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;-o-transition: all 0.8s;transition:  all 0.8s;}
					header.sticky #logo .logoCube span {width:7px;height:7px;border-radius:0px;}
					#logo .logoCube span#c1 {background-color: #a1ab1f;}
					#logo .logoCube.f7 span#c2 {background-color: #a1ab1f;}
					#logo .logoCube.f4 span#c3 {background-color: #a1ab1f;}
					#logo .logoCube.f7 span#c3 {background-color: #a1ab1f;}
					#logo .logoCube.f7 span#c5 {background-color: #a1ab1f;}
					#logo .logoCube.f4 span#c7 {background-color: #a1ab1f;}
					#logo .logoCube.f7 span#c7 {background-color: #a1ab1f;}
					#logo .logoCube.f7 span#c8 {background-color: #a1ab1f;}
					#logo .logoCube span#c9 {background-color: #a1ab1f;}
				img#logoImage {display:block;max-width:100%;height:auto;max-height:90px;width: auto;margin: 0 0 0 5px;transition:  all 1s;}
					body.light img#logoImage {filter: invert(1) grayscale(1);}
				header.sticky img#logoImage {max-height:45px;}
			#quote {}
				#quote a {display:block;text-decoration: none;}
					#quote button {display:flex;justify-content: center;align-items: center;box-sizing:border-box;width:180px;height:44px;margin: 0 60px;border: 0;background-color: #565B10;color: #fff;border-radius: 3px;cursor: pointer;font-family: 'Montserrat', sans-serif;font-size: 14px;font-weight:bold;}
			#menuIcon {display:flex;justify-content: flex-end;align-items: center;padding:20px;cursor:pointer;}
				#menuIcon .bars {height:34px;color:#fff;opacity: 1;transition:  all 0.3s;}
				#menuIcon.open .bars {opacity: 0;}
				body.light #menuIcon .bars {color:#111;}
				#menuIcon .times {height:24px;margin: 0 0 0 10px;opacity: 0;transition:  all 0.3s;}
				#menuIcon.open .times {opacity: 1;}
				body.light #menuIcon .times {color:#111;}
			#themeColorIcon {display:flex;justify-content: flex-end;align-items: center;padding:20px;cursor:pointer;}
				#themeColorIcon .adjust {height:34px;color:#fff;}
				body.light #themeColorIcon .adjust {color: #111;}

#main {display:block;box-sizing:border-box;width:100%;scroll-snap-type: mandatory;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(300px);}
	section {display:block;box-sizing:border-box;width:100%;scroll-snap-align: start;}

	section#home {background: #555;background: linear-gradient(#555, #000);box-shadow: 0 0 6px #000;position:relative;height:calc(100vh - 131px);transition:  all 1s;}
	body.light section#home {background: #fff;background: linear-gradient(#fff, #777);box-shadow: 0 0 6px #000;position:relative;height:calc(100vh - 131px);}
		section#home div.bg {position:absolute;top:0;left:0;width:100%;height:100%;opacity: 0.1;z-index: 1;transition:  all 1s;}
		body.light section#home div.bg {opacity: 0.3;}
			section#home div.bg img {display:block;width:100%;height:100%;aspect-ratio: 1920/760;object-fit: cover;transition:  all 1s;}
			body.light section#home div.bg img {filter: invert(1);}

		section#home div.main {display:flex;justify-content: center;align-items: center;box-sizing:border-box;padding: 50px 20px 0;position:relative;z-index: 2;height:100%;}

			section#home div.main div.headline {display:block;box-sizing:border-box;padding:0 50px;border-left: solid 3px #a1ab1f;}
				section#home div.main div.headline h1 {font-size:35px;padding: 0;margin:0;transition:  all 1s;font-style: italic;}
				body.light section#home div.main div.headline h1 {text-shadow: 0 0 10px #000;}
				section#home div.main div.headline h2  {margin:10px 0;}
					section#home div.main div.headline .zoli {margin: 0 10px 0 0;transition:  all 1s;}
						body.light section#home div.main div.headline .zoli {filter: drop-shadow(0 0 15px #000);}
				section#home div.main div.headline span.varga {transition:  all 1s;}
					body.light section#home div.main div.headline span.varga {text-shadow: 0 0 15px #fff;}
				section#home div.main div.headline h3.title {display:block;font-size: 24px;letter-spacing: 1.4px;transition:  all 1s;color: #aaa;}
					body.light section#home div.main div.headline h3.title {text-shadow: 0 0 15px #000;color: #eee;}
				section#home div.main div.headline div.abstract {padding: 30px 0;font-size:18px;transition:  all 1s;color: #ccc;}
					body.light section#home div.main div.headline div.abstract {color: #fff;text-shadow: 0 0 10px #000;}
					section#home div.main div.headline div.abstract ul {list-style-type:none;padding: 0;}
						section#home div.main div.headline div.abstract ul li {/*display:flex;justify-content: flex-start;align-items: center;*/padding: 8px 0;line-height: 28px;}
						section#home div.main div.headline div.abstract ul li::before {font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f111";font-size: 5px;color:#fff;margin: 0 10px 0 0;vertical-align: middle;line-height: 20px;}
							section#home div.main div.headline div.abstract ul li i.fa-caret-right {font-size: 30px;line-height: 20px;margin: 0 20px;color: #a1ab1f;vertical-align: middle;}
				section#home div.main div.headline div.partner-badges {display:flex;justify-content: center;align-items: stretch;padding: 20px 0 0;}
					section#home div.main div.headline div.partner-badges .badge {display:flex;justify-content: center;align-items: center;box-sizing:border-box;padding: 15px;margin:0 15px;background-color: #fff;border-radius: 10px;}
					body.light section#home div.main div.headline div.partner-badges .badge {background-color: transparent;}
						section#home div.main div.headline div.partner-badges .badge img {display:block;max-width:100%;height:auto;max-height: 55px;width:auto;}
						body.light section#home div.main div.headline div.partner-badges .badge img {filter: drop-shadow(0 0 10px #fff);}

			section#home div.main div.image {display:block;padding:0 20px 0 80px;align-self: flex-end;}
				img#portraitImage {display:block;width:auto;height:700px;max-height:100%;margin:0px auto;filter: drop-shadow(0 0 3px rgba(255,255,255,0.3));transition:  all 1s;}
				body.light img#portraitImage {filter: drop-shadow(0 0 20px rgba(0,0,0,0.8));}

		section#home div.contact {position: absolute;bottom: 0;padding: 15px;width:100%;margin:auto 0;display:flex;justify-content: center;align-items: center;text-shadow: 0 0 5px #000;z-index:3;transition:  all 1s;}
		body.light section#home div.contact {background-color: rgba(0,0,0,0.5);}
			section#home div.contact span {font-size: 16px;color: #ccc;padding:0 20px;transition:  all 1s;}
			body.light section#home div.contact span {display:inline-flex;align-items: center;color: #fff;}
				section#home div.contact span svg {height:24px;color:#fff;margin: 0 10px 0 0;}

	section#aboutMe {display:block;box-sizing:border-box;width:100%;height:100vh;padding: 86px 0 0;}
		section#aboutMe div.main {display:flex;justify-content: center;align-items: center;flex-direction:column;box-sizing:border-box;height:100%;width:100%;max-width: 1250px;margin: 0 auto;padding: 50px 20px;position:relative;z-index: 2;height:100%;}
			section#aboutMe div.main div.headline {display:block;box-sizing:border-box;width: 100%;padding:25px 50px;border-right: solid 3px #a1ab1f;}
				section#aboutMe div.main div.headline span.pri {font-size:60px;font-weight:bold;padding: 0 10px 0 0;transition:  all 1s;}
				body.light section#aboutMe div.main div.headline span.pri.white {color: #000;}
				section#aboutMe div.main div.headline span.sec {font-size:70px;font-weight:bold;transition:  all 1s;}
			section#aboutMe div.main div.abstract {display:block;padding:50px 20px;color: #e1e1e1;color: #c1c1c1;font-size: 20px;line-height: 2;}
			body.light section#aboutMe div.main div.abstract {color: #666;}
			section#aboutMe div.main div.readmore {transition:  all 1s;text-align:center;cursor: pointer;}
				section#aboutMe div.main div.readmore span {padding: 10px;transition:  all 0.5s;}
				section#aboutMe div.main div.readmore span:hover {background-color: #a1ab1f;}
					section#aboutMe div.main div.readmore span a {font-weight:bold;transition:  all 0.5s;text-decoration: none;}
					section#aboutMe div.main div.readmore:hover span a {color: #000;}

	section#services {display:block;box-sizing:border-box;width:100%;height:100vh;padding: 86px 0 0;position: relative;background-color: #666;}
	body.light section#services {background: #fff;}
	section#services::before {content: "";background-image: url('../images/fixed-bg.webp');background-attachment: fixed;background-size: cover;position: absolute;top: 0px;right: 0px;bottom: 0px;left: 0px;opacity: 0.05;}
		section#services div.main {display:flex;justify-content: center;align-items: center;flex-direction:column;box-sizing:border-box;height:100%;width:100%;max-width: 1250px;margin: 0 auto;padding: 50px 20px;position:relative;z-index: 2;height:100%;}
			section#services div.main div.headline {display:block;box-sizing:border-box;width: 100%;padding:25px 50px;border-left: solid 3px #a1ab1f;}
				section#services div.main div.headline span.pri {font-size:45px;font-weight:bold;padding: 0 10px 0 0;transition:  all 1s;}
				body.light section#services div.main div.headline span.pri.white {color: #000;}
				section#services div.main div.headline span.sec {font-size:70px;font-weight:bold;transition:  all 1s;}
			section#services div.main div.abstract.flex {display:flex;justify-content: space-evenly;padding:30px 20px;color: #e1e1e1;font-size: 20px;line-height: 2;}
			body.light section#services div.main div.abstract.flex {color: #666;}
				section#services div.main div.abstract ul {padding: 20px 40px;width: 50%;}
					section#services div.main div.abstract ul li {}
					section#services div.main div.abstract ul li.header {font-size: 23px;font-weight: bold; color: #fff;list-style-type:none;}
					body.light section#services div.main div.abstract ul li.header {color: #000;}
		section#services div.readmore {transition:  all 1s;text-align:center;cursor: pointer;}
			section#services div.readmore span {padding: 10px;transition:  all 0.5s;}
			section#services div.readmore span:hover {background-color: #a1ab1f;}
				section#services div.readmore span a {font-weight:bold;transition:  all 0.5s;text-decoration: none;}
				section#services div.readmore:hover span a {color: #000;}

	section#skills {display:block;box-sizing:border-box;width:100%;height:100vh;padding: 86px 0 0;}
		section#skills div.main {display:flex;justify-content: center;align-items: center;flex-direction:column;box-sizing:border-box;height:100%;width:100%;max-width: 1250px;margin: 0 auto;padding: 50px 20px;position:relative;z-index: 2;height:100%;}
			section#skills div.main div.headline {display:block;box-sizing:border-box;width: 100%;padding:25px 50px;border-right: solid 3px #a1ab1f;}
				section#skills div.main div.headline span.pri {font-size:60px;font-weight:bold;padding: 0 10px 0 0;transition:  all 1s;}
				body.light section#skills div.main div.headline span.pri.white {color: #000;}
				section#skills div.main div.headline span.sec {font-size:70px;font-weight:bold;transition:  all 1s;}
			section#skills div.main div.abstract.flex {display:flex;justify-content: space-evenly;padding:50px 20px;color: #e1e1e1;font-size: 20px;line-height: 2;}
			body.light section#skills div.main div.abstract.flex {color: #666;}
				section#skills div.main div.abstract ul {padding: 40px;width: 50%;}
					section#skills div.main div.abstract ul li {}
					section#skills div.main div.abstract ul li.header {font-size: 23px;font-weight: bold; color: #fff;list-style-type:none;}
					body.light section#skills div.main div.abstract ul li.header {color: #000;}
		section#skills div.readmore {transition:  all 1s;text-align:center;cursor: pointer;}
			section#skills div.readmore span {padding: 10px;transition:  all 0.5s;}
			section#skills div.readmore span:hover {background-color: #a1ab1f;}
				section#skills div.readmore span a {font-weight:bold;transition:  all 0.5s;text-decoration: none;}
				section#skills div.readmore:hover span a {color: #000;}

	section#contact {display:block;box-sizing:border-box;width:100%;height:100vh;padding: 86px 0 0;background-color: #333;}
	body.light section#contact {background: #fff;}
		section#contact div.main {display:flex;justify-content: center;align-items: center;flex-direction:column;box-sizing:border-box;height:100%;width:100%;max-width: 1250px;margin: 0 auto;padding: 50px 20px;position:relative;z-index: 2;height:100%;}
			section#contact div.main div.headline {display:block;box-sizing:border-box;width: 100%;padding:25px 50px;border-left: solid 3px #a1ab1f;}
				section#contact div.main div.headline span.pri {font-size:60px;font-weight:bold;padding: 0 10px 0 0;transition:  all 1s;}
				body.light section#contact div.main div.headline span.pri.white {color: #000;}
				section#contact div.main div.headline span.sec {font-size:70px;font-weight:bold;transition:  all 1s;}
			section#contact div.main div.abstract.flex {display:flex;justify-content: space-between;align-items: flex-start;width: 100%;padding:20px;color: #e1e1e1;font-size: 20px;line-height: 2;}
			body.light section#contact div.main div.abstract.flex {color: #666;}
				section#contact div.main div.abstract ul {box-sizing: border-box;padding: 40px;width: 50%;}
				section#contact div.main div.abstract ul.nolist {list-style-type:none;}
					section#contact div.main div.abstract ul li {}
					section#contact div.main div.abstract ul li.header {font-size: 20px;font-weight: bold; color: #fff;list-style-type:none;padding: 0 0 20px;}
					body.light section#contact div.main div.abstract ul li.header {color: #000;}

					section#contact i.fas, 
					section#contact i.far {color: #fff;margin: 0 10px 0 0;}
					body.light section#contact i.fas, 
					body.light section#contact i.far {color: #000;}
					section#contact div.formRow {display:flex;justify-content: space-between;align-items: center;width: 100%;padding: 5px 0;}
					section#contact div.formRow.submit {display:block;box-sizing:border-box;width:100%;}
						section#contact span.required, section#contact sup.required {font-size: 12px;color: #d00;}
						section#contact label.label {display:inline-block;width: 160px;font-weight:bold;}
						section#contact input, 
						section#contact textarea {width: calc(100% - 170px);box-sizing:border-box;border: solid 1px #000;padding: 10px;font-size: 16px;font-family: 'Montserrat', sans-serif;}
						body.light section#contact input, 
						body.light section#contact textarea {background-color: #f1f1f1;}
						section#contact button {display:flex;justify-content: center;align-items: center;box-sizing:border-box;width:180px;height:44px;margin: 0;border: 0;background-color: #565B10;color: #fff;border-radius: 3px;cursor: pointer;font-family: 'Montserrat', sans-serif;font-size: 14px;font-weight:bold;}

footer {display:block;box-sizing:border-box;width:100%;background-color: #000;padding: 2px 0 0;background: linear-gradient(to right, #333, #a1ab1f, #333);}
body.light footer {background-color: #fff;}
	footer .copyright {display:block;box-sizing:border-box;width:100%;padding: 30px 20px;text-align:center;background-color: #000;color: #999;font-size: 13px;}
	body.light footer .copyright {background-color: #f7f7f7;color: #444;}

#mainMenu {position:fixed;top:0;right:-310px;display:block;box-sizing:border-box;width:300px;height:100%;overflow:auto;background-color: #000;z-index:999;-webkit-transition: all 0.7s;-moz-transition: all 0.7s;-o-transition: all 0.7s;transition:  all 0.7s;padding: 15px;}
#mainMenu.open {right:0;}
	#mainMenu ul {list-style-type:none;display:block;box-sizing:border-box;width:100%;margin:0;padding:0;}
		#mainMenu li {display:block;box-sizing:border-box;width:100%;padding: 15px 10px;border-bottom: dotted 1px #333;color: #fff;}
		#mainMenu li:hover {background-color: #a1ab1f;}
			#mainMenu li a {display:block;color:#a0a0a0;text-decoration: none;font-size: 20px;}
			#mainMenu li:hover a {color: #fff;}
			#mainMenu li.actual a {color: #fff;font-weight:bold;}

/* DESKTOP SIZE STYLES */
@media only screen and (max-width : 1450px) {
	section#home div.main div.headline h1 {font-size: 28px;}
	section#home div.main div.headline div.abstract {padding: 15px 0;}
}
@media only screen and (max-width : 1300px) {
	section#home div.main div.headline h1 {font-size: 24px;}
	section#home div.main div.headline h3 {font-size: 18px;}
	section#home div.main div.headline div.abstract {padding: 0;}
	section#home div.main {padding: 20px 20px 0;}
	section#home div.main div.headline {padding: 0 20px;}
}
@media only screen and (max-width : 1200px) {
	section#home div.main div.headline h1 {font-size: 20px;}
	section#home div.main div.headline .zoli {height: 80px;width: auto;}
	section#home div.main div.headline .varga {height: 80px;width: auto;}
	section#home div.main div.headline h3 {font-size: 16px;}
}
@media only screen and (max-width : 1100px) {
	img#portraitImage {height: 500px;}
	section#aboutMe, 
	section#services,
	section#skills,
	section#contact {height: auto;}
}
@media only screen and (max-width : 1030px) {
	section#home {height: auto;}
	section#home div.main {height: auto;min-height: 100%;flex-direction: column;}
		section#home div.main div.image {margin: 20px auto 0;}
}
/* MOBILE SIZE STYLES */
@media only screen and (max-width: 770px) {
	#home .bg {display:none;}
	#quote button {margin: 0 30px;}
	section#home div.main div.headline .zoli {height: 50px;width: auto;}
	 section#home div.main div.headline .varga {height: 50px;width: auto;}
}
@media only screen and (max-width: 640px) {
	#quote {display: none;}
}

@media only screen and (max-width: 500px) {
	img#logoImage {max-height: 70px;}
	#themeColorIcon {padding: 10px;}
	#menuIcon {padding: 10px;}

	section#home div.main div.headline {border: none;padding: 0;}
		section#home div.main div.headline h3.title {font-size: 18px;}
		section#home div.main div.headline div.abstract {font-size: 16px;}
	section#aboutMe div.main {padding: 20px;}
		section#aboutMe div.main div.headline span.pri {font-size:40px}
		section#aboutMe div.main div.headline span.sec {font-size:40px}
		section#aboutMe div.main div.abstract {padding: 20px;font-size:16px}
	section#services div.main {padding: 20px;}
		section#services div.main div.headline span.pri {font-size:30px}
		section#services div.main div.abstract.flex {padding: 20px;font-size:16px;flex-direction:column;}
			section#services div.main div.abstract.flex ul {padding: 20px;width: 100%;}
	section#skills div.main {padding: 20px;}
		section#skills div.main div.headline span.pri {font-size:40px}
		section#skills div.main div.headline span.sec {font-size:40px}
		section#skills div.main div.abstract.flex {padding: 20px;font-size:16px;flex-direction:column;}
			section#skills div.main div.abstract.flex ul {padding: 20px;width: 100%;}
	section#contact div.main {padding: 20px;}
		section#contact div.main div.headline span.pri {font-size:40px}
		section#contact div.main div.headline span.sec {font-size:40px}
		section#contact div.main div.abstract.flex {padding: 20px;font-size:16px;flex-direction:column;}
			section#contact div.main div.abstract.flex ul {padding: 20px;width: 100%;}

	section#home div.main div.headline div.partner-badges .badge {padding: 8px;margin: 0 5px;}
}