@import "_common"



html, body
    height 100%

#nav, #translations
    list-style-type none
    text-align center
    padding 0
    margin 0
    li
        display inline-block
        position relative
        line-height 40px
        &:last-child .nav-link
            margin-right 0

#translations
    position fixed
    right 1em
    bottom 0.5em
    .delimiter
        color $light
        margin 0 5px
    .nav-link
        margin 0

.nav-link
    color $light
    padding-bottom 3px
    margin 0 1.5em
    &:first-child
        margin-left 0
    &:hover, &.current
        border-bottom 3px solid $green

#logo
    display block
    margin 0 auto
    width 200px

#logo-wrap
    margin 3.5em 0 4em

#hero
    text-align center
    height 100%
    min-height 720px
    position relative
    .inner
        z-index 2
        height 640px
        width 100%
        position absolute
        top 50%
        margin-top -340px
        left 0
    h1
        font-family $logo-font
        font-weight 300
        font-size 4em
        margin 0
    .warning
        color $light
    .desc
        max-width 800px
        padding 0 20px
        text-align center
        margin 1.5em auto
        color $light
    .down
        position absolute
        z-index 1
        bottom 0
        width 100%
        left 0
        padding 1.5em 0
        img
            width 20px
    a.button
        width 280px
        margin .5em

#social
    text-align center
    list-style-type none
    margin 0 auto
    padding 0
    margin 1.5em auto
    li
        display inline-block
        margin 0 5px
        vertical-align middle
        &.last
            margin-left -2px

#example
    //background-color #f3f3f3
    text-align center
    padding 20px
    max-width 1200px
    margin 0 auto 3em
    h2
        margin-bottom 1.5em
    code, pre
        background-color transparent
    figure.highlight
        margin 0
        box-shadow none
        background-color transparent
    .sign
        display inline-block
        height 10em
        line-height 9em
        padding 0 .5em
        font-weight 600
        color $light
    .block
        text-align left
        display inline-block
        width 28%
        height 10em
        vertical-align top
        background-color #f9f9f9
        border-radius 2px
        box-shadow 0 1px 2px rgba(0,0,0,.125)
    #demo
        padding 0 20px
        word-wrap break-word
        input
            font-size .75em
            border 1px solid #ccc
            padding 4px 8px
            border-radius 2px
            font-family $body-font
            &:focus
                outline none
                border-color $green

#features
    padding 3em 0
    text-align center
    background-color #f9f9f9
    .cool
        font-size 1.8em
        text-align center
        margin-top 1em
        color $light
    .feats
        max-width 1200px
        margin 0 auto
    .feat
        box-sizing border-box
        -moz-box-sizing border-box
        display inline-block
        text-align left
        vertical-align top
        width 280px
        margin 40px
        h2
            color $medium
            line-height 40px
            margin-bottom 0
        p
            color $light
            padding-left 52px
            margin .4em 0
        a
            color $green
            font-weight 600
    .icon
        display inline-block
        vertical-align middle
        position relative
        top -3px
        width 40px
        height 40px
        margin-right 12px
        background url(../images/icons.png)
        background-size 240px 40px
        &.fast
            background-position -40px 0
        &.compact
            background-position -80px 0
        &.powerful
            background-position -120px 0
        &.composable
            background-position -160px 0
        &.module
            background-position -200px 0

#why
    padding 4em 0
    background-color $green
    color #fff
    h2
        margin-top 0
        color #fff
        font-size 1.5em
        text-align center
    ul
        line-height 1.8em
        font-size 1.15em
        width 320px
        margin 0 auto
        padding 0
        list-style-type none
        li:before
            content ""
            display inline-block
            width 24px
            height 24px
            background url(../images/check.png) center center no-repeat
            background-size 24px 24px
            margin-right 10px
            position relative
            top 4px

