.cutter {
    border: 0px;
    background: grey;
    margin-bottom: 30px;
    text-align: center;
    padding:20px!important;
    color:aliceblue;
    display: none;
}



:root {
    --green: #108649;
    --light-green: #159754;
    --blue: #3081D0;
    --gray: #e2e2df;
    --graym: #d7d7d5;
    --grayl: #c8c8c7;
    --dark-gray: rgba(0, 0, 0, 0.64);
    --nav: #5E7D7E;
    --light-nav: #729394;
    --dark-nav: #567475;
    --pad: 20px;    
    --nav: #378cc3;
    --light-nav: #43afe2;
    --dark-nav: #2f7eb1;
}


.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}



body {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-size: 16px;
    display: grid; 
    row-gap: 0px;
    grid-template-areas:
    "header"
    "bodybox"
    "footer";      
    grid-template-rows: min-content 1fr  min-content;    
    min-height: 100vh;
}

*, *::before, *::after {
    box-sizing: border-box;
}  


.all-content {
    margin: 0 auto;
    max-width: 1200px;
}

header .wrapper {
    padding:10px 40px 0 40px;
    padding:10px 0px 0 0px;
}

header {
    width: 100%;
    grid-area: header;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
    background-color: #fff;
	height: 130px;
	z-index: 1;
	transition: transform 0.7s ease-in-out;
    border-bottom:1px solid var(--gray);    
    /*filter: drop-shadow(0 -10px 20px rgb(170, 170, 170));*/
}

.scroll-down .header {
	transform: translate3d(0, -90%, 0);    
}

.scroll-down .extras.tat .item:last-child {
    top: 70px;
    transition: transform 1s ease-in-out;
}


.scroll-up .extras.tat .item:last-child {
    top: 170px;
    transition: transform 4s ease-in-out;
}

.scroll-up .header {
	transform: translateY(0);
    filter: drop-shadow(0 -10px 20px rgb(170, 170, 170));
}

.topnav .hmbmenu {
    grid-area: hmb;
}

.topnav .hmbmenu i {
    font-size: 2em;
    color: gray!important;
    color: var(--green)!important;
    padding:calc(var(--pad)/2) calc(var(--pad)*3/4);
    width: auto;
}

.topnav .hmbmenu a {
    text-decoration: none;
}


.topnav .logo {
    grid-area: logo;
}

.topnav .social {
    grid-area: social;
    font-size: 2em;
}

.topnav .social a {
    color: var(--nav);
}

.topnav .searchBar {
    margin-bottom: 0;
}

.searchBar {margin-bottom: 20px; display: flex;}

.searchBar form {
    grid-area: search;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
  
.searchQueryInput {
    width: 100%;
    height: 2.8rem;
    background: #f5f5f5;
    outline: none;
    border: none;
    border-radius: 1.625rem;
    padding: 0 3.5rem 0 1.5rem;
    font-size: 1rem;
}
  
.searchQuerySubmit {
    width: 3.5rem;
    height: 2.8rem;
    margin-left: -3.5rem;
    background: none;
    border: none;
    outline: none;
}
  
.searchQuerySubmit:hover {
    cursor: pointer;
}


.topnav {
    grid-area: header;
    display: grid;
    align-items: center;
    ox-shadow: rgba(0, 0, 0, 0.25) 0px 20px 10px -20px;
}


nav {
	grid-area: smenu;
    display: block;    
    border-radius: 100px;
}

nav > ul {
	padding: 0 calc(var(--pad)/2) 0 calc(var(--pad)*3/2);
    margin: 0;
	list-style: none;
	position: relative;
	background-color:var(--nav);    
    display: block;
    margin-top: -10px;
    border-radius: 3px;
	}
	
nav li {
	display:inline-block;
	background-color:var(--nav);
    list-style: none;
	}

nav a {
	display:inline-block;
	padding:0 10px;	
	color:#fff;
	line-height: 60px;
	text-decoration:none;
}

nav a:hover {
    color:#fff;
}

/* Hide Dropdowns by Default */
nav li .dropdown-menu {

    display: none; 
    padding: 10px 10px 10px 30px;
	position: absolute; 
	top: 60px; /* the height of the main nav */
    left: 0%;
    width: 100%;
    background-color:var(--nav);
    max-height: 45vh;   
    overflow-y: auto;
    border-bottom: 20px solid var(--nav);
    border-top: 10px solid var(--nav);
}

nav li .dropdown-menu::-webkit-scrollbar-track
{
	border-radius: 0px;
	background-color: var(--nav);
}

nav li .dropdown-menu::-webkit-scrollbar
{
	width: 12px;
	background-color: var(--nav);
}

nav li .dropdown-menu::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: var(--light-nav);
}


