@import url(https://fonts.googleapis.com/css?family=Pacifico);
	@import url(https://fonts.googleapis.com/css?family=Bangers);
@import url('https://fonts.googleapis.com/css?family=Palanquin+Dark:500|Raleway');

 * {
   font-family: 'Raleway', sans-serif;


 }

	header {
  	position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    /*rgba(51, 51, 51, 0.67);*/
    width: 100%;
    height: 40px;
    opacity: .7;
}



  h1 {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 2.5em;
    letter-spacing: 3px;
		padding: 15px;

}



  /*h3 {
    color: black;
    font-size: 1.5rem;
    display: inline;
    letter-spacing: 3px;
		padding: 5px;
}

	h4 {
		color: black;
		font-size: 1.8rem;
		font-family: 'Bangers', cursive;
		letter-spacing: 3px;
		padding: 10px;
}*/


  body {
    line-height: 30px;
    letter-spacing: 2px;
    font-size: .8em;
}

  hr {
    width: 95%;
    color: black;
}

  a {
    font-family: 'Palanquin Dark', sans-serif;
    text-decoration: none;
    font-size: 1em;
    font-style: bold;
}

  nav a {
    background-color: #fff;
    color:#000;
    font-size: 1.2em;
    float: left;
    padding: 5px 20px;
    border-right: 1px solid #fff;
    letter-spacing: 2px;
}

  nav a:hover {
    background-color: #e74c3c;
    color:#2ecc71;

}

	/*aside p {
    font-size: 1em;
    padding: 5px;
    letter-spacing: 3px;
		width: 75%;
		margin-left: 15%;
   font-family: 'Pacifico', cursive;
}*/

  aside img {
    width: auto;
    padding: 6px;
    height: 200px;
}

	input {
		font-family: 'Bangers', cursive;
}
  p {
    font-family: 'Raleway', sans-serif;

}

  footer {
		font-family: 'Bangers', cursive;
    width: 100%;
		color: black;
		text-decoration: none;
}
   ul.img-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
  	display: inline;
    padding:10px;

}

ul.img-list li {
  display: inline-block;
  height: 5rem;
  margin: 0 1em 1em 0;
  position: relative;
  width: 5rem;
	border-radius: 50%;

}


span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;

}

ul.img-list li:hover span.text-content {
  opacity: 1;

}


