/*-----------------------------------------------------------------------
KeepItSafe Stylesheet

Project:			KeepItSafe 2014 Revamp
Version:			1.0
Primary use:		Responsive Layouts
Lead Designer:		Josef Lagunas @ j2 Global, Inc. <josef.lagunas@j2.com>

Table of Contents
[0]  - less than 767px more than 320px (mobiles)
[0A] - less than 767px more than 320px - landscape (mobile landscape)
[0B] - less than 767px more than 320px - portrait (mobile portrait)
[1]  - less than 979px more than 768px (tablets)
[1A] - less than 979px more than 768px (tablets landscape)
[1B] - less than 979px more than 768px (tablets portrait)
[2]  - less than 1279px more than 980px (standard monitors) 
[3]  - more than 1280px (large monitors)
[4]  - misc responses
------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------
[0] - Mobile
------------------------------------------------------------------------*/
 
@media only screen
and (max-width : 767px)
{
	/* Clear floats */
	.header .header-menu,
	.header .header-menu *,
	.sidebar,
	.main-content,
	.sidebar-bg-container,
	.main-content-bg-container,
	article ul,
	article li,
	.footer .footer-menu ul,
	.footer .footer-menu ul li
	{
		float: none!important;
	}
	
	/* Reset sizes */
	.sidebar,
	.main-content
	{
		width: 100%!important;
	}
	
	.header .connect-container, .header .choose-country, .header .contact-us
	{
		display: none;
	}
	
	.header
	{
		padding: 0 20px;
	}
	
		.header .logo
		{
			margin: 17px 0;
		}
		
			.header .logo a
			{
				background-size: contain;
				height: 35px;
				width: 150px;
			}
		
		.header .header-menu
		{
			margin: 0;
			position: absolute;
			right: 0;
			top: 0;
		}
		
			.header .header-menu .mobile-menu-icon
			{
				cursor: pointer;
				display: block;
			}
			
			.header .header-menu ul
			{
				display: none;
				position: absolute;
				right: 0;
				z-index: 1000;
			}
			
				.header .header-menu ul li
				{
					border-bottom: 1px solid #1c1c1c;
					border-top: 1px solid #3d3d3d;
					width: 200px;
				}
				
					.header .header-menu ul li a.current
					{
						border-bottom: none;
						border-right: 5px solid #f28d1e;
						padding-bottom: 15px;
						padding-right: 10px;
					}
	
	.box
	{
		padding: 20px;
	}
	
	.content
	{
	}
	
	.title
	{
		background-size: contain;
		font-size: 2.4em;
		padding-left: 0!important;
	}

	.policy-title h1 {
		font-size: 2.4em;
		line-height: 100px;
	}
	
	.sidebar	
	{
		background: #f9f9f9 url(../images/box-aside-top-white-border.png) 0 0 repeat-x;
		float: none!important;
	}

	.sidebar-bg-container,
	.main-content-bg-container
	{
		background: none;
		border: none;
	}
	
	.sidebar-bg-container
	{
		right: 100%;
	}
	
	.two-columns .sidebar,
	.two-columns .main-content
	{
		left: 100%;
	}
	
	.sidebar .article h2
	{
		font-size: 2.4em;
	}
	
	.sidebar .free-resources .pdf-links
	{
		text-align: center;
	}
	
	.article.icon-list ul,
	.article.icon-list ul li,
	.article.orange-icon-list ul,
	.article.orange-icon-list ul li,
	.article.facts ul,
	.article.facts ul li
	{
		display: block!important;
		width: 100%!important;
	}
	
	.article.icon-list ul li:nth-last-child(2):nth-child(odd),
	.article.orange-icon-list ul li:nth-last-child(2):nth-child(odd),
	.article.facts ul li:nth-last-child(2):nth-child(odd)
	{
		margin-bottom: 20px;
	}
	
	.article .social-networking-large ul,
	.article .social-networking-large li
	{
		float: left!important;
		width: auto!important;
	}
	
	.article li .icon
	{
		width: 25%!important;
	}
	
	.article li .text
	{
		width: 75%!important;
	}
	
	.article.facts li .text
	{
		width: 85%!important;
	}
	
	.article.icon-list-full ul li .text p.with-learn-more-link
	{
		float: none;
		margin-bottom: 0;
		width: 100%;
	}
	
	.article.icon-list-full ul li .text .icon-list-full-learn-more
	{
		float: none;
		font-size: 1.4em;
		text-align: left;
		width: 100%;
	}
	
	.footer
	{
		margin-top: 1px;
	}
	
		.footer .footer-menu ul
		{
			left: 0%;
		}
		
			.footer .footer-menu ul li
			{
				right: 0%;
			}
		
			.footer .footer-menu  ul li.divider
			{
				display: none;
			}
			
				.footer .footer-menu ul li a
				{
					padding: 5px 0;
				}
	
		.footer .cross-sell a
		{
			width: 100%;
		}
		
		.footer .legal
		{
			letter-spacing: 0.04em;
			line-height: 150%;
		}
		
			.footer .legal span
			{
				display: block;
			}
			
	.article.half
	{
		width: 90%;
	}
	
	fieldset.half
	{
		float: none;
		width: 100%;
	}
	
		fieldset.half input[type=text]
		{
			width: 100%;
		}
		
		fieldset.half:nth-child(even) label,
		fieldset.half:nth-child(even) input[type=text],
		fieldset.half:nth-child(even) textarea
		{
			margin-left: 0%;
		}
		
	.article.addresses .map-us
	{
		background-position: left -30px;
	}
	
	.article.addresses .map-au
	{
		background-position: center -150px;
	}
	
	.article.addresses .map-eu
	{
		background-position: center -2px;
	}
	
	.article.addresses ul li
	{
		margin-bottom: 20px;
		width: 100%;
	}
	
	.article.customers ul li
	{
		display: block;
		float: left;
		height: 80px;
		margin-bottom: 20px;
		width: 100%;
	}
	
			.sidebar .j2-brands ul li
			{
				display: block;
				float: left!important;
				margin-bottom: 5px;
				width: 50%;
			}
			
			.sidebar .j2-brands ul li .icon,
			.sidebar .j2-brands ul li .text
			{
				width: auto!important;
			}
	
	.home .customized-solutions
	{
		
	}
	
		.home .customized-solutions ul
		{
			float: left!important;
		}
		
			.home .customized-solutions ul li
			{
				float: left!important;
			}
			
			.home .customized-solutions ul li:first-child
			{
				float: none!important;
			}
	
	.become-a-partner .article.half
	{
		width: 50%;
	}
	
	.box.become-a-partner
	{
		background: #333 url(../images/bg-become-a-partner-tablet.png) 30% center no-repeat;
		background-image: url(../images/bg-become-a-partner-tablet.svg), none;
	}
	
	.page-image .text
	{
		margin-left: 20px;
		padding-top: 20px;
	}
	
		.page-image .text h1
		{
			font-size: 3.8em;
			font-weight: bold;
			letter-spacing: -0.05em;
			line-height: 80%;
			margin-bottom: 10px;
		}
		
		.page-image .text h2
		{
			font-size: 2.4em;
			font-weight: bold;
			letter-spacing: -0.05em;
			line-height: 80%;
			margin-bottom: 10px;
		}
		
		.page-image .text h3
		{
			font-size: 1.8em;
		}
		
		.page-image .text input
		{
			margin-top: 10px;
		}
	
	.page-image .chairs-us
	{
		background: url(../images/pano-chairs-us-tablet.png) center bottom no-repeat;
		height: 400px;
	}
	
	.page-image .chairs-uk
	{
		background: url(../images/pano-chairs-uk-tablet.png) center bottom no-repeat;
		background-size: cover;
		height: 380px;
	}
	
	.page-image .pyramid
	{
		background: url(../images/pano-pyramid-mobile.png) center bottom no-repeat;
		height: 600px;
	}
	
	.page-image .partners
	{
		background: url(../images/pano-partners-mobile.png) center bottom no-repeat;
		height: 500px;
	}
	
	.page-image .mobile
	{
		background: url(../images/pano-mobile-mobile.png) center bottom no-repeat;
		height: 500px;
	}
	
	.page-image .online-backup
	{
		background: url(../images/pano-server-room-mobile.png) center bottom no-repeat;
		height: 500px;
	}
	.page-image .pano-cloud2cloud
	{
		background: url(/images/pano-cloud2cloud-mobile.png) center bottom no-repeat;
		height: 500px;
	}
	.page-image .life-buoy
	{
		background: url(../images/pano-life-buoy-mobile.png) center bottom no-repeat;
		height: 500px;
	}
	
	.main-content .clouds
	{
		background: #003f86 url(../images/page-clouds-desktop.png) 30% center no-repeat;
		display: block;
		height: 220px;
	}
	
	.main-content .fully-m-m
	{
		background: #031018 url(../images/page-fully-m-m-desktop.png) 40% center no-repeat;
		display: block;
		height: 220px;
	}
	
	.main-content .tech-pricing
	{
		background: #2647a2 url(../images/page-pricing.png) center top no-repeat;
		display: block;
		height: 220px;
	}
	.article.cancellation { width: 100%; }
	
	#enterprisebanner1{ background-image:url(../images/pano-enterprise-desktop.png); height:248px; margin-bottom:95px}
	#enterprisebanner1-heading{ width: auto; margin: 225px -30px 1px -30px;  background: rgba(0,0,0,0.7); color: #FFF; font-size: 22px; padding: 5px 20px; border-radius:10px 0 0 0 ;}
	#enterprisebanner1-text{ background:#FEA734; padding:10px 20px; margin:0 -30px 0; font-size: 13px; width: auto;}
	#benefitsbanner{padding:20px 40px;}
	.threecol div{float:none; width:auto; padding:10px 10px 20px; margin-bottom:0;}
	.floatbanner{margin:0; padding:20px 20px 40px 50px;}
	.floatbanner img.fl, .floatbanner img.fr{ float:none; margin:0 auto; display:block; width:60%; padding-right: 40px;}
	.floatbanner h3{margin-top:20px;}
	#footerQuote{padding:35px;}
	#enterprisebanner2 h2, #enterprisebanner2 p{margin:5px auto;}
	#enterprisebanner2 img{ float:none;  display:block; margin:30px auto 0;}
}



