/*=============================================================
        Authour URL: www.designbootstrap.com
        
        http://www.designbootstrap.com/

        License: MIT

        http://opensource.org/licenses/MIT

        100% Free To use For Personal And Commercial Use.

        IN EXCHANGE JUST TELL PEOPLE ABOUT THIS WEBSITE
       
        ========================================================  */

    /*==============================
    GENERAL STYLES
    ==============================*/

    @import url(https://fonts.googleapis.com/css?family=Anton|Maven+Pro:500,700);
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap" rel="stylesheet');

body {
        font-family: 'Poppins', sans-serif!important;
        font-size: 14px; 
        font-weight: 400;
        line-height: normal;
        color:#000000;
    }


    @media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2) {

        .box {padding: 15px 15px 50px 15px !important;}
        #progress-bar.progress-bar-design{margin-top: 3em!important;}

        .card {width: auto!important;margin: 2%;}


    }

  /*** New design ***/
        .navbar {
            width: 100%;
            background-color: white;
            color: black;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            border-block: 1px solid black;
            top: 0;
            z-index: 1000;
        }

        .navbar .menu {
            display: flex;
            gap: 20px;
        }

        .navbar a {
            color: black;
            text-decoration: none;
        }

        .navbar a:hover {
            color:#99004d;
        }

        .grid-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 10px;
            width: 80%;
            margin: 0 auto;
            padding: 80px 10px; /* Adjusted padding */
            box-sizing: border-box;
        }

        .grid-item {
            flex: 1 1 calc(33.33% - 10px); /* Default: 3 items per row */
            max-width: calc(33.33% - 10px);
            height: auto;
            position: relative;
            background-color: #ddd;
            overflow: hidden;
            transition: border 0.3s ease;
            border: 2px solid white; 
        }

        .grid-item:hover {
            border: 2px solid #99004d; /* Hover border */
        }

        .grid-item a {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media (max-width: 768px) {
            .grid-item {
                flex: 1 1 calc(50% - 10px); /* 2 items per row */
                max-width: calc(50% - 10px);
            }
        }

        @media (max-width: 480px) {
            .grid-item {
                flex: 1 1 100%; /* 1 item per row */
                max-width: 100%;
            }
        }

        .grid-item::before {
            content: "";
            display: block;
            padding-top: 100%; /* Maintain square aspect ratio */
        }

        .grid-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

  /*** FONTS ***/

  /* main title*/
  .font1 {
      font-family: 'Poppins', sans-serif!important;
      font-size: 1.8em; 
      font-weight: 900;
      line-height: 1.1;
      color:#231f20;
  }

  /* sub-title*/
    .font2 {
      font-family: 'Poppins', sans-serif!important;
      font-size: 1.4em; 
      font-weight: 600;
      line-height: 1.1;
      color:#000000;
      margin: 40px;
  }
  /* option title*/
      .font3 {
      font-family: 'Poppins', sans-serif!important;
      font-size: 1.2em; 
      font-weight: 600;
      line-height: normal;
      color:#000000; 
  }

    /* Themes and Questions*/
      .font4 {
      font-family: 'Poppins', sans-serif!important;
      font-size: 1em; 
      font-weight: 600;
      line-height: normal;
      color:#000000; 
  }


      /* hyperlinks*/
      .font5 {
      font-family: 'Poppins', sans-serif!important;
      font-size: 16px; 
      font-weight: 500;
      line-height: normal;
      color:#000000;
  }

      .containers a {
        color: #000000!important;
        text-decoration: underline;
      }

      .containers a:hover,
      a:focus {
        color: #000000;
        text-decoration: underline;
      }

      /* start over*/
      .font6 {
      font-family: 'Poppins', sans-serif!important;
      font-size: 14px; 
      font-weight: 400;
      line-height: normal;
      color:#000000;
    }

      .containers .buttons a {
        color: #231f20!important;
        text-decoration: none;
      }

      .containers .buttons a:hover,
      a:focus {
        color: #231f20!important;
        text-decoration: underline;
      }

 /* checklists*/
    #accordionchecklist li {
    color: #231f20!important;
    padding: 3px 0px;
  }

  /* divider */

