body {
    background: url(images/new.jpg);
    font-size: 16px;
    font-family: 'Heebo', sans-serif;
    margin: 0;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    margin-left: -2.5em;
}

strong{
	font-size: 18px;
}

.desc{
	background: rgba(0,0,0,.1);
	padding: .5em 1em;
	margin-top: 1em;
}

.project2 .desc{
  background: rgba(255,255,255,.1);
}

.project2 .desc ul li{
  color: rgba(255, 250, 250, .9);
}

.desc a{
	color: black;
	text-decoration: underline;
}

.project2 .desc a{
  color: white;
}

.project2 .desc a:hover{
  color: red;
}

.desc ul li{
	margin: 0 0 15px 0;
  color: ;

}

.main ul li {
    background: rgba(0, 0, 0, .8);
    padding: .5em .8em;
    margin-right: .5em;
}

nav ul li a {
    font-size: 15px;
}

a {
    color: rgba(255, 240, 240, .7);
    text-decoration: none;
}

a:hover {
    color: red;
    cursor: pointer; 
}

.sticky {
  margin: 0 auto;
  width: 100%;
  position:fixed;
  background: rgba(255,255,255,.8);
  top:0;
  left:0;
  z-index: 100;
  justify-content: center;
}
.sticky nav ul li{
  margin-left: .6em;
  margin-right: .1em;
}

/* Layout
------------------------------------------*/

header,
.container,
footer {
    margin: 0 auto;
    width: 88%;
    max-width: 1080px;
}

.icons {
    background: rgba(255, 255, 255, .5);
    height: auto;
}

.icons ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 1em;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

/*.wrapper {
    padding: 1em 0;
    background: #ffffff;
}*/

/*img {
    width: 100%;
}
*/

.icons .hovereffect img{
	opacity: .85;
}

/*Typography
------------------------------------------*/

h1 {
    color: rgba(222, 213, 213, .6);
    background: rgba(0, 0, 0, .8);
    font-size: 20px;
    display: block;
    margin: 0 auto;
    text-align: center;
    font-family: 'Frijole', cursive;
    margin-top: 1.5em;
    letter-spacing: 5px;
}

h2 {
    color: rgba(50, 32, 32, .9);
    font-size: 22px;
    display: block;
    margin: 0 auto;
    text-align: center;
    font-family: 'Frijole', cursive;
    /*margin-top: 1em;*/
    padding-top: 1em;
    letter-spacing: 5px;
}

.about h2{
  margin-bottom: 1em;
}

h3{
	  color: rgba(50, 32, 32, .9);
    font-size: 14px;
    display: block;
    margin: 0 auto;
    text-align: center;
    font-family: 'Frijole', cursive;
    /*margin-top: 1em;*/
    padding-top: 1em;
    letter-spacing: 2px;
}


#html,
#css,
#js,
#jq,
#wp,
#sass,
#ai,
#ps,
#id,
#ae,
#pr,
#flash{
  color: white;
  font-weight: 700;
  font-size: 18px;
  margin: 1em 0;
  height: 40px;
}

.web-works{
  margin-top: .5em;
  font-size: 22px;
  letter-spacing: 5px;
}

.skills h2,
.contact h2{
  color: rgba(255, 250, 250, .8);
}

.project{
	background: rgba(255,255,255, .5);
	height: auto;
	display: flex;
	flex-direction: column;
	/*align-items: center;*/
	margin-top: 1em;
	padding: 2em;
}

.project2{
	background: rgba(0,0,0,.5);
		height: auto;
	display: flex;
	flex-direction: column;
	/*align-items: center;*/
	margin-top: 1em;
	padding: 2em;
}

.desc ul{
	margin-left: -2em;
}

/*.flickity{
	width: 60%;
}

.desc{
	width:30%;
}*/
	.hovereffect1 h2{
		color: #FFF;
	}

.contact h2{
	padding-bottom: 1em;
}

.about p{
  font-size: 14px;
  display: block;
  margin: 0 auto;
  padding: 1em 0;
  color: rgba(50, 32, 32, .9);
}

.about{
  background: rgba(255, 255, 255, .5);
}

.skills{
  background: rgba(0, 0, 0, .5);
}

header,
.container,
footer {
    margin: 0 auto;
    width: 88%;
    max-width: 1080px;
}

.icons ul li {
    margin-top: 2em;
}

