Solution
Saima answered on
Oct 23 2021
html_cafe_project/About.html
HOME
MENU
ABOUT
CONTACT US
Who we are and what we do.
Centrally located in North Bay's downtown district, The Cafe Brewers Bay offers a comfortable environment for everyone. Come and enjoy our selection of homemade sandwiches, panini, wraps, salads and soups. Whether you're looking to relax and feel rejuvenated, meet over aromatic coffees and fresh juices accompanied with delicious cakes, exchange ideas over wholesome global cuisine and ‘just be’ in a friendly and aesthetic environment with friends and family enjoying nature’s bounty.
Our journey from the bean to the cup started in year 2000. Café culture had not set its footprint and coffee was still considered a luxury. Our quest to provide a truly international experience and
ew a truly Italian cuppa, led us to create the
and Brewers Bay.
Today it is a name that is now so well known all over our World.
Cafe
FARM-FRESH INGREDIENTS..
Cafe Brewers Bay has a varied selection of foods and drinks. It is a place where people who cook with love and a spirit of adventure prepare different cuisines.
Our ingredients are chosen with care, we try our best to buy local, and stay away from using artificial colourants and preservatives.
html_cafe_project/Contact.html
HOME
MENU
ABOUT
CONTACT US
Contact Us
Swing by for a cup of coffee, or leave us a message:
WE CATER...
From small intimate gatherings to big soirees, CAFE BREWERS BAY offers a great selection of food and drinks. Call us a week in advance at
+1 705-402-7000
...AND HOME-DELIVER TOO.
Don't feel like stepping out but want CAFE BREWERS BAY delicious food at home? Call us at
+1 705-402-7000
and we'll be there at your doorstop with your order!
Email:-information@
ewersbay.co.in
html_cafe_project/css/about.css
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
ody{
font-size: 20px;
overflow-x: hidden;
color: white;
font-family: 'Flamenco', cursive;
background-color: black;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('../imgs
ackground.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
.clearfix:after{
content: ".";
visibility: hidden;
display: block;
height: 0px;
clear: both;
}
.row{
max-width: 1180px;
margin: 0 auto;
}
.logo{
height: 200px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav{
float: right;
margin-top: 60px;
bo
}
.main-nav li{
display: inline-block;
list-style: none;
margin-left: 40px;
}
.main-nav li a{
padding: 5px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
font-weight: 100;
}
.main-nav li a:hover{
border-bottom: 2px solid #bf55ec;
}
.main-content-header{
width: 900px;
height: 240px;
position: absolute;
/*border: 1px solid red;*
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
p{color: #fff;
font-size: 100%;
word-spacing: 5px;
letter-spacing: 3px;
margin-bottom: 20px;
margin-top: 0px;
font-weight: bold;
}
h1{color: #bf55ec;
font-size: 200%;
word-spacing: 5px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: lighter;
/*border: 1px solid red;*
}
.container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.container .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 5px;
}
.container .content h1{font-size: 150%;
color: #fff}
* slide shows *
* {box-sizing:border-box}
.slideshow-container {
max-width: 700px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: left;
text-shadow: 2px 2px black;
font-weight: bold;
}
.numbertext {
color: #f2f2f2;
font-size: 20px;
padding: 8px 12px;
position: absolute;
top: 0;
text-shadow: 2px 2px black;
}
.dot {
cursor: pointer;
height: 10px;
width: 10px;
margin: 0 2px;
background-color: #
;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.mobile-icon{display: none;}
.colorchange{
animation: colorchangecafe 1s infinite;
}
footer{text-align: center;
height: 150px;
font-size: 130%;
}
@keyframes colorchangecafe{
0%{color: red;}
25%{color: #bf55ec;}
50%{color: white;}
100%{color: #bf55ec;}
}
#myBtn {
display: none; /* Hidden by default *
position: fixed; /* Fixed/sticky position *
bottom: 20px; /* Place the button at the bottom of the page *
right: 30px; /* Place the button 30px from the right *
z-index: 99; /* Make sure it does not overlap *
border: none; /* Remove borders *
outline: none; /* Remove outline *
background-color: red; /* Set a background color *
color: white; /* Text color *
cursor: pointer; /* Add a mouse pointer on hover *
padding: 15px; /* Some padding *
border-radius: 10px; /* Rounded corners *
font-size: 18px; /* Increase font size *
*border: 1px solid red;
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover *
}
*
Responsive Queries
*
@media only screen and (max-width: 1180px){
.main-content-header{
width: 100%;
padding: 0 2%;
}
}
@media only screen and (max-width: 998px){
p{font-size: 90%;}
h1{font-size: 160%}
.container .content h1{font-size: 80%}
}
@media only screen and (max-width: 768px){
p{font-size: 100%;}
h1{font-size: 140%}
.main-nav{display: none;}
.mobile-icon{
display: inline-block;
color: #fff;
float: right;
margin-top: 30px;
margin-right: 20px;
}
.main-nav{float: left;}
.main-nav li{
display: block;
margin-top: 10px;
}
.container .content h1{font-size: 80%}
}
@media only screen and (max-width: 480px){
p{font-size: 80%;}
h1{font-size:120%}
.container .content h1{font-size: 80%}
}
@media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
html_cafe_project/css/contact.css
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
ody{
font-size: 20px;
overflow-x: hidden;
color: white;
font-family: 'Flamenco', cursive;
background-color: black;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('../imgs
ackground.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
.clearfix:after{
content: ".";
visibility: hidden;
display: block;
height: 0px;
clear: both;
}
.row{
max-width: 1180px;
margin: 0 auto;
}
.logo{
height: 200px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav{
float: right;
margin-top: 60px;
}
.main-nav li{
display: inline-block;
list-style: none;
margin-left: 40px;
}
.main-nav li a{
padding: 5px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
font-weight: 100;
}
.main-nav li a:hover{
border-bottom: 2px solid #bf55ec;
}
.main-content-header{
width: 900px;
height: 240px;
position: absolute;
/*border: 1px solid red;*
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
.mobile-icon{display: none;}
.main-content-header img{
opacity: 0.6;
}
footer{height: 75%;}
.fa {
padding: 20px;
font-size: 100%;
max-width: 50%;
text-align: center;
text-decoration: none;
}
.fa:hover {
opacity: 0.9;
}
.fa-facebook {
border: 2px solid #3B5998;
width: 15%;
color: white;
background-color: transparent;
}
.fa-facebook:hover{
background-color: #3B5998;
}
.fa-twitter {
border: 2px solid #55ACEE;
width: 15%;
color: white;
background-color: transparent;
}
.fa-twitter:hover{
background-color: #55ACEE;
}
.fa-instagram {
background-color: transparent;
color: white;
width: 15%;
border: 2px solid #f40083;
}
.fa-instagram:hover{
background-color: #f40083;
}
.fa-snapchat-ghost {
border: 2px solid #fffc00;
color: white;
width: 15%;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
background-color: transparent;
}
.fa-snapchat-ghost:hover{
background-color: #fffc00 ;
}
.fa-google {
border: 2px solid #dd4b39;
color: #fff;
width: 15%;
background-color: transparent;
}
.fa-google:hover{
background-color: #dd4b39 ;
}
#myBtn {
display: none; /* Hidden by default *
position: fixed; /* Fixed/sticky position *
bottom: 20px; /* Place the button at the bottom of the page *
right: 30px; /* Place the button 30px from the right *
z-index: 99; /* Make sure it does not overlap *
border: none; /* Remove borders *
outline: none; /* Remove outline *
background-color: red; /* Set a background color *
color: white; /* Text color *
cursor: pointer; /* Add a mouse pointer on hover *
padding: 15px; /* Some padding *
border-radius: 10px; /* Rounded corners *
font-size: 18px; /* Increase font size *
*border: 1px solid red;
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover *
}
* contact box*
{
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
/*background-color: #f2f2f2;*
padding: 10px;
}
.column {
float: left;
width: 50%;
margin-top: 6px;
padding: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
h2{color: #bf55ec;
font-size: 250%;
word-spacing: 5px;
letter-spacing: 3px;
font-weight: bold;
}
*
Responsive Queries
*
@media only screen and (max-width: 1180px){
.main-content-header{
width: 100%;
padding: 0 2%;
}
}
@media only screen and (max-width: 998px){
h2{font-size: 200%;}
@media only screen and (max-width: 768px){
h2{font-size: 180%;}
.main-nav{display: none;}
.mobile-icon{
display: inline-block;
color: #fff;
float: right;
margin-top: 30px;
margin-right: 20px;
}
.main-nav{float: left;}
.main-nav li{
display: block;
margin-top: 10px;
}
}
@media screen and (max-width: 600px) {
.column, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
@media only screen and (max-width: 480px){
.btn-full{
margin-bottom: 20px;
}
h2{font-size: 160%;}
h1{font-size: 80%;}
}
html_cafe_project/css/home.css
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
ody{
font-size: 20px;
overflow-x: hidden;
color: white;
font-family: 'Flamenco', cursive;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('../imgs
ackground.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
.clearfix:after{
content: ".";
visibility: hidden;
display: block;
height: 0px;
clear: both;
}
.row{
max-width: 1180px;
margin: 0 auto;
}
.logo{
height: 200px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav{
float: right;
margin-top: 60px;
}
.main-nav li{
display: inline-block;
list-style: none;
margin-left: 40px;
}
.main-nav li a{
padding: 5px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
font-weight: 100;
}
.main-nav li a:hover{
border-bottom: 2px solid #bf55ec;
}
.main-content-header{
width: 1180px;
height: 240px;
position: absolute;
/*border: 1px solid red;*
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
color: #fff;
font-size: 240%;
word-spacing: 5px;
letter-spacing: 3px;
margin-bottom: 20px;
margin-top: 20px;
text-transform: uppercase;
font-weight: lighter;
}
.btn{
display: inline-block;
padding: 10px 30px;
font-weight: lighter;
text-decoration: none;
text-transform: uppercase;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full{
background-color: transparent;
color: #bf55ec;
margin-right: 15px;
border: 1px solid #bf55ec;
}
.btn-full:hover{
background-color: #fff;
}
.btn-nav{
background-color: transparent;
color: #fff;
border: 1px solid #fff;
}
.btn-nav:hover{
background-color: #bf55ec;
}
.colorchange{
animation: colorchangecafe 1s infinite;
}
p{
color: #fff;
font-size: 120%;
word-spacing: 5px;
letter-spacing: 3px;
margin-bottom: 20px;
margin-top: 20px;
font-weight: bold;
}
@keyframes colorchangecafe{
0%{color: red;}
25%{color: #bf55ec;}
50%{color: white;}
100%{color: #bf55ec;}
}
.mobile-icon{display: none;}
*
Responsive Queries
*
@media only screen and (max-width: 1180px){
.main-content-header{
width: 100%;
padding: 0 2%;
}
}
@media only screen and (max-width: 998px){
h1{font-size: 200%;}
p{font-size: 70%;}
}
@media only screen and (max-width: 768px){
h1{font-size: 180%;}
p{font-size: 70%;}
.main-nav{display: none;}
.mobile-icon{
display: inline-block;
color: #fff;
float: right;
margin-top: 30px;
margin-right: 20px;
}
.main-nav{float: left;}
.main-nav li{
display: block;
margin-top: 10px;
}
}
@media only screen and (max-width: 480px){
.btn-full{
margin-bottom: 20px;
}
h1{font-size: 160%;}
p{font-size: 70%;}
}
html_cafe_project/css/menu.css
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
ody{
font-size: 20px;
overflow-x: hidden;
color: white;
font-family: 'Flamenco', cursive;
background-color: black;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('../imgs
ackground.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
.clearfix:after{
content: ".";
visibility: hidden;
display: block;
height: 0px;
clear: both;
}
.row{
max-width: 1180px;
margin: 0 auto;
}
.logo{
height: 200px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav{
float: right;
margin-top: 60px;
}
.main-nav li{
display: inline-block;
list-style: none;
margin-left: 40px;
}
.main-nav li a{
padding: 5px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
font-weight: 100;
}
.main-nav li a:hover{
border-bottom: 2px solid #bf55ec;
}
.main-content-header{
width: 900px;
height: 240px;
position: absolute;
/*border: 1px solid red;*
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
word-spacing: 5px;
letter-spacing: 2px;
}
h3{color: #bf55ec;
font-size:180%;
text-align: center;
text-transform:uppercase;
}
.mobile-icon{display: none;}
.tablink {
background-color: transparent;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 20px;
width: 25%;
border-bottom: 1px solid #fff;
font-family: 'Flamenco', cursive;
text-transform: uppercase;
}
.tablink:hover {
background-color: #bf55ec;
}
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {background-color: transparent;}
#News {background-color: transparent;}
#Contact {background-color: transparent;}
#About {background-color: transparent;}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 2px solid #bf55ec;
float: left;
width: 50%;
background: #f1f1f1;
margin-left: 16%;
}
form.example button {
float: left;
width: 15%;
padding: 10px;
background: transparent;
color: white;
font-size: 17px;
border: 2px solid #bf55ec;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #bf55ec;
}
form.example::after {
content: "";
clear: both;
display: table;
}
h1{font-size: 240%;
color: #fff;
text-align: center;
}
#myBtn {
display: none; /* Hidden by default *
position: fixed; /* Fixed/sticky position *
bottom: 20px; /* Place the button at the bottom of the page *
right: 30px; /* Place the button 30px from the right *
z-index: 99; /* Make sure it does not overlap *
border: none; /* Remove borders *
outline: none; /* Remove outline *
background-color: red; /* Set a background color *
color: white; /* Text color *
cursor: pointer; /* Add a mouse pointer on hover *
padding: 15px; /* Some padding *
border-radius: 10px; /* Rounded corners *
font-size: 18px; /* Increase font size *
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover *
}
.column {
float: left;
width: 50%;
padding: 10px;
}
* Clear floats after the columns *
.row:after {
content: "";
display: table;
clear: both;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}
*
Responsive Queries
*
@media only screen and (max-width: 1180px){
.main-content-header{
width: 100%;
padding: 0 2%;
}
}
@media only screen and (max-width: 768px){
.main-nav{display: none;}
.mobile-icon{
display: inline-block;
color: #fff;
float: right;
margin-top: 30px;
margin-right: 20px;
}
.main-nav{float: left;}
.main-nav li{
display: block;
margin-top: 10px;
}
.column {
width: 100%;
}
}
html_cafe_project/css/menu2.css
.table{width:100%;max-width:100%;margin-bottom:1rem}
.btn{display:inline-block;font-weight:400;line-height:1.25;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:.5rem 1rem;font-size:1rem;border-radius:.25rem;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.btn:focus,.btn:hover{text-decoration:none}
.btn.focus,.btn:focus{outline:0;-webkit-box-shadow:0 0 0 2px rgba(2,117,216,.25);box-shadow:0 0 0 2px rgba(2,117,216,.25)}
.btn.disabled,.btn:disabled{cursor:not-allowed;opacity:.65}
.btn.active,.btn:active{background-image:none}
a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}
.btn-primary{color:#fff;background-color:#0275d8;border-color:#0275d8}
.btn-primary:hover{color:#fff;background-color:#025aa5;border-color:#01549b}
.btn-primary.focus,.btn-primary:focus{-webkit-box-shadow:0 0 0 2px rgba(2,117,216,.5);box-shadow:0 0 0 2px rgba(2,117,216,.5)}
.btn-primary.disabled,.btn-primary:disabled{background-color:#0275d8;border-color:#0275d8}
.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#025aa5;background-image:none;border-color:#01549b}
.btn-secondary{color:#292b2c;background-color:#fff;border-color:#ccc}
.btn-secondary:hover{color:#292b2c;background-color:#e6e6e6;border-color:#adadad}
.btn-secondary.focus,.btn-secondary:focus{-webkit-box-shadow:0 0 0 2px rgba(204,204,204,.5);box-shadow:0 0 0 2px rgba(204,204,204,.5)}
.btn-secondary.disabled,.btn-secondary:disabled{background-color:#fff;border-color:#ccc}
.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#292b2c;background-color:#e6e6e6;background-image:none;border-color:#adadad}
.btn-info{color:#fff;background-color:#5bc0de;border-color:#5bc0de}
.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#2aabd2}
.btn-info.focus,.btn-info:focus{-webkit-box-shadow:0 0 0 2px rgba(91,192,222,.5);box-shadow:0 0 0 2px rgba(91,192,222,.5)}
.btn-info.disabled,.btn-info:disabled{background-color:#5bc0de;border-color:#5bc0de}
.btn-info.active,.btn-info:active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#31b0d5;background-image:none;border-color:#2aabd2}
.btn-success{color:#fff;background-color:#5cb85c;border-color:#5cb85c}
.btn-success:hover{color:#fff;background-color:#449d44;border-color:#419641}
.btn-success.focus,.btn-success:focus{-webkit-box-shadow:0 0 0 2px rgba(92,184,92,.5);box-shadow:0 0 0 2px rgba(92,184,92,.5)}
.btn-success.disabled,.btn-success:disabled{background-color:#5cb85c;border-color:#5cb85c}
.btn-success.active,.btn-success:active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#449d44;background-image:none;border-color:#419641}
.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#f0ad4e}
.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#eb9316}
.btn-warning.focus,.btn-warning:focus{-webkit-box-shadow:0 0 0 2px rgba(240,173,78,.5);box-shadow:0 0 0 2px rgba(240,173,78,.5)}
.btn-warning.disabled,.btn-warning:disabled{background-color:#f0ad4e;border-color:#f0ad4e}
.btn-warning.active,.btn-warning:active,.show>.btn-warning.dropdown-toggle{color:#fff;background-color:#ec971f;background-image:none;border-color:#eb9316}
.btn-danger{color:#fff;background-color:#d9534f;border-color:#d9534f}
.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#c12e2a}
.btn-danger.focus,.btn-danger:focus{-webkit-box-shadow:0 0 0 2px rgba(217,83,79,.5);box-shadow:0 0 0 2px rgba(217,83,79,.5)}
.btn-danger.disabled,.btn-danger:disabled{background-color:#d9534f;border-color:#d9534f}
.btn-danger.active,.btn-danger:active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#c9302c;background-image:none;border-color:#c12e2a}
.btn-outline-primary{color:#0275d8;background-image:none;background-color:transparent;border-color:#0275d8}
.btn-outline-primary:hover{color:#fff;background-color:#0275d8;border-color:#0275d8}
.btn-outline-primary.focus,.btn-outline-primary:focus{-webkit-box-shadow:0 0 0 2px rgba(2,117,216,.5);box-shadow:0 0 0 2px rgba(2,117,216,.5)}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#0275d8;background-color:transparent}
.btn-outline-primary.active,.btn-outline-primary:active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#0275d8;border-color:#0275d8}
.btn-outline-secondary{color:#ccc;background-image:none;background-color:transparent;border-color:#ccc}
.btn-outline-secondary:hover{color:#fff;background-color:#ccc;border-color:#ccc}
.btn-outline-secondary.focus,.btn-outline-secondary:focus{-webkit-box-shadow:0 0 0 2px rgba(204,204,204,.5);box-shadow:0 0 0 2px rgba(204,204,204,.5)}
.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#ccc;background-color:transparent}
.btn-outline-secondary.active,.btn-outline-secondary:active,.show>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:#ccc;border-color:#ccc}
.btn-outline-info{color:#5bc0de;background-image:none;background-color:transparent;border-color:#5bc0de}
.btn-outline-info:hover{color:#fff;background-color:#5bc0de;border-color:#5bc0de}
.btn-outline-info.focus,.btn-outline-info:focus{-webkit-box-shadow:0 0 0 2px rgba(91,192,222,.5);box-shadow:0 0 0 2px rgba(91,192,222,.5)}
.btn-outline-info.disabled,.btn-outline-info:disabled{color:#5bc0de;background-color:transparent}
.btn-outline-info.active,.btn-outline-info:active,.show>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#5bc0de;border-color:#5bc0de}
.btn-outline-success{color:#5cb85c;background-image:none;background-color:transparent;border-color:#5cb85c}
.btn-outline-success:hover{color:#fff;background-color:#5cb85c;border-color:#5cb85c}
.btn-outline-success.focus,.btn-outline-success:focus{-webkit-box-shadow:0 0 0 2px rgba(92,184,92,.5);box-shadow:0 0 0 2px rgba(92,184,92,.5)}
.btn-outline-success.disabled,.btn-outline-success:disabled{color:#5cb85c;background-color:transparent}
.btn-outline-success.active,.btn-outline-success:active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#5cb85c;border-color:#5cb85c}
.btn-outline-warning{color:#f0ad4e;background-image:none;background-color:transparent;border-color:#f0ad4e}
.btn-outline-warning:hover{color:#fff;background-color:#f0ad4e;border-color:#f0ad4e}
.btn-outline-warning.focus,.btn-outline-warning:focus{-webkit-box-shadow:0 0 0 2px rgba(240,173,78,.5);box-shadow:0 0 0 2px rgba(240,173,78,.5)}
.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#f0ad4e;background-color:transparent}
.btn-outline-warning.active,.btn-outline-warning:active,.show>.btn-outline-warning.dropdown-toggle{color:#fff;background-color:#f0ad4e;border-color:#f0ad4e}
.btn-outline-danger{color:#d9534f;background-image:none;background-color:transparent;border-color:#d9534f}
.btn-outline-danger:hover{color:#fff;background-color:#d9534f;border-color:#d9534f}
.btn-outline-danger.focus,.btn-outline-danger:focus{-webkit-box-shadow:0 0 0 2px rgba(217,83,79,.5);box-shadow:0 0 0 2px rgba(217,83,79,.5)}
.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#d9534f;background-color:transparent}
.btn-outline-danger.active,.btn-outline-danger:active,.show>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#d9534f;border-color:#d9534f}
.btn-link{font-weight:400;color:#0275d8;border-radius:0}
.btn-link,.btn-link.active,.btn-link:active,.btn-link:disabled{background-color:transparent}
.btn-link,.btn-link:active,.btn-link:focus{border-color:transparent}
.btn-link:hover{border-color:transparent}
.btn-link:focus,.btn-link:hover{color:#014c8c;text-decoration:underline;background-color:transparent}
.btn-link:disabled{color:#636c72}
.btn-link:disabled:focus,.btn-link:disabled:hover{text-decoration:none}
.btn-group-lg>.btn,.btn-lg{padding:.75rem 1.5rem;font-size:1.25rem;border-radius:.3rem}
.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}
.btn-block{display:block;width:100%}
.btn-block+.btn-block{margin-top:.5rem}
input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}
.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}
.fade.show{opacity:1}
.collapse{display:none}
.collapse.show{display:block}
tr.collapse.show{display:table-row}
tbody.collapse.show{display:table-row-group}
.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease}
.dropdown,.dropup{position:relative}
.dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.3em;vertical-align:middle;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-left:.3em solid transparent}
.dropdown-toggle:focus{outline:0}
.dropup .dropdown-toggle::after{border-top:0;border-bottom:.3em solid}
.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#292b2c;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}
.dropdown-divider{height:1px;margin:.5rem 0;overflow:hidden;background-color:#eceeef}
.dropdown-item{display:block;width:100%;padding:3px 1.5rem;clear:both;font-weight:400;color:#292b2c;text-align:inherit;white-space:nowrap;background:0 0;border:0}
.dropdown-item:focus,.dropdown-item:hover{color:#1d1e1f;text-decoration:none;background-color:#f7f7f9}
.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#0275d8}
.dropdown-item.disabled,.dropdown-item:disabled{color:#636c72;cursor:not-allowed;background-color:transparent}
.show>.dropdown-menu{display:block}
.show>a{outline:0}
.dropdown-menu-right{right:0;left:auto}
.dropdown-menu-left{right:auto;left:0}
.dropdown-header{display:block;padding:.5rem 1.5rem;margin-bottom:0;font-size:.875rem;color:#636c72;white-space:nowrap}
.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}
.dropup .dropdown-menu{top:auto;bottom:100%;margin-bottom:.125rem}
.btn-group,.btn-group-vertical{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}
.btn-group-vertical>.btn,.btn-group>.btn{position:relative;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}
.btn-group-vertical>.btn:hover,.btn-group>.btn:hover{z-index:2}
.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus{z-index:2}
.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group,.btn-group-vertical .btn+.btn,.btn-group-vertical .btn+.btn-group,.btn-group-vertical .btn-group+.btn,.btn-group-vertical .btn-group+.btn-group{margin-left:-1px}
.btn-toolbar{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
.btn-toolbar .input-group{width:auto}
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}
.btn-group>.btn:first-child{margin-left:0}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0}
.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}
.btn-group>.btn-group{float:left}
.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}
.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-top-right-radius:0}
.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-bottom-left-radius:0;border-top-left-radius:0}
.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}
.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}
.btn+.dropdown-toggle-split::after{margin-left:0}
.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}
.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:1.125rem;padding-left:1.125rem}
.btn-group-vertical{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
.btn-group-vertical .btn,.btn-group-vertical .btn-group{width:100%}
.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}
.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}
.btn-group-vertical>.btn:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}
.btn-group-vertical>.btn:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0}
.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}
.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}
.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-right-radius:0;border-top-left-radius:0}
[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}
.input-group{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%}
.input-group .form-control{position:relative;z-index:2;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;margin-bottom:0}
.input-group .form-control:active,.input-group .form-control:focus,.input-group .form-control:hover{z-index:3}
.input-group .form-control,.input-group-addon,.input-group-btn{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}
.input-group-addon,.input-group-btn{white-space:nowrap;vertical-align:middle}
.input-group-addon{padding:.5rem .75rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.25;color:#464a4c;text-align:center;background-color:#eceeef;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}
.input-group-addon.form-control-sm,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.input-group-addon.btn{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}
.input-group-addon.form-control-lg,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.input-group-addon.btn{padding:.75rem 1.5rem;font-size:1.25rem;border-radius:.3rem}
.input-group-addon input[type=checkbox],.input-group-addon input[type=radio]{margin-top:0}
.input-group .form-control:not(:last-child),.input-group-addon:not(:last-child),.input-group-btn:not(:first-child)>.btn-group:not(:last-child)>.btn,.input-group-btn:not(:first-child)>.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:not(:last-child)>.btn,.input-group-btn:not(:last-child)>.btn-group>.btn,.input-group-btn:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-top-right-radius:0}
.input-group-addon:not(:last-child){border-right:0}
.input-group .form-control:not(:first-child),.input-group-addon:not(:first-child),.input-group-btn:not(:first-child)>.btn,.input-group-btn:not(:first-child)>.btn-group>.btn,.input-group-btn:not(:first-child)>.dropdown-toggle,.input-group-btn:not(:last-child)>.btn-group:not(:first-child)>.btn,.input-group-btn:not(:last-child)>.btn:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}
.form-control+.input-group-addon:not(:first-child){border-left:0}
.input-group-btn{position:relative;font-size:0;white-space:nowrap}
.input-group-btn>.btn{position:relative;-webkit-box-flex:1;-webkit-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%}
.input-group-btn>.btn+.btn{margin-left:-1px}
.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover{z-index:3}
.input-group-btn:not(:last-child)>.btn,.input-group-btn:not(:last-child)>.btn-group{margin-right:-1px}
.input-group-btn:not(:first-child)>.btn,.input-group-btn:not(:first-child)>.btn-group{z-index:2;margin-left:-1px}
.input-group-btn:not(:first-child)>.btn-group:active,.input-group-btn:not(:first-child)>.btn-group:focus,.input-group-btn:not(:first-child)>.btn-group:hover,.input-group-btn:not(:first-child)>.btn:active,.input-group-btn:not(:first-child)>.btn:focus,.input-group-btn:not(:first-child)>.btn:hover{z-index:3}
.custom-control{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;min-height:1.5rem;padding-left:1.5rem;margin-right:1rem;cursor:pointer}
.custom-control-input{position:absolute;z-index:-1;opacity:0}
.custom-control-input:checked~.custom-control-indicator{color:#fff;background-color:#0275d8}
.custom-control-input:focus~.custom-control-indicator{-webkit-box-shadow:0 0 0 1px #fff,0 0 0 3px #0275d8;box-shadow:0 0 0 1px #fff,0 0 0 3px #0275d8}
.custom-control-input:active~.custom-control-indicator{color:#fff;background-color:#8fcafe}
.custom-control-input:disabled~.custom-control-indicator{cursor:not-allowed;background-color:#eceeef}
.custom-control-input:disabled~.custom-control-description{color:#636c72;cursor:not-allowed}
.custom-control-indicator{position:absolute;top:.25rem;left:0;display:block;width:1rem;height:1rem;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#ddd;background-repeat:no-repeat;background-position:center center;-webkit-background-size:50% 50%;background-size:50% 50%}
.custom-checkbox .custom-control-indicator{border-radius:.25rem}
.custom-checkbox .custom-control-input:checked~.custom-control-indicator{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http:
www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E")}
.custom-checkbox .custom-control-input:indeterminate~.custom-control-indicator{background-color:#0275d8;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http:
www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E")}
.custom-radio .custom-control-indicator{border-radius:50%}
.custom-radio .custom-control-input:checked~.custom-control-indicator{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http:
www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E")}
.custom-controls-stacked{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
.custom-controls-stacked .custom-control{margin-bottom:.25rem}
.custom-controls-stacked .custom-control+.custom-control{margin-left:0}
.custom-select{display:inline-block;max-width:100%;height:calc(2.25rem + 2px);padding:.375rem 1.75rem .375rem .75rem;line-height:1.25;color:#464a4c;vertical-align:middle;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http:
www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;-webkit-background-size:8px 10px;background-size:8px 10px;border:1px solid rgba(0,0,0,.15);border-radius:.25rem;-moz-appearance:none;-webkit-appearance:none}
.custom-select:focus{border-color:#5cb3fd;outline:0}
.custom-select:focus::-ms-value{color:#464a4c;background-color:#fff}
.custom-select:disabled{color:#636c72;cursor:not-allowed;background-color:#eceeef}
.custom-select::-ms-expand{opacity:0}
.custom-select-sm{padding-top:.375rem;padding-bottom:.375rem;font-size:75%}
.custom-file{position:relative;display:inline-block;max-width:100%;height:2.5rem;margin-bottom:0;cursor:pointer}
.custom-file-input{min-width:14rem;max-width:100%;height:2.5rem;margin:0;filter:alpha(opacity=0);opacity:0}
.custom-file-control{position:absolute;top:0;right:0;left:0;z-index:5;height:2.5rem;padding:.5rem 1rem;line-height:1.5;color:#464a4c;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}
.custom-file-control:lang(en)::after{content:"Choose file..."}
.custom-file-control::before{position:absolute;top:-1px;right:-1px;bottom:-1px;z-index:6;display:block;height:2.5rem;padding:.5rem 1rem;line-height:1.5;color:#464a4c;background-color:#eceeef;border:1px solid rgba(0,0,0,.15);border-radius:0 .25rem .25rem 0}
.custom-file-control:lang(en)::before{content:"Browse"}
.nav{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:0;margin-bottom:0;list-style:none}
.nav-link{display:block;padding:.5em 1em}
.nav-link:focus,.nav-link:hover{text-decoration:none}
.nav-link.disabled{color:#636c72;cursor:not-allowed}
.nav-tabs{border-bottom:1px solid #ddd}
.nav-tabs .nav-item{margin-bottom:-1px}
.nav-tabs .nav-link{border:1px solid transparent;border-top-right-radius:.25rem;border-top-left-radius:.25rem}
.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#eceeef #eceeef #ddd}
.nav-tabs .nav-link.disabled{color:#636c72;background-color:transparent;border-color:transparent}
.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#464a4c;background-color:#fff;border-color:#ddd #ddd #fff}
.nav-tabs .dropdown-menu{margin-top:-1px;border-top-right-radius:0;border-top-left-radius:0}
.nav-pills .nav-link{border-radius:.25rem}
.nav-pills .nav-item.show .nav-link,.nav-pills .nav-link.active{color:#fff;cursor:default;background-color:#0275d8}
.nav-fill .nav-item{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;text-align:center}
.nav-justified .nav-item{-webkit-box-flex:1;-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;text-align:center}
.tab-content>.tab-pane{display:none}
.tab-content>.active{display:block}
.navbar{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:.5rem 1rem}
.navbar-
and{display:inline-block;padding-top:.25rem;padding-bottom:.25rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap}
.navbar-
and:focus,.navbar-
and:hover{text-decoration:none}
...