.link1{
	/*clear: both;*/
	padding:10px;
	font-size: 18px;

}

.link1 a{
	color: #2980b9;
	font-weight: bold;
}

.link1 a:hover{
	color: #3498db;
	text-decoration: underline;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


@keyframes blink-animation {
	to {
	visibility: hidden;
	}
}

@-webkit-keyframes blink-animation {
	to {
	visibility: hidden;
	}
}

.mainContent {
    width: 90%;
    /*margin: 2.5em auto;*/
    /*background: #fff;*/
    /*padding: 1em;*/
    margin-bottom: 15px;
}

.contactFrm h4 {
    font-size: 1em;
    color: #252525;
    margin-bottom: 0.5em;
    font-weight: 300;
    letter-spacing: 5px;
}

.contactFrm input[type="text"], 
.contactFrm input[type="email"] {
    width: 70%;
    outline: none;
    font-size: 0.9em;
    padding: .7em 1em;
    border: 1px solid #000;
    -webkit-appearance: none;
    display: block;
    /*margin-bottom: 1.2em;*/
}

.contactFrm textarea {
    resize: none;
    width: 93.5%;
    font-size: 0.9em;
    outline: none;
    padding: .6em 1em;
    border: 1px solid #000;
    min-height: 10em;
    -webkit-appearance: none;
}

.contactFrm input[type="submit"] {
    outline: none;
    color: #FFFFFF;
    padding: 0.5em 0;
    font-size: 1em;
    margin: 1em 0 0 0;
    -webkit-appearance: none;
    background: #006faa;
    transition: 0.5s all;
    border: 2px solid #006faa;
    -webkit-transition: 0.5s all;
    transition: 0.5s all;
    -moz-transition: 0.5s all;
    width: 20%;
    cursor: pointer;
}

.contactFrm input[type="submit"]:hover {
    background: none;
    color: #006faa;
}

.contactFrm input[type="reset"] {
    outline: none;
    color: #000;
    padding: 0.5em 0;
    font-size: 1em;
    font-weight: bold;
    margin: 1em 0 0 0;
    -webkit-appearance: none;
    background: #ecf0f1;
    transition: 0.5s all;
    border: 2px solid #bdc3c7;
    -webkit-transition: 0.5s all;
    transition: 0.5s all;
    -moz-transition: 0.5s all;
    width: 20%;
    cursor: pointer;
}

.contactFrm input[type="reset"]:hover {
    background: none;
    color: #006faa;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~HOME*/
.wr_item.home {
	display: flex;
	flex-wrap: wrap;
	border: #000;
	border-radius: 15px;
	margin:auto;
	padding-top:25px;
	padding-bottom:25px;
    justify-content: space-between;
}

.home .item {
    width: 30.6%;
    margin:15px .8%;
    align-self: stretch;
}

.home .ipicture {
    height:250px;
	width:210px;
    transition: background .25s ease-out;
    background:transparent url('') center/90% no-repeat;
	margin:auto;	
	}
.home .ipicture:hover {
    background-size:100%;
}
.home .iname {
	font-weight:bold;
	font-size:16px;
	padding-top:10px;
	margin-left:10px;
	margin-right:10px;
	letter-spacing: .2em;
	width:100%;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~KLIEN*/
.wr_item.klien {
    display:flex;
    justify-content:flex-start;
    flex-wrap: wrap;
    margin-top: 40px;
}
.klien .item {
    width: 19.6%;
    margin:10px .2%;
    /*background: grey;*/
    align-self: stretch;
    border: 1px solid #999;
    background:#f5f5f5 ;
    position:relative;
}

.klien .item::after{
	content: "";
	display: var(--display-unggulan);
	position:absolute;
	top:-6px;
	right:-21px;
	width: 0; 
	height: 0; 
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 30px solid green;
	transform: rotate(45deg);
}

.klien .ipicture {
    height: 200px;
    transition: background .25s ease-out;
    background:#fff url('') center/100% no-repeat;
    margin: 4px;
}

.klien .ipicture:hover {
    background-size:120%;
}
.klien .iname {
	text-align:center;
	font-weight:bold;
	padding: 15px;
	letter-spacing: .2em;
	max-width:200px;
}
.klien .iharga{
	text-align:center;
	color: #ff5722;
}
.klien .idesc{
	text-align:center;
	/*color: rgba(0,0,0,.38);*/
}

.klien .ikategori{
	position:absolute;
	height: 40px; 
	width: 40px; 
	background:url('') left/cover no-repeat;
	top:0;
	left:0;
	margin: 10px;
}
.klien .ikategori:hover::after {
	content:attr(data-tooltip);
	display: block;
	margin-left: 45px;
	width: 200px;
	color: var(--color);
	font-weight:bold;	
}	

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~PEM*/
.wr_item.pameran {
    display:flex;
    justify-content:center;
    align-content:center;
    flex-wrap: wrap;
	
}
.pameran .item {
    /*width: 24.6%;*/
    margin:10px .2%;
    align-self: stretch;
    border: 1px solid #999;
    background:#f5f5f5;
}

.pameran .iname {
	text-align:center;
	font-weight:bold;
	padding: 15px;
	letter-spacing: .2em;
}
.pameran .idesc {
	text-align:center;
	font-weight:100;
	padding: 15px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~PROFIL*/

.profil .item {
    width: 100%;
    border: 1px solid #F00;
}

.profil .ipicture {
    width:1050px;
    height: 700px;
    transition: background .25s ease-out;
    background:#f5f5f5 url('') center/90% no-repeat;
    border: 1px solid #999;
	margin-top:15px;

}
.profil .iname {  
	max-width:200px;
	text-align:center;
	color:#030;
}
.profil .iname:hover {
	color:#900;
	font-weight:bold;
}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* untuk ukuran 1080px kebawah */
@media screen and (max-width: 1080px) {

.home .iname {
	font-size:16px;
}	
}

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

.home .item {
    width: 98.6%;
}
.home .iname {
    font-size:16px;
}

.klien .iname {
    max-width: 100%;
}
}