@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700&display=swap');
    body{
        background-color:#F0F0F0;
    }
    
    .circle img.selected {
    max-width: 100%;
    border-radius: 50%;
    border: 5px solid #009cdd;
}
.sdma-number1 {
    font-size: 40px;
    color: #F4A9A7;
}
.sdma-number2{
    font-size: 40px;
    margin-top:20px;
}
.backhome {
    padding: 3px 10px 0px;
    width: 10%;
    float: left;
    background: #009CDD;
    margin-right: 20px;
    margin-left: -30px;
}
    #carousel .slides {
margin:0px auto;
    max-width: 1524px;
}
    #carousel {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 75%; /* Aspect ratio of 4:3 */
        overflow: hidden;
      }
      
   

      @media (min-width: 600px) {
        #carousel {
          height: auto; /* Aspect ratio of 4:3 */
          padding-bottom: 0;
        }
      }

.workflow-final {
    max-width: 100%;
    text-align: center;
    background: #9a9b9c;
    position: absolute;
    width: 100%;
    left: 0px;
}
.circle-container {
    background: url(images/shade-background.png);
    min-height: 1000px;
    background-size: 800px;
    background-repeat: no-repeat;
    background-position: 152px 190px;
    max-width: 1000px;
    margin: 0px auto;
}
.workflow-final img{
    max-width:70%;
    margin:0px auto;
}
.roboto-slab-light-class{
    font-family: 'Roboto Slab', serif;
    font-weight:300;
}
.roboto-slab-light-regular{
    font-family: 'Roboto Slab', serif;
    font-weight:300;
}
.roboto-slab-footer {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
}

.sdma-graph-right {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 20px;
    float: right;
    max-width: 50%;
}
.slide-overlay {
    background-image: url(images/shadebackground.png);
    background-size:cover;
    background-position:center center;
    position: absolute;
    width: 85%;
    font-family: 'Roboto Slab', serif;
    color: #ffffff;
    text-align: center;
    font-size: 25px;
}
.bold-white{
    font-weight:600;
}
.roboto-slab-light-regular .bold-white{
    font-weight:600;
}
.workflow-inner-slide-left {
    width: 30%;
    float: right;
    padding: 5%;
    font-size: 35px;
    color: #666666;
    background-image: url(images/roadblock.jpg);
background-position: center right;
background-size: cover;
    height: 600px;
}

.pink-box {
    background: transparent;
    margin-top: 30px;
    display: inline-block;
    padding: 5px 20px !important;
    color: #ffffff !important;
}
      #carousel .slides {
        position: relative;
        height: 100%;
      }

      #carousel .slide {
        float: left;
        width: 25%;
        height: 100%;
        background-size: cover;
        background-position: center;
      }

     #carousel .arrow {
    position: absolute;
    top: 40%;
    width: 40px;
    padding: 5px 10px 20px;
    height: 40px;
    cursor: pointer;
    background-color: rgba(0,0,0,0.5);
    color: white;
    font-size: 36px;
    line-height: 50px;
    text-align: center;
}

      #carousel .arrow:hover {
        background-color: #009cdd;
      }

      #carousel .arrow.left {
        left: 0px;
      }
#carousel .arrow.rightlast {
    right: 0px;
    margin-right: 0px !important;
}
      #carousel .arrow.right {
        right: 0px;
      }
.inner-slide {
    margin: 30px auto;
    min-height: 600px;
    width: 85%;
    box-shadow: 0px 10px 10px #666666;
    overflow:hidden !important;
    background: #1A2732;
}
.slide-top {
    padding: 40px 60px;
    background-color: #1A2732;
    color: #ffffff;
    font-size: 36px;
}
.inner-slide-left {
    width: 40%;
    float: left;
    padding: 5%;
    font-size: 30px;
    color: #222;
}
.inner-slide-right {
    width: 40%;
    float: right;
    padding: 5%;
}
.inner-slide-right img{
   max-width:100%;
}



