* {
  margin : 0; padding : 0; border : 0;
  }

html {
  margin : 0; padding : 0;
  }

html {
  scroll-behavior : smooth;
  }

body {
  margin : 0; padding : 0;
  overflow-x : hidden;
  font-family : Arial, Verdana, Sans-Serif;
  background : url('__assets/pics/backg/main-background.png') 0px -150px no-repeat fixed;
  background-size : cover;
  }
.container {
  width : 98%;
  padding : 1%;
  }
.first-row {
  width : 100%;
  }
.logo {
  width : 30%;
  padding : 20px;
  }
.logo img {                                   
  width : 400px;
  height : 400px;
  margin : 20px 50px 20px 0;
  float : left;
  }
.header {
  padding : 20px;
  padding-top : 120px;
  float : left
  }
h1 {
  font-weight : 600;
  font-size : 1.5vmax;
  color : #000042;
  }
h2 {
  font-weight : 600;
  font-size : 3vmax;
  color : #000042;
  }
h3 {
  font-weight : 600;
  font-size : 1.8vmax;
  color : #000042;
  }
p {
  margin-top : 1em;
  font-weight : 300;
  font-size : 1.2vmax;
  color : #290000;
  text-align : justify;
  }

a:link,
a:visited {
  color : #006EDC;
  text-decoration : none;
  border-bottom : 1px dashed #006EDC;
  -webkit-transition : all 1s ease;
  transition : all 1s ease;
  }
a:hover,
a:focus {
  color : #950000;
  border-bottom : 1px solid #950000;
  -webkit-transition : all 1s ease;
  transition : all 1s ease;
  }

.small {
  font-size : 0.9vmax;
  }
.main-color {
  color : #FFF6EC;
  }

ul {
  list-style-type : circle;
  list-style-position : inside;
  list-style-image : none;
  }
li {
  font-weight : 300;
  font-size : 1.2vmax;
  color : #290000;
  }

@media (min-width : 600px) {
  #position {
    width : 100%;
    padding : 0.5%;
    font-weight : 200;
    font-size : 0.7vmax;
    text-align : left;
    color : #D2E8FF;
    background : #002A55;
    float : left;
    }
  }
@media (max-width : 599px) {
  #position {
    display : none;
    visibility : hidden;
    }
  }

#intro {
  width : 100%;
  font-weight : 600;
  font-size : 3.5vmax;
  color : #7A0000;
  text-shadow: 
    1px 0px 1px #ccc, 0px 1px 1px #eee, 
    2px 1px 1px #ccc, 1px 2px 1px #eee,
    3px 2px 1px #ccc, 2px 3px 1px #eee,
    4px 3px 1px #ccc, 3px 4px 1px #eee,
    5px 4px 1px #ccc, 4px 5px 1px #eee,
    6px 5px 1px #ccc, 5px 6px 1px #eee,
    7px 6px 1px #ccc;
  display : block;
  }

/* SONAR MENU */

ul.sonarmenu {
  list-style : none;
  margin-top : 50px;
  }
ul.sonarmenu li {
  display : inline-block;
  }
ul.sonarmenu a:link,
ul.sonarmenu a:visited {
  position : relative;
  display : inline-block;
  font-family : 'Arial Black', Verdana, Sans-Serif;
  font-weight : 600;
  font-size : 1.2vmax;
  color : #003366;
  width : 18vw;
  text-decoration : none;
  text-align : center;
  margin-right : 2em;
  text-transform : uppercase;
  letter-spacing : 1px;
  border-top : 1px dotted #290544;
  border-bottom : 1px dotted #290544;
  }
ul.sonarmenu a:hover,
ul.sonarmenu a:focus {
  outline : none;
  color : #950000;
  border-top : 1px solid #950000;
  border-bottom : 1px solid #950000;
  }
ul.sonarmenu a::before, ul.sonarmenu a:after {
  position : absolute;
  top : 50%;
  left : 50%;
  width : 70px; /* width of outer circle */
  height : 70px; /* height of outer circle */
  border : 12px double rgba(249,32,32,0.2); /* style and color of circles */
  border-radius : 50%;
  content : '';
  opacity : 0;
  -webkit-transform : translateX(-50%) translateY(-50%) scale(0.2);
  -moz-transform : translateX(-50%) translateY(-50%) scale(0.2);
  transform : translateX(-50%) translateY(-50%) scale(0.2);
  }
