@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,600;8..144,800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@400;600;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Texturina:ital,opsz,wght@0,12..72,400;0,12..72,500;0,12..72,600;0,12..72,800;1,12..72,400&display=swap');

@import url('../img/fa/css/font-awesome.min.css');
@import url('https://kit.fontawesome.com/017456029a.js');


* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}


a:link {
	border: none;
	color: #00C;
	text-decoration: none;
}
a:visited {
	color: #00C;
}
a:hover {
	color: #F00;
	text-decoration: none;
}
a:active {
	color: #00C;
	text-decoration: none;
}


#active  {
	background:  rgba(52, 52, 52, 0.6);
	color: #ddd;
}

#active a:link {
	color: #ddd;
}


blockquote {
	padding: 5px 30px 5px 30px;
}


.fot-container {
	background-image: url("../img/main/foot-bg-narro-cln.png");
	color: rgba(52, 52, 52, 0.8);
	display: block;
	font-size: 1.2rem;
	font-weight: 600;
	height: 60px;
	padding: 15px 10px 10px 10px;
	width: 100%;
	text-align: center;
}

#fot-inne {
	text-shadow: 1px 1px 1px rgba(52, 52, 52, 0.2);
}


.fs-pract-wrap {
	border: solid 1px rgba(51, 51, 51, 0.2);
	border-radius: 10px;
	margin:  0px 16px 0px 0px;
	padding: 20px 10px 30px 20px;
}


.fs-pract-wrap {
	margin-top: 5px;
	padding-right: 20px;
	padding-top: 5px;
	margin-bottom: 10px;
}


.fs-leg-pr-hod {
	color: rgba(52, 52, 52, 0.6);
	display: block;
	font-size: 1.2rem;
	font-weight: 600;
	padding: 0px 3px 0px 3px;
	margin: 0px 2px 0px -4px;
}




.garrity-hod {
	color: rgba(52, 52, 52, 0.6);
	font-size: 1.2rem;
	font-weight: 600;
}


.garrity-hod-2 {
	color: rgba(52, 52, 52, 0.6);
	font-size: 1rem;
	font-weight: 600;
}

.garrity-hod-3 {
	color: rgba(52, 52, 52, 0.8);
	font-size: 1rem;
	font-weight: 600;
}

#hod-bg {
	background-image: url("../img/main/hod-bg-narro.png");
	width: 100%;
	margin: auto;
}

body, p  {
	font-family: arial, helvetica, "sans-serif"; 
	font-size: 16px; 
	background-attachment: fixed;
}




/* End Utilities*/

.att-hod {
	display: block;
	color: rgba(51, 51, 51, 0.7); 
	font-size: 1.1rem;
	font-weight: 600;
}

.att-hod-2 {
	display: block;
	color: rgba(51, 51, 51, 0.4); 
	font-size: .95rem;
	font-weight: 600;
	margin-top: -6px;
}

.att-p2 {
	padding-top: 7px;
}

.contact-grey {
	color: rgba(51, 51, 51, 0.5);
	font-size: .9rem;
}

.contact-name-title {
	display: inline-block;
	line-height: 1;
}


.contact-side {
	border: solid 1px rgba(51, 51, 51, 0.2);
	border-radius: 10px;
	padding: 10px 10px 10px 8px;
	line-height: 1.2;
	margin:  3px 20px 0px 14px;
}

.contact-side  p {
	padding:  3px 12px 150px 11px;
}

.contact-title {
	color: rgba(51, 51, 51, 0.9);
	font-size: .9rem;
}

.contact-wrap {
	padding-bottom: 10px;
	padding-top: 15px;
}

.gjemme-helt {
	display: none;
}


#hod-container {
	display: flex;
	justify-content: center;
	width: 100%;
	text-align: center;
	margin: 0 auto 0;
}


#hod-wrap {
	display: block;
	justify-content:flex-start;
	max-width: 1100px;
	margin: 0 auto 0; 
}