.habri-inner-slide-left {
    width: 30%;
    float: left;
    padding: 5%;
    font-size: 35px;
    color: #666666;
    background-image: url(images/habri-cat.png);
    background-position: center center;
    background-size: cover;
    height: 600px;
}
.habri-inner-slide-right {
    width: 60%;
    float: right;
    padding: 0%;
    background-color:#BCBDBC;
}
.habri-inner-slide-left img{
   max-width:100%;
}
.workflow-inner-slide-left {
    width: 35%;
    float: right;
    padding: 5%;
    font-size: 35px;
    color: #666666;
    background-image: url(images/roadblock.jpg);
    background-position: center right;
    background-size: cover;
    height: 600px;
}
.sdma-right {
    padding: 5%;
    min-height: 400px;
    background: #1A2732;
    color: #cccccc;
}
.sdma-graph-left{
    float:left;
    width:50%;
}
.sdma-inner-slide {
    margin: 30px auto;
    min-height: 600px;
    width: 85%;
    box-shadow: 0px 10px 10px #666666;
    overflow: hidden !important;
    background: #ececec;
}
.sdma-slide-top {
    padding: 40px 60px;
    background-color: #BCBDBC;
    color: #1A2732;
    font-size: 35px;
}
.study-inner-slide-left {
    width: 30%;
    float: right;
    padding: 5%;
    font-size: 35px;
    color: #666666;
    background-image: url(images/study-dog.jpg);
    background-position: center center;
    background-size: cover;
    height: 600px;
}
.study-inner-slide-right {
    width: 60%;
    float: left;
    padding: 0%;
    background-color:#BCBDBC;
}
.study-inner-slide-left img{
   max-width:100%;
}
.workflow-inner-slide-right {
    width: 55%;
    float: left;
    padding: 0%;
    background-color:#BCBDBC;
}
.stat-large{
    font-weight: 100;
    font-size: 1.5em;
    line-height: 1em;
}
.disc-sm{
    font-size:10px;
        line-height: 15px;

}
.habri-right-top {
    font-size: 40px;
    padding:8%;
    line-height: 50px;
}

.workflow-right-top {
    font-size: 40px;
    padding:8%;
    line-height: 50px;
}
.study-right-top {
    font-size: 40px;
    padding:8%;
    line-height: 50px;
}
.habri-right-top {
    font-size: 40px;
    padding: 10%;
    line-height: 50px;
}
.habri-right-bottom{
    background-color:#1A2732;
    color:#ffffff;
     font-size: 40px;
         padding:8%;
    line-height: 45px;
}
.catdog-inner-slide-right {
    width: 50%;
    float: right;
    padding: 0%;
}
.study-right-bottom {
    background-color: #1A2732;
    color: #ffffff;
    font-size: 35px;
    padding: 6%8%;
    line-height: 35px;
    font-weight: 300;
}
.disc{
    clear:both;
    font-size:.8em;
    padding:20px 40px;
    border-bottom:#F4A9A7 solid 40px;
}
#carousel{
    background-color:#F0F0F0;
}

body{
    margin:0px;
    padding:0px;
}
.footer{
    clear:both;
    position:fixed;
    bottom:0px;
    background-color:#F4A9A7;
    min-width:100%;
}
.footer-left{
   background:#1A2732;
   padding:2%;
   width:66%;
   float:left;
   color:#ffffff;
   font-size:30px;
   padding-top:50px;
      padding-bottom:50px;

}
.footer-right {
    background: #F4A9A7;
    padding: 70px 0%;
    width: 22%;
    float: right;
}
.footer-right img{
    max-width:70%;
    margin:0px auto;
}
.footer-dog{
       padding:0px 2%;
   width:10%;
   float:left;    
      }
      
      .footer-dog img{
          max-width:100%;
      }
#carousel-home {
    background-image: url(images/circle-background.jpg);
    background-size: cover;
    background-position: top center;
    min-height: 1050px;
}
      
      .circle-1 {
    float: left;
    max-width: 200px;
    margin: 29% 0px 0px 11%;
}
      
    .circle-2 {
    float: right;
    max-width: 200px;
    margin: 29% 9.5% 0px 0px;
}
      
    .circle-3 {
    float: left;
    margin-top: 8%;
    margin-left: 13%;
}
      
      .circle-4 {
    float: left;
    margin: 27% 0% 0% 5%;
}
      
     .circle-5 {
    float: right;
    margin-top: 8.5%;
    left: -12%;
    position: relative;
}
      
      .label1{
    position: absolute;
    margin-left: -80px;
    margin-top: 100px;
    font-size: 20px;
    color: #ffffff;
       font-family: 'Roboto Slab', serif;
    font-weight:300;
      }
      
     .label2 {
    position: absolute;
    margin-left: 210px;
    margin-top: 80px;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    MAX-WIDTH: 150px;
}
      
     .label3 {
    position: absolute;
    margin-left: -80px;
    margin-top: 210px;
    font-size: 20px;
    color: #000000;
    MAX-WIDTH: 120px;
    text-align: center;
       font-family: 'Roboto Slab', serif;
    font-weight:300;
}
      
      .label4 {
    position: absolute;
    margin-left: 0px;
    margin-top: -60px;
    font-size: 20px;
    color: #000000;
    max-width: 190px;
    text-align: center;
       font-family: 'Roboto Slab', serif;
    font-weight:300;
}
      
     .label5 {
    position: absolute;
    margin-left: 160px;
    margin-top: 180px;
    font-size: 20px;
    color: #FFFFFF;
    text-align: CENTER;
       font-family: 'Roboto Slab', serif;
    font-weight:300;
}
      
      
      .circle{
       max-width:200px;
      }
      .circle:hover { transform: scale(1.1); }
     .circle img {
    max-width: 100%;
    border-radius: 50%;
        
}
.pc-circle2{
    border:4px solid #009cdd;
}


