@font-face { font-family: Kanit-ExtraBold; src: url("fonts/Kanit-ExtraBold.ttf"); font-weight: 800; font-display: swap; }
@font-face { font-family: Kanit-Italic; src: url("fonts/Kanit-Italic.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: Kanit; src: url("fonts/Kanit-Regular.ttf"); font-weight: 400; font-display: swap; }


* {
    box-sizing: border-box;
}

html, 
body {
    height: 100%;
	margin: 0;
	color: #0A0F0D;
	font-family: 'Kanit', Times New Roman;
	font-weight: 300;
	background: #fff;
}

*:focus {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #fbd601;
}

h2 {
	text-align: center;
	text-transform: uppercase;
	font-size: 2.5em;
	font-family: Kanit-ExtraBold, Times New Roman;
}
h3 {
    font-family: Kanit-ExtraBold, Times New Roman;
    text-transform: uppercase;
}

header {
	margin-top: 1vh;
	display: flex;
	background: #FFF;
}

header > div {
	flex: 1;
}

header > div:last-child {
	flex-grow: 2;
}

header nav {
	padding-top: 18px;
}

header a {
	flex: inherit;	
}

a {
	font-weight: normal;
}

header nav a {
	font-size: 1.2em;
	text-decoration: none;
	color: #0A0F0D;
	margin: 0 14px;
	transition: 0.2s ease;
	border-bottom: 1px solid #F6FCFC;
	display: inline-block;
	text-transform: uppercase;
}

header nav a:hover {
	border-bottom: 1px solid #f2cd00;
	color: #f2cd00;
	transform: scale(1.2)
}

.jumbotron > .container {
	position: relative;
}

.jumbotron > .container a.button {
	position: absolute;
	left: 30px;
	bottom: -70px;
	text-shadow: none;
}

.container {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

#logo {
	color: #0A0F0D;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 2em;
	font-family: Kanit-ExtraBold, Times New Roman;
	transition: 0.2s ease;
	outline: 0;
}

strong {
	font-family: Kanit-ExtraBold, Times New Roman;
}

#logo:hover {
	color: #dcb700;
}

#main-menu {
	text-align: right;
}

#headline {
	font-style: italic;
    margin-top: -10px;
	font-family: Kanit, Times New Roman;
}

.footnote {
	text-align: center;
	font-size: 1em;
	font-weight: 100;
}

main {
	min-height: 80vh;
	position: relative;
	color: #C4CBCA;
	box-shadow: 0 2px 6px 0px rgba(0,0,0,0.4);
}

main div {
	z-index: 1;
}

.main-background {
	background: url('./images/background.webp');
	background-size: cover;
	min-height: 80vh;
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 0;
	box-shadow: inset 0px 0px 250px 250px rgba(0,0,0,0.5);
	background-attachment: fixed;
}

.jumbotron {
	position: relative;
}

.jumbotron p {
	margin: 0;
	text-shadow: 2px 2px #000;
}

.jumbotron .content {
	color: #FFF;
	position: absolute; 
	margin-top: 15vh;
	padding: 20px 30px;
	font-size: 2em;
	font-family: Kanit, Times New Roman;
	font-weight: 100;
	width: 35vw;
}

.jumbotron .jumboline {
	font-size: 1.4em;
	font-family: Kanit-ExtraBold, Times New Roman;
	text-align: justify;
	margin: 0;
	color: #FAFAFA;
}

section {
	margin: 20px 0;
	padding-bottom: 20px;
	font-family: Kanit, Times New Roman;
}

.platforms {
	text-align: center;
	margin-bottom: 42px;
}

.platforms > div > div {
	background: #12A84B;
	border-radius: 4px;
	margin: 4px;
	display: inline-block;
	font-size: 1.6em;
	transition: 0.1s ease;
}

.platforms > div > div a {
	color: #FFF;
	text-decoration: none;
	display: inline-block;
	padding: 10px 20px;
	font-weight: 100;
}

.platforms > div > div:hover {
	transform: scale(1.03);
}

