body {
    font-family: 'Open Sans', sans-serif;
        /*width: 66.66%;*/
}

col-md-8 {
    /*width: 66.66%;*/
}


col-sm-9 {
    /*width: 66.66%;*/
}
header {
    background-color: rgb(60,80,120);
    /*color: #ddd;*/
    color: #bbb;
    padding: 20px;
    text-align: center;
    margin-bottom: 0px;
    height: 140px;
}

header img {

    text-align: center;
    color: #bbb;

}

header a {
    color: #bbb;
    text-align: right;
}


header a hover, focus{
    color: white;
    text-align: right;
}

.navbar-brand {
    background-image: url(~/Images/WinbagIco.PNG);
}


.navbar {
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 1px 1px;
    background-color: darkblue;
    border-color: darkblue;

}
.navbar-inverse .navbar-nav>li>a {
    color: #bbb;
    /*border-right: 1px solid;*/
}


/*.navbar img {
    width: 100%;
    height: 100%;
}*/

/*.Row{
        margin-bottom: 0px;
    margin-top: 0px;
}*/


section h1 {
    font-family: "Ubuntu", sans-serif;
    font-size: 40px;
    color: rgb(60,80,120); 

}

section h2 {
    font-family: "Ubuntu", sans-serif;
    font-size: 25px;
    color: rgb(60,80,120); 

}

aside {
    background-color: aliceblue;
    text-align: center;
    padding-top: 40px;
}

article {
    padding: 40px;
    /*height: 1200px;
    width: 800px*/
}

article img {

    width: 1200px;
    height: 800px;
        width: 100%;
    height: 100%;
      display: block;
    margin: 0 auto;

}

article img {

        /*width: 1200px;
    height: 800px;
        width: 100%;
    height: 100%;
      display: block;
    margin: 0 auto;*/


    width: 100%;
    height: 100%;
    text-align: center;
    box-shadow: 6px 6px 8px #777;
    margin-bottom: 20px;
}
article p {
    font-size: 16px;
}

/* The following code is used to create same-sized columns 
   in a multi-column layout.
   Code from:  
   http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
*/
/* columns of same height styles */
.container-xs-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
}
.row-xs-height {
    display:table-row;
}
.col-xs-height {
    display:table-cell;
    float:none;
}

.range-list {
    padding-bottom: 40px;
    padding-top: 40px;
    /*background-color: rgb(60,80,120);*/

}
.range-list h4 {
    margin-bottom: 40px;
    color: darkblue;
    font-weight: bold;
}
.range-list img {
    width: 100%;
    height: 100%;
    max-width: 140px;
    max-height: 60px;

}
.range-title {
    color: darkblue;
}

.sports-icon-list {
    /*background-color: #333;*/
        /*background-color: whitesmoke;*/
    padding-bottom: 40px;
}
.sports-icon-list a {
    color: white;
}
.sports-icon-list a h6 {
    margin-top: 2px;
    margin-bottom: 14px;
}
.sports-icon-list img {
    width:70px;
    height:70px;
}

.sports-list-top div {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sports-list-top a {
    margin-left: 30px;
    margin-right: 30px;
    display: inline-block;
}


footer {
    background-color: rgb(60,80,120);
    /*color: #ddd;*/
    color: #bbb;
    padding: 20px;
    text-align: center;
}


/* Background colors */

.bblack{
	background: #222 !important;
	color: #fff !important;
	border:0px !important;
}

.blightblue{
	background:#52b9e9 !important;
	color: #fff !important;
	border: 0px !important;
}



.bdarkblue{
	background:darkblue !important;
	color: #fff !important;
	border: 0px !important;
}

.bblue{
	background:#1171a3 !important;
	color: #fff !important;	
	border: 0px !important;
}

.bgreen{
	background: #43c83c !important;
	color: #fff !important;	
	border: 0px !important;
}

.borange{
	background:#f88529 !important;
	color: #fff !important;	
	border: 0px !important;	
}

.bred{
	background: #fa3031 !important;
	color: #fff !important;	
	border: 0px !important;
}

.bviolet{
	background: #932ab6 !important;
	color: #fff !important;	
	border: 0px !important;
}

.blightblue h2,.blightblue h3, .blightblue h4, .blightblue h5, .blightblue h6,
.bblue h2,.bblue h3, .bblue h4, .bblue h5, .bblue h6,
.bgreen h2,.bgreen h3, .bgreen h4, .bgreen h5, .bgreen h6,
.bred h2,.bred h3, .bred h4, .bred h5, .bred h6,
.bviolet h2,.bviolet h3, .bviolet h4, .bviolet h5, .bviolet h6,
.borange h2,.borange h3, .borange h4, .borange h5, .borange h6{
	color: #fff !important;
}

@media (maxwidth: 400px){
    .navbar-header {
        position: relative
    }
    .navbar img {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 70%;
    } 
}

@media (max-width: 767px) {

    .range-list h4 {
        display: inline;
        font-size: 18px;
    }

    .range-list a {
        display: block;
    }

    .range-list img {
        width: 33%;
        height: 33%;
        margin-right: 10px;
        margin-bottom: 30px;
        margin-top: 20px;
    }

}


@media (min-width: 768px) {
    .container-sm-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-sm-height {
        display:table-row;
    }
    .col-sm-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 992px) {
    .container-md-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-md-height {
        display:table-row;
    }
    .col-md-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 1200px) {
    .container-lg-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-lg-height {
        display:table-row;
    }
    .col-lg-height {
        display:table-cell;
        float:none;
    }
}