/*
nav li .dropdown-menu::-webkit-scrollbar {
    display: none;
}
*/
nav ul ul a {
	line-height: 40px;
}


nav li a:hover, nav li a.dropdown-toggle.active, nav li a.sel {
    background-color:var(--light-nav);
}

/* Display Dropdowns on Hover */
/*
nav ul li:hover > ul {
	display:flex;
    flex-wrap: wrap;
}
*/

/* Fisrt Tier Dropdown */
nav ul ul li {
	position: relative;
}

/* Change this in order to change the Dropdown symbol */
nav li > a:after { content:  ' +'; }
nav li > a:only-child:after { content: ''; }




p {
    padding: 0px;
    margin: 0px 0px 16px 0px;
    line-height: 150%;
    font-family: "Roboto", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
    margin:0px;
    padding: 0px;
    margin-bottom: 10px;
    line-height: 120%;
}

h1 { /* block header */
    position: relative;
    padding:15px 20px 10px 40px;
    max-width: 100%;
    font-weight: 300;
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 0px;
    text-transform: uppercase;    
}

h1 + div {margin-top: 10px!important;}

.wrapper > h1 {
    padding:30px 0px 0px 0px;
}

.wrapper:first-child > h1 {
    padding:0px 0px 0px 0px;
}


h2 { /* article header */    
    font-size: 1.3rem;
    font-weight: 700;
}




h3 {
    font-size: 1.1rem;
}

h4 {
    font-size: 1.1rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 1rem;
}


a {
    color: #000;
    text-decoration: none;
}


a:hover {
    text-decoration: underline;
    color: #000;
}    

.body-box {
    background-color: var(--gray); 
    background-color:#f5f5f5;   
    padding-top: 140px;
    grid-area: bodybox;    
}


.body-box .wrapper {    
    padding:30px 0px 0 0px;
}


.article {
    position: relative;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    justify-items: start;
    align-content: flex-start;
}

.wrapper > .article, .extras .item > .article {
    position: relative;
    background-color: #fff;
    padding:20px 40px;
    padding:20px 40px 10px 40px;
    max-width: 100%;
    margin-bottom:20px;   
}


.article .card {
    padding: 15px 20px 15px 20px;
}


.tags {
    display: inline-table;
    margin: 0;        
}

.tags a {
    background-color: var(--gray);
    background-color: #f5f5f5;
    display: block;
    float: left;
    color: var(--dark-gray);
    padding:5px 11px;
    text-decoration: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 7px;    
    font-size: 0.85rem;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    margin: 0 3px 2px 0; 
}

.tags a.selected {
    background-color: var(--dark-gray);
    color: #fff;
} 


.tags .tag-green {
    background-color: var(--green);
}

.tags  .tag-blue {
    background-color: var(--blue);
}


.article .container-image .tags {          
    display: none;
}


.article .card > .tags {          
    display: inline-table;
}


.article .card > .tags > div {
    display: inline;
    position: relative!important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;    
}


.article .card > .tags a {
    box-shadow: none;
    padding: 4px 8px;
}


.container-image{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width:100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    height:500px;
    margin-bottom: 0px;
    ox-shadow: rgba(0, 0, 0, 0.14) 0px 1px 3px inset;
    border-radius: 3px;
}

.container-image::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);    
}

.container-image img {
    position: relative;
    max-width: 100%;
    max-height:500px;
    opacity: 0;
}