.divider{
  width:20%;
  height:1px;
  border-width:0;
  color:#231f20;
  background-color:#231f20;
  margin: 40px auto;
}

/* navigation bar toggle*/
.navbar-toggle{
  margin-top:15px!important;
}

  /* body*/

  /* Index menu*/
.menu_macro_container{
width:280px;
margin-top:3%;
margin-left:auto;
margin-right:auto;
position:relative;
}

.menu_micro_container{
width:100%;
position:absolute;
top:15px;
right:0px;
}

.menu_objects_container{
cursor:pointer;
position:absolute;
width:100px;
height:108px;
top:180px;
left:20px;
}

.menu_visuals_container{
cursor:pointer;
position:absolute;
width:100px;
height:118px;
top:310px;
left:-30px;
}

.menu_about_container{
cursor:pointer;
position:absolute;
width:60px;
height:70px;
top:390px;
left:120px;
}

.menu_miner_img{
width:200px;
position:absolute;
top:100px;
right:-80px;
}

.menu_poposh_title_img{
width:100%;
position:absolute;
top:0px;
right:0px;
}

.menu_objects_title_img{
width:100%;
position:absolute;
top:68px;
left:0px;
}

.menu_visuals_title_img{
width:100%;
position:absolute;
top:74px;
left:0px;
}

.menu_about_title_img{
width:100%;
position:absolute;
top:25px;
left:0px;
}

.menu_objects_rock_img{
width:80%;
position:absolute;
top:0px;
left:10px;
}

.menu_visuals_rock_img{
width:80%;
position:absolute;
top:0px;
left:10px;
}

.menu_about_rock_img{
width:80%;
position:absolute;
top:0px;
left:10px;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

.menu_macro_container{
  width:500px;
  margin-top:5px;
}
.menu_micro_container{
  top:110px;
}

.menu_objects_container{
  width:140px;
  height:150px;
}
.menu_visuals_container{
  width:140px;
  height:152px;
  top:350px;
  left:-60px;
}
.menu_about_container{
  width:100px;
  height:110px;
  top:450px;
}

.menu_objects_title_img{
  top:90px;
}
.menu_visuals_title_img{
  top:90px;
}
.menu_about_title_img{
  top:45px;
}

.menu_miner_img{
  width:320px;
}

} 


  /* buttons



    /* Portrait */
    @media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {

        .box {padding: 15px 15px 50px 15px !important;}
        #progress-bar.progress-bar-design{margin-top: 3em!important;}
            .card {width: auto!important;margin: 2%;}
    }

    /* Landscape */
    @media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px)
    and (-webkit-min-device-pixel-ratio: 1)
    and (orientation: landscape) {

        .box {padding: 15px 15px 50px 15px !important;}
        .card {width: auto!important;margin: 2%;}

    }


    @media only screen 
    and (min-device-width: 540px) 
    and (max-device-width: 720px) 
    and (-webkit-min-device-pixel-ratio: 1) {
    	.box {padding: 15px 15px 50px 15px !important;}
        #progress-bar.progress-bar-design{margin-top: 3em!important;}
            .card {width: auto!important;margin: 2%;}
    }
    @media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) {
    	.box {padding: 15px 15px 50px 15px !important;}
        #progress-bar.progress-bar-design{margin-top: 3em!important;}

    }
    .row{
      margin-right: 0px !important;
      margin-left: 0px !important;
  }

  .header_text{

   margin: 15px 0px;
   color: #fff;
   font-weight: bold;
}

.pad-bottom {
    padding-bottom: 20px;
}

.pad-bottom-large {
    padding-bottom: 40px;
}

.pad-bottom-small {
    padding-bottom: 10px;
}

.pad-med{
  padding-top: 30px;
  padding-bottom: 30px;
}

section {
    padding-bottom: 150px;
    padding-top: 80px;
}

.btn {
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
}

.set-bk-clr {
    background-color: #00CCFF;
}

.clr-set {
    color: #00CCFF;
}

.f-big {
    font-size: 40px;
    font-weight: 900;
}

.set-bk-clr:hover {
    background-color: rgba(0, 204, 255, 0.67)
}

.ui-widget-content {
  color: #231f20!important;
  font-family: 'Poppins', sans-serif!important;
}

