/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Hanlding Updates
-----------------------------------------------------------------*/
#header-wrap{
	background-color: #FFF;
	border-bottom: 5px solid #1b1f2a;
}
#logo img{
	height: 60px !important;
	margin-top: 20px;
}
#slider{
	padding-top: 0px;
}
.showdesktop{
	display: block;
}
.showmobile{
	display: none;
}
.btn1{
	font-size: 25px;
	border: 2px solid #E4A05B;
	padding: 10px 20px;
	border-radius: 30px;
	font-weight: bold;
	background: #152233;
	color: #FFF;
	margin-left: 20px;
	margin-top: 30px;
	text-align: center;
}
.btn2{
	font-size: 30px;
	border: 2px solid #E4A05B;
	padding: 10px 20px;
	border-radius: 30px;
	font-weight: bold;
	color: #152233;
	margin-left: 20px;
	margin-top: 35px;
	text-align: center;
}
.btn3{
	font-size: 30px;
	border: 2px solid #E4A05B;
	padding: 10px 20px;
	border-radius: 30px;
	font-weight: bold;
	color: #152233;
	margin-left: 20px;
	margin-top: 35px;
	text-align: center;
	width: 300px;
	display: inline-block;
}
.btn4{
	font-size: 30px;
	border: 2px solid #00C300;
	padding: 10px 20px;
	border-radius: 30px;
	font-weight: bold;

	margin-left: 20px;
	margin-top: 35px;
	text-align: center;
	width: 300px;
	display: inline-block;
	background-color: #00C300;
}
#primary-menu-trigger{
	font-size: 20px;
}

.HoneycombsOut {
    /* position: absolute; */
    z-index: 1;
    width: 100%;
}

.HoneycombsOut {
    width: 1400px;
    /* position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%); */
    transition: all 0.3s ease 0.0s;
    height: 920px;
	margin: 0 auto;
}

.honeycombs {
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease 0.0s;
    cursor: default;
}

.honeycombs {
    width: 90.909%;
    transform-origin: top left;
    transform: scale(1.1);
    transition: all 0.3s ease 0.0s;
}

.honeycombs .honeycombs-inner-wrapper {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.honeycombs .comb {
    position: absolute;
    display: inline-block;
    transition: all 0.3s ease 0.0s;
}

.animation-fadeIn-01 {
    animation: fadeIn 1.7s 0.2s ease both;
}

.honeycombs .hex_l {
    visibility: hidden;
    transform: rotate(60deg);
}
.honeycombs .hex_l, .honeycombs .hex_r {
    overflow: hidden;
    position: absolute;
}

.honeycombs .hex_r {
    visibility: hidden;
    transform: rotate(-120deg);
}
.honeycombs .hex_l, .honeycombs .hex_r {
    overflow: hidden;
    position: absolute;
}

.honeycombs .hex_inner {
    display: block;
    visibility: visible;
    transform: rotate(60deg);
    background-position: center;
    background-size: cover;
    cursor: default;
}

.honeycombs .inner_span {
    height: 100%;
    width: 100%;
    background-color: #329BBE;
    font-family: sans-serif;
    color: #000;
}

.honeycombs .inner-text {
    padding-top: 30%;
}

.hex_inner:hover{
	background-image: url(https://system.freelancedev.co/storage/mtsp.co.th/filemanagement/63131f408654f.jpg) !important;
}

#hexGrid {
    padding-bottom: 7.4%;
}
#hexGrid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    list-style-type: none;
}

.hex {
    width: 25%;
}

.hex {
    position: relative;
    visibility: hidden;
    outline: 1px solid transparent;
    cursor: pointer;
}

