*{
margin:0;
padding:0;
border:0;
outline:focus;
}
* {
    box-sizing: border-box;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,contain {
display:block;
}
img {
    max-width: 100%;
    height: auto;
}
body{
   background-color:#585858 !important;
	margin:0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.list-group-item {
    background-color:#f0f0f0 !important;
   transition: background-color .10s !important;
}
.list-group a:hover {
    background-color:#b0b0b0 !important;
}
.list-group-item{
    color:#101010 !important;
}
/***************************************************************************************************/
/* Extra small devices (START SIZE 1)*/
@media (max-width: 308.98px) {
.welcome h5{
 font-size:8px;
}
.container-fluid{
 display:none;   
}
#top_title h1{
  font-size:1.5em;
}
#top_title{
    width:119%;
    margin:-.3em 0 0 -1.2em;
 }
#container h2{
font-size:.6em;
}
#container h1{
font-size:.9em;
}
.container3 > .btn{
float:left;
clear:both;
}
.abc{
    font-size:.8em;
}
.popular{
    width:100%;
    margin-top:11em;
    margin-right:-4em;
    line-height:.6;
}
.popular h3{
    font-size:.7em;
}
.popPage{
    width:100%;
 }
.popPage h4{
    font-size:.6em;
 }
.col-3{
    width:100% !important;
    margin-left:0;
    padding:0;
    border:none;
 }
.col-3 h3{
     font-size:.9em;
 }
.col-3 h1{
     font-size:.7em;
 }
.col-3 a{
     font-size:.8em;
 }
.list-group-item{
 font-size:8px;   
}
.col-9 h1{
    font-size:1.2em;
}
.col-9 h3{
    font-size:1.1em;
}
.col-9 h4{
    font-size:.9em;
}
.col-9 p{
    font-size:.8em;
}
.col-9 .btn{
    font-size:.7em !important;
    padding:3px 6px !important;
}
.control-label{
    color:#808080;
}
.content3{
max-width:100%;
width:100%; 
padding:0;
margin-bottom:2em;
clear:both;
}
.content3 h3{
font-size:.9em; 
}
.cont h3{
font-size:.7em;
}
.cont h2{
font-size:.6em;
}
.wrap {
max-width:50%;
width:50%; 
margin:0 auto 0 7em;
}
.wrap h1{
  font-size:.6em !important;  
}
#wrap h1{
 font-size:1em;   
}
#wrap h4{
  font-size:1.1em;   
}
#wrap p{
font-size:.8em;
}
#notes_form h1{
 font-size:.8em;    
}
#favorite_h3{
 font-size:1em;   
}
.form-control{
width:20em !important;
height:30px;
}
#favorite_h3 img{
 width:20px;   
}
.wrap1 {
max-width:50%;
width:50%; 
margin:0 auto 0 6em;
}
.wrap1 h2{
  font-size:.6em;  
}
#frame img{/*Home Page */
max-width:63%;
width:63%;
}
}
/******************************************************************************************/
/* Extra small devices (START SIZE 4)*/
@media (min-width:273px) and (max-width:300px){
#navigation{
height:2em;
}
#top_title{
width:120%;
margin:-.5em 0 0 -2.3em;
 }
.form-control{
width:24em !important;
 }
}
/******************************************************************************************/
/* Extra small devices (START SIZE )*/
@media (min-width:301px) and (max-width:309px){
#navigation{
height:2em;
}
#top_title{
width:118.4%;
margin:-.5em 0 0 -2.3em;
 }    
}
/******************************************************************************************/
/* Extra small devices (START SIZE )*/
@media (min-width:310px) and (max-width:339px){
#top_title{
width:116.2% !important;
margin:-.5em 0 0 -2.3em;
 } 
.col-9 h1{
font-size:1.3em;
}
 .col-3{
width:97% !important;
 }