.pc-circle2 {
	transform: scale(1);
	animation: pulse 2s infinite;
}

.circle img:hover{
	transform: scale(.95);
	animation: pulse 2s infinite;
	border:4px solid #009cdd;
padding:3px;
margin:-7px 0px 0px -7px;


  -moz-outline-radius: 7px; /* ONLY WORKS WITH MOZILLA */

    -webkit-animation: pulse 1.0s cubic-bezier(0.66, 0.67, 0.83, 0.99) infinite;
       -moz-animation: pulse 1.0s cubic-bezier(0.66, 0.67, 0.83, 0.99) infinite;
         -o-animation: pulse 1.0s cubic-bezier(0.66, 0.67, 0.83, 0.99) infinite;
            animation: pulse 1.0s cubic-bezier(0.66, 0.67, 0.83, 0.99) infinite;
}
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 #009cdd;
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px #555555;
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 transparent;
	}
}
      .circle-row-1{
          max-width:650px;
          margin:0px auto;
      }
      .circle-row-2{
          clear:both;
                    max-width:950px;
          margin:0px auto;
      }
      
       #carousel {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 75%; /* Aspect ratio of 4:3 */
        overflow: hidden;
      }
         #carousel .slides .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 1s;
      }

      #carousel .slides .slide.active {
        opacity: 1;
      }
      
      
      @media only screen and (max-width: 1190px) {
          .circle-1 {
    float: left;
    max-width: 160px;
    margin: 20.5% 0px 0px 18.5%;
}
      
   .circle-2 {
    float: right;
    max-width: 160px;
    margin: 20% 17% 0px 0px;
}
      
   .circle-3 {
    float: left;
    margin-top: 7%;
    margin-left: 20%;
    max-width: 160px;
}
      
      .circle-4 {
    float: left;
    max-width: 160px;
    margin: 22% 0% 0% 4%;
}
      
  .circle-5 {
    float: right;
    margin-top: 7.5%;
    max-width: 160px;
    left: -19%;
    position: relative;
}

#carousel-home {
    background-image: url(images/circle-background.jpg);
    background-size: cover;
    background-position: center -115px;
    min-height: 1050px;
}
      .circle-container {
    background: url(images/shade-background.png);
    min-height: 1000px;
    background-size: 650px;
    background-repeat: no-repeat;
    background-position: 217px 132px;
    max-width: 1000px;
    margin: 0px auto;
}


.footer-left {
    background: #1A2732;
    padding: 2%;
    width: 66%;
    float: left;
    color: #ffffff;
    font-size: 30px;
    padding-top: 50px;
    padding-bottom: 30px;
    min-height: 56px;
    text-align: center;
    font-weight: 300;
}

.footer-right {
    background: #F4A9A7;
    padding: 50px 0%;
    width: 22%;
    float: right;
}





    .label1{
    position: absolute;
    margin-left: -60px;
    margin-top: 100px;
    font-size: 16px;
    color: #ffffff;
       font-family: 'Roboto Slab', serif;
    font-weight:300;
      }
      
    .label2 {
    position: absolute;
    margin-left: 170px;
    margin-top: 80px;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    MAX-WIDTH: 110px;
}
      
     .label3 {
    position: absolute;
    margin-left: -60px;
    margin-top: 160px;
    font-size: 16px;
    color: #000000;
    MAX-WIDTH: 100px;
    text-align: center;
       font-family: 'Roboto Slab', serif;
    font-weight:300;
}
    .label4 {
    position: absolute;
    margin-left: 10px;
    margin-top: -50px;
    font-size: 16px;
    color: #000000;
    max-width: 155px;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
}
      
     .label5 {
    position: absolute;
    margin-left: 140px;
    margin-top: 160px;
    font-size: 16px;
    color: #FFFFFF;
    text-align: CENTER;
       font-family: 'Roboto Slab', serif;
    font-weight:300;
}