.ui-state-default {
  color: #231f20!important;
  font-family: 'Poppins', sans-serif!important;
}

.ui-state-active {
  color: #ffffff!important;
}

.ui-helper-reset {
  line-height:22px!important;
}
    /*==============================
    NAVBAR STYLES
    ==============================
    .navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
        color: #fff;
        font-size: 20px;
        text-transform: uppercase;
    }
    .navbar-brand {
        padding:0px;

    }
    .navbar-brand img {
        height:60px;
    }
    .navbar-default .navbar-toggle {
        border-color: #FFF;
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #000000;
    }

    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
        background-color: rgba(0, 0, 0, 0);
    }

    .navbar-default .navbar-nav > li > a {
        color: #000000;
        font-weight: 400;
    }

    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
        color: #99004d;
        text-decoration: underline;
    }

    .navbar-default {
        background-color: #ffffff!important;
        border-color: transparent;
    }


 /* Filippo edit navbar mobile icon
.navbar-toggle {
  border:none!important;
}

*/
    /* ADDED PADDING IN NAVBAR 
    .navbar {
        padding: 5px;
        -webkit-transition: background .8s ease-out,padding .8s ease-out;
        -moz-transition: background .8s ease-out,padding .8s ease-out;
        transition: background .8s ease-out,padding .8s ease-out;
        border-bottom: 1px solid #000000;
    }

    */

    /* CLASS FOR REMOVING PADDING IN NAVBAR
    .navbar-pad-original {
       padding: 5px 0 10px 0;
   }

   .navbar-default .navbar-nav > .active > a,
   .navbar-default .navbar-nav > .active > a:hover,
   .navbar-default .navbar-nav > .active > a:focus {
    color: #99004d;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
*/

    /* =============================================================
      HEADER SECTION STYLES
      ============================================================ */

      #header {
        padding: 0;
        -webkit-background-size: cover;
        background-size: cover;
        -moz-background-size: cover;
        background-attachment: fixed;
        color: #fff;
    }

    #header .overlay {
        background-color: #ededed;
        min-height: 600px;
    }

    #header h1 {
        line-height: 60px;
        font-size: 45px;
        font-weight: 900;
        padding-top: 180px;
        padding-bottom: 35px;
        color: #00CCFF;
    }


    #header h4 {
        line-height: 30px;
        font-size: 14px;
        padding-bottom: 40px;
        text-transform: uppercase;
    }

    /*================================
        SERVICES STYLES
        ==================================*/
        #services {
            background-color: #ffffff;

        }

        #services i {
          font-size: 25px;
          padding: 0px 5px;
          color: #000000;
      }

        #services #accordionchecklist i {
            color: #000000;
        }


      #services h4 {
        padding-bottom: 5px;
        padding-top: 15px;
    }

    .box{
      border:3px solid black;
      padding:10px;
      border-radius: 10px;
      background-color: #FFFFFF;
    }

    .box.blue-border{
        border: 3px solid #0F4DFA;
    }

    /* Video container */