/*.icons ul li a {
    display: block;
    width: 210px;
    height: 210px;
    border-radius: 3px;
   
    text-indent: 110%;
    white-space: nowrap;
    overflow: hidden;
}*/

/*.icons ul .photography {
    width: 127px;
    height: 99px;
}*/

.icons .hovereffect{
	border-radius: 5%;
	border: 3px solid rgba(255,255,255,.8);
}

/*.web-design {
    background: url(images/wd1.png);
}*/

/*.graphic-design {
    background: url(images/gd.png);
}

.photography {
    background: url(images/ph.png);
}*/

.desc ul{
	list-style: none;
}

.parallax {
    height: 700px;
    background-position: 70% 5%;
    background-size: cover;
    background-attachment: fixed;
}

.parallax2{
    height: 700px;
    background-position: 32% 5%;
    background-size: cover;
    background-attachment: fixed;
}

.parallax {
    background-image: url(images/1.jpg);
}
.row1 h2{
	font-size: 14px;
}
.parallax2 {
    background-image: url(images/2.jpg);
}

.web,
.gd{
  list-style: none;
  display: flex;
  /*align-items: center;*/
  margin-left: 2em;
  padding: .5em .5em;
  flex-direction: column;
  width: 100%;
}

  .web1,
  .web2,
  .gd1,
  .gd2{
      width: 25%;
    }

.web li,
.gd li{
  height: 65px;
  width: 65px;
}

.html{
  background-image: url(images/html.png);
  margin-bottom: 1em;
}

.css{
  background-image: url(images/css.png);
  margin-bottom: 1em;
}

.js{
  background-image: url(images/js.png);
  margin-bottom: 1em;
}

.jq{
  background-image: url(images/jq.png);
  margin-bottom: 1em;
}

.wp{
  background-image: url(images/wp.png);
  margin-bottom: 1em;
}

.sass{
  background-image: url(images/sass.png);
  margin-bottom: 1em;
}

.ai{
  background-image: url(images/ai.png);
  margin-bottom: 1em;
}

.ps{
  background-image: url(images/ps.png);
  margin-bottom: 1em;
}

.id{
  background-image: url(images/id.png);
  margin-bottom: 1em;
}

.ae{
  background-image: url(images/ae.png);
  margin-bottom: 1em;
}

.pr{
  background-image: url(images/pr.png);
  margin-bottom: 1em;
}

.flash{
  background-image: url(images/flash.png);
  margin-bottom: 1em;
}

.columns{
  display: flex;
  align-items: center;
  padding: .5em;
}

.contact{
  background: rgba(0, 0, 0, .5); 
  padding: 3em 3em 10em;
}

.social-media{
  background: rgba(255, 255, 255, .6);
  padding-bottom: .5em;
}

small{
  display: block;
  margin: 0 auto;
  text-align: center;
}

.social-media ul{
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 2em;
  margin: 0 auto;
}

#web .social-media ul,
#gd .social-media ul,
#photo .social-media ul{
	margin-top: 1em;
}

