/****** Site layout ******/

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

*{ 
	font-family:Arial, Helvetica, sans-serif;	
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

body, html {  
  display: grid;
}

header {
  background-color: white; 
  padding: 0;
  height: auto;
}

header:after {
  content: "";
  display: table;
  clear: both;
}

.home-videos{
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
  	align-items: center;
  	text-align: center;
  	width:100%;
  	float:left
}
  
#header-image{
	position: relative;
    top: 0;
    left: 0;         
    border:0;	
}

a:link#header-image, a:visited#header-image {  
  background-color: transparent;
  width: 100%;
  padding:0;
  margin:0;
  border: 0px; 
}

section {
 display: block; 
 background-color: #d1e4e9; 
 background-blend-mode: normal, lighten, soft-light;
 text-align: center;
}

section:after {
  content: "";
  display: table;
  clear: both;  
}

article {
  padding: 20px;  
  background-color:#d1e4e9;  
}

/* MAP PAGE*/
iframe {
    border: 0;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* HOME PAGE SPLIT */

.split {
    display: flex;
    gap: 20px;          /* space between the columns */
    margin-top: 20px;
}

.split .left{
    width:20%;
    float: right;
}

.split .right {
    width:80%;
    float:left;
}

ul {
  padding-left: 50px;
  margin-left: 0;
  text-align: left;
  list-style-position: outside;
}

/*  Opening times  */

.openingtimes {
  align-content: center;
  display: block;
  
}

/* navbar */

.navbar {
  overflow: hidden;
  background-color: grey;  
  background-image: linear-gradient(to right, #164e57 0%, #000030 100%);

}

.navbar a {
  float: left;
  font-size: 15px;  	
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 15px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #49b1ac;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* end navbar */


p{
	font-size: min(max(16px, 1.5vw), 15px);
	color: #1c0264;	
	font-weight: bold;	
}

h2{
	font-size: min(max(20px, 2.1vw), 24px);
}

h1{
	font-size: min(max(22px, 2.2vw), 28px);
}

.home h1 {
	text-align: left;
}


.home-features{	
	font-size: min(max(16px, 1.5vw), 20px);
	color: #000030;	
	font-weight: bold;
	padding-top:10px;	
	display: inline-block;
	text-align: left;
	line-height: 1.5;
}


.account-keys {
  text-align: left;
  margin: auto;
  float: left;
  border-radius: 10px;  
  padding: 10px;  
  border: 3px solid green;
  background: #49b1ac;
  margin: 0 20px 20px 20px;  
  width:80%;
}

div.account-keys p{
	padding: 5;	
	margin:0;	
	border:0;
}

div.account-keys p.small-key {
	padding: 5;	
	margin:0;		
	font-size: 1.6vw;		
}

.group {
  text-align: center;
  margin: auto;
  display:inline-block;
  border-radius: 10px;    
  padding-left: 30px; 
  padding-right: 30px;  
  padding-top: 20px; 
  padding-bottom: 15px;    
}

.group:after {
  content: "";
  display: table;
  clear: both;  
}

#login.group{
  border: 3px solid green;
  background: #49b1ac;  
  width:100% 
}

#register.group{
  border: 3px solid #145789;
  background: #71A5CB;  
  width:100% 
}

footer {
  background-color: #777;
  background-image: linear-gradient(to right, #164e57 0%, #000030 100%);
  padding: 10px;
  text-align: center;
  color: white;  
  grid-row-start: 3;
  grid-row-end: 4;
}



/****** controls ******/

.button { 
  border: none;
  color: white;
  padding:10px 0px 10px 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 3px;
 
}

#btnPayment.button, #btnPruchaseKey.button, #btnEmailMe.button, #btnlogin.button {
  background-color: #858585; /* grey */ 
  width:150px;  
  height:40px;
  margin-top:10px;
}

#btndownload.button, #btnchangepassword.button, #btnupdate.button, #btnregister.button, #btnCopyKey.button {
  background-color: #858585;   
  width:150px; 
  height:40px;
  margin-top:10px;
  margin-bottom:10px;
  padding: 5px;
}

