/*MEMBUAT CSS RESET UNTUK ELEMEN HTML*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0; padding: 0; border: 0;	font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {	border-collapse: collapse;	border-spacing: 0;}

/*EDITING FRAME INDEX*/
body, html {height: 100%}
a{text-decoration:none;}
.bgimg {background-image: url('../myimg/mygallery/bgIndex.jpg'); min-height: 100%; background-position: center; 
	background-size: cover;}
.bgimg .transparant {background-color:rgba(0,0,0,0.7); width:100%; height:100%; position:absolute; margin:auto; padding:auto;}
.bgimg .transparant .gambarProfil{width:12.5em; height:12.5em; margin:10% auto 3% auto; border-radius:50%; overflow:hidden;
	box-shadow:0 0 0 5px #fa7b1d, 0 0 7px 5px white; transition:0.8s;}
.bgimg .transparant .gambarProfil:hover{box-shadow:0 0 0 5px white, 0 0 7px 5px #fa7b1d;}
.bgimg .transparant .gambarProfil img{width:100%; height:100%; }
.bgimg .transparant .nama{font-size:2.5em; text-align:center; margin:0; padding:0; text-shadow:3px 5px 5px black; color:white;}
.bgimg .transparant .profesi{font-size:3em; text-align:center; margin:0; padding:0; color:#fa7b1d;
	text-shadow:1px 1px 1px white, -1px 1px 1px white, -1px -1px 1px white, 1px -1px 1px white, 0 0 20px #fa7b1d;}
.bgimg .transparant .aboutMe, .bgimg .transparant .contactMe{display:block; text-align:center; width:10em; border:3px solid #fa7b1d; color:#fa7b1d; border-radius:15px;
	font-size:1.5em; background-color:rgba(0,0,0,0.2); margin:1%auto; box-shadow:2px 3px 3px 3px black; transition:0.5s;}
.bgimg .transparant .aboutMe span, .bgimg .transparant .contactMe span{width:5%;}
.bgimg .transparant .aboutMe:hover, .bgimg .transparant .contactMe:hover{background-color:#fa7b1d; color:black;}
.bgimg .transparant .aboutMe:active, .bgimg .transparant .contactMe:active{background-color:#fa7b1d; color:black;}


/*########################################################### 400 ############################################################*/
/*########################################################### 400 ############################################################*/
/*########################################################### 400 ############################################################*/
/*########################################################### 400 ############################################################*/
/*########################################################### 400 ############################################################*/

@media only screen and (max-width: 400px){
	.bgimg .transparant .gambarProfil{width:10em;height:10em; margin:25% auto 10% auto;}
	.bgimg .transparant .nama{font-size:1.1em; margin:auto auto 2% auto;}
	.bgimg .transparant .profesi{font-size:1.5em; font-weight:400; margin:auto auto 10% auto;
		text-shadow:1px 1px 1px black, -1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black}
	.bgimg .transparant .aboutMe, .bgimg .transparant .contactMe{font-size:1.2em; margin:5% auto;}
}

/*##################################################### 400 S/D 1000 ############################################################*/
/*##################################################### 400 S/D 1000 ############################################################*/
/*##################################################### 400 S/D 1000 ############################################################*/
/*##################################################### 400 S/D 1000 ############################################################*/
/*##################################################### 400 S/D 1000 ############################################################*/

@media only screen and (max-width: 600px) and (min-width: 400px) {
	.bgimg .transparant .gambarProfil{width:15em;height:15em; margin:30% auto 10% auto;}
	.bgimg .transparant .nama{font-size:1.5em; margin:auto auto 2% auto;}
	.bgimg .transparant .profesi{font-size:2em; font-weight:400; margin:auto auto 15% auto;
		text-shadow:0 0 3px #fa7b1d; color:white;}
	.bgimg .transparant .aboutMe, .bgimg .transparant .contactMe{font-size:1.2em; margin:4% auto;}
}

/*##################################################### 400 S/D 1000 ############################################################*/
/*##################################################### 400 S/D 1000 ############################################################*/
/*##################################################### 400 S/D 1000 ############################################################*/
/*##################################################### 400 S/D 1000 ############################################################*/
/*##################################################### 400 S/D 1000 ############################################################*/

/*IPAD atau TAB, COntoh Ipad Mini*/
@media only screen and (max-width: 1000px) and (min-width: 600px) {
	.bgimg .transparant .gambarProfil{width:20em;height:20em; margin:25% auto 7% auto;}
	.bgimg .transparant .nama{font-size:2em; margin:auto auto 1% auto;}
	.bgimg .transparant .profesi{font-size:2.5em; font-weight:400; margin:auto auto 10% auto;
		text-shadow:0 0 3px #fa7b1d; color:white;}
	.bgimg .transparant .aboutMe, .bgimg .transparant .contactMe{font-size:1.7em; margin:2% auto;}
}