@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;300;700&display=swap');


:root {
  --cassiopeia-color-primary: #18191B;
  --cassiopeia-color-link: #fff;
  --color-accent:#FFC700;
  --link-color: #fff;
  --link-color-rgb: 48, 99, 141;
  --cassiopeia-color-hover: #ffcc70;
  --link-hover-color: #954b56;
  --link-hover-color-rgb: 149, 75, 86;
  --font-size-default: 20px;
}




body{
	font-family: 'Kanit', sans-serif !important;
	font-weight: 100;
	font-size: var(--font-size-default);
	overflow-y: scroll; 
	background-color: #18191B !important;
	color: #fff;
	line-height: 29px !important;
}


body.site{
	padding: 0px;
	border-top: 0px !important;
}

/*body.wrapper-fluid .site-grid {
	grid-gap: 0 5em !important;
}*/


h1, h2, h3, h4, h5, h6, .site-title{
	font-family: "Kanit" !important;
}

h1{
	font-size:60px;
	font-weight: 100;
	line-height: 54px;
}

h2{
	font-size: 40px;
	font-weight: 100;
	margin-top: 60px;
	margin-bottom: 60px;
	line-height:32px;
	text-transform:uppercase;
}

h3{
	font-size: 30px;
	font-weight: 900;
	margin-top: 60px;
	margin-bottom: 60px;
}

h4{
	font-size: 40px;
	font-weight: 100;
	line-height: 36px;
	margin-top: 3px;
}

h5{
	font-size: 40px;
	font-weight: 100;
	margin-bottom: 20px;
	line-height: 36px;	
}
.font-smaller{
	font-size: 17px;
}

p{
	line-height:29px;
}

b, strong {
	font-weight: 900;
}

u{
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 6px;
}

a{
	color:var(--cassiopeia-color-link) !important;
	text-decoration: none !important;
}

a:hover{
	color:var(--cassiopeia-color-hover) !important;
}

li {
    line-height: 29px;
}