#btnPruchaseKey.button:hover, #btnEmailMe.button:hover, #btnchangepassword.button:hover, #btnupdate.button:hover, #btnregister.button:hover, #btnlogin.button:hover, #btnCopyKey.button:hover {
  background-color: #408080;
  color: black;  
}

.footer-icons a:link, a:visited {  
  background-color:transparent; 
  width: 50px;
  padding: 0px;
  margin:5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border: 0px;
 
}

.footer-icons a:hover, a:active {
	border: 1px;
}

a:link.video-images, a:visited.video-images {     
  padding: 6px;
  text-align: left;
  text-decoration: none;
  margin:5px;
  display: inline-block;
  border: 0px; 
  color: #164e57;
}

a:hover.video-images, a:active.video-images {
  background-color:#00c4c4; 	   
}


/****** Warning text ******/

.site-error-text {
  background-color: #FCD8E2;
  text-align: center;
  padding:8px;
  clear:both;
}

.error-text {
  background-color: #FCD8E2;
  border-radius: 3px;  
  text-align: center;
  padding:8px;
}

.info-text {
  background-color: #E7FCD8;
  border-radius: 3px;
  text-align: center;
  padding:8px;
}



#securityCheckHelp {  
  width: 350px;
  text-align: center;
  padding:0;
  font-size: min(max(14px, 1.1vw), 15px);	
}

/****** registration/login and account page ******/



#changepassword.group, #account.group{
  border: 3px solid #145789;
  background: #71A5CB;
  vertical-align: top;
  margin-bottom: 15px;   
}

.group label {
	width:85px;	
	display:inline-block;
	vertical-align: top;	
	font-size: min(max(16px, 1.3vw), 18px);	
}

.group input {
	width:300px;	
	display:inline-block;
	margin-left:10px;
}

.group textarea{
	margin-left:10px;
}

.home-download {
  text-align: center;
  margin: auto;
  display:inline-block;
  border-radius: 10px;  
  padding: 10px;   
}

.home-download-div {
  text-align: center;
}


.home-download:after {
  content: "";
  display: table;
  clear: both;  
}

.home-download a {     
  width:240px;
  height:180px;
  background-color: #AEB6BF;
}



#id_product_email, #id_product, #id_version, #id_registered, #id_lastlogon{
	width:300px;	
	display:inline-block;
	text-align: left;	
	font-size: min(max(16px, 1.3vw), 18px);
	padding-left:10px;
	
}

#register-or {
	 text-align: left;	
}

.middle {
	text-align: left;
}

.middle-registration {
	text-align: left;	
}

#table-tc{
  font-size: min(max(16px, 1.5vw), 20px);
  border-collapse: collapse;  
  width:60%;  
}
  
#table-tc td{ 
  padding: 3px;
}

#table-tc tr td:nth-child(1){  
  text-align:right; 
   white-space:nowrap;    
}
   
#table-tc tr td input{
	width: 30px;
}
 
#update-improvements{
	clear:both;
	display:inline-block;
	
}

#products {  
  border-collapse: collapse;
  font-size: min(max(16px, 1vw), 18px);	
  float:left;  
  overflow-x:auto;
  clear:both;
}

#products td, #products th {
  border: 1px solid #ddd;
  padding: 8px;
}

#products tr:nth-child(even){background-color: #f2f2f2;}

#products tr:hover {background-color: #ddd;}

#products th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #49b1ac;
  color: white;
}




a:link#text-link-showreel-home, a:visited#text-link-showreel-home { 
  background-color: transparent ; 
  padding: 5px 5px;
  width:200px;
  margin:5px;
  text-align: center;
  text-decoration: none;
  color: black;  
}