/*-----------------------------------------------------------------------
[0A] - Mobile Landscape
------------------------------------------------------------------------*/
 
@media only screen
and (max-width : 767px)
and (orientation : landscape)
{
	.article.customized-solutions.inline-list ul li
	{
		font-size: 1.4em;
	}
	#enterprisebanner1-heading{ float:left; border-radius:0 10px 0 0 ;}
}



/*-----------------------------------------------------------------------
[0B] - Mobile Portrait
------------------------------------------------------------------------*/
 
@media only screen
and (max-width : 767px)
and (orientation : portrait)
{
	.article.diagram .misc-link
	{
		position: absolute;
		right: 0;
		top: 27px;
	}
}



/*-----------------------------------------------------------------------
[1] - Tablets
------------------------------------------------------------------------*/
@media only screen
and (min-width : 768px)
and (max-width : 979px)
{
	/* Clear floats */
	.sidebar,
	.main-content,
	.sidebar-bg-container,
	.main-content-bg-container
	{
		float: none!important;
	}
	
	/* Reset sizes */
	.sidebar,
	.main-content
	{
		width: 100%!important;
	}
	
	.header .contact-us .number,
	.header .contact-us .number a
	{
		font-size: 1.4em;
	}
	
	.two-columns .title
	{
		padding-left: 0%;
	}
	
	.sidebar	
	{
		background: #f9f9f9 url(../images/box-aside-top-white-border.png) 0 0 repeat-x;
		float: none!important;
	}

	.sidebar-bg-container,
	.main-content-bg-container
	{
		background: none;
		border: none;
	}
	
	.sidebar-bg-container
	{
		right: 100%;
	}
	
	.two-columns .sidebar,
	.two-columns .main-content
	{
		left: 100%;
	}
	
	.article.free-resources .pdf-image,
	.article.free-resources .pdf-links
	{
		float: left;
	}
	
	.article.free-resources .pdf-image
	{
		margin-left: 40px;
		margin-right: 20px;
	}
	
	.article.free-resources .pdf-links
	{
		margin-top: 20px;
	}
	
	.article.form .full-half
	{
		display: block;
		float: left;
		width: 50%;
	}
	
	.article.form .full-half.right-margin input
	{
		width: 97%;
	}
	
	.article.form .full
	{
		clear: both;
	}
	
	.sidebar .support-info .support-items
	{
		display: block;
		float: left;
		width: 100%;
	}
	
		.sidebar .support-info .support-items li
		{
			display: block;
			float: left;
			width: 33%;
		}
	
			.sidebar .j2-brands ul li
			{
				display: block;
				float: left;
				margin-bottom: 5px;
				width: 33.333%;
			}
			
			.sidebar .j2-brands ul li .icon,
			.sidebar .j2-brands ul li .text
			{
				width: auto!important;
			}
	
	.home .customized-solutions
	{
		font-size: 1.8em;
		float: left;
		overflow: hidden;
		position: relative;
		width: 100%;
	}
	
		.home .customized-solutions ul
		{
			clear: left;
			float: left;
			left: 50%;
			position: relative;
			text-align: center;
		}
		
			.home .customized-solutions ul li
			{
				display: block;
				float: left;
				margin-right: 10px;
				position: relative;
				right: 50%;
				width: auto;
			}
	
	.page-image .text
	{
		margin-left: 30px;
		padding-top: 30px;
	}
	
	.page-image .chairs-us
	{
		background: url(../images/pano-chairs-us-tablet.png) center bottom no-repeat;
		height: 380px;
	}
	
	.page-image .chairs-uk
	{
		background: url(../images/pano-chairs-uk-tablet.png) center bottom no-repeat;
		height: 380px;
	}
	
	.page-image .pyramid
	{
		background: url(../images/pano-pyramid-tablet.png) center bottom no-repeat;
		height: 520px;
	}
	
	.page-image .partners
	{
		background: url(../images/pano-partners-tablet.png) center bottom no-repeat;
		height: 580px;
	}
	
	.page-image .mobile
	{
		background: url(../images/pano-mobile-tablet.png) center bottom no-repeat;
		height: 580px;
	}
	
	.page-image .online-backup
	{
		background: url(../images/pano-server-room-tablet.png) center bottom no-repeat;
		height: 480px;
	}
	.page-image .pano-cloud2cloud
	{
		background: url(/images/pano-cloud2cloud-tablet.png) center bottom no-repeat;
		height: 480px;
	}
	.page-image .life-buoy
	{
		background: url(../images/pano-life-buoy-tablet.png) center bottom no-repeat;
		height: 380px;
	}
	
	.box.become-a-partner
	{
		background: #333 url(../images/bg-become-a-partner-desktop.png) 10% center no-repeat;
		background-image: url(../images/bg-become-a-partner-desktop.svg), none;
	}
	
	.main-content .tech-pricing
	{
		background: #2647a2 url(../images/page-pricing.png) center top no-repeat;
		display: block;
		height: 220px;
	}
	.article.cancellation { width: 100%; }
}



