/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require font-awesome
 *= require_tree .
 *= require_self
 */

.app-wrapper{
	width:100%;
	height: 100vh;
	overflow: scroll;
	position:relative;
}
.logo-wrapper{
	display:flex;
	align-items:center;
}
.wall-1-wrapper{
  width: calc(100% - 40px);
  margin: 0 20px 0 20px;
  height: calc(100vh - 20px);
  overflow: hidden;
  position:relative;
}
.tagline{
	font-size:16px;
	color:white;
	text-transform: uppercase;
	position:absolute;
	bottom:20px;
	right:30px;
}
.menu-page{
	background-color: rgba(0,0,0,0.7);
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index:1000;
	overflow:hidden;
	display: none;
}
.menu-page ul{
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width:100%;
	height:100vh;
	margin:0;
	padding:0;
}
.menu-page ul li{
	padding:10px;
}
.menu-page ul li a{
	color:white;
	font-size:30px;
	text-decoration: none;
	text-transform: uppercase;
}
.contact-icons{
	display:flex;
}
.contact-icons a{
	color:white;
    width: 60px;
    height: 60px;
	margin:50px 10px 0 ;
    border: 1px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 50px;
}

.bg{
	position: absolute;
	width: 100%;
	height: 100%;	
	margin:20px;
}
.bg-video{
	position:absolute;
	height:auto;
    width: 100%;
}

@media screen and (max-width:1024px){
	.bg-video{
		width:auto;
		height:100vh;
	}	
}

/*design element */
.bar{
	background-color: white;
	width: 100%;
	height:20px;
}
.line{
	width:30px;
	height:5px;
	background-color: white;
	margin:5px 0;
}
.line-black{
	@extend .line;
	background-color: black; 
}
.underline{
	width:50px;
	height:5px;
	background-color:white;
}
.phone{
	width: 500px;
  height: 800px;
  right: 8%;
  background-size: cover;
  position: absolute;
	animation: phone-animation 2s forwards 1s;
	opacity:0;
}

.phone-video{
    width: 270px;
    transform: translateX(61px)translateY(152px);
}
.prototype-image-wrapper{
	width:400px;
	height:300px;
	position:relative;
	margin: 0 auto
}
.prototype-image{
	width:400px;
	height:300px;
	background-size:cover;
	background-position:center;
	opacity:1;
	position:absolute;
	transition:1s all;
}
.case-study-button{
	font-family:'Montserrat'; 
	background-color: #EE5050;
	border: 1 solid white;
	color:white;
	text-align: center;
	margin:0 auto;
	padding:5px 10px;
	border-radius:2px;
	margin:20px 0;
	text-transform: uppercase;
}
.ide-canvas{
	font-family: 'Droid Sans', sans-serif;
	font-size: 15px;
}

/*layout */
nav{
	position: absolute;
	display:flex;	
	justify-content: space-between;
	align-items: center;
	width: 100%;
	top: 0;
}
.menu-wrapper{
	z-index:1001;
}
.menu{
	padding:0 60px;
	z-index:1001;
	&:hover{
		cursor:pointer;
	}
}
/*.menu:hover .line{
	margin: 5px 0px;
	transition: all .1s;
}*/
.line-1{
	animation: line-1 1s forwards;
}
.line-2{
	animation: line-2 1s forwards;
}
.line-3{
	animation: line-3 1s forwards;
}