.container-fluid{
    padding: 0px;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.container-header {
	background-color:unset !important;
	background-image:none;
}

.introText{
	line-height:34px;
	font-size:26px
}

.homeStyle{
	background-color: #18191B;
}

.topMenu{
	padding-top: .5em !important;
	padding-bottom: .5em !important;
}


.container-nav .nav-collapse .nav a {
	font-size: var(--font-size-default);
	font-weight: 700;
	text-transform: uppercase;
	color: #ffffff;
}
.nav > li > a:hover{
	background: none;
	color: #FFC700;
} 

.header {
	padding-top: 1%;
}

.header .grid-child:nth-child(1) {
	width: fit-content;
	float: left;

}

.brand-logo img{
	max-width: unset !important;
}

.card {
   --card-border-color: #unset !important;
   --card-bg: unset !important;
   --card-color:#fff;
}

.container-nav .nav-collapse .nav .active a {
	color: #FFC700;
	background: none;
}


.container-nav{
	width: 60%;
	float: right;
	position: relative;
	z-index:1000;
    border-top: none;
    border-bottom: none;
	justify-content: end !important;
	padding-top: 0px !important;
}

.navigation .nav-collapse{
	float: right;
}

.moduletable.homeHello{
	background-color: #18191B;
	padding-top: 120px;
	padding-bottom: 80px;
	color: #ffffff;
	font-size: 30px;
	font-weight: 100;
	line-height: 36px;
	margin-bottom: 100px;
}


.homeHello .name{
	color: #FFC700;
}


.homeHello .hugeTextWhite{
	font-size: 80px;
	font-weight: 700;
	line-height: 63px;
	letter-spacing: 0px;
}

.homeHello .hugeTextYellow{
	font-size: 80px;
	font-weight: 100;
	color: #FFC700;
	letter-spacing: -5px;
}

.personImage{
	/*margin-top: -40px;*/
}

.ctaButtonYellow, .ctaButtonBlack, .ctaButtonWhite, .dj-simple-contact-form.style-3 .dj-simple-contact-form.button{
	background-color: #18191B;
    color: #FFC700;
    border-radius: 30px;
    border: 2px solid #FFC700;
    /*height: 40px !important;*/
    padding: 4px 40px 2px 40px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0px;
    text-align: center;
    width: 200px;
}
.ctaButtonYellow:hover{
	background-color: #FFC700;
	color:#18191B;
}

.ctaButtonYellow{
	float: left;
	margin-right: 40px;
	    width: auto;
}

.ctaButtonBlack{
	background-color: #18191B;
    color: #fff;
    border: 2px solid #fff;
	margin-top: 40px;
    width: 215px;
    padding-top: 12px !important;
}

.ctaButtonBlack a{
	color: #fff !important;
}
.ctaButtonBlack a:hover{
	color: #18191B !important;
}

.ctaButtonBlack:hover{
	background-color: #FFF;
	color:#18191B;
}

.ctaButtonWhite{
    border: 2px solid #fff;
    color:#fff;
    line-height: 36px;
    margin-top: 50px !important;
    width:fit-content;
    padding-bottom: 7px;
}

.ctaButtonWhite:hover{
    border: 2px solid #fff;
    background-color: #fff;
    color:#18191B;
}

.mod-languages{
	width: fit-content;
	padding-top: .6em;
	padding-bottom: .5em;
}

div.mod-languages ul li.lang-active {
	background-color: unset;
}

.dj-megamenu-modern li a.dj-up_a, .dj-megamenu-modern li a.dj-up_a > span {
	height: 48px !important;
}

.dj-simple-contact-form.style-3 .dj-simple-contact-form.button{
	background: #FFC700 !important;
    border-radius: 30px !important;
    border:none;
    color: #18191B !important;
    font-family: "Kanit" !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    height: 50px !important;
    line-height: 40px !important;
    padding: 0px 40px 0px 40px !important;
    width: auto !important;
}

.myResume{
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 0px;
	margin-top: 2px;
    padding-top: 6px;
}


.ctaButtons-desktop{
	margin-top: 50px;
	display: block;
}
.ctaButtons-mobile{
	margin-top: 50px;
	display: none;
}

.moduletable.homePortfolio{
	padding:80px 0px 0px 0px;
	background-color: #18191B;
	color: #fff;
	margin-top:-121px;
}
.moduletable.homePortfolio h4{
	padding-left: 60px;
	padding-bottom: 60px;
}

.moduletable.homePortfolio .media-box-container{
	border-radius: 0px;
}

.moduletable.homePortfolio .media-boxes-load-more-button, .moduletable.homePortfolio .media-boxes-no-more-entries{
	display: none;
}

.moduletable.subsectionPortfolio{
	margin-bottom:-121px;
}

.moduletable.subsectionPortfolio, .moduletable.subsectionSkillsTitle{
	background-color: #18191B;
	padding-left: 60px;
	padding-right: 60px;
	padding-bottom: 80px;
	color: #ffffff;
	font-size: 30px;
	font-weight: 100;
	line-height: 36px;
}


.moduletable.homeContact{
	background-color: #18191B;
/*	padding-left: 60px;
	padding-right: 60px;*/
	padding-bottom: 80px;
	color: #ffffff;
	font-size: 30px;
	font-weight: 100;
	line-height: 36px;
}
.moduletable.subsectionPortfolio, .moduletable.subsectionSkillsTitle{
	padding-top: 220px;
	position: relative;
	top: -121px;
}
.moduletable.subsectionPortfolio h4, .moduletable.subsectionSkillsTitle h4{
	margin-bottom: 150px;
}

.moduletable.subsectionPortfolio .row-fluid [class*="span"]{
	min-height: 0px;
}

.moduletable.homeSkills, .moduletable.subsectionSkills{
	background-color: #fff;
	padding: 0px 60px 80px 60px;
	color: #18191B;
	font-size: 20px;
	font-weight: 300;
	letter-spacing: -1px;
	line-height: 36px;
}

.moduletable.homeContact{
/*	padding: 1px 60px 80px 60px;*/
	font-size: 20px;
	font-weight: 100;
	width: -webkit-fill-available;
}

.homeContact{
	max-width:1920px;   
/*	margin-left: 4% !important;
    margin-right: 4% !important;*/
}

.footerContactData{
	text-align:left;
}

.footerContactData h2{
	margin-bottom:0px;
}

.footerMenu{
	text-align: right;
    margin-top: 0px;
    margin-right: 0px;
    right: 4%;
    width: 270px !important;
    bottom: 34px;
    position: absolute;
}

.dj-simple-contact-form-required-fields-info{
	display: none;
}

.dj-simple-contact-form.style-3 .inputbox, .dj-simple-contact-form.style-3 textarea{
	font-family: "Kanit" !important;
	font-size: 20px;
	font-weight: 100 !important;
	background-color: #2c2e31 !important;
	border:none !important;
}

.dj-megamenu-wrapper .dj-up_a:hover{
	color: #FFC700 !important;
}

.dj-megamenu-wrapper .dj-up_a.active{
	color: #FFC700 !important;
}

.dj-megamenu-wrapper .dj-up:nth-child(3) .title{
	    border-right: 1px solid #5d5d5d;
    padding-right: 22px;
}



.dj-megamenu-modern li a.dj-up_a {
	font-size: var(--font-size-default) !important;
    font-weight: 900;
    text-transform: uppercase;
    padding: 0px 12px !important;
}

ul.dj-mobile-dark li.dj-mobileitem>a {
	font-size: var(--font-size-default) !important;
    font-weight: 900;
    text-transform: uppercase;
}

ul.dj-mobile-dark li.dj-mobileitem .langSwitch{
	width: fit-content;
    font-weight: 300;
    padding: 8px 14px;
    margin: 12px;
    border-radius: 8px;
    background: #505050;
}

.dj-megamenu-offcanvas-dark .dj-mobile-open-btn{
	background:unset !important;
}

.moduletable.subsectionSkills{
	margin-top: -80px;
}


.moduletable.homeSkills h3, .moduletable.subsectionSkills h3{
	margin-bottom: 40px;
}

.moduletable.homeSkills h4, .moduletable.subsectionSkills h4{
	margin-bottom: 20px;
	margin-top: 40px;
}

.projectName{
	padding:0px 4% 20px 4%;
	width: auto;
}

.projectInfo{
	padding:20px 4% 80px 4%;
	display:flex;
	width: auto;	
}

.flexBox{
	width:auto !important;
}



.portfolioItem .row-fluid [class*="span"]{
}

.portfolioItem .row-fluid [class*="span"]:first-child{
	margin-left:0px;	
}

.projectInfoHeader{
	font-size:20px;
	font-weight:900;
	line-height:40px;
}
.projectInfoDescr{
	font-size:30px;
	font-weight:100;
}

.portfolio-header{
	margin-bottom:100px;
}

.portfolio-block{
	margin-top:100px;
	margin-bottom:100px;
}

.portfolio-block-title h2{
    margin-top: 80px;
    margin-bottom: 0px;
}

.portfolio-small-block{
	margin-top: 25px;
	margin-bottom: 25px;
}

.white-block{
	background-color: #fff;
	color: #18191B;
	padding-top: 0px;
	padding-bottom: 50px;
}

.full-width-element{
	width: 100%;
	margin-left: 0%;
}

.flex-boxy{
	display:flex;
}

.flex-boxy .flbox{
	order:2;
}

.moduletable.subsectionTopBanner .row-fluid .span4{
	margin-right:80px !important;
	width:auto;
}

/* ----------------- MEDIA BOXES styles ------------- */

.mfp-container, .media-box, .media-boxes-load-more-button, .media-boxes-filter, .media-boxes-drop-down-menu > li > a, .media-boxes-drop-down-header, .media-boxes-search{
	font-family: "Kanit";
}

.media-boxes-filter>li a{
	background:none;
	border: none;
	font-size: 20px;
	font-weight: 300;
	color: #808080 !important;
}

.media-boxes-filter>li a:hover{
	border: none;
	color: #FFC700 !important;
}

.media-boxes-filter>li a.selected{
	background:#2B2D30 !important;
	color: #ffffff;
	font-size: 20px;
	font-weight: 300;
	border: none;
	border-radius: 30px;
	padding-left: 20px;
	padding-right: 20px;
}

/* -------------------------------------- */

.footer{
	font-size: 16px;
	font-weight: 100;
	background-color: #18191b;
	background-image: unset;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
	color: #fff;
}

#content{
	min-height: 0px;
}