/*
.container-image .tags {
    flex-wrap: wrap;
    display: flex;
    gap: 70px;
}
*/
.container-image  .t-top-r {
	position: absolute;
    flex-wrap: wrap;
    display: flex;
    /*gap: 2px 7px;*/
    right: 7px;
	top: 7px;
}

.container-image  .t-top-l {
	position: absolute;
    flex-wrap: wrap;
    display: flex;
    /*gap: 2px 7px;*/

    left: 7px;
	top: 7px;
}

.container-image  .t-bot-r {
	position: absolute;
    flex-wrap: wrap;
    display: flex;
    /*gap: 2px 7px;*/

    right: 7px;
	bottom: 7px;
}

.container-image  .t-bot-l {
	position: absolute;
    flex-wrap: wrap;
    display: flex;
    /*gap: 2px 7px;*/

    left: 7px;
	bottom: 7px;
}

.container-image .tags a {
    color:#fff;
}






.article-header > .tags {
    display: inline-block;
}


.article-header > .tags div {
    display: inline-block;
    position: relative!important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}


.article-header > .tags a {
    box-shadow: none;
    padding: 4px 8px;
}


.article-header .tags {
    position: relative;
    margin-bottom: 20px;
    
}


.article-header > .tags .tag-green, .article .card > .tags .tag-green {
    color: var(--green);
    background-color: var(--gray);
    background-color: #f5f5f5;
    
}

.article-header > .tags .tag-blue, .article .card > .tags .tag-blue {
    color: var(--blue);
    background-color: var(--gray);
    background-color: #f5f5f5;
}

.article-attr {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding:0;
    margin:0;
    margin-bottom: 10px;
    align-items: center;
}


.article-attr * {
    padding:0;
    margin:0;
    font-size: 0.85rem!important;
    color: rgba(0, 0, 0, 0.84);
}

.article-content h2, .article-content h3, .article-content .text {
    flex: none;
    width: 100%;
}



.article-attr .author, .article-attr .time {
    padding:0;
    line-height: normal;
}


.article-attr .author {
    font-weight: 600;
}

.article-attr .author::before {
    content: "\2022\00A0\00A0";
}


.tot {
    font-weight: 700;
    color: var(--dark-gray);
}



.set-articles {
    position: relative;
    background-color: #fff;
    background-color: inherit;
    padding:20px 40px 0px 40px;
    padding:0px;
    max-width: 100%;
    display: grid;
    column-gap: 30px;
    row-gap: 30px;    
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    margin-bottom:20px;   
}


.set-articles .container-image, .set-articles .container-image img {
    height: 350px!important;
}

/*
.set-articles .article {
    grid-column: span 2;    
}
*/

.set-articles .article:first-child {
    grid-column: 1 / span 2;    
    flex-direction: row;
    gap: 0px;
    align-items: stretch;

}

/*
.set-articles .article:nth-child(2),  .set-articles .article:nth-child(3) {
    grid-column: span 3;    

}
*/

.set-articles .article:first-child .container-image {
    flex: 2.9; 
}

.set-articles .article:first-child .card {
    flex: 1.1;
    padding: 30px;
}


.set-articles .article:first-child h2 {
    font-size: 1.8rem;
}

.set-articles .article:first-child p {
    font-size: 1.1rem;
}

/*
.set-articles .article:nth-child(2) h2,  .set-articles .article:nth-child(3) h2 {
    font-size: 1.5rem;
}

.set-articles .article:nth-child(2) p,  .set-articles .article:nth-child(3) p  {
    font-size: 1.1rem;
}
*/

.set-articles  .article:first-child .container-image {
    height: auto !important;
    max-height: 510px;
}

.set-articles  .article:first-child  .container-image img {
    height: auto !important;
    max-height:510px;
}

/*
.set-articles  .article:nth-child(2) .container-image, .set-articles  .article:nth-child(3) .container-image  {
    height: 400px !important;
    max-height: 400px;
}

.set-articles  .article:nth-child(2) .container-image img, .set-articles  .article:nth-child(3) .container-image  img {
    height: 400px !important;
    max-height:400px;
}
*/