span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 5rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 5rem;
  opacity: 0;
	border-radius: 50%;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

  .cover {
    color:white !important;
    z-index:-1;
    padding-top:1%;
    font-family: 'Pacifico', cursive;
    margin-left:8%;
    font-size:28px;
    margin-top:2%;
    color:#413839;
    line-height:40px;
}

	#send {
		color: white;
		background-color: black;
		font-family: 'Bangers', cursive;
		font-size: 16px;
}

	#send:hover {
		color: yellow;
}

	#wrapper {
    width: 100%;
}

  #about {
    font-family: 'Raleway', sans-serif;
    letter-spacing: 3px;
}

	#social img {
		padding: 10px;
    margin-left:5%;
    height: 1%;
    width: 5%;

}

	#social img:hover {
		-moz-box-shadow: 0 0 10px #ccc;
		-webkit-box-shadow: 0 0 10px #ccc;
		box-shadow: 0 0 10px #ccc;
}

	#comment{
		text-align: left;
		padding:  0.4em;
		padding-bottom:140px;
		width: 300px;
		height: 10px;
}


	.hero {
		width: 100%;
		height: 700px;
    background: url("../images/wallpapers-background-1.jpg") no-repeat center center scroll;
		background-size: cover;
}

 .mainButt {
   z-index:-1;
   margin-top:15%;
   width:20%;
   height:45px;
   margin-left:40%;
   opacity:.8;
   border:4px solid white;
   font-family: 'Bangers', cursive;
   font-size:25px;
   padding:5px;
   cursor: pointer;
   background-color: #2c3e50;
   color:#ecf0f1;
 }

  .mainButt:hover{
    background-color:#e74c3c;
    color:#ecf0f1
}

  .mainButt2 {
    z-index:-1;
    width:20%;
    height:45px;
    margin-top:2%;
    margin-left:40%;
    opacity:.8;
    border:4px solid white;
    font-family: 'Bangers', cursive;
    font-size:25px;
    padding:5px;
    cursor: pointer;
    background-color: #2ecc71;
    color:#ecf0f1
}

   .mainButt2:hover{
     background-color:#e74c3c;
     color:#ecf0f1
  }

	 .icon img {
		height: 5rem;
		width: 5rem;
}


	.flex-container {
	  padding: 0;
	  margin: 0;
	  list-style: none;
	  display: -webkit-box;
	  display: -moz-box;
	  display: -ms-flexbox;
	  display: -webkit-flex;
	  display: flex;
	  -webkit-flex-flow: row wrap;
	  justify-content: space-around;
	}

	.flex-container img{
		width: 80%;
		height: 180px;
		border-radius: 2%;
    border: 1px solid white;

	}

	.flex-container img:hover {
		-moz-box-shadow: 0 0 20px #ccc;
		-webkit-box-shadow: 0 0 20px #ccc;
		box-shadow: 0 0 90px #ccc;
    box-shadow: 5px 10px 5px #888888;

	}

	.flex-item {
	  /*padding: 20px;*/
	  width: 250px;
	  height: 150px;
	  margin-top: 5px;
	  text-align: center;

	}


	.skills {
		height: auto;
    margin-left:15%;
    width:60%;

	}

  .content {
		padding: 5px;
		display: inline-block;
    margin-left:8%;
	}

  .comp-p {
    float:right;
    width:70%;
    margin-top:-10%;
    font-size:1em;
    text-align:center
  }

	.design {
		padding: 3px;
		display: inline-block;
    margin-left: 17%;

	}

	.code {
		padding: 3px;
		display: inline-block;
    margin-left: 20%;
	}

  .icon h2 {
    color: #ecf0f1;
    font-size: 15px;
    letter-spacing: 1px;
    text-align: center;
    font-family: 'Palanquin Dark', sans-serif;

}

  .free a{
    border:5px solid;
    border-color:#2ecc71;
    border-top:none;
    font-size:22px;
    padding:4px;
    color:#ecf0f1;
  }

  .free a:hover{
    background-color: #e74c3c;
    color:#2ecc71;
    border:5px solid;
    border-color:#ecf0f1;
  }


  .new p {
    height: 60px;
    float: left;
    margin-right: 0.3em;
  }
  .new b {
    float: left;
    overflow: hidden;
    position: relative;
    height: 30px;
  }

  span1 {
    font-family: 'Palanquin Dark', sans-serif;
    display: inline-block;
    color: #2ecc71;
    font-size:20px;
    position: relative;
    white-space: nowrap;
    top: 0;
    left: 0;
    -webkit-animation: move 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 1s;
  }

  @keyframes move {
    0%  { top: 1px; }
    20% { top: -30px; }
    40% { top: -60px; }
    60% { top: -90px; }
    80% { top: -120px; }
  }





/*PROJECTS*/


  .clearfix:after {
  	visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
    font-size: 0;

}

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

  #wrapper {
    float: none;
    width: auto;
}

  body {
    letter-spacing: 1px;
}


  nav a {
    display: block;
    text-align: center;
    margin: 0;
    font-size: 1em;
    letter-spacing: 2px;
}

  h1{
    font-size:1.2em;
  }

   h2, h3, h4 {
    font-size: 1em;
}
 /*.icon img{
   height:2rem;
   width:2rem;
   margin:0;
   padding: 0;
   display: inline;
   float: left;
 }*/

 p {
  font-size: 10px;
  padding: 2px;
 }



  .comp img {
  width:20%;

}

  .cover button{

    width: 50%;
}


  /*.comp p {
   font-size: 13px;
  }*/


  .free a {
    font-size: .8em;
    margin: 0%;
}

  #about img {
    height:100px;
    width:20px;

}
  /*p {
    font-size:16px;
  }*/

  #mySoft p {
    display:none;

}



  #social img {
  		padding: 10px;
      margin-left:5%;
      height: 30px;
      width: 30px;


  }

}




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

  #wrapper {
    width: auto;
    float: auto;
}




  aside img {
    width: auto;
}

  nav a {
    display: block;
    text-align: center;
    margin: 0;
    font-size: .6em;
    letter-spacing: 2px;
}





  h1 {
  font-size:13px;
}


   h2, h3, h4 {
    text-align: center;
    font-size: 12px;
}

  p{
    font-size: 10px;
  }

  footer {
    padding: 3px;
}



#mySoft p {
  display:none;
}

.comp-p {
  float:right;
  width:80% !important;
  font-size:.8em !important;
  margin-top:5%;
}

.newh1 {
  font-size: 1.2em !important;
}





}