@CHARSET "UTF-8";

/*** FONTS ***/

@font-face {
  font-family: Futura;
  src: url('FuturaLT.ttf');
  font-weight: normal;
}

@font-face {
  font-family: Futura-LT-w01-light;
  src: url('Futura-LT-w01-light.ttf');
  font-weight: normal;
}

@font-face {
  font-family: Soho-Thin;
  src: url('soho-thin.ttf');
  font-weight: normal;
}

@font-face {
    font-family: "ReklameScriptW00-Medium";
    src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/5af7511a-dccc-450d-b2a2-bb8e3bb62540.eot?#iefix");
    src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/5af7511a-dccc-450d-b2a2-bb8e3bb62540.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/05b176f5-c622-4c35-af98-c0c056dd5b66.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/9dcb5a3c-1c64-4c9c-a402-995bed762eb7.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/1e87d66a-d7f1-4869-8430-51662777be57.svg#1e87d66a-d7f1-4869-8430-51662777be57") format("svg");
}

@font-face{
    font-family:"Brandon-Grot-W01-Light";
    src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/e00ba30a-0bf3-4c76-9392-8641fa237a92.eot?#iefix");
    src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/e00ba30a-0bf3-4c76-9392-8641fa237a92.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/69b40392-453a-438a-a121-a49e5fbc9213.woff2") format("woff2"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/9362bca5-b362-4543-a051-2129e2def911.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/85060878-ca6c-43cc-ac31-7edccfdca71b.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/47f089a6-c8ce-46fa-b98f-03b8c0619d8a.svg#47f089a6-c8ce-46fa-b98f-03b8c0619d8a") format("svg");
}

blink, .blink {
-webkit-animation: blink 1s step-end infinite;
    -moz-animation: blink 1s step-end infinite;
    -o-animation: blink 1s step-end infinite;
    animation: blink 1s step-end infinite;
  }
  
  @-webkit-keyframes blink {
   67% { opacity: 0 }
 }

 @-moz-keyframes blink {
   67% { opacity: 0 }
 }

 @-o-keyframes blink {
   67% { opacity: 0 }
 }
 
 @keyframes blink {
   67% { opacity: 0 }
 }

/*** BODY ***/

body
{
	background-color: white;
	color: black; 
	font-family: Futura-LT-w01-light,sans-serif;
	font-weight: 100;
  font-size: 21px;
  padding:0px;
  margin:0px;
}

iframe.s4aProject { width: 80%; height: 500px; }





/*** BANNER ***/

div.linksContainer {
	margin: 45px;
	padding: 1px;
	height: 30px;
	font-size: 29px;
}

div.linksFloat {
	margin: auto;
	float: right;
}

div#logo {
	top: 6px;
	left: 11px;
	position: absolute;
	display: block;
}

div#logo img {
	width: 109px;
	height: 109px;
	object-fit: cover;
}

div#banner {
	  left: 0px;
    width: 100%;
    position: absolute;
    margin-left: 0px;
    top: 0px;
    background-color: black;
}

div.siteLinks ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

div#banner li {
  float: right;
  color: white;
  padding-left: 15px;
  padding-right: 14px;
}

div.siteLinks li.tba {
	color: #7F0000;
}

div.siteLinks li a {
  color: white;
  text-decoration: none;
}

div.siteLinks li a:hover {
	color: #00b3b3;
}

div#bannerTitle span.text {
	font-family: Soho-Thin,sans-serif;
	font-weight: 400;
  font-size: 35px;
	position: absolute;
	left: 142px;
	top: 40px;
	color: white;
}

div#bannerTitle span.subheading {
	font-family: Soho-Thin,sans-serif;
	font-weight: 400;
  font-size: 15px;
	position: absolute;
	left: 142px;
	top: 80px;
	color: white;
}

span.headerText {
	font-family: Soho-Thin,sans-serif;
	font-weight: 100;
  font-size: 30px;
}

span.headerSubtitle {
	font-family: Soho-Thin,sans-serif;
	font-weight: 100;
  font-size: 10px;
  color: lightgrey;
}


/*** MAIN BODY ***/

div.mainDiv {
    left: 0px;
    width: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
}

div.mainDiv div.bodyDiv {
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
  position: absolute;
}

div.bfcm {
	left: 0px;
	width: 100%;
	position: absolute;
	text-align: center;
}

div.bfcm span.offer {
	display: inline-block;
	color: red;
}

span.privacyInfo {
	font-size: 18px;
}

div#main div.body form input[type="text"] {
	width: 300px;
}

div#main div.body form input[type="email"] {
	width: 300px;
}

div#introText {
  text-align: left;
  text-justify: inter-word;
}

