/*



 */

/* Overlay style */

.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	xbackground: rgba(153,204,51,0.9);
	background: rgba(21,21,21,0.9);
	z-index: 10;
}

/* Overlay closing cross */
.overlay .overlay-close {
	width: 80px;
	height: 80px;
	position: absolute;
	right: 20px;
	top: 20px;
	overflow: hidden;
	border: none;
	background: url('/assets/fullscreen-cross-a82ddde29aad91a7d826f11c40533fa0451ae60b620ab831ae89856472c43019.png') no-repeat center center;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 100;
}

/* Menu style */
.overlay nav {
	text-align: center;
	position: relative;
	top: 50%;
	height: 60%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
}

.overlay ul li {
	display: block;
	height: 20%;
	height: calc(100% / 5);
	min-height: 54px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.overlay ul li a {
	font-size: 54px;
	font-weight: 300;
	display: block;
	color: #fff;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
	xcolor: #e3fcb1;
	color: rgb(230,180,80);

}

/* Effects */
.overlay-slidedown {
	visibility: hidden;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
	transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}

.overlay-slidedown.open {
	visibility: visible;
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
	-webkit-transition: -webkit-transform 0.4s ease-in-out;
	transition: transform 0.4s ease-in-out;
}

@media screen and (max-height: 30.5em) {
	.overlay nav {
		height: 70%;
		font-size: 34px;
	}
	.overlay ul li {
		min-height: 34px;
	}
}
/* CSS design by @jofpin */

@import url(http://fonts.googleapis.com/css?family=Raleway|Varela+Round|Coda);
@import url(http://weloveiconfonts.com/api/?family=entypo);

#global-nav ul.clearfix{
    display: none;
}

.wrapper h1 {
    font-size: 35px;
    color: #DFDFDF;
}

 .wrapper table#profile {
    margin-top: 30px;
    color: #333;
    border-collapse: collapse;
    border-spacing: 0;
 }

 .wrapper table#profile th{
    border: 1px solid transparent; /* No more visible border */
    height: 50px;
    width: 130px;
    font-size: 17px;
    background: #DFDFDF;  /* Darken header a bit */
    font-weight: bold;
 }

 .wrapper table#profile th em{
    color: red;
    font-size: 40px;
 }

 .wrapper table#profile th p{
    margin-top: 0;
    font-size: 10px
 }


 .wrapper table#profile td{
    border: 1px solid transparent; /* No more visible border */
    height: 50px;
    width: 300px;
    padding: 15px 50px;
    font-size: 15px;
    background: #FAFAFA;
 }

    /* Cells in even rows (2,4,6...) are one color */
    .wrapper table#profile tr:nth-child(even) td { background: #F1F1F1; }

    /* Cells in odd rows (1,3,5...) are another (excludes header cells)  */
    .wrapper table#profile tr:nth-child(odd) td { background: #FEFEFE; }

.user-profile {
  margin: auto;
    width: 47em; 
  height: 14.5em;
  background: rgb(55, 56, 57);
  border-radius: .2em;
  text-align: left;
}

.user-profile  .username {
  margin: auto;
  margin-top: -7.5em;
  margin-left: 9.00em;
  color: rgb(230,180,80); 
  font-size: 1.53em;
  font-weight: bold;
}
.user-profile  .bio {
  margin: auto;
  display: inline-block;
  margin-left: 16.03em;
  color: rgb(230,180,80);
  font-size: .87em;
  font-family: "varela round", sans-serif;
}
.user-profile > .description {
  width: 37em;
  margin-top: 1em;
  margin-left: 16.03em;
  color: #c0c5c5; 
  font-size: .87em;
  font-family: "varela round", sans-serif;
}
.user-profile > .info {
  width: 37em;
  margin-top: 1em;
  margin-left: 16.03em;
  color: #c0c5c5; 
  font-size: .87em;
  font-family: "varela round", sans-serif;
}
.user-profile > .info th {
   padding-left: 0;
   width: 5em;
   vertical-align: top;
}
.user-profile > .info td {
   padding-left: 0.73em;
}


.user-profile > img.avatar {
  padding: .9em;
  margin-left: .9em;
  margin-top: .9em;
  height: 10.23em;
  width: 10.23em;
  border-radius: 25em;
}

.user-profile ul.data {
    margin: 1.5em auto;
    height: 1.70em;
  background: rgb(70, 38, 2);
  text-align: center;
  border-radius: 0 0 .3em .3em;
}
.user-profile li {
    margin: 0 auto;
  padding: 1.30em; 
  width: 33.33334%;
  display: table-cell;
  text-align: center;
}

.user-profile span {
    font-family: "varela round", sans-serif;
    color: #e6b450;
  white-space: nowrap;
  font-size: 1.27em;
  font-weight: bold;
}

/* MEDIA QUERIES */
@media screen and (min-width: 760px ) {
     body{
       background: linear-gradient(rgba(0,0,0,.5) 60%, rgba(24,24,24,.5)), url('/assets/hero-okinawa-sky-diet-dbb123a40dbebd6e287b1edbe7f9b572b0bd0b2ddf61ed63f7e0e19947603edc.jpg ') center center / cover no-repeat;
       background-color: #181818;
     }

    #container{
      height: 79vh;
    }

    #global-nav ul.clearfix{
        display: block;
    }

    .wrapper h1 {
        padding-top: 5vh;
        font-size: 55px;
        color: #DFDFDF;
    }

     .wrapper table#profile {
        color: #333;
        vertical-align: middle;
     }

     .wrapper table#profile th{
        border: 1px solid transparent; /* No more visible border */
        width: 200px;
        height: 30px;
        font-size: 15px;
        background: #DFDFDF;  /* Darken header a bit */
        font-weight: bold;
        vertical-align: middle;
     }

     .wrapper table#profile th p{
        margin-top: 0;
        font-size: 15px;
     }

     .wrapper table#profile td{
        border: 1px solid transparent; /* No more visible border */
        width: 600px;
        height: 30px;
        padding: 8px 15px;
        font-size: 15px;
        background: #FAFAFA;
     }


    .wrapper table#profile input[type='text'] {
        /* set CSS properties here*/
        width: 600px;
        height: 30px;
        font-size: 15px
    }
    .wrapper table#profile input[type='email'] {
        /* set CSS properties here*/
        width: 600px;
        height: 30px;
        font-size: 15px
    }
    .wrapper table#profile textarea {
        /* set CSS properties here*/
        width: 600px;
        height: 100px;
        font-size: 20px
    }

    /* Cells in even rows (2,4,6...) are one color */
    .wrapper table#profile tr:nth-child(even) td {
        background: #F1F1F1;
    }

    /* Cells in odd rows (1,3,5...) are another (excludes header cells)  */
    .wrapper table#profile tr:nth-child(odd) td {
        background: #FEFEFE;
    }

}