@charset "UTF-8";
/* Mapping
 *Etusivu
 *-- _etusivu.sass
 *Porfolio
 *-- Tänne pitää tehdä JSON ja react jutut, en oo varma tuleeko CSS muutoksia miten paljon. Katsotaan.
 *CV
 *-- Ehkä jotain erityisiä juttuja esim. väreihin
 *--  also specific fonts at _fonts.sass */
@font-face {
  font-family: Header1;
  src: url(../fonts/DawningofaNewDay.ttf); }
@font-face {
  font-family: BasicText;
  src: url(../fonts/OpenSans-Light.ttf); }
h1 {
  font-family: "Header1", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; }

h2 {
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-weight: 100;
  color: #ab7897; }

p {
  font-family: "BasicText", Verdana, Geneva, Tahoma, sans-serif; }

.etusivu-header, .profiilikuva {
  max-width: 100%;
  height: 100vh;
  min-height: 1130px;
  background: url("../IMG/etusivuotsikko2.png") center center no-repeat scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover; }

.profiilikuva {
  z-index: -1;
  background: url("../IMG/etusivunkuva2.png") center center no-repeat scroll; }

.header-teksti {
  padding-top: 30vh; }

h1 {
  font-family: "Header1", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; }

.arrow_box {
  position: relative;
  background: #ab7897; }

.arrow_box:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #ab7897;
  border-width: 20px;
  margin-top: -20px; }

.cursor {
  cursor: pointer; }

.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid; }

#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent #fff transparent transparent;
  left: 0;
  margin-left: 30px; }

#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 30px; }

#nightmare {
  padding-top: 100px; }

.bg-cv-darker {
  background-color: #ead9e9; }

.bg-cv-light {
  background-color: #ffeefe; }

.mt-top {
  margin-top: 85px; }

.cv-centerkuva {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%; }

.cv-header {
  font-family: "Courier New", Courier, monospace;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 1.5em;
  font-weight: 100;
  color: #ab7897; }

.cv-title {
  font-family: "Courier New", Courier, monospace;
  font-size: 1em;
  font-weight: 100;
  color: #afa6b3; }

.education {
  line-height: 0.5em; }

.skill {
  height: 20px;
  min-width: 90%;
  margin: 0 auto 10px;
  line-height: 20px;
  padding: 0 0 0 10px;
  position: relative; }

.skill:before {
  content: "";
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: #bf86b4;
  border-radius: 5px;
  height: 20px;
  z-index: 2; }

.skill:after {
  content: "";
  height: 20px;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  border-radius: 5px;
  background: #8e4270;
  transition: 0.8s;
  display: block;
  animation: kehitys 1 5s;
  z-index: 3; }

.skill1:after {
  max-width: 90%; }

.skill2:after {
  max-width: 75%; }

.skill3:after {
  max-width: 60%; }

.skill4:after {
  max-width: 40%; }

@keyframes kehitys {
  0% {
    width: 0; }
  100% {
    width: 100%; } }

/*# sourceMappingURL=everything.css.map */