*{margin: 0;padding: 0;} 

html, body {
height: 100%;
overflow: hidden; 
background: #0acdc7;
background: -webkit-linear-gradient(top, #379BFF 0%, #fff 100%);
background: -linear-gradient(top, #0066FF 0%, #fff 100%);
background: -moz-linear-gradient(top, #0066FF 0%, #fff 100%);
background-position: center;
font-family: 'Source Sans Pro', arial, sans-serif; font-weight: 400; font-size: 13px; } 
a{ text-decoration: none; color: orange; } 

img {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#musik {
 position: fixed;
 right: 20px; top: 15px;
 height: 30px;
 width: 30px;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
}

#musik:hover {
 position: fixed;
 right: 20px; top: 15px;
 height: 35px;
  width: 35px;
}

#contact {
 position: fixed;
 right: 60px; top: 15px;
 height: 30px;
 width: 30px;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
}

#contact:hover {
 position: fixed;
 right: 60px; top: 15px;
 height: 35px;
  width: 35px;
}

#project {
 position: fixed;
 right: 100px; top: 15px;
 height: 30px;
 width: 30px;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
}

#project:hover {
 position: fixed;
 right: 100px; top: 15px;
 height: 35px;
  width: 35px;
}

#profile {
 position: fixed;
 right: 140px; top: 15px;
 height: 30px;
 width: 30px;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
}

#profile:hover {
 position: fixed;
 right: 140px; top: 15px;
 height: 35px;
  width: 35px;
}

@media screen and (min-width: 961px) {
#profilecontent, #projectcontent, #contactcontent {
 position: fixed;
 left: 325px; top: 60px;
 height: 450px;
 width: 700px;
 border: #0066FF solid;
 font-family: 'Raleway', sans-serif;
 background-image: url(../img/bg.png);
 background-repeat:z-index;
 background-position: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
}

@media screen and (max-width: 960px) {
  #profilecontent, #projectcontent, #contactcontent {
 position: fixed;
 left: 2%; top: 60px;
 height: 70%;
 width: 95%;
 border: #0066FF solid;
 font-family: 'Raleway', sans-serif;
 background-image: url(../img/bg.png);
 background-repeat:z-index;
 background-position: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
}


 
}




.content-profile{
 font-family: 'Raleway', sans-serif;
 font-size:16px;
 margin-left:10px;
 color:#FFFFFF;
}

#blog {
 position: fixed;
 right: 30px; bottom: 25px;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

#blog:hover {
 position: fixed;
 right: 30px; bottom: 25px;
-webkit-transform:scale(0.89);
transform:scale(0.89);
}

#pijakan{
 position: fixed;
 left: 35px; bottom: 23px;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

