body {font-family: Arial, Helvetica, sans-serif; background: #fff; color: #888888;}
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}
header, section, footer, aside, nav, main, article, figure {display: block;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td, 
footer {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {font-family: 'Oswald', sans-serif;}
i {font-family: 'Font Awesome Free 5';}

/*colors*/
.colors {
navy: #0d2f5d;
yellow: #d5a82b;
red: #fc6f70;
}

.tooltip {z-index: 1000000;}

/*TODO:*/
/*FIXME:*/
/*----------------------------------------  general   --------------------------------------*/
a.btn-outline-white {color: #fff !important; background-color: transparent !important; 
    border-color: #fff !important; border: 2px solid; border-radius: 3px;
    transition: ease-in-out all 0.3s;}
a.btn-outline-white:hover {border-radius: 12px; box-shadow: none; background-color: #fff !important;
    color: #ed3048 !important; font-weight: bold;}
.pink {background: #ed3048;}
/*----------------------------------------   header   --------------------------------------*/
.navbar {transition: all ease-in-out 0.6s; z-index: 10000;}
.navbar.navbar-transparent {background-color: #0000001f !important; transition: all ease-in-out 0.6s;}
.navbar.navbar-transparent img {display: none;}
.navbar .navbar-nav .nav-item .nav-link {font-size: 14px;}
.dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .dropdown-menu a:active, .dropdown-menu a:focus, .dropdown-menu a:hover {
box-shadow: 0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(156,39,176,.4);
background-color: #56c53a;
color: #fff;}
.navbar .navbar-nav .nav-item .nav-link i {margin-right: 8px;}
.dropdown-menu.dropdown-with-icons .dropdown-item i {margin-right: 16px;}
.navbar .navbar-translate img {margin-top: -20px; opacity: 0.8;}
.navbar-collapse {display: block !important;}

.carousel {position: relative;}
.carousel_overlay {background: url("../images/carousel_overlay.png") no-repeat top left; position: absolute;
top: 0; left: 0; z-index: 100; width: 24%; height: 54%; background-size: cover;}
.carousel_overlay img {margin: 14%;}
.carousel-control-prev, .carousel-control-next {z-index: 1000;}
.inner_overlay{background: url("../images/carousel_overlay.png") no-repeat top left; position: absolute;
    top: 0; left: 0; z-index: 100; width: 24%; height: 40%; background-size: contain;}
.inner_overlay img {margin: 2%;}

/*----------------------------------------    main    --------------------------------------*/
main {background: #fff; position: relative; 
    background: url("../images/paralax.png") no-repeat 50px 0;}
main section article {margin-top: 40px; margin-bottom: 40px;}
section h2 {color: #363636; padding-bottom: 15px; margin-bottom: 35px; position: relative;
    font-weight: 400; font-variant: small-caps; position: relative; font-size: 2.8em;}
section h2::after {content: " "; background-color: #07798a; height: 3px; width: 80px;
    position: absolute; left: 0; bottom: 0;}
section p {color: #888; font-size: 1em; text-align: justify; margin-bottom: 25px;}
section p.lead {font-size: 1.1em;}
main section .aside_img {max-width: 100%;}

.intro {margin-top: 0;}
.intro aside {margin-top: 80px;}
.intro article {margin-top: 0; padding-left: 75px;}
.intro h1 {color: #07798a; padding-top: 65px; margin-bottom: 35px; position: relative; 
z-index: 5; font-weight: 400; font-variant: small-caps;}
.intro h1 span.white {color: #fff;}
.intro h1::before {content: " "; width: 73px; height: 128px; background: #f5822d;
position: absolute; top: 0; left: 0; z-index: -1;}

/*----------------------------------------   modal  --------------------------------------*/
/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 150;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 20%;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: black;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media (max-width: 574px) {
    .close {  top: 10%; left:25px;}
    img.hover-shadow{width: 80%; padding-bottom: 10%;}

}

/*----------------------------------------    footer  --------------------------------------*/
footer.footer_dark {background: #1c2331; color: white;}
footer .footer_darker {background: #161c27;}
footer p a {color: #8abd65;}
footer p a:hover {color: #8abd65; text-decoration: underline #fff;}


/* small devices */
@media (min-width: 576px) {}
@media (min-width: 768px) {
    .carousel_overlay {z-index: 100000;}
    .inner_overlay {z-index: 100000;}

}
@media (min-width: 992px) {
    .carousel_overlay img {width: 46%;}
    .inner_overlay img {width: 40%;}

}
@media (min-width: 1200px) {}
@media (max-width: 575.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 991.98px) {
    .carousel_overlay img {width: 100%; margin-top: 100%;}
    .inner_overlay img {width: 100%; margin-top: 20%;}

}
@media (max-width: 1199.98px) {}
@media (max-width: 1080px) {}
@media (max-width: 960px) {}
@media (max-width: 840px) {}
@media (max-width: 600px) {}
@media (max-width: 400px) {}
@media (max-width: 575.98px) {}
@media (min-width: 576px) and (max-width: 767.98px) {}
@media (min-width: 768px) and (max-width: 991.98px) {}
@media (min-width: 992px) and (max-width: 1199.98px) {}
@media (min-width: 1200px) {}