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

a {
text-decoration: none;
}

ul {
list-style: none;
}

body {
font-family: 'Arial';
background-color: #e9e9e9;
}

html {
scroll-behavior: smooth;
scroll-timeline: --page-scroll block;
}

@keyframes grow-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

#progress {
	position: fixed;
	left: 0; top: 0;
	width: 100%; height: 1em;
	background: #f8a11c;

	transform-origin: 0 50%;
	animation: grow-progress auto linear;
	animation-timeline: --page-scroll;
}

:root {
--grey: #657785;
--darkblue: #3b5a6f;
--yellow: #f8a11c;
--white: #ffffff;
--brown: #5d5548;
--darkbrown: #4b3e36;
--sand: #d8b98d;
}

.btn {
text-transform: uppercase;
}


.cawi {
max-width: 1200px;
background-color: transparent;
margin: 0 auto;
padding: 0;
overflow: hidden; 
border: 0;
}


.cawi-left {
width: 48%;
float: left;
border: 0;
margin-top: 7px;
margin-bottom: 7px;
}

.cawi-right {
width: 48%;
float: right;
border: 0;
padding-top: 30px;
text-align: right;
}

.cawi-left  img {max-width: 100%; }


@media screen and (max-width: 600px) {
.cawi-left, .cawi-right {
width: 100%;
height: 110px;
text-align: center;
vertical-align: middle;
}
}


a.cawi {color: var(--white); text-decoration: none;  font-size: 20pt; text-transform: uppercase; background-color: var(--darkblue); padding: 10px;}

a:hover.cawi {background-color: var(--grey);}




.hdr {
width: 100%;
height: 350px;
margin: 0 auto;
padding: 0;
overflow: hidden; 
background-color: var(--grey);
text-align: center;
position: relative; 
}


.hdr img {
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  }

@media screen and (max-width: 600px) {
  .hdr {
    height: 200px;
  }
  }



.container-hdr {
max-width: 1200px;
margin: 0 auto;
padding: 0;
overflow: hidden; 
}


.topnav {
overflow: hidden;
background-color: var(--darkblue);
}

.topnav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 19px;
transition: 0.5s;
}

.topnav a.lan {
float: right;
display: block;
background-color: var(--lightblue);
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 19px;
}


.topnav a:hover.lan {
background-color:  var(--brown);
}

.active {
background-color: var(--yellow);
color: #fff;
}

.topnav .icon {
display: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 19px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
margin: 0;
transition: 0.5s;
}

.dropbtn-active {
font-size: 19px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: var(--yellow);
margin: 0;
}

.dropdown-content {
display: none;
position: absolute;
background-color: var(--sand);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: var(--darkbrown);
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 19px;
}

.topnav a:hover, .dropdown:hover .dropbtn {
background-color: var(--yellow);
color: var(--white);
}

.dropdown-content a:hover {
background-color: var(--darkbrown);
color: var(--white);
}

.dropdown:hover .dropdown-content {
display: block;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}



h1 {font-size: 25pt; color: var(--brown); text-align: center; padding-left: 10px; line-height: 1.3em; margin-top: 20px; margin-bottom: 20px;}

h1.rec {font-size: 25pt; background-color: var(--grey); color: var(--white); text-align: center; padding: 10px; line-height: 1.3em; margin-top: 20px; margin-bottom: 10px;}

h2 {font-size: 20pt; color: var(--darkblue); text-align: center; font-weight: bold; padding-left: 10px; padding-right: 10px;  line-height: 1.3em; margin-top: 25px; margin-bottom: 15px; display:block; border-bottom: 1px var(--tide) solid;}

h3 {font-size: 18pt; color: var(--darkbrown); text-align: left; font-weight: bold; padding-left: 10px; padding-right: 10px; line-height: 1.3em; margin-top: 7px; margin-bottom: 7px;}

main {
max-width: 1200px;
margin: 0 auto;
padding: 0;
overflow: hidden; 
}


.text {max-width: 1200px; text-align: left; overflow:hidden; background: transparent; margin-top: 10px; margin-bottom: 10px; }

