html {
    height: 100%;
}
body {
  height: 100%;
  padding: 0px;
  font: 14px 'Josefin Sans', sans-serif;
  background: #c33;
}

a {
  color: #00B7FF;
}

@media (max-width: 640px) {

  body.container {
    display: block;
    padding:0px;
    margin:0px;
  }

  .container .cardbox {
    width: 100%;
    min-width: 300px;
  }

  .cardbox .colcontainer {
    flex-direction: column;
  }

  .cardbox .social ul {
    display:block;
  }

  .cardbox .about {
    display: none;
  }

}


.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.cardbox {
  width: 50%;
  min-width: 640px;
  background: #fafafa;
  position: relative;
  margin: 0 auto;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

.leader {
  align-items: stretch;
}

.leader > * {
  margin: 0;
  padding: 15px;
}

.leader .name {
  background: #c4c4c4;
  text-align: left;
  font-weight: bold;
}

.leader .title {
  text-align: left;
  background: #ddd;
  border-bottom: #7a7a7a 1px solid;
}

.colcontainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: strech;
}

.colcontainer .social {
    flex:2;
}

.colcontainer .about {
    flex:1;
    position: relative;
    height:300px;
}

.about .wrap {
    background-color:#9e9e9e;
    position:absolute;
    margin:0;

    /*top:-2em;*/
    left:-2em;
    /*right:-2em;*/
    /*bottom:-2em;*/

    border-radius: 3em;

    transform: perspective( 600px ) rotateY(-15deg);
    padding: 0;
    overflow:hidden;
    width:300px;
    height:300px;
    box-shadow: 4px 2px 30px #888888;

}

.about .portrait {

}

.about .wrap p {
    /*transform: rotateY(15deg);*/
    display:none;
}


.social {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-right: 1px solid #7e7e7e;
}

.social .tophits {
    padding:0.5em;
    font-size: 1.5em;
    text-align: center;
}

.social ul {
    display: flex;
    flex-direction: row;
    justify-content: 'flex-start';
    padding:0;
    margin:0;
}

.social ul li {
    position:relative;
    flex:1;
    display:block;
    background-color: #fff;
}

.social ul.off li:before {
    content: "";
    display: block;
    padding-top: 100%;
}


.social ul.off li .icon {
  position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
  text-align: center;
}

.social .fa {
    font-size: 90px;
    color: #000;
    text-decoration:none;
    display: block;
    width: 100%;
    text-align: center;
    padding:10px;
}

.icon.github {background: #d0d0d0;}
.icon.github a {
    color: #fff;
}

.icon.twitter {background: #c6c6c6;}
.icon.twitter a {

    color: #00aced;
}

.icon.google {background: #ddd;}
.icon.google a {

    color: #dd4b39;
}

.icon.linkedin {background: #d7d7d7;}
.icon.linkedin a {
    color: #007bb6;
}

.contact {
    border-top: #7a7a7a 1px solid;
    background: #ddd;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.contact li {
    list-style: none;
    font-size: 1.25em;
}

.contact li .fa {
    margin-right: 0.5em;
}

/* The drop shadow for the whole box */
.cardbox:before, .cardbox:after
{
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
}

.cardbox:after
{
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}