.set-articles .card .tags, .set-articles .tot  {display: none;}
.set-articles .container-image .tags {display: inline-table;}


.set-articles .article {margin-bottom: 0px;}


.set-articles + .footer-with-link {
    background-color: inherit;
}


.set-two {
    position: relative;
    background-color: #fff;
    padding:20px 40px 0px 40px;
    background-color: inherit;
    padding:0px;
    max-width: 100%;
    display: grid;
    column-gap: 20px;
    row-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom:0px;   
}


.set-two .container-image  {
height: 250px !important;
}

.set-two .container-image .tags, .set-two .tot {display: none;}



.set-news {
    position: relative;
    background-color: #fff;
    padding: 20px 40px 10px 40px;
    padding: 0px;
    background-color: inherit;
    padding:20px 0px 0px 0px;    
    max-width: 100%;
    column-gap: 20px;
    row-gap: 10px;
    margin-bottom:0px;
    column-count:3; 
}


.set-news .article {
    break-inside: avoid;
}


.set-news .container-image {
    height:auto;
}


.set-news  .article  .container-image img {
    height:200px;
    opacity: 0;
}

.set-news  .article  .container-image::before {
    background-color: rgba(43, 43, 43, 0);
    backdrop-filter: none; 
}


.set-news .text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.set-news .container-image .tags, .set-news .tot {display: none;}






.list-news {
    max-width: 100%;
    display: flex;
    gap: 0px;
    flex-direction: column;
    margin-bottom:0px;
}

.list-news h3, .list-news .text, .list-news .tot {
display: none;
}

.list-news .article-content p {
    display: none;
}

.list-news .article-content h2 {
    font-weight: 600;
}

.list-news .article {    
    display: flex;
    align-items: flex-start;
    flex-direction: row;    
    padding: 20px;
    gap: 20px;  
    border-bottom: 1px solid var(--gray);
    
}


.list-news .container-image {
    height: 130px!important;
    width: 200px;
    overflow: hidden;
    box-shadow: none;  
    flex-basis: 200px;    
}


.list-news .card {
    flex: 1;
    padding: 0px;
}

.list-news .article .article-attr {
    margin: 0;
    padding:0;
    margin-right:10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

}


.list-news .article-content {
    flex: none;
    width: 100%;
}


.list-news h2 {
    ont-weight: 400;
    argin-top: -2px;
}


.list-news.textplus .article-content p {
    display: block;
}

/*
.textplus .tot {
    display: inline-block;   
}
*/



.textblock {
    background-color: #fff;
    padding:20px 40px;
    margin-bottom:1px;   
}


.altmenu {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top:30px;
}

.altmenu .sel {
    font-weight: 700;
}


.article-content a, 
.article-body a, 
.footer-with-link a{
    color: #000;    
}

.article-content a:hover {
    color: #000;    
}



.footer-with-link a:hover {
    color: var(--dark-gray);    
}

.article-body a {
    color: var(--dark-nav);    
}

.article-body a:hover {
    color: var(--light-nav);    
}



.article-content h2 a:hover {
    text-decoration: underline;
    color:#000;
}




article {
    background-color: #fff;
    padding:40px;
    margin-bottom:1px;   
    
}

article .container-image {
    height:auto;
    margin: 20px 0 20px 0;        
    align-items: center;
    justify-content: start;
    flex-direction: column;  
    box-shadow: none;  
}

article .container-image {
    background: inherit!important;
}

article .article-header .container-image {
    margin: 0px;    
    margin-bottom: 15px;
}

article .container-image img {
    height:auto;
    max-height: 600px;
    opacity: 1;
}

article .textimg {
    margin-top: 10px;
    padding-top:5px;
    width: 100%;
    font-size: 0.85rem;
    opacity: 0.8;    
    display: flex;
    gap: 7px;
    border-top: 1px solid #c8c8c6;
}


article .textimg::before {
display: block;
content: "";
background-image: url('../icons/photo_camera_16dp_C8C8C6_FILL0_wght400_GRAD0_opsz20.svg');
background-size: 20px 20px;
height: 20px;
width: 20px;
}

