abbr[title]{border-bottom:1px dotted}b,sulong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:0}legend{border:0;padding:0}





form {
    margin-left:auto;
    margin-right:auto;
    
    padding:24px;
    border: 1px solid rgba(0,0,0,.2);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    overflow: show; 
}

textarea{
	background: #343434; url(http://estudio87.com/img/gemicon_message.png) no-repeat scroll 16px 16px; 
    width: 95%;
    height: 110px;
    border: 1px solid #454545;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
    display:block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:90%;
	line-height:100%;
    color:#ccc;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
	margin-bottom:20px;
    overflow:hidden;
}

input {
    background: #343434;
    border: 1px solid #454545;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
    display:block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:90%;
	line-height:100%;
    color:#ccc;
    padding-left:10px;
    padding-right:10px;
	padding-top:5px;
    padding-bottom:5px;
    margin-top:1em;
	margin-bottom:1em;
	width: 95%;
}

.checkbox {
    height:1.2em;
	width:1.2em;
	margin-top:1.2em;
}	
label {
    margin-top: -2.2em;
	margin-left: 20%;
	float:left;
}	
select {
    background: #343434;
    border: 1px solid #454545;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
    display:block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:16px;
    color:#ccc;
    padding-left:10px;
    padding-right:10px;
    margin-bottom:2%;
}

input[type=submit] {
    cursor:pointer;
}

input.name {
	background: #343434; url(http://estudio87.com/img/gemicon_name.png) no-repeat scroll 16px 16px; 
	padding-left:45px;
}

input.email {
	  background: #363636 url(http://estudio87.com/img/gemicon_email.png) no-repeat scroll 16px 20px;
	  padding-left:45px;
}

input.message {
	background: #363636 url(http://estudio87.com/img/gemicon_message.png) no-repeat scroll 16px 16px;
	padding-left:45px;
}

::-webkit-input-placeholder {
	color: #d6d6d6;
}

:-moz-placeholder{ 
    color: #d6d6d6; 
}

::-moz-placeholder {
    color: #d6d6d6;
}

:-ms-input-placeholder {  
	color: #d6d6d6; 
}

input:focus, textarea:focus { 
	background-color: #444444;
    -moz-box-shadow: 0 0 5px 1px #820000;
    -webkit-box-shadow: 0 0 5px 1px #820000;
    box-shadow: 0 0 5px 1px #820000;
	overflow: hidden; 
}

.btn {
	width: 138px;
	height: 44px;
	border: 1px solid #a20000;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #820000;
	background-image: -moz-linear-gradient(bottom, #890000 0%, #820000 100%);
	background-image: -o-linear-gradient(bottom, #890000 0%, #820000 100%);
	background-image: -webkit-linear-gradient(bottom, #890000 0%, #820000 100%);
	background-image: linear-gradient(bottom, #890000 0%, #820000 100%);
	float:right;
}



.fb-like{
  margin:0
}


header .attribution{
  font-size:15px;
  line-height:21px;
  font-weight:200;
  color:gray;
  margin:21px 0
}
header .attribution a{
  text-decoration:none;
  color: black
}
header .attribution a:hover{
  color: blue
}
code,pre{
  margin:0
}
.elements{
	margin-top: 20px;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 20px;
}
.elements ul{
  margin:21px 0 0;
  overflow:hidden;
  padding:21px 0 0;
  border-top:1px solid #eee
}
.elements li{
  box-sizing: border-box;
  margin:0;
  padding: 0 20px;
  list-style:none
}
.elements li:nth-child(1),
.elements li:nth-child(2){
  margin-bottom:21px
}
.elements li .markup{
  font-size:12px;
  display:block;
  min-width:320px;
  font-family: -apple-system, '.SFNSText-Regular', 'Helvetica Neue', Roboto, 'Segoe UI', sans-serif;
  color: gray;
  line-height:21px;
  margin:0
}
.elements .heading{
  display:none
}
.elements fieldset{
	/* [disabled]max-width:70%; */
}
@media screen and (min-width:1060px){
  
  header .attribution{
    margin-bottom:0
  }
  .fb-like{
    margin:30px 0 0
  }
  .elements{

  }
  .elements li{
    float:left;
    padding-left: 50px;
    padding-right: 50px;
    box-sizing: border-box;
  }
  .elements li:first-child,
  .elements li:nth-child(2){
    width:30%;
    margin-bottom:0
  }
  .elements .heading{
    display:block;
    border:none;
    padding-top:0;
    margin-top:0
  }
  .elements .heading li {
    padding:0 50px;
    font-size:15px;
    font-weight:200;
    font-family: -apple-system, '.SFNSText-Regular', 'Helvetica Neue', Roboto, 'Segoe UI', sans-serif;
    color: gray;
    line-height:21px
  }
}
