/* HARD LINK WWW. MESSENGER. */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('//www.softros.com/css/fonts/source-sans-pro-v11-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
       url('//www.softros.com/css/fonts/source-sans-pro-v11-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//www.softros.com/css/fonts/source-sans-pro-v11-latin-ext_latin-300.woff') format('woff') /* Modern Browsers */
}

/* source-sans-pro-regular - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('//www.softros.com/css/fonts/source-sans-pro-v11-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('//www.softros.com/css/fonts/source-sans-pro-v11-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//www.softros.com/css/fonts/source-sans-pro-v11-latin-ext_latin-regular.woff') format('woff') /* Modern Browsers */
}

/* source-sans-pro-600 - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('//www.softros.com/css/fonts/source-sans-pro-v11-latin-ext_latin-600.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
       url('//www.softros.com/css/fonts/source-sans-pro-v11-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//www.softros.com/css/fonts/source-sans-pro-v11-latin-ext_latin-600.woff') format('woff') /* Modern Browsers */
}

@font-face {
    font-family: SoftrosWeb;
	font-display: swap;
	src: url(https://www.softros.com/css/fonts/SoftrosWeb.eot);
    src: url(https://www.softros.com/css/fonts/SoftrosWeb.eot#iefix) format('embedded-opentype'),
		 url(https://www.softros.com/css/fonts/SoftrosWeb.woff);
}

/* Common */
	html, body {height:100%; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent;}

	body {font-family: Segoe UI, Source Sans Pro, Roboto, San Francisco, sans-serif;
		  font-size: 16px;}

	a img {border: 0}

	.content {max-width: 1350px;
			 margin-left: auto;
			 margin-right: auto;
			 padding-right: 50px;
			 padding-left: 50px;
			 clear: both;
	}
	body.narrow .content {max-width: 1280px;}
	
	h1 {font-weight: 300;
		color: #585858;
		font-size: 48px;
		transition: all 200ms ease-out;}
	
	h5, h6 {font-size: 18px;}
	h6 {font-weight: normal}
	
	h5{ margin: 0 0 16px 0; font-weight: 600;}
	h6{ margin: 0}
	h6 + p {margin-top: 0}
	
	a {color: #f22808; text-decoration: none;}
	
	/* arrow links */
	#products a:hover,
	.arrow-link:hover {text-decoration: underline}

	#products nav a:after,
	.arrow-link:after { content: "〉";
						font-family: SoftrosWeb;
						display: inline-block;
						vertical-align:middle;
						line-height: 20px;
						font-size: 20px;
						padding-left: 4px;
						color: #f22808;
	}

	/* spinning arrow */
	.tooltiplink:after,
	.instructions a:after,
	div.old a.help:after,
	#renew a.help:after,
	#perUser a:after,
	#nts-custom a:after{
		content: "🞃";
		color: gray;
		font-size: 14px;
		font-family: SoftrosWeb;
		margin-left: 5px;
		display:inline-block;
		transition: all 200ms ease-out;
	}

	a.tooltiplink.dropped:after,
	.instructions .dropped a:after,
	div.old a.dropped:after,
	#renew a.dropped:after,
	#perUser a.dropped:after,
	#nts-custom a.dropped:after{
		transform: rotate(-180deg) translate(0, -4px);
	}
 
	ul { list-style: none;
		 margin: 0 0 10px 0
	}

	ul:not(.features-list) li::before {content: "■";
									   color: #f99085;
									   margin: 0 5px 0 -19px;
									   position: absolute; /*chrome justify fix*/
	}

	.Win {font-family: SoftrosWeb}
	
	ul.features-list>li {margin: 0 0 25px 0;
						 display: inline-block}
	
	ul.features-list li h5 {font-size: 18px; margin: 0; text-align: left; hyphens: none;}	
	
	/* mobile view */

	@media all and (max-width: 880px)
	{
		h1 {font-size: 32px;}
		ul:not(.features-list),ol {padding-left: 20px}
	}
	
/* Page types */

	.left-box {background-color: #efefef;
				 width: 270px;
				 padding: 16px 32px 16px 32px; /* p has 16px margin */
				 float: left;
				 margin-right: 45px;
	}
	.with-left-box {float:left;
				   width: calc(100% - 270px - 2*32px - 45px);
				   min-width: 380px;
	}
	
	
	body.narrow .longread {max-width: 1080px}
	.longread table {margin:-10px 0 16px 0}
	
/* Primary menu */

	#header {padding-top: 26px;
			 padding-bottom: 26px}

	#logo{margin-left: -7px}
	#menu {padding-top: 7px;
		   float: right;}

	#menu a, #menu span.a {	text-decoration: none;
							color: #364a44;
							font-size: 18px;
							display: inline-block;
							padding: 10px 20px 10px 20px;
							white-space: nowrap;}
	
	#menu span.a {cursor: default;
				  user-select:none;
				  -moz-user-select:none;
	}
	#menu a:hover {	color: #f22808;
					text-shadow: 0 0 2px white}

	.menu_item {display: inline-block;}
	.menu_item:hover {background: #efefef}

	.menu_item div {visibility: hidden;
					position: absolute;
					background: #efefef;
					box-shadow: 0 7px 7px -7px;
					transition: all 0.1s ease;
					opacity: 0;
					top:70px;
					z-index: 10;
	}

	.menu_item:hover div {	visibility: visible;
							opacity: 1;
							top:77px}

	.menu_item:last-child div {margin-left: -18px} /* Company submenu */

/* secondary menu */

	#menu2{
		background-image: url("https://www.softros.com/img/menu2.jpg");
		background-color: #364a44;
		background-size: 1264px 61px;
		background-position: top center;
		background-repeat: no-repeat;
		height: 61px;
		margin-bottom: 30px
	}

	#menu2 h2, #menu2 a {font-weight: normal;
						 color: white;
						 display:inline;
						 line-height: 61px;
	}

	#menu2 h2 {font-size: 24px;		
			   margin: 0 30px 0 0;
			   cursor: default}
	#menu2 a {text-decoration: none;
			  font-size: 18px;
			  margin: 0 30px 0 30px;}

	#menu2 a:hover{text-decoration: underline}

	#menu2, #menu2 a, #menu h2 {transition: all 0.2s ease-out}
	