.textimg:empty {
    display: none;
}

article h4, article h3 {
    font-size:1.3rem;
    line-height: 160%;
    font-weight: 700;
}

article h5, article h6 {
    font-size:1.2rem;
    line-height: 150%;
    font-weight: 600;
}


blockquote {
    font-size: 1.1rem;
    line-height: 160%;
    padding:20px 20px 20px 90px;
    border-top: 1px solid var(--green);
    margin:40px 0px 40px 20px;
    background: url("../img/quote.png");
    background-repeat:no-repeat;
    background-position: 10px 10px;
}

blockquote.sbl {
    padding:20px 20px 20px 40px;
    background: none;
}

blockquote.sbl::before {
    content: "";
}

.article-footer {
    background-color: #fff;
    padding:20px 40px;
    margin-bottom:0px;   
}

.article-footer .share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

article h2 {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 20px;
}



.extras {
    display: flex;
    gap: 20px;
    max-width: 100%;
    align-items: stretch;
    justify-content: space-between;
    margin:0 0 30px 0;    
}

/*
.extras .item {
    display: grid;
    grid-template-rows: min-content 1fr min-content;   
}
*/

.extras.background .item, .extras .item.background {
    background-color: #fff;
}

.extras.twix .item {
    width: calc(100% / 2 - 13px);
    flex: none;
}


.extras .article {
    padding: 0px !important;;
}


.extras.tat {
    align-items: flex-start;
}


.extras.tat .item:last-child {
    width: 300px;
    flex: none;
    position: sticky;
    top: 70px;
    padding-top: 20px;
}


.extras.tat .item:last-child .article{
    max-height: 75vh;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */   
}

.extras.tat .item:last-child .article::-webkit-scrollbar {
    display: none;
}


.extras .list-news .tags {
    display: none;
}

.extras .item>h3 {
    position: relative;
    ackground-color: #fff;
    padding:20px 0px;
    max-width: 100%;
    margin-bottom:0px;   
}


.footer-with-link {
    position: relative;
    background-color: inherit;
    text-align: center;
    padding:20px 40px;
    max-width: 100%;
    margin-bottom:20px;   
    margin-top:1px;
    border-bottom: 1px solid var(--gray);
}

body .footer-with-link:last-child {
    border-bottom: 0px solid var(--gray);
}


.footer-with-link > a {
    background-color: var(--green);
    color:#fff;
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 3px;
}

.footer-with-link >  a:hover {
    color:#fff;
    text-decoration: none;
}


/*
.footer-with-link > a::before {
    content: '\2023\00A0\00A0';    
    font-size: large;

}
*/
.paginator {
    display: flex;
    justify-content:space-between;
    align-items: baseline;
    gap: 1px;
    flex-wrap: wrap;
    color: var(--dark-gray);
}

.paginator > div {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 1px;
    flex-wrap: wrap;
}

.paginator a {
    color: black;
    text-decoration: none;
}

.paginator .button {
    padding:6px 10px 5px 10px;  
    border: 1px solid inherit;
    text-decoration: none;
    color: black;
    font-family: sans-serif;
    border-radius: 3px;
}

.paginator .button:hover {
    background-color: #fff;
    border: 1px solid var(--gray);
} 


.paginator .button.back:before {
content: "\27F5  ";
font-family: sans-serif;
}

.paginator .button.next:after {
    content: " \27F6";
    font-family: sans-serif;
}

.paginator .button.sel {
    border: 1px solid var(--gray);
    background-color: #fff;
    border-radius: 3px;
    color: var(--dark-gray);
    cursor:auto;
}

.paginator .button.sel {
    border: 1px solid var(--gray);
    border-radius: 3px;
    color: var(--dark-gray);
    cursor:auto;
}




article .photoshow {
	margin: 20px auto 40px auto;
	width: 100%;    
}
		

/* Slideshow container */
article .slideshow-container {
	height: auto;
	margin: 0px auto 0px auto;
	width:100%;
	position: relative;
}

/* Hide the images by default */
article  .mySlides {
	display: none;
    flex-direction: column;    
    align-items: stretch;
    gap: 7px;    
}

