@ccharset "utf-8";
/* CSS Document */

@import url("form.css");

@import url("font_face.css");

/*================ defaust css========*/

*{ margin:0;
padding:0;
outline:none;
}

img{ border:none;
}

html{
	height: 100%;
}

body{ background:#FFFFFF;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
font-family: "proxima-nova",sans-serif;
font-size:16px;
font-weight:400;
line-height:26px;
color:#7c7c7c;
height:100%;
overflow-x:hidden
}

a, input {color: #2F2F2F;
-webkit-transition: all 350ms ease-out 0s;	
   -moz-transition: all 350ms ease-out 0s;
	 -o-transition: all 350ms ease-out 0s;
		transition: all 350ms ease-out 0s;
}

iframe {
border: 0;
}

a{color:#4d4d4d;
text-decoration: none;
outline: 0;
}

a:hover{color:#8864ff;
text-decoration: none;

}

span.color{ color:#f68301;
}

h1, h2, h3, h4, h5, h6, p {
font-weight: normal;
margin:0;
padding:0;
color: #4d4d4d;
}

p strong{ color:#1f1f1f;
font-weight:700;
}

.clear{ clear:both
}

.btn:focus{ color:#f68301;
outline:none;
background:#1F1F1F;
}



/*================ defaust css========*/


/*============== common css start==================*/

header{
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	-webkit-transition: all 350ms ease-out 0s;	
	-moz-transition: all 350ms ease-out 0s;
	-ms-transition: all 350ms ease-out 0s;
	-o-transition: all 350ms ease-out 0s;
	transition: all 350ms ease-out 0s;
}

.fake_header{
	height: 155px;
	background: #7553e4
}

header.white{
	background:white;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.2)
}

.logo{
	display: block;
	width: 256px;
	height: 43px;
	background: url(../images/logo.png) no-repeat left bottom;
	background-size: 256px 86px;
	-ms-background-size: 256px 86px;
	-o-background-size: 256px 86px;
	-webkit-background-size: 256px 86px;
	margin-top: 60px;
	margin-left: 40px;
}

header.white .logo{
	margin-top: 30px;
	background: url(../images/logo.png) no-repeat left top;
	background-size: 256px 86px;
	-ms-background-size: 256px 86px;
	-o-background-size: 256px 86px;
	-webkit-background-size: 256px 86px;
}

header.white #nav, header.white #nav_inner{
	margin-top: 40px;
}

header.white #nav li a, header.white #nav_inner li a{
	color: #4d4d4d;
}


header.white #nav li a:hover, header.white #nav_inner li a:hover{
	color:#7553e4
}

#nav .current a, #nav_inner .current a{
	color: white
}

header.white #nav .current a{
	color:#7553e4
}

.nav-up {
    top: -110px;
}

#nav, #nav_inner{
	list-style: none;
	margin-top: 65px;
	margin-right: 30px;
	-webkit-transition: all 350ms ease-out 0s;	
	-moz-transition: all 350ms ease-out 0s;
	-ms-transition: all 350ms ease-out 0s;
	-o-transition: all 350ms ease-out 0s;
	transition: all 350ms ease-out 0s;
}

#nav li, #nav_inner li{
	display: inline-block;
	padding: 0px 20px;
}

#nav li a, #nav_inner li a{
	 font-size: 20px;
	 color: white;
	 display: inline-block;
	 font-family: "proxima-nova",sans-serif;
}

.nav_icon span{
	background: white;
	height: 3px;
	margin-bottom: 7px;
	width: 32px;
	display: block;
}

.nav_icon{
	margin-top: 30px;
	float: right;
	margin-right: 15px;
	cursor: pointer;
}

header.white .nav_icon span{
	background:#7553e4;
}

header.white .nav_icon{
	 margin-top: 20px;
}


.section{
	padding: 130px 0px 120px;
	overflow-x: hidden;
}

.section.gray{
	background: #f3f4f4;
}