/*-----------------------------------------------------------------------
[1A] - Tablet Landscape
------------------------------------------------------------------------*/
 
@media only screen
and (min-width : 768px)
and (max-width : 979px)
and (orientation : landscape)
{
}



/*-----------------------------------------------------------------------
[1B] - Tablet Portrait
------------------------------------------------------------------------*/
 
@media only screen
and (min-width : 768px)
and (max-width : 979px)
and (orientation : portrait)
{
	.article ul li
	{
		width: 50%;
	}
	
	.article h2
	{
		font-size: 2.4em;
	}
	
	.article li .icon
	{
		width: 25%!important;
	}
	
	.article li .text
	{
		width: 75%!important;
	}
	
	#enterprisebanner1{ background-image:url(../images/pano-enterprise-desktop.png); height:248px; margin-bottom:100px}
	.enterprisebanner h2, .enterprisebanner p {float:none; width:auto;}
	#enterprisebanner1-heading{ width:290px; margin-top:40px;}
	#enterprisebanner1-text{ background:#FEA734; padding:10px 25px; margin:80px -30px;}

}



/*-----------------------------------------------------------------------
[2] - Standard Monitors
------------------------------------------------------------------------*/
@media only screen
and (min-width : 980px)
and (max-width : 1499px)
{
	.header
	{
		padding: 0;
	}
		
	.content .container
	{
		border-left: 1px solid #eee;
		border-right: 1px solid #eee;
		overflow: hidden;
	}
	
	.container
	{
		margin: 0 auto;
		width: 960px;
	}
	.floatbanner img.fr{width:30%; margin:30px 0 0 70px;}
	.floatbanner img.fl{width:30%; margin:30px 70px 0 0;}
	.floatbanner{padding:10px 20px 40px;}
	#footerQuote{padding-top:50px;}
	#enterprisebanner1{ background-image:url(../images/pano-enterprise-desktop.png); height:248px; margin-bottom:100px}
	.enterprisebanner h2, .enterprisebanner p {float:none; width:auto;}
	#enterprisebanner1-heading{ width:290px; margin-top:40px;}
	#enterprisebanner1-text{ background:#FEA734; padding:10px 40px; margin:80px -30px;}
}



