@import url(bootstrap.min.css);
		@import url(font-awesome.min.css);

		/************************** 
		* 2.   styles 
		***************************/
		body {
		font-family: "HelveticaNeue";
		color: #888888;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: .02em; 
		}
		a:hover,
		a:visited,
		a:focus,
		a:active {
		text-decoration: none !important;
		outline: none !important; }
		/*--------------------------*/
		/*====================start socil-mide-to(7)==================== =*/
		.socil-mide-to{
		min-height: 500px;
		background: #eee;
		width: 100%;
		color:#555;
		overflow: hidden;
		margin-top: -36px;
		font-size: 25px;
/*		margin: 200px 0;*/
		}
		.div-content{

		}
		.d-icon-4-box{

		width: 100%;
		min-height: 300px;
		}
		.d-icon-4-box div
		{
		width: 22%;
		background:  green;
		height: 100px;
		border:1px solid #fff;
		margin-top:50% ;
		}

		.d-icon-4-box div span
		{ 
		width: 100px;
		height: 100px;
		background: #fff;
		color: #000;
		}
		.ul-c-maide  
		{
		display: flex;
		justify-content: space-around
		}
		.ul-c-maideli
		{
		display:inline-block;
		}
		@media(max-width:600px)
		{
		.ul-c-maide li a{
		width: 75%!important;
		height: 58px!important;
		}
		}
		.ul-c-maide li a
		{	
		margin: 78% 0px;
		}
		.d-img-chos {
		position: relative;
		padding-top: 50px;
		text-align: center
		}
		.fa-tripadvisor
		{
		padding-right: 20px;
		transition: 1s ease;
		}
		.d-img-chos span:hover .fa-tripadvisor {
		-webkit-transform: scale(2);
		-moz-transform: scale(2);
		-ms-transform: scale(2);
		-o-transform: scale(2);
		transform: scale(2);
		}
		.d-img-chos span
		{
		font-size: 20px;
		font-weight: bold;
		padding-bottom: 20px;
		}
		.section-c-maide
		{
		height: 400px;
		background: #ccc;
		position: relative;
		margin: 200px 0;
		overflow: hidden;
		}
		.section-c-maide .ul-c-maide 
		{
		position: absolute;
		top: 35%;
		display: flex; 
		line-height:  80%;
		margin: 0;
		padding: 0;

		}
		.section-c-maide .ul-c-maide li
		{
		padding: 0 15%;
		list-style: none;
		}
		@media(max-width:1000px)
		{
		.section-c-maide .ul-c-maide li  
		{
		padding: 0 5%;
		}
		.section-c-maide .ul-c-maide
		{
		left: auto;
		}
		}
		.section-c-maide .ul-c-maide li  a:hover
		{
		text-decoration: none;
		}
		.ul-c-maide li a .fa
		{
		font-size: 40px;
		color: #262626;
		display: flex;
		transition: .5s;
		position: relative;
		padding: 12px 9px;
		line-height: .7;
		justify-content: center;
		}
		.ul-c-maide li:nth-child(1) a .fa
		{
		padding: 12px 23px;
		}
		.ul-c-maide li a:before
		{
		position: absolute;
		content: "";
		display:block;;
		top: 10px;
		left: -20px;
		height: 80px;
		width: 20px;
		background: #d1d1d1;
		transition: .5s;
		-webkit-transform: rotate(0deg) skewy(-45deg);
		-moz-transform: rotate(0deg) skewy(-45deg);
		-ms-transform: rotate(0deg) skewy(-45deg);
		-o-transform: rotate(0deg) skewy(-45deg);
		transform: rotate(0deg) skewy(-45deg);
		}
		.ul-c-maide li a:after
		{
		position: absolute;
		content: "";
		display:block;;
		bottom:-20px;
		left: -10px;
		height: 20px;
		width: 100%;
		background: #d1d1d1;
		transition: .5s;
		-webkit-transform: rotate(0deg) skewX(-45deg);
		-moz-transform: rotate(0deg) skewX(-45deg);
		-ms-transform: rotate(0deg) skewX(-45deg);
		-o- transform: rotate(0deg) skewX(-45deg);
		transform: rotate(0deg) skewX(-45deg);
		}
		.ul-c-maide li a:hover
		{
		-webkit-transform: perspective(1000px) rotate(-30deg) skew(25deg)translate(30px,-30px); 
		-moz-transform: perspective(1000px) rotate(-30deg) skew(25deg)translate(30px,-30px); 
		-ms-transform: perspective(1000px) rotate(-30deg) skew(25deg)translate(30px,-30px); 
		-o-transform: perspective(1000px) rotate(-30deg) skew(25deg)translate(30px,-30px); 
		transform: perspective(1000px) rotate(-30deg) skew(25deg)translate(30px,-30px); 
		-webkit-box-shadow: -50px 50px 50px rgba(0,0,0,.5);
		-moz-box-shadow: -50px 50px 50px rgba(0,0,0,.5);
		-mos-box-shadow: -50px 50px 50px rgba(0,0,0,.5);
		-o-box-shadow: -50px 50px 50px rgba(0,0,0,.5);
		box-shadow: -50px 50px 50px rgba(0,0,0,.5);
		}
		.ul-c-maide li:nth-child(1) a,
		.ul-c-maide li:hover:nth-child(1) a:before,
		.ul-c-maide li:hover:nth-child(1) a:after 
		{
		background:#3b5999
		}
		.ul-c-maide li:nth-child(2) a,
		.ul-c-maide li:hover:nth-child(2) a:before,
		.ul-c-maide li:hover:nth-child(2) a:after 
		{
		background: #0077b5;
		}
		.ul-c-maide li:nth-child(3) a,
		.ul-c-maide li:hover:nth-child(3) a:before,
		.ul-c-maide li:hover:nth-child(3) a:after 
		{
		background: #dd4b39;
		}
		.ul-c-maide li:nth-child(4) a,
		.ul-c-maide li:hover:nth-child(4) a:before,
		.ul-c-maide li:hover:nth-child(4) a:after 
		{
		background: #0077B5;
		}

		.ul-c-maide li:nth-child(5) a,
		.ul-c-maide li:hover:nth-child(5) a:before,
		.ul-c-maide li:hover:nth-child(5) a:after 
		{
		background: #e4405f;
		}
		/*color*/
		.ul-c-maide li a .fa{
		color:#ccc;
		}

		.ul-c-maide li:hover .fa{
		color: #fff;
		}

		@media(max-width:992px){
		.section-c-maide .ul-c-maide{
		left: 5%;
		}
		.ul-c-maide li{

		padding: 3%;
		}
		}
		@media (max-width:768px)
		.section-c-maide .ul-c-maide {
		left: 3% !mportant;
		}
		.ul-c-maide li {
		padding: 5%!mportant;
		list-style: none;
		}
		.ul-c-maide li a {

		width: 60px;
		height: 60px;
		}
		.ul-c-maide li a:before {

		height: 101%;
		}

		}
		.ul-c-maide li{
		list-style: none;
		padding: 6% !important;  
		}
		.ul-c-maide li a{
		position: relative;
		width: 80px!important;
		height: 80px!important;
		background: #fff;
		display: block;
		padding: 10% !important;  
		-webkit-transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
		-moz-transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
		-ms-transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
		-o-transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
		transition: .5s;
		-webkt-box-shadow: -20px 20px 10px rgba(0,0,0,.5);
		-moz-box-shadow: -20px 20px 10px rgba(0,0,0,.5);
		-ms-box-shadow: -20px 20px 10px rgba(0,0,0,.5);
		-o-box-shadow: -20px 20px 10px rgba(0,0,0,.5);
		box-shadow: -20px 20px 10px rgba(0,0,0,.5);
		}
		/*=======start-section  defrent(3)portofolyo================*/