.moduletable.subsectionTopBanner{
    width: 100%;
    margin-top: 200px;
}



.body > .container-fluid > .topBanner{
	position: relative;
	/*top:-121px;*/
}

.moduletable.subsectionTopBanner img{
	width:100%;
}

.topHeader{
	position: relative;
    z-index: 3000;
}

.portfolioItem{

}

.portfolioItem img{
	width: 100%;
}

.fontsInfo img{
	width:auto;
}

.portfolioItem .row-fluid{
}

.hr-line{
	height: 1px;
	width: 100%;
	background: #464749;
}

.projectInfo2{
	padding:20px 4% 80px 4%;
}

.projectImage{
	text-align:center;
	padding-top:80px;
	padding-bottom:80px;
	color:#ffffff;
}

.projectImage .projectScrName{
	padding-left:4%;
	padding-left:4%;
	text-align:left;
}

.colorRect{
	width: 187px;
	height: 80px;
	padding-left: 20px;
	padding-top: 40px;
	color: #fff;
	font-weight: 900;
}
.colorFrame{
	border:1px solid #e0e0e0;
	color:#666;
}

.media-box-title{
	color:#fff;
}

#dj-megamenu99mobile{
	right:4%;
}

.fontsInfo .span12{
	margin-bottom:20px;
}

