@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

body {
    font-family: 'Noto Serif JP', serif;
    font-size: 15px;
    font-weight: 400;
    color: #888;
    line-height: 30px;
    text-align: left;
	letter-spacing:1px;
	background: url("../img/backgrounds/background.jpg") top center no-repeat;
	background-size: 100%;
	overflow-x: hidden;
}

strong { font-weight: 600; }

a, a:hover, a:focus { color: #BF9157; text-decoration: none; transition: all .3s; }

h1, h2 {
	margin-top: 10px;
	font-size: 38px;
    font-weight: 300;
    color: #555;
    line-height: 50px;
    font-style: italic;
}

h3 {
	font-size: 22px;
    font-weight: 300;
    color: #555;
    line-height: 30px;
    font-style: italic;
}

img { max-width: 100%; }



/*----more 動態------*/

.link {
    cursor: pointer;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	letter-spacing: normal;
    font-size: 15px;
    position: relative;
    white-space: nowrap;
    color: #BF9157;
	width: 180px;
    height: 7px;
	padding-top: 20px;
	margin: 0 0 0 130px; 
	border-bottom: 1px solid #BF9157;
}


.link a {position: absolute; top:-10px;}

.link::after {
	content: '';
    position: absolute;
    width: 23px;
    height: 1px;
    background: currentColor;
    top: 14px;
    right: -1px;
	border-bottom: 1px solid #BF9157;
	transform:rotate(30deg);
}

.link::before {
    content: '';
	position: absolute;
    width: 90px;
    height: 7px;
    background: currentColor;
    top: 17px;
    left: 0;
    pointer-events: none;
	border-bottom: 6px solid #BF9157;
    /* show by default */
}



.link--metis::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
    transition: transform 0.3s;
}

.link--metis:hover::before {
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
}

