/* CYSY Framework 3 Copyright (c) 2012-2013 - CYber SYtes, Inc. All Rights Reserved */


/*
    // ========================================== \\
   ||                                              ||
   ||      Smartphones Portrait & Landscape        ||
   ||                                              ||
    \\ ========================================== //
*/

/* Quick tips for default styling:

	* Use <header>,<nav>,<menu>,<section>,<footer> tags for all
	  content that you'd like to apply stylized containers for
	  on the mobile site. We have built these in by default.
	  
	* Contain all news/blog posts within <article> tags
	
	* Use <div>'s to style generic layout containers on the large
	  website, because this mobile stylesheet will strip out all 
	  of that formatting in the generic mobile version.
	  
*/

.mobile-navigation {
	display: none;
}

@media screen and (max-width: 1200px) {

	.responsive .notice {
	    font-size: 20px;
	}
	.responsive header nav ul li a {
		font-size: 20px;
	}

	.responsive .slideshow {
	    padding-top: 1px;
	}

	.responsive .order_now strong {
	    font-size: 120px;
	    padding-left: 13px;
	}

	.responsive .order_now span {
	    font-size: 42px;
	}

	.responsive aside .order_now {
	    width: 490px;
	    height: 340px;
	}

	.responsive .home .main h1 {
	    font-size: 120px;
	}

	.responsive footer h2 {
	    font-size: 65px;
	}

	.responsive .main h3, .main h2 {
	    font-size: 30px;
	}

}

@media screen and (max-width: 1000px) {

	.responsive header nav ul li a {
		font-size: 16px;
	}

}

@media screen and (max-width: 900px) {

	.responsive header nav ul li a {
		padding: 0 12px;
	}

}


@media screen and (max-width: 860px) {

	.responsive .notice {
	    font-size: 18px;
	}
	.responsive header nav ul li a {
		font-size: 18px;
	}

	.responsive aside .order_now {
	    width: 470px;
	    height: 345px;
	}

	.responsive .order_now strong {
	    font-size: 110px;
	    padding-left: 33px;
	}

	.responsive .order_now span {
	    font-size: 38px;
        letter-spacing: 2px;
	}

	.responsive .order_now span em {
	    margin-right: 90px;
	}

	.responsive .home .main h1 {
	    font-size: 110px;
	}

	.responsive footer h2 {
	    font-size: 55px;
	}

	.responsive aside {
	    width: 28%;
	}


	



	/* Mobile Override */

	.responsive .order_now strong {
	    font-size: 100px;
	    padding-left: 45px;
	}

	.responsive .order_now span {
	    font-size: 36px;
        letter-spacing: 2px;
	}

	.responsive .order_now span em {
	    margin-right: 95px;
	}

	.responsive .main h1 small {
	    font-size: 30px;
	}

	.responsive .home .main h1 {
	    font-size: 110px;
	}

	.responsive header {
		height: auto;
	}

	.responsive header .logo {
	    position: relative;
	    margin: 0 auto;
	    left: 0;
	    top: 13px;
	    margin-bottom: 10%;
	}

	.responsive header .contact_bar {
	    position: relative;
	    margin: 0 auto !important;
	    clear: both;
	    float: none;
	}

	.responsive .main-navigation {
		display: none;
	}

	.responsive .mobile-navigation {
		display: block;
	}

	.responsive header nav {
		width: 100%;
        padding: 5% 5%;
	    position: relative;
	    margin: 0 auto;
	    text-align: center;
	}

	.responsive .mobile-navigation select {
	    width: 75%;
	    padding: 1%;
	    margin-top: -1%;
        font-family: 'Open Sans';
	    font-size: 18px;
	}

	.responsive .mobile-navigation option {
		font-size: 16px;
		width: 40%;
	}

	.responsive .main .content {
	    width: 100%;
	    padding: 30px 5% 5% 5%;
	}

	.responsive .more_link {
	    font-size: 32px;
	}

	.responsive aside {
	    width: 100%;
	    display: inline-block;
	    float: none;
	    clear: both;
	    position: relative;
	    margin: 0 auto;
	    text-align: center;
        margin-top: 50%;
	}

	.responsive aside a {
	    padding-top: 8%;
	}

	.responsive aside .order_now {
	    width: 430px;
	    height: 335px;
        margin-top: -55%;
	}

	.responsive .order_now strong {
	    font-size: 90px;
	    padding-left: 55px;
	}

	.responsive .order_now span {
	    font-size: 32px;
	    margin-top: -3%;
	}

	.responsive .order_now span em {
	    margin-right: 80px;
	}

	.responsive .main h1 small {
	    font-size: 28px;
	}

	.responsive .home .main h1 {
	    font-size: 120px !important;
	}

	.responsive .main h1 {
	    font-size: 68px;
	}

	body {
		max-width: 100%;
		min-width: unset;
	}

	.responsive p {
	    font-size: 20px;
	    line-height: 30px;
	}

	.responsive footer .left, footer .right {
	    width: 100%;
	}

	.responsive footer h2 {
	    font-size: 48px;
	}

	.responsive footer ul li {
	    font-size: 15px;
	}

	.responsive .disclaimer {
	    font-size: 14px !important;
	    line-height: 18px !important;
	}

	.responsive .main h1 {
	    font-size: 52px;
	}
	
	.responsive .main .content a {
	    letter-spacing: 2px;
	}


}

