/* * {
    border: solid 1px;
} */

.portfolio-link {
	height: 250px;
}

.carousel-inner .item {
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.carousel-inner img {
    width: 100%;
    margin: 0px !important;
    padding: 0px !important;
}
.timeline-body {
}
.exp-list {
	color: #777;
	margin: 0px;
    padding: 0px;
}
.exp-list li{
	list-style-type: disc;
    text-align: left;
    padding-top: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid #ddd;
}
.exp-list.right li{
    text-align: left;
}

#portfolio-image-1 {
    background: url('../img/projects/1/cover.jpg') center top no-repeat;
    background-color: #fff;
    background-size: auto 275px;
}

#portfolio-image-2 {
	background: url('../img/projects/2/cover.jpg') center center no-repeat;
    background-color: #fff;
    background-size: auto 380px;
}

#portfolio-image-3 {
    background: url('../img/projects/3/cover.jpg') center -160px no-repeat;
    background-color: #fff;
    background-size: auto 610px;
}

#portfolio-image-4 {
    background: url('../img/projects/4/cover.jpg') center center no-repeat;
    background-color: #f65e61;
    background-size: auto 250px;
}

#portfolio-image-5 {
    background: url('../img/projects/5/cover.jpg') center center no-repeat;
    background-color: #fff;
    background-size: auto 270px;
}

#portfolio-image-6 {
    background: url('../img/projects/6/cover.jpg') center -50px no-repeat;
    background-color: #fff;
    background-size: auto 700px;
}

#portfolio-image-7 {
    background: url('../img/projects/7/cover.jpg') right bottom no-repeat;
    background-color: #fff;
    background-size: auto 250px;
}

#portfolio-image-8 {
    background: url('../img/projects/8/cover.jpg') center center no-repeat;
    background-color: #fff;
    background-size: auto 380px;
}

#portfolio-image-9 {
    background: url('../img/projects/9/cover.jpg') center center no-repeat;
    background-color: #fff;
    background-size: auto 250px;
}

#product-event-1 {
    background: url('../img/projects/7/icb/cover.jpg') center center no-repeat;
    background-color: #fff;
    background-size: auto 250px;
}

#product-event-2 {
    background: url('../img/projects/7/saint-fi/cover.jpg') center top no-repeat;
    background-color: #fff;
    background-size: auto 350px;
}

#product-event-3 {
    background: url('../img/projects/7/youyi/cover.jpg') center center no-repeat;
    background-color: #fff;
    background-size: auto 250px;
}

#product-event-4 {
    background: url('../img/projects/7/6no/cover.jpg') center center no-repeat;
    background-color: #fff;
    background-size: auto 256px;
}

#product-event-5 {
    background: url('../img/projects/7/sunmoon/cover.jpg') right bottom no-repeat;
    background-color: #fff;
    background-size: auto 251px;
}

#product-event-6 {
    background: url('../img/projects/7/venus/cover.jpg') -175px top no-repeat;
    background-color: #fff;
    background-size: auto 250px;
}

#web-design-leacloud {
    background: url('../img/projects/1/leacloud/cover.jpg') center center no-repeat;
    background-color: #fff;
    background-size: auto 250px;
}

#web-design-1 {
    background: url('../img/projects/1/saint-fi/cover.jpg') center center no-repeat;
    background-color: #fff;
    background-size: auto 250px;
}

#web-design-2 {
    background: url('../img/projects/1/6no/cover.jpg') center top no-repeat;
    background-color: #fff;
    background-size: auto 250px;
}

#web-design-3 {
    background: url('../img/projects/1/sunmoon/cover.jpg') center top no-repeat;
    background-color: #fff;
    background-size: auto 250px;
}

#web-design-4 {
    background: url('../img/projects/1/venus/cover.jpg') center top no-repeat;
    background-color: #fff;
    background-size: auto 250px;
}

#web-design-5 {
    background: url('../img/projects/1/forrestselect/cover.jpg') center top no-repeat;
    background-color: #fff;
    background-size: auto 275px;
}

#web-design-6 {
    background: url('../img/projects/1/pscoffee/cover.jpg') center top no-repeat;
    background-color: #fff;
    background-size: auto 265px;
}

#canvas_handler {
	    position: absolute;
}

header .container {
	position: relative;
}
header {
	background: #000;
	color: #563902;
	cursor: default;
    user-select: none;
}
@media (min-width: 768px) {
	.affix-top a.navbar-brand, .affix-top a.navbar-brand:focus {
		color: #563902;
	}
	.affix-top li a.menu-btn, .affix-top li a.menu-btn:focus {
		font-weight: bolder;
	    color: #563902;
	}
    .affix-top .zh-title {
        opacity: 0;
    }
    .affix-top li a.menu-btn:hover {
        color: #563902;
        background-color: #ffee78;
        border-radius: 6px;
    }
    .affix-top li a.menu-btn:hover .zh-title {
        opacity: 1;
    }
}
.skill-img {
	height:112px;
	width: auto;
}
#design_flow {
	background: #fff;
}
#tools {
	background: #eee;
}

.zh, .en{
	display: none;
}

body.zh-sel .zh {
	display: initial;
}

body.en-sel .en {
    display: initial;
}

.modal {
    padding-left: 0 !important;
    padding-right: 0 !important;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.modal::-webkit-scrollbar { /* Hide scrollbar for Chrome, Safari and Opera */
    display: none;
}

.bg-gray-transparent h2 {
    color: #fed136;
}

.bg-gray-transparent .text-muted {
    color: #777;
}

.bg-gray-transparent .item-intro {
    color: white;
}

.bg-darkest-gray-transparent h2 {
    color: #fed136;
}

.bg-darkest-gray-transparent .text-muted {
    color: #777;
}

.bg-darkest-gray-transparent .item-intro {
    color: white;
}