/* * Globals * */
/* declare a var in root to use it in whole document */
:root { 
    /*#f1d2d7*/
    --main-bg-color: #fff; 
    --main-headings-color: #63637f;
    --main-subheadings-color: #31313F;

    --sign-copyright-color: #184378; /* #63637f */
    --sign-designdedby-color: #184378; /* #63637f */
    --sign-designdedby-color-hover: #051a75;

    --menu-active-link: #505b71;
    --menu-hover-link: #184378;
    --menu-current-link: #505b71;

    --breadcrumb-active-link: #505b71;
    --breadcrumb-hover-link: #184378;
    --breadcrumb-current-link: #505b71;

    --carousel-inline-bg:rgba(80, 91, 113, 0.35);

}

/* call var to set value in property */
/* div { background-color: var(--main-bg-color); } */

/*
font-family: 'Arimo', sans-serif;
font-family: 'Comfortaa', cursive;
font-family: 'Source Sans Pro', sans-serif;
*/

/* Links */
a, a:focus, a:hover { color: #dd0000; } 
/* Custom default button */
.bg-primary { background-color: #004FA3!important; }
.btn-primary { background-color: #004FA3; text-shadow: none; /*border: .05rem solid #004FA3;*/ }
.btn-primary:hover,
.btn-primary:focus { background-color: #004289; text-shadow: none; /*border: .05rem solid #004289;*/ }
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus { 
    color: #333; 
    text-shadow: none; 
    background-color: #fff; 
    /*border: .05rem solid #fff; */
}

/* Base structure */
html,
body { 
    height:100%;
    min-height: 100%; 
    background-color: var(--main-bg-color); 
    /*overflow-x: hidden;*/ 
}
body { 
    display: -ms-flexbox; 
    display: flex; 
    flex-direction: column;
    color: #333; 
    font-family: 'Source Sans Pro', sans-serif;
    /*padding-top: 80px; */
    /*font-size:1.3em;*/
}
/*a { font-family: 'Comfortaa', cursive; }*/
h1,h2,h3,h4,h5,h6 { font-family: 'Arimo', sans-serif;}
h1 { font-size:2em; }
h2 { font-size:1.4em; }
h3 { font-size:1.2em; }
h4 { font-size:1em; }

#checkout h4  { font-size:1.3em; font-weight:600; }

/* Main content Container  */
#wrapper { margin:0; padding:0; }

.container { max-width:1280px; }

/* Header */
/*
header {
    background: #fcfcfc;
    background: -moz-linear-gradient(top, #fcfcfc 0%, #f1d2d7 100%);
    background: -webkit-linear-gradient(top, #fcfcfc 0%,#f1d2d7 100%);
    background: linear-gradient(to bottom, #fcfcfc 0%,#f1d2d7 100%);
}
*/


#book-menu .book-btn {
   color:var(--graphite-color);
   font-size:0.85em;
   text-decoration:none;
}
#book-menu .book-btn:hover {
   color:var(--cyan-color);
}



.programm-popup {
   color: var(--graphite-color);
   border-color: var(--graphite-color);
   background-color:transparent;
   padding:2px;
   position:relative;
   overflow:hidden;
   transition: color .5s;
   box-sizing: content-box;
   box-shadow:none;
   outline:none;
}

.programm-popup:hover {
   cursor: pointer;
   color: var(--fuxia-color);
   border-color: var(--fuxia-color);
}




.navbar-dark .navbar-nav .nav-item .nav-link-index:focus,
.navbar-dark .navbar-nav .nav-item .nav-link-index:hover,
.navbar-dark .navbar-nav .active {
   color:var(--cyan-color);
   cursor: pointer;
}
.navbar-dark .navbar-nav .nav-item:focus::after,
.navbar-dark .navbar-nav .nav-item:hover::after,
.navbar-dark .navbar-nav .active::after {
   width:100%;
}

@media only all and (max-width: 539px) and (min-width: 280px) {
   #callcenter-phone {
      font-size:0.9em;
      font-weight:400;
   }
   #callcenter-phone a {
      font-size:0.9em;
      font-weight:600;
      text-decoration:none;
      color:#fff;
   }
   #callcenter-social a {
      font-size:0.9em;
      text-decoration:none;
   }
}

.navbar-dark {
   background-color:transparent;
   -webkit-transition:all 0.35s ease;
   transition:all 0.35s ease;
}
.navbar-brand-wrapper {
   background-color:transparent;
   -webkit-transition:all 0.35s ease;
   transition:all 0.35s ease;
}
.navbar-brand {
   -webkit-transition:all 0.35s ease;
   transition:all 0.35s ease;
}
.navbar-brand {
   background-color: transparent;
   text-align:center;
   display: block;
}
.navbar-brand img {
   height:80px;
   width:auto;
}