a:link#text-link, a:visited#text-link { 
  background-color: transparent ; 
  padding: 5px 5px;
  width:200px;
  margin:5px;
  text-align: center;
  text-decoration: none;
  color: black;  
}

a:hover#text-link, a:active#text-link {
 color: white;
}

a:link#text-link-tandc, a:visited#text-link-tandc { 
  background-color: transparent ; 
  padding-top: 21px;
  padding-left: 10px;
  width:20px;
  margin:0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  color: black;  
  vertical-align:top;
}

a:hover#text-link-tandc, a:active#text-link-tandc {
 color: white;
}

a:link#enter, a:visited#enter { 
  background-color: transparent ; 
  padding-top: 21px;
  padding-left: 10px;
  width:20px;
  margin:0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  color: black;  
  vertical-align:top;
}

a:hover#enter, a:active#enter {
 color: white;
}


a:link#text-link-standard, a:visited#text-link-standard { 
  background-color: transparent ;  
  width:auto;
  margin:0px;
  padding:0px;
  color: #000030;  
}

a:hover#text-link-standard, a:active#text-link-standard {
 background-color: transparent ; 
 color: blue;
}




/* Create a custom checkbox */

.container {
  display: inline-block;
  position: relative;
  padding-left: 0px;  
  cursor: pointer;  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;    
  font-size: min(max(16px, 1.3vw), 18px);	
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: -5px;
  padding-left: 10px;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

a:link#text-link-tandc, a:visited#text-link-tandc {  
  background-color:transparent; 
  width: 40px;
  padding-top: 0px; 
  text-align: left;
  text-decoration: none;
  display: inline-block;
  border: 0px;
 
}

a:hover#text-link-tandc, a:active#text-link-tandc {
	border: 1px;
}


a:link#text-link-tandcfooter, a:visited#text-link-tandcfooter {  
  background-color:transparent; 
  width: 40px;
  padding-top: 22px; 
  vertical-align:top;
  text-align: left;
  text-decoration: none; 
  display: inline-block;
  border: 0px;
 
}

a:hover#text-link-tandcfooter, a:active#text-link-tandcfooter {
	border: 1px;
}


#download-features{
	/*font-family: FreeMono, monospace;*/	
	font-size: min(max(16px, 1.6vw), 20px);
	color: #11459E;	
	font-weight: bold;
	padding-top:10px;	
	display: inline-block;
	text-align: left;
	line-height: 1.5;
}

#paypal-button-container div{
	/*font-family: FreeMono, monospace;*/
	font-size: min(max(16px, 1.6vw), 20px);
	font-weight: bold;	
	color: #11459E;		
}

#btndownload:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}




.mobile-header{
	display: none;
}

.desktop-header{
	display: block;
}


