/* reset style  */
 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, font, 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 
                  {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline; background: transparent;}
body              {line-height: 16px; font-weight: normal;}
ol, ul            {list-style: none;}
blockquote, q     {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}
:focus            {outline: 0;}
ins               {text-decoration: none;}
del               {text-decoration: line-through;}
table             {border-collapse: collapse;border-spacing: 0;}

html {
	font-family: Wire One;
	font-size: 13px;
	overflow: hidden;
	line-height: 20px;
	font-style: normal;
}
body { overflow: hidden; background-color: #FAFAFA; }
 
 
a {text-decoration: none; color: #FAFAFA; cursor: pointer; z-index: 99999;}

p {float: left; color:#fafafa; font-size: 13px; line-height: 26px; font-family: Helvetica;}

h1 {color: #6DDAE8; font-size: 60px; line-height: 60px; font-weight: 100;} 

h2 {color:#6DDAE8;font-size: 100px; float: left; width: 560px; line-height: 26px; font-weight: normal; margin: 20px 0 20px 40px;} 

.hidden {display: none;}
 
/* highlight */
.highlight{ color: #6DDAE8; } 

 
 /* color picker */
 #colorSelector {position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; background-image: url('img/color.png') ;
 -webkit-border-radius: 32px; background-position: -1px -1px;
-moz-border-radius: 32px;
border-radius: 32px;
 -webkit-box-shadow: 0px 0px 10px 0px #6DDAE8;
-moz-box-shadow: 0px 0px 10px 0px #6DDAE8;
box-shadow: 0px 0px 10px 0px #6DDAE8;}  


/* load */
#load {position: absolute; top: 0px; left: 0px; z-index: 99999999999999999999; width: 100%; height: 100%; background: #fafafa;}
#loadText {position: absolute; width: 100%; height: 20px; line-height: 20px; color: #6DDAE8; font-family: Helvetica; font-size: 13px; text-align: center; 
left: 0px; top: 50%; margin: -10px 0 0 0;}
 
 

/* page wrap */
.wrap {position:absolute; left:50%;  top:50%;  z-index: -1; margin:-270px 0 0 -241px; width: 482px; height: 540px; background: none;}

/* pages */
.page {position: relative; left: 1px; top: 60px;  width: 482px; height: 480px; background: none; padding: 0px; line-height: 20px; margin: 0 0 0 0px; }   







/* HEADER */

.header {float: left; width: 100%; height: 40px; text-align: center; margin: 0 0 20px 0; background: none;}
/* logo */
.logo {float: left; margin: 5px 0 0 0px; font-size: 60px; color: #6DDAE8; font-family: Wire One;}
.logo:first-letter {}
.logo span {background-color: none; font-size: 34px;color: #1f1f1f; }

/* download button */ 
.download {float: right;  height: 20px; margin: 20px 0px 0 0px;
background-repeat: no-repeat; 
background-position: right center;
background-color: #6DDAE8; 
background-image: url('img/down.png'); 
transition: all 0.2s ease-out;
      -moz-transition: all 0.2s ease-out;    /* FF3.7+ */
      -o-transition: all 0.2s ease-out;      /* Opera 10.5 */
      -webkit-transition:all 0.2s ease-out; /* Saf3.2+, Chrome */} 
	  .download:hover { background-color: #1f1f1f;} 
.download span {float: right; margin: 0px 20px 0 0; padding: 8px 5px 0px 8px;font-family: Helvetica; font-size: 11px; color: rgba(31,31,31,0.3); background-color: #fafafa;}
 
/*menu button */
.menuButton { position: absolute; width:60px; z-index: 999999991; height: 60px; top:270px; left: 210px;  
 overflow: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0; background: #fafafa;
  opacity: 0;
 -webkit-border-radius: 60px; 
-moz-border-radius: 60px;
border-radius: 60px; 
 -webkit-box-shadow: 0px 0px 10px 0px #FAFAFA;
-moz-box-shadow: 0px 0px 10px 0px #FAFAFA;
box-shadow: 0px 0px 10px 0px #FAFAFA;}   
.menuButton img{ position: absolute; top: 20px; left: 20px;  width: 20px; height: 20px;
background-color: #6DDAE8;
background-image: url('img/menu.png'); 
background-repeat: no-repeat; 
transition: background-color 0.2s ease-out;
      -moz-transition: background-color 0.4s ease-out;   /* FF3.7+ */
      -o-transition: background-color 0.4s ease-out;      /* Opera 10.5 */
      -webkit-transition: background-color 0.4s ease-out; /* Saf3.2+, Chrome */} 
.menuButton:hover > img { background-color: #1f1f1f;} 







/* HOME (Navigation) */

.navigation ul{position: absolute; top: 60px; left: 0px;  width: 481px; height: 481px;  text-align: center; }
.navigation  ul li {position: absolute; width:240px; height: 240px; margin: 0px; line-height: 20px;
-moz-border-radius-topleft: 80px; overflow: hidden; z-index: 42;  
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 80px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 80px 0px 80px 0px;
border-radius: 80px 0px 80px 0px;
      background-color: #1f1f1f;
      transition: background-color 0.4s ease-out;
      -moz-transition: background-color 0.4s ease-out; /* FF3.7+ */
      -o-transition: background-color 0.4s ease-out;      /* Opera 10.5 */
      -webkit-transition: background-color 0.4s ease-out; /* Saf3.2+, Chrome */} 
.navigation  ul li:nth-child(1), .navigation  ul li:nth-child(4) {
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 80px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 80px;
-webkit-border-radius: 0px 80px 0px 80px;
border-radius: 0px 80px 0px 80px;} 
.navigation ul li:hover {background-color: #6DDAE8;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); } 
.navigation  ul li:nth-child(1) {bottom: 241px; right: 241px; 
background-image: linear-gradient(135deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -o-linear-gradient(135deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -moz-linear-gradient(135deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -webkit-linear-gradient(135deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -ms-linear-gradient(135deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%); }
.navigation  ul li:nth-child(1) a {position: absolute; bottom: 60px; right: 60px; }
.navigation  ul li:nth-child(2) {bottom: 241px; left: 241px;
background-image: linear-gradient(45deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -o-linear-gradient(45deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -moz-linear-gradient(45deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -webkit-linear-gradient(45deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -ms-linear-gradient(45deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%); }
.navigation  ul li:nth-child(2) a {position: absolute; bottom: 60px; left: 60px; }
.navigation  ul li:nth-child(3) {top: 241px; right: 241px;
background-image: linear-gradient(225deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -o-linear-gradient(225deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -moz-linear-gradient(225deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -webkit-linear-gradient(225deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -ms-linear-gradient(225deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%); }
.navigation  ul li:nth-child(3) a {position: absolute; top: 60px; right: 60px; }
.navigation  ul li:nth-child(4) {top: 241px; left: 241px;
background-image: linear-gradient(315deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -o-linear-gradient(315deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -moz-linear-gradient(315deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -webkit-linear-gradient(315deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -ms-linear-gradient(315deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%); }
.navigation  ul li:nth-child(4) a {position: absolute; top: 60px; left: 60px; }
.navigation ul a { font-size: 34px;}

 


 
 
 


/* ABOUT */

#about {background: none;}

/* testemonials */
ul.testem {position: absolute; left: 276px; top: 60px; color: #6DDAE8; text-align: right; font-size: 34px; line-height: 38px; width: 204px;}
.testem li span {float: right; font-size: 13px; font-family: Helvetica; color: rgba(31,31,31,0.3); font-style: italic; width: 180px; text-align: right;}

/* skills */
#skills {position: absolute; bottom: 0px; right: 0px; width: 484px; height: 238px; border-bottom: 1px solid #6DDAE8; }
.skill {position: absolute; bottom: 0px; border-right: 1px solid #6DDAE8; height: 40px;}
.skill p {color: rgba(31,31,31,0.6); position: absolute; top: -3px;  right: 5px; text-align: right;  line-height: 11px; z-index: 99;
background: #fafafa;}
.aboutText {float: left; color: rgba(31,31,31,0.6); width: 200px; margin: 0px 0 0 15px; line-height: 19px; font-style: italic; font-size: 13px;	}
#skills h1 {float: left; color: #6DDAE8;   font-size: 40px; width:100%; margin: 12px 0 0 0px;}
#skill6 {right: 20px;}
#skill5 {right: 60px;}
#skill4{right: 100px;}
#skill3 {right: 140px;}
#skill2 {right: 180px;}
#skill1 {right: 220px;}









/* WORK */

#gal {position: relative; width: 482px; height: 482px; top: 0px; left: 0px; } 
#gal ul li  a {position: absolute; color: #1f1f1f; cursor: inherit;} 
#gal .titles li span span{position: absolute; top: -30px; left: 0px;height: 0px;  font-family: Wire One; font-size: 34px; color: #1f1f1f; padding: 60px 40px 20px 40px; 
text-shadow: 0px 0px 0 #1f1f1f;
background-color: rgba(255,255, 255,0);}

#gal .titles li span {position: absolute; top: 0px; height: 120px; left: 0px; width: 160px; font-family: Helvetica;
padding: 60px 40px 60px 40px; font-size: 13px; color: rgba(31,31,31,0.6); background-color: rgba(250,250,250,0.6);}
#gal img {position: absolute; top: 0px; left: 0px; width: 482px; height: 482px;}

 a#next {position: absolute;z-index: 999; bottom: 20px; right: 20px; width: 20px; height: 40px; background-image: url('img/right.png');cursor: pointer;}
 a#prev {position: absolute;z-index: 992;  bottom: 20px; right: 80px; width: 20px; height: 40px; background-image: url('img/left.png');cursor: pointer;}
 
 
 
 
 
 
 
 
 
/* SOCIAL */ 
 
.sociala {float: right; margin: -60px 2px 0 0; width: 240px; height: 240px;
-moz-border-radius-topleft: 80px;  
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 80px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 80px 0px 80px 0px;
border-radius: 80px 0px 80px 0px;overflow: hidden;}
.sociala a, .sociala img {float: left;  width: 60px; height: 60px;}

#social h1 {position: absolute; left: 260px; top: 260px; width: 180px; height: 180px; margin: 0 0 0 20px;}

.tweetWrap {position: absolute; top: 20px; left: 0px; width: 220px; height: 240px; color: rgba(31,31,31,0.6); font-family: Helvetica; font-size: 13px;}
.tweetWrap a { color: #6DDAE8; font-family: Helvetica; font-size: 13px;}
.tweetWrap li {float: left; height: 60px; overflow: hidden; text-align: right; margin: 0 0 10px 0;}
.tweet_avatar {float: right; margin: 0 0px 20px 20px;}




 
 
 


/* CONTACT */
  
#contact {padding: 0; margin: 0;}
#contact h1 { width: 100%;  margin: 0 0 20px 0; height: 40px; padding: 0;line-height: 0px;}
#contact form {position: absolute; top: 0px; width: 100%; height: 240px; margin: 0px; padding: 0;}
#input, #input2{float: left; width: 237px; height: 238px; margin: 0 -1px 0 0; padding: 0; overflow: hidden;border: 1px solid #6DDAE8; z-index: 999;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 80px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 60px;
-webkit-border-radius: 0px 80px 0px 60px;
border-radius: 0px 80px 0px 60px;}  
#input2 {
-moz-border-radius-topleft: 80px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 80px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 80px 0px 80px 0px;
border-radius: 80px 0px 80px 0px;}  
#contact input , #contact textarea{float: left; width: 200px; border: none;border-bottom: 1px solid #6DDAE8; color: rgba(31,31,31,0.6); background: none; padding: 0px 0 0 40px;}
#contact input {height: 59px; }
#contact input:focus, input:hover, textarea:focus, textarea:hover  {  }
#contact textarea {padding: 20px 20px 0 40px; height: 159px; margin: 0 0 0px 0; width: 178px;
-moz-border-radius-topleft: 80px; text-align: right; border-bottom: none;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 80px 0px 0px 0px;
border-radius: 80px 0px 0px 0px;}
#contact #submit {float: left; padding: 0 80px 0 0px;background-color: #6DDAE8; border: none; height: 60px; 
font-family: Wire One; font-size: 34px; color: #fafafa; width: 240px; 
-moz-border-radius-topleft: 0px; cursor: pointer;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 80px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 0px 80px 0px;
border-radius: 0px 0px 80px 0px; 
background-image: linear-gradient(45deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -o-linear-gradient(45deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -moz-linear-gradient(45deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -webkit-linear-gradient(45deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);
background-image: -ms-linear-gradient(45deg, rgba(31,31,31,0.3) 0%, rgba(31,31,31,0) 100%);}
#contact #submit:hover {  }
#input2 label {position: absolute; right: 40px; top: 17px; width: 60px; font-size: 13px; color: rgba(31,31,31,0.6);font-family: Helvetica; } 

/*contact info */
.contactInfo {position: absolute; left: 20px; top: 275px; color: #1f1f1f; width: 240px; line-height: 20px;}
.contactInfo p {width: 60px; color: #6DDAE8; margin: 0  10px 0 0;}
.contactInfo  .ci1 {float: left; width:60px; margin: 0 20px 0 20px; font-style: italic; text-align: left;}
.contactInfo .ci2 {float: left; width:125px;margin-left: -20px; margin-right: 13px;}
.contactInfo .ci3 {float: left; width:120px; font-family:Helvetica, sans-serif;}
.ci3 {margin-top: 33px;}
.ci3 p {color: rgba(31,31,31,0.6); font-style: none; text-align: left; padding-left:20px; line-height:16px;}
.ci3 a {color: rgba(31,31,31,0.6); font-style: none; text-align: left;}
.ci2 p {color: rgba(31,31,31,0.6); font-style: none; width: 140px; text-align: right;}

 /* validator */
#input2  label.error , label.error{position: absolute; color: #d10000; line-height: 0px; width: 200px; margin: -10px 0 0 20px;font-family: Helvetica; font-size: 11px;} 
label.error {top: 120px; left: 22px;}
#input2  label.error { top: 56px; left: 318px;}





/* FOOTER */

.footer {position: absolute; width: 484px; height: 20px; top: 50%; left: 50%; margin: 270px 0 0 -240px;}

.footer p {float: left; color: rgba(31,31,31,0.3); margin: 0 5px 0 0; font-family: Helvetica; font-size: 11px;}