.social-media li {
  margin-right: .8em;
}
.social-media li a{
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 3px;
  /*Hide text*/
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

.icon-menu ul{
  justify-content: space-around;
}

.icons .hovereffect{
	background: none;
}

.home{
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
  width:65px;
  height:65px;
  display:block;
  padding:0;
  background-image: url(images/home.png);
}

@keyframes spin{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

.home:hover,
.graphicd:hover,
.photo:hover,
.webd:hover{
  animation: spin .5s;
}

.webd{
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
  width:65px;
  height:65px;
  display:block;
  padding:0;
  background-image: url(images/m-web.png);
}

.graphicd{
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
  width:65px;
  height:65px;
  display:block;
  padding:0;
  background-image: url(images/m-gd.png);
}

.photo{
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
  width:65px;
  height:65px;
  display:block;
  padding:0;
  background-image: url(images/m-p.png);
}

.social-media li a:hover{
  opacity: .7;
  animation: spin .5s;
}

.social-media{
  -webkit-filter:grayscale(100%);
  filter:grayscale(100%);
}

.blog{
  background-image: url(images/logo.svg);
}

.github{
  background-image: url(images/github.svg);
}

.linkedin{
  background-image: url(images/linkedin.svg);
}

.facebook{
  background-image: url(images/facebook.svg);
}

.instagram{
  background-image: url(images/instagram.svg);
}

/*Contact*/
.form{
	background: rgba(255, 255, 255, .5);
	width: 100%;
	padding: 1em;
	display: block;
	margin: 0 auto;
	margin-left: -1em;
}

.feedback-input {
	color: rgb(255, 255, 255);
  font-weight:500;
	font-size: 16px;
	line-height: 22px;
	background-color: rgba(0, 0, 0, .7);
	padding: 10px;
	margin-bottom: 10px;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
  border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
	background: rgba(0, 0, 0, .7);
	border: 3px solid #ffffff;
	color: rgb(255, 255, 255);
	outline: none;
  padding: 10px;
}

#comment{
		padding-bottom: 3em;
	}

	input[type="submit"]{
		background: rgba(0, 0, 0, .7);
		border-radius: 20%;
		color: rgba(255, 255, 255, .7);
		padding: .5em .9em;
		border: 2px solid #ffffff;
		font-size: 12px;
	}

  .sites{
    margin-top: 2em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .row1{
    display: flex;
    flex-direction:column;
    align-items:center;
    /*flex-wrap: wrap;*/
    margin-top: 1em;
  }

  .hovereffect{
    background: rgba(255, 255, 255, .7);
    padding: 1em;
    margin-bottom: 1em;
  }

  .hovereffect1{
    background: rgba(0, 0, 0, .7);
    padding: 1em;
  }

.photography img{
	width: 60%;
	margin-left: 2em;
}

.about{
  padding: 0 1em 3em;
}

.me img{
  width: 100%;
  height: 100%;
}

.me{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  padding: 1em;
  background: rgba(0,0,0,.3);
}


.myimg{
  position: relative;
  display: inline-block;
}

.myimg:before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
   background: -webkit-radial-gradient(rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,1)); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,1)); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,1)); /* For Firefox 3.6 to 15 */
  background: radial-gradient(rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,1)); /* Standard syntax */
  /* IE6-9 */
}
/*! Flickity v1.2.1
http://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}


/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}


/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  position: absolute;
  top: 40%;
  width: 30px;
  height: 44px;
  border: none;
  /*border-radius: 50%;*/
  background: none;
  cursor: pointer;
  /* vertically center */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.flickity-prev-next-button:hover {
  background: rgba(0,0,0,.3);
}

.flickity-prev-next-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #09F;
}

.flickity-prev-next-button:active {
  opacity: 0.6;
}

.flickity-prev-next-button.previous {
  left: 10px;
}

.flickity-prev-next-button.next {
  right: 10px;
}


/* right to left */

.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.flickity-prev-next-button svg {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

.flickity-prev-next-button .arrow {
  fill: none;
}


/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  top: 1em;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 8px;
  background: rgba(0,0,0,.7);
  border-radius: 50%;
  opacity: 0.2;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}


/* Flickity responsive
------------------------------------------*/

img {
  max-width: 100%;
  height: auto;
  margin:0 auto;
  display:block;
}

.flickity div, 
.flickity-2 div,
.flickity-3 div,
.flickity-4 div,
.flickity-5 div,
.flickity-6 div {
  width: 100%;
}

.flickity img,
.flickity-2 img,
.flickity-3 img,
.flickity-4 img,
.flickity-5 img,
.flickity-6 img{
	margin-top: 3em;
}

@media screen and (min-width: 768px) {
    h1 {
        font-size: 44px;
    }
    nav ul,
    .icon-menu ul{
        margin-top: 2em;
        justify-content: flex-end;
    }
    nav ul li {
        padding: .5em 1em;
    }
    nav ul li a {
        font-size: 20px;
    }
      .icons ul {
        flex-direction: column;
        align-items: center;
    }

/*    .me{
      display: flex;
      justify-content: space-between;
      flex-direction: row;
    }

    .about p{
      display: block;
      margin: 0 auto;
      width: 40%;
      font-size: 18px;
    }*/

    .web1,
    .web2,
    .gd1,
    .gd2{
      width: 25%;
    }


    .web,
    .gd{
      flex-direction: row;
      justify-content: space-around;
      width: 100%;
    }
    .gd{
      margin-right: 3em;
    }


    .row1{
    	flex-direction:row;
    	/*justify-content: space-between;*/
    }

    strong{
	    font-size: 20px;
    }

    .desc{
    	margin-top: 2em;
      width: 40%;
    }

      .hovereffect{
    margin-bottom: 0;
  }

  .row1 .hovereffect h2{
  	font-size: 14px;
  }

  .project,
  .project2{
  	flex-direction: row;
  	justify-content: space-between;
  }


  .flickity,
  .flickity-2,
  .flickity-3,
  .flickity-4,
  .flickity-5,
  .flickity-6{
  	width: 60%;
  }

  .hovereffect h2{
		font-size: 18px;
		letter-spacing: 1px;
	}

	h3{
		font-size: 12px;
		letter-spacing: 1px;
	}


    .icons ul li a{
      margin-top: 4em;
      margin-bottom: 5em;
    }

    .about p{
      font-size: 18px;
    }


   .social-media li {
  		margin-right: 1.5em;
    }

    .form{
    	padding: 3em;
    	width: 50%;
    	display: block;
    	margin: 0 auto;
    }

   .feedback-input{
   	 font-size: 20px;
   	 padding: 1em;
   }

	 .feedback-input:focus{
	  padding: 1em;
	}

	#comment{
		padding-bottom: 4em;
	}

	input[type="submit"]{
		padding: .5em 1em;
		font-size: 16px;
	}


  .sticky nav ul {
  justify-content: center;
  width: 100%;
}