/* MOBILE  Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media screen and ( max-width:500px) {
	  body, html {  
	  display: grid;	  
	}
  
  	.mobile-header{
		display: block; 	
   	}
   
  	.desktop-header{
		display: none;
 	 }    
   
   
   	article {
	 	float: left;
	 	padding: 10px;  	 	
	 	background-color:#d1e4e9;  
	 }
   	
   
	.home-videos{  	
	  	justify-content: left;
	  	align-items: left;
	  	text-align: left;
	  }
  	  	
  	p {		
		font-size: min(max(16px, 4.1vw), 18px);		
		color: #2b2b2b;	
		font-weight: bold;	
	}
	
	
	.account-keys {
	  text-align: left;	
	  display:inline-block;
	  border-radius: 5px;  
	  padding: 10px 3 10px 3;  
	  border: 3px solid green;
	  background: #49b1ac;
	  margin: 10px 5px 0 0;  	
	  width:100%; 
	}
	
	div.account-keys p{
		padding: 5;	
		margin:0;	
		border:0;
		font-size: min(max(16px, 4vw), 18px);		
	}
	
	div.account-keys p.small-key {
		padding: 5;	
		margin:0;	
		border:10;
		font-size: 2vw;	
	}
	
	
	h2{		
		font-size: min(max(20px, 5vw), 24px);		
	}
	
	h1{
		font-size: min(max(22px, 5.2vw), 28px);
	}
	
	 #home-features{
		font-size: min(max(14px, 3vw), 16px);		
		color: #000030;	
		font-weight: bold;
		padding-top:5px;	
		display: inline-block;
		text-align: left;
		line-height: 1.5;
	}
		
	#text-link{
		font-size: min(max(16px, 5vw), 18px);
	}
	
	.middle-registration {
		text-align: center;
		width:80%;	
	}
	
	.group {
		  width:100%;		
		  text-align: center;		  
		  display:inline-block;
		  border-radius: 10px;  		
		  padding-bottom: 15px;    
		}
		
	.group label {
		width:100%;			
		float:left;
		vertical-align: top;
		font-size: min(max(16px, 5vw), 18px);
		padding-top:10px;
	}
	
	.group input {		
		display:inline-block;		
		width:90%;		
		padding-bottom:10px;		
	}
	
	.group textarea{
		margin-left:10px;
		width:60%;
	}
	
	#account.group{
	  border: 3px solid #145789;
	  background: #71A5CB;
	  vertical-align: top;
	  margin-bottom: 15px;
	  margin-left:0px;   	  
	  margin-right:10px;	  
	  float:left;
	  clear:both;
	}
	
	#changepassword.group{
	  border: 3px solid #145789;
	  background: #71A5CB;
	  vertical-align: top;
	  margin-bottom: 15px;
	  margin-left:0;   
	  padding:0;	
	  float:left;
	  clear:both;	  
	}
	
	.middle-registration {
		text-align: center;
		width:100%;	
	}
	
	#id_product_email, #id_product, #id_version, #id_registered, #id_lastlogon{		
		display:inline-block;
		text-align: center;
		font-size: min(max(16px, 5vw), 18px);
	}
	
	#table-tc{
	  font-size: min(max(14px, 2.7vw), 16px);
	  border-collapse: collapse;  
	  width:60%; 
	  float:left;
	  
	}
	 
	#table-tc td{ 
	  padding: 3px;	 
	}
	
	#table-tc tr td:nth-child(1){  
	   text-align:left; 
	   white-space:nowrap;    
	}
	   
	#table-tc tr td input{
		width: 30px;		
	}
	
	#login.group{
	  border: 3px solid green;
	  background: #49b1ac;  
	  width:100%;
	  float:left;	 
	  padding-left:5px;
	  padding-right:5px;
	}
	
	#register.group{
	  border: 3px solid #145789;
	  background: #71A5CB;  
	  width:100%; 
	  float:left;
	  padding-left:5px;
	  padding-right:20px;	 
	}
	
	.middle {
		text-align: left;
		float:left;		
	}				
	
	#register-or {
	  padding-top:10px;
	  text-align: left;	
	  clear: both;  
	}
	
	.home-download {
	  text-align: center;
	  margin: 0;
	  float:left;
	  border-radius: 10px;  
	  padding: 0;   
	  width:300px;
	}
	
	#download-features{
	/*font-family: FreeMono, monospace;*/	
	font-size: min(max(16px, 1.4vw), 18px);
	color: #11459E;	
	font-weight: bold;
	padding-top:10px;	
	display: inline-block;
	text-align: left;
	line-height: 1.5;
}

	#products {	  
	  border-collapse: collapse;	  
	  font-size: min(max(16px, 4vw), 18px);	 
	  float:left; 
	  overflow-x:auto;
	}
	
	div.middle-download{
		overflow: hidden;
	}
	
  footer {
    background-color: #777;
    background-image: linear-gradient(to right, #164e57 0%, #000030 100%);
    padding: 10px;
    text-align: center;
    color: white;    
    height: 100px;
  }




  
}