/* index page nav-bar colors for menu */
.navbar-dark .navbar-nav {
   background-color:transparent;
}
.navbar-dark .navbar-nav * {
   box-sizing:border-box;
   -webkit-transition:all 0.35s ease;
   transition:all 0.35s ease;
}
.navbar-dark .navbar-nav .nav-item {
   list-style:outside none none;
   margin:0 0.15em;
}
.navbar-dark .navbar-nav .nav-link-index {
   font-size:.85em;
   padding:0.5em 0.25em;
   color:var(--menu-active-link);
   position: relative;
   display:inline-block;
   margin:0;
   text-align:center;
   text-decoration:none;

   display:block;
   height:auto;
   margin:0;
   padding:30px 20px 0;
   text-align:center;
   text-decoration:none;
   text-shadow:0 0 transparent;
   /* text-transform:uppercase; */
   width:auto;
   transition:color .3s;
}

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
   color:var(--menu-active-link);
}

/*
.menu-item {  }
.menu-item::after, 
.active:after {background-color:#eb9123; content:''; display:block; height:5px; margin:15px auto 0; width:0; transition:width .3s;}
.menu-item:hover, 
.active { color:#eb9123; text-shadow:0 1px #999; }
.menu-item:hover::after, 
.active::after { width:100%; }
*/
/*
.navbar-dark .navbar-nav .active .nav-link-index { color:var(--menu-active-link); }
.navbar-dark .navbar-nav .nav-item:hover .nav-link-index,
.navbar-dark .navbar-nav .nav-item:hover .nav-link-index{ color:var(--menu-hover-link); }
.navbar-dark .navbar-nav .nav-item:hover .nav-link-index:hover {  color:var(--menu-hover-link); }
*/

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link-index {
   font-size: 0.85em;
   padding:0.5em;
   color:var(--darkblue-color);
   position: relative;
   display:inline-block;
   letter-spacing:1px;
   margin:0;
   text-align:center;
   text-decoration:none;
   text-shadow:0 0 transparent;
   width:auto;
   transition:color .3s;
}
.nav-item:hover  {
   cursor: pointer;
   color:var(--darkblue-color);
}

.navbar-dark .navbar-nav .nav-item::after,
.navbar-dark .navbar-nav .active:after {
   background-color:var(--primary-color);
   content:'';
   display:block;
   height:2px;
   margin:2px auto 0;
   width:0;
   transition:width .3s;
}
.navbar-dark .navbar-nav .nav-item .nav-link-index:focus,
.navbar-dark .navbar-nav .nav-item .nav-link-index:hover,
.navbar-dark .navbar-nav .active {
   color:var(--cyan-color);
   cursor: pointer;
}
.navbar-dark .navbar-nav .nav-item:focus::after,
.navbar-dark .navbar-nav .nav-item:hover::after,
.navbar-dark .navbar-nav .active::after {
   width:100%;
}

.dropdown-menu {
   background-color:#fdfdfd;
   border-radius:0;
   border:0;
   box-shadow: 0 2px 5px -2px #666;
   padding:0px;
   margin:0;
   margin-top:0px;
   width:auto;
}
/*
.dropdown-menu.levelone {
   background-color:#ee519c;
}
.dropdown-menu.leveltwo {
   background-color:#ee519c;
}
.dropdown-menu.levelthree {
   background-color:#ee519c;
}
*/

.dropdown-menu:hover {
   cursor: pointer;
}
.dropdown-menu > .dropdown-item {
   /* font-size: .86em; */
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
   position: relative;
   width: 100%;
   word-wrap:break-word;
   white-space: normal!important;
   height:auto;
   padding:0.5em;
}
.dropdown-menu > .dropdown-item-large {
   background-color:#f1d3d7;
   border-bottom:1px solid #b19d9f;
   padding:0.5em 0.6em;
   width: 100%;
}

.dropdown-item:hover {
   background-color:#ffefd5;
   cursor: pointer;
}

.dropdown-menu > .dropdown-item .dropdown-link {
   display: inline-flex;
   height:auto;
   width: 100%;
   word-wrap: break-word;
   white-space: normal!important;
   padding:0.5em;
   color:var(--menu-active-link);
   position: relative;
   /*letter-spacing:1px;*/
   margin:0;
   text-align:left;
   text-decoration:none;
   font-size: 0.85em;
   font-weight: 600;
}
/* .dropdown-menu > .dropdown-item .dropdown-link:hover { background-color:#ffefd5; }   */

.dropright .dropdown-menu {
   top: 40px;
   right: auto;
   left: 50%;
   margin-top: 0;
   margin-left: .125rem;
}
.dropleft .dropdown-menu {
   top: 40px;
   left: auto;
   right: 50%;
   margin-top: 0;
   margin-right: .125rem;
}