.fixed-menu{
    width: 50px;
    height: 50px;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 40px;
    right: 40px;
	z-index:1001;
}
.fixed-menu-w{
	@extend .fixed-menu;
	background:white;
}
.nav-wrap{
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}
.logo{
	width:100px;
	height:55px;
	margin:40px 60px;
	z-index: 1001;
}
.intro{
	width: 100%;
	display: flex;
	align-items: center;
}
.intro h1{
	font-family: "Playfair Display", sans-serif;
	font-size: 120px;
	margin: 0 50px;
	opacity:.2;
	color:gray;
}
.intro h2{
	font-size:24px;
	width:100%;
	padding: 0 50px;
	font-weight:400;
	font-family: "Droid Sans", sans-serif;

}
.wall{

}
.wall h1{
	font-family: "Playfair Display", sans-serif;
	text-transform: uppercase;
	font-weight: 900;
	font-size:100px;
	color:lightgray;
}
.wall-1 h1{
	font-family: 'Montserrat', sans-serif;
	font-size:50px;
	text-transform: uppercase;
	text-align:center;
	margin:30px;
	color:white;
	max-width:600px;
}
.wall-1 h2{
	color:black;	
	font-family: 'Droid Sans';
	font-weight: 700;

	background-color: white;
	font-size:16px;
	padding:5px 10px;
}
.wall-1{
	width:calc(100% - 40px);
	height:calc(100vh - 40px);
	margin:0 20px;
	background-size: cover;
	background-position: center;
	// background-color:#EE5050;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction:column;
	transition: all 1s;
 	position: absolute;
}
.wall-2{
/*	background-color: pink;
*/	
	min-height:100vh;
	display: flex;
	font-family: 'Playfair Display', serif;
	position:relative;
}
.wall-2 ul{
	font-family: 'Droid Sans', sans-serif;
	margin:0;
}
.wall-2 ul li{
	margin:5px 0 0;
}
.wall-3{
	@extend .wall-2;
	background-color:rgba(0,0,0,.1);
	color:black;
	position:relative;
}
.wall-3 div .ide-canvas{
	height:200px;
}
.wall-3 .wall-left, .wall-4 .wall-left{
	width:80%;
}
.wall-4{
	@extend .wall-2;
}
.wall-2{
	min-height:auto;
}
.wall-2 .wall-left{
	justify-content: flex-end;
}
.case-study-wrapper{
	font-family: 'Droid', sans-serif;
}
.case-study-wrapper span:nth-child(1){
	font-weight: bolder;
}
.wall-left{
	width:50%;
/*	height:100vh;
*/	padding:50px;
	display: flex;
	justify-content: center;
	flex-direction: column;
/*    transform: translateX(-2000px);
*/    transition: all 1s;
}
.wall-left h1{
	color:gray;
/*	font-family: 'Playfair Display', serif;*/
	font-family:'Montserrat'; 
	font-size:24px;
	font-weight:300;
	text-transform: uppercase;
}
.wall-left p{
	margin:5px 0;
    font-size: 18px;
    color:rgba(0,0,0,1);
    font-family: 'Droid San',sans-serif;
}
/*.wall-left p:hover{
	color:#EE5050;
	transition:all .3s;
	cursor:pointer;
}*/
.wall-right{
	padding:50px;
	margin:0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.wall-right-text{
	min-width: 275px;
}
.wall-right h1{
	font-weight:900;
}
.wall-right .index h2{
	font-size:16px;
	color:gray;
}
.wall-right p{
	font-family: 'Droid Sans', sans-serif;
	font-weight:400;
	margin:0;
}
.wall-right-text p{
	margin:30px 0;
}
.index{
	display:flex;
	align-items:baseline;
}
.index-line{
	width:50px;
	height:2px;
	background-color:gray;
	margin:10px;
}

/* animation for keyframes*/
@keyframes phone-animation {
	0%{transform: translate(0,-470px) scale(.7); opacity:.1;}
	50%{transform: translate(0,-470px) scale(.7); opacity:1;}
	100%{transform: translate(0,-470px) rotate(20deg) scale(.7); opacity:1;}
}
@keyframes phone-animation-xl {
	0%{transform: translate(120px,-470px) scale(.5); opacity:.3;}
	50%{transform: translate(120px,-470px) scale(.5); opacity:1;}
	100%{transform: translate(120px,-470px) rotate(20deg) scale(.5); opacity:1;}
}
@keyframes phone-animation-l {
	0%{transform: translate(25px,-630px) scale(.5); opacity:.1;}
	50%{transform: translate(25px,-630px) scale(.5); opacity:.5;}
	100%{transform: translate(25px,-630px) scale(.5); opacity:1;}
}
@keyframes line-1{
	0%{transform: translateY(0px)rotate(0deg);}
	100%{transform: translateY(10px)rotate(45deg);}
}
@keyframes line-2{
	0%{opacity:1;}
	100%{opacity:0;}
}
@keyframes line-3{
	0%{transform: translateY(0px)rotate(0deg);}
	100%{transform: translateY(-10px)rotate(135deg);}
}
/*media query*/

@media screen and (max-width:1900px){
	.phone{
		animation: phone-animation-xl 2s forwards 1s;
	}
}
@media screen and (max-width:1440px){
	.wall-right{
		padding:50px;
		margin:0 auto;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	.wall-1 h1{
		// margin-bottom: 450px;
		transition:all 1s;
	}
	.phone{
		margin: 0 auto;
		position:absolute;
		left:0;
		right:0;
		animation:phone-animation-l 2s forwards 1s;
	}
}
@media screen and (max-width:768px){
	.wall-1 h1{
		font-size:36px;
		width:300px;
	}
	.wall-right ul{
		max-width:250px;
	}
}
@media screen and (max-width: 650px) {
	.menu{
/*		padding:0 15% 0 0;
*/	}
	.phone{
		display:none;
	}
	.wall-1{
		margin:0 20px;
	}
	.wall-1 h1{
		margin:0;
		font-size:24px;
		width:200px;
	}
	.wall-2{
		flex-direction: column;
	}
	.wall-left{
		width:calc(100% - 100px);
		order:1;
	}
	.wall-2.wall-left{
		display:none;
	}
	.wall-right{
		width: calc(100% - 100px);
		padding:0;
		height:auto;
	}
	.wall-right-text h1{
		font-size:24px;
	}
	body > div.wall-3 > div.wall-left > h1{
		font-size:15px;
	}
	.wall-right-text p{
    	margin: 30px 0;
   		 width: 100%;
   	}
	.prototype-image, .prototype-image-wrapper{
		width:300px;
		max-width:100%;
		height:200px;
		margin:1em;
	}
	.wall-right ul{
		display:none;
	}
	.wall-4{
		width:100%;
/*		min-height:100vh;
*/	}
}

/* typed css for blinking cursor*/
	.typed-cursor{
	opacity: 1;
	color: black;
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
	}
	@keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
	}
	@-webkit-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
	}
	@-moz-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
	}


	/* Coverr.co */
.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}
.no-video .video-container video,
.touch .video-container video {
    display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
    display: block !important;
}
.video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
}
.video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
}
.video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
}
.video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
}
.video-container video.fillWidth {
    width: 100%;
}

/* about */

.about.wall{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items:center;
	background-color: lightgray;
/*	background-image: url('/assets/Wall-Sketching.jpg');
*/	width:100%;
}
.about.wall h1{
	margin:135px 0 0;
	color:transparent;
	font-family: 'Montserrat', sans-serif;
	font-weight:900;
	-webkit-text-stroke: 1px black;
	font-size: 50px;
	width:500px;
}
.about.wall .text-wrapper{
	padding:5% 0;
}
.about.wall div p{
	font-size: 1.125em;
	max-width:500px;
	padding:0 5%;
	font-family: 'Georgia', sans-serif;
    color:gray;
}