:root{
    /* --bs-gutter-x:50px; */
    --before-color:#003140;
    --timeline-content-color:#bdeffc;
}

.middleDot{
    font-size: 20px;
}

.navigationIcon{
  width: 30px;
  height: 30px;
  filter: invert(100%);
}

.breadcrumb{
    /* padding-top:70px; */
}
.myimage{
    padding-top: 50px;
    padding-right: 0;
    margin-right: 0;
    width: 100%;
    /* --bs-gutter-x:50%;
    --bs-gutter-y:0;
    padding-right:calc(var(--bs-gutter-x) * .5);
    padding-left:calc(var(--bs-gutter-x) * .5);
    margin-right:auto;margin-left:auto; */
    background-color: white;
}
.imgMyImage::before, .imgMyImage::after{
    /* content: "test"; */
    content:"";
    padding-right: 0px;
    padding-left: 0px;
    margin-left: -15px;
    margin-right: -30px;
    /* outline: solid var(--before-color); */
    display: inline-block;
    color:white;
    background-color: var(--before-color);
    vertical-align: bottom;
    
}
.imgMyImage::before{
    left:0;
    width: 40% !important;
    height: 49px;
    z-index: 3;
}
.imgMyImage::after{
    right: 0;
    width: 40% !important;
    height: 408.23px;
    z-index: 0;
    border-radius: 90% 0 0 0;
    position: absolute;
    /* transform: rotate(-35deg); */
}
.imgMyImageimage{
    width: 544.33px;
    padding: 0;
    margin: 0;
}
body{
    padding-top: 56px;
    overflow-x: hidden;
}


.breadcrumblog{
  overflow-y: auto; max-height: 500px;
}

@import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap");

/* body {
    margin: 0px;
} */

#container_text {
    position: absolute;
    /* margin: auto; */
    width: 500px;
    height: 90pt !important;
    left:15%;
    top: 100px;
    bottom: 0;
    filter: url(#threshold) blur(0.6px);
}

#text1,
#text2 {
    color:#073642 !important;
    position: absolute;
    width: 100%;
    display: inline-block;
    /* font-family: "Raleway", sans-serif; */
    font-size: 52pt;
    text-align: center;
    user-select: none;
}

@media only screen and (max-width:767px){
    .imgMyImageimage{
        padding-top:20px;
        width: 100%;
    }
    .imgMyImage::before, .imgMyImage::after{
        content: initial;
    }
    .breadcrumb{
        padding-top:20px;
    }
    #text1,
    #text2{
        font-size: 25pt  !important;
        width: 80%;
    } 
    #container_text{
        height: 40pt;
        width: 80% !important;
        left:15px !important;
        top: 75px !important;
    }
}
@media only screen and (max-width:840px){
    .imgMyImage::before{
        content: initial;
    }
    .imgMyImage::after{
        /* border-radius: 80% 0 0 0; */
        border-top-left-radius: 100% 60%;
    }
}

.timelineImage{
    width: 50px !important;
    height: 50px;
}

/* other */
* {
    box-sizing: border-box;
  }
  
  body {
    /* font-family: Helvetica, sans-serif; */
  }
  
  /* The actual timeline (the vertical ruler) */
  .timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* The actual timeline (the vertical ruler) */
  .timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: #2aa198;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
  }
  
  /* Container around content */
  .containertimeline {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
  }
  
  /* The circles on the timeline */
  .containertimeline::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -13px;
    background-color: #073642;
    border: 4px solid #2aa198;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
  }
  
  /* Place the container to the left */
  .left {
    left: 0;
  }
  
  /* Place the container to the right */
  .right {
    left: 50%;
  }
  
  /* Add arrows to the left container (pointing right) */
  .left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 31px;
    border: medium solid #2aa198;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--timeline-content-color);
  }
  
  /* Add arrows to the right container (pointing left) */
  .right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid #2aa198;
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--timeline-content-color) transparent transparent;
  }
  
  /* Fix the circle for containers on the right side */
  .right::after {
    left: -13px;
  }
  
  /* The actual content */
  .contenttimeline {
    color:#073642 !important;
    padding: 15px 15px;
    background-color: var(--timeline-content-color);
    position: relative;
    border-radius: 6px;
    line-height: 1;
    display: flex;
  }
  
  /* Media queries - Responsive timeline on screens less than 600px wide */
  @media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .timeline::after {
    left: 31px;
    }
    .contenttimeline{
      display: block !important;
    }
    /* Full-width containers */
    .containertimeline {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
    }
    
    /* Make sure that all arrows are pointing leftwards */
    .containertimeline::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--timeline-content-color) transparent transparent;
    }
  
    /* Make sure all circles are at the same spot */
    .left::after, .right::after {
    left: 18px;
    }
    
    /* Make all right containers behave like the left ones */
    .right {
    left: 0%;
    }
  }

  /* additional css */
  /* html {
    height: 100%;
  }
  body {
    display: flex;
    height: 100%;
    background-color: #333;
  } */
  @import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
  .word {
    margin: auto;
    color: #003140;
    /* font: 700 normal 3em 'tahoma'; */
    font: 700 normal 3em var(--bs-body-font-family);
    
    /* text-shadow: 5px 2px #00b2df, 2px 4px #00b2df, 3px 5px #00b2df; */
  }
  @media screen and (max-width: 600px){
    .word {
      font: 700 normal 2em 'tahoma';
    }
    #imageViewImg{
      margin-top: 120px !important;
      width: 100% !important;
      margin-left: 0 !important;
      height: auto !important;
      display: auto;
    }
    .imageViewClose{
      margin-right: 5px !important;
    }
  }

  /* loading */
  #loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Add animation to "page content" */
  .animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
  }
  
  @-webkit-keyframes animatebottom {
    from { bottom:-100px; opacity:0 } 
    to { bottom:0px; opacity:1 }
  }
  
  @keyframes animatebottom { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 }
  }


  .imageView{
    background-color: #052b34; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    position:fixed; 
    top:0%;
    margin-right: 50px;
  }

  .imageViewClose{
    color: white; 
    margin-top: 65px; 
    float: right; 
    margin-right: 50px;
  }

  .imageViewClose:hover{
    color:#868181;
  }

  #imageViewImg{
    margin-top: 80px;
    display: block;
    margin-right: 50px;
    object-fit:contain;
    height:650px;
    width: 650px;
    margin-left: auto;
    margin-right: auto;
  }

  .blogItems:hover{
    opacity: 0.5;
  }

  .blogItems{
    cursor: pointer;
  }

  .zoom {
    transition: transform .2s;
    margin: 0 auto;
    height: 40px;
    margin: 1px;
  }
  
  .zoom:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5); 
  }