/*
.navbar-dark .navbar-nav .nav-item .nav-link-index.show-all-link {
    font-size: 0.9em;
    border-bottom: 1px solid #114C78;
    padding:0.6em 0.3em; 
    background-color:#ffefd5;
}
.navbar-dark .navbar-nav .nav-item .nav-link-index.show-all-link:hover {
    background-color:#114C78;
    color:var(--menu-hover-link);
}
.navbar-dark .navbar-nav .nav-link-index.feat-link {
    font-weight: bold;
    font-size: 0.9em;
}
.navbar-dark .navbar-nav .nav-link-index.child-link {
    padding: 0.6em 0.2em 0.6em 0.4em;
    / border-bottom: 1px solid #004573; /
}
*/

.dropright .dropdown-toggle::after {
   margin-left: 0;
   position: absolute;
   right: 0em;
   top: 1em;
}
.dropdown-divider {
   height: 0;
   margin: .5rem 0;
   overflow: hidden;
   border-top: 1px solid #ccc;
}



.lang-nav-item img {
   filter: grayscale(100%);
   -webkit-transition:all 0.05s ease;
   transition:all 0.05s ease;
}
.lang-nav-item:hover img,
.lang-nav-item.lang-current img {
   filter: grayscale(0%);
}
@media (max-width: 991.98px) {
   #mainMenu {
      height: calc(100vh - 30px);
      overflow-y: scroll;
   }
   .navbar-dark .navbar-nav .nav-link-index {
      padding:0.02em 0.5em;
   }
   .navbar-brand-wrapper {
      height:100%;
      width:auto;
      padding:0px;
   }
   .navbar-dark .navbar-nav .nav-item {
      border-bottom:1px solid var(--menu-active-link);
      ;
      margin:0;
      padding:0 0px;
      overflow: hidden;
      width:100%;
   }
   .navbar-dark .navbar-nav .nav-link-index {
      padding:1em;
      position:relative;
      display:inline-block;
      /*height:calc(100% - 0em); */
      height:auto;
      letter-spacing:0;
      margin:0;
      width:calc(100% - 0em);
   }
   .navbar-nav-right {
      margin-right:0;
      padding:0;
   }
   .navbar-collapse {
      height: auto;
      overflow-y: scroll;
   }
   .navbar-collapse.show {
      height: 100vh;
      overflow-y: scroll;
   }
   .dropdown-menu {
      background-color:transparent;
      border:0;
      box-shadow: none;
      padding:0;
      margin-top:0px;
      width:100%;
   }

   .dropdown-menu {
      width:100%;
   }

   .dropdown-menu > .dropdown-item {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      width: calc(100% - 0px);
   }

   .dropdown-menu > .dropdown-item .nav-link {
      padding:20px;
      /*width: calc(100% - 30px);*/
   }
   .dropdown-menu > .dropdown-item .dropdown-link {
      padding:0;
      text-align:center;
   }

   .dropright .dropdown-menu,
   .dropleft .dropdown-menu {
      bottom: 0px;
      right: 0;
      left: 0;
      margin-top: auto;
      margin-left:0;
      position: static;
      float: none;
      width:100%;
   }

   .dropright.show {
      display:block;
   }
   .dropdown-menu.dropdown-menu-end.show {
      height: auto;
      overflow-y: scroll;
      display:block;
      position: static;
      float: none;
      width:100%;
   }

   .extras-nav {
      display:flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
   }

   .hero-container {
      border-bottom:40px solid #db3139;
      max-height:800px;
      overflow:hidden;
   }
}

/* Modal menu media queries for screens-sizes */
/*
    @media only screen and (max-width: 1023px) and (min-width: 768px) {
        .modal-fullscreen-menu .list-group a { font-size: 1.2em; pointer-events: auto; text-decoration: none; }
        .display-2 { font-size:50pt; text-align: center; }
    }
    @media only screen and (max-width: 767px) and (min-width: 540px) {    
        .modal-fullscreen-menu .list-group { margin: 100px auto auto; text-align: center; }
        .display-2 { font-size:40pt; text-align: center; }
    }
    @media only all and (max-width: 539px) and (min-width: 320px) {    
        .modal-fullscreen-menu .list-group { margin: 100px auto auto; text-align: center; }
        .display-2 { font-size:30pt; text-align: center; }
    }
*/