.team-container .link::before, .team-container .link::after,
.team-container .link {border-color: #7F5128;}
.team-container .link a, .team-container .link {color: #7F5128;}

/*----menuBar------*/
.menubar{
	position:fixed;
	top:60px;
	right:60px;
	z-index:10;
}


/*----copyright------*/
.copyright {
	font-family: 'JosefinSans',sans-serif;
	font-weight: 300;
	color:#D4D4D4;
	font-size:11px;
	width:20px;
	line-height:20px;
	position:fixed;
	text-align:center;
	height:100vh;
	z-index:99;
	bottom:0;right:30px;
	-ms-writing-mode:tb-rl;
	writing-mode:vertical-rl;	
}

/*.copyright{bottom:0;right:30px;transform:rotate(90deg);transform-origin:right center;}*/




@media (max-width:1024px){
	.copyright{display:none}
	.bottom-copyright{display: block;}
}
/*
@media (min-width:1023px){
	.bottom-copyright{display: none;}
}
*/


/*----直排字------*/
.verticalheading {
	height:auto;
	display: inherit;
	padding-top:30px; 
	height: 150px;
	width:100px;
	z-index: 999;
}

.verticalheading_en {
	font-family: 'JosefinSans',sans-serif;
	font-weight: 200;
	font-size:11px;
	color:#947C52;
	letter-spacing:.1em;
	line-height:14px;
	margin-left: 7px;
	margin-top: 2px;
	float: right;
}

.verticalheading_tw {
	font-feature-settings:normal;
	font-family: 'Noto Serif JP', serif;
	font-size:50px;
	font-weight:700;
	letter-spacing:0.1em;
	line-height:48px;
	color:#341500;
	float: right;
}


.verticalheading_tw,.verticalheading_en {
	display:block;white-space:nowrap;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;
}

.vertical_text {
	font-family: 'Noto Serif JP', serif;
	writing-mode: vertical-rl;
	text-align: left;
	color:#341500;
	line-height: 48px;
	height: 350px;
}

::-moz-selection { background: #ff8a38; color: #fff; text-shadow: none; }
::selection { background: #ff8a38; color: #fff; text-shadow: none; }

:root {

    /* color-1(#F9A828)
     * color-2(#07617D)
     */
    --color-1 : hsla(37, 95%, 57%, 1);
    --color-2 : hsla(194, 89%, 26%, 1);

    /* theme color variations
     */
    --color-1-lighter : hsla(37, 95%, 77%, 1);
    --color-1-light   : hsla(37, 95%, 67%, 1);
    --color-1-dark    : hsla(37, 95%, 47%, 1);
    --color-1-darker  : hsla(37, 95%, 37%, 1);
    --color-2-lighter : hsla(194, 89%, 46%, 1);
    --color-2-light   : hsla(194, 89%, 36%, 1);
    --color-2-dark    : hsla(194, 89%, 16%, 1);
    --color-2-darker  : hsla(194, 89%, 10%, 1);

    /* feedback colors
     * color-error(#ffd1d2), color-success(#c8e675), 
     * color-info(#d7ecfb), color-notice(#fff099)
     */
    --color-error                  : hsla(359, 100%, 91%, 1);
    --color-success                : hsla(76, 69%, 68%, 1);
    --color-info                   : hsla(205, 82%, 91%, 1);
    --color-notice                 : hsla(51, 100%, 80%, 1);
    --color-error-content          : hsla(359, 50%, 50%, 1);
    --color-success-content        : hsla(76, 29%, 28%, 1);
    --color-info-content           : hsla(205, 32%, 31%, 1);
    --color-notice-content         : hsla(51, 30%, 30%, 1);

    /* shades 
     * generated using 
     * Tint & Shade Generator 
     * (https://maketintsandshades.com/)
     */
    --color-black                  : #000000;
    --color-gray-19                : #161616;
    --color-gray-18                : #2c2c2c;
    --color-gray-17                : #424342;
    --color-gray-16                : #585958;
    --color-gray-15                : #6e6f6f;
    --color-gray-14                : #838585;
    --color-gray-13                : #999b9b;
    --color-gray-12                : #afb2b1;
    --color-gray-11                : #c5c8c7;
    --color-gray-10                : #dbdedd;
    --color-gray-9                 : #dfe1e0;
    --color-gray-8                 : #e2e5e4;
    --color-gray-7                 : #e6e8e7;
    --color-gray-6                 : #e9ebeb;
    --color-gray-5                 : #edefee;
    --color-gray-4                 : #f1f2f1;
    --color-gray-3                 : #f4f5f5;
    --color-gray-2                 : #f8f8f8;
    --color-gray-1                 : #fbfcfc;
    --color-white                  : #ffffff;

    /* text
     */
    --color-text                   : var(--color-gray-19);
    --color-text-dark              : var(--color-black);
    --color-text-light             : var(--color-gray-13);
    --color-placeholder            : var(--color-gray-13);

    /* buttons
     */
    --color-btn                    : var(--color-gray-9);
    --color-btn-text               : var(--color-black);
    --color-btn-hover              : var(--color-gray-11);
    --color-btn-hover-text         : var(--color-black);
    --color-btn-primary            : var(--color-1);
    --color-btn-primary-text       : var(--color-black);
    --color-btn-primary-hover      : var(--color-1-dark);
    --color-btn-primary-hover-text : var(--color-black);
    --color-btn-stroke             : var(--color-black);
    --color-btn-stroke-text        : var(--color-black);
    --color-btn-stroke-hover       : var(--color-black);
    --color-btn-stroke-hover-text  : var(--color-white);

    /* preloader
     */
    --color-preloader-bg           : var(--color-gray-19);
    --color-loader                 : var(--color-1);
    --color-loader-light           : rgba(255, 255, 255, 0.1);

    /* others
     */
    --color-body                   : white;
    --color-border                 : rgba(0, 0, 0, .08);
    --border-radius                : 3px;
}

/* ------------------------------------------------------------------- 
 * ## spacing and typescale
 * ------------------------------------------------------------------- */
:root {

    /* spacing
     * base font size: 18px 
     * vertical space unit : 32px
     */
    --base-size        : 62.5%;
    --multiplier       : 1;
    --base-font-size   : calc(1.8rem * var(--multiplier));
    --space            : calc(3.2rem * var(--multiplier));

    /* vertical spacing 
     */
    --vspace-0_125     : calc(0.125 * var(--space));
    --vspace-0_25      : calc(0.25 * var(--space));
    --vspace-0_375     : calc(0.375 * var(--space));
    --vspace-0_5       : calc(0.5 * var(--space));
    --vspace-0_625     : calc(0.625 * var(--space));
    --vspace-0_75      : calc(0.75 * var(--space));
    --vspace-0_875     : calc(0.875 * var(--space));
    --vspace-1         : calc(var(--space));
    --vspace-1_25      : calc(1.25 * var(--space));
    --vspace-1_5       : calc(1.5 * var(--space));
    --vspace-1_75      : calc(1.75 * var(--space));
    --vspace-2         : calc(2 * var(--space));
    --vspace-2_5       : calc(2.5 * var(--space));
    --vspace-3         : calc(3 * var(--space));
    --vspace-3_5       : calc(3.5 * var(--space));
    --vspace-4         : calc(4 * var(--space));
    --vspace-4_5       : calc(4.5 * var(--space));
    --vspace-5         : calc(5 * var(--space));
    --vspace-5_5       : calc(5.5 * var(--space));
    --vspace-6         : calc(6 * var(--space));

    /* type scale
     * ratio 1         :2 | base: 18px
     * -------------------------------------------------------
     *
     * --text-display-3 = (77.40px)
     * --text-display-2 = (64.50px)
     * --text-display-1 = (53.75px)
     * --text-xxxl      = (44.79px)
     * --text-xxl       = (37.32px)
     * --text-xl        = (31.10px)
     * --text-lg        = (25.92px)
     * --text-md        = (21.60px)
     * --text-size      = (18.00px) BASE
     * --text-sm        = (15.00px)
     * --text-xs        = (12.50px)
     *
     * ---------------------------------------------------------
     */
    --text-scale-ratio : 1.2;
    --text-size        : var(--base-font-size);
    --text-xs          : calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm          : calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md          : calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-lg          : calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl          : calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl         : calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl        : calc(var(--text-xxl) * var(--text-scale-ratio));
    --text-display-1   : calc(var(--text-xxxl) * var(--text-scale-ratio));
    --text-display-2   : calc(var(--text-display-1) * var(--text-scale-ratio));
    --text-display-3   : calc(var(--text-display-2) * var(--text-scale-ratio));

    /* default button height
     */
    --vspace-btn       : var(--vspace-2);
}



/* ===================================================================
 * # PRELOADER */

#preloader {
    position        : fixed;
    display         : flex;
    flex-flow       : row wrap;
    justify-content : center;
    align-items     : center;
    background      : var(--color-preloader-bg);
    z-index         : 500;
    height          : 100vh;
    width           : 100%;
    opacity         : 1;
}

#loader {
    width             : var(--vspace-2);
    height            : var(--vspace-2);
    padding           : 0;
    background-color  : var(--color-loader);
    border-radius     : 100%;
    -webkit-animation : sk-scaleout 1.0s infinite ease-in-out;
    animation         : sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform : scale(0);
        transform         : scale(0);
    }

    100% {
        -webkit-transform : scale(1);
        transform         : scale(1);
        opacity           : 0;
    }
}

@keyframes sk-scaleout {
    0% {
        transform : scale(0);
    }

    100% {
        transform : scale(1);
        opacity   : 0;
    }
}

 /* # PRELOADER 
 ===================================================================*/


/* ===================================================================
 * # SITE HEADER
 *
 *
 * ------------------------------------------------------------------- */

/* --------------------------------------------------------------------
 * ## logo
 * -------------------------------------------------------------------- */
.s-header__logo {
    z-index  : 102;
    position : fixed;
    top      : 3.2rem;
    left     : 2.8rem;
}

.s-header__logo a {
    display : block;
    margin  : 0;
    padding : 0;
    outline : 0;
    border  : none;
}

.s-header__logo img {
    width          : 60px;
    margin         : 0;
    vertical-align : bottom;
}

/* ------------------------------------------------------------------- 
 * ## menu toggle
 * ------------------------------------------------------------------- */
/*
.s-header__menu-toggle {
    --menu-toggle-height : 4.2rem;

    z-index              : 102;
    padding-right        : calc(var(--menu-toggle-height) + .2rem);
    padding-left         : 1.2rem;
    transition           : all 0.3s ease-in-out;
    position             : fixed;
    top                  : 2.8rem;
    right                : 2.8rem;
}

.s-header__menu-toggle.opaque {
    background-color : black;
}


.s-header__menu-icon {
    display          : block;
    height           : 1px;
    width            : 2.4rem;
    background-color : #BF9157;
    position         : absolute;
    top              : 2rem;
    right            : .9rem;
    margin-top       : -1px;
}

.s-header__menu-icon::before,
.s-header__menu-icon::after {
    content          : '';
    width            : 100%;
    height           : 100%;
    background-color : inherit;
    position         : absolute;
    left             : 0;
}

.s-header__menu-icon::before {
    top : -0.7rem;
}

.s-header__menu-icon::after {
    bottom : -0.7rem;
}

/* --------------------------------------------------------------------
 * ## off-canvas menu
 * -------------------------------------------------------------------- */
.s-header__nav {
    z-index                    : 200;
    background                 : #0C0C0C;
	opacity                    : 0.7;
    color                      : rgba(255, 255, 255, 0.25);
    font-family                : var(--font-2);
    font-size                  : 1.5rem;
    line-height                : 2.8rem;
    padding                    : var(--vspace-1_25) var(--vspace-1);
    height                     : 100%;
    width                      : 300px;
    transform                  : translateX(100%);
    overflow-y                 : auto;
    transition-property        : transform;
    transition-duration        : 0.4s;
    transition-timing-function : cubic-bezier(0.215, 0.61, 0.355, 1);
    position                   : fixed;
    right                      : 0;
    top                        : 0;
}

.s-header__nav a,
.s-header__nav .text-highlight {
    color : rgba(255, 255, 255, 0.5);
}

.s-header__nav a:focus,
.s-header__nav a:hover {
    color : white;
}

.s-header__nav h3 {
    margin-top    : 0;
    font-weight   : 700;
    font-size     : var(--text-md);
    line-height   : 1.5rem;
    color         : white;
    margin-bottom : var(--vspace-1_5);
}

.s-header__nav-list {
    list-style    : none;
    margin-left   : 0;
    margin-bottom : var(--vspace-1_5);
    font-family   : var(--font-2);
    font-size     : 1.2rem;
    line-height   : 1;
}

.s-header__nav-list li {
    padding-left : 0;
    border-top   : 1px solid rgba(255, 255, 255, 0.025);
}

.s-header__nav-list li:last-child {
    border-bottom : 1px solid rgba(255, 255, 255, 0.025);
}

.s-header__nav-list li a {
    display : block;
    padding : var(--vspace-0_5) 0;
}

.s-header__nav-close-btn {
    display          : block;
    height           : 3rem;
    width            : 3rem;
    border-radius    : 3px;
    background-color : rgba(255, 255, 255, 0.05);
    border-radius    : 50%;
    font             : 0/0 a;
    text-shadow      : none;
    color            : transparent;
    position         : absolute;
    top              : var(--vspace-1_25);
    right            : var(--vspace-1);
}

.s-header__nav-close-btn span::before,
.s-header__nav-close-btn span::after {
    content          : "";
    display          : block;
    height           : 2px;
    width            : 12px;
    background-color : white;
    margin-top       : -1px;
    position         : absolute;
    top              : 50%;
    left             : 9px;
}

.s-header__nav-close-btn span::before {
    transform : rotate(-45deg);
}

.s-header__nav-close-btn span::after {
    transform : rotate(45deg);
}

/* menu is open 
 */
.menu-is-open .s-header__nav {
    transform                  : translateX(0);
    visibility                 : visible;
    -webkit-overflow-scrolling : touch;
}

/* --------------------------------------------------------------------
 * ## header social
 * -------------------------------------------------------------------- */
.s-header__social {
    list-style : none;
    display    : flex;
    margin     : 0;
}

.s-header__social li {
    padding-left : 0;
    margin-right : 1rem;
    line-height  : 1;
}

.s-header__social li:last-child {
    margin-right : 0;
}

.s-header__social svg {
    height : 2rem;
    width  : 2rem;
}

.s-header__social svg path {
    fill       : rgba(255, 255, 255, 0.15);
    transition : all 0.3s ease-in-out;
}

.s-header__social a:focus svg path,
.s-header__social a:hover svg path {
    fill : white;
}


/* misc helper classes
 */
.u-screen-reader-text {
    clip      : rect(1px, 1px, 1px, 1px);
    clip-path : inset(70%);
    height    : 1px;
    width     : 1px;
    margin    : -1px;
    overflow  : hidden;
    padding   : 0;
    border    : 0;
    position  : absolute;
    word-wrap : normal !important;
}

.u-clearfix:after {
    content : "";
    display : table;
    clear   : both;
}

.u-hidden {
    display : none;
}

.u-invisible {
    visibility : hidden;
}

.u-antialiased {
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
}

.u-overflow-hidden {
    overflow : hidden;
}

.u-remove-top {
    margin-top : 0;
}

.u-remove-bottom {
    margin-bottom : 0;
}

.u-add-half-bottom {
    margin-bottom : var(--vspace-0_5);
}

.u-add-bottom {
    margin-bottom : var(--vspace-1);
}

.u-no-border {
    border : none;
}

.u-fullwidth {
    width : 100%;
}

.u-pull-left {
    float : left;
}

.u-pull-right {
    float : right;
}


/***** General style, all sections *****/

.section-container {
    margin: 0 auto;
    padding-bottom: 0px;
}


.section-description {
	margin-top: -60px; 
    padding-bottom: 10px;
}

.section-bottom-button {
	padding-top: 60px;
}

/***** 起點/Top content *****/

.top-content {
    padding: 13% 0 0 0;
	background-size: 100%;
	margin-bottom: 0;
}

.top-content .text, .top-content .vertical_text, 
.top-content .verticalheading .verticalheading_tw,
.top-content .verticalheading .verticalheading_en{
	color: #fff;
}


.top-content .section-description{ margin: -40px 30px 0 0;}
.top-content .verticalheading { margin-left:20px;}
.top-content .vertical_text {line-height: 30px;}


/***** 精彩作品/集樂靈魂 PLAY WITH SOUL *****/
.works-container{ 
	width: 100%;
	height:900px;
	position: absolute;
	top:1000px;
}

.works-container .verticalheading {
	margin-top: 18vh;
}
.works-container .section-description{
	height: 300px;
	margin: -80px 0 0 130px;
}

.works-container .link{ 
	margin: 0 0 0 130px; 
}

.work_img{ 
	width: 100%;
	height: 1000px;
	background: url("../img/backgrounds/work.png") right top no-repeat;
	background-size:65%; 
	position: absolute;
	right: 0;
	top:10vh;
}

.soul_icon{
	width:65%;
	height: 1000px;
	position: absolute;
	right: 0;
	top:0;
	padding:28% 0 0 22%;
}

.soul_icon img{
	width:13%;
	margin:0 2vw;
}

.triangle {
	z-index: -1;
	width: 100%;
	height: 100%;
    background: url(../img/backgrounds/gold_triangle.png) no-repeat;
	background-size:65%; 
	position: absolute;
	top:18vh;
	left:11vw;
}


.slash::after {
	content: "";
	position:absolute;
	top:70vh;
	left:8vh;
	z-index: -1;
	display          : block;
    height           : 1px;
    width            : 900px;
    background-color : #BF9157;
	transform:rotate(60deg) scale(0);
	animation: slash 2s ease-in-out;
	animation-fill-mode:forwards;
	animation-delay:5s;
}


@keyframes slash {
	0% {
		transform: rotateZ(60deg) scale(0);
	}

	50% {
		transform: rotateZ(60deg) scale(0.5);
	}

	100% {
		transform: rotateZ(60deg) scale(1);
	}
}




/***** 創辦緣起/集樂初心 ORIGINAL INTENTION *****/
.origin-container{
	background:url(../img/backgrounds/origin.jpg) top right fixed no-repeat;
	background-size: 100%;
	padding-top: 150px;
	margin-top: 100px;
	min-height: 1000px;
	position: absolute;
	top:1800px;
	width: 100%;
	height:100vh;
} 

.origin-container .section-description{
	margin-top: -110px;
	height: 370px;
	right:4%;
}

.origin-container .link{ 
	left:46%;
	margin-top: 30px;
}

.origin-container .verticalheading {
	top:5%;
}

.origin_img{
	background: url("../img/backgrounds/origian_img.png") left top no-repeat;
	background-size:100%;
	width:100%;
	height: 100%;
	position: absolute;
	top:0;
}

.origin_logo{
	background: url("../img/backgrounds/logoBg.png") left top no-repeat;
	background-size:100%;
	width:75%;
	min-height:1200px;
	position: absolute;
	left:-5vw;
	top:15vh;
}


/*****  匯流空間/集樂匯所 MY VENUE *****/
.myvenue-container{
	background: url("../img/backgrounds/myMenue.jpg") right 200px no-repeat;
	background-size: 100%;
	padding: 410px 0 0 80%;
	margin-top: 170px;
	position: absolute;
	top:2600px;
	width: 100%;
	height: 1300px;
	overflow: hidden;
}

.myvenue-container .verticalheading{
    margin-left:50px;
}

.myvenue-container .section-description{
    margin: -100px 0 0 10%;
}

.myvenue-container .vertical_text{
    color: #fff;
    height: 400px;
    padding-top: 0px;
}

.myvenue-container .link{
    color: #fff;
    border-bottom: 1px solid #fff;
    position: relative;
    left:-330px;
}

.myvenue-container .link a{
    color: #fff;
}

.myvenue-container .link::after {
	border-bottom: 1px solid #fff;
}

.myvenue-container .link::before {
	border-bottom: 6px solid #fff;
}




/***** 幕後團隊/集樂脈動 DRIVING FORCE *****/
.team-container{
	background: url("../img/backgrounds/parallelogram.jpg") -100px 200px no-repeat;
	background-size: 90%;
	padding: 200px 0 0 0;
	margin-top: 170px;
	position: absolute;
	top:3850px;
	width: 100%;
	height: 1000px;
	overflow: hidden;
}

.team-container .verticalheading {
	margin-top:100px;
	margin-left: 30px;
}

.team-container .verticalheading_en {color: #fff;}

.team-container .section-description{
	margin: -100px 0 0 10%;
}

.team-container .link{ 
	left:0;
	margin-top: 0;
}

.parall::after{
	content: "";
	position:absolute;
	z-index: 2;
	display          : block;
    height           : 750px;
    width            : 200px;
	transform: skewX(30deg);
	top:-15%;
	left:30vw;
	background: linear-gradient(to bottom right, #FFDE6A, #C58000); /* W3C */
	background: -moz-linear-gradient(top,  #FFDE6A 0%, #C58000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFDE6A), color-stop(100%,#C58000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #FFDE6A 0%,#C58000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #FFDE6A 0%,#C58000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #FFDE6A 0%,#C58000 100%); /* IE10+ */
	opacity: 0.7;
}

.team_img{
	width: 100%;
	height: 100%;
	background: url("../img/backgrounds/team.png") right top no-repeat;
	background-size:80vw; 
	position:absolute;
	right:-13%;
	top:10vh;
}


/*-- 合作聯繫/相遇集樂 ENCOUNTER --*/
.contact-container{
	background:#000 url("../img/backgrounds/contact.png") bottom center no-repeat;
	background-size: 100%;
	position: absolute;
	top:4950px;
	width: 100%;
	height:100%;
    padding-top: 100px;
}

.contact_img{
	background: url("../img/backgrounds/contact_triangle.png") top center no-repeat;
	background-size: 100%;
	width: 100%;
	height:567px;
	position:absolute;
	top:-40px;
	left:0;
}

.contact-container .verticalheading {
	position: absolute;
	top:30px;
	left:26%;
}

.contact-container .verticalheading_en, .contact-container .vertical_text
{color: #fff;}
.contact-container .section-description{
	margin: 7% 0 180px 20%;
	padding-bottom: 100px;
	width: 100%;
}
.contact-container .vertical_text {margin-top:35px;}


/***** Footer *****/

.footer-right{
	width: 40%;
	height: 300px;
	border-left: 1px solid #BF9157;
	margin:0 0 0 5%;
	padding:0 0 30px 60px;
	color:#fff;
	line-height: 1.5em;
}
.footer-right .en_font{
	font-family: 'JosefinSans',sans-serif;
	font-size: 13px;
	font-weight: 200;
}

.footer-social {
	padding-top: 20px;
	margin-left: -5px;
}

.footer-social a {
	display: inline-block;
	width: 50px;
	height: 60px;
	padding-top: 8px;
	margin: 0;
    font-size: 32px;
    color: #fff;
    line-height: 30px;
    text-align: center;
}
.footer-social a:hover, .footer-social a:focus { color: #BF9157; }

.footer-social a i { vertical-align: middle; }


.footer-social-X{
    background: url("../ico/x-logo.svg") center center no-repeat;
    position: relative;
    top:8px;
    left: 0;
    width: 30px;
    height: 30px;
    transition: 0.3s all ease-in-out;
}

.footer-social-X:hover{
    background: url("../ico/x-logo-on.svg") center center no-repeat;
    transition: 0.3s all ease-in-out;
}


.footer-copyright {
	margin-top: 25px;
	padding-top: 5%;
}

.footer-bottom {
	font-family: 'JosefinSans',sans-serif;
	font-size: 12px;
	font-weight: 200;
	margin-top: -100px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	opacity: 0.7;
	color:#fff;
	/*background:hsla(0, 0%, 0%, 0.3);*/
}

.footer-bottom a {
	font-size: 32px;
    color: #BF9157;
    line-height: 40px;
}

.footer-bottom a:hover, .footer-bottom a:focus { color: #fff;}