html, body, main {
overflow: hidden;
background-color: rgb(12, 43, 107);
}
main {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
position:absolute; top:0; bottom:0; right:0; left:0;
width:auto;
height:auto;
background-color: rgb(12, 43, 107);
background-image: url('img/sky.jpeg');
-webkit-transform: translate3d(0, 0, 0);
background-size: cover;
background-position: center;
overflow: hidden;
}
.slogan {
color: white;
text-align: center;
text-shadow: 1px 1px 2px black, 7px 7px 12px navy;
opacity: 1;
}
.montserratfont {
font-family: Lucida Bright, Georgia, serif;
font-weight: 400;
}
.hugefont { font-size: 55px;  }
.bigfont { font-size: 40px; font-weight: 600; }
.midfont { font-size: 25px;  }
.smallfont { font-size: 20px; font-weight: 400; }
.tinyfont { font-size: 15px; font-weight: 400; }
.slogan-frame {
box-shadow: 0 -5px 3px -3px darkblue, 0 5px 3px -3px darkblue;
margin: 20px;
padding: 20px;
border-radius: 20px;
background: rgba(102,153,258,0.4);
}
.fade-in-maincontent {
opacity: 0;
animation: fadeInMainContent 1.0s ease-out forwards;
}
@keyframes fadeInMainContent {
from {
opacity: 0;
transform: scale(0.99);
}
to {
opacity: 1;
transform: scale(1);
}
}
.fade-in-content {
opacity: 0;
animation: fadeIn 1.5s ease-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.1);
}
to {
opacity: 1;
transform: scale(1);
}
}
#contact-form-container {
display:flex;
flex-direction:column;
padding:100px;
}
#leavemsgform * {
font: normal 12pt/14pt Lucida Bright, Georgia, serif;
border-radius:8px;
border:none;
}
#leavemsgemail {
display:flex;
flex:1;
margin:5px 0;
padding:5px;
}
#leavemsgtext {
margin:5px 0;
padding:5px;
}
#leavemsgsubmit {
max-width:120px;
margin:5px 0;
padding:5px;
height:40px;
align-items:center;
justify-content:center;
background: #ff8600;
color: #003973;
cursor: pointer;
}
#leavemsgresponse {
margin:5px 0;
padding:5px;
color:red;
}
@media screen and (max-width: 800px) {
#contact-form-container {
display: flex;
padding: 10px;
}
}
@media screen and (max-height: 800px) {
#contact-form-container {
display: flex;
padding: 10px;
}
}
.triangle-right {
width: 0;
height: 0;
border-top: 130px solid transparent;
border-left: 30px solid rgba(102,153,258,0.7);
border-bottom: 130px solid transparent;
}
#navigation-links {
display: flex;
flex-direction:column;
}
#navigation-links-small {
display: none;
flex-direction:column;
overflow:hidden;
}
#navigation-links-small-popmenu {
display: none;
flex-direction:column;
overflow:auto;
}
#navigation-links-small-popmenucontainer {
display: flex;
flex-direction:row;
overflow:hidden;
}
#menu-item-import, #menu-item-export {
font-size:11pt;
writing-mode:vertical-rl;
_text-orientation:upright;
padding:15px;
}
#menu-item-import {
transform:rotate(180deg);
}
@media screen and (max-width: 800px) {
.menu-item {
padding:5px !important;
font-size:11pt !important;
}
#navigation-links-small-popmenucontainer {
flex-direction:column;
overflow:auto;
}
#links-small-2 > div {
flex:1 !important;
}
#menu-triangle-right-1, #menu-triangle-right-2 {
display:none !important;
}
#links-small-3 {
flex-direction:row !important;
}
#links-small-4 > div {
flex:1 !important;
}
#menu-triangle-left-1, #menu-triangle-left-2 {
display:none !important;
}
#menu-item-import, #menu-item-export {
font-size:1em;
writing-mode: initial;
text-orientation: initial;
padding:15px;
transform:rotate(0deg);
}
}
@media screen and (max-width: 1150px) {
#navigation-links {
display:none;
}
#navigation-links-small {
display:flex;
flex-direction:column;
}
#right-links-frame {
display:none;
}
#contentframe-footer {
display:none;
}
#page-leftfiller {
display:none !important;
}
#page-rightfiller {
display:none !important;
}
.content-frame {
margin:0 !important;
border:none !important;
box-shadow:none !important;
}
.content-scrollcontent img {
width:400px !important;
}
}
@media screen and (max-width: 600px) and (orientation: portrait) {
p, li, h1, h2, h3, h4 {
justify-content:left;
align-items:center;
align-content:flex-start;
text-align:left;
text-justify:none;
text-wrap: normal;
}
.content-scrollcontent {
padding:10px !important;
}
.content-scrollcontent img {
width:250px !important;
}
}
.lang-flag-div-rounded {
padding:14px;
margin:7px 0;
border-radius:50% 50%;
background-position:center;
background-size:cover;
cursor:pointer;
}
.menu-item {
display:flex;
flex:1;
background: rgba(10, 20, 75, 0.8);
border:1pt #0097ff solid;
border-radius:10px;
padding:5px 20px;
font: normal 12pt/16pt Tahoma, Sans-Serif;
color:white;
text-shadow: 1px 1px 2px black, 7px 7px 12px navy;
box-shadow: 0 1px 1px #ffffff, 0 0 10px #0091ff;
justify-content: center;
align-items: center;
align-content:center;
text-align:center;
opacity: 1;
cursor:pointer;
overflow:hidden;
}
.menu-item:hover {
background: radial-gradient(rgb(58, 176, 255), rgb(0, 67, 146));
}
.content-frame {
display:flex;
flex:1;
background: rgba(10, 20, 75, 0.8);
border:1pt #0097ff solid;
border-radius:10px;
margin:10px;
padding:5px 1px;
font: normal 12pt/20pt Lucida Bright, Georgia, serif;
color:white;
box-shadow: 0 1px 1px #ffffff, 0 0 10px #0091ff;
overflow:hidden;
}
.content-frame-aligncenter {
justify-content: center;
__align-items: center;
align-content:center;
text-align: justify;
text-justify: inter-word;
}
.content-frame p {
margin:10px 0 5px 0;
}
.content-frame ul,ol {
text-align: left;
margin:10px 0 5px 0;
}
.content-frame ul>li,ol>li {
margin-bottom:7px;
}
.content-frame h1 {
font-size:1.6em;
color: #ff8600;
margin:30px 0 5px 0;
}
.content-frame h2 {
font-size:1.4em;
color: #ff8600;
margin:10px 0 5px 0;
}
.content-frame h3 {
font-size:1.2em;
color: #ff8600;
margin:10px 0 5px 0;
}
.content-frame h4 {
font-size:1.1em;
color: #ff8600;
margin:10px 0 5px 0;
}
.content-frame-small-text {
display:flex;
font: normal 7pt Verdana, Sans-Serif;
color: #3c9aff;
}
.menu-triangle-right {
width: auto;
margin:3px;
align-items: center;
align-content:center;
border-top: 40px solid transparent;
border-left: 20px solid rgba(0, 58, 177, 0.7);
border-bottom: 40px solid transparent;
}
.menu-triangle-left {
width: auto;
border-top: 40px solid transparent;
border-right: 20px solid rgba(0, 58, 177, 0.7);
border-bottom: 40px solid transparent;
}
.content-scrollcontent {
overflow:scroll;
}
.content-scrollcontent::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 5px;
background-color: #e5e5e5;
}
.content-scrollcontent::-webkit-scrollbar {
width: 10px;
background-color: #eafcff;
}
.content-scrollcontent::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #003399;
}
.flag-div-rounded {
padding:12px;
margin:7px 0;
border-radius:50% 50%;
background-position:center;
background-size:cover;
}
.content-frame-right {
padding:10px 10px;
justify-content: flex-start;
align-items: flex-start;
align-content:center;
text-align: left;
}
.content-frame-right a {
padding:0;
margin:0;
text-decoration:none;
font: normal 10pt/8pt Tahoma, Sans-Serif;
color: #81ffa6;
}
.content-frame-right a:hover {
color: red;
}
.content-separator-div {
width:100%;
border-bottom:lightblue 1pt dotted;
margin:5px 0 7px 0;
}
.content-frame-right ul {
list-style-type: none;
list-style-position: outside;
padding:0 0 0 13px;
margin:0;
}
.content-frame-right li {
padding:0;
margin:0;
font: normal 10pt/8pt Tahoma, Sans-Serif;
line-height: 8pt;
}
.content-frame-right ul li::before {
content: "\27A3";
font:bold 7pt/7pt Tahoma, Sans-Serif;
color: #499645;
display: inline-block;
width: 1.5em;
margin: 0;
margin-left: -1em;
padding: 0;
}
.icon-bar {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bar-item {
width: 48px;
margin: 2px;
}
.icon-bar-item a {
display: block;
text-align: center;
padding: 12px;
color: white;
font-size: 20px;
}
.icon-bar-item:hover {
_background-color: #000;
_padding: 12px 12px 12px 70px;
width: 70px;
transition: width 0.3s;
}
.facebook {
background: #3B5998;
color: white;
border-radius:5px;
}
.twitter {
background: #55ACEE;
color: white;
border-radius:5px;
}
.google {
background: #dd4b39;
color: white;
border-radius:5px;
}
.sendemail {
background: #007bb5;
color: white;
border-radius:5px;
}
.youtube {
background: #bb0000;
color: white;
border-radius:5px;
}