/* -- */
/* Multilevel menu without click to open  V1 */ 
/*
    .menu-area{background: #d61a5e}
    .dropdown-menu{padding:0;margin:0;border:0 solid transition!important;border:0 solid rgba(0,0,0,.15);border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important}
    .mainmenu a, .navbar-default .navbar-nav > li > a, .mainmenu ul li a , .navbar-expand-lg .navbar-nav .nav-link{color:#fff;font-size:16px;text-transform:capitalize;padding:16px 15px;font-family:'Roboto',sans-serif;display: block !important;}
    .mainmenu .active a,.mainmenu .active a:focus,.mainmenu .active a:hover,.mainmenu li a:hover,.mainmenu li a:focus ,.navbar-default .navbar-nav>.show>a, .navbar-default .navbar-nav>.show>a:focus, .navbar-default .navbar-nav>.show>a:hover{color: #fff;background: #4CAF50;outline: 0;}
    / Sub Menu=v /
    .mainmenu .collapse ul > li:hover > a{background: #4CAF50;}
    .mainmenu .collapse ul ul > li:hover > a, .navbar-default .navbar-nav .show .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .show .dropdown-menu > li > a:hover{background: #4CAF50;}
    .mainmenu .collapse ul ul ul > li:hover > a{background: #4CAF50;}

    .mainmenu .collapse ul ul, .mainmenu .collapse ul ul.dropdown-menu{background:#1565C0;}
    .mainmenu .collapse ul ul ul, .mainmenu .collapse ul ul ul.dropdown-menu{background:#1E88E5}
    .mainmenu .collapse ul ul ul ul, .mainmenu .collapse ul ul ul ul.dropdown-menu{background:#64B5F6}

    / Drop-down menu work on hover /
    .mainmenu{background: none;border: 0 solid;margin: 0;padding: 0;min-height:20px;width: 100%;}
    @media only screen and (min-width: 767px) {
    .mainmenu .collapse ul li:hover> ul{display:block}
    .mainmenu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
    //
    .mainmenu .collapse ul ul li{position:relative}
    .mainmenu .collapse ul ul li:hover> ul{display:block}
    .mainmenu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
    //
    .mainmenu .collapse ul ul ul li{position:relative}
    .mainmenu .collapse ul ul ul li:hover ul{display:block}
    .mainmenu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}

    }
    @media only screen and (max-width: 767px) {
    .navbar-nav .show .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 35px}
    .navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 45px}
    }
*/
/* -- */

/* -- */
/* Multilevel menu without click to open V2 */
/*
    .header2 { font-family: "Montserrat", sans-serif; color: #8d97ad; font-weight: 300; background: #f1d2d7; }
    .header2 .font-12 { font-size: 12px; }
    .header2 .dropdown-item { padding: 8px 1rem; color: #8d97ad; }
    .header2 .h2-nav .navbar-nav .nav-item .nav-link { padding: 12px 0px; color: #ffffff; font-weight: 400; }
    .header2 .h2-nav .navbar-nav .nav-item .nav-link:hover { color: #263238; }
    .header2 .h2-nav .navbar-nav .nav-item { margin: 0 20px; }
    @media (min-width: 1024px) { .header2 .navbar-nav>.dropdown .dropdown-menu { min-width: 210px; margin-top: 0px; } }
    @media (min-width: 1024px) { .header2 .dropdown-submenu:hover>.dropdown-menu { display: block; } }
    .header2 .dropdown-toggle::after { display: none; }
    @media (min-width: 1024px) { .header2 .hover-dropdown .navbar-nav>.dropdown:hover>.dropdown-menu { display: block; margin-top: 0px; } }
    .header2 .btn-dark { color: #fff; background-color: #343a40; border-color: #343a40; }
    .header2 .btn-dark:hover { color: #fff; background-color: #23272b; border-color: #1d2124; }
    .header2 .h2-nav .navbar-nav .nav-item .btn { opacity: 0.5; }
    .header2 .h2-nav .navbar-nav .nav-item .btn:hover { opacity: 1; }
    .header2 .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-left: 0; border-radius: 0.25rem; display: none; }
*/
/* -- */


/*main { background-color:#fff; width:100%; }*/
.main-container { 
    background-color:#eee;
    /*height:100%;*/
    height:auto;
    /*min-height:1100px; */
    /*margin-top: 288px!important;*/
    position:relative; 
}
.page-container { 
    background-color:#eee;
    /*height:100%;*/
    height:auto;
    /*min-height:1100px; */
    /*margin-top: 288px!important;*/
    position:relative; 
    -webkit-transition:all 0.35s ease; transition:all 0.35s ease; 
}

/*
 * Carousel Featured Project in index
 */