#twitter{
 position: fixed;
 left: 45px; bottom: 110px;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

 .matahari{
 position: fixed;
 width: 120px; 
 height: 120px; 
 background: orange; 
 left: 70px; top: 50px;
 background: yellow;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
 filter: alpha(opacity=10);
 opacity: .1;
 border-radius: 50%; 
 -webkit-animation: bercahaya 1s linear infinite; 
 -moz-animation: bercahaya 3s linear infinite; 
 -ms-animation: bercahaya 1s linear infinite; 
 -o-animation: bercahaya 1s linear infinite;
 animation: bercahaya 3s linear infinite; 
 }
 
 .bukit{
 background-color:#4FB603;
 position: fixed;
 width: 100%; 
 height: 100px; 
 left: 0px; bottom: 0px;
 border-top-right-radius: 50%;
 border-top-left-radius: 50%;

  background-clip: content-box;
 -webkit-animation: bukitbg 1000s linear infinite; 
 -moz-animation: bukitbg 3s linear infinite; 
 -ms-animation: bukitbg 1s linear infinite; 
 -o-animation: bukitbg 1s linear infinite;
 animation: bukitbg 3s linear infinite; 
 }

 .awan{ 
 width: 160px; height: 50px; background:#fff; border-radius: 200px; position: relative; z-index: 9999; } 
 
 .awan:before, .awan:after{ 
 content: ' '; position: absolute; background: #fff; width: 160px; height: 50px; position: absolute; top: -25px; left: 10px; border-radius:100px; text-transform: rotate(30deg); } 
 
 .awan:after{ width: 120px; height: 120px; top: -55px; left: auto; right: 15px; } 
 
 .no1{ top: 90px; -webkit-animation: jalankanawan 15s linear infinite; -moz-animation: jalankanawan 15s linear infinite; -ms-animation: jalankanawan 15s linear infinite; -o-animation: jalankanawan 15s linear infinite; animation: jalankanawan 15s linear infinite; } 
 
 .no2{ left: 150px; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=75); opacity: 0.6; -webkit-animation: jalankanawan 25s linear infinite; -moz-animation: jalankanawan 25s linear infinite; -ms-animation: jalankanawan 25s linear infinite; -o-animation: jalankanawan 25s linear infinite; animation: jalankanawan 25s linear infinite; } 
 
 .no3{ left: -250px; top: -200px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; -webkit-animation: jalankanawan 20s linear infinite; -moz-animation: jalankanawan 20s linear infinite; -ms-animation: jalankanawan 20s linear infinite; -o-animation: jalankanawan 20s linear infinite; animation: jalankanawan 20s linear infinite; } 
 
 .no4{ left: 470px; top: -250; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); opacity: 0.75; -webkit-animation: jalankanawan 18s linear infinite; -moz-animation: jalankanawan 18s linear infinite; -ms-animation: jalankanawan 18s linear infinite; -o-animation: jalankanawan 18s linear infinite; animation: jalankanawan 18s linear infinite; } 
 
 .no5{ left: -150px; top: -150px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; -webkit-animation: jalankanawan 20s linear infinite; -moz-animation: jalankanawan 20s linear infinite; -ms-animation: jalankanawan 20s linear infinite; -o-animation: jalankanawan 20s linear infinite; animation: jalankanawan 20s linear infinite; }

 @-webkit-keyframes jalankanawan{ 
 0% { margin-left: 1280px;} 
 100%{margin-left: -1280px;} 
 } 
 
 @-moz-keyframes jalankanawan{ 
 0% { margin-left: 1280px;} 
 100%{margin-left: -1280px;} 
 } 
 
 @-o-keyframes jalankanawan{ 
 0% { margin-left: 1280px;} 
 100%{margin-left: -1280px;} 
 } 
 
 @-webkit-keyframes bercahaya{ 
 0% {opacity: .6; box-shadow:3px 3px 35px 35px orange} 
 100%{opacity: .7;box-shadow:3px 3px 40px 40px orange} 
 } 
 
 @-moz-keyframes bercahaya{ 
 0% {opacity: .6; box-shadow:3px 3px 35px 35px orange} 
 100%{opacity: .7;box-shadow:3px 3px 40px 40px orange} 
 } 
 
 @-o-keyframes bercahaya{ 
 0% {opacity: .6; box-shadow:3px 3px 35px 35px orange} 
 100%{opacity: .7;box-shadow:3px 3px 40px 40px orange} 
 } 
 
 
 @-webkit-keyframes bukitbg{ 
 0% { box-shadow:3px 3px 35px 35px white} 
 100%{box-shadow:3px 3px 40px 40px white} 
 } 
 
 @-moz-keyframes bukitbg{ 
 0% {opacity: .7; box-shadow:2px 2px 20px 20px #285C01;} 
 100%{opacity: .8;box-shadow:2px 2px 30px 30px #285C01;} 
 } 
 
 @-o-keyframes bukitbg{ 
 0% {box-shadow:3px 3px 35px 35px orange} 
 100%{box-shadow:3px 3px 40px 40px orange} 
 } 
 
h1{ 
    color: #f35626;
	background-image: url(../img/awan.png);
	background-position: center;
	background-repeat: no-repeat;
    padding:50px;
    font-size: 3.5rem;
    line-height: 1;
	font-family: 'Raleway', sans-serif;
	opacity: 1;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
	}

	h1:hover{

	border-radius:10%;
	opacity: 0.7;
	-webkit-transform:scale(1.3);
	transform:scale(1.3);
	
	}
  
 
 .menu{ padding: 20px 50px; } 
 
 .main{ padding: 20px 50px; height: auto; } 
 
 .main a{ color: #666; } 
 
.preload-wrapper {
	z-index:9999999999;
	position: fixed;
	top:0;
	left: 0;
	right: 0;
	bottom:0;
	background:#555;
	overflow: hidden;
}
#preloader{
    position:relative;
    width:30px;
    height:30px;
    margin:23% auto;
    background:#3498db;
    border-radius:50px;
    animation: preloader_5 1.5s infinite linear;
    -webkit-animation: preloader_5 1.5s infinite linear;
}
#preloader:after{
    position:absolute;
    width:50px;
    height:50px;
    border-top:10px solid #9b59b6;
    border-bottom:10px solid #9b59b6;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-radius:50px;
    content:'';
    top:-20px;
    left:-20px;
    animation: preloader_5_after 1.5s infinite linear;
    -webkit-animation: preloader_5_after 1.5s infinite linear;
}
@keyframes preloader_5 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);background:#2ecc71;}
    100% {transform: rotate(360deg);}
}
@keyframes preloader_5_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
@-webkit-keyframes preloader_5 {
    0% {-webkit-transform: rotate(0deg);}
    50% {-webkit-transform: rotate(180deg);background:#2ecc71;}
    100% {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes preloader_5_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

.button{
background:#0066FF repeat-x 0 0;
color:#fff;
padding:5px 10px;border:1px solid #dcd5cc;
margin-top:3px;font-family:verdana;
border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;
-o-border-radius:4px;transition:border linear .2s,background-position linear .2s;
-moz-transition:border linear .2s,background-position linear .2s;-webkit-transition:border linear .2s,background-position linear .2s;
-o-transition:border linear .2s,background-position linear .2s;}

.button:hover{
background-position:0 -8px;cursor: pointer;
-webkit-appearance: button;
outline: 0;
outline: thin dotted \9;
  /* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

textarea,
input[type='text'],
.uneditable-input {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
}

textarea:focus,
input[type='text']:focus,
.uneditable-input:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

select,
input[type='text'],
.uneditable-input {
  display: inline-block;
  height: 20px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #555555;
  vertical-align: middle;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}