.hexIn {
    position: absolute;
    width: 96%;
    padding-bottom: 110.851%;
    margin: 0 2%;
    overflow: hidden;
    visibility: hidden;
    outline: 1px solid transparent;
    transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.hexLink {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}

.hexIn * {
    position: absolute;
    visibility: visible;
    outline: 1px solid transparent;
}

.hex img {
    left: -100%;
    right: -100%;
    width: auto;
    height: 100%;
    margin: 0 auto;
    transform: rotate3d(0, 0, 0, 0deg);
}

.hex p {
    width: 100%;
    height: 100%;
    padding: 5%;
    opacity: 0;
    box-sizing: border-box;
    background-color: rgba(0, 188, 212, 0.7);
    font-weight: 300;
    transition: all 0.4s ease 0.0s;
    top: -100%;
    padding-top: 50%;
    transform: translate3d(0, 100%, 0);
    opacity: 0;
    white-space: nowrap;
}
.hex::after {
    content: '';
    display: block;
    padding-bottom: 86.602%;
}

.bgg{
	background: rgb(130,130,130);
background: linear-gradient(32deg, rgba(130,130,130,1) 0%, rgba(183,183,183,1) 67%, rgba(130,130,130,1) 100%);

}
#primary-menu ul li > a{
	font-size: 18px;
	padding: 39px 10px;
}
#primary-menu.style-3 > ul > li.current > a, #primary-menu.sub-title > ul > li:hover > a, #primary-menu.sub-title > ul > li.current > a, #primary-menu.sub-title > div > ul > li:hover > a, #primary-menu.sub-title > div > ul > li.current > a, #top-cart > a > span, #page-menu-wrap, #page-menu ul ul, #page-menu.dots-menu nav li.current a, #page-menu.dots-menu nav li div, .portfolio-filter li.activeFilter a, .portfolio-filter.style-4 li.activeFilter a:after, .portfolio-shuffle:hover, .entry-link:hover, .sale-flash, .button:not(.button-white):not(.button-dark):not(.button-border):not(.button-black):not(.button-red):not(.button-teal):not(.button-yellow):not(.button-green):not(.button-brown):not(.button-aqua):not(.button-purple):not(.button-leaf):not(.button-pink):not(.button-blue):not(.button-dirtygreen):not(.button-amber):not(.button-lime), .button.button-dark:hover, .promo.promo-flat, .feature-box .fbox-icon i, .feature-box .fbox-icon img, .fbox-effect.fbox-dark .fbox-icon i:hover, .fbox-effect.fbox-dark:hover .fbox-icon i, .fbox-border.fbox-effect.fbox-dark .fbox-icon i:after, .i-rounded:hover, .i-circled:hover, ul.tab-nav.tab-nav2 li.ui-state-active a, .testimonial .flex-control-nav li a, .skills li .progress, .owl-carousel .owl-dots .owl-dot span, #gotoTop:hover, .dark .button-dark:hover, .dark .fbox-effect.fbox-dark .fbox-icon i:hover, .dark .fbox-effect.fbox-dark:hover .fbox-icon i, .dark .fbox-border.fbox-effect.fbox-dark .fbox-icon i:after, .dark .i-rounded:hover, .dark .i-circled:hover, .dark ul.tab-nav.tab-nav2 li.ui-state-active a, .dark .tagcloud a:hover, .ei-slider-thumbs li.ei-slider-element, .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus, .checkbox-style:checked + .checkbox-style-1-label:before, .checkbox-style:checked + .checkbox-style-2-label:before, .checkbox-style:checked + .checkbox-style-3-label:before, .radio-style:checked + .radio-style-3-label:before, .irs-bar, .irs-from, .irs-to, .irs-single, input.switch-toggle-flat:checked + label, input.switch-toggle-flat:checked + label:after, input.switch-toggle-round:checked + label:before, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-themecolor, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-themecolor{
	background-color: #1b1f2a;
}
#primary-menu-trigger{
      font-size: 35px;
    margin-left: -20px;
}
@media (max-width: 799px){
	.showdesktop{
		display: none;
	}
	.showmobile{
		display: block;
	}
	.btn1,.btn2{
		padding: 10px 0px;
	}
	.btn2{
		margin-bottom: 30px;
	}
	.btn3{
		font-size: 25px;
		width: 250px;
		padding: 10px 0px;
	}
	.btn3 i{
		font-size: 25px !important;
	}
	.btn4{
		font-size: 25px;
		width: 250px;
		padding: 10px 0px;
	}
	.btn4 i{
		font-size: 25px !important;
	}
	.HoneycombsOut {
		width: 100% !important;
		/* position: absolute; */
		/* top: 70px;
		left: 50%;
		transform: translateX(-50%); */
		transition: all 0.3s ease 0.0s;
		height: 400px;
	}
	.honeycombs {
		width: 200%;
		transform-origin: top left;
		transform: scale(0.47);
		transition: all 0.3s ease 0.0s;
	}
	.hex{
		width: 50%;
		margin-bottom: 50px;
	}

}