/* language bar */

	#menu2 nav > div {float: right;
					  font-size: 38px;
					  line-height: 61px;
					  color: lightgray;
					  cursor: pointer;
					  user-select:none;
					  font-family: SoftrosWeb;
					  -moz-user-select:none;
	}
	#menu2 nav > div >div {font-family: Segoe UI, Open Sans, sans-serif;} /* return normal font */
	#menu2 nav > div:hover,#menu2 nav > div.clicked {color: white}
	#menu2 div div {display:none;
					position: absolute;
					z-index: 9;
					background-color: white;
					width:100%;
					max-width: 500px; /* content itself is narrow */
					left:0;
					/*margin-top: 4px;*/
					padding: 20px;
					padding-left: calc(50% - 500px / 2);
					padding-right: calc(50% - 500px / 2);
					column-count: 3;
					column-gap: 50px;
					box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
					cursor:auto;
	}
	#menu2 div div a {display: inline-block;
					  font-size: 18px;
					  color: gray;
					  margin: 20px;
					  line-height:initial;
					  text-align: center;
					  transition: none;
	}
	#menu2 div div a:hover{text-decoration: none;
						   color: black;
	}

/* quick info */
	.quick{
		margin-top: 60px;
		background-color: #efefef;
		font-size: 14px;
		padding: 18px;
		text-align: center;
		
	}
	.quick h4{font-weight: normal;
			  font-size: 16px;
			  margin: 0 0 16px 0
	}
	.quick h6{font-weight: bold;
			  font-size: 14px;
			  margin-top: 14px;
	}
	.quick h6.inline{display: inline}
	.quick img {vertical-align: baseline;
			   margin: 0 2px -2px 0}

	.quick br+img{margin-top: 13px}

