/*Reset*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;} ol, ul {list-style: none; margin: 0;} :focus {outline: 0;} table {border-collapse: collapse;border-spacing: 0;}

html {
  scroll-behavior: smooth;
}

/*Layout Grid*/
.purple-wrap {background: #812c6c; color: white; padding: 10px 0; margin-bottom: 20px;}
.gray-wrap {background: #f4f4f4;}

.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  margin: 0.5rem 2%;
  min-height: 0.125rem;
}

.row::after {
	content: "";
	display: table;
	clear: both;
}

@media only screen and (min-width: 33.75em) {  /* 540px */
  .container {
    width: 80%;
  }
}

@media only screen and (min-width: 45em) {  /* 720px */
  .col-1 {width: 4.33%;}
  .col-2 {width: 12.66%;}
  .col-3 {width: 21%;}
  .col-4 {width: 29.33%;}
  .col-5 {width: 37.66%;}
  .col-6 {width: 46%;}
  .col-7 {width: 54.33%;}
  .col-8 {width: 62.66%;}
  .col-9 {width: 71%;}
  .col-10 {width: 79.33%;}
  .col-11 {width: 87.66%;}
  .col-12 {width: 96%;}
}

@media only screen and (min-width: 65em) { /* 960px */
  .container {
    width: 80%;
    max-width: 65rem;
  }
}

/* TYPOGRAPHY */
body {
  font-family: 'Open Sans', Helvetica, sans-serif;
  color: #444444;
  line-height: 1.5;
  font-size: 1em;
}

h1 {
  font-size: 2.6em;
  font-family: 'Amaranth', Helvetica, sans-serif;
  padding: 10px 0;
}

h2 {
  font-size: 2em;
  font-family: 'Amaranth', Helvetica, sans-serif;
}

h3 {
  font-size: 1.375em;
  font-family: 'Amaranth', Helvetica, sans-serif;
}

h4 {
  font-size: 1.125em;
  font-family: 'Amaranth', Helvetica, sans-serif;
}

p, li {
  font-size: 1.125em;
  line-height: 1.8;
  padding-bottom:1.25rem;
}

q {
  quotes: "“" "”" "‘" "’";
}

blockquote {
	font-size: 1.25em;
	font-family: 'Amaranth', Helvetica, sans-serif;
	margin: 1.5em 10px;
  	padding: 50px 0px 5px 0px;
  	quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
  color: #c7c7c7;
  content: open-quote;
  font-size: 7em;
  line-height: 0em;
  float: left;
  text-shadow: 1px 1px 1px #fff;
}

blockquote:after {
  color: #c7c7c7;
  content: close-quote;
  font-size: 7em;
  line-height: 0em;
  float: right;
  text-shadow: 1px 1px 3px #fff;
}

.quote-name {
	color: #444444;
	margin-top: 20px;
	font-size: .8em;
	font-family: 'Open Sans', Helvetica, sans-serif;

}

a 		  {color: #ff9c00; text-decoration: none;}
a:hover {color: #ffc000;}

figure {margin: 0; margin-bottom: 1.5em;}
figcaption {font-size: 0.9em; text-align: center;}


/*Breaking Point*/
.hr {
  overflow: hidden;
  text-align: center;
  color: #a8a8a8;
  text-transform: uppercase;
  font-size: 0.7em;
  margin: 10px 0;
}

.hr:before,
.hr:after {
  background-color: #eee;
  content: "";
  display: inline-block;
  height: 2px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

.hr:before {right: 0.5em; margin-left: -50%;}
.hr:after {left: 0.5em; margin-right: -50%;}

/*NAVIGATION*/
#logo { border-radius: 50%; border: none;background: #fff; padding: 5px 4px 1px 4px; margin: 0; position: absolute; left: 46%; top: -10px;}
/*.active #logo:hover {background: #ffd800; }*/
#logo-image {width:80px; height:80px;}

nav {
	padding: 6px 0; 
	font-size: 14px; 
	text-transform: uppercase; 
	position: fixed; 
	z-index: 3; 
	width: 100%; 
	text-align: center; 
	background: #eee;
  border-bottom: 2px solid white
} 

nav a {
	display: block;
	padding: 7px;
	color: #717171; 
	text-decoration: none;
    border-radius: 7px;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
	-webkit-transition: .5s all ease-out;
    -moz-transition: .5s all ease-out;
    transition: .5s all ease-out; 
}

nav a:hover,
#logo:hover {
    background: white;
}

nav div.active a {
  background: #94bf0e;
  color: white;
}

.hidden-anchor {
  display:block;
  padding-top:60px;
  margin-top:-60px;
}


/*INTRO*/
/*.hire-me {width: auto; height: 100vh;}*/
.intro {height: 100vh;  font-family: 'Amaranth', Helvetica, sans-serif;}

.intro h1 {padding-top:23vh; font-size: 6vh;}

.hi {
	font-size: 14vh;
  line-height: 1;

}

.what { padding-top: 50px;}


#rotate {display: block; width:auto; }


/*WHAT I OFFER*/

.offer li {padding-left: 40px; background:url("img/check.svg") no-repeat 0 8px; }
.offer span {color: #94bf0e; font-size: 2em; float:left; margin-top: -14px; margin-left: -40px;}

.process img,
.learned img {width: 140px; }

.p70 {opacity:0.70;}
.p40 {opacity:0.40;}
.tag {
	background: #94bf0e; 
	border-radius: 10px; 
	color: white;
	display: inline-block; 
	padding: 5px 10px;
	margin: 5px;
	font-size: 0.8em;
}
.fancy-border {border: 2px dashed #eee; border-radius: 10px; padding: 10px;}


/*PROOF*/

.case-thumbnail {display: inline-block;position: relative;}

.case-image     {width: 98%;}
	
.case-thumbnail .overlay {
	transition: 1000ms;
	position: absolute; 
	background-color: rgba(255, 255, 255, 0); 
	text-align: center;
	color: #ff9c00;
	font-size: 1.3em;
	text-transform: uppercase;
	display: inline-block;
	border: 8px solid white;
	text-shadow: 1px 1px 1px #fff;
	left: 0;
	bottom: 40%;
	width: 100%;
	padding: 27px 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*--IE 8 Transparency--*/
	filter:alpha(opacity=0);
	opacity:0;
}
	
.case-thumbnail:hover .overlay{
	background-color: rgba(255, 255, 255, 0.8);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE 8 Transparency--*/
	filter:alpha(opacity=100);
	opacity:1;
	}

.case-thumbnail .zoom {
	transition: 1000ms;
	background:url("img/zoom.svg") no-repeat; 
	height: 40px;
	width: 40px;
	bottom: 20px;
	right: 30px;
	position: absolute;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE 8 Transparency--*/
	filter:alpha(opacity=100);
	opacity:1;
	}

.case-thumbnail:hover .zoom {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*--IE 8 Transparency--*/
	filter:alpha(opacity=0);
	opacity:0;
}


/*COMPRESSED ME & CONTACT*/

.email {font-size: 8vw; font-family: 'Amaranth', Helvetica, sans-serif;}

.compressed {
	font-size: 3em;
	letter-spacing: -6px;
}

.social {float: left; margin: 7px 15px 0px -65px;}
.indent {margin-left: 65px;}

/*CASE PAGES*/

.case-intro     {padding-top:110px; margin-bottom: 50px;}
#case-logos img {margin: 100px 0; width: 30vw;}
#case-diy img   {width: 100%;}

.box-highlight {padding: 22px 22px 0px 22px; border-radius: 15px; border-top: 2px solid #bcbcbc; border-bottom: 2px solid #bcbcbc;}
.stake-holders li {padding-left: 35px; background:url("ystavyyden-majatalo/img/group.svg") no-repeat 0 3px; background-size: 25px 25px;}
.key-activities li {padding-left: 35px; background:url("ystavyyden-majatalo/img/activity.svg") no-repeat 0 3px; background-size: 25px 25px;}
.results li {padding-left: 30px; background:url("ystavyyden-majatalo/img/star.svg") no-repeat 0 5px; background-size: 20px 20px;}
.left-out li {padding-left: 35px; background:url("ystavyyden-majatalo/img/left-arrow.svg") no-repeat 0 5px; background-size: 25px 25px;}

.bg-number-1 {background:url("ystavyyden-majatalo/img/1.svg") #f4f4f4 no-repeat bottom right; background-size: 150px 150px;}
.bg-number-2 {background:url("ystavyyden-majatalo/img/2.svg") #f4f4f4 no-repeat bottom right; background-size: 150px 150px;}
.bg-number-3 {background:url("ystavyyden-majatalo/img/3.svg") #f4f4f4 no-repeat bottom right; background-size: 150px 150px;}
.bg-number-4 {background:url("ystavyyden-majatalo/img/4.svg") #f4f4f4 no-repeat bottom right; background-size: 150px 150px;}

.reception-list li {font-size: 1em; padding: 2px 0; }
.reception-list li li {padding-left: 15px;}
.reception-list li:before {content: '\21AA'; padding-right: 3px;}

#case-majatalo blockquote {
  font-size: 1.25em;
  font-family: 'Amaranth', Helvetica, sans-serif;
  padding: 0px;
   quotes: "\201C""\201D""\2018""\2019";
}

#case-majatalo blockquote img {margin-top: -10px; margin-right: 20px;}

#case-majatalo blockquote:before,
#case-majatalo blockquote:after {content: none;}

#case-majatalo .sssprev {left: 80%; background-position: 0 99%;}

#case-majatalo .sssnext {right: 3%; background-position: -26px 99%;}

.tg-wrap table {width:90%;}
.tg-wrap th     {width:10%;}
.tg  {border-collapse:collapse;border-spacing:0;}
.tg ul li {font-size: 1em;}
.tg td, 
.tg th {padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal; border-color:#eee;}
.tg th { background: #eee; border-color: white;}
.tg .tg-0lax{text-align:left;vertical-align:top }
.notes li {font-size: 0.8em !important; padding: 3px 0;}
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}



.layout-button-container button {
-moz-box-shadow:inset 0px 1px 0px 0px #dbbd8c;
  -webkit-box-shadow:inset 0px 1px 0px 0px #dbbd8c;
  box-shadow:inset 0px 1px 0px 0px #dbbd8c;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffa41c), color-stop(1, #ff9d00));
  background:-moz-linear-gradient(top, #ffa41c 5%, #ff9d00 100%);
  background:-webkit-linear-gradient(top, #ffa41c 5%, #ff9d00 100%);
  background:-o-linear-gradient(top, #ffa41c 5%, #ff9d00 100%);
  background:-ms-linear-gradient(top, #ffa41c 5%, #ff9d00 100%);
  background:linear-gradient(to bottom, #ffa41c 5%, #ff9d00 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa41c', endColorstr='#ff9d00',GradientType=0);
  background-color:#ffa41c;
  border:1px solid #eb9721;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:13px;
  font-weight:bold;
  padding:6px 12px;
  text-decoration:none;
}
.layout-button-container button:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff9d00), color-stop(1, #ffb545));
  background:-moz-linear-gradient(top, #ff9d00 5%, #ffb545 100%);
  background:-webkit-linear-gradient(top, #ff9d00 5%, #ffb545 100%);
  background:-o-linear-gradient(top, #ff9d00 5%, #ffb545 100%);
  background:-ms-linear-gradient(top, #ff9d00 5%, #ffb545 100%);
  background:linear-gradient(to bottom, #ff9d00 5%, #ffb545 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9d00', endColorstr='#ffb545',GradientType=0);
  background-color:#ff9d00;
}
.layout-button-container button:active {
  position:relative;
  top:1px;
}

/*ACCORDION*/

.accordion {
  background-color: #fff;
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-top: 1px solid #eee;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  transition: 0.4s;
  font-weight: 700;
  font-size: 0.95em;
  font-family: 'Open Sans', Helvetica, sans-serif;
}

.accordionactive, .accordion:hover {
  background-color: #fff5e5;
}

.panel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  padding: 0 15px;
}

.panel p {font-size: 0.95em; margin: 10px 0; }

.accordion:before {
  content: '\002B'; /* Unicode character for "plus" sign (+) */
  float: right;
  font-size: 1.9em;
  line-height: 1;
  display: block;
  padding-left: 15px;
  color: #ff9c00;
}

.accordionactive:before {
  content: "\2212"; /* Unicode character for "minus" sign (-) */
  color: #ff9c00;
}

/*HELPERS*/
.giving {
  font-size: 3.4em;
  line-height: 1em;
}

.m   {margin:0.3125rem;}.mm{margin:0.625rem;}.mmm{margin:0.9375rem;}.mmmm{margin: 1.25rem;}.mt{margin-top:0.3125rem;}.mmt{margin-top:0.625rem;}.mmmt{margin-top:0.9375rem;}.mmmmt{margin-top:1.25rem;}.ml{margin-left:0.3125rem;}.mml{margin-left:0.625rem;}.mmml{margin-left:0.9375rem;}.mmmml{margin-left:1.25rem;}.mb{margin-bottom:0.3125rem;}.mmb{margin-bottom:0.625rem;}.mmmb{margin-bottom:0.9375rem;}.mmmmb{margin-bottom:1.25rem;}.mr{margin-right:0.3125rem;}.mmr{margin-right:0.625rem;}.mmmr{margin-right:0.9375rem;}
.p   {padding:0.3125rem;}.pp{padding:0.625rem;}.ppp{padding:0.9375rem;}.pppp{padding:1.25rem;}.pt{padding-top:0.3125rem;}.ppt{padding-top:0.625rem;}.pppt{padding-top:0.9375rem;}.ppppt{padding-top:1.25rem;}.p{padding-left:0.3125rem;}.ppl{padding-left:0.625rem;}.pppl{padding-left:0.9375rem;}.ppppl{padding-left:1.25rem;}.pb{padding-bottom:0.3125rem;}.ppb{padding-bottom:0.625rem;}.pppb{padding-bottom:0.9375rem;}.ppppb{padding-bottom:1.25rem;}.pr{padding-right:0.3125rem;}.ppr{padding-right:0.625rem;}.pppr{padding-right:0.9375rem;}.ppppr{padding-right: 1.25rem;}

.clear      {clear: both;}
.left       {float: left;}
.right      {float: right;}
.center     {margin: 0 auto; }
.block      {display: block;}
.none       {display: none;}
.absolute   {position: absolute;}
.relative   {position: relative;}
.fixed      {position: fixed;}

.text-help    {color: #a3a3a3;}
.text-smallest{font-size: 0.875em; line-height: 1.5em; display: inline-block;}
.text-smaller {font-size: 1em; line-height: 1.7em; display: inline-block;}
.text-bigger  {font-size: 1.125em; display: inline-block;}
.text-biggest {font-size: 1.25rem; display: inline-block;}
.text-right   {text-align: right;}
.text-left    {text-align: left;}
.text-center  {text-align: center; margin-left: auto; margin-right: auto;}
.text-normal  {line-height: normal;}
.text-caps    {text-transform: uppercase;}

.radius-small {border-radius: 5px;}
.radius-medium{border-radius: 10px;}
.radius-big   {border-radius: 15px;}
.radius-full  {border-radius: 50%;}

.full-width {width: 100%;}
.half-width {width: 50%;}
.third-width {width: 30%;}
.fourth-width {width: 20%;}

.tansition    {transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; }

.orange {color: #ff9c00;}
.green {color: #94bf0e;}
.purple {color: #812c6c;}
.pink {color: #DD4A85;}
.gray {color: #a8a8a8;}
.blue {color: #0ea0bf;}


/*MOBILE EXPECTIONS*/

@media only screen and (max-width: 768px) {  /* 540px */

nav {font-size: 11px;}
nav .container {width: 97%;}
nav .col-2 {width:17%;}
nav .row [class^="col"] {margin:0.5rem 1%;} 
nav a {padding: 4px;}
h1 {font-size: 2.3em;}
#logo {left: 41%; top: 3px;}
#logo-image {width: 50px; height: 50px;}

.intro {padding-top: 6vh;}
.intro h1, .builder {font-size: 6.8vw;}
.hi  {font-size: 13vw;}
.process img,
.learned img { width: 80vw; }
.weapons h2 {font-size: 1.6em;}
#case-logos img {width: 90vw;}
.email { font-size: 12vw; }
.fullwidth {width:95%;}
.giving {text-align:center;font-size:3.5em;}
}

.layout {width: 100%;}