.icons .hovereffect{
	border: 2px solid rgba(255,255,255,.8);
}

/*  .sticky nav ul li{
    margin-right: 2em;
    padding: 1em 3em;
  }
*/
}

@media screen and (min-width: 1024px) {
    h1,
    .web-works {
        font-size: 55px;
    }
    .icons {
        height: 500px;
    }

    #html,
    #css,
    #js,
    #jq,
    #wp,
    #sass,
    #ai,
    #ps,
    #id,
    #ae,
    #pr,
    #flash{
    padding: 0 .8em 0 .1em;
    }

    .web1,
    .web2,
    .gd1,
    .gd2{
      width: 25%;
    }


    .web,
    .gd{
      flex-direction: row;
      justify-content: space-around;
      width: 100%;
    }

    .me{
      display: flex;
      justify-content: space-between;
      flex-direction: row;
    }

/*    

    .columns{
      display: block;
      margin-left: 0;
      padding: 1em 2em;
    }*/

    .about p{
      display: block;
      margin: 0 auto;
      width: 55%;
      font-size: 20px;
    }

    .icons ul{
    	flex-direction: row;
    }

    .parallax{
     background-position: 5% 5%;
    }

    .icons ul li{
      padding: 2em;
      margin-top: 4em;
    }

    h2{
      font-size: 42px;
    }

    .row1{
    	justify-content: space-between;
    }

.photography img{
	width: 100%;
	margin-left: 0;
}

  .sticky nav ul {
  justify-content: center;
  width: 100%;
}

  .sticky nav ul li{
    margin-right: 2em;
    padding: 1em 3em;
  }

  .hovereffect,
  .hovereffect1{
    margin-bottom: 0;
    position: relative;
  }

.hovereffect .overlay {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
 
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);
}

.hovereffect1 .overlay {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
 
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);
}

.hovereffect:hover .overlay,
.hovereffect1:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect img,
.hovereffect1 img {
  display: block;
  position: relative;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.hovereffect:hover img,
.hovereffect1:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.6);
  -webkit-filter: brightness(0.6);
}

.hovereffect h2{
  text-transform: uppercase;
  text-align: center;
  position: relative;
  margin-top: 5.5em;
  font-size: 17px;
  background-color: rgba(0,0,0,.5);
   border-bottom: 10px solid #FFF;
  border-top: 10px solid #FFF;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  letter-spacing: 5px;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}


.row1 .hovereffect h2{
	padding: 1.5em 0;
	margin-top: 9em;
}

.row1 .hovereffect1 h2{
	 text-transform: uppercase;
  text-align: center;
  position: relative;
  margin-top: 8em;
  font-size: 17px;
  background-color: rgba(0,0,0,.5);
   border-bottom: 10px solid #FFF;
  border-top: 10px solid #FFF;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  letter-spacing: 5px;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}

.hovereffect h3{
	 text-transform: uppercase;
  text-align: center;
  position: relative;
	border-bottom: 10px solid #FFF;
  border-top: 10px solid #FFF;
  margin-top: 4em;
  font-size: 14px;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
   filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
  background-color: rgba(0,0,0,.5);
}

.hovereffect a, hovereffect p,
.hovereffect1 a, hovereffect p {
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  text-align: center;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2,
.hovereffect1:hover a, .hovereffect1:hover p, .hovereffect1:hover h2,
.hovereffect:hover h3 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.icons .hovereffect{
	border: 5px solid rgba(255,255,255,.8);
}

}