/* page layout */

	:root {
	  --problue:#486d9c;
	  --progreen:#5da743;
		--grey:#363636;
	  --link:#305179;
	  --linkhover:#223545;
	  --textlight:#868686;
	}

	@font-face {
	  font-family: 'Nunito';
	  src: url('../fonts/Nunito-Regular.ttf');
	}
	@font-face {
	  font-family: 'Nunito';
	  src: url('../fonts/Nunito-Bold.ttf');
		font-weight: bold;
	}
	@font-face {
	  font-family: 'Nunito';
	  src: url('../fonts/Nunito-Italic.ttf');
		font-style: italic;
	}
	@font-face {
	  font-family: 'Nunito';
	  src: url('../fonts/Nunito-BoldItalic.ttf');
		font-style: italic;
		font-weight: bold;
	}
	
	html { 
		font-family: 'Nunito', sans-serif;
		height: 100%;
		font-size:16px;
    min-height: 100%;
	}
	
	body {
		height: 100%;
		margin: 0px;
		min-height: 100%;
		text-align: center;
    display: flex;
    flex-direction: column;
		background-color: #fffcfc;
		background-image: url("../img/background-body.png");
	}
	
	header {
    display: flex;
    align-items: center;
		background: url("../img/background-header.jpg") no-repeat center #eee;
		background-size: cover;
		padding:15px 0px 15px 0px;
    justify-content: center;
	}
	
	header img {
		max-width:300px;
		width:100%;
		height:auto;
	}

	header p {
		font-size:2em;
		/* font-family:Helvetica, Arial, sans-serif; */
		font-style:italic;
		color:#ffffff;
		font-weight:bold;
    background: linear-gradient(180deg, #ffffff, #959cb5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
		margin:0px 0px 0px 30px;
		text-transform: uppercase;
		letter-spacing:0.4px;
	}


	main {
    flex: 1;
		width:772px;
		margin:auto;
		padding:30px 20px 20px 20px;
		color:var(--grey);
		text-align:left;
	}

	footer {
		font-size:0.8em;
		color:#7f7f7f;
		padding:20px 0px;
	}

	/* nav */

	nav {
    position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color:#ffffff;
		padding-top:4px;
		border-bottom:1px solid rgb(238, 238, 238);
	}
	
	.nav-links a {
		display:inline-block;
		padding:10px 15px;
		text-decoration:none;
		font-size:0.9em;
		margin:0px 3px;
		color:#727272;
		text-align:left;
		border-bottom: 3px solid transparent;
		transition: color 0.2s ease;
		text-transform: uppercase;
		letter-spacing:1px;
	}

	.nav-links  a:hover,
	.nav-links a.active {
		border-bottom-color:var(--link);
		transition: border-bottom-color .2s;
		color:var(--link);
		text-decoration:none;
	}

	.nav-toggle {
		display: none;
	}
	
	/* text */

	h1 {
		font-size:1.8em;
		font-weight:normal;
		margin-top:0px;
		padding-bottom:2px;
		border-bottom:1px dotted var(--problue);
	}

	h2 {
		font-size:1.4em;
		padding-bottom:8px;
		margin:35px 0px 0px 0px;
		/* border-bottom:1px dotted var(--problue); */
	}
	
	/* div.block-text {
		color:#000000;
	} */

	ul {
		margin-left:30px;
		padding-left:0px;
		margin-top:0px;
	}

	li {
		padding:6px 0px;
	}

	ul li ul li {
		padding:4px 0px;
	}


	div.msg {
		background-color:rgba(190, 194, 198, 0.25);
		padding:15px;
		border-left:6px;
		border-left-color:#bec2c6;
		border-left-style:solid;
		color:#282828;
	}

	/* buttons */

	button,
 	a.button,
	input[type="submit"] {
		background-color:var(--link);
		border:none;
		padding:10px;
		color:#ffffff;
		font-weight:bold;
		cursor:pointer;
		transition: background-color .2s;
		text-decoration:none;
		text-align:center;
		text-transform:uppercase;
		display:block;
		font-size:1em;
		border-radius:7px;
	}
	button:hover,
  a.button:hover,
	input[type="submit"]:hover {
		color:#ffffff;
		background-color:var(--linkhover);
		text-decoration:none;
	}
	
	a {
		color:var(--link);
	}
	a:hover {
		color:var(--linkhover);
		text-decoration:underline;
	}

	a.signup {
		background-color:var(--progreen);
	}

	a.signup:hover {
		background-color:#3e7f27;
	}

	/* other */

	.text-image {
			float: right;
			width: 250px;
			margin: 0 0px 30px 30px;
			border:6px solid #dadada;
	}

	/* media queries */

@media (max-width: 1000px) {

  .nav-links a {
    font-size:0.8em;
		padding:8px 10px;
		margin:0px;
  }

}

@media (max-width: 800px) {

	.nav-signup {
		display: block !important;

		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width:40%;
	}

  header {
    flex-direction: column;
    text-align: center;
		padding-bottom:5px;
  }

	header img {
		max-width:250px;
	}

	header p {
		font-size:1.5em;
    margin: 5px 0 0 0;
	}
	
	main {
		width:auto;
	}

	nav {
    justify-content: flex-start;
    padding: 8px 15px;
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #727272;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 101;
		box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
  }

  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-links a {
    font-size:1.2em;
		padding:10px 0px;
		border-bottom:1px solid rgb(225, 225, 225);
		margin:0px 22px;
  }

	.nav-links a:last-child {
		border-bottom: none;
	}

  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background: #fff;
    z-index: 101;
  }


	.nav-toggle:hover {
		background-color:inherit;
	}


	.text-image {
		display:none;
	}

	/* .text-image {
			float: right;
			width: 125px;
			margin: 0 0px 30px 30px;
			border:6px solid #dadada;
	} */


}

@media \0screen {img { width: auto !important } }