/*-----------------------------------------------------------------------
[3] - Large Monitors
------------------------------------------------------------------------*/
@media only screen
and (min-width: 1500px)
{
	.container
	{
		margin: 0 auto;
		width: 90%;
	}
	
	.content .container
	{
		border-left: 1px solid #eee;
		border-right: 1px solid #eee;
		overflow: hidden;
	}
	
	/*.sidebar,
	.main-content
	{
		font-size: 1.4em;
	}*/
	
	.home .customized-solutions
	{
		font-size: 2.4em;
	}
	
	.main-content .kis-dudes,
	.main-content .kis-dude-pointing,
	.main-content .kis-dude-holiding-clouds
	{
		height: 380px;
	}
	
	.main-content .kis-dude-holiding-clouds
	{
		background: url(../images/kis-dude-holiding-clouds.png) center top no-repeat;
	}
	
	.main-content .server-room-2
	{
		background-position: center top;
	}
	
	.main-content .partnership
	{
		background: #333 url(../images/page-partnership-lg.png) center center no-repeat;
		background-image: url(../images/page-partnership-lg.svg), none;
		display: block;
		height: 380px;
	}
	
	.main-content .clouds
	{
		background: #003f86 url(../images/page-clouds-lg.png) center center no-repeat;
		display: block;
		height: 380px;
	}
	
	.page-image .chairs-us
	{
		background: url(../images/pano-chairs-us-lg.png) 10% top no-repeat;
		height: 380px;
	}
	
	.page-image .chairs-uk
	{
		background: url(../images/pano-chairs-uk-lg.png) 10% top no-repeat;
		height: 380px;
	}
	
	.page-image .pyramid
	{
		background: url(../images/pano-pyramid-lg.png) left top no-repeat;
		height: 380px;
	}
	
	.page-image .partners
	{
		background: url(../images/pano-partners-lg.png) left top no-repeat;
		height: 380px;
	}
	
	.page-image .mobile
	{
		background: url(../images/pano-mobile-lg.png) left top no-repeat;
		height: 380px;
	}
	
	.page-image .online-backup
	{
		background: url(../images/pano-server-room-lg.png) left top no-repeat;
		height: 380px;
	}
	.page-image .pano-cloud2cloud
	{
		background: url(/images/pano-cloud2cloud-lg.png) left top no-repeat;
		height: 380px;
	}
	.page-image .life-buoy
	{
		background: url(../images/pano-life-buoy-lg.png) left top no-repeat;
		height: 380px;
	}
	
	.main-content .fully-m-m
	{
		background: #031018 url(../images/page-fully-m-m-lg.png) left center no-repeat;
		display: block;
		height: 380px;
	}
	
	.box.become-a-partner
	{
		background: #333 url(../images/bg-become-a-partner-lg.png) -100px center no-repeat;
		background-image: url(../images/bg-become-a-partner-lg.svg), none;
	}
	
	.main-content .vector-clouds-blue-bg-lg
	{
		height: 380px;
	}
	
	.main-content .security
	{
		background: #031018 url(../images/page-vector-lock-lg.png) center center no-repeat;
		background-image: url(../images/page-vector-lock-lg.svg), none;
		display: block;
		height: 380px;
	}
	
	.main-content .tech-pricing
	{
		background: #f28d1e url(../images/page-pricing.png) center top no-repeat;
		display: block;
		height: 380px;
	}
	
	.main-content .vault
	{
		background: #828282 url(../images/page-vault-lg.png) center center no-repeat;
		display: block;
		height: 380px;
	}
	
	.main-content .support
	{
		background: #fff url(../images/page-support-large.png) left center no-repeat;
		display: block;
		height: 280px;
	}
	.article.cancellation { width: 75%; }
	
	#enterprisebanner2{padding-bottom:50px;}
	#enterprisebanner2 h2{ font-size:34px; max-width:none; }
	#enterprisebanner2 p{ font-size:16px; max-width:60%;}
	#enterprisebanner2 img{margin-top:-120px;}




/*-----------------------------------------------------------------------
[4] - Misc Responses
------------------------------------------------------------------------*/
@media only screen
and (max-width: 660px)
{
	.main-content .kis-dudes-about-us
	{
		background-position: 1% top;
	}
	
	.main-content .kis-dudes
	{
		background-position: center top;
	}
	
	.main-content .kis-dude-holiding-clouds
	{
		background-position: 40% -90px;
	}
	
	.main-content .server-room
	{
		background-position: 15% top;
	}
	
}


@media only screen
and (max-width: 615px)
{
	
	.become-a-partner .article.half
	{
		width: 100%;
	}
	
	.box.become-a-partner
	{
		background: #333 url(../images/bg-become-a-partner-mobile.png) center top no-repeat;
		background-image: url(../images/bg-become-a-partner-mobile.svg), none;
		padding-top: 200px;
	}
	
}


@media only screen
and (max-width: 500px)
{
	.sidebar .j2-brands ul li
	{
		display: block;
		float: left!important;
		margin-bottom: 5px;
		width: 100%;
	}
	
	.main-content .support
	{
		background: #fff url(../images/page-support-small.png) center center no-repeat;
		display: block;
		height: 100px;
	}
			
}


@media only screen
and (max-width: 320px)
{
	
		.home .customized-solutions ul li:first-child
		{
			float: left!important;
		}
	
}


@media only screen
and (min-width: 1500px)
{
	.container
	{
		width: 1400px;
	}
}


@media only screen
and (min-width: 768px)
{
	.policy-title h1 {
		line-height: 100%;
	}
}