.content3{
max-width:100% !important;
width:100%; 
padding:0;
margin-top:1em;
margin-bottom:1em;
}
.content3 h3{
font-size:1.1em; 
}
}
/******************************************************************************************/
/* Extra small devices (START SIZE )*/
@media (min-width:340px) and (max-width:370px){
.col-9 h1{
    font-size:1.8em;
} 
#notes_form h1{
 font-size:1.2em;    
}
#wrap p{
font-size:.9em;
}
#favorite_h3 .label{
 font-size:.8em;   
}
#favorite_h3 img{
 width:27px;   
}
.form-control{
width:23em !important;
height:100%;
}
.content3{
max-width:87%;
width:87%; 
padding:0;
margin-top:1em;
margin-bottom:1em;
}    
}
/******************************************************************************************/
/* Extra small devices (START SIZE )*/
@media (min-width:371px) and (max-width:413px){
.col-9 h1{
    font-size:1.8em;
} 
.col-3{
width:100% !important;
 }
#notes_form h1{
 font-size:1.2em;    
}
#wrap p{
font-size:.9em;
}
#favorite_h3 .label{
 font-size:.8em;   
}
#favorite_h3 img{
 width:27px;   
}
.form-control{
width:24em !important;
height:100%;
}
.content3{
max-width:87%;
width:87%; 
padding:0;
margin-top:1em;
margin-bottom:1em;
}    
}
/***********************************************************************************************/
/***********************************************************************************************/
/* Extra small devices (START SIZE ) iphone 6/7/8 plus iOS 11*/
@media (min-width: 414.98px) and (max-width: 454px) {
.col-9 h1{
    font-size:1.8em;
} 
.col-9 .btn{
    font-size:.9em !important;
    padding:4px 12px !important;
    margin-bottom:1em;
}
 .col-3{
width:100% !important;
 }
#notes_form h1{
 font-size:1.2em;    
}
#wrap p{
font-size:.9em;
}
#favorite_h3 .label{
 font-size:.8em;   
}
#favorite_h3 img{
 width:27px;   
}
.form-control{
width:27em !important;
height:100%;
}
.content3{
max-width:100% !important;
width:100%!important; 
padding:0;
margin-top:1em;
margin-bottom:1em;
}
.col-3 .list-group{
font-size:.8em !important;
}
}    
/******************************************************************************************/
/******************************************************************************************/
/* Extra small devices (SIZE )*/
@media (min-width:455px) and (max-width:500px){
.col-9 .btn{
    font-size:.9em !important;
    padding:4px 12px !important;
    margin-bottom:1em;
}    
}  
/******************************************************************************************/
/* Extra small devices (SIZE )*/
@media (min-width:501px) and (max-width:555px){
.col-9 .btn{
    font-size:.9em !important;
    padding:4px 12px !important;
    margin-bottom:1em;
}        
}    
/******************************************************************************************/
/* Medium & Large devices (SIZE ) purple*/
@media (min-width:556px) and (max-width:610px){
.col-9 .btn{
    font-size:.9em !important;
    padding:4px 12px !important;
    margin-bottom:1em;
}        
}    
/******************************************************************************************/
/* Medium & Large devices (SIZE ) */
@media (min-width:611px) and (max-width:660px){
.col-9 .btn{
    font-size:.9em !important;
    padding:4px 12px !important;
    margin-bottom:1em;
}        
}    
/******************************************************************************************/
/* Medium & Large devices (SIZE ) orange*/
@media (min-width:661px) and (max-width:740px){
.col-9 .btn{
    font-size:.9em !important;
    padding:4px 12px !important;
    margin-bottom:1em;
}        
}  
/******************************************************************************************/
/* Medium & Large devices (SIZE )*/
@media (min-width:741px) and (max-width:870px){
    
}
/******************************************************************************************/
/* Medium & Large devices (SIZE )*/
@media (min-width:871px) and (max-width:940px){
    
}
/******************************************************************************************/
/* Medium & Large devices (SIZE )*/
@media (min-width:941px) and (max-width:1000px){
    
}
/******************************************************************************************/
/* Medium & Large devices (SIZE )*/
@media (min-width:1001px) and (max-width:1100px){
    
}
/******************************************************************************************/
/* Medium & Large devices (SIZE brownish)*/
@media (min-width:1101px) and (max-width:1200px){
    
}
/******************************************************************************************/
/* Medium & Large devices (SIZE coral)*/
@media (min-width:1201px) and (max-width:1279px){
    
}
/******************************************************************************************/
/* Medium & Large devices (SIZE )*/
@media (min-width:1280px) and (max-width:1370px){
    
}
/******************************************************************************************/
/* Medium & Large devices (SIZE )*/
@media (min-width:1371px) and (max-width:1440px){
    
}
/******************************************************************************************/
/* Medium & Large devices (SIZE )*/
@media (min-width:1441px) and (max-width:1590px){
    
}
/******************************************************************************************/
/* Medium & Large devices (SIZE )*/
@media (min-width:1591px) and (max-width:1700px){
    
}
/******************************************************************************************/
/* Medium & Large devices (SIZE )*/
@media (min-width:1701px) and (max-width:2000px){
    
}
/******************************************************************************************/
/* Medium & Large devices (SIZE )*/
@media (min-width:2001px) and (max-width:3000px){
    
}
/******************************************************************************************/
/* Medium & Large devices (SIZE )*/
@media (min-width:3001px) and (max-width:4000px){
    
}