*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* facebook logo + login */

header{
    height: 78px;
    border: 10px solid rgba(58,119,233,1);
    background: rgba(56,115,227,1);
}
.logo{
    width: 200px;
    margin-left: 100px;
    background: rgba(56,115,227,1);
    float:left;
    clear: both;
}
.login{
    display:flex;
    width: 35%;
    background: rgba(56,115,227,1);
    position: relative;
    left: 33%;

}
.username{
    margin-right: 10px;
}

.labpass{
    color: white;
    display: inline-block;
    background: rgba(56,115,227,1);
    font-family: Helvetica, sans-serif;
    font-size:12px;
    font-weight: lighter;
    position: fixed;
    top:6%;
    left: 76%;
}


html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: rgba(245,246,247,1);
}

.grid {
    width: 852px;
    background: rgba(245,246,247,1);

  }
.grid,
.col-1,
.col-2 {
    padding-top: 10px;
    margin: 0 auto;
}
.col-1,
.col-2 {
  display: inline-block;
  vertical-align: top;

}
/* connect with friends and the world */
.col-1 {
    width: 55%;
    font-size: 28px;
    font-family: Helvetica, sans-serif;
    padding-top: 55px;
    position: relative;
    left:-7%;
}
/* icons + paragraphs */
.icons{
    width: 60px;
}
.icon1{
    float: left;
    clear: both;
}
.icon2{
    float: left;
    clear: both;
}
.icon3{
    float: left;
    clear: both;
}

.col-1 p{
    font-size: 16px;
    text-align: left;
    padding: 15px 0;
}
.col-1 span{
    font-weight: bold;
}
.col-2 {
    width: 45%;
    padding-left: 0px;
    position: relative;
    left: 6%;
  }
.page{
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    position: relative;
    right: -8%;
}
.col-2 span{
    font-weight: bold;
}
/*
  ========================================
  Clearfix
  ========================================
*/
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  clear: both;
  *zoom: 1;
}
/* Sign up */
label {
    display: block;
    font-size: 29px;
    font-weight:bold;
    font-family: Helvetica, sans-serif;
}
/* it's quick and easy */
.quick{
  font-size:14px;
  font-weight:lighter;
}
 /* terms */
 .fineprint{
    font-size:11px;
    font-family: Helvetica, sans-serif;
  }

 /* all search bars and labels */

input,
label {
    margin: .4rem 0;
    width: 90%;
}

 /* only search bars */

input{
    border-radius: 4px;
    border: 1px solid lightgray;
    height: 1.75em;
}
input::placeholder {
    font: 13px/3 sans-serif;
    padding: 7px;
}
/* first name + last name */
.name{
  width: 90%;
  display: flex;
}
.fname{
    margin-right: 10px;
}

/* birthday */
SELECT{
  width: 29%;
}
  
.bday,
.gender{
  font-size:12px;
  font-weight:lighter;  
  padding-top:2px;
}
/* gender */

.xyz{
  display: flex;
  width: 90%;
  margin: 8px;
}
.xygender{
  font-size:13px;
  font-weight:lighter;
}

/*
  ========================================
  Buttons
  ========================================
*/
.loginbutton{
    border-radius: 6px;
    background: rgba(38,83,170,1);
    border: none;
    height: 20%;
    padding: 5px 30px;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    font-size: 16px;
    position: relative;
    left: 3%;
    margin-top: 1.5%;
    height: 32px;
}
.btn{
    position: relative;
    right: -17%;
}
  .btn-alt {
    border-radius: 6px;
    background: rgba(77,160,46,1);
    border: none;
    padding: 10px 70px;
    text-align: center;
    display: inline-block;
    font-size: 19px;
  }
  .button a,
  .login a {
    text-decoration: none;
    font-weight: bold;
    color: white;
    font-family: Helvetica, sans-serif;

  }