/* footer */

	/* used to place footer at the bottom */
	#wrapper {min-height: 100%;
			  position: relative}

	/* footer cannot clear floating, so we do it via second from the end div */
	#wrapper>div:nth-last-child(2)::after {content: " ";
											clear: both;
											display: block;
											height: 208px}

	#footer {background-image: url("https://www.softros.com/img/footer.jpg");
			 background-color: #364a44;
			 background-size: 1264px 411px;
			 background-position: top center;
			 background-repeat: no-repeat;
			 color: #d6d6d6;
			 font-size: 13px;
			 line-height: 35px;
			 min-height: 168px;
			 position: absolute;
			 width: 100%;
			 bottom: 0;
	}

	#footer div.content {position: relative; min-height: 168px}
	#footer span {position: absolute; display: block; bottom: 30px; right: 50px}
	#footer nav {position: absolute; padding: 30px 0 30px 0; bottom:0px}
	#footer a {color: #d6d6d6; text-decoration: none; display:block}
	#footer a:hover {text-decoration: underline}

/* forms */

	.message {color: #f22808}
	button, input, select, textarea {
		font-family: Segoe UI, Open Sans, sans-serif;
		font-size: 16px;
		border: 1px solid lightgray;
		padding: 2px;
		box-sizing: content-box;
		transition: all 200ms ease-out;
		transition-property: background, border-color;
		outline: none;
	}
	select:-moz-focusring {
		color: transparent;
		text-shadow: 0 0 0 #000;
	}
	
	button:focus,
	input:focus,
	select:focus,
	textarea:focus{
		border-color: #f22808;
	}

	button,
	[type=submit] {
		padding: 6px 11px;
		background-color: #efefef;
	}
	
	button:not([disabled]),
	[type=submit]:not([disabled]) {
		padding: 5px 10px;
		border: 2px solid #02d5a8;
		cursor: pointer;
	}
	
	button:hover:not([disabled]),
	[type=submit]:hover:not([disabled])
	{
		background-color: lightgray;
	}

	#fileField {background: white; max-width: 95%}
	#fileField::-ms-value{
		background: white;
		border: none
	}

	/* for some reason Chrome want this to be separate form IE */
	#fileField::-ms-browse
	{
		border: 1px solid lightgray;
		padding: 5px 10px;
	}

	#fileField::-webkit-file-upload-button
	{
		border: 1px solid lightgray;
		padding: 8px 13px;
		background-color: #efefef;
		font-family: Segoe UI, Open Sans, sans-serif;
		font-size: 16px;
		outline: none;
	}
	#fileField::-webkit-file-upload-button:active
	{
		border-color: #f22808;
	}
	
/* uploaded license file info */
	table#licinfo{margin: 0 auto 15px auto}
	#licinfo td:first-child {text-align: right}
	#licinfo td {padding: 3px;
				border-top: 1px lightgray solid}
	#licinfo tr:first-child td {border-top: none}	


