@charset "UTF-8";
/* CSS Document */


        html, body {
            height: 100%;
            margin-bottom: 0px;
            display: flex;
            flex-direction: column;
			font-family: "Montserrat", sans-serif;
  			font-optical-sizing: auto;
  			font-weight: 18pt;
  			font-style: normal;
            
        }
        /* Header med två spalter */
        /*header {
            display: flex;
            padding-left: 10px;
			padding-right: 50px;
			margin-left: 60px;
			margin-right: 60px;
            color: white;
            flex-wrap: wrap; För att anpassa sig till mindre skärmar 
			height: 90px;
        }

		.header-mob {
			display: none;
			}
		
		.header-spalt {
            flex: 1;
            min-width: 50%;
            box-sizing: border-box;
            padding: 10px;/*
        }*/
				
		.underrubrik {
	  		font-family: "Playfair Display", serif;
  			font-optical-sizing: auto;
  			font-weight: 800;
  			font-style: 900;
  			color: black;
			font-size: 36px;
			width; 100%
			padding-bottom:-10px;
			line-height: 1.1;
			

		}

		.header-desktop {
            display: block;
			width: 100%;
        }

        .header-mobile {
            display: none;
        }
		
		
		
        /* Main med två spalter och responsivitet */
        main {
            flex: 1;
            box-sizing: border-box;
			margin-top: 30px;
        }
        .content-spalter {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
			margin-bottom: 30px;
			margin-left: 60px;
			margin-right: 60px;
        }
        .spalt70 {
            flex: 7;
            min-width: 300px;
            background-color: #f0f0f0;
            padding-left: 30px;
			padding-right: 30px;
			padding-bottom: 30px;
			padding-top: 20px;
            box-sizing: border-box;
			border-radius: 10px;
        }
        .spalt30 {
            flex: 3;
            min-width: 200px;
			border: 1px solid darkgray;
            padding-left: 30px;
			padding-right: 30px;
			padding-bottom: 30px;
			padding-top: 0px;
            box-sizing: border-box;
			border-radius: 10px;
			
        }
        footer {
            background-color: #222;
            color: #fff;
            text-align: center;
            padding: 10px;
        }
		
		h1 {
  			font-family: "Playfair Display", serif;
  			font-optical-sizing: auto;
  			font-weight: 800;
  			font-style: 900;
  			color: white;
			font-size: 48px;
			margin: 1px;
  			width: 50%;
		}
		
		h3 {
  			font-family: "Playfair Display", serif;
  			font-optical-sizing: auto;
  			font-weight: 800;
  			font-style: 900;
  			color: black;
			font-size: 24px;

		}
		
		p {
			line-height: 1.5;
		}

		.top-bkgr {
			  	background-image: linear-gradient(#0078c2, #00569e);
				/*width: auto;*/
				max-width: 100%;
   				min-width: 600px;
				margin-top: 0px;
				border-radius: 7px;
				border-width: 0px;
				border-style: none;
		}

		.over-header-text {
				text-align: center;
				padding: 5px;
				color:gray;
			  	margin-left: auto;
  				margin-right: auto;
		}
		
		footer {
				font-size: 9pt;
		}
		
		a.footer-x:link  {text-decoration: none; color: lightblue !important;}
		a.footer-x:visited  {text-decoration: none; color: lightblue !important;}
		a.footer-x:hover {text-decoration: underline; color: yellow !important;}
		a.footer-x:active {text-decoration: none; color: lightblue !important;}

		
		/* Fomulär */
		
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		textarea {
  			width: 100%;
  			background-color: white;
  			border: none;
  			border-radius: 8px;
  			padding: 10px;
  			box-sizing: border-box;
  			/*font-family: Arial, sans-serif;*/
  			font-size: 12px;
		}
		
		button {
    		background-color: #04AA6D;
    		color: white;
    		padding: 7px 10px;
    		margin: 8px 0;
    		border: none;
    		cursor: pointer;
    		width: 20%;
			font-size: 14pt;
			border-radius: 35px;
}

		button:hover {
			width: 25%;
}	
		
		/* End Fomulär */
	

		
		
		
        /* Responsivitet för mindre skärmar */
        @media (max-width: 768px) {
			
			.header-desktop {
            	display: none;
       		 }

        	.header-mobile {
            	display: block;
        	}
          
			.content-spalter {
				width: 100%
            	display: 0;
            	gap: 20px;
            	flex-wrap: wrap;
				margin-bottom: 30px;
				margin-left: 0px;
				margin-right: 0px;
				
            }
            .spalt70, {
            	flex: none;
				width:100%;
            	min-width: 300px;
            	padding-left: 0px;
				padding-right: 0px;
				padding-bottom: 0px;
            	box-sizing: border-box;
				border-radius: 10px;
            }
			
			.spalt30 {
				flex: none;
				width:100%;
            	min-width: 300px;
            	padding-left: 20px;
				padding-right: 20px;
				padding-bottom: 0px;
				border-radius: 10px;
			}
		
        }
			main {
           		flex: none;
				width: 100%;
            	padding-left: 0px;
				padding-right: 0px;
            	/*box-sizing: border-box;*/
        }
		
		button {
    		background-color: #04AA6D;
    		color: white;
    		padding: 7px 10px;
    		margin: 8px 0;
    		border: none;
    		cursor: pointer;
    		width: 200px;
			font-size: 14pt;
			border-radius: 35px;
}

		button:hover {
			background-color: lightgreen;
			width: 200px;
			color: black;
}

}