/*bootstrap breakpoints*/
/* Extra small devices (portrait phones, less than 576px)
/* Extra small devices (portrait phones, less than 576px
@media (max-width: 575.98px) {}*/

/* Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {}*/

/* Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {  }*/

/* Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { }*/

/* Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {  }*/

@media (min-width: 768px)  {
    .mobile{display:block;}
    .mobile i{font-size:4em;color:green;}   
    .xl{display:none;}
    div#main{width:auto;}
  
                         
}

@media screen and (max-width: 437px)  {
     .mobile{display:block;}
     .mobile i{font-size:4em; color:#bbb;

          ;}   
     div.xl{display:none;}
     div#main{width:1200em;}
     div #pics {top: 12em;height:41em;}
     div#bottom{width:1200em;}
                              
 }
@media screen   and (min-width:576px){  
     .mobile{display:block;}
.mobile i{font-size:4em;color: brown;}
div#main{width:100%;}   


div.xl{display:none;}

  
 }
  


         @media screen and (min-width: 1200px){
            div.mobile{display:none;}
                 div .xl{ display:block;}
               
                 .mobile i{font-size:4em;color: gold;}}