@font-face { font-family: 'jsf1'; src: url('UniNeueRegular.woff') format('truetype'); }
* {margin: 0; padding: 0; font-family: 'jsf1', sans-serif; font-size: 12px; line-height: 1.5; color: rgba(107,142,35,1); } p {margin: 0; padding: 5px; }
body { background: rgba(240,240,240,1); margin: 0; padding: 10px; }
p {margin: 0; padding: 5px; }
a, a:hover, a:active {font-weight: bold; text-decoration: none;}
a:hover, a:active {font-weight: bolder; text-decoration: underline;}
:root {--size: 100px;}

.form {width: 300px; height: auto; margin: 100px calc(50% - 150px) auto auto; padding: 0; border: 2px solid rgba(107,142,35,1); border-radius: 10px; overflow: hidden; background: #fff;}

.form2 {width: calc(220px + var(--size) + 0px); margin: 100px auto auto calc(50% - 110px - calc(var(--size) / 2) - 0px); background: transparent url(bg.jpg) no-repeat left top / calc(var(--size) * 1.1) auto; }

form {min-height: 150px; background-image:  linear-gradient(to right, transparent calc(var(--size) / 1.15), white var(--size), white 100%); padding: 10px;}

.form2 form {padding-left: calc(var(--size) * 1.1); }

button {width: 100%; margin: 8px 0px; padding: 1px 3px; background: 0; border-radius: 20px; border: 1px solid rgba(107,142,35,1); } 
button:hover { background: rgba(107,142,35,0.2); } 

#seconds { position: fixed; left: 0; top: 0; margin: 0; padding: 0; background: rgba(107,142,35,1) left top / 100%; width: 100%; height: 5px; text-align: center; overflow: hidden; }	
/*	  steps(<? echo $time; ?>) infinite	* / 	@keyframes rotateSec { 	from { transform: rotate(calc(0 * 6deg)); } 	to { transform: rotate(calc(60 * 6deg)); } }	/*	*/
/*	infinite	*/	@keyframes rotateSec { 	from { width: 0%; } 	to { width: 100%; } }	/*	*/

.company, strong {font-size: 150%; font-style: italic; line-height: 1;}

img {width: auto; max-width: 400px; height: auto; max-height: 400px; }