article .mySlides img {
    max-height: 500px;
    max-width: 100%;
    position: relative;
    margin:0 auto;
}

/* Next & previous buttons */
article .prev, article .next {
	border-radius: 3px;
    border: 0px;
	cursor: pointer;
	font-weight: bold;
	font-size: 18px;
	margin-top: -22px;
	padding: 16px;
	position: absolute;
	top: calc(50% - 40px);
	transition: 0.6s ease;
	user-select: none;
	width: auto;
    background-color: inherit;
    opacity: .3;
}

/* Position the "next button" to the right */
.photoshow  .next {
	right: 0;	
}

/* On hover, add a black background color with a little bit see-through */
.slideshow-container:hover .prev, .slideshow-container:hover .next   {
    background-color: var(--light-nav);
    opacity: 1;
    color:#fff;
}

/*
.slideshow-container .prev:hover, .slideshow-container .next:hover {
	background-color:  var(--light-nav);
    color:#fff;
    opacity: 1;
}
*/

/* Caption text */
/*
article .slideshow-container .textimg {
	margin-bottom: 5px;
}
/*
/* Number text (1/3 etc) */
/*
article  .numbertext {
	font-size: 12px;
}
*/

/* The dots/bullets/indicators */

.photoshow .preview-container {
    display: flex;
    gap:7px;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}


.photoshow  .dot {
    background-color: var(--nav);
	border-radius: 50%;
	cursor: pointer;    
    width: 25px;
    height: 25px;
    color: #fff;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.1s ease;
    padding: 3px 0 0 0;
    margin: 0;
    line-height: normal;
    text-align: center;
    font-size: 0.8rem;
}

.photoshow .active, .photoshow .dot:hover {
	background-color: var(--light-nav);
}



#fullpage {
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-color: black;    
    border:20px solid black;
}


.off-scroll{
  overflow: hidden;
  touch-action: none;
}


/* scale rules*/
    /*normal width*/




header .topnav {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
    "logo search social"
    "smenu smenu smenu";
    column-gap:40px;
    row-gap: 20px;
}

.topnav .hmbmenu, .topnav .hmbmenu .fa-xmark {
    display: none;
}


footer {    
    color: var(--dark-gray);
    padding: 0px;
    grid-area: footer;   
}

footer a {
    color: var(--dark-gray);
    text-decoration: none;
}

footer a:hover {
    color: var(--dark-gray);
}

footer .wrapper {
    display: flex;
    flex-wrap: wrap;    
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px 20px;
    padding:7px 0 7px 0;

}


footer p {
    line-height: normal;
}

footer .level1 {
    background-color: var(--graym);
    padding: 20px 0px;    
}

footer .level1 div div {
    padding-right:20px;
}

footer .level2 {
    background-color: var(--grayl);    
}

footer .level2 p {
    margin: 0;
    padding: 0;
}

footer .level3 {    
    background-color: var(--dark-gray); 
}

footer .level3 p {
    font-size: 0.8rem;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    opacity: 0.4;
    color: #fff;
}


.message {
    background-color: #fff;
    display: block;
    position: relative;
    border-radius: 10px 5px 20px 5px;    
    border: 3px solid var(--light-nav);    
    text-decoration: none;   
    padding:20px;    
    margin: 0;
}


.message i {
    font-size: 2em;
    color:#fff;
}

.message span {
    display: block;
    position: absolute;
    background-color: var(--light-nav);
    padding: 10px 5px 8px 7px;
    bottom:0;
    right:0;
    border-radius: 20px 0px 10px 0px;
}

.message a {
    text-decoration: none;
}


@media screen and (max-width: 1230px) {

.body-box .wrapper {
    padding: 20px 10px 0px 10px;
}

.header .wrapper {
    padding:5px 0px 0px 0px;
}

.scroll-down .header {
	transform: translate3d(0, -100%, 0);    
}

.topnav .logo {padding-left:20px;}
.topnav .social {padding-right: 20px;}

h1 {
    padding: 20px;
}

.wrapper > h1 {
    padding:0px 10px 10px 0px;
}


.set-articles, .set-news, .set-two, .list-news, .article-footer, .extras .item > .article {
    padding:0px; 
}

article, .textblock, .footer-with-link {
    padding:20px 15px;  
}

footer .wrapper {
    padding-left: 20px!important;
    padding-right: 20px!important; 
}


}


