*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
}


body {
	background-color: #333;
}

body {
	font-size: 1.1em;
	font-family: Raleway;
	line-height: normal;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

h1 {
	font-size: 2em;
	font-weight: 400;
	line-height: normal;
	text-align: center;
	display: block;
	color: #acacac;
}

k {
  font-family: "Raleway";
  font-size: 1.em;
  font-weight: 500;
  line-height: 1.15em;
  color: white;
  opacity: .7; 
}

b {
  font-family: "Raleway";
  font-size: 5em;
  font-weight: 800;
  text-align: center;
  display: block;
  color: white;
  letter-spacing: -2px;
}

img {
  height: auto;
  max-width: 100%;
}

a {
  color: #FFF;
  text-decoration: none;
}
a:hover {
  color: yellow;
  text-decoration: underline;
}

.site__wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}

.site__info {
	clear: both;
	position: absolute;
	bottom: -20%;
	padding: 1em;
	display: block;
	color: #cccccc;
	font-variant: none;
	letter-spacing: 2px;
	left: 50%;
	transform: translate(-50%, -50%);
}

.grid {
  float: none;
  width: 100%;
  padding-left: 0.3em;
  padding-right: 0.5em;
  padding-bottom: 0.6em;
}
@media screen and (min-width: 40.063em) {
  .grid {
    float: left;
    width: 33.333%;
  }
}

.card__image {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  display: block;
  min-height: 240px;
  overflow: hidden;
  position: relative;
}
.card__image > img {
  display: block;
  margin-bottom: 0;
  width: 100%;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
.card__image:hover > img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

.card__title {
	color: #fff;
	display: inline-block;
	font-family: Raleway;
	font-size: 1.25em;
	font-weight: 500;
	line-height: 1;
	text-transform: capitalize;
}
.card__title:hover {
  color: yellow;
  font-size: 1.25em;
  text-decoration: none;
}

.card__overlay {
  content: "";
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}

.card__overlay--indigo {
  background-image: linear-gradient(to bottom, rgba(92, 107, 192, 0.1), rgba(92, 107, 192, 0.8));
  z-index: 2;
}

.card__overlay--blue {
  background-image: linear-gradient(to bottom, rgba(41, 182, 246, 0.1), rgba(41, 182, 246, 0.8));
  z-index: 2;
}

.card__overlay-content {
  position: absolute;
  bottom: 0;
  padding: 1.5em;
  z-index: 3;
}

.card__meta {
  margin: 0;
  margin-right: -1em;
  margin-bottom: 0.75em;
}
.card__meta.card__meta--last {
  margin-bottom: 0;
}
.card__meta li {
  color: #f8f8f8;
  display: inline;
  list-style-type: none;
  margin-bottom: 0;
  padding-right: 1em;
  font-size: 0.85em;
  font-variant: small-caps;
  letter-spacing: 1px;
}
.card__meta li:not(:last-child):after {
  content: "\25cf";
  font-style: normal;
  position: relative;
  color: rgba(255, 255, 255, 0.25);
  right: -0.6em;
}
.card__meta li > a {
  color: #f8f8f8;
}
#slideOut {
  position: fixed;
  width: 300px;
  height: 800px;
  top: 30px;
  right: -300px;
  /* Animation  */
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
          transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}


/* Display slideOut */

.showSlideOut {
  right: 0px !important;
}


/* Tab */

.slideOutTab {
  margin-top: 50px;
  position: absolute;
  left: -40px;
  height: 200px;
  width: 40px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  background: #F2AB34;
  border-radius: 15px 0px 0px 15px
}

.slideOutTab div {
  text-align: center;
  position: relative;
  right: 70px;
  top: 90px;
  background: #F2AB34;
  width: 180px;
  -webkit-transform: rotate(-270deg);
  -moz-transform: rotate(-270deg);
  -o-transform: rotate(-270deg);
  -webkit-writing-mode: lr-tb;
      -ms-writing-mode: lr-tb;
          writing-mode: lr-tb;
}

.main {
  min-height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main .click-button {
  height: 30px;
  width: 30px;
  background-color: #fff;
  margin: 0 auto;
  cursor: pointer;
  border-radius: 6px;
  display: block;
  position: absolute;
}
.main .click-button:before {
  content: "";
  height: 50px;
  width: 50px;
  border: 4px solid #fff;
  display: block;
  border-radius: 50%;
  position: relative;
  top: -14px;
  left: -14px;
  opacity: 0.9;
  visibility: hidden;
}
.main .click-button:hover:before {
  visibility: visible;
  transform: scale(1.4);
  opacity: 0;
  transition: all ease-out 0.4s;
}
.main .popup {
  width: 300px;
  background-color: #fff;
  border-radius: 6px;
  position: absolute;
  padding: 70px 15px;
  text-align: center;
  top: calc(50% - 190px);
  left: calc(50% - 150px);
  margin: 0 auto;
  visibility: hidden;
  transform: scale(0);
  transition: all ease-out 0.3s;
}
.main .popup:target {
  visibility: visible;
  transform: scale(1);
  transition: all ease-out 0.3s;
}
.main .popup .logo {
  height: 12px;
  width: 12px;
  background-color: #F4511E;
  border-radius: 50%;
  margin: 0 auto 50px;
}
.main .popup .logo::before {
  content: "";
  height: 12px;
  width: 12px;
  background-color: #00ACC1;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  position: absolute;
  bottom: -12px;
  left: 7px;
}
.main .popup .logo:after {
  content: "";
  height: 12px;
  width: 12px;
  background-color: #8E24AA;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  position: absolute;
  bottom: -12px;
  left: -7px;
}
.main .popup h1,
.main .popup p,
.main .popup .logo,
.main .popup .btn {
  opacity: 0;
  transform: translateY(-10px);
  transition: all ease-out 0.5s;
}
.main .popup:target h1,
.main .popup:target p,
.main .popup:target .logo,
.main .popup:target .btn {
  opacity: 1;
  transform: translateY(0);
  transition: all ease-out 0.5s;
  transition-delay: 0.5s;
}
.main .popup:target .logo {
  transition-delay: 0.2s;
}
.main .popup:target h1 {
  transition-delay: 0.4s;
}
.main .popup:target p {
  transition-delay: 0.6s;
}
.main .popup:target .btn {
  transition-delay: 0.8s;
}
.main .popup h1 {
  color: #655f5f;
  margin-bottom: 20px;
}
.main .popup p {
  color: #909090;
  line-height: 22px;
  padding: 0 20px;
}
.main .btn {
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  background-color: #03A9F4;
  display: inline-block;
  margin-top: 20px;
}