.top-content {
    border-bottom:0px solid #db3139;
}
/* Since positioning the image, we need to help out the caption */
/*
.carousel-caption {    
    position: absolute;        
    bottom: 2rem;
    z-index:10;
    text-align: center;
    height:auto;
    width: calc(100% - 0%);
}
*/
.carousel-caption {    
    position: absolute;
    bottom:0;
    z-index:10;
    text-align: center;
    height:100%;
    /*width: calc(100% - 0%);*/
}
.carousel-caption h2{
    color: #fff;
    font-size: 7em;
    font-weight:300;
    line-height: 1.2;
    text-transform: uppercase;
    display:inline;
    font-family: 'Arimo', sans-serif;
}
.carousel-caption h2 span{
    background-color:var(--carousel-inline-bg);
}
.carousel-caption h3 {
    background-color:var(--carousel-inline-bg);
    color: #fff;
    font-size: 2em;
    font-weight:400;
    line-height: 1;
    text-transform: uppercase;
    display:inline;
}

.carousel-control-next, .carousel-control-prev {
    color: #114C78;   
    font-size:2.5em;
    opacity: .4;
    transition: opacity .15s ease;
}
.carousel-control-next:focus, 
.carousel-control-next:hover, 
.carousel-control-prev:focus, 
.carousel-control-prev:hover {
    color: #db3139;
    text-decoration: none;
    outline: 0;
    opacity: 1;
}

