/*styles for TK project*/

@import url('https://fonts.googleapis.com/css?family=Roboto:300.300i,400,400i,700,700i');
@import url("https://use.typekit.net/gyc4alb.css");

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  /* display: flex;
  flex-direction: column; */
  height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
  margin: 0;
  padding: 0;
  font-family: ff-meta-serif-web-pro, "Georgia", serif;
}

h1 {
  font-family: aktiv-grotesk-condensed, "Arial Narrow", sans-serif;
  font-size: 7vw;
  text-align: center;
  /* text-transform: uppercase; */
  color: rgba(237, 27, 52, 1);
  margin: .75vw auto;
}

h2.intro {
  font-size: 2.5vw;
  font-weight: 300;
}

.content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  width: 1000px;
  display: block;
  margin: auto;
}

#sunburstViz {
  position: relative;
}

.linkish {
  color: rgba(62, 151, 211, 1);
  text-decoration: underline;
  text-align: right;
  font-size: 1.5vw;
  cursor: pointer;
}

#ex .linkish {
  font-size: 12px;
}

a:link {
  color: rgba(62, 151, 211, 1);
}

a:visited {
  color: rgba(29, 68, 102, 1);
}

a:hover, a:active, .linkish:hover, .linkish:active {
  color: rgba(237, 27, 52, 1);
}

.center {
  width: 35vw;
  height: 35vw;
  position: absolute;
  left: 32.5vw;
  top: 32.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center * {
  width: 35vw;
}

#intialContent {
  text-align: center;
}

#content {
  display: none;
}

.cat {
  font-family: aktiv-grotesk-condensed, "Arial Narrow", sans-serif;
  text-transform: uppercase;
  font-size: 1.35vw;
}

#ex .cat {
  font-size: 12px;
}

.title {
  font-family: aktiv-grotesk-condensed, "Arial Narrow", sans-serif;
  margin: .5vw 0;
  font-size: 3.5vw;
  color:  rgba(237, 27, 52, 1);
}

#ex .title {
  font-size: 32px;
}

.outerTitle {
  color: white;
  background-color: rgba(237, 27, 52, 1);
  padding: .5vw;
}

#ex {
  position: absolute;
  align-items: center;
  width: 95%;
  height: 95%;
  margin: 2.5vw;
  max-width: 940px;
  justify-content: center;
  display: none;
}

#ex div {
  border: solid 1px black;
  background-color: white;
  padding: 1em;
  width: 100%;
  max-width: 600px;
  margin: auto;
  box-shadow: 2px 5px 4px rgba(0,0,0, .5);
}

.examples p {
  margin: 0;
}

.red {
  fill: rgb(237, 27, 52);
  cursor: pointer;
}

.blue {
  fill: rgb(62, 151, 211);
  cursor: pointer;
}

.darkred {
  fill: rgb(124, 26, 40);
  cursor: pointer;
}

.blue + text, .red + text, .darkred + text {
  fill: white;
}


.labels {
  fill: 44, 32, 31;
  pointer-events: none;
  font-size: 14.4px;
  font-weight: 300;
}

p.short {
  font-size: 1.75vw;
}

.no {
  display: none;
}

p {
  font-size: 1rem;
}

footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 2rem;
  text-align: center;
  background: lightgrey;
  color: white;
  min-width: 1000px;
}

footer p {
  color: black;
  font-size: .75em;
}

@media only screen and (max-width: 950px) {

  #ex {
    position: fixed;

  }

}