@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(http://fonts.googleapis.com/css?family=Montserrat:700);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);

/* NAVIGATION */

  html, body {
      margin: 0;
      padding: 0;
      width: 100%;
  }
  h1{
  	text-align: center;
  	font-family: 'Montserrat', sans-serif;
  	color: #333;
  }
  body {
      font-family: "Helvetica Neue",sans-serif;
      font-weight: lighter;
  }

  header {
      width: 100%;
      height: 100vh;  
      background-size: cover;
  }

  .logo {
      line-height: 60px;
      position: fixed;
      float: left;
      margin: 16px 46px;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      letter-spacing: 2px;
  }
  nav {
      position: fixed;
      width: 100%;
      line-height: 60px;
  }

  nav ul {

      line-height: 35px;
      list-style: none;
      background: rgba(0, 0, 0, 0);
      overflow: hidden;
      color: #fff;
      padding: 0;
      text-align: right;
      margin: 0;
      padding-right: 40px;
      transition: 1s;
  }

  nav.black ul {
      background: #000;
  }

  nav ul li {
      display: inline-block;
      padding: 12px 30px;;
  }
  nav ul li:hover {
      display: inline-block;
      padding: 12px 30px;

      border-radius: 5px;
      transition: 1000ms;
      background-color: rgba(128, 128, 128, 0.374);
  }

  nav ul li a {
      text-decoration: none;
      color: #fff;
      font-size: 16px;
  }
  nav ul li a:hover {
      text-decoration: none;
      color: #fff;
      font-size: 16px;
      transition: 1000ms;
  }
  .icon-bar {
      line-height: 60px;
      width: 100%;
      background: #000;
      text-align: right;
      box-sizing: border-box;
      padding: 15px 24px;
      cursor: pointer;
      color: #fff;
      display: none;
  }
  @media(max-width: 1220px) {
      .logo {
            position: fixed;
            top: 0;
            margin-top: 16px;
      }
      nav ul {
            max-height: 0px;
            background: #000;
      }

      nav.black ul {
            background: #000;
      }

      .showing {
            max-height: 34em;
      }

      nav ul li {
            box-sizing: border-box;
            width: 100%;
            padding: 24px;
            text-align: center;
      }

      .icon-bar {
            display: block;
      }

  }

  .searchbar{
      background-color: #353b48;
      border-radius: 30px;
      padding: 10px;
      }

      .search_input{
      color: white;
      border: 0;
      outline: 0;
      background: none;
      width: 0;
      line-height: 0px;
      transition: width 0.2s linear;
      }

      .searchbar:hover > .search_input{
      padding: 0 10px;
      width: 250px;
      caret-color:red;
      transition: width 0.2s linear;
      }

      .searchbar:hover > .search_icon{
      background: white;
      color: #e74c3c;
      }

      .search_icon{
      height: 40px;
      width: 40px;
      float: right;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      color:white;
      }

  /* TYPING TEXT */
  .text{
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .text p{
    color: rgb(111, 114, 111);
    font-family: "Courier";
    font-size: 1.6em;
    /* margin-left:20%; */
    margin-top: 3.9vw;
    white-space: nowrap;
    overflow: hidden;
    width: 454px;
    animation: type 4s steps(1000, end);

  }

  .text span{
    animation: blink 0.8s infinite;
  }

  @keyframes type{
    from { width: 0; }
  }

  @keyframes blink{
    to{opacity: .0;}
  }

  @media screen and (max-width: 500px){
    .text{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .text p{
      font-size: 1.1em;
      text-align: center;
      }
  }

/* ACCORDATION */
.accordion ul{
  max-width: 78.83vw;
  background-color: pink;
	width: 100%;
	display: table;
	table-layout: fixed;
  margin: 3.6vw auto;
	padding: 0;
}
.accordion ul li{
    background-color: orange;
	display: table-cell;
	vertical-align: bottom;
	width: 16.666%;
	height: 250px;
	background-repeat: no-repeat;
	background-position: center center;
	transition: all 500ms ease;
}
.accordion ul li div{
	display: block;
	overflow: hidden;
	width: 100%;
}
.accordion ul li div a{
	display: block;
	height: 250px;
	width: 100%;
	position: relative;
	z-index: 3;
	
	padding: 15px 20px;
	box-sizing: border-box;
	color: #fff;
	text-decoration: none;
	font-family: 'Lato', sans-serif;
	transition: all 200ms ease;
}
.accordion ul li div a *{
	opacity: 0;
	margin: 0;
	width: 100%;
	text-overflow: ellipsis;
	position: relative;
	z-index: 5;
	white-space: nowrap;
	overflow: hidden;
}
.accordion ul li div a h2{
	font-family: "Montserrat", sans-serif;
	text-overflow: clip;
	font-size: 24px;
	text-transform: uppercase;
    margin-bottom: 2px;
    margin-left:5px;
	top: 160px;
}
.accordion ul li div a p{
	top: 160px;
    font-size: 13.5px;
    margin-top: 5px;
    margin-left:5px;
}
.accordion ul li:nth-child(1){
	background-image: url("http://lorempixel.com/650/250/");
}
.accordion ul li:nth-child(2){
	background-image: url("http://lorempixel.com/660/250/")
}
.accordion ul li:nth-child(3){
	background-image: url("http://lorempixel.com/675/250/");
}
.accordion ul li:nth-child(4){
	background-image: url("http://lorempixel.com/680/250/");
}
.accordion ul li:nth-child(5){
	background-image: url("http://lorempixel.com/690/250/");
}
.accordion ul li:nth-child(6){
	background-image: url("http://lorempixel.com/695/250/");
}
.accordion ul:hover li{
	width: 8%;
}
.accordion ul:hover li:hover{
	width: 60%;
}
.accordion ul:hover li:hover a{
	background: rgba(0, 0, 0, 0.4);
}
.accordion ul:hover li:hover a *{
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
@media screen and (max-width: 600px){
	body{
		margin: 0;
	}
	.accordion{
		height: auto;
    width:100%;
	}
	.accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover{
		position: relative;
		display: table;
    width: 100%;
		table-layout: fixed;
	}
}

  /* COLUMNS */

  .card3 .row{
      /* set the display to flex so that all of the items within the div will line up in a neat row */
      max-width: 100%;
      color: #fff;
      margin-top: 7.4px;
      margin-right: -30px;
      margin-left: 0px;
  }

  .card3 .column{
      cursor: pointer;
      display: inline-block;
      font-size: 1rem;
      font-weight: 200;
      padding: 3em 0;
      text-align: center;
      /* we should add some easing to make for a nice transition on hover */
      transition: transform .1s ease-in;
      width: 28%;
      z-index: 1;
      /* display: flex; */
  }

  .card3 .column p{
      margin: 0 auto;
      width: 50%;
  }
  @media only screen and (max-width: 830px){
    .card3 .column p{
        margin: 0 auto;
        width: 100%;
        padding:0px 3px;
        font-size: 0.8em;
    }

    }
  .card3 .column:hover{
      transform: scale(1.1);
      z-index: 2;
  }



/* CONTENT */

  .content {
      width: 94%;
      margin: 4em auto;
      font-size: 20px;
      line-height: 30px;
      text-align: justify;
  }


  /* GRID  ANIMATION */

  .animation * {margin: 0; padding: 0; 	background: rgb(253, 125, 39);}
  .animation {text-align: center; overflow: hidden;  }

  .animation .grid {
  	width: 55vw; margin: 0px auto 5vw auto;
    perspective: 300px; /*For 3d*/
    padding-top: 2vw;
  }
  .animation .grid img {width: 5.2vw; height: 5.2vw; display: block; float: left;}

  .animation .animate {
  	background: rgb(253, 125, 39); color: white;
    padding: 387px 50%;
    padding-bottom: 10px;
    cursor: pointer;
  }

  @media only screen and (max-width: 850px){
    .animation .grid {
      width: 75.625vw;
    }
    .animation {text-align: center; overflow: hidden;  }
    .animation .grid img {width: 7.15vw; height: 7.15vw; display: block; float: left;}
  }

  /* POST CARDS */

      .post{
          width: 50%;
          float: left;
          height:75vh;
          color: #ffffff;
          display: table;
          transition: background .4s ease-in-out;
            padding: 10px 10px 10px 10px;
      }
      .red{
          background: #874b59;
      }
      .red:hover{
          background: #73404c;
      }
      .red .date{
          color: #d2adb7;
      }
      .green{
          background: #064f49;
      }
      .green .date{
          color: #0da699;
      }
      .green:hover{
          background: #042f2c;
      }
      .purple{
          background: #9386a7;
      }
      .purple .date{
          color: #bdb5c9;
      }
      .purple:hover{
          background: #7b6b94;
      }
      .mustard{
          background: #b38410;
      }
      .mustard .date{
          color: #f2ce73;
      }
      .mustard:hover{
          background: #8c680d;
      }
/* blockquote */
      blockquote {
          margin: 0 auto;
          padding: 0.8em;
          border-left: 5px solid rgb(12, 12, 12);
        }

       blockquote p {
          color: rgb(0, 0, 0);
          font-size: 12pt;
          line-height: 1.4;
          font-family: 'PT Serif', Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif;
        }
         blockquote footer {
          margin-top: .5em;
          color: rgb(7, 7, 7);
          font-size: 12pt;
          text-align: left;
          font-style: italic;
        }
         blockquote footer:before {
          content: '\2014   ';
        }
         blockquote:nth-of-type(even) {
          text-align: right;
          border-left: none;
          border-right: 5px solid rgb(7, 7, 7);
        }
         blockquote:nth-of-type(even) footer {
          text-align: right;
        }
         blockquote:nth-of-type(even) footer:before {
          content: '';
        }
         blockquote:nth-of-type(even) footer:after {
          content: ' \2014';
        }
        /* @element 'blockquote' and (min-width: 300px) {
        } */


      /* responsive stylings */
      @media only screen and (max-width: 850px){
          .post{
              width: 100%;
              height: auto;
          }
          .post .date{
              font-size: .9em;
          }
        }

      @media only screen and (max-width: 510px){
    figure.pic  p {
      font-size:.85em;
      font-weight: bolder;
    }
    figure.pic  h2 {
      font-size:1.5em;
    }}
    @media only screen and (max-width: 440px){
  figure.pic  p {
    font-size:.65em;
  }
  figure.pic  h2 {
    font-size:1em;
  }

}

      figure.pic {
        font-family: 'Raleway', Arial, sans-serif;
        color: #fff;
        position: relative;
        overflow: hidden;
        margin: 10px;
        min-width: 220px;
        max-width: 620px;
        max-height: 62vh;
        width: 100%;
        height: 100%;
        background: #000000;
        text-align: left;
      }
      figure.pic * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      figure.pic img {
        max-width: 100%;
        opacity: 1;
        width: 100%;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
      }
      figure.pic figcaption {
        position: absolute;
        overflow: hidden;
        bottom: 0;
        left: 0;
        padding: 30px 3em;
        width: 100%;
        height: 100%;
      }
      figure.pic figcaption::before {
        position: absolute;
        top: 30px;
        right: 30px;
        bottom: 30px;
        left: 100%;
        border-left: 4px solid rgba(255, 255, 255, 0.8);
        content: '';
        opacity: 0;
        background-color: rgba(255, 255, 255, 0.5);
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        -webkit-transition-delay: 0.6s;
        transition-delay: 0.6s;
        -webkit-filter: brightness(100%);
        filter:brightness(100%);

      }
      figure.pic h2,
      figure.pic p {
        margin: 0 0 5px;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
      }
      figure.pic h2 {
        word-spacing: -0.15em;
        font-weight: 300;
        border-top: 50px ;
        text-transform: uppercase;
        -webkit-transform: translate3d(30%, 0%, 0);
        transform: translate3d(30%, 0%, 0);
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
      }

      figure.pic p {
        font-weight: 200;
        -webkit-transform: translate3d(0%, 30%, 0);
        transform: translate3d(0%, 30%, 0);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
      }
      figure.pic:hover img {
        opacity: 0.3;
        -webkit-filter: brightness(50%);
        filter:brightness(50%) ;
      }
      figure.pic:hover figcaption h2 {
        opacity: 1;
        -webkit-transform: translate3d(0%, 0%, 0);
        transform: translate3d(0%, 0%, 0);
        -webkit-transition-delay: 0.4s;
        transition-delay: 0.4s;
      }
      figure.pic:hover figcaption p {
        opacity: 0.9;
        -webkit-transform: translate3d(0%, 0%, 0);
        transform: translate3d(0%, 0%, 0);
        -webkit-transition-delay: 0.6s;
        transition-delay: 0.6s;
      }
      figure.pic:hover figcaption::before {
        background: rgba(255, 255, 255, 0);
        left: 30px;
        opacity: 1;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
      }


/* PRICE TAGS */

  #price {
  margin:10px 50px 0px 25vw;
  	text-align: center;
    width: 892px;
    display:flex;
  }

  #price .plan {
  	font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
  	text-shadow: 0 1px rgba(255,255,255,.8);
  	background: #fff;
  	border: 1px solid #ddd;
  	color: #333;
    margin-top:20px;
  	padding: 20px;
  	width: 180px;
  	position: relative;
  }

  #price #box {
  	z-index: 2;
  	top: -13px;
  	border-width: 3px;
  	padding: 30px 20px;
  	-moz-border-radius: 5px;
  	-webkit-border-radius: 5px;
  	border-radius: 5px;
  	-moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
  	-webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
  	box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
  }

  #price .plan:nth-child(1) {
  	-moz-border-radius: 5px 0 0 5px;
  	-webkit-border-radius: 5px 0 0 5px;
  	border-radius: 5px 0 0 5px;
  }

  #price .plan:nth-child(4) {
  	-moz-border-radius: 0 5px 5px 0;
  	-webkit-border-radius: 0 5px 5px 0;
  	border-radius: 0 5px 5px 0;
  }

  #price .signup {
  	position: relative;
  	padding: 8px 20px;
  	margin: 20px 0 0 0;
  	color: #fff;
  	font: bold 14px Arial, Helvetica;
  	text-transform: uppercase;
  	text-decoration: none;
  	display: inline-block;
  	background-color: #72ce3f;
  	background-image: -moz-linear-gradient(#72ce3f, #62bc30);
  	background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
  	background-image: -o-linear-gradient(#72ce3f, #62bc30);
  	background-image: -ms-linear-gradient(#72ce3f, #62bc30);
  	background-image: linear-gradient(#72ce3f, #62bc30);
  	-moz-border-radius: 3px;
  	-webkit-border-radius: 3px;
  	border-radius: 3px;
  	text-shadow: 0 1px 0 rgba(0,0,0,.3);
  	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
  	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
  	box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
  }

  #price .signup:hover {
  	background-color: #62bc30;
  	background-image: -moz-linear-gradient(#62bc30, #72ce3f);
  	background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
  	background-image: -o-linear-gradient(#62bc30, #72ce3f);
  	background-image: -ms-linear-gradient(#62bc30, #72ce3f);
  	background-image: linear-gradient(#62bc30, #72ce3f);
  }

  #price .signup:active, #price .signup:focus {
  	background: #62bc30;
  	top: 2px;
  	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
  	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
  	box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
  }

  #price ul {
  	margin: 20px 0 0 0;
  	padding: 0;
  	list-style: none;
  }

  #price li {
  	border-top: 1px solid #ddd;
  	padding: 10px 0;
  }

  #price h3 {
  	font-size: 20px;
  	font-weight: normal;
  	padding: 20px;
  	margin: -20px -20px 50px -20px;
  	background-color: #eee;
  	background-image: -moz-linear-gradient(#fff,#eee);
  	background-image: -webkit-linear-gradient(#fff, #eee);
  	background-image: -o-linear-gradient(#fff, #eee);
  	background-image: -ms-linear-gradient(#fff, #eee);
  	background-image: linear-gradient(#fff, #eee);
  }

  #price #box h3 {
  	background-color: #ddd;
  	background-image: -moz-linear-gradient(#eee,#ddd);
  	background-image: -webkit-linear-gradient(#eee, #ddd);
  	background-image: -o-linear-gradient(#eee, #ddd);
  	background-image: -ms-linear-gradient(#eee, #ddd);
  	background-image: linear-gradient(#eee, #ddd);
  	margin-top: -30px;
  	padding-top: 30px;
  	-moz-border-radius: 5px 5px 0 0;
  	-webkit-border-radius: 5px 5px 0 0;
  	border-radius: 5px 5px 0 0;
  }

  #price .plan:nth-child(1) h3 {
  	-moz-border-radius: 5px 0 0 0;
  	-webkit-border-radius: 5px 0 0 0;
  	border-radius: 5px 0 0 0;
  }

  #price .plan:nth-child(4) h3 {
  	-moz-border-radius: 0 5px 0 0;
  	-webkit-border-radius: 0 5px 0 0;
  	border-radius: 0 5px 0 0;
  }

  #price h3 span {
  	display: block;
  	font: bold 25px/100px Georgia, Serif;
  	color: #777;
  	background: #fff;
  	border: 5px solid #fff;
  	height: 100px;
  	width: 100px;
  	margin: 10px auto -65px;
  	-moz-border-radius: 100px;
  	-webkit-border-radius: 100px;
  	border-radius: 100px;
  	-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
  	-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
  	box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
  }

  /* FOOTER TOOLTIP ICON */
  @media only screen and (max-width: 1350px){
    #price {
      width:50vw;
      display: grid;
      justify-content: center;
      grid-gap: 2px;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto;
      grid-template-areas:
      "plan1 plan2"
      "plan3 plan4"

    }
    #price .plan {
    	width:40vw;

    	position: relative;
    }

  }


  footer a{
      background: rgba(210, 215, 211, 0.356);
      border-radius: 100%;
      display: inline-block;
      text-align: center;
      text-decoration: none;
      position: relative;
      width: 50px;
      height: 50px;
      padding-top: 12px;
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      transition: all .5s;
      text-decoration: none;
      margin: 45px 8px 38px 8px;
  }
  a.icon:before{
      font-family: "FontAwesome", sans-serif;
      color: #fff;
      font-size: 20px;
  }
  a.facebook:before{
      content: '\f09a';
  }
  a.twitter:before{
      content: '\f099';
  }
  a.github:before{
      content: '\f113';
  }
  a.dribble:before{
      content: '\f17d';
  }
  a.pinterest:before{
      content: '\f0d2';
  }
  /* hover over the icons now to see the tooltips! */
  a.facebook:hover{
      background-color: #4183d7;
      color: #bfbfbf;
      text-decoration: none;
  }
  a.facebook span{
      color: #4183d7;
      text-decoration: none;
  }
  a.twitter:hover{
      background-color: #19b5fe;
      color: #fff;
      text-decoration: none;
  }
  a.twitter span{
      color: #19b5fe;
      text-decoration: none;
  }
  a.github:hover{
      background-color: #000;
      color: #fff;
      text-decoration: none;
  }
  a.github span{
      color: #000;
      text-decoration: none;
  }
  a.dribble:hover{
      background-color: #f62459;
      color: #fff;
      text-decoration: none;
  }
  a.dribble span{
      color: #f62459;
      text-decoration: none;
  }
  a.pinterest:hover{
      background-color: #f22613;
      color: #fff;
      text-decoration: none;
  }
  a.pinterest span{
      color: #f22613;
      text-decoration: none;
  }
  a span{
      background: #fff;
      color: #222;
      font-size: 14px;
      font-weight: bold;
      position: absolute;
      bottom: 0;
      left: -20px;
      right: -25px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid #ffffff44;
      padding: 5px 7px;
      visibility: hidden;
      opacity: 0;
      -webkit-transition: all .4s;
      transition: all .4s;
      text-decoration: none;
  }
  a span:before{
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #ffffff44;
    position: absolute;
    bottom: -5px;
      left: 40px;
  }
  a:hover span{
      bottom: 57px;
      visibility: visible;
      opacity: 1;
      text-decoration: none;
  }