/*designer playground*/
.ff0{
	font-family:sans-serif;
	visibility:hidden;
}
@font-face{
	font-family:ff1;
	src:url(../fonts/f1.woff)format("woff");
	}
h1,h2{
	font-family:ff1;
	line-height:1.109000;
	font-style:normal;
	font-weight:normal;
	visibility:visible;
}
@font-face{
	font-family:ff2;
	src:url(../fonts/f2.woff)format("woff");
	}
.ff2{
	font-family:ff2;
	line-height:0.996000;
	font-style:normal;
	font-weight:normal;
	visibility:visible;
}
@font-face{
	font-family:ff3;
	src:url(../fonts/f3.woff)format("woff");
}
.ff3{
	font-family:ff3;
	line-height:1.002000;
	font-style:normal;
	font-weight:normal;
	visibility:visible;
}
@font-face{
	font-family:ff4;
	src:url(../fonts/f4.woff)format("woff");
}
.ff4{
	font-family:ff4;
	line-height:0.930000;
	font-style:normal;
	font-weight:normal;
	visibility:visible;
}
h1{
	font-size: 3em;
}


/*sections*/
body{
	background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/egg_shell.png);
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.wrap{
	order: 0;
    flex: 0 1 auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    max-width: 830px;
    padding-top: 5%;
    padding-bottom: 1%;

}
.section-top{
	order: 0;
    flex: 0 1 auto;
    align-self: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: flex-end;
    padding-top: 20%;
    background: url(../img/bg.jpg), white;
    background-size: contain;
    background-repeat: no-repeat;

}
.section-bottom{
	order: 0;
    flex: 0 1 auto;
    align-self: auto;
    padding: 2%;
    padding-left: 4%;
    padding-right:5%;
    background:white;

}
.section-blue{
	order: 0;
    flex: 2 1 auto;
    align-self: auto;
    min-width: 54%;
    background-color: #67a5a5;
    padding: 2%;
}
.section-white{
	order: 0;
    flex: 1 1 auto;
    align-self: auto;
    padding: 2%;
}
.brand{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}


/*misc*/
.logo{
	max-width: 150px; 
}
ul{
	margin: 0 !important;
}

.Skill-rate li{
	background-size: contain;
	list-style: none;
}

ul.Skill-rate span+span {
  float: right;

}
ul.Skill-rate span+span svg{
	/*filter: drop-shadow( 5px -5px 5px #000 );*/
}