






@media (min-width:0px) and (max-width:400px) {
   
.descdiv1{
 height: 234px;  
}

.descdiv2{
 height: 200px;  
}

.popuppopin{
    padding: 20px;
}
}














@media (min-width:401px) and (max-width:450px) {

.descdiv1{
 height: 234px;  
}

.descdiv2{
 height: 234px;  
}

.popuppopin{
    padding: 20px;
}
}
/* 5 blue */


















@media (min-width:451px) and (max-width:600px) {

.descdiv1{
 height: 234px;  
}

.descdiv2{
 height: 234px;  
}

.popuppopin{
    padding: 20px;
}


} /* 4 green */




















@media (min-width:601px) and (max-width:768px) {

.descdiv1{
 height: 131px;  
}

.descdiv2{
 height: 131px;  
}

.popuppopin{
    padding: 20px;
}

} /* 4 green */











@media (min-width:769px) and (max-width:850px) {
 
.descdiv1{
 height: 234px;  
}

.descdiv2{
 height: 234px;  
}

.popuppopin{
    padding: 20px;
}
} /* 3 brown */








@media (min-width:851px) and (max-width:992px) {
 
.descdiv1{
 height: 234px;  
}

.descdiv2{
 height: 234px;  
}

.popuppopin{
    padding: 30px;
}
} /* 3 brown */
















@media (min-width:993px) and (max-width:1000px) {

.descdiv1{
 height: 234px;  
}

.descdiv2{
 height: 234px;  
}

.popuppopin{
    padding: 50px;
}
} /* 2  orange */






















@media (min-width:1001px) and (max-width:1199px) {

.descdiv1{
 height: 234px;  
}

.descdiv2{
 height: 234px;  
}

.popuppopin{
    padding: 80px;
}
} /* 2  darkorange */


















@media (min-width:1200px) and (max-width:1299px) {

.descdiv1{
 height: 234px;  
}

.descdiv2{
 height: 234px;  
}

.popuppopin{
    padding: 100px;
}
}





@media (min-width:1300px) and (max-width:1499px) {

.descdiv1{
 height: 234px;  
}
.descdiv2{
 height: 234px;  
}

.popuppopin{
    padding: 150px;
}
}


@media (min-width:1500px) and (max-width:1599px) {

.descdiv1{
 height: 234px;  
}
.descdiv2{
 height: 234px;  
}

.popuppopin{
    padding: 150px;
}
}



@media (min-width:1600px) and (max-width:1799px) {

.descdiv1{
 height: 234px;  
}
.descdiv2{
 height: 234px;  
}

.popuppopin{
    padding: 150px;
}
}



@media (min-width:1800px) and (max-width:5000px) {

.descdiv1{
 height: 234px;  
}
.descdiv2{
 height: 234px;  
}

.popuppopin{
    padding: 150px;
}
}


/* 1 yellow 1 */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */
/* yellow */


.descdiv1{
    
 position: relative;   width:100%;   overflow: hidden;
    
}


.descdiv2{
  position: relative;   width:100%;   overflow: hidden;
}

.descdiv1moreread{
    position: absolute; bottom: 0px; right: 0px; width:138px; height: 28px; 
    color:#666; background-color: #fff; color: #00c9ff;
}

.descdiv2moreread{
    position: absolute; bottom: 0px; right: 0px; width:100%; height: 33px; 
    color:#666; background-color: #fff; color: #00c9ff; text-align: center;
}

.nav-item .active{
    color:#ccc!important;
}

.nav-item .nav-link{
    color:#fff;
}

.navbar-nav .nav-link:hover{
    color:#ccc;
}