div#whyEmbeddedImgHolder {
	float:right;
	position: relative;
	 width: 534px;
	 height: 438px;
	 margin-bottom: 50px;
	 margin-left: 30px;
}

img#macImg {
	object-fit: cover;
	width: 534px;
	height: 438px;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
}

div#gettingStartedVideo {
	position:absolute;
	top:33px;
	left:40px;
}

div#whyEmbeddedImgHolder span.caption {
	font-size: 16px;
}

div.paymentOptions {
	width: 32%;
	display: inline-block;
}

div.generalCentering {
	width: 49.5%;
	display: inline-block;
}

div.paymentOptionsInner,div.generalCenteringInner {
	margin: 0px auto;
	width: 50%;
}

div.generalCentering {
/*	width: 49.5%;
	display: inline-block;*/
	width: 100%;
}

div.generalCenteringInner {
	margin: 0px auto;
	width: 50%;
}

div#social {
	clear:both;
}

div#s4aPromo {
	/*background-color: #c3e3df;*/
	background-color: #d6e3e1;
	/*dark mode: #424646*/
	
	padding: 15px;
	border: 1px solid #e3ceed;
	overflow: auto;
}

div#s4aPromo div.text {
	float: left;
}

div#feedbackQuestions {
	/*background-color: #c3e3df;*/
	background-color: #e1d6e3;
	/*dark mode: #4d494e; */
	
	padding: 15px;
	border: 1px solid black;
	overflow: auto;
}

table.downloadOptionsDesktop, table.downloadOptionsDesktop th, table.downloadOptionsDesktop td {
  border: 1px solid black;
}

table.downloadOptionsDesktop th, table.downloadOptionsDesktop td {
  padding: 20px;
  text-align: center;
  vertical-align: middle;
}

table.compare {
  text-align:center;
  border: 1px solid black;
}

table.compare th,td {
  padding: 20px 8px;
  border: 1px solid black;
}

table.compare td span.terms {
  color: lightgrey;
  font-size: 15px;
}

table.compare td.rowTitle {
  font-weight:bold;
  width: 150px;
}

button.s4aButton {
	color: white;
	background-color: #1691df;
	border: none;
	border-radius: 7px;
	font-size: 16px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	cursor: pointer;
	padding: 8px;
  padding-left: 20px;
  padding-right: 20px;
	margin: 5px;
}

button.s4aSecondaryButton {
	color: white;
	background-color: darkgrey;
	border: none;
	border-radius: 7px;
	font-size: 16px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	cursor: pointer;
	padding: 8px;
  padding-left: 20px;
  padding-right: 20px;
	margin: 5px;
}

button.s4aBuyButton {
	/* dummy for other size classes */
}

span.greyedOutButton {
	color: darkgrey;
	font-size: 16px;
	padding: 8px;
  padding-left: 20px;
  padding-right: 20px;
	margin: 5px;
}

div.freeFootnotes,span.freeFootnotes {
	font-size: 12px;
}

iframe#marketing_opt_in {
	border: none;
	width: 100%;
	height: 150px;
}

span.os_warning {
	color: red;
}

p.review {
  display: block;
  font-family: monospace;
  font-size: 16px;
  /*white-space: pre;*/	
  margin: 1em 0px;
}

/*** DARK MODE ***/
@media (prefers-color-scheme: dark) {
  body {
      background-color: #000;
      color: white;
  }

  a:link {
  	color: #6262ee;
  }

  a:visited {
  	color: #ab6fe8;
  }

  a:hover {
  	color: #ca4639;
  }

	div#s4aPromo {
		background-color: #424646;
	}

	div#feedbackQuestions {
		background-color: #4d494e;
	}

	table.compare {
	  border-color: white;
	}

	table.compare th,td {
	  border-color: white;
	}

	table.compare td span.terms {
	  color: darkgrey;
	}
}

/*** PORTALS ***/
div#showSubscriptionInfo {
	font-family: sans-serif;
	font-weight: 100;
	font-size: 17px;
	padding: 10px;
	margin: 10px;
}

/*** DESKTOP VARIANTS ***/

@media only screen and (min-width: 420px) {
	/* adjustment to buy buttons for desktops*/
	div.paymentButtons {
		position: relative;
	}

	/* adjustment to buy buttons for desktops*/
	div.paymentOptions {
		height: 100%;
	}

	div.paymentOptionsInnerFloat {
		top: 50%;
		transform: translateY(-50%);
		position: absolute;
	}

	a[target="_blank"]:not(.imageLink):after {
      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEzIiBmaWxsPSIjMWE3M2U4Ij48cGF0aCBkPSJNMTkgMTlINVY1aDdWM0g1YTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGMxLjEgMCAyLS45IDItMnYtN2gtMnY3ek0xNCAzdjJoMy41OWwtOS44MyA5LjgzIDEuNDEgMS40MUwxOSA2LjQxVjEwaDJWM2gtN3oiLz48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDBWMHoiLz48L3N2Zz4=);
      background-repeat: no-repeat;
      content: '';
      display: inline-block;
      height: .8125rem;
      margin: 0 .1875rem 0 .25rem;
      position: relative;
      top: .125rem;
      width: .8125rem
  }

	/* adjustment to buy buttons for desktops */
	button.s4aBuyButton {
		font-size: 18px;
		padding: 27px;
		line-height: 1.5;
		font-weight: bold;
		margin: 10px;
		padding-left: 35px;
		padding-right: 35px;
	}
}

