/* Media Query */

@media only screen and (max-width:770px){
 footer{
   padding:1%;
   text-align:left;
 }
 .footer-container{
    position:relative;
    left:2%;
    width:70%;
    margin:auto;
    text-align:center;
 }

 footer .footer-link{
     margin:3 auto;
 }

.footer-text{
  display:none;
}

.footer-icons{
  margin-right:10%;
}


 .logo-text-heading{
   color:red;
   font-size:2.7rem;
   font-family:;
}
.logo-text-subheading{
    color:red;
    font-size:1.5rem;
    margin: 1% auto;
}




.table-style{
  margin-top:3%;
  width:100%;
}

/*
.homeBtn{
  border:1px solid #fff;
  font-size:1.2rem;
}*/
/*new style*/
.homeBtn{
  font-size:1.3rem;
  border-radius: 10px;
  padding: 7px;
  top:15%;
  right:5%;
}
.page-title{
   margin: 2% auto;
}
.img-logo{
  width: 100%;
  height:30vh;
  border: 1px solid powderblue;
  box-shadow: 1px 1px 8px 4px cyan;
  padding: 30px;
}

/* Guessing Number */
.backbtn-div{
   padding-top:3%;
}

.text{
   margin:10% auto;
   font-size:2rem;
}

.img-style{
  display: block;
  margin:15% auto;
  width:80%;
}

.guess-row-style{
 margin:auto;
 text-align:left;
 padding:2%;
}
.guess-label{
  color:red;
  font-size:1.8rem;
}
.guess-input{
  width:50%;
  padding:2% 1%;
  font-size:1.5rem;

}
.guessBtn{
  margin-top:7%;
  font-size:1.5rem;
  width:30%;
}

/* Blog index page */

.blogindex-div{
  margin:0 7%;
}

/* Blog Page */

.div-float-section{
  margin: 5% 7%;
  padding:2%;
}

.style-container{
  padding:1%;
  margin:5% auto;
}
/* Contact Page */
.contact-title{
  color:red;
  text-align:center;
  font-size:2.2rem;
}

.contact-body{
  width:100%;
  border:1px solid grey;
  border-radius:20px;
  padding:5%;
  margin:10% auto;


}

.contact-body label{
  color:red;
  letter-spacing:2px;
  font-family : arial;
  font-size:1.5rem;
  padding:3% 0 2% 0;
}

.contact-body input, .contact-body textarea{
    color:blue;
    font-family : cambria math;
    font-size:1.5rem;
    width:100%;
    border:1px solid dodgerblue;
    border-radius : 5px;
    outline:none;
    padding:2%;
    margin-bottom: 3%;
}

.contact-body input[type="submit"]{
   margin-top:7%;
   color:#fff;
}

/* News Page */

.news-row-style{
  color:red;
  padding:1%;
  margin: 10% auto;
  border:none;
}

.news-title{
  font-size:1.5rem;
}

.news-dt{
 font-size:1.3rem;
}

.news-img{
  margin:10% auto;
  width:100%;
}

.news-data{
  text-align:left;
  font-size:1.2rem;
  font-weight:400;
  word-wrap: break-word;
  width:100%;
}
.btn-readmore-row{
  margin:auto;
}

.btn-news-readmore-row{
  margin:auto;
}
.btn-news-control-row{
  margin:5% auto 2% auto;
}

.news-btn{
  margin-bottom:5%;
  width:100%;
  padding:3% 2%;
  font-size:1.3rem;
  letter-spacing:2px;
}

/* Admin */

/* Login page */

.admin-login-row{
  margin:10% auto;
}

.admin-login-form-style{
 margin:3% auto;
 box-shadow: none;
 width:100%;
 padding:2%;
 border:none;
}

.login-table {
    margin:1% auto;
    width:100%;
    text-align:center;
    border-collapse: separate;
    border-spacing: 0 2em;
}

.login-table input[type = "submit"]{
   position:relative;
   left:13%;
   width:40%;
   font-size:1.3rem;
}

.logout-item-style{
  margin: 3% 4%;
}
.admin-logout{
  padding:15px;
  letter-spacing: 3px;
}

.appDivRow{
    margin:3% 0.5%;
    width:99%;
}

.appDiv{
    border:2px solid green;
    padding:2% 0.1%;
    background-color:#fff;
    border-radius:20px;
    margin-bottom:2px;
    width:24.3%;
    margin-right:2px;
}

.appImg{
 width:50px; 
 height:50px;
 border-radius:50px;
 margin:auto;   
}

.appDesc{
  font-size:12px;
  font-family:cambria;
  color:green;
  font-weight:bold;
  text-align:center;
}


/* share market data */

/* Error page */

.content{
  margin:50% auto;

}
.error-label{
  font-size : 2.5rem;
  line-height:1.5;
 }

/* Alert Section */

#alert-div{
  width:75%;
  }

#alert-div-title{
  font-size:1.3rem;
  padding:1.5% 2%;
}

#alert-box{
  padding:3% 5%;
}

#alert-text{
  font-size:1.2rem;
  text-align:justify;
  letter-spacing:0.5px;
}
#alert-button-div{
 text-align:center;
}

#alert-ok-btn{
   font-size:1.2rem;
   width:40%;
   padding:1%;
   margin: 3% auto 3% auto;
}
@keyframes anim {
  0%   {   box-shadow: 1px 1px 8px 2px cyan;}
  50%  {   box-shadow: 1px 1px 8px 6px cyan;}
  100% {    box-shadow: 1px 1px 8px 8px cyan;}
}
}