#firsthead {
    padding: 8px 50px 8px 50px;
    
}

#secondhead {
    background-color: #026bb7;
    
    
}
#empty {
    padding: 20px 50px;
    height: 100px;
    
}
.navtext{
  color: #026bb7;
}

@media screen and (max-width:1200px) {

    @media screen and (max-width:800px) {

        #footericon {
            width: 200px;
        }
      
    }
    #firsthead {
      padding: 8px 8px 8px 8px;
        
    }

}
    

* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: "Montserrat",Helvetica,Arial,sans-serif;
}

.topnav {
  overflow: hidden;
  
}

.topnav a {
  float: right;
  display: block;
  color: 026bb7;
  text-align: center;
  padding: 10px 16px 10px 16px;
  text-decoration: none;
  font-size: medium;
}

.topnav a:hover {
  background-color: #026bb7;
      border-radius: 25px;
       text-shadow: -.25px -.25px 0 white, 
                .25px .25px white;
  color: white;
}


.topnav #logolink {
    float: left;
    padding: 0px 0px 0px 0px;
}

.topnav #logolink:hover {
    background-color: white;
        border-radius: 0px;
         text-shadow: -.25px -.25px 0 none, 
                  .25px .25px none;
    color: none;

  }
  textarea {
    border: none;
    background-color: transparent;
    resize: none;
    outline: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
.topnav .search-container {
    width: 40%;
    color: #31bcea ;
    padding: 0px 16px;
  border: 1px solid #31bcea;
  background-color: transparent;
    margin-right: 20px;
  float: right;
}

::-webkit-input-placeholder{
  color: #31bcea ;
}
@media screen and (max-width: 1250px) {
    .topnav .search-container {
      width: 33%;
    }
 
    @media screen and (max-width: 1000px) {
      
   
      .topnav a {
    
        padding: 10px 5px 10px 5px;
        font-size: small;
      }
   
    }
  }

.topnav input[type=text] {
  padding: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  font-size: 20px;
  color: #31bcea;
  padding: 5px 5px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}


.topnav .icon {
  display: none;
}

.topnav #mobilesearch {
  display: none;
}





@media screen and (max-width: 1000px) {
  .topnav li:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    font-size:20px;
	   padding: 2px 5px; 
    float: right;
    color: white;
    margin-left: 10px;
    margin-right: 10px;
    display: block;
    background-color: #007bff;
     text-shadow: -.25px -.25px 0 white, 
              .25px .25px white;
    margin-top: 5px;
    
  }
  .topnav #mobilesearch {
    font-size:20px;
    padding: 2px 5px; 
   float: right;
   color: #31bcea;
   margin-left: 10px;
   margin-right: 10px;
   display: block;
   border: transparent;
   background-color: transparent;
    text-shadow: -.25px -.25px 0 white, 
             .25px .25px white;
   margin-top: 5px;
    display: block;
  }
  .topnav a.icon:hover {
     border-radius: 0px;   
  }
  
  .topnav .search-container {
    display: none;
 
}
}