@media only screen and (min-width: 1100px) and (max-width: 1400px) {
	/* This is just to cope with overlap in the header. */
	div#bannerTitle {
		display: none;
	}
}

@media only screen and (min-width: 1100px) {
	/*This is larger screens, e.g. desktop.*/

	button.downloadOptionsMobile {
		display: none;
	}

	div.downloadOptionsMobile {
		display: none;
	}

	div#bannerTitle span.text, div#bannerTitle span.subheading {
		width: 304px;
	}

  div.linksContainerMobile {
  	display: none;
  }

  div#logo {
		margin-left: calc((100% - 980px) * 0.5);
  }

  div#banner {
    /*min-width: 980px;*/
  }

  div#bannerTitle span.text, div#bannerTitle span.subheading {
		margin-left: calc((100% - 980px) * 0.5);
  }

  div#banner {
    height: 122px;
  }

	div.mainDiv {
    min-width: 980px;
	}

	div.mainDiv div.bodyDiv {
		margin-left: calc((100% - 980px) / 2);
		width: 980px;
	}

	div.mainDiv {
    top: 172px;
	}

	div.bfcm {
		top: 132px;
		height: 35px;
	}

	div.siteLinks li.selected {
		font-size: 31px;
		font-weight: bold;
	}
}

/*** MOBILE/TABLET VARIANTS ***/
@media only screen and (max-width: 1100px) {
	/*This is the compressed size class, e.g. mobile phones.*/
	button.downloadOptionsDesktop {
		display: none;
	}

	table.downloadOptionsDesktop {
		display: none;
	}

	span.privacyInfo {
		font-size: 12px;
	}

	span.os_warning {
		font-size: 18px;
	}

	span.headerText {
		font-size: 24px;
	}

  div.linksContainer {
  	display: none;
  }
 
  div#banner {
    height: 195px;
    /*display: none;*/
  }

	div#whyEmbeddedImgHolder {
		display: none;
	}

	div.siteLinks li a {
	  color: darkgrey;
	}

	div.siteLinks li.selected a {
		color: white;
	}
	
	div.siteLinks ul {
		padding-left: 10px;
	}

	div.siteLinks li {
		display: inline-block;
		padding: 8px;
		font-size: 25px;
		border-right: 0.5px solid lightgrey;	
	}

	div.linksContainerMobile {
    left: 0px;
    width: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    top: 132px;
	}

	div.bodyDiv>div {
		padding: 20px;
	}

	div.bodyDiv>p {
		padding: 20px;
		margin-block-start: 0px;
		margin-block-end: 0px;
	}

	div.bodyDiv>h4 {
		padding: 20px;
		margin-block-start: 0px;
		margin-block-end: 0px;
	}

	div.bodyDiv>form {
		padding: 20px;
	}

	div.mainDiv {
    top: 240px;
	}

	div.bfcm {
		top: 200px;
		height: 35px;
	}
}
/*@media only screen and (max-width: 1100px) {*/
@media only screen and (max-width: 920px) {
	div.generalCenteringInner {
    width: 60%;
	}
}

@media only screen and (max-width: 770px) {
	div.generalCenteringInner {
    width: 70%;
	}
}

/* phone screens and small tablets */
@media only screen and (max-width: 420px) {
	div.paymentOptionsInner {
		width: 90%;
		overflow: hidden;
	}
}

/* small phones */
@media only screen and (max-width: 376px) {
	div.paymentOptionsInner {
		width: 99%;
		overflow: hidden;
	}
}

@media only screen and (max-width: 375px) {
}

@media only screen and (max-width: 320px) {
	/*super small screens*/
	div#bannerTitle span.text, div#bannerTitle span.subheading {
		font-size: 25px;
	}

	div.siteLinks li {
		font-size: 20px;
		border-right: 0.5px solid darkgrey;
	}

	div.bodyDiv>p {
		padding: 8px;
	}

	body {
		font-size: 16px;
	}

	span.os_warning {
		font-size: 9px;
	}

	span.headerText {
		font-size: 20px;
	}

	span.privacyInfo {
		font-size: 9px;
	}
}