@media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px){


h1 { font-size: 1.4rem }
.navbar-top { padding: 0 10px 0 10px; border-bottom: 3px solid #014C8F}

.xs-logo { position:absolute; top:10%; width:50px; height: 50px;}


.socialnav-xs {list-style-type: none;position: fixed;-webkit-transform: translateZ(0); margin-bottom:0;width: 100%; padding:0}

.socialnav-xs li {width:100%; text-align: center; padding: 10px 0; }

.socialnav-xs a {color: #777; font-weight:400; display: block;height: 55px;line-height: 35px;position: relative;text-align: center;padding-top:10px;}
.socialnav-xs a, .socialnav-xs a:active, .socialnav-xs a:focus {outline: 0;}

.socialtext {
background-color: #f8f8f8;
width:91vw;
border: 2px solid #014C8F;
line-height: 35px;
bottom: 30px;
position:fixed;
margin: 0px 15px;
padding:10px;
text-align:left;
z-index:20;
}
.socialtext h2 {color:#777;font-size:14px;text-align:left;margin: 0 0 10px;font-weight:400;}
.socialtext h3 {color:#777;font-size:18px;text-align:left;margin-bottom: 8px;font-weight:700;}
.socialtext p {margin-bottom: 5px; font-size: 16px;line-height:20px;}
.socialtext p.smaller {font-size: 12px;line-height:16px;}


#navbttn { background-color: #eee; border-top: 1px solid #333;padding:15px 0; height: 30px;}
}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

    .navbar-nav .nav-item .nav-link { font-size:12px; }

    .carousel-item {height: 40vh; }
   .carousel-item.n1 { background: no-repeat bottom -150px center scroll;}
   .carousel-item.n3 {background: no-repeat center top -600px scroll;}

   .sidepanel { margin-top: -220px; font-size:12px; padding: 10px 5px;}
   .card-footer { font-size:11px; }
}