@media only screen and (max-width: 1440x) and (min-width: 769px) {
    /* Carousel base class */
    /*
    .carousel-item, 
    .carousel-indicators,
    .carousel-controls, 
    .carousel-caption { top:10%; }*/
    .carousel-caption h2 { font-size: 1.8rem;  }
}
@media only screen and (max-width: 768px) and (min-width: 541px) {
    /* Carousel base class */
    
    /*.carousel-item, 
    .carousel-indicators,
    .carousel-controls, 
    .carousel-caption { top:10%; }*/
    .carousel-caption h2 { color:#fff; font-size: 1.6rem; }
}
@media only screen and (max-width: 540px) and (min-width: 481px) {
    /* Carousel base class */
    /*
    .carousel-item, 
    .carousel-indicators,
    .carousel-controls, 
    .carousel-caption { top:10%; }
    */
    .carousel-caption h2 { color:#fff; font-size: 1.2rem;  }
}
@media only all and (max-width: 480px) and (min-width: 320px) {
    /* Carousel base class */
    /*
    .carousel-item, 
    .carousel-indicators,
    .carousel-controls, 
    .carousel-caption { top:10%; }
    */
    .carousel-caption h2 { color:#fff; font-size: 1.2rem;  }
}


/*
@media only screen and (min-width: 1281px) {  }
@media only screen and (max-width: 1280px) and (min-width: 1025px) {  }
@media only screen and (max-width: 1024px) and (min-width: 769px) {  }
@media only screen and (max-width: 768px) and (min-width: 541px) {  }
@media only all and (max-width: 540px) and (min-width: 320px) {  }
*/

#cart {
    min-height:500px;
}
  
.text-center { text-align: center; }


.index-profile { 
    background-color:#fff; 
    /*border-top:1px solid #ddd; */
    /*
        background-image: url('../images/site/bg_2.png');
        background-position:top center; 
        background-repeat:no-repeat; 
        background-size: cover;
    */
    /*height:auto;*/
    display:flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    padding:0;
    margin:0;
    text-align: center;
}

.index-title {
    color:var(--main-headings-color);
    font-size: 2.15rem;
    font-weight:500;
    line-height:1;
    margin-bottom:25px;
    padding:10px 0 0;
    position:relative;
}
/*
.index-title:after { position:absolute; }
.index-title:after { left:25%; right:25%; bottom:-20px; height:10px; width:50%; content:""; background-color:transparent; border-bottom: 5px solid #e80172; }
*/
.index-subtitle, .index-subtitle-white { 
    background-color:transparent; 
    color:#184378;
    font-size:2rem; 
    font-weight:500; 
    letter-spacing:1px; 
    margin:0; 
    padding:0; 
    /* text-transform: uppercase; */
    position:relative; 
}
.index-subtitle-white { color:#fff; }       
.index-paragraph { 
    background-color:transparent; 
    color:#000; 
    font-size:1.2em; 
    letter-spacing:1px; 
    line-height:1.4;
    max-width:640px;
    text-align: center;
}


.services { 
    background-color:transparent; 
    border-radius:50%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   
    padding:0px; 
    margin:0 auto;
    text-decoration:none; 
    perspective: 1000px;
    
    max-height:320px;
    height:auto;
    /*height:300px;*/
    min-height:280px;
    
    max-width:320px;
    width:auto;
    /*width:300px;*/
    min-width:280px;
}
.services:hover { text-decoration:none; }
.services-inner { 
    /*
    max-height:354px; 
    min-height:240px;
    max-width:354px;
    min-width:240px;
    */
    height: calc(100% - 0px);
    width: calc(100% - 0px);
}

.services-content { 
    background-color:#fff;
    border-radius:50%;
    margin:0px;
    padding:0;
    text-decoration:none; 
    height: calc(100% - 0px);
    width: calc(100% - 0px);
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   
    transition: transform 0.6s;
    transform-style: preserve-3d; 
    position:relative;
}
.services-content-inner { border:0; }
.services-content-transparent { background-color:transparent; border:0; }
.services:hover .services-content { transform: rotateY(180deg); }
.services-content-front, .services-content-back {
    border-radius:50%;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   
    box-shadow: 0px 4px 8px -4px #333;
    padding:0;
    overflow: hidden;
}
.services-content-front { color: black; padding:15px; }
.services-content-front h4 { color:#fff;  display:flex; flex-direction: column; justify-content: center; align-items: center; font-size:2rem; font-weight:500; }
.services-content-front h4 span { font-size:1.3rem; font-weight:500; line-height:1.4rem; }
.services-content-back img { background-color: #fff; color: black; height:100%; width:100%; }  
.services-content-back { transform: rotateY(180deg); }


/* Modal menu media queries for screens-sizes */
/*
@media only screen and (max-width: 1023px) and (min-width: 768px) {  }
@media only screen and (max-width: 767px) and (min-width: 540px) {  }
*/


.rectangles {
    /*background-color:#eee;*/
    border-radius:0%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding:0px;
    /*margin:0 10px;*/
    text-decoration:none;
    /*perspective: 1000px;*/
    /*max-height:320px;*/
    /* height:280px; */
    /*height:300px;*/
    /*min-height:280px;*/
    /*max-width:calc(320px - 20px);*/
    width:calc(100% - 0px);
    /*width:300px;*/
    /*min-width:calc(280px - 20px);*/
}
.rectangles:hover { text-decoration:none; }
.rectangles-inner { 
    /*
        max-height:354px; 
        min-height:240px;
        max-width:354px;
        min-width:240px;
    */
    height: calc(100% - 0px);
    width: calc(100% - 0px);
}

.rectangles-content {
    text-decoration:none;
    /* height: calc(100% - 0px); */
    width: auto;
    display:flex;
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: center;
    /*transition: transform 0.6s;*/
    /*transform-style: preserve-3d; */
    position:relative;
}


.rectangles-content-inner { border:0; }
.rectangles-content-transparent { background-color:transparent; border:0; }
.rectangles:hover .rectangles-content { text-decoration: none; }

.rectangles-content-front, .rectangles-content-back {
    position: relative;
    width: calc(100% - 20px);
    height: auto;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin:0;
    padding: 10px;
    overflow: hidden;
    /* max-height: 360px; */    
}
.rectangles-content-front { color: var(--menu-active-link); }

.rectangles-content-front h4 { 
    color:var(--menu-active-link);
    display:flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    font-size:1rem; 
    font-weight:500; 
    transition: all 0.5s ease; 
}
.rectangles-content-front h3 span { font-size:1rem; font-weight:500; line-height:1rem; }
.rectangles-content-back img {
    color:var(--menu-active-link);
    height:auto;
    /* max-height:360px; */
    width: auto;
    /* max-width: 360px; */
    position: relative;
    /*box-shadow: 0px 2px 4px -2px #333;*/
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 15%);
    transition: all 0.5s ease; 
}  
.rectangles-content:hover .rectangles-content-front h3 { color:#184378; }
.rectangles-content:hover .rectangles-content-back img { opacity: 0.5; }


.product-gallery-item  {
    color:var(--menu-active-link);
    height:auto;
    display:block;
    /* max-height:360px; */
    width: auto;
    /* max-width: 360px; */
    position: relative;
    /*box-shadow: 0px 2px 4px -2px #333;*/
    transition: all 0.5s ease;
} 

.product-gallery-item img {
    border:0;
    color:var(--menu-active-link);
    height:auto;
    margin:0;
    /* max-height:360px; */
    width: auto;
    /* max-width: 360px; */
    position: relative;
    /*box-shadow: 0px 2px 4px -2px #333;*/
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 15%);
    transition: all 0.5s ease;
} 
.product-gallery-item:hover img { opacity: 0.5; }




input[type=number] {
    /*for absolutely positioning spinners*/
    position: relative; 
    padding: 5px 10px;
    padding-right: 25px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
    width: 25px;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}





.page-gallery { 
    background-color:transparent;     
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   
    padding:0px; 
    margin:0 auto;
    text-decoration:none;     
    height:250px;
    width:100%;
    position:relative;
    overflow: hidden;
}
.page-gallery:hover { text-decoration:none; }

.page-gallery img { background-color: #fff; color: black;display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;}  
.page-gallery .image-caption {
    background-color:#fff;
    height: auto;
    width: 0;    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 1em;    
    position: absolute;
    left:0;
    bottom:0;    
    z-index:1;
    visibility: hidden;    
    -webkit-transition:all .3s ease 0s;
    -moz-transition:all .3s ease 0s;
    -o-transition:all .3s ease 0s;
    transition:all .3s ease 0s; 
}

.page-gallery:hover .image-caption {    
    width: 80%;
    visibility: visible;
    /*transition:all .2s ease-in 0s; */
}

.page-gallery .image-caption .image-caption-text {
    font-size:26px;
    font-weight: 500;
    color:#000;   
    margin:0;
    padding:0; 
    opacity:0;
    -webkit-transition:all 0s ease .25s;
    -moz-transition:all 0s ease .25s;
    -o-transition:all 0s ease .25s;
    transition:all 0s ease .25s; 
    visibility: hidden;
    white-space: nowrap;    
}

.page-gallery:hover .image-caption .image-caption-text {
    opacity:100%;
    visibility: visible;/*
    -webkit-transition:ease; 
    -moz-transition:ease; 
    -o-transition:ease; 
    transition:ease; */
}






/* Modal menu media queries for screens-sizes */
/*
@media only screen and (max-width: 1023px) and (min-width: 768px) {  }
@media only screen and (max-width: 767px) and (min-width: 540px) {  }
*/

.profiles { 
    background-color:transparent;  
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;       
    text-decoration:none; 
    /*perspective: 1000px;   */     
    height:auto;
    /*height:300px;*/
    
    
    width:auto;
    /*min-width:280px;*/
}
.profiles:nth-of-type(odd) { border-right: 1px solid #ccc; width:calc(100% - 1px); }


.profiles-content { 
    background-color:#fff;    
    margin:0px;
    padding:0;
    text-decoration:none; 
    
    height:200px;
    width: calc(100% - 0px);
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;   
    transition: transform 0.6s;
    /*position:relative;*/
}
/*.profiles-content-inner { border:0; }*/
/*.profiles-content-transparent { background-color:transparent; border:0; }*/
/*.profiles:hover .profiles-content { transform: rotateY(180deg); }*/
.profiles-content-left, 
.profiles-content-right {        
    height: 100%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding:0;
    /*overflow: hidden;*/
}
.profiles-content-left { height:200px; width:200px; }
.profiles-content-right { width:calc(100% - 230px); padding:15px; }
.profiles-content-right h2 { color:#333; font-size:2rem; font-weight:500; }
.profiles-content-right h4 { color:#333; font-size:1.4rem; font-weight:500; }
.profiles-content-right h4 span { font-size:1.3rem; font-weight:500; line-height:1.4rem; }
.profiles-content-left img { background-color: #fff; color: black; height:200px; width:200px; }  





/* Modal menu media queries for screens-sizes */
@media only screen and (max-width: 1199px) and (min-width: 1024px) {

}
@media only screen and (max-width: 1023px) and (min-width: 768px) {

}
@media only screen and (max-width: 767px) and (min-width: 540px) {

}
@media only all and (max-width: 539px) and (min-width: 320px) {
    .index-title {
        font-size: 2rem;
        font-weight: 500;
        position: relative;
    }    
}
/* Modal menu media queries for screens-sizes */
/*
@media only screen and (min-width: 1281px) {  }
@media only screen and (max-width: 1280px) and (min-width: 1025px) {  }
@media only screen and (max-width: 1024px) and (min-width: 769px) {  }
@media only screen and (max-width: 768px) and (min-width: 541px) {  }
@media only all and (max-width: 540px) and (min-width: 320px) {  }
*/

#map { padding:0; margin:0; width: 100%; }
.btn-submit, 
.btn-reset {
    background-color: #174c78;
    border:0;
    color:#fff;
    font-size:1em;
    margin:20px 0 0;
    padding:10px 20px;
    text-align:center;
    width: 200px;
}
.btn-submit:hover, 
.btn-reset:hover { background-color: #db3139; color: #fff; }

/*
 * Footer Prefooter and Signature
 */
footer { background-color: #f1d2d7; height:auto; letter-spacing:1px; background-position:top center; background-repeat:no-repeat; background-image:url("../images/site/footer.png"); background-size: contain;}



.footer-columns { color:#505b71; font-size:1em; font-weight:500; }
.footer-columns-title { border-bottom:1px dotted #505b71; font-size:1em; line-height:1; font-weight:600; }
.footer-columns p, .footer-columns p a,
.footer-columns .list-group .list-group-item { color:#505b71; font-size:0.9em; font-weight:500; }



.contact-companyname {
    font-size: 1.2em;
    text-shadow: none;
    font-weight: 600;
}
.contact-owner,
.contact-address,
.contact-telephones,
.contact-mobiles,
.contact-emails { font-size:0.9em; text-shadow:none; }

.social-media-box { border-top:1px dotted #505b71; padding-top:5px; }
footer a,
.social-media-box .footer-social {color:#505b71; font-size:1.4em; text-decoration:none; }
footer a:hover,
.social-media-box .footer-social:hover,
.footer-columns .list-group .list-group-item:hover {color:var(--menu-hover-link);}

.signature { 
    background-color:#fff; 
    height:auto;
    display:flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row; 
    text-align:center; 
}
.copyright, 
.dev_by { 
    font-size:.9em; 
    font-weight:400; 
    text-shadow:none; 
}
.copyright { color:var(--sign-copyright-color); font-weight:700; text-shadow:none; } 

.dev_by { color:var(--sign-designdedby-color); text-shadow:none; }
.dev_by_link { 
    color:var(--sign-designdedby-color); 
    font-size:.9em; 
    font-weight:700; 
    padding:0;
    text-shadow:none; 
}
.dev_by_link:hover { 
    color:var(--sign-designdedby-color-hover); text-shadow:none; 
}


/*
@media only screen and (min-width: 1281px) {  }
@media only screen and (max-width: 1280px) and (min-width: 1025px) {  }
@media only screen and (max-width: 1024px) and (min-width: 769px) {  }
@media only screen and (max-width: 768px) and (min-width: 541px) {  }
@media only all and (max-width: 540px) and (min-width: 320px) {  }
*/

/* ************************************************
 *                                                *
 * ******************* Extras ******************* *
 *                                                *
 ************************************************ */

.card .card-img-overlay-hover-toggle {
    background-color:transparent; 
    display:flex; 
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    height:auto; 
    margin:0; 
    padding:5px 10px; 
    text-decoration:none; 
    z-index:1; 
    position:absolute; 
    top:initial; 
    bottom:0; 
    right:0; 
    left:0;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;  
}
.card .card-img-overlay-hover-toggle > h5,
.card .card-img-overlay-hover-toggle > p  {
    color:#000;     
    font-size:10pt; 
    font-weight:bold; 
    height:auto; 
    margin:0 10px;
    padding:0 10px;   
    visibility:hidden;
    -webkit-transition:top .6s ease;
    -moz-transition:top .6s ease;
    -o-transition:top .6s ease;
    transition:top .6s ease;  
}
.card .card-img-overlay-hover-toggle > p { 
    font-weight:normal; 
}
.card:hover .card-img-overlay-hover-toggle {
    background-color:rgb(255,255,255); 
    background-color:rgba(255,255,255,0.50);  
}
.card:hover .card-img-overlay-hover-toggle > h5,
.card:hover .card-img-overlay-hover-toggle > p {
    visibility:visible;
}
.card-body h2, .card-body h3 {
    font-size: 1.25rem;
    font-weight: 500;
}


/* Styles under page.php */
/* * Pagination */
/*
    .page-link { 
        color:#000; 
        background-color: #fff; 
        border: 1px solid #cc0000; 
    }
    .page-link:hover { 
        color: #fff; 
        background-color: #cc0000; 
        border-color: #cc0000; 
    }
    .page-item {
        &:first-child {
            .page-link { border-color: #e80172; }
        }
    }
    .page-item.active .page-link { 
        color: #fff; 
        background-color: #cc0000; 
        border-color: #cc0000; 
    }
    .page-item.disabled .page-link { 
        color: #fff; 
        background-color: #eee; 
        border-color: #cc0000; 
        cursor: not-allowed; 
    }
*/


/* START breadcrumb style */
.breadcrumb {
    background-color:#eee;
    background-image: url("../gfx/site/background.jpg");
    background-position:top left;
    background-repeat:repeat;

    float:left;
    display:block;
    height:auto;
    margin:0 auto;
    padding:0;
    width:auto;
}
.breadcrumb .col { background-color:transparent; margin:0; padding:0; }
.breadcrumb .content { padding:5px 0; width:80%; }
#bread-nav {
    background-color:transparent;
    float:left;
    list-style:none;
    margin:10px auto 0;
    padding:0;
    width:auto;
}
#bread-nav li {
    float:left;
    font-size:0.9em;
    font-weight:400;
    margin:0 auto;
    padding:0;
    text-transform: uppercase;
}
#bread-nav li.sep, 
#bread-nav li a {
    color:#fff;
    float:left;
    height:auto;
    padding:0;
    text-decoration:none;    
    width:auto;
}
#bread-nav li a { font-weight:600; } 
#bread-nav li a:hover { color:var(--breadcrumb-hover-link); } 
#bread-nav li#here,
#bread-nav li#here a {
    color:var(--breadcrumb-current-link);
    float:left;
    font-weight:500;
    margin:0 auto;
    padding:0;
    width:auto;
}
/* END__ breadcrumb style */