#hod-logo img {
	padding: 10px 10px 8px 10px;
	width: 350px;
}


.hod-meny-container {
	background: #cfcfcc;
	box-shadow: 1px 1px 1px 1px rgba(52, 52, 52, 0.6);
	display: flex;
	justify-content: center;
	margin: 0px;
	width: 100%;
}

.hod-meny-wrap {
	display: block;
	width: 1080px;
	text-align: left;
}

.hod-meny {
	padding: 4px 12px 4px 10px;
	text-align: left;
}


.hod-meny a,
.hod-meny a:visited {
	color: #333;
	font-size: 1.2rem;
	padding: 4px 12px 4px 10px;
	text-align: left;
	text-shadow: 1px 1px 2px rgba(52, 52, 52, 0.4);
}


.hod-meny  a:hover {
	background:  rgba(51, 51, 51, 0.6);
	color: #ddd;
	transition: all .5s ease-in-out;
}

.kropp-hoved {
	display: flex;
	justify-content: center;
	padding: 20px 20px 30px 20px;
	width: 100%;
}

.kropp-img img {
	border-radius: 5px;
/*	box-shadow: 1px 1px 2px 2px rgba(52, 52, 52, 0.3);*/
	max-width: 450px;
	margin: 10px 10px 10px 10px;
}

.kropp-wrap {
	display: flex; 
	justify-content:space-between;
	max-width: 1100px;
}

.kropp-practice-hoved {
	display: flex;
	justify-content: center;
}

.kropp-practice-txt {
	display: block;
	justify-content: flex-start;
	align-content: flex-start;
	padding: 20px 0px 20px 0px;
	text-align: left;
}

.kropp-practice-wrap {
	display: block;
	justify-content: flex-start;
	text-align: left;
	width: 1100px;
}

.kropp-practice-container {
	display: block;
	justify-content: flex-start;
	text-align: left;
	width: 1100px;
}

.kropp-txt p {
	font-size: 1rem;
	line-height: 1.2;
	padding: 0px 10px 8px 10px;
	text-align: justify;
}

.kropp-txt-at {
	border: solid 1px rgba(51, 51, 51, 0.2);
	border-radius: 10px;
	margin-left: 18px;
	padding: 15px 10px 10px 8px;

}



.kropp-txt-att p {
	font-size: 1rem;
	line-height: 1.2;
	padding: 0px 10px 8px 15px;
	text-align: justify;
}

.kropp-txt-hod {
	color: rgba(52, 52, 52, 0.6);
	display: block;
	font-size: 1.15rem;
	font-weight: 600;
}


.kropp-txt {
	display: block;
	justify-content: flex-start;
	text-align: left;
}


.leo-list {
	margin:  0px 20px 20px 11px;
}

.leo-list  p {
	margin: 0px 0px 0px 0px;
	padding:  3px 12px 6px 11px;
}

.leo-list ul {
	list-style: circle;
	padding: 0px 10px 0px 40px;
}

.leo-list ul li {
	padding-bottom: 8px;
}

.leo-list ul  {
	padding-top: 10px;
}




.leo-wrap {
	border: solid 1px rgba(51, 51, 51, 0.2);
	border-radius: 10px;
	margin:  0px 16px 0px 14px;
	padding: 12px 10px 10px 0px;
}

.links-container {
	padding-bottom: 20px;
	padding-top: 20px;
	
}


.links-wrap {
	border: solid 1px rgba(51, 51, 51, 0.2);
	border-radius: 10px;
	margin:  0px 16px 0px 14px;
	padding: 0px 10px 10px 0px;
}

.links-list {
	padding:  20px 20px 30px 38px;
}

.links-list ul {
	list-style: circle;
}

.links-list .l-2  {
	padding-top: 10px;
}

.links-list ul li {
	padding-bottom: 5px;
}

.links-list ul li a {
	font-size: 1rem;
}

.links-list .kropp-txt-hod {
	color: rgba(52, 52, 52, 0.6);
	display: block;
	font-size: 1.1rem;
	font-weight: 600;
	margin-left: -19px;
}