.text p {font-size: 15pt; color: #000; text-align: left; padding-left: 20px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text ul {font-size: 15pt; color: #000; text-align: left; list-style-type: disc; padding-left: 50px; line-height: 1.3em; margin-bottom: 7px;}

.text ol {font-size: 15pt; color: #000; text-align: left; padding-left: 50px; line-height: 1.3em; margin-bottom: 7px;}


.text p.txt1 {font-size: 15pt; color: #000; text-align: left; padding-left: 50px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text p.txt2 {font-size: 15pt; color: #000; text-align: left; padding-left: 70px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text p.txt3 {font-size: 15pt; color: #000; text-align: left; padding-left: 90px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text p.center {font-size: 15pt; color: #000; text-align: center; line-height: 3em; margin-bottom: 15px;}


.text img {max-width: 100%; }


a.tt1 {color: #000; text-decoration: none;  font-size: 15pt;}
a:hover.tt1 {color: var(--darkblue); text-decoration: underline;}

a.tt2 {color: var(--darkblue); text-decoration: none;  font-size: 17pt;}
a:hover.tt2 {color: var(--grey); text-decoration: underline;}


a.m {color: #000; text-decoration: underline; font-family: arial; font-size: 15pt;}
a:hover.m {text-decoration: none;}

a.ll {color: var(--blue); text-decoration: none; font-family: arial; font-size: 15pt; border-bottom: 1px var(--blue) solid;  border-top: 1px var(--darkblue) solid; }
a:hover.ll {border-bottom: 0;border-top: 0; }

a.l-center {color: #4c362a; text-decoration: underline; font-family: arial; font-size: 13pt;}
a:hover.l-center {color: var(--brown); text-decoration: none;}

a.alv {
font-size: 19px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: var(--yellow);
margin: 0;
transition: 0.5s;
}

a:hover.alv {
background-color: var(--darkblue);
}


.raw {max-width: 1200px; overflow: hidden; background: transparent; margin-bottom: 5px; }

.raw1 {max-width: 1200px; overflow: hidden; background: transparent; margin-bottom: 2px; }


.cell-l { 
float: left;
width: 48%;
height: 400px;
background: url('../i/melio.png') center no-repeat; 
}

.cell-r {
float: right;
width: 48%;
height: 400px;
background: url('../i/desert.png') center no-repeat; 
}


.cell-l1 { 
float: left;
width: 48%;
height: 400px;
background: url('../i/report.png') var(--white) center no-repeat; 
}

.cell-r1 {
float: right;
width: 48%;
height: 400px;
background: url('../i/docs.png') center no-repeat; 
}


@media screen and (max-width: 600px) {
.cell-l,.cell-l1, .cell-r, .cell-r1 { 
width: 100%;
text-align: center;
margin-bottom: 10px;
}
}


.celltext {max-width: 580px; overflow:hidden; text-align: center; vertical-text-align: middle; margin-top: 100px; z-index: 100;}

.celltext p {
font-size: 30pt; 
font-style: normal; 
color: var(--white); 
font-weight: bold; 
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}


/* Footer */


footer {
max-width: 100%;
background-color: var(--darkblue);
margin-top: 5px;
overflow: hidden; 
border-top: 8px  var(--yellow) solid;
}

.container-ft {
max-width: 1200px;
margin: 0 auto;
padding: 15px 0;
overflow: hidden; 
 }
 
.f-left { 
float: left;
width: 50%;
text-align: right;
padding-left: 20px;
padding-right: 50px;
}

.f-left p {
font-size: 15px;
font-style: normal;
color: var(--white);
margin-top: 10px;
}

.f-left p span {
font-size: 15px;
font-style: normal;
color: var(--white);
line-height: 1.3em; 
margin-bottom: 7px;
}

.f-left a {
font-size: 15px;
font-style: normal;
color: var(--white);
margin-bottom: 7px;
text-decoration: none;
padding-left: 10px;
}

.f-left a:hover {
text-decoration: underline;
}

.f-left a span {
font-size: 10px;
font-style: normal;
color: var(--white);
line-height: 1.3em; 
margin-bottom: 7px;
}

.f-right {
float: right;
width: 50%;
text-align: left;
}

.f-right p {
font-size: 16px;
font-style: normal;
color: var(--white);
line-height: 1.4em; 
margin-bottom: 7px;
}

.f-right a {
font-size: 16px;
font-style: normal;
color: var(--white);
text-decoration: none;
}

.f-right a:hover {
 text-decoration: underline;
}

@media screen and (max-width: 600px) {
.f-left, .f-right { 
width: 100%;
padding-left: 20px;
padding-right: 20px;
text-align: center;
margin-bottom: 50px;
}
.f-left p {
font-size: 13px;
}
.f-left a {
font-size: 13px;
}
}

.footer_h4 {
font-size: 20px;
font-style: normal;
font-weight: bold;
color: var(--white);
margin-bottom: 7px;
margin-top: 10px;
}










.collapsible {
  background-color: var(--darkblue);
  color: var(--white); 
  font-size: 30px; 
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
border-bottom: 2px solid var(--white);
margin-top: 10px;
 }

.active-yb, .collapsible:hover {
background-color:var(--grey);
}

.content {
  padding: 10px;
  display: none;
  overflow: hidden;
  background-color: transparent;
}



.column33 {   
float: left;
width: 33%;
height: 250px;
padding: 10px;
background-color: var(--yellow);
border: 2px solid var(--white);
display: flex;
justify-content: center;
text-align: center;
align-items: center;
border-radius: 10px;
}

.column33:hover {
background-color: var(--grey);
transition: background-color 0.5s;
}

.text2 {
 display: none;
}

.column33:hover .text1 {
 display: none;
}

.column33:hover .text2 {
display: block;
}



.column33-1 {   
float: left;
width: 33%;
height: 350px;
padding: 10px;
}

.column33 img { 
max-width: 100%;
height: auto;
}


@media screen and (max-width: 600px) {
.column33, .column33-1 {
width: 100%;
height: 250px;
padding: 20px;
  }
}



a.c33  {
font-size: 26pt; 
color: var(--white); 
font-weight: bold; 
}

a.c33 span {
font-size: 18pt; 
color: var(--white); 
}


a.c32 {
font-size: 18pt; 
color: var(--white); 
text-decoration: none;
}


a:hover.c32 {
text-decoration: underline;
}



.pub-left { 
float: left;
width: 30%;
padding: 5px;
text-align: center;
}

.pub-right {
float: left;
width: 65%;
padding: 5px;
}


.pub-left img { 
max-width: 100%;
height: auto;
}

.pub-right img { 
max-width: 100%;
height: auto;
}


.pub-right p {font-size: 15pt; color: #000; line-height: 1.4em; margin-bottom: 15px; text-align: left;}

@media screen and (max-width: 600px) {
.pub-left, .pub-right {
width: 100%;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}

.pub-right p {text-align: center;}
}
}