/* 
Themes: ORIGIN OIL & GAS LTD
Author: Dev
Website: https://devbook.net
*/
* {padding: 0; margin: 0}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
body{
	background: #000;
	color: #fff;
	font-size: 14px; 
	font-family: 'Kanit', sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%; 
	position: relative;
}
/* General  */
a, a:hover, a:focus{color:#fff; text-decoration: none;}
a:hover{}
a:focus{outline:none}
h1, h2, h3, h4, h5, h6{
	font-family: 'Kanit', sans-serif;
	margin:0;
	padding:0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
}
textarea,
input,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
	-webkit-appearance: none!important;
	-moz-appearance: none!important;
	appearance: none!important;
}
textarea:focus, input:focus{outline: none}
*:focus {outline: none}
button,
input,
optgroup,
select,
textarea {
  font-size: 100%;
  margin: 0;
}
button {
	-webkit-appearance: none!important;
    -moz-appearance: none!important;
}
:hover, :active, :focus {-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}
.fs12 {font-size: 12px}
.fs14 {font-size: 14px}
.fs16 {font-size: 16px}
.fs20 {font-size: 20px}
.fs60 {font-size: 60px}
.fw300 {font-weight: 300}
.fw400 {font-weight: 400}
.fw500 {font-weight: 500}
.fw600 {font-weight: 600}
.fw700 {font-weight: 700}
.fw800 {font-weight: 800}
.lh-default {line-height: 1.7}
.lh-small {line-height: 1.5}
.lh-xsmall {line-height: 1.25}
.lh-base {line-height: 1}
.lh-nol {line-height: 0}
.black, .black a, a.black {color: #404041}
.black2, .black2 a, a.black2 {color: #434343}
.white, .white a, a.white {color: #FFF}
.bg-white {background: #FFF}
.bg-black {background: #1C1C1C}
.bg-grey {background: #cfcfcf}
.hoveropacity a:hover, a:hover.hoveropacity {opacity: filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.6; opacity:0.7;}
.minspasi {letter-spacing: -0.1rem}
.minspasibig {letter-spacing: -0.2rem}
.plusspasi {letter-spacing: 0.1rem}
.plusspasibig {letter-spacing: 0.2rem}
.capital {text-transform: uppercase}
.uk-ratio {position: relative; width: 100%}
.uk-ratio-1-1 {padding-top: 100%}
.uk-ratio-4-3 {padding-top: 75%}
.uk-ratio-8-5 {padding-top: 62.5%}
.uk-ratio-3-2 {padding-top: 66.66%}
.uk-ratio-16-9 {padding-top: 56.25%}
.uk-ratio-21-9 {padding-top: 42.8571%}
.loader {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:9999;
	opacity: 0.7;
	background:#000 url(../images/loader.gif) 50% 50% no-repeat;
}
.rotate {transform: rotate(-90deg);}

/* Header  */
.topmenu {
	padding-top: 54px;
	padding-bottom: 0;
	z-index: 999;
}
.scrolling {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
	background: #000;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.07);
	transition: all linear .1s;
}
.logo img {width: 240px}
.scrolling .logo img {width: 140px; transition: all linear .1s;}
.menu > * {margin-right: 32px}
.menu > *:last-child {margin-right: 0}

/* Top Section */
.top-section {padding-top: 40%; background-position: 50% 0%;}

/* About  */	
#about {
	padding: 120px 0;
	background:#FFF url(../images/bg-about.jpg);
	background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.logo-about {width: 235px; margin-bottom: 60px}
.about-origin {max-width: 500px}
#about p {margin-bottom: 16px;}

/* Contact  */
#contact{
	padding: 88px 0 210px 0;
	background:#FFF url(../images/bg-footer.jpg);
	background-position: bottom center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.origin-contact img {max-width: 156px; margin-bottom: 100px}
.block-contact {
	max-width: 460px;
	margin: 0 auto;
}
form, button, input {width: 100%}
input { 
	background: transparent; 
	color: #FFF;
	border: 1px solid #FFF !important; 
	-webkit-box-shadow: none !important;
	box-shadow: none !important; 
	margin-bottom: 12px;
	font-family: 'Kanit', sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%; 
	box-sizing: border-box;
}
#contact-form .form-control {
	font-size: 14px;
	font-weight: 500;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
#contact-form .form-control:focus, #contact-form .form-control:hover{
	border: 1px solid #cecece !important;
}
#contact-form input.form-control{
	padding: 12px 20px;
    vertical-align: middle;
}
.btn-send {
	background: #cecece;
	color: #434343;
	padding: 10px 36px;
	width: max-content;
	border: none;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	cursor: pointer;
	border-radius:10px;
	font-family: 'Kanit', sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%; 
}
.btn-send:hover {
	background: #434343;
	color: #fff;
}
.address {margin-top: 120px}
.theicon {margin-right: 12px}

/* Footer  */
#footer{
	background: rgba(0, 0, 0, 0.5);
	padding: 24px 0;
}
#footer p {margin-bottom: 0px!important; padding: 0}

@media (min-width:640px){.uk-flex-row\@s{flex-direction:row!important}.uk-flex-row-reverse\@s{flex-direction:row-reverse!important}.uk-flex-column\@s{flex-direction:column!important}.uk-flex-column-reverse\@s{flex-direction:column-reverse!important}.uk-flex-stretch\@s{align-items:stretch!important}.uk-flex-top\@s{align-items:flex-start!important}.uk-flex-middle\@s{align-items:center!important}.uk-flex-bottom\@s{align-items:flex-end!important}.uk-margin-remove-top\@s{margin-top:0!important}.uk-margin-remove-bottom\@s{margin-bottom:0!important}}@media (min-width:960px){.uk-flex-row\@m{flex-direction:row!important}.uk-flex-row-reverse\@m{flex-direction:row-reverse!important}.uk-flex-column\@m{flex-direction:column!important}.uk-flex-column-reverse\@m{flex-direction:column-reverse!important}.uk-flex-stretch\@m{align-items:stretch!important}.uk-flex-top\@m{align-items:flex-start!important}.uk-flex-middle\@m{align-items:center!important}.uk-flex-bottom\@m{align-items:flex-end!important}.uk-margin-remove-top\@m{margin-top:0!important}.uk-margin-remove-bottom\@m{margin-bottom:0!important}}@media (min-width:1200px){.uk-flex-row\@l{flex-direction:row!important}.uk-flex-row-reverse\@l{flex-direction:row-reverse!important}.uk-flex-column\@l{flex-direction:column!important}.uk-flex-column-reverse\@l{flex-direction:column-reverse!important}.uk-flex-stretch\@l{align-items:stretch!important}.uk-flex-top\@l{align-items:flex-start!important}.uk-flex-middle\@l{align-items:center!important}.uk-flex-bottom\@l{align-items:flex-end!important}.uk-margin-remove-top\@l{margin-top:0!important}.uk-margin-remove-bottom\@l{margin-bottom:0!important}}@media (min-width:1600px){.uk-flex-row\@xl{flex-direction:row!important}.uk-flex-row-reverse\@xl{flex-direction:row-reverse!important}.uk-flex-column\@xl{flex-direction:column!important}.uk-flex-column-reverse\@xl{flex-direction:column-reverse!important}.uk-flex-stretch\@xl{align-items:stretch!important}.uk-flex-top\@xl{align-items:flex-start!important}.uk-flex-middle\@xl{align-items:center!important}.uk-flex-bottom\@xl{align-items:flex-end!important}.uk-margin-remove-top\@xl{margin-top:0!important}.uk-margin-remove-bottom\@xl{margin-bottom:0!important}}

/* Start media screen */
@media screen and (max-width: 959px) {
	.topmenu {padding-top: 32px}
	.logo img {max-width: 180px}
	.top-section {padding-top: 70%}
	.fs60 {font-size: 54px}
	#about {padding: 120px 0}
	.logo-about {max-width: 200px; margin-bottom: 50px}
	.about-origin {max-width: 480px}
	#contact {padding: 80px 0 180px 0}
	#footer .bottomspace {margin-bottom: 12px !important}
}
@media (max-width: 639px) {
	.uk-container {padding-left: 24px; padding-right: 24px}
	.topmenu {padding-top: 14px}
	.logo img {max-width: 120px}
	.menu {margin-top: 12px}
	.top-section {padding-top: 76%}
	.fs60 {font-size: 42px; line-height: 42px}
	#about {padding: 60px 0}
	.logo-about {margin-bottom: 40px}
	#contact {padding: 80px 0 100px 0}
	.origin-contact img {margin-bottom: 60px}
	.block-contact {max-width: 320px}
}
@media screen and (max-width: 380px) {
	
}