.notice-side {
	padding: 0px 0px 0px 10px;
}

.practice-list .kropp-txt-hod {
	color: rgba(52, 52, 52, 0.8);
/*	display: block;*/
	font-size: 1.2rem;
	font-weight: 600;
	margin-left: -19px;
}


.practice-list {
	display: inline-block;
	margin:  6px 20px 20px 40px;
	text-align: left;	
}

.practice-list ul {
	list-style: square;
	padding-bottom: 0px;
	text-align: left;
}

.practice-list ul li {
	padding: 2px;
}

.practice-list ul ul {
	list-style: circle;
	padding-left: 15px;
}


.practice-list ul ul ul {
	list-style: disc;
}

#practice-bash-list  {
	display: block;
	line-height: 1.4;
	text-align: left;
	padding: 2px 3px 5px 18px;
}

#practice-bash-list p {
	padding-bottom: 6px;
}


#practice-bash-list ul {
	padding: 0px 10px 0px 20px;
}


#practice-bash-list ul {
	list-style: square;
}


#practice-bash-list ul ul {
	list-style: circle;
}


#practice-bash-list ul ul ul {
	list-style: disc;
}


p#privat-p {
	padding-top: 10px;
}


a.privat {
	border: solid 1px rgba(28, 46, 74, 0.6);
	border-radius: 10px;
	padding: 4px 11px 5px 9px;
}

.privat:hover {
	border: solid 1px #ff0000;
	border-radius: 10px;
}

a.privat  { 
	color:   rgba(28, 46, 74, 0.8);
}

a.privat:hover  { 
	color:   #ff0000;
}




#icon {
  color: #333;
  display: none;
}

/* Meny */

/* background color to the top navigation */
.topnav {
  background-color:  #cfcfcc;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: rgba(51, 51,51, 0.8);
  text-align: center;
  padding: 9px 16px 9px 16px;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Change the color of links on hover */
.topnav a:hover {
  background: #333;
  color: #800;
  transition: all .4s ease-in-out;
}
  

@media screen and (min-width:780px) {
	.dukkeopp {
		display: none;
	}
}



 /*  topnav (.icon) */
@media screen and (max-width: 780px) {
.topnav a:not(:first-child) {
	display: none; 
	}
	
 #icon {
    float: right;
    display: block;
	
  }
}
	
	
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 780px) {
	


.contact-side {
	margin:  3px 20px 10px 15px;
	padding-left: 6px;
}	
.contact-title {
	display: block;
	font-size: .9rem;
}
	
	
.gjemme-780 {
	display: none;
	}
	
.gjemme {
	display: none;
	}
	
#hod-logo img {
		width: 300px;
	}


	
.kropp-img img {
	border-radius: 10px;
	margin-left: 0px;
	padding: 5px 5px 0px 0px;
	max-width: 400px;		
	}	
	

.kropp-txt-att {
	line-height: 1.2;
	margin-left: -4px;
	
}



	
	
.kropp-wrap {
	flex-direction: column;
	justify-content: center;
	flex-flow: column-reverse;
	}
	
.kropp-txt {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
	
.kropp-txt p {
	font-size: 1rem;
	padding: 0px 0px 5px 0px;
	text-align: justify;
	max-width: 400px;
}

.kropp-txt-hod {
	color: rgba(52, 52, 52, 0.8);
	display: block;
	font-size: 1.15rem;
	font-weight: 600;
}
	

	

.leo-wrap {
	margin:  0px 0px 0px 2px;
	padding: 12px 2px 10px 8px;
}



	
	
	
	
	
/* Resp Meny  */

	
 .topnav.responsive {position: relative;}
  .topnav.responsive #icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
	
	#myTopnav {
		margin-left: 15px; 
	}
} 


@media screen and (max-width: 600px) {
	.kropp-img img {	
	width: 310px;
}
	
	
	.gjemme-600 {
		display: none;
	}	
}