@media screen and (max-width: 650px) {

	.responsive .order_now strong {
	    font-size: 100px;
	    padding-left: 45px;
	}

	.responsive .order_now span {
	    font-size: 36px;
        letter-spacing: 2px;
	}

	.responsive .order_now span em {
	    margin-right: 95px;
	}

	.responsive .main h1 small {
	    font-size: 30px;
	}

	.responsive .home .main h1 {
	    font-size: 110px;
	}

}

@media screen and (max-width: 500px) {

	.responsive header {
		height: auto;
	}

	.responsive header .logo {
	    position: relative;
	    margin: 0 auto;
	    left: 0;
	    top: 13px;
	    margin-bottom: 10%;
	}

	.responsive header .contact_bar {
	    position: relative;
	    margin: 0 auto !important;
	    clear: both;
	    float: none;
	}

	.responsive .main-navigation {
		display: none;
	}

	.responsive .mobile-navigation {
		display: block;
	}

	.responsive header nav {
		width: 100%;
        padding: 5% 5%;
	    position: relative;
	    margin: 0 auto;
	    text-align: center;
	}

	.responsive .mobile-navigation select {
	    width: 75%;
	    padding: 1%;
	    margin-top: -1%;
        font-family: 'Open Sans';
	    font-size: 18px;
	}

	.responsive .mobile-navigation option {
		font-size: 16px;
		width: 40%;
	}

	.responsive .main .content {
	    width: 100%;
	    padding: 30px 5% 5% 5%;
	}

	.responsive .more_link {
	    font-size: 32px;
	}

	.responsive aside {
	    width: 100%;
	    display: inline-block;
	    float: none;
	    clear: both;
	    position: relative;
	    margin: 0 auto;
	    text-align: center;
        margin-top: 50%;
	}

	.responsive aside a {
	    padding-top: 8%;
	}

	.responsive aside .order_now {
	    width: 430px;
	    height: 335px;
        margin-top: -55%;
	}

	.responsive .order_now strong {
	    font-size: 90px;
	    padding-left: 55px;
	}

	.responsive .order_now span {
	    font-size: 32px;
	    margin-top: -3%;
	}

	.responsive .order_now span em {
	    margin-right: 80px;
	}

	.responsive .main h1 small {
	    font-size: 28px;
	}

	.responsive .home .main h1 {
	    font-size: 120px !important;
	}

	.responsive .main h1 {
	    font-size: 68px;
	}

	body {
		max-width: 100%;
		min-width: unset;
	}

	.responsive p {
	    font-size: 20px;
	    line-height: 30px;
	}

	.responsive footer .left, footer .right {
	    width: 100%;
	}

	.responsive footer h2 {
	    font-size: 48px;
	}

	.responsive footer ul li {
	    font-size: 15px;
	}

	.responsive .disclaimer {
	    font-size: 14px !important;
	    line-height: 18px !important;
	}

	.responsive .main h1 {
	    font-size: 52px;
	}
	
	.responsive .main .content a {
	    letter-spacing: 2px;
	}
}

@media screen and (max-width: 400px) {
	.responsive p {
	    font-size: 18px;
	    line-height: 26px;
	}

	.responsive header nav {
	    padding: 10% 0%;
	}

	.responsive .main h1 small {
	    font-size: 24px;
	}

	.responsive .main h1 {
	    padding-top: 0;
	}

	.responsive aside .order_now {
	    width: 350px;
	    height: 305px;
	}

	.responsive .order_now strong {
	    font-size: 70px;
	}

	.responsive .order_now span {
	    font-size: 28px;
	    line-height: 38px;
	    margin-top: -7%;
	    margin-left: 25px;
	    margin-right: 0;
	}

	.responsive .order_now span img {
	    width: 65%;
	}

	.responsive aside a {
	    padding-top: 14%;
	}

	.responsive footer h2 {
	    font-size: 40px;
	}

	.responsive footer .column_small, .responsive footer .column_big {
	    width: 100%;
	}

	.responsive .disclaimer {
	    font-size: 12px !important;
	}

	.responsive .main h1 {
	    font-size: 48px;
	}

	.responsive .main h3, .main h2 {
	    font-size: 26px;
	}

}


/* CYSY Framework 3 Copyright (c) 2012-2013 - CYber SYtes, Inc. All Rights Reserved */