@charset "UTF-8";
/* CSS Document */
/* -------------------------------- 

GENERAL

-------------------------------- */
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html {
background-color: var(--orange);
}

body {
margin:0px auto;
width:100%;
overflow-y: scroll;
overflow-x: hidden !important;
background-color: var(--orange);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}

:root {
--black: #1d1d1b;
--orange: #f49b00;
--grey: #c6c6c5;
--white: #fff;
}

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

Helper Classes

-------------------------------- */
.mt15{
margin-top:15px;
}
.mt30{
margin-top:30px;
}
.mt60{
margin-top:60px;
}
.mt90{
margin-top:90px;
}
.mt120{
margin-top:120px;
}

.mb15{
margin-bottom:30px;
}
.mb30{
margin-bottom:30px;
}
.mb60{
margin-bottom:60px;
}
@media (max-width: 992px) {
.mt90{
margin-top:45px;
}
}
/* -------------------------------- 

Hyperlinks

-------------------------------- */
.link{
text-decoration: none;
color:var(--black);
}
.link:hover{
text-decoration: none;
color:var(--orange);
transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-webkit-transition: all 0.3s ease; 
-o-transition: all 0.3s ease;
}

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

Breakpoints

-------------------------------- */
@media (max-width: 1280px) {

}
@media (max-width: 1112px) {

}
@media (max-width: 1024px) {

}
@media (max-width: 992px) {

}
@media (max-width: 768px) {

}
@media (max-width: 576px) {

}
@media (max-width: 340px) {

}
/* -------------------------------- 

COLORS

-------------------------------- */
.black{
color:#1d1d1b;
}
.orange{
color:#f49b00;
}
.grey{
color:#c6c6c5;
}
.white{
color:#fff;
}


.bgblack{
background-color:#1d1d1b;
}
.bgorange{
background-color:#f49b00;
}
.bggrey{
background-color:#c6c6c5;
}
.bgwhite{
background-color:#fff;
}


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

TYPOGRAPHY

-------------------------------- */
h1 { 
font-family: 'Roboto Slab', serif;
font-weight: 400;
font-style: normal;
font-size: 20px; 
cursor: default;
line-height:1.3;
padding:0 auto;
margin:0 auto;
}
@media (min-width: 375px) { 
h1 {
font-size: calc(20px + (32 - 20) * ((100vw - 375px) / (1140 - 375))); 
}
}
@media (min-width: 1140px) { 
h1 {
font-size: 32px; 
}
}

h2 { 
font-family: 'Roboto Slab', serif;
font-weight: 600;
font-style: normal;
font-size: 20px; 
cursor: default;
line-height:1.3;
padding:0 auto;
margin:0 auto;
}
@media (min-width: 375px) { 
h2 {
font-size: calc(20px + (32 - 20) * ((100vw - 375px) / (1140 - 375))); 
}
}
@media (min-width: 1140px) { 
h2 {
font-size: 32px; 
}
}

p { 
font-family: 'Roboto Slab', serif;
font-weight: 400;
font-style: normal;
font-size: 20px; 
letter-spacing: 0px;
cursor:default;
line-height:1.3;
padding:0 auto;
margin:0 auto;
}
@media (min-width: 375px) { 
p {
font-size: calc(20px + (32 - 20) * ((100vw - 375px) / (1140 - 375))); 
}
}
@media (min-width: 1140px) { 
p{
font-size: 32px; 
}
}

.fw6{ 
font-weight: 600;
}
/* -------------------------------- 

Layout

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

.section {
max-width:100%;
min-height: 100vh;
margin:0px auto;
padding:0px auto;
position:relative;
}
.scrolltrigger{
max-width:48px;
height:auto;
position:absolute;
top:50%;
transform: translateY(-50%);
right:5%;
display:block;
}
.img_fluid{
max-width:100%;
height:auto;
}
#section_top {
border-bottom:solid 12px var(--black);
background-image: url("../img/sungong_wide_center.png"),url("../img/background.jpg");
background-repeat: no-repeat,no-repeat;
background-position: bottom center,center center;
background-size: 94% auto,cover;
}
@media (min-width: 576px) {
#section_top {
background-size: 540px auto,cover;
}
}

@media (min-width: 768px) {
#section_top {
background-size: 720px auto,cover;
}
}

@media (min-width: 992px) {
#section_top {
background-size: 960px auto,cover;
}
}

@media (min-width: 1200px) {
#section_top {
background-size: 1140px auto,cover;
}
}


#logo {
height:30px;
width:auto;
margin-bottom:20px;
}

#section_bottom {
border-bottom:solid 12px var(--black);
background-color:var(--grey);
}
#section_bottom_row {
min-height: 100vh;
padding:90px 0px 90px 0px;
}





@media (max-width: 1280px) {
.scrolltrigger{
right:2%;
}
}


@media (max-width: 1112px) {

}


@media (max-width: 992px) {
.scrolltrigger{
display:none;
}
}

@media (max-width: 767px) {
#logo {
height:auto;
width:75%;
margin-bottom:12px;
}
#section_bottom_row {
min-height: 100vh;
padding:45px 0px 45px 0px;
}
}
@media (max-width: 576px) {
.section {
min-height: 75vh;
}
}
@media (max-width: 340px) {

}




@media (max-width : 736px) and (orientation : landscape) {
.section {
min-height: 100vh;
}
#section_top {
background-size: 35% auto,cover;
}
}