.footer-left {
    background: #1A2732;
    padding: 2%;
    width: 66%;
    float: left;
    color: #ffffff;
    font-size: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    min-height: 56px;
    text-align: left;
    font-weight: 300;
}
.habri-right-top {
    font-size: 28px;
    padding: 9% 10%;
    line-height: 35px;
}
.habri-right-bottom {
    background-color: #1A2732;
    color: #ffffff;
    font-size: 27px;
    padding: 8%;
    line-height: 35px;
}
.habri-inner-slide-left {
    width: 30%;
    float: left;
    padding: 5%;
    font-size: 35px;
    color: #666666;
    background-image: url(images/habri-cat.png);
    background-position: center center;
    background-size: cover;
    height: 390px;
}
.footer-right {
    background: #F4A9A7;
    padding: 40px 0%;
    width: 22%;
    float: right;
}

.inner-slide-left {
    width: 40%;
    float: left;
    padding: 4% 5% 0px 5%;
    line-height: 30px;
    font-size: 22px;
    color: #333333;
    line-height: 25px;
}

.disc {
    clear: both;
    font-size: .02em !important;
    padding: 0px 40px 10px;
    border-bottom: #F4A9A7 solid 24px;
}
.slide-top {
    padding: 40px 60px;
    background-color: #1A2732;
    color: #ffffff;
    font-size: 25px;
    line-height:32px;
}
.inner-slide {
    margin: 30px auto;
    min-height: 500px !important;
    width: 85%;
    box-shadow: 0px 10px 10px #666666;
    overflow: hidden !important;
    background: #1A2732;
}
.study-right-top {
    font-size: 30px;
    padding: 8%;
    line-height: 35px;
}
.study-right-bottom {
    background-color: #1A2732;
    color: #ffffff;
    font-size: 25px;
    padding: 6%8%;
    line-height: 30px;
    font-weight: 300;
}
.study-inner-slide-left {
    width: 30%;
    float: right;
    padding: 5%;
    font-size: 35px;
    color: #666666;
    background-image: url(images/study-dog.jpg);
    background-position: center center;
    background-size: cover;
    height: 412px;
}
.pink-box {
    background: transparent;
    margin-top: 10px;
    display: inline-block;
    padding: 5px 20px !important;
    font-size: 25px !important;
    color: #ffffff !important;
}
.disc-sm {
    font-size: .3em;
    color:#cccccc;
    line-height: 1.5em;
}

.bold-white{
    font-weight:600;
}

.sdma-slide-top {
    padding: 40px 60px;
    background-color: #BCBDBC;
    color: #1A2732;
    font-size: 24px;
}
.sdma-right {
    padding: 5% 2% 2%;
    min-height: 260px;
    background: #1A2732;
    color: #cccccc;
    width: 46%;
}
.sdma-graph-right {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 16px;
}
.sdma-inner-slide {
    margin: 30px auto;
    min-height: 500px;
    width: 85%;
    box-shadow: 0px 10px 10px #666666;
    overflow: hidden !important;
    background: #ececec;
}

.workflow-right-top {
    font-size: 30px;
    padding: 10%;
    line-height: 35px;
}
.study-right-bottom {
    background-color: #1A2732;
    color: #ffffff;
    font-size: 25px;
    padding: 8% 10%;
    line-height: 35\0px;
    font-weight: 300;
}
.workflow-inner-slide-left {
    width: 35%;
    float: right;
    padding: 5%;
    font-size: 35px;
    color: #666666;
    background-image: url(images/roadblock.jpg);
    background-position: center right;
    background-size: cover;
    height: 400px;
}
.workflow-final {
    max-width: 100%;
    text-align: center;
    background: #9a9b9c;
    position: absolute;
    width: 100%;
    left: 0px;
    padding-top: 0% !important;
    margin-top: 73px !important;
}
.slide-overlay div {
    padding-top: 25%;
    font-size: 30px;
    color: #ececec;
}

.overlay-container {
    padding: 8% 10% 0px !important;
}
.roboto-slab-light-regular .bold-white {
    font-weight: 600;
}
}
@media only screen and (max-width: 1000px) {
       .circle-container {
    background: none;
  
}
}

.overlay-container{
    padding:150px;
}

 @media only screen and (max-width: 800px) {
       .slide-top {
    padding: 40px 60px;
    background-color: #1A2732;
    color: #ffffff;
    font-size: 18px;
    line-height: 25px;
}
}


.roboto-slab-light-regular .bold-white {
    font-weight: 600;
}