@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Noto+Sans+SC:wght@400;700&display=swap');

/* Font Style */

body, caption, span, h1, h2, h3, h4, h5, h6, a {

	color: #000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;  

}

:lang(en){

	font-family: 'Montserrat', sans-serif;

}

:lang(zh){

    font-family: 'Noto Sans SC', sans-serif;

}

p{

    font-weight: 300;

}

h1, h2, h3, h4, h5, h6{

    font-weight: 700;
    text-transform: uppercase;

}

a {

    font-weight: 300;

}

a, a:hover, a:focus {

    text-decoration: none;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;

}

/* Header Style */

header {

    z-index: 5;

}



/* Site Logo */

header .site-logo{

        z-index: 3;

}

img.custom-logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 350px;
}


/* widget style */

aside{
    position: relative;
    letter-spacing: 3px;

}

aside .bgimg {
    position:absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.icon-container img {
    max-width: 40%;
    max-height: 100%;
    margin: 5% auto 0 auto;
}

.content-wrapper {
    padding:5% 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.align-left{
    margin-right:auto;
}

.align-right{
    margin-left:auto;
}

.align-center{
    margin-left:auto;
    margin-right:auto;
}

@media only screen and (min-width: 768px) {

.home .content-wrapper {
    width: 70%;
    margin: 0% 10% 0 20%;
}

.ratio16-9{
    aspect-ratio: 16 / 9;
}

.ratio2-1{
    aspect-ratio: 2 / 1;
}

.ratio16-5{
    aspect-ratio: 16 / 5;
}

.ratio-auto{
    height:auto;
}

.thumb-container{
     aspect-ratio: 16 / 9;
}

.contactform-container {
    width: 70%;
    margin: 0% 10% 0 20%;
}

}

@media only screen and (max-width: 767px) {

p{

   font-size: small;

}

.content-wrapper {
    width: 90%;
    margin: auto;
}

.ratio16-9{
    aspect-ratio: 1 / 1;
}

.ratio2-1{
    aspect-ratio: 1 / 1;
}

.ratio16-5{
    aspect-ratio: 1 / 1;
}

.thumb-container{
     aspect-ratio: 16 / 5;
}

.contactform-container {
    width: 90%;
    margin: auto;
}

}

#contact-form{
    padding:10% 0;
}


#contact-form .bgimg {
    position: absolute;
    object-fit: cover;
    height: 100%;
    width: 100%;
    top:0;
}



textarea.wpcf7-form-control, input.wpcf7-form-control {
    width: 100%;
    margin: 0.5em 0;
    padding: 1em;
    max-height: 10em;
}

.wpcf7-submit {
    width: unset!important;
    padding: 0.5em!important;
    min-width: 200px;
}

.column_card img {
    max-height: 150px;
}