.section.portfolio{
	padding: 140px 0px;
}

.section.contact{
	background: #2e2e2e;
}

.section.font_color{
	padding-bottom: 80px;
}

.section.about{
	padding: 130px 0px 140px;
	position: relative;
	background: rgb(126,90,243); /* Old browsers */
	background: -moz-radial-gradient(10%, ellipse cover,  rgba(126,90,243,1) 0%, rgba(76,65,148,1) 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(10%, ellipse cover,  rgba(126,90,243,1) 0%,rgba(76,65,148,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at 10%,  rgba(126,90,243,1) 0%,rgba(76,65,148,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e5af3', endColorstr='#4c4194',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

h1.heading{
	 font-size: 75px;
	 font-family: 'GothamBlack' , sans-serif;
}

h2.heading{
	 font-size: 48px;
	 font-family: 'GothamBold' , sans-serif;
	 margin-bottom: 15px;
	 letter-spacing: -2px;
}

h3.heading{
	 font-size: 43px;
	 font-family: 'GothamBold' , sans-serif;
	 margin-bottom: 25px;
	 letter-spacing: -1px;
}


h4.heading{
	font-size: 34px;
	font-family: 'GothamBold' , sans-serif;
	margin-bottom: 5px;
	letter-spacing: -1px;
}


.heading.white{
	color: white !important;
}

.purple_bar{
	width: 21%;
	display: block;
	height: 11px;
	background: #7553e4;
	margin-top: 35px;
	margin-bottom: 35px;
}

.purple_bar.white{
	background:  white !important;
}

.content p{
	font-size: 20px;
	line-height: 34px;
	margin-bottom: 35px;
	font-weight: 300;
	color: #7c7c7c;
}

.content p:nth-last-child(1){
	margin-bottom: 0px;
}

.content ul{
	list-style: none;
}

.content ul li{
	display: block;
	padding:0px 0px 20px;
	font-size: 20px;
	font-weight: 300;
	background: url(../images/bullet.png) no-repeat left 2.5px;
	background-size: 20px;
	padding-left: 36px;
}


.content ul li:nth-last-child(1){
	padding-bottom: 0px;
}

footer{
	height: 120px;
	background: #272727;
}


/*============== common css end==================*/




/*============== home page css start==================*/

.hero_image{
	width: 100%;
	height: 100%;
	position: relative;
	background: rgb(126,90,243); /* Old browsers */
	background: -moz-radial-gradient(top, ellipse cover,  rgba(126,90,243,1) 0%, rgba(76,65,148,1) 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(top, ellipse cover,  rgba(126,90,243,1) 0%,rgba(76,65,148,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at top,  rgba(126,90,243,1) 0%,rgba(76,65,148,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e5af3', endColorstr='#4c4194',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.big_icon{
	background: url(../images/big_icon.png) no-repeat center center;
	height: 100%;
}

.hero_content{
	position: absolute;
	top: 33%;
	height: auto;
	width: 100%;
	left: 0;
}

.jumbo_heading{
	font-family: 'GothamBlack' , sans-serif;
	font-size: 100px;
	text-align: center;
	color: #FFFFFF;
}

.jumbo_heading span{
	font-size: 60px;
	display: block;
	margin-top: 20px;
	font-family: 'GothamBold' , sans-serif;
}

.hero_text{
	font-size: 30px;
	font-weight: 300;
	line-height: 50px;
	color: #FFFFFF;
	width: 880px;
	text-align: center;
	margin: 50px auto;
}

.scroll_down{
	width: 100%;
	height: 49px;
	position: absolute;
	left: 0;
	bottom: 0;
	text-align: center;
}

.scroll_down_icon{
	width: 156px;
	height: 49px;
	background: url(../images/scroll_down.png) no-repeat left top;
	margin: 0 auto;
}

.portfolio_image{
	display: block;
	position:relative;
	left: -140px;
}

.portfolio_image.right{
	display: block;
	margin-left: inherit;
	position:relative;
	right: -60px;
	left: inherit;
}


.portfolio_image.web{
	display: block;
	margin-left: inherit;
	position:relative;
	left: -60px;
}


.portfolio_image.web_right{
	display: block;
	margin-left: inherit;
	position:relative;
	right: -50px;
	left: inherit;
}

.portfolio_image img{
	width: 700px;
}

.portfolio_details{
	margin-top: 34%;
}

.portfolio_details.web {
    margin-top: 18%;
}

.portfolio_details span{
	font-weight: 300;
	color: #4d4d4d;
	font-size: 30px;
	display: block;
	margin-bottom: 25px;
}

.portfolio_details p{
	font-size: 20px;
	line-height: 34px;
	font-weight: 300;
	font-family: "proxima-nova",sans-serif;
	color: #7c7c7c;
	margin-bottom: 40px;
}

.about_text p{
	color: white;
	font-weight: 400;
	font-size: 30px;
	line-height: 46px;
	margin-bottom: 65px;
}

.founder_name{
	font-size: 34px;
	color: white;
	font-family: 'GothamBold' , sans-serif;
	margin-bottom: 10px;
}

.designation{
	display: block;
	font-size: 24px;
	font-weight: 300;
	color: white;
	margin-bottom: 30px;
}

.anand p{
	font-family: "proxima-nova",sans-serif;
	font-size: 20px;
	color: #b7a2fe;
	line-height: 34px;
}

.anand_pic{
	position: absolute;
	bottom: 0px;
	right: 17.5%;
}

.anand_pic img {
    height: 500px;
}

.social_icons{
	margin-top: 50px;
}

.social_icons a{
	display: inline-block;
	margin-right: 20px;
}

.social_icons a img{
	width: 41px;
}

.contact_text p{
	font-size: 20px;
	width: 100%;
	line-height: 34px;
	color: #7d7d7d;
	font-family: "proxima-nova",sans-serif;
	font-weight: 300;
}

.contact_form{
	margin-top: 60px;
}

.message{
	position: relative;
}

.send{
	width: 82px;
	height: 82px;
	border: solid 12px #2e2e2e;
	position: absolute;
	right: 50px;
	bottom: 18px;
	background: url(../images/send.jpg) no-repeat center center #7553e4;
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	-ms-border-radius:50px;
	-o-border-radius:50px;
	border-radius:50px;
}

.copyright{
	color: #7d7d7d;
	font-size: 18px;
	font-family: "proxima-nova",sans-serif;
	margin-top: 48px;
}

.social{
	margin-top: 48px;
}

.social a{
	display: inline-block;
	margin-left: 20px;
}

.social a i{
	font-size: 20px;
	color: #FFFFFF;
}


/*============== home page css end==================*/




/*============== inner page css start==================*/

.portfolio_hero_image{
	height: 100%;
	width: 100%;
	position: relative;
	background-position: center top fixed;
	background-size: cover !important;
	-moz-background-size: cover !important;
	-ms-background-size: cover !important;
	-o-background-size: cover !important;
	-webkit-background-size: cover !important;
}	

.portfolio_head{
	position: absolute;
	width: 100%;
	height: auto;
	top: 30.8%;
	left: 0;
}

.portfolio_head h1{
	font-size: 70px;
	color: white;
	font-family: 'GothamBold' , sans-serif;
	letter-spacing: -4px;
}

.devider{
	height: 5px;
	width: 65px;
	background: white;
	margin: 20px auto;
}

.portfolio_head p{
	font-size: 30px;
	color: white;
	font-family: "proxima-nova",sans-serif;
	font-weight: 600;
	margin-bottom: 15px;
}

.portfolio_head span{
	font-size: 22px;
	color: white;
	font-family: "proxima-nova",sans-serif;
	font-weight: 300;
}

.macbook{
	margin-top:-460px;
	text-align: center;
	margin-bottom: 70px;
}

.macbook img{
	width: 1170px;
}

.iphone{
	margin-top:-500px;
	text-align: center;
	margin-bottom: 100px;
}

.screen_shot{
	position: relative;
	z-index: 2;
	overflow: visible !important;
}

.the_project{
	text-align: center;
}

.the_project.app{
	text-align: center;
}


.the_project.app p{
	width: 960px;
	margin: 0 auto 65px;
}

.the_project p{
	margin-bottom: 65px;
}

.first_screen{
	height:100%;
	position: relative;
	background-size: cover !important;
	-o-background-size: cover !important;
	-ms-background-size: cover !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
}

.black_overlay{
	background: rgba(0,0,0,0.2);
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.screen_desc{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
	text-align:center;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 96%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 96%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 96%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}


.screen_desc h1, .sceond_desc h1{
	font-family: 'GothamBold' , sans-serif;
	font-size: 70px;
	color: white;
	letter-spacing: -4px;
	padding-top: 120px;
	margin-bottom: 20px;
}

.screen_desc p{
	font-family: "proxima-nova",sans-serif;
	font-size: 30px;
	color: white;
	line-height: 40px;
	width: 1020px;
	margin: 0 auto
}

.imac{
	width: 768px;
	margin:0 auto;
	position: relative;
}

.imac img{
	width: 100%;
}

.imac_slider {
    width: 92.5%;
    height: 62.9%;
    background: black;
    position: absolute;
    left: 3.8%;
    top: 4.4%;
}

.iphone_slider {
    width: 87.8%;
    height: 76%;
    background: black;
    position: absolute;
    left: 6.4%;
    top: 12.3%;
}

.all_colors{
	margin-bottom: 80px;
	margin-top: 25px;
}

.single_color{
	width: 80px;
	text-align: center;
	margin-top: 10px;
	float: left;
	margin-right: 45px;
}

.color_circle{
	width: 80px;
	height: 80px;
	-moz-border-radius:55%;
	-webkit-border-radius:55%;
	-ms-border-radius:55%;
	-o-border-radius:55%;
	border-radius:55%;
}

.color_code {
    display: block;
    color: #7c7c7c;
    font-size: 16px;
    margin-top: 15px;
}

.single_font_row{
	margin-bottom: 50px;
}


.font_name{
	font-size: 18px;
	color: #7c7c7c;
	margin-bottom:40px;
	display: block;
	font-family: "proxima-nova",sans-serif;
	font-weight: 300;
}

.fonts{
	margin-bottom: 40px;
}

.fonts h3{
	margin-bottom: 0px;
}

.font_image{
	margin-bottom: 50px;
}

.font_image img{
	max-height: 55px;
}

.second_screen{
	height:600px;
	width: 100%;
	position: relative;
	background-size: cover !important;
	-o-background-size: cover !important;
	-ms-background-size: cover !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	background-position: center top;
}

.sceond_desc{
	width: 565px;
	position: relative;
	left: 10%;
	top: 37.5%;
}

.sceond_desc h1{
	color: white;
	font-size: 50px;
}


.sceond_desc p{
	font-size: 24px;
	color: white;
	line-height: 36px;
	font-weight: 300;
}

.idea{
	font-size: 70px;
	color: white;
	letter-spacing: -2px;
	text-align: center;
	margin-bottom: 60px;
	font-family: 'GothamBold' , sans-serif;
}

.portfolio_footer{
	padding: 60px 0px
}

.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    height: 100%;
    font-size: 18px;
    background: #000000;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.apple_iphone{
	text-align: center;
	width: 365px;
	margin: 0 auto;
	position: relative;
}

.apple_iphone img{
	width: 100%;
}

.iphone_slider .swiper-slide img{
	width: 99.5%;
	text-align: center;
	border: solid 1px black; 
}

.swipe_ins{
	font-size: 16px;
	color: white;
	padding: 0px 0px 25px 0px;
	text-align: center;
}
/*============== inner page css end==================*/