@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }



@media all and (min-width: 768px) {
  body {padding-top:88px;position: relative;}
  .navbar-fixed-width {
    width: 720px;
    margin-left: auto;
    margin-right:auto;padding-bottom:10px;padding-top:10px;
    }
  #x-brand img{position:absolute;z-index:5000;top:16px;left:16px;}
  .xxx {padding-top:60px;padding-left:4px;padding-right:4px;}
  .xxx-f {padding-top:350px;padding-left:4px;padding-right:4px;}
  .navbar {


-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
           
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
           
transition: background .5s ease-in-out,padding .5s ease-in-out;
          
}

  .top-nav-collapse {
padding: 0;
}
  .top-nav-collapse #x-brand img {width:56px;

position:absolute;z-index:5000;top:4px;left:4px;
                         

-webkit-transition: background .5s ease-in-out,all .5s ease-in-out;
                         
-moz-transition: background .5s ease-in-out,all .5s ease-in-out;
                         
transition: background .5s ease-in-out,all .5s ease-in-out;
                        }
  .navbar-fixed-top #x-brand img {position:absolute;z-index:5000;
                         

-webkit-transition: background .5s ease-in-out,all .5s ease-in-out;
                         
-moz-transition: background .5s ease-in-out,all .5s ease-in-out;
                         
transition: background .5s ease-in-out,all .5s ease-in-out;
                        }
  .vertical-align {display: flex;align-items: center;}

}

@media all and (min-width: 992px) {
  body {padding-top:88px;position: relative;}
  .navbar-fixed-width {
    width: 940px;
    margin-left: auto;
    margin-right:auto;padding-bottom:10px;padding-top:10px;
    }
  #x-brand img{position:absolute;z-index:5000;top:16px;left:16px;}
  .xxx {padding-top:60px;padding-left:4px;padding-right:4px;}
  .xxx-f {padding-top:350px;padding-left:4px;padding-right:4px;}
  .navbar {


-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
           
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
           
transition: background .5s ease-in-out,padding .5s ease-in-out;
          
}

  .top-nav-collapse {
padding: 0;
}
  .top-nav-collapse #x-brand img {width:56px;

position:absolute;z-index:5000;top:4px;left:4px;
                         

-webkit-transition: background .5s ease-in-out,all .5s ease-in-out;
                         
-moz-transition: background .5s ease-in-out,all .5s ease-in-out;
                         
transition: background .5s ease-in-out,all .5s ease-in-out;
                        }
  .navbar-fixed-top #x-brand img {position:absolute;z-index:5000;
                         

-webkit-transition: background .5s ease-in-out,all .5s ease-in-out;
                         
-moz-transition: background .5s ease-in-out,all .5s ease-in-out;
                         
transition: background .5s ease-in-out,all .5s ease-in-out;
                        }
  .vertical-align {display: flex;align-items: center;}

}

@media all and (min-width: 1200px) {
  body {padding-top:88px;position: relative;}
  .navbar-fixed-width {
    width: 1140px;
    margin-left: auto;
    margin-right:auto;padding-bottom:10px;padding-top:10px;
    }
  #x-brand img{position:absolute;z-index:5000;top:16px;left:16px;}
  .xxx {padding-top:60px;padding-left:4px;padding-right:4px;}
  .xxx-f {padding-top:350px;padding-left:4px;padding-right:4px;}
  .navbar {


-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
           
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
           
transition: background .5s ease-in-out,padding .5s ease-in-out;
          
}

  .top-nav-collapse {
padding: 0;
}
  .top-nav-collapse #x-brand img {width:56px;

position:absolute;z-index:5000;top:4px;left:4px;
                         

-webkit-transition: background .5s ease-in-out,all .5s ease-in-out;
                         
-moz-transition: background .5s ease-in-out,all .5s ease-in-out;
                         
transition: background .5s ease-in-out,all .5s ease-in-out;
                        }
  .navbar-fixed-top #x-brand img {position:absolute;z-index:5000;
                         

-webkit-transition: background .5s ease-in-out,all .5s ease-in-out;
                         
-moz-transition: background .5s ease-in-out,all .5s ease-in-out;
                         
transition: background .5s ease-in-out,all .5s ease-in-out;
                        }
  .vertical-align {display: flex;align-items: center;}

}


@media all and (max-width: 768px) {
  body {padding-top:56px;position: relative;}
  .xxx {padding-top:68px;padding-left:4px;padding-right:4px;}
  .xxx-f {padding-top:150px;padding-left:4px;padding-right:4px;}
  .container {margin:5px;padding:5px;}
  .navbar-fixed-width {
    margin-left: 10px;
    margin-right:10px;padding-bottom:10px;padding-top:10px;
    }
  #x-brand img {width:56px;

position:absolute;z-index:5000;top:4px;left:4px;}
  .navbar {
padding: 0;
}
  .vertical-align {display: flex;align-items: center;}
}



.carousel-captionx {position:absolute;left:0%;right:0%;bottom:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.6);background: rgba(0,0,0,0.4)}

.btn-primary {background: rgba(42, 126, 199, 0.7);}