ul.sonarmenu a:after { /* inner circle specific CSS */
  width : 60px; /* width of inner circle */
  height : 60px; /* width of inner circle */
  border-width : 6px;
  -webkit-transform : translateX(-50%) translateY(-50%) scale(0.8);
  -moz-transform : translateX(-50%) translateY(-50%) scale(0.8);
  transform : translateX(-50%) translateY(-50%) scale(0.8);
  }

ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after {
  -webkit-animation : pulsate 1.2s infinite; /* animation name duration loop etc */
  -moz-animation : pulsate 1.2s infinite;
  -ms-animation : pulsate 1.2s infinite;
  animation : pulsate 1.2s infinite;
  }

/* Animation */

@-webkit-keyframes pulsate {
  30% {
    opacity : 1;
    -webkit-transform : translateX(-50%) translateY(-50%) scale(1);
    }
  100% {
    opacity : 0.3;
    -webkit-transform : translateX(-50%) translateY(-50%) scale(0.5);
    }
  }
@-moz-keyframes pulsate {
  30% {
    opacity : 1;
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    }
  100% {
    opacity : 0.3;
    -moz-transform : translateX(-50%) translateY(-50%) scale(0.5);
    }
  }
@-ms-keyframes pulsate {
  30% {
    opacity : 1;
    -ms-transform : translateX(-50%) translateY(-50%) scale(1);
    }
  100% {
    opacity : 0.3;
    -ms-transform : translateX(-50%) translateY(-50%) scale(0.5);
    }
  }
@-keyframes pulsate {
  30% {
    opacity : 1;
    transform : translateX(-50%) translateY(-50%) scale(1);
    }
  100% {
    opacity : 0.3;
    transform : translateX(-50%) translateY(-50%) scale(0.5);
    }
  }

/* SECTION */

.section {
  width : 98%;
  padding : 1%;
  text-align : justify;
  }
.map-wrapper {
  width : 98%;
  padding : 1%;
  height : 800px;
  background-color : rgba(123, 164, 213, 0.67);
  -moz-border-radius : 10px;
  -webkit-border-radius : 10px;
  border-radius : 10px;
  }
.map {
  height : 800px;
  width : 100%;
  background-color : rgba(41,0,0,0.4);
  }

table {
  width : 100%;
  margin : 2em 0;
  border : 1px solid transparent;
  border-collapse : collapse;
  border-spacing : 0;
  }
table th {
  padding : 2%;
  background-color : rgba(19, 58, 88, 0.8);
  border : 1px solid transparent;
  font : 500 1vmax Helvetica, Arial, Sans-Serif;
  color : rgb(255,246,236);
  text-align : left;
  vertical-align : top;
  }
table td {
  padding : 2%;
  background-color : rgba(248, 253, 227, 0.8);
  border : 1px solid transparent;
  font : 200 1vmax Helvetica, Arial, Sans-Serif;
  color : #000042;
  text-align : left;
  vertical-align : top;
  }
table td.qr-code,
table td.qr-code img {
  padding : 0; margin : 0; border : 0;
  width : 15em;
  height : 15em;
  }
table th p {
  font : 500 1.1vmax Helvetica, Arial, Sans-Serif;
  color : rgb(255,246,236);
  vertical-align : top;
  }
table td p {
  font : 200 1.1vmax Helvetica, Arial, Sans-Serif;
  color : #000042;
  vertical-align : top;
  }

.facebook {
  width : 100%;
  height : auto;
  margin : 0.2em auto;
  padding : 0.2em;
  text-align : left;
  }
.row {
  display : table-row;
  }
.social-cell {
  width : 100px;
  display : table-cell;
  }
.social-cell img {
  width : 70px;
  height : 70px;
  }

hr.center-separator {
  margin : 2.5em 0;
  height : 1px;
  background : #000042;
  background : -webkit-gradient(linear, 0 0, 100% 0, from(rgb(255,246,236)), to(rgb(255,246,236)), color-stop(50%, #000042));
  }
br {
  clear : both;
  }
.hidden {
  visibility : hidden;
  display : none;
  }

.footer {
  width : 100%;
  padding : 10px;
  margin-top : 3em;
  font-weight : 200;
  font-size : 0.7vmax;
  text-align : center;
  color : #D2E8FF;
  background : #002A55;
  }
.footer a:link,
.footer a:visited {
  color : #FFFFFF;
  border-bottom : 1px dotted #ffffff;
  }
.footer a:hover,
.footer a:focus {
  color : #DEFF00;
  border-bottom : 1px dotted #DEFF00;
  }
.visits {
  padding : 1%;
  font-weight : 200;
  font-size : 0.7vmax;
  color : #FFDFBB;
  text-align : right;
  white-space : nowrap;
  display : table-cell;
  background-color : #290000;
  }

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}