html {
    height: 100%;
    overflow: hidden;
}
body {
    height: 100%;
    overflow: hidden;
}
body.landing {
    background-image: url("../images/home/funny-background.jpg");
    background-position: right bottom;
    background-repeat: no-repeat;
}

.landing .logo h1 {
	display:none !important;
}

.landing .inner-width {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
}

.landing .header-wrapper {
	letter-spacing: 0;
    line-height: auto;
}

.landing .mobile-nav {
	top: 55px;
	display:none;
}

/*
 * Shake animation
*/
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:3s;-moz-animation-duration:3s;-ms-animation-duration:3s;-o-animation-duration:3s;animation-duration:3s;}.animated.hinge{-webkit-animation-duration:3s;-moz-animation-duration:3s;-ms-animation-duration:3s;-o-animation-duration:3s;animation-duration:3s;}@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-1px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(1px);}
}

@-moz-keyframes shake {
    0%, 100% {-moz-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-1px);}
    20%, 40%, 60%, 80% {-moz-transform: translateX(1px);}
}

@-o-keyframes shake {
    0%, 100% {-o-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-1px);}
    20%, 40%, 60%, 80% {-o-transform: translateX(1px);}
}

@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-1px);}
    20%, 40%, 60%, 80% {transform: translateX(1px);}
}

.shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
}



.landing .content {
    margin: 8% auto 0;
    text-align: center;
    width: 90%;
}
.phones {
    margin: 0 auto;
}
.phones a {
    display: inline;
}
.phones img {
    width: 19%;
}
.first-phone {
    left: 2%;
    position: relative;
    z-index: 1;
}
.second-phone {
    left: -3%;
    position: relative;
    z-index: 2;
}
.third-phone {
    left: -8%;
    position: relative;
    z-index: 3;
}
.fourth-phone {
    left: -13%;
    position: relative;
    z-index: 4;
}
.fifth-phone {
    left: -18%;
    position: relative;
    z-index: 5;
}

@media (max-width:801px) { 
	body.landing {
    	background-image: none;
    	overflow: scroll;	
	}
	
	.phones {
		margin: 0 auto;
	}
	
	.phones a {
    	display: block;
		margin-bottom: 30px;
	}
	
	.phones img {
		width: 70%;
	}
	
	.first-phone,
	.second-phone,
	.third-phone,
	.fourth-phone,
	.fifth-phone{
		position: inherit;
	}


}


@media only screen 
and (min-device-width : 320px)
and (max-device-width : 568px) 
and (orientation : landscape) {
    /* iPhone 5 in landscape only */
	
	body.landing {
    background-image: none;
	}
	
	.landing .mobile-nav {
	top: 15px;
	}
	
	.landing .content {
    margin: 3em auto 0;
    text-align: center;
    width: 88%;
	}
	
	.phones a {
    display: inline;
	}
	
	.phones img {
		width: 19%;
	}
	.first-phone {
    left: 5%;
    position: relative;
    z-index: 1;
}
	.second-phone {
		left: 0%;
		position: relative;
		z-index: 2;
	}
	.third-phone {
		left: -5%;
		position: relative;
		z-index: 3;
	}
	.fourth-phone {
		left: -10%;
		position: relative;
		z-index: 4;
	}
	.fifth-phone {
		left: -15%;
		position: relative;
		z-index: 5;
	}
	
}



@media only screen 
and (min-device-width: 100px) 
and (max-device-width: 736px) 
and (orientation : portrait) { 
/*iPhone 6+ Portrait*/
	
	body.landing {
    height: 100%;
    overflow: scroll;
    background-image: none;
	}
	
	.landing .mobile-nav {
	top: 15px;
	}
	
	.landing .content {
		width: 95%;
	}
	
	.phones {
		margin: 0 auto;
	}
	
	.phones a {
    	display: block;
		margin-bottom: 30px;
	}
	
	.phones img {
		width: 70%;
	}
	.first-phone,
	.second-phone,
	.third-phone,
	.fourth-phone,
	.fifth-phone{
		position: inherit;
	}
	
}