.faviconInfo {
	display:flex;
}

.projectScreen{
	color:#fff;
	text-align:center;
	padding:0px;
}

.projectScreenTitle{
	text-align:left;
}

.item-page{
	padding-top: 375px;
}

.item-page.about{
	padding-top: 140px;
}

.item-page.about h3{
	margin-bottom: 40px;
	line-height: 26px;
}

.item-page.about h2{
	margin-bottom: 40px;
	margin-top: 40px;
}

.item-page.about p{
	margin-bottom: 25px;
}

.item-page.about .myskills p{
	margin-bottom: 8px;
}

.item-page.about .font-smaller{
	color:#ccc;
	font-size: 20px;
}

.item-page.about .date-font{
	color:#8d8d8d;
}

.item-page.about .personImage img{
	/*border-radius: 400px;*/
}
.item-page.about .portfolio-header{
	align-items: center;
}

/*.about-logos{
	width:108.72% !important;
	margin-left:-4.4% !important;
}*/

.about-logos .brands-row{
	margin-bottom: 40px;
}

.about-logos img{

}

.about-logos img:hover{

}

.item-page.about .about-logos  h2 {
    margin-bottom: 60px;
    margin-top: 60px;
}

.img_caption{
	text-align: left !important;
	font-size: 40px;
	font-weight: 100;
	line-height: 65px;
	text-transform: uppercase;
	margin-bottom: 50px;
}

.back-to-top-link a{
	background:url(/images/backtotop.svg) no-repeat;
	width: 28px;
	height: 42px;
	display: block;
}

.back-to-top-link {
    float: right;
    margin-top: -70px;
    margin-right: 3px;
    background-color: #ffffff29;
    border: unset;
}

.dd-section img{
	float: left;
	margin-right: 20px;
}

.dd-section h5{
	float: left;
	line-height: 34px;
}

.dd-section-title{
	text-transform: uppercase;
	font-weight: 900;
	margin-bottom: 25px;
}

.plus-margin .row{
	margin-bottom: 50px;
}

.plus-margin img{
	max-width: 250px;
}

.accepted-app{
	border: 2px solid #ffcc00;
	border-radius: 10px;
	padding: 20px;
	margin: -20px;
}

.page-header{
	border: none;
/*	margin-top: 300px;
	margin-bottom: 100px;*/
}

.page-header h1{
	margin-top: 100px;
	margin-bottom: 50px;
	margin-left: 4%;
}



.blog-item h2{
	margin-bottom: 0px;
	margin-top: 0px;
	text-decoration: none;
}

.blog-item h2 a{
	text-decoration: none;	
}

.blog-item > p {
	margin-bottom: 50px;
}