.platforms > div > div.csharp { background: #690081; }
.platforms > div > div.clang { background: #888; }
.platforms > div > div.aspnet { background: #0476b5; }
.platforms > div > div.php { background: #5467b6; }
.platforms > div > div.mariamysql { background: #c0765a; }
.platforms > div > div.mongo { background: #449a45; }
.platforms > div > div.python { background: blue; }
.platforms > div > div.html { background: #e44d26; }
.platforms > div > div.css { background: #2849ee; }
.platforms > div > div.jquery { background: #000; }
.platforms > div > div.react { background: #00a2bf; }
.platforms > div > div.assembly { background: #000; }
.platforms > div > div.js { background: #d13708; }
.platforms > div > div.sql { background: #336791; }
.platforms > div > div.googleapi { background: #3c7ff1; }
.platforms > div > div.gml { background: #000; }
.platforms > div > div.pawn { background: #997646; }
.platforms > div > div.bootstrap { background: #6a429b; }
.platforms > div > div.java { background: #3174b9; }
.platforms > div > div.android-native { background: #69913a; }
.platforms > div > div.unity { background: #000; }
.platforms > div > div.flutter { background: #2c87a3; }
.platforms > div > div.sass { background: #cd6799; }
.platforms > div > div.vagrant { background: #127eff; }
.platforms > div > div.docker { background: #2496ed; }
.platforms > div > div.wcag { background: #00438e; }
.platforms > div > div.yii2 { background: #629e29; }
.platforms > div > div.symfony { background: #000; }
.platforms > div > div.pear { background: #389618; }

section.moving-background {
	background-blend-mode: darken;
	min-height: 40vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-blend-mode: hue;
	color: #FFF;
	background-attachment: fixed;
}

section.moving-background > div > div {
	margin-left: 20vw;
	display: inline-block;
}

section.moving-background > div > div p {
	font-size: 1.5em;
}

section.moving-background h3{
	padding-top: 25px;
}

section.moving-background h2, section.moving-background h3 {
	color: #fbd601;
}

.business h2 {
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	text-align: left;
}

.contact-email-link {
	background: #222;
	padding: 1.2vw 2.6vw;
	border-radius: 24px;
	color: #fff;
	text-decoration: none;
	margin: 3vw 0;
	display: inline-block;
	transition: 0.2s ease transform, 0.2s ease box-shadow;
	box-shadow: 0 0 2vw 1.2vw rgba(0,0,0,0.1);

	stroke: #fbd601;
	stroke-dasharray: 150 480;
	stroke-dashoffset: 150;
	transition: 0.2s ease-in-out;
	font-weight: 100;
}

.contact-email-link:hover {
	background-color: #444;
	color: #fbd601;
	box-shadow: 0 0 2vw 0.9vw rgba(0,0,0,0.1);
	transform: scale(1.1);
	transition: 0.2s ease;
}


.glow-on-hover {
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 24px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #fbd601,  #222);
    position: absolute;
    top: -4px;
    left:-4px;
    background-size: 400%;
    z-index: -1;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 24px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 24px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

section.business {
	background-image: url('./images/background6.webp');
	background-color: rgba(0,0,0,0.3);
	margin: 0;
	background-size: 100vw;
	box-shadow: inset 56vw 0px 100px 0px #000;
	background-position-x: 30vw;
	background-position-y: 80%;
}
section.business > div > div {
	margin-right: 20vw;
	margin-left: 0;
}

section.tailored-software {
	margin-top: 0;
	background-color: rgba(0,0,0,0.3);
	background-image: url('./images/background5.webp');
	box-shadow: inset -56vw 0px 100px 0px #000;
}
section.service-development {
	background-color: rgba(0,0,0,0.6);
	background-image: url('./images/background4.webp');
	box-shadow: inset -56vw 0px 100px 0px #000;
	background-size: contain;
	background-position-x: -15vw;
	background-position-y: -20vh;
}
section.service-deployment {
	background-color: rgba(0,0,0,0.6);
	background-image: url('./images/background3.webp');
	box-shadow: inset -56vw 0px 100px 0px #000;
	background-size: contain;
}
section.service-maintenance {
	background-color: rgba(0,0,0,0.6);
	background-image: url('./images/background2.webp');
	box-shadow: inset 56vw 0px 100px 0px #000;
	background-position-x: 50vw;
	background-size: contain;
}

section.service-maintenance > div > div {
	margin-right: 20vw;
	margin-left: 0;
}

section.footer .container {
	display: flex;
}

section.footer {
	background: rgba(0,0,0,0.9);
	padding-top: 6vh;
	color: #FFF;
	font-size: 1.5em;
	margin-bottom: 0;
	padding-bottom: 60px;
}

section.footer > div > div {
	display: inline-block;
	vertical-align: top;
	flex: 1;
}

section.footer > div > div:last-child {
	text-align: right;
}

section.footer a {
	display: block;
	color: #fbd601;
	text-decoration: none;
	transition: 0.1s ease;
	font-weight: 100;
}

section.footer a:hover {
	transform: scale(1.03);
	font-weight: bold;
}

section.description p {
	font-size: 1.4em;
	text-align: center;
}

em {
	font-weight: 100;
	font-style: normal;
	color: #fbd601;
}

.page {
	display: none;
	min-height: 65vh;
	font-family: Kanit, Times New Roman;
}
.page.active {
	display: block;
	padding-top: 9vh;
}

.avatar {
	max-width: 200px;
	min-height: 112px;
	border-radius: 50%;
}

.page#contact {
	font-family: Kanit, Times New Roman;
}

.page#contact p {
	font-size: 1.6em;
	margin: 0 30px;
	text-align: center;
}
.page#contact label {
	font-size: 1.4em;
}
.text-center {
	text-align: center;
}

a.button {
	background: #ebebeb;
	color: #000;
	text-decoration: none;
	padding: 0px 10px;
	border-radius: 4px;
	text-transform: uppercase;
	font-weight: bold;
	transition: 0.1s ease;
	font-family: Kanit, Times New Roman;
	font-size: 0.9em;
}

a.button:hover {
	background: #fbd601;
}

.about-description, .portfolio-description {
	margin: 20px auto;
	vertical-align: top;
	display: flex;
}

.portfolio-description {
	margin: 50px auto;
}

.portfolio-description p {
	margin: 0;
	padding-left: 20px;
}

.portfolio-description > div:first-child {
	flex: 0.7;
}

.portfolio-description > div:last-child {
	flex: 1.3;
}

.portfolio-description img {
	width: 100%;
}

.about-description img {
	flex: 2;
}

.about-description p {
	flex: 0.8;
	margin: 0;
	padding-left: 20px;
}

.company-description p {
	text-align: justify;
	text-justify: inter-word;
	width: 100%;
	flex: none;
	display: block;
	padding: 0;
}

.page#services-and-pricing > .container > p {
	font-size: 1.4em;
	text-align: center;
	margin: 15vh 0;
}

.page#services-and-pricing h3 {
	font-size: 2em;
}

.page#services-and-pricing section {
	margin: 0;
}

.portfolio-description strong {
	font-size: 1.6em;
}

a.button.contact-btn {
	background: #222;
    color: #fbd601;
}

a.button.contact-btn:hover {
	color: #FFF;
}

.header-container {
	z-index: 5;
	background: #FFF;
	height: 90px;
	width: 100%;
	transition: 0.2s ease;
	box-shadow: 1px 1px 0px rgba(0,0,0,0);
}

.header-container:not([data-scroll='10']) {
	position: fixed;
	box-shadow: 1px 1px 1px rgba(0,2,5,128)
}

#mobile-menu, .menu-items {
	display: none;
}

.menu-items {
	opacity: 0;
}

.menu-items.active {
	display: inline-block;
	position: absolute;
	background: #fff;
	right: 15px;
	top: 80px;
	padding: 20px 20px;
	box-shadow: 1px 7px 7px rgba(128,128,128,0.5);
	opacity: 1;
	transition: 0.2s ease;
}

.menu-items a {
	display: block;
}

form {
	padding-right: 20px;
}

.language-picker {
	display: inline-block;
}

.language-picker .language-option {
	opacity: 0.5;
	cursor: pointer;
}
.language-picker .language-option.active,
.language-picker .language-option:hover {
	opacity: 1;
}

.language-picker .language-option:hover {
	text-decoration: underline;
}

@media only screen and (max-width: 1545px)  {
	.jumbotron .content {
		width: 40vw;
	}
	section.footer {
		padding-bottom: 90px;
	}
	section.business > div > div {
		margin-right: 30vw;
	} 
	section.moving-background.service-development > div > div, 
	section.moving-background.service-deployment > div > div
	{
		margin-left: 30vw;
	}
	section.moving-background.business > div > div,
	section.moving-background.service-maintenance > div > div	{
		margin-right: 30vw;
	}
}

@media only screen and (max-width: 1372px)  {
	.jumbotron .content {
		width: 50vw;
	}
	section.business > div > div {
		margin-right: 35vw;
	} 
	section.moving-background.service-development > div > div, 
	section.moving-background.service-deployment > div > div
	{
		margin-left: 40vw;
	}
	section.moving-background.business > div > div,
	section.moving-background.service-maintenance > div > div	{
		margin-right: 40vw;
	}
}

@media only screen and (max-width: 1200px)  {
	.jumbotron .content {
		width: 50vw;
	} 
	section.moving-background.service-development > div > div, 
	section.moving-background.service-deployment > div > div
	{
		margin-left: 50vw;
	}
	section.moving-background.business > div > div,
	section.moving-background.service-maintenance > div > div	{
		margin-right: 50vw;
	}

	.business h2 {
		background: transparent;
	}
}

@media only screen and (max-width: 1200px)  {
	section.business {
		background-position-y: 10vh;
		background-size: cover;
	}
}
@media only screen and (max-width: 1000px)  {
	.container {
		padding: 0 0px;
		width: 100%;
	}
	
	.container header {
		background: #fff;
	}
	
	section.service-development {
		background-position-x: -35vw;
		background-position-y: 0vh;
	}
	section.service-maintenance, 
	section.service-deployment,
	section.business {
		background-size: cover;
	}
	
	section.business {
		background-position-x: 20vw;
	}
	section.service-maintenance {
		background-position-x: 40vw;
	}
	
	.jumbotron .content {
		width: 70vw;
	}
	
	header > div:first-child {
		padding-left: 18px;
	}
	
	.platforms br {
		display: none;
	}
}

@media only screen and (max-width: 860px)  {
	.page p, .page h1, .page h2, .page h3 {
		padding: 0 20px;
	}

	.contact-email-link {
		font-size: 4vw;
	}

	.jumbotron p { padding: 0; }

	.about-description {
		display: block;
	}

	.about-description img {
		margin: 0 auto;
		display: block;
	}

	section.service-development {
		background-size: cover;	
	}
	
	section.service-maintenance {
		background-position-x: 30vw;
		background-position-y: 12vh;
	}

	.language-picker {
		margin: 14px;
	}
	
	#main-menu {
		display: none;
	}
	#mobile-menu {
		display: inline-block;
	}
	#mobile-menu i.fa-bars {
		color: #000;
		font-size: 2em;
		right: 30px;
		position: absolute;
		cursor: pointer;
		display: inline-block;
	}
	
	header > div:last-child {
		flex-grow: 1;
	}
}

@media only screen and (max-width: 800px)  {
	section.service-maintenance {
		background-position-x: 30vw;
		background-position-y: 12vh;
	}
	
	.jumbotron .content {
		width: 95%;
	}
	
	.moving-background {
		box-shadow: none !important;
		background-color: rgba(0,0,0,0.9) !important;
	}
	
	section.moving-background > div > div {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}
	section.footer > div > div {
		padding: 10px;
	}
	section.footer {
		padding-bottom: 110px;
	}
	
	section.moving-background > div > div h2,
	section.moving-background > div > div h3,
	section.moving-background > div > div p	{
		padding: 0 20px;
	}
	
	header > div:first-child {
		padding: 0 20px;
	}
	
	#portfolio > div > p {
		padding: 0 20px;
	}
	
	#about p {
		padding: 0 20px;
		width: 90%;
	}

	header > div:first-child {
		flex-grow: 2;
	}
}

@media only screen and (max-width: 515px)  {
	.jumbotron .jumboline {
		font-size: 1.7em;
	}
	
	.contact-email-link {
		font-size: 4.5vw;
	}
	.jumbotron .content {
		font-size: 1.2em;
		width: 87%;
	}
	
	header > div:first-child {
		flex-grow: 3;
	}
	
	#logo {
		font-size: 1.6em;
	}
	
	#headline {
		font-size: 0.8em;
	}
	
	#mobile-menu i.fa-bars {
		font-size: 1.5em;
	}
	
	.header-container {
		height: 75px;
	}
	
	h2 {
		font-size: 1.9em;
	}
	
	.platforms > div > div a {
		padding: 5px 10px;
	}
	
	section.moving-background > div > div p, 
	section.description p {
		font-size: 1.3em;
	}
	
	section.footer > div > div {
		padding: 0;
	}
	
	.about-description, .portfolio-description {
		display: block;
	}
	
	form {
		padding: 20px;
	}
	
	.platforms > div > div {
		font-size: 1.1em;
	}
	section.footer {
		font-size: 1em;
		height: auto;
	}
	section.footer .container {
		display: block;
	}
	
	section.footer a {
		font-size: 1.5em;
		text-align: center;
	}
	
	section.footer > div > div:last-child > p > span {
		font-size: 1.8em;
		width: 100%;
		text-align: center;
		display: inline-block;
	}
	
	section.footer > div > div {
		width: 100%;
	}
	a.button.contact-btn {
		white-space: nowrap;
	}
}

@media only screen and (max-width: 350px)  {
	#logo {
		margin-top: 12px;
		display: inline-block;
		font-size: 1.4em;
	}
	#headline {
		display: none;
	}
}