.col-sm-6{
  padding:15px!important;
}

    /* =============================================================
      CONTACT SECTION STYLES
      ============================================================ */
      .contact {
        padding: 0;
        -webkit-background-size: cover;
        background-size: cover;
        -moz-background-size: cover;
        background-attachment: fixed;
        
    }


    .contact .overlay {
        background-color: #ffffff;
        padding-top: 20px;
        color: #000000;
    }

    .contact .color a, li  {
      color: #c3c3c3;
  }



    /* =============================================================
      FOOTER SECTION STYLES
      ============================================================ */
      footer {
        font-size: 14px;
        text-align: center;
        background-color: #000000;
        padding:20px;
    }

    footer a, footer a:hover {
        color: #000;
        text-decoration: none;
    }

      .footrow{
        float: right;
      }

      .footer button{
        padding:5px 30px;
        border: 1px solid transparent;
        border-radius: 20px; 
        font-weight:500;
        cursor:pointer;
        background-color: #0F4DFA;
        color: #fff;
      }

      .footer button.start-button{
        padding:5px 30px;
        border: 1px solid transparent;
        border-radius: 20px; 
        font-weight:500;
        cursor:pointer;
        background-color: #0F4DFA;
        color: #fff;
      }

      .footer button.start-button:hover {
      filter: brightness(90%);
      }


      .footer button.download-button{
        padding:5px 30px;
        border: 3px solid #0F4DFA;
        border-radius: 20px; 
        font-weight:500;
        cursor:pointer;
        background-color: transparent;
        color: #0F4DFA;
      }

      .footer button.download-button:hover{
        padding:5px 30px;
        border: 3px solid #0F4DFA;
        border-radius: 20px; 
        font-weight:500;
        cursor:pointer;
        background-color: #0F4DFA;
        color: #fff;filter: none;
      }



    


    /* Copyright
    --------------------------------------------------------------------------------------------------------------- */
    #copyright{padding:30px 0;}
    #copyright *{margin:0; padding:0;}

    /*Progress Bar*/
    .off-screen {
      height: 1px;
      left: -50000px;
      overflow: hidden;
      position: absolute;
      top: 0;
      width: 1px;
  }

  #progress-bar {
      position: relative;
      padding-top: 4px;
      margin-bottom: 1.5em;
      color: #4d483f;
  }
  #progress-bar.progress-bar-design {
      position: relative;
      padding-top: 10%;
      margin-bottom: 1.5em;
      color: #4d483f;
  }

  #progress-bar #progress-steps {
      height: 4px;
      width: 100%;
      margin: 0;
      padding: 0;
      display: block;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
      background-color: #fff;
      position: relative;
      list-style-type: none;
      counter-reset: item;
  }
  .policydesign #progress-bar #progress-steps li.progress-step:nth-of-type(1) {width: 0%!important;}
  .policydesign #progress-bar #progress-steps li.progress-step:nth-of-type(2) {width: 33.3333333333%!important;}
  .policydesign #progress-bar #progress-steps li.progress-step:nth-of-type(3) {width: 33.3333333333%!important;}
  .policydesign #progress-bar #progress-steps li.progress-step:nth-of-type(4) {width: 33.3333333333%!important;}

  .policyscreening #progress-bar #progress-steps li.progress-step:nth-of-type(1) {width: 0%!important;}
  .policyscreening #progress-bar #progress-steps li.progress-step:nth-of-type(2) {width: 50%!important;}
  .policyscreening #progress-bar #progress-steps li.progress-step:nth-of-type(3) {width: 50%!important;}
  
  #progress-bar .progress-step {
      width: 16.66%;
      height: 4px;
      float: left;
      margin: 0;
      padding: 0;
      position: relative;
  }
  #progress-bar .count:before {
      content: counter(item) " ";
      counter-increment: item;
      display: block;
      width: 14px;
      height: 14px;
      background-color: #fff;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
      position: absolute;
      right: -10px;
      top: -5px;
      padding: 2px 0 0 6px;
      font-size: 0px;
      font-weight: bold;
      z-index: 999;
  }
  #progress-bar .highlight-index:before {
      background-color: #0F4DFA;
      color: #0F4DFA;
  }
  #progress-bar .highlight-index {
      background-color: #0F4DFA;
      display: block;
      height: 100%;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
  }
  #progress-bar .description {
      display: block;
      text-align: center;
      width: 64%;
      right: -32%;
      position: absolute;
      bottom: 10px;
      font-size: 0.9em;
      margin:5px;
  }
  #progress-bar .bolded-step {
      font-weight: normal !important;
  }

  #progress-bar .highlight-description{
   color:#0F4DFA;
   font-weight: 600;
}

/*CUstom CSS*/
.policyscreeningareabox.selected{
   /*background:#96a6e9*/
}

.policyscreeningareasbox.selected{
   /*background:#96a6e9*/
}

.buttons{
   padding-top: 40px;
}
button.back{
    background:none;	
    border:3px solid #231f20;
    color:#231f20;
}
button.back:hover{
    background:#231f20;	
    border:3px solid #231f20;
    color:white;
}
button.next{
    background:#231f20;  
    border:3px solid #231f20;
    color:white;
}
button.next:hover{
    background:#000000; 
    border:3px solid #000000;
    color:white;
}
button.reset{
    background:#fff;	
    border:3px solid #231f20;
    color:#231f20;
}
button.reset:hover{
    background:#231f20;	
    border:3px solid #231f20;
    color:white;
}