@media screen and (max-width: 1000px) {

        
    .set-articles, .set-news, .set-two, .extras {
        display: flex;
        flex-direction: column;
    }


    .container-image, .container-image img {
        height: auto!important;
        max-height: 450px!important;

    }   


    .set-articles .container-image, .set-articles .container-image img {
        height: auto!important;
        max-height: 450px!important;

    }   

    .set-two .container-image, .set-two .container-image img {
        height: auto!important;
        max-height: 450px!important;

    }
    

    
    .set-articles  .article:first-child .container-image {
        height: auto !important;
        max-height: 450px;
    }

    .set-articles  .article:first-child  .container-image img {
        height: auto !important;
        max-height:450px;
    }

    .set-articles .article:first-child {
        grid-column: 1 / span 1;    
        flex-direction: column;
        gap: 0px;
        align-items: stretch;
    }


    .extras {
        flex-direction:  column-reverse;
    }

    .extras .item {
        flex: none;
        width: 100%!important;
    }

    .extras.tat .item:last-child {
        order: -1!important;
        position: relative;
        top: 0 !important;
    }
   

    article .container-image img {
        height: auto!important;
        max-height: 50  0px!important;        
    }   
    
    
    article .container-image {
        height: auto!important;
        max-height: 100%!important;        
    }   

}    



@media screen and (max-width: 700px) {

    

    header {
        height:80px;
    }

    .header .wrapper {
        padding:0px;
    }
    
    nav > ul, nav > ul li {
        display: block!important;
        position: relative!important;
        padding: top 0px !important;
    }


    nav > ul > li {
        border-bottom: 1px solid var(--light-nav);
    }


    nav a {
        line-height: 40px;
        display: block;
    }

    nav li .dropdown-menu {
        margin-top:0px; 
        top:0px;
        position: relative;
        max-height: 45vh;   
        overflow-y: auto;
    }

    nav ul ul li {
        display: inline-block!important;
    }


    .scroll-down .header {
        transform: translate3d(0, -100%, 0);    
    }

    
    .body-box {
        padding-top:90px;
    }

    header .topnav {
        grid-template-columns: 1fr auto;
        grid-template-areas:
        "logo hmb";
        width: 100%;
        position: relative;
        background-color: #fff;
        padding:10px 20px;        
    }    

    .topnav .logo {
        padding: 0px;
    }

    .topnav .hmbmenu {
      display: block;      
    }

    .topnav .searchBar, .topnav .smenu, .topnav .social, .topnav nav {
        display: none;
    }

   
    header .topnav.responsive {
        grid-template-columns: 1fr auto;
        grid-template-areas:
        "logo hmb"
        "search search"
        "smenu smenu"
        "social social";      
        border-right: 3px solid var(--nav);
        border-bottom: 3px solid var(--nav);
   
    }

    .topnav.responsive .smenu, .topnav.responsive .social, .topnav.responsive .hmbmenu .fa-xmark,  .topnav.responsive nav {
        display: block;
    }

    .topnav.responsive .searchBar {
        display: flex;
    }

    .topnav.responsive .hmbmenu .fa-bars{
        display: none;
    }


    
    .container-image, .container-image img {
        height: auto!important;
        max-height: 300px!important;

    }   


    .set-articles .container-image, .set-articles .container-image img {
        height: auto!important;
        max-height: 300px!important;

    }   

    .set-two .container-image, .set-two .container-image img {
        height: auto!important;
        max-height: 300px!important;

    }  

    article .container-image img, article .container-image {
        height: auto!important;
        max-height: 100%!important;        
    }   

    .list-news .container-image {
        height: 90px!important;
        width: 120px;
        overflow: hidden;
        box-shadow: none;  
        flex-basis: 120px;    
    }

}