/* copyright Tord Hjalt */


html {
  scroll-behavior: smooth;
}

/* Phone version; 600px and smaller): */
@media only screen and (max-width: 600px) {


p.font_2 {
display:inline; font-family: arial,times; 
font-size: 18px; color:white; font-weight: bold;text-align:center;}


p.font_3 {
display:inline; font-family: arial,times; 
font-size: 12px; color:white; font-weight: bold;text-align:center;}

h1 {
  display: block;
  color: white;
  font-size: 32px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  text-align:center;
}

h2 {
  display: block;
  color: white;
  font-size: 24px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 8px;
  margin-right: 0;
  font-weight: bold;
  
}


.Header {

	
position:absolute;
	top:0px; left: 0px;
	width:100%;
	height:121px;

   
padding:2px;

 box-sizing: border-box;  /* Magic fix: Padding + borders included in width */
    margin: 0;  /* Ensure no extra margins pushing it out */
    overflow-x: hidden;  /* Optional: Hides any remaining horizontal scroll */

text-align: justify;
  text-justify: inter-word;

background-color:#333333;
	z-index:10;

}

/* alternate versions for different imgs */

.HeaderCatMob {

	
position:absolute;
	top:8px; left:25px;
	width:100px;
	height:100px;

	z-index:12;

}


.HeaderCatComp {

	
position:absolute;
	top:-4000px; left:-4000px;
	width:300px;
	height:300px;

	z-index:1;

}



.HeaderText {

	
position:relative;
	top:3px; left:5px;
	max-width:350px; width:85%;
	height:70px;

text-align:center;
background-color:#333333;
	z-index:14;

 box-sizing: border-box;  /* Magic fix: Padding + borders included in width */
    margin: 0;  /* Ensure no extra margins pushing it out */
    overflow-x: hidden;  /* Optional: Hides any remaining horizontal scroll */

}

.HeaderSubText {

	
position:relative;
	bottom:2px; left:15px;
	max-width:350px; width:85%;
	height:45px;
 box-sizing: border-box;  /* Magic fix: Padding + borders included in width */
    margin: 0;  /* Ensure no extra margins pushing it out */
    overflow-x: hidden;  /* Optional: Hides any remaining horizontal scroll */


background-color:#333333;
	z-index:16;

}

.SecondRow {

	
position:absolute;
top:121px; left: 0px;
	width:100%;
	height:151px;

padding:5px;
 box-sizing: border-box;  /* Magic fix: Padding + borders included in width */
    margin: 0;  /* Ensure no extra margins pushing it out */
    overflow-x: hidden;  /* Optional: Hides any remaining horizontal scroll */

text-align:left;

background-color:#737373;
	z-index:2;

}


.SecondRowText {

	
position:relative;
top:2px; left: 20px;
	width:80%;
	height:100px;
	

 box-sizing: border-box;  /* Magic fix: Padding + borders included in width */
    margin: 0;  /* Ensure no extra margins pushing it out */
    overflow-x: hidden;  /* Optional: Hides any remaining horizontal scroll */

text-align:left;
  

background-color:#737373;
	z-index:3;

}


.LeftCatMob {

position:absolute;
top:133px; left: 9px;
	width:50px;
	height:80px;
background-color:#737373;
	z-index:200;

}


.LeftCatComp {

	
position:absolute;
top:-4000px; left:-4000px;
	width:100px;
	height:150px;
background-color:#737373;
	z-index:1;

}


.RightCatMob {

position:absolute;
top:133px; right: 105px;
	width:50px;
	height:80px;
background-color:#737373;
	z-index:200;

}

.RightCatComp {

	
position:absolute;
top:-4000px; left:-4000px;
	width:100px;
	height:150px;
background-color:#737373;
	z-index:1;

}


.ThirdRow {

	
position:absolute;
top:272px; left: 0px;
	width:100%;
	height:151px;
	
padding:5px;
 box-sizing: border-box;  /* Magic fix: Padding + borders included in width */
    margin: 0;  /* Ensure no extra margins pushing it out */
    overflow-x: hidden;  /* Optional: Hides any remaining horizontal scroll */

text-align:center;
  

background-color:#333333;
	z-index:3;

}

.ThirdRowText {

	
position:relative;
top:15px; 
	width:80%;
	height:100px;

	
 box-sizing: border-box;  /* Magic fix: Padding + borders included in width */
    margin: 0;  /* Ensure no extra margins pushing it out */
    overflow-x: hidden;  /* Optional: Hides any remaining horizontal scroll */

text-align:left;
  

background-color:#333333;
	z-index:3;

}

.FourthRow {

	
position:absolute;
top:423px; left: 0px;
	width:100%;
	height:100%;
	
padding:5px;
 box-sizing: border-box;  /* Magic fix: Padding + borders included in width */
    margin: 0;  /* Ensure no extra margins pushing it out */
    overflow-x: hidden;  /* Optional: Hides any remaining horizontal scroll */

text-align:center;
  

background-color:#737373;
	z-index:4;

}

.FourthRowText {

	
position:relative;
top:480px; left:10px;
	width:50%;
	height:100px;

	
 box-sizing: border-box;  /* Magic fix: Padding + borders included in width */
    margin: 0;  /* Ensure no extra margins pushing it out */
    overflow-x: hidden;  /* Optional: Hides any remaining horizontal scroll */

text-align:left;
  

background-color:#737373;
	z-index:400;

}

.RightSchedMob {

position:absolute;
top:440px; left: 2px;
	max-width:410px; width:100%;
	height:125px;
background-color:#737373;
	z-index:205;

box-sizing: border-box;  /* Magic fix: Padding + borders included in width */
    margin: 0;  /* Ensure no extra margins pushing it out */
    overflow-x: hidden;  /* Optional: Hides any remaining horizontal scroll */

}


.RightSchedComp {

	
position:absolute;
top:-4000px; left:-4000px;
	width:800px;
	height:150px;
background-color:blue;
	z-index:1;

}




.MailformholderMob {

	
position:absolute;
top:570px; 
	width:80%;
	height:250px;
margin-top: 1px;
  margin-bottom: 1px;
  margin-right: 1px;
  margin-left: 1px;

text-align:left;
  

background-color:#737373;
	z-index:337;

}


.MailformholderComp {

	
position:absolute;
left:-750px; 
	width:50%;
	height:250px;
margin-top: 1px;
  margin-bottom: 1px;
  margin-right: 1px;
  margin-left: 1px;

text-align:center;
  

background-color:#737373;
	z-index:1;

}

input[type=text] {
  width: 200px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 20px;
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 6px 10px 6px 20px;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

input[type=email] {
  width: 200px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 20px;
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 6px 10px 6px 20px;
  transition: width 0.4s ease-in-out;
}

input[type=email]:focus {
  width: 100%;
}

input[type=submit] {
  width: 110px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 20px;
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 2px 2px 2px 2px;
  transition: width 0.4s ease-in-out;
}

input[type=submit]:focus {
  background-color: red;
}

input[type=reset] {
  width: 110px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 20px;
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 2px 2px 2px 2px;
  transition: width 0.4s ease-in-out;
}

input[type=reset]:focus {
  background-color: red;
}



} /*end phone version*/


/* AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA  */


/* portrait tablets, computers  and large phones, 601px and up) */
@media only screen and (min-width: 601px) {


p.Headfont {font-family: arial; font-size: 85px; color:white;text-align:center;}

p.font_2 {
font-family: arial,times; 
font-size: 44px; color:white; font-weight: bold;text-align:center;}

h1 {
  display: block;
  color: white;
  font-size: 165px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
   text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  text-align:center;
}

h2 {
  display: block;
  color: white;
  font-size: 64px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  text-align:center;
}



.Header {

	
position:absolute;
	top:0px; left: 0px;
	width:100%;
	height:400px;

   
padding:5px;

text-align: justify;
  text-justify: inter-word;

background-color:#333333;
	z-index:10;

}

/* alternate versions for different imgs */

.HeaderCatMob {

	
position:absolute;
	top:-4000px; left:-4000px;
	width:100px;
	height:100px;

	z-index:1;

}

.HeaderCatComp {

	
position:absolute;
	top:25px; left:30px;
	width:300px;
	height:300px;

	z-index:12;

}

.HeaderText {

	
position:relative;
	top:11px; left:365px;
	width:900px;
	height:200px;


background-color:#333333;
	z-index:15;

}

.HeaderSubText {

	
position:relative;
	top:30px; left:350px;
	width:900px;
	height:40px;


background-color:#333333;
	z-index:16;

}

.SecondRow {

	
position:absolute;
top:401px; left: 0px;
	width:100%;
	height:400px;

	
  padding:5px;

text-align:left;
  

background-color:#737373;
	z-index:2;

}

.SecondRowText {

	
position:relative;
top:20px; left:230px;
	width:40%;
	height:300px;

	
margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 8px;
  margin-left: 8px;

text-align:left;
  

background-color:#737373;
	z-index:3;

}


.LeftCatMob {

position:absolute;
top:150px; left: -5000px;
	width:80px;
	height:80px;
background-color:#737373;
	z-index:1;

}

.LeftCatComp {

position:absolute;
top:428px; left: 133px;
	width:100px;
	height:150px;
background-color:#737373;
	z-index:200;

}


.RightCatMob {

position:absolute;
top:150px; left: -5000px;
	width:80px;
	height:80px;
background-color:#737373;
	z-index:1;

}

.RightCatComp {

position:absolute;
top:428px; right: 525px;
	width:100px;
	height:150px;
background-color:#737373;
	z-index:200;

}



.ThirdRow {

	
position:absolute;
top:801px; left: 0px;
	width:100%;
	height:400px;
	
padding:5px;

text-align:center;
  

background-color:#333333;
	z-index:3;

}

.ThirdRowText {

	
position:relative;
top:55px; 
	width:80%;
	height:300px;

	
margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 80px;
  margin-left: 80px;

text-align:left;
  

background-color:#333333;
	z-index:4;

}

.FourthRow {

	
position:absolute;
top:1201px; left: 0px;
	width:100%;
	height:900px;
	
padding:5px;

text-align:center;
  

background-color:#737373;
	z-index:4;

}

.FourthRowText {

	
position:relative;
top:400px; left:30px;
	width:20%;
	height:300px;

	
margin-top: 3px;
  margin-bottom: 3px;
  margin-right: 3px;
  margin-left: 3px;

text-align:left;
  

background-color:#737373;
	z-index:5;

}

.RightSchedMob {

position:absolute;
top:-1433px; right: -2105px;
	width:50px;
	height:80px;
background-color:red;
	z-index:1;

}

.RightSchedComp {

	
position:absolute;
top:1340px; right: 105px;
	width:880px;
	height:230px;
background-color:#737373;
	z-index:205;

}

.RightSchedCompPrel {

	
position:absolute;
top:450px; right: 105px;
	width:800px;
	height:150px;
background-color:#737373;
	z-index:205;

}


.MailformholderMob {

	
position:absolute;
left:-4000px; 
	width:50%;
	height:250px;
margin-top: 1px;
  margin-bottom: 1px;
  margin-right: 1px;
  margin-left: 1px;

text-align:center;
  

background-color:#737373;
	z-index:1;

}

.MailformholderDesk {

	
position:absolute;
top:450px; left: 345px;
	width:30%;
	height:450px;
margin-top: 1px;
  margin-bottom: 1px;
  margin-right: 1px;
  margin-left: 1px;

text-align:center;
  

background-color:green;
	z-index:425;

}

input[type=text] {
  width: 230px;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 4px;
  font-size: 26px;
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 10px 18px 10px 38px;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

input[type=email] {
  width: 230px;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 4px;
  font-size: 26px;
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 10px 18px 10px 38px;
  transition: width 0.4s ease-in-out;
}

input[type=email]:focus {
  width: 100%;
}

input[type=submit] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 23px;
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 2px 2px 2px 2px;
  transition: width 0.4s ease-in-out;
}

input[type=submit]:focus {
  background-color: red;
}

input[type=reset] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 23px;
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 2px 2px 2px 2px;
  transition: width 0.4s ease-in-out;
}

input[type=reset]:focus {
  background-color: red;
}

select {
  width: 25%;
  padding: 3px;
  border: 2px solid black;
  border-radius: 2px;
  background-color: white;
  
}




/*knapplänk till desktopformulär: */

a.bep:link, a.bep:visited {
position:absolute;
top:1370px; left: 395px;
  background-color: #00b300;
  color: white;
font-size: 44px;
  padding: 24px 35px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
border-radius: 7px;
box-shadow: 0 11px 19px 0 rgba(0,0,0,0.6);
z-index:600;
}

a.bep:hover, a.bep:active {
  background-color: #3e8e41;
}









} /*end computer version*/



.DenyFrame {

position:relative;  
/*left:120px; top:150px;  */
padding:3px;
    top:250px;
     width: 250px;
    height: 250px;
margin-left: auto;
    margin-right: auto;
  

    z-index:1;

 /* Standard syntax */
    animation-name: deny_flash;
    animation-duration: 1s;
      animation-iteration-count: infinite;

 /* Chrome, Safari, Opera */
     -webkit-animation-name: deny_flash; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;

background-color: white;



}


/* Standard syntax */
@keyframes deny_flash {
     0% {background-color: #F80000;  }
   50% {background-color: white;  }
  100%  { background-color: #F80000;}
}

   /* Chrome, Safari, Opera */
@-webkit-keyframes deny_flash {
   0% {background-color: #F80000;  }
   50% {background-color: white;  }
  100%  { background-color: #F80000;}
    
}