button.startover{
    background:none;  
    border:none;
    padding:0;
    color:#231f20;
    font-weight: 500;
    cursor:pointer;
}


button.startover:hover{
    text-decoration: underline;
}


.box.summary , .box.summary li{
   background: #fff;
   border-radius: 10px;
   color:#231f20!important;
   border:none;
}


.palert .ui-dialog-titlebar-close{display:none!important;}
.palert .ui-draggable .ui-dialog-titlebar, .palert .ui-widget-header {
    cursor: none!important;
    background: #fff!important;
    color: #231f20!important;
    border:none;
}
.palert .ui-dialog-buttonset .ui-button{

   background: #fff!important;
   color: #231f20!important;
   border-radius: 20px!important;
   border:2px solid #231f20!important;

}
.palert .ui-dialog-buttonset .ui-button:hover{

   background: #231f20!important;
   color: white!important;
   border-radius: 20px!important;

}
.palert .ui-widget-content{text-align:center!important;}
.palert .ui-dialog-buttonpane{padding-right: 50!important;}

.ui-dialog{
   z-index:999999999!important;
   top:50%!important;
   position:fixed!important;
   border-radius:5%!important;
   box-shadow: 4px 5px 20px 4px #888888;
   text-align:center;


}

.pconfirm{/*width: 75vw!important;*/}
.ui-dialog-buttonpane.ui-widget-content.ui-helper-clearfix{border:none}

.ui-dialog a{color:#0F4DFA!important;}
.ui-dialog .ui-dialog-title{width:100%!important;white-space: pre-wrap!important;}
.pconfirm .ui-dialog-titlebar-close{display:none!important;}
.pconfirm .ui-draggable .ui-dialog-titlebar, .pconfirm .ui-widget-header {
    cursor: none!important;
    background: #fff!important;
    color: #231f20!important;
    border:none;

}
.pconfirm .ui-dialog-buttonset{
   width:100%!important;
}
.pconfirm .ui-dialog-buttonset .ui-button{

   background: #fff!important;
   color: #231f20!important;
   border-radius: 20px!important;
   border:2px solid #231f20!important;

}
.pconfirm .ui-dialog-buttonset .ui-button:hover{

   background: #231f20!important;
   color: white!important;
   border-radius: 20px!important;
   border:2px solid #231f20;

}
.pconfirm .ui-dialog-buttonset .ui-button:nth-child(1){

   float: left!important;

}
.pconfirm .ui-dialog-buttonset .ui-button:nth-child(2){

   float: right!important;

}
.pconfirm .ui-widget-content{text-align:center!important;}
.pconfirm .ui-dialog-buttonpane{padding-right: 0!important;}

#progress-bar .description{

   line-height:100%
}


/*Accordion CSS*/

#accordion h3{
    font-family: 'Poppins', sans-serif!important;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    border: 3px solid #0f4dfa;
    padding: 15px 5px;
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;
}

#accordion h3.ui-state-active{
    font-family: 'Poppins', sans-serif!important;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    border: 3px solid #0f4dfa;
    padding: 15px 5px;
    border-radius: 10px 10px 0px 0px;
    background-color: #0f4dfa;
    cursor: pointer;
}

#accordionchecklist h3{
    font-family: 'Poppins', sans-serif!important;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    border: 3px solid #000000;
    padding: 15px 5px;
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;
}

#accordionchecklist h3.ui-state-active{
    font-family: 'Poppins', sans-serif!important;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    border: 3px solid #000000;
    padding: 15px 5px;
    border-radius: 10px 10px 0px 0px;
    background-color: #000000;
    cursor: pointer;
}