/* mobile view */
	
	#sandwitch {display: none}
	@media all and (max-width: 880px)
	{
		#menu2 {background-image: none;
				height:inherit}
		#menu2 h2, #menu2 a {display: block;
							line-height: 40px;
							transition: none}
		
		/* globe  */
		#menu2 nav > div{position: absolute;
						 font-size: 24px;
						 color: black;
						 top:24px;
						 right:60px;
		}

				/*	we need to switch 100% width between .clicked/not clicked states because
					absolute positioned layer covers sandwitch button. In addition we cannot
					change width of the sub-div because it is positioned inside parent */
		#menu2 nav > div.clicked { left:0;
								   width:calc(100% - 60px);
								   text-align:right;
								   padding-right:60px;
		}

		#menu2 nav > div:hover , #menu2 nav > div.clicked {color:black}
		#menu2 div div {padding:0;
						max-width:100%;
						column-count: 1;
						top:60px;
		}
		#menu2 div div a {display:block;}
		
		/* main menu */
		
		#logo {margin-left: 0}
		#menu {padding: 0}
		.menu_item:last-child div {margin-left: 0}  /* Company submenu */
		#menu {	display: none;
				position: absolute;
				top: 107px;
				height: calc(100% - 107px);
				width: 100%;
				background-color: #efefef;
				overflow:auto;
		}
		#menu span:active {color:#f22808;}
		#menu span {display: block;
					text-align: left;
					line-height: 50px;
		}
		#menu span.a {cursor: pointer;}
		
		#menu .menu_item div { position: inherit;
							   padding-left: 30px;
							   box-shadow: none;
							   visibility: visible;
							   opacity: 1;
							   transition: none;
							   display: none;

		}
		.menu_item:hover div {display:none}

		#sandwitch{display: block;
				   font-size: 38px;
				   float:right;
				   cursor:pointer;
				   font-family: SoftrosWeb;
				   margin: 5px 20px 0 0;
		}

		/* other */
		#footer nav {left: 20px}
		#footer span {right: 20px; bottom: 0; font-size: 11px}

		.content {padding-left: 20px; padding-right: 20px}
		#header {padding-left: 0; padding-right: 0}
		
		.left-box, .with-left-box {float: none;
									width:inherit;}
		.left-box {margin: 0 0 20px 0;}
		.with-left-box {min-width:inherit}
		
		.quick {max-width: 400px; margin-left: auto; margin-right: auto}
	}
	
	
/* SCREEN SHOTS */

	#screenshots{display:none;
				 position: fixed;
				 background-color: white;
				 height: 100%;
				 width: 100%;
				 top:0; left:0;
				 z-index: 15;
				 text-align: center;
				 line-height: 100%;
	}
	#screenshots img {	position:absolute;
						margin:auto;
						top:0;
						left:0;
						right:0;
						bottom:0;
						max-width: calc( 100% - 20px );
						
	}
	#screenshots a.arr {font-size:250px;
					  position: absolute;
					  color:white;
					  text-shadow: 0 0 20px gray;
					  transition: all 350ms ease-out;
					  font-family:SoftrosWeb;
					  z-index:2;
	}

	.shots-link img {transform: translateZ(0)} /* NTS */
	
	#screenshots a.arr:hover{text-shadow: 0 0 20px black }
	#previous {left: 50px}

	#next { right: 50px}

	#x {position: absolute;
		top:20%;
		right: 50px;
		text-shadow:none;
		color:black;
		font-size: 70px;
		line-height: 70px;
		cursor:pointer;
		text-shadow: 0 0 3px white;
		color:gray;
	}
	#x:hover{color:black}

	#x, #screenshots img {user-select: none;
						 -moz-user-select:none;}
	
/* SCREEN SHOTS mobile view */

	@media all and (max-width: 880px)
	{
		#screenshots a.arr {font-size: 100px; bottom: 10px; height: 100px; text-shadow: 0 0 20px black}
		
		#previous {left: 10px}
		#next {right: 10px}
		#x{right: 10px; top:30px}
	}
	
/* download button for messenger and ts */

	#download {margin-top: 40px;
			   margin-bottom: 40px;
			   text-align: center;
			   font-size: 18px
	}
	#download a {border: 1px #f22808 solid;
				 border-radius: 25px;
				 padding: 7px 15px 7px 15px;
				 margin: 0 2px 2px 15px;
				 display: inline-block;
				 box-shadow: 2px 2px lightgray;
				 transition: all 0.1s ease;
				 vertical-align:middle;
				 text-shadow: 0 1px lightgray;
	}
	#download a:hover{
				box-shadow: 0px 0px lightgray;
				margin: 2px 0 0 17px;	
	}
	#download a:active{
		background-color: lightgray;
	}