@import url('https://fonts.googleapis.com/css?family=Raleway');
 body {
	 margin: 0;
	 padding: 0;
	 font-family: 'Raleway', sans-serif;
}
 .flex-container {
	 position: absolute;
	 height: 100vh;
	 width: 100%;
	 display: -webkit-flex;
	/* Safari */
	 display: flex;
	 overflow: hidden;
}
 @media screen and (max-width: 768px) {
	 .flex-container {
		 flex-direction: column;
	}
}
 .flex-title {
	 color: #f1f1f1;
	 position: relative;
	 font-size: 6vw;
	 margin: auto;
	 text-align: center;
	 transform: rotate(90deg);
	 top: 15%;
	 -webkit-transition: all 500ms ease;
	 -moz-transition: all 500ms ease;
	 -ms-transition: all 500ms ease;
	 -o-transition: all 500ms ease;
	 transition: all 500ms ease;
}
 @media screen and (max-width: 768px) {
	 .flex-title {
		 transform: rotate(0deg) !important;
	}
}
 .flex-about {
	 opacity: 0;
	 color: #f1f1f1;
	 position: relative;
	 width: 70%;
	 font-size: 2vw;
	 padding: 5%;
	 top: 20%;
	 border: 2px solid #f1f1f1;
	 border-radius: 10px;
	 line-height: 1.3;
	 margin: auto;
	 text-align: left;
	 transform: rotate(0deg);
	 -webkit-transition: all 500ms ease;
	 -moz-transition: all 500ms ease;
	 -ms-transition: all 500ms ease;
	 -o-transition: all 500ms ease;
	 transition: all 500ms ease;
}
 @media screen and (max-width: 768px) {
	 .flex-about {
		 padding: 0%;
		 border: 0px solid #f1f1f1;
	}
}
 .flex-slide {
	 -webkit-flex: 1;
	/* Safari 6.1+ */
	 -ms-flex: 1;
	/* IE 10 */
	 flex: 1;
	 cursor: pointer;
	 -webkit-transition: all 500ms ease;
	 -moz-transition: all 500ms ease;
	 -ms-transition: all 500ms ease;
	 -o-transition: all 500ms ease;
	 transition: all 500ms ease;
}
 @media screen and (max-width: 768px) {
	 .flex-slide {
		 overflow: auto;
		 overflow-x: hidden;
	}
}
 @media screen and (max-width: 768px) {
	 .flex-slide p {
		 font-size: 2em;
	}
}
 @media screen and (max-width: 768px) {
	 .flex-slide ul li {
		 font-size: 2em;
	}
}
 .flex-slide:hover {
	 -webkit-flex-grow: 3;
	 flex-grow: 3;
}

.has-bg {
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}


 @media screen and (min-width: 768px) {
	 .home {
		 animation: aboutFlexSlide 3s 1;
		 animation-delay: 0s;
	}
}
 @keyframes aboutFlexSlide {
	 0% {
		 -webkit-flex-grow: 1;
		 flex-grow: 1;
	}
	 50% {
		 -webkit-flex-grow: 3;
		 flex-grow: 3;
	}
	 100% {
		 -webkit-flex-grow: 1;
		 flex-grow: 1;
	}
}
 @media screen and (min-width: 768px) {
	 .flex-title-home {
		 transform: rotate(90deg);
		 top: 15%;
		 animation: aboutFlexSlide 3s 1;
		 animation-delay: 0s;
	}
}
 @keyframes homeFlextitle {
	 0% {
		 transform: rotate(90deg);
		 top: 15%;
	}
	 50% {
		 transform: rotate(0deg);
		 top: 15%;
	}
	 100% {
		 transform: rotate(90deg);
		 top: 15%;
	}
}
 .flex-about-home {
	 opacity: 0;
}
 @media screen and (min-width: 768px) {
	 .flex-about-home {
		 animation: aboutFlexSlide 3s 1;
		 animation-delay: 0s;
	}
}
 @keyframes flexAboutHome {
	 0% {
		 opacity: 0;
	}
	 50% {
		 opacity: 1;
	}
	 100% {
		 opacity: 0;
	}
}
.nav-btn {
  text-align: center;
}

.nav-btn a {
  color: white;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 600;
  font-style: italic;
}
.nav-btn a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
	.nav-btn a {
		font-size: 1rem;
	}
}

.flex-slide ul {
	text-decoration: none;
	list-style: none;
}

.home-btn {
	position: absolute;
	padding: 2rem;
	z-index: 3;
}

 .contact-form {
	 width: 100%;
}
 input {
	 width: 100%;
}
 textarea {
	 width: 100%;
}

 .spinner {
	 position: fixed;
	 top: 0;
	 left: 0;
	 background: #222;
	 height: 100%;
	 width: 100%;
	 z-index: 11;
	 margin-top: 0;
	 color: #fff;
	 font-size: 1em;
}
 .cube1, .cube2 {
	 background-color: #fff;
	 width: 15px;
	 height: 15px;
	 position: absolute;
	 top: 0;
	 left: 0;
	 -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
	 animation: sk-cubemove 1.8s infinite ease-in-out;
}
 .cube2 {
	 -webkit-animation-delay: -0.9s;
	 animation-delay: -0.9s;
}
 @-webkit-keyframes sk-cubemove {
	 25% {
		 -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
	}
	 50% {
		 -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
	}
	 75% {
		 -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
	}
	 100% {
		 -webkit-transform: rotate(-360deg);
	}
}
 @keyframes sk-cubemove {
	 25% {
		 transform: translateX(42px) rotate(-90deg) scale(0.5);
		 -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
	}
	 50% {
		 transform: translateX(42px) translateY(42px) rotate(-179deg);
		 -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
	}
	 50.1% {
		 transform: translateX(42px) translateY(42px) rotate(-180deg);
		 -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
	}
	 75% {
		 transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
		 -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
	}
	 100% {
		 transform: rotate(-360deg);
		 -webkit-transform: rotate(-360deg);
	}
}
 .branding {
	 position: fixed;
	 bottom: 20px;
	 background: #fff;
	 right: 20px;
	 padding: 12px;
	 box-sizing: border-box;
	 border-radius: 56px;
	 line-height: 0;
}
 
/* Background images */

/* Home images */
.about {
	background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(./assets/about.jpeg);
}
.games {
	background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(./assets/pokemon-tile.png);
}
.web {
	background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(./assets/social.png);
}
.contact {
	background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(./assets/bg.jpeg)
}

/* Games images */

.polar-rpg {
	background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(./assets/unity-game.png);
}
.rudimental {
	background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(./assets/rudimental.png);
}
.quizz-duck {
	background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(./assets/quizz-app.png);
}
.simple-shooter {
	background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(./assets/simple-shooter.png)
}

/* Web images */

.ev-analyzer {
	background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(./assets/ev-visualizer.png);
}
.smart-warming {
	background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(./assets/smart-warming.png);
}
.yt-clone {
	background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(./assets/yt-clone.png);
}
.template-portfolio {
	background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(./assets/template-portfolio.png)
}