.ui-accordion h3 .ui-icon{right: -95%!important;display: none}
.ui-accordion h3 .ion-minus-circled{display: none;}
.ui-accordion h3 .ion-plus-circled{display: block;padding-right: 10px!important;padding-top: 2px!important;}
.ui-accordion h3.ui-state-active .ion-minus-circled{display: block;}
.ui-accordion h3.ui-state-active .ion-plus-circled{display: none;}
.ui-accordion h3.ui-state-active .ui-icon{right: -98%!important;display: none}
.ui-accordion .ui-accordion-header{margin: 20px 0 0 0!important;}
.ui-accordion .ui-accordion-content{height:auto!important;border-radius:0px 0px 10px 10px;border:3px solid #0f4dfa}

#accordionchecklist .ui-accordion-content{height:auto!important;border-radius:0px 0px 10px 10px;border:3px solid #000000}


.col-sm-1{padding-top: 5%;}
.acc.opticon{padding-top:0%;}
.acc.col-md-12{background: #F3F3F3!important;
    padding: 15px 15px;
        border-radius: 10px;
        background-color: #fff;
        cursor:pointer;
        overflow: auto;
}
.ck.col-md-12{background: #F3F3F3;border-radius: 10px;padding: 10px 10px;}
span.italic{ font-style: italic;}
.acc.col-md-12 a{color: #0f4dfa;}
i.color-black{color: black!important;}
.htable{width: 100%}
.srtd{width: 1%;}
.htd{width: 95%;padding-left: 5px;}
.itd{width: 4%;}
.ion-minus-circled{color: white!important;}

#accordioncontactlist i{color: black!important}
#accordioncontactlist .ui-accordion-header{margin: 0px!important;}
#accordioncontactlist .ui-accordion-header , #accordioncontactlist .ui-accordion-content
{background: none!important;border: none!important;color: black!important;}
#accordioncontactlist .ui-accordion-content{padding: 0em 2em!important;}
#accordioncontactlist .ui-accordion-content li{color: black;line-height: 2.0em;}
.carousel-control{width: 0%!important}


    /* ============================================================= 
      Gallery
      ============================================================ */

.menu-option .circle {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: transparent;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.menu-option:hover .circle {
  background-color: #99004d;
}

.gallery-box {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0;
  padding:4px;
}

.gallery-item {
  width: 45%;
  max-width: 400px;
  margin: 2%;
  border:1px solid transparent;
  text-align: center;
  background-color: #ffffff;
  cursor: pointer;
  color:#000000;
  font-family: 'Poppins', sans-serif!important;
  font-size: 16px; 
  font-weight: 500;
  line-height: 100%;
}

.book.gallery-box{
  padding:0px;
  justify-content: center;
  margin:14px 0;
}

.book-item {
  width: 45%;
  max-height: 650px;
  margin: 2px;
}

.gallery-item:hover {
  color:#99004d;
  border:1px solid #99004d;
  }

  .gallery-item a {
  color: #000000!important;
  text-decoration: none;
}

  .gallery-item a:hover,
  a:focus {
    color: #99004d!important;
     text-decoration: none;
  }


.gallery-item-image {
width:100%;
text-decoration:none;
margin-bottom: 8px;
}

.project-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin: 10px 0;
  border: 1px solid red;
}

.project-img-landscape {
width:100%;
max-width: 650px;
text-decoration:none;
margin-right: auto;
margin-left: auto;
}

.project-img-portrait{
width:auto;
max-height: 650px;
text-decoration:none;
margin-right: auto;
margin-left: auto;
}

    /* Portrait */
    @media only screen 
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {
        .project-img-portrait{width:80%;max-width: 650px;height:auto;}
    }


    /* ============================================================= */

.hrline{border-top: 1px solid #0F4DFA;margin: 50px;width:30%;margin-left:auto;margin-right:auto;}
.glyphicon {color: grey;text-shadow: none!important;}
.carousel-control{opacity: 1;}
.glyphicon:hover{color: #0F4DFA;}
.carousel-indicators li{background-color: grey}
.carousel-indicators .active{background-color: #0F4DFA;}
span.black {
    background: black;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.3em;
    text-align: center;
    width: 1.3em;
    margin-right: 7px;
}

.ui-state-active span.black {
    background: white;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #0f4dfa;
    display: inline-block;
    font-weight: bold;
    line-height: 1.3em;
    text-align: center;
    width: 1.3em;
    margin-right: 7px;
}

.optrow{display: flex;align-items: center;}
.opticon{float: left;padding-right: 1px;}
.optrow.align-top{align-items: start;}
.optlabel{float: right;}