.ctaButtonCenter{
	width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.flex-boxes{
	display: flex;
	gap:4%;
}

.flex-item{
	order: 3;
}

.portfolio-img img{
	margin-bottom: 4%;
}

@supports (display:grid) {
    .blog-items {
        grid-gap: 3em !important;
}

@media (max-width: 2100px) {
	.body > .container-fluid {
	    margin-left: 4% !important;
	    margin-right: 4% !important;
	}
}

@media (max-width: 1200px) {
	.ctaButtons-desktop{
		margin-top: 50px;
		display:none;
	}
	.ctaButtons-mobile{
		margin-top: 50px;
		display: block;
	}
	.ctaButtonYellow {
    	margin-right: 0px;
	}

	.ctaButtonYellow{
	    /*height: 40px !important;*/
	}
	.ctaButtonYellow.span6{
	    height: 50px !important;
	}

	.item-page.about {
	    padding-top: 40px;
	}

	.item-page.about .portfolio-header{
		align-items: flex-start;
	}
	
}

@media (max-width: 979px) {
	.ctaButtonYellow, .myResume{
		width: auto;
	}
	.languageSwitcher{
		display: none;
	}
}

@media (max-width: 768px) {
	.header .brand{
		text-align: left !important;
	}
}

@media (max-width: 767px) {

	h1{ font-size:36px; line-height: 36px; }
	
	h2{ 
		font-size: 30px; 
	    margin-top: 40px;
    	margin-bottom: 40px;
	}
	
	h3{	font-size: 25px; }
	
	h4{	font-size: 39px; line-height: 40px; margin-top: 2px;}

	.projectName h1{
		margin-bottom:0px !important;
	}
	
	.projectName h4{
		margin-top:2px;
	}


	.moduletable.homeSkills p, .moduletable.subsectionSkills p{
		margin-bottom: 20px;
		line-height: 24px;
	}

	.moduletable.homeSkills h3, .moduletable.subsectionSkills h3{
		margin-bottom: 40px;
	}

	.moduletable.homeSkills h4, .moduletable.subsectionSkills h4{
		margin-top: 60px !important;
	}

	.header{
	    padding-left: 0px;
	    padding-top: 26px;
	}

	.moduletable.subsectionTopBanner{
		top: 150px;
		margin-top: 0px;
	}

	.header .brand{
		text-align: left;
	}


	.container-nav .nav-collapse {
		position:fixed;
		right:4%;
	}
	.moduletable.homeHello{
/*		padding-left: 20px;
		padding-right: 20px;*/
		padding-top: 140px;
	}

	.homeHello .hugeTextWhite {
	    font-size: 48px;
	    line-height: 34px;
	}

	.homeHello .hugeTextYellow {
	    font-size: 48px;
	    letter-spacing: -3px;
	}

	.personImage{
		margin-top: 40px;
	}

	.moduletable.subsectionPortfolio, .moduletable.subsectionSkillsTitle, .moduletable.homeContact, .moduletable.homeSkills, .moduletable.subsectionSkills{
		padding-left: 20px;
		padding-right: 20px;
	}

	.moduletable.homePortfolio{
		padding-left: 0px
		padding-right:0px;
	}

	.moduletable.homePortfolio h4{
		padding-left: 20px;
		padding-bottom: 40px;
	}

	.dj-simple-contact-form.style-3 .dj-simple-contact-form.button{
		width: 100% !important;
	}

	.personData{
		margin-top: 80px;
	}
	
	.projectName{
		padding:40px 20px 0px 20px;
		display:inherit;
	}
	.faviconInfo {
		display:inherit;
	}
	
	.projectInfo{
		padding:20px 20px 40px 20px;
		display:inherit;
	}	
	
/*	.portfolioItem{
		float:left;
		margin-top:-64px !important;
	}*/
	
	.portfolioItem .row-fluid [class*="span"]{
		margin-left:0px;
		margin-bottom: 24px;
	}
	
	.moduletable.subsectionTopBanner .row-fluid .span4{
		width:inherit;
		margin-bottom:20px;
	}
	.row-fluid [class*="span"]{
		margin-left:inherit;
	}
	

	
	.flexBox{
		margin-bottom:20px !important;
		line-height:3px;
	}
	
	.projectInfoDescr{
		font-size:25px;
	}
	
	.projectInfo2 > .row-fluid > .span12 {
		float: left;
	}
	
	.pull-left.item-image{
		margin-right:0px !important;
	}
	.item-page {
		padding-top: 250px;
	}

	.img_caption{
		font-size: 30px;
	}
	.portfolio-block{
		margin-top:50px;
		margin-bottom:50px;
	}

	.about-logos .brands-row {
	    margin-bottom: 0px;
		margin-left:0%;
	}
	.about-logos .brands-row .span2{
		width: 46%;
		float: left;
		margin-bottom: 40px;
	}
	
	.about-logos .row-fluid.brands-row [class*="span"]:first-child{
		margin-left:inherit;
	}
	
	.white-block {
/*	    padding-left: 4%;
	    padding-right: 4%;
	    width: 92%;*/
	}
	.item-page.about .date-font{
		font-size: 18px; 
		color:#8d8d8d;
	}
	.experience-block .row-fluid{
		margin-bottom: 20px;	
	}

	.plus-margin img{
		max-width: 160px;
		margin-bottom: 20px;
	}

	.accepted-app {
	    padding: 4%;
	    margin: 0px;
	    width: 92%;
	}
	
	
	.item-page.about h2{
		margin-left:0%;
	}

}