@media screen and (max-width: 1000px) {
  .navtext{
    display: none;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive li{
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}




#justice-div{
  position: absolute;
  bottom: 2vw;
  right: 2vw;
  list-style:none;

}
#justice-div img{
  width: 11vw;

}

  #videodiv{
    position: absolute;
    top: 15vw;
    left: 8vw;
    margin-right: 30vw;
    list-style:none;
    padding: 5px 0px 5px 0px;
  }
  #videotext{
    color: #fff;
    font-size: 5.5vw;
    font-weight: bolder;
  
  }
  #videobutton{
    color: #fff;
    font-size: medium;
    padding:10px 32px;
    border-radius: 25px;
    background-color: #026bb7;
    text-decoration:none;
   
  }
  #videobutton2{
    color: #fff;
    font-size: medium;
    margin-top: 30px;
    padding:10px 32px;
    border-radius: 25px;
    background-color: #026bb7;
    text-decoration:none;
   
  }
  #videobutton a:hover{
    text-decoration:none;
  }
  @media screen  and (max-width: 700px) {

    #justice-div img{
      width: 10vw;
    
    }
    #videodiv{
      top: 24vw;
      left: 8vw;
      margin-right: 30vw;
   
    }
    #videotext{
      font-size: 6vw;
    
    
    }
  
  }
  #nav2{
    width: 100%;
    position: absolute;
    top: 0px;
    text-align: center;
    background-color:#026bb7;
    list-style:none;
    padding: 10px 0px 10px 0px;
    opacity: 0.9;
  
    text-align:center;
  }
  #nav2 a{
    display:inline-block;
    color:white;
    font-size: medium;
    text-decoration:none;
    font-weight:bold;
  }
 
  .dropdown-content {
    margin-left: 28%;
    position: absolute;
    top: 44px;
    opacity: 0.9;
    display: none;

    padding: 5px 5px;;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
.dropdown-content a:hover {background-color: #ddd;}

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  @media screen and (max-width: 1200px) {
   
    #nav2 a{
      font-size: small;
     
    }
      }
    @media screen and (max-width: 1000px) {
   
  #nav2{
    display: none;
  }
      
    }
    
  
  .navandvideo {
    position: relative;
  }
  .video-container {
    width: 100%;
    overflow: hidden;
    display: flex;
    
    justify-content: center;
    }
    
    #video-bg{
      width:100%;
     
    }

    @media screen and (max-width: 1200px) {

      #video-bg{
        width:120%;
       
      }

    }
    @media screen and (max-width: 1000px) {

      #video-bg{
        width:140%;
       
      }

     
    }
    @media screen and (max-width: 800px) {
      #video-bg{
        width:160%;
       
      }
     
    }
    #mobile_menu{
      display: none;
    }

    @media screen and (max-width: 1000px) {
   
      body {
        margin: 0;
     }
      
      
      .mobilenav{
        z-index: +100;
        position: fixed;
      height: 60px;
      width: 100%;
       text-align: center;
       background-color: #026bb7;
        border: 1px solid transparent;
       
      }
      
      #nav2mobile{
          width: 100%;
          padding: 80px 20px 20px 20px;
          text-align: center;
          list-style:none;
        }
        #nav2mobile li{
          display:inline;
        }
        #nav2mobile a{
          display:inline-block;
          padding:5px 16px;
          color:white;
                border-radius: 25px;
          border: 1px solid #026bb7;
        background-color: #026bb7;
          font-size: small;
          margin: 1%;
          text-decoration:none;
        
        }
        @media screen and (max-width: 1000px) {
          #nav2mobile a{
            font-size: 2.5vw;
          }
        }
         .mobilenav p{
           padding-top:15px;
         padding-left: 100px;
          color:white;
          position: relative;
          font-size:17px;
          font-weight:bold;
        }
       
        #nav2mobile a:hover{
          text-decoration:none;
        }
        .iconclose{
        padding-right: 15px;
          font-size:25px;
             float:right;
          color: white;
             font-weight:bold;
          
        }
        .iconclose:hover{
          text-decoration:none;
        }
         .mobile-menu-item-title {
          font-size: large ;
              text-decoration:none;
          font-weight: bold;
          color: #026bb7;
      }
          
        }


        .content {
          width: 100%;
          border-bottom: 1px solid #70707044;
          padding-left: 2vw;
          padding-right: 2vw;
          padding-top: 2vw;
        }
          .title {
            
            font-size: 2.5vw;
        }

        @media screen and (max-width: 800px) {
          .title {
            
            font-size: 5vw;
        }
        .who h2{
          font-size: 4.5vw;
        }
        }
            
        .headings {
          height: 0.7vh;
           width:5vw;
           margin-top: -7px;
           margin-bottom: 10px;
          border: 1px solid #31bcea;
          background-color: #31bcea;
          border-radius: 25px;
          font-weight: bold;
        }

        .grid {
          display: grid;
          grid-template-rows: repeat(4, 180px);
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 5px;
      }
      
      .item:nth-child(1) {
          grid-row: 1 / 4;
      }
      
      .item:nth-child(2) {
          grid-column: 2 / 4;
          grid-row: 1 / 3;
      }
      
      .item:nth-child(3) {
          grid-column: 3 / 4;
          grid-row: 3 / 5;
      }
      
      .item:nth-child(4) {
          grid-column: 2 / 3;
          grid-row: 3 / 4;
      }
      
      .item:nth-child(5) {
          grid-column: 1 / 3;
          grid-row: 4 / 5;
      }
      
      .grid {
          margin: 20px auto;
      

      }
      
      .grid > .item {
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
      }

      .containere h2{
        font-size: large;
        margin: 5px 0px 0px 0px;
      }
      .carde {
        margin: 3% 1%;
        height: 94%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        background-color: #fafafa;

      }
      
      .containere {
        padding: 0 16px;
      }
      
      .containere::after, .rowe::after {
        content: "";
        clear: both;
        display: table;
      }
      
      .titlee {
        color: grey;
      }

      .containere .titlee{
        font-size: medium;
        font-style: italic;
        margin: 0px 0px 0px 0px;

      }
      .containere p{
        font-size: small;
        
      }
      @media screen and (max-width: 800px) {
        .containere h2{
          font-size: medium;
          margin: 5px 0px 0px 0px;
        }
        .containere .titlee{
          font-size: small;
          font-style: italic;
          margin: 0px 0px 0px 0px;

        }
        .containere p{
          font-size: x-small;
          
        }
      }
   

      .carousel-control.left, .carousel-control.right {
	background-image:none;
}

.img-responsive{
	width:100%;
	height:auto;
}

@media (min-width: 992px ) {
	.carousel-inner .active.left {
		left: -25%;
	}
	.carousel-inner .next {
		left:  25%;
	}
	.carousel-inner .prev {
		left: -25%;
	}
}

@media (min-width: 768px) and (max-width: 991px ) {
	.carousel-inner .active.left {
		left: -33.3%;
	}
	.carousel-inner .next {
		left:  33.3%;
	}
	.carousel-inner .prev {
		left: -33.3%;
	}
	.active > div:first-child {
		display:block;
	}
	.active > div:first-child + div {
		display:block;
	}
	.active > div:last-child {
		display:none;
	}
}

@media (max-width: 767px) {
	.carousel-inner .active.left {
		left: -100%;
	}
	.carousel-inner .next {
		left:  100%;
	}
	.carousel-inner .prev {
		left: -100%;
	}
	.active > div {
		display:none;
	}
	.active > div:first-child {
		display:block;
	}
}

#districts{
  background-color: #026bb7;

}

.mobile-menu-item-title {
  font-size: large ;
      text-decoration:none;
  font-weight: bold;
  color: #026bb7;
}