@media screen and (max-width:1200px){
	.device{left:20%;top:-36px;}
	footer li{margin-right:10%;}
	.feature-content{width:55%;}
}
@media screen and (max-width:991px){
	.feature-1,.feature-2{margin-bottom:50px;}
	.device{display:none;}
	.screenshots ul li{width:50%;}
	.screenshots-intro{padding:110px 0 100px 0;}
	.feature-content{width:80%;}
	.features-slider{height:100%}
}
@media screen and (max-width:680px){
	.feature-content{width:60%;}
		.nav-wrapper{display:none;}
}
@media screen and (max-width:640px){
	.use-btn{display:none;}
	footer li{display:block;text-align:left;padding:20px 0;border-bottom:dashed 1px #c7cacc;margin-right:0!important;float:none;}
	nav{margin-top:40px;}
	.overlay ul{margin-left:0px;}
	.overlay ul li a{padding:20px 0;min-width:120px;font-size:12px;}

	.hero h1{font-size:40px;margin:20px 0 20px 0}
	.screenshots ul li{width:%;min-height:5%;float:left;}
	.screenshots figcaption .caption-content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -48px;
    margin-left: -110px;
    width: 223px;
    transform: translate(0px, 15px);
    transition: all 300ms ease-in-out 0s;
}

.hero h1 {
    text-align: right;
    margin:-8px 0 0 0;
    animation-duration: 2s;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    background:url(../images/top/new/name.png);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:50% 8px;
}

.screenshots figcaption p {
    margin-bottom: 0px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 11px;
    width: 100%;
}

.features-slider {
    position: relative;
    padding: 3% 11% 10%;
    height: auto;
    background-color: #000;
}

.features-slider h1 i {
display: none;
}
.features-bg {
    position: relative;
    height: 0;
		min-height: 0;
    padding-top: 64%;
	}
	#message{
    max-height:none;
}
#message .message_wrap_w {
    height: auto;
    color: #000;
    padding: 1% 9%;
    background: #EFEFEF none repeat scroll 0% 0%;
}

#contact p{
	font-size: 10px;
}
#map_detail {
    color: #FFF;
    padding: 24px;
}
.features-slider h1 i {
display: inline-block;
}

.menu {
    position: fixed;
    right: -200px;
    width: 260px;
    height: 100%;
    top: 0;
    z-index: 10;
    text-align: left;
    display:block;
}

.menu.menu-open {
    right: 0px;
}

.menu-wrap {
    position: absolute;
    top: 0;
    left: 60px;
    background: #1a1a1a;
    width: 200px;
    height: 100%;
}

.menu h1.logo a {
    font-family: 'Libre Baskerville', serif;    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 40px;
    text-transform: uppercase;
    color: #ffffff;
    margin-top: 20px;
}

.menu h1.logo a:hover {
    color: #f85c37;
}

.menu img.logo {
    margin: 20px 0;
    max-width: 160px;
}

.menu a {
    margin-left: 20px;
    color: #808080;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.menu  ul li{
    list-style: none;
}

.menu a:hover {
    color: #ffffff;
}

.menu a:active {
    color: #ffffff;
}

.menu a > i {
    float: left;
    display: inline-block;
    vertical-align: middle; 
    text-align: left;
    width: 25px;
    font-size: 14px;
    line-height: 40px;
    margin: 25px 2px;
}

.menu-close {
    cursor: pointer;
    display: block;
    position: absolute;
    font-size: 14px;
    color: #808080;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 20px;
    right: 5px;
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
}

.menu-close:hover {
    color: #ffffff;
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
}

/* Push the body after clicking the menu button */
.body-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.body-push-toright {
    left: 200px;
}

.body-push-toleft {
    left: -200px;
}

.menu,
.body-push {
    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease;
}

#menuToggle {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 11;
    display: block;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    background: rgba(0,0,0,0.25);
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
}

#menuToggle:hover {
    color: #ffffff;
    background: rgba(0,0,0,0.2);
    -webkit-transition: all .1s ease-in-out;
       -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
         -o-transition: all .1s ease-in-out;
            transition: all .1s ease-in-out;
}

}
@media screen and (max-width:465px){
	.hero h1

    {font-size:100px;margin:0px 0 5px 0}
	.screenshots ul li{width:50%;min-height:5%;float:left;}
	.screenshots figcaption .caption-content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -48px;
    margin-left: -110px;
    width: 223px;
    transform: translate(0px, 15px);
    transition: all 300ms ease-in-out 0s;
}

.screenshots figcaption p {
    margin-bottom: 0px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 11px;
    width: 100%;
}

.features-slider {
    position: relative;
    padding: 3% 11% 10%;
    height: auto;
    background-color: #000;
}

.features-slider h1 i {
display: none;
}
.features-bg {
    position: relative;
    height: 0;
		min-height: 0;
    padding-top: 64%;
	}
	#message{
    max-height:none;
}
#message .message_wrap_w {
    height: auto;
    color: #000;
    padding: 1% 9%;
    background: #EFEFEF none repeat scroll 0% 0%;
}

#contact p{
	font-size: 10px;
}
#map_detail {
    color: #FFF;
    padding: 24px;
}
	section.video i{font-size:30px;}
	section.video h1{font-size:15px;font-weight:400;}
	section.video{padding:40px;}
	.feature-content{width:100%;text-align:center;margin-top:20px;}
	.feature-icon{display:block;margin:0 auto;}
	blockquote p{width:60%;}
	.hero h1 img{width:100%;}


}