#footer
    text-align center
    color #fff
    padding 4em 0
    background-color #7f8c8d
    .avatar
        width 100px
        border-radius 100%
        margin 2.5em 0 1em
    a
        color #fff
        text-decoration underline
        &.start
            font-size 1.2em
            text-decoration none
            text-transform uppercase
            letter-spacing 1px
            border 1px solid #fff
            display inline-block
            padding 12px 20px
            border-radius 25px
            transition all .15s ease
            margin-bottom 2em
            &:hover
                background-color #fff
                color #7f8c8d
                zoom()
    p
        margin .3em 0

#main
    display none

#donate
    margin-left -2px !important

#sponsors, #sponsors-mobile
    span
        color $light
        font-size .85em
    a, img
        position relative
        width 100px
        display inline-block
        vertical-align middle
    a
        margin 5px 10px 0

#sponsors-mobile
    display none
    text-align center
    margin-bottom 2em
    a
        display block
        width auto
        margin 10px auto

@media screen and (max-width: 480px)
    body
        font-size 14px
    #nav
        margin 1.5em 1.2em 0
    #translations
        margin-bottom 2em
    #logo
        width 120px
    .nav-link
        font-size .85em
        margin 0 .5em
    .divider
        font-size 1.2em
        margin 2.5em 1em
    #hero
        min-height 560px
        .inner
            height 600px
            margin-top -300px
        h1
            font-size 2em
            font-weight 400
        .buttons
            max-width 300px
            margin 1em auto
        a.button
            width 260px
            font-size .8em
            margin .5em 0
        .desc
            max-width 300px
        .warning, .desc
            font-size .85em
            margin .8em auto
            br
                display none
        .down
            display none
    #social
        max-width 340px
        margin 1.2em auto
        line-height 1.8em
    .cool
        margin-top 0
    #features .feat
        font-size 14px
        margin .8em 0
        width 250px
    #why
        ul
            width 280px
            font-size 1.1em
        h2
            font-size 1.4em

@media screen and (max-width: 860px)
    #features, #hero
        font-size 16px
    #sponsors
        display none
    #sponsors-mobile
        display block
    #example
        .block
            display block
            width auto
            height auto
        #demo
            padding 5px 20px 20px
        .sign
            display block
            height 1em
            line-height 1em
            padding .5em 0
    #translations
        position relative
        right 0
        bottom 0
.main-index
		background-image:#c3420b
		height : 100%

.main-svg
		height : 100%
		position : relative
		z-index : 2
		overflow: hidden
		background: #fff
		&.demo
				.desc-info
						h3
								color : #fff !important
						color : #fff !important
		.desc
				position : absolute
				left : 0
				top : 0
				display:flex
				justify-content : center
				align-items : center
				width: 100%
				height: 100%
				.phone
						width : 372px
						height : 678px
						background : url(../images/iphone.png) no-repeat
						background-size : 100%
						zoom: 0.9
						padding: 113px 60px 113px 60px
				.desc-info
						h3
								color : #333
								font-size : 30px
						display:flex-item
						color : #333
						font-size : 20px
						.github
								a
										display : flex
										align-items : center
										color : #333
										margin-bottom : 8px
										span
												margin-left:10px
						button
								border:0
								background : #4cd964
								padding : 10px 25px
								border-radius:4px
								color : #fff
								cursor : pointer
								out-line : none
.demo
		background : url(../images/sky.jpg)
		background-size : cover
		background-attachment: fixed
.rn-demo
		margin-bottom :47px
		background : #fff
.main-footer
		background : #333
		color : #ccc
		position : fixed
		bottom :0
		width : 100%
		text-align : center
		z-index : 1
#navbar
		.indicateor
				pointer-events: none;
				position: fixed;
				-webkit-transition: all 0.25s ease-in-out;
				transition: all 0.25s ease-in-out;
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.nav-index
		background-color:#000
		display: flex
		justify-content : space-between
		position: fixed
		z-index: 999
		width: 100%
		h2
				margin : 0
				display: flex
				align-items : center
				justify-content : center
				padding-left : 25px
				color : #fff
				font-size : 16px
				font-weight : normal
		ul
				margin:0
				li
						padding : 25px 20px
						list-style :none
						float : left
						&:hover
								background : #106ec4
						a
								color : #fff