@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Poppins:300,400,500,600,700|Work+Sans:400,500,600|Roboto+Condensed:300,400,700");

hmtl, body{
	font-family: 'Open Sans', Verdana, sans-serif;
	font-size: 16px;
}
h1, h2{
	 font-family: 'Open Sans', sans-serif;
    font-size: 2.5em;
    font-weight: 700;
    letter-spacing: -1px;
    text-transform: capitalize;
    margin: 20px 0;
    font-weight: bold;
}
h1{
	font-size: 2.5em;
}
h2{
    font-size: 2.2em;
    margin: 30px 0;
}
p{
	font-size: 1em;
	line-height: 1.8em;
}
/* FULL WIDTH MENU*/
.navbar .container{
	position:relative;
}
.navbar{
	padding: 0 12px;
}

.navbar .dropdown-menu{
	/*left:auto;*/
	left: 0;
	right: 0;
}

.navbar .normal{
	left: auto;
	right: auto;
}
.navbar .dropdown-menu > li{
	display:block;
}

.navbar .dropdown{
	position:static;
}

.navbar.dropdown-submenu{
position:relative;
}
.navbar .dropdown-submenu > a:after{
top:8px;
right:9px;
font-size:11px;
content:"f105";
position:absolute;
font-weight:normal;
display:inline-block;
font-family:FontAwesome;
}
.navbar .dropdown-submenu > .dropdown-menu{
	top:3px;
	left:100%;
	margin-top:-5px;
	margin-left:0px;
}
.navbar ul.dropdown-menu .container{
	padding: 0 0 15px 0;
}
.navbar ul.dropdown-menu li{
	line-height: 25px;
}
.navbar ul.dropdown-menu li h3{
	color: #1f1f1f;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
}
.navbar ul.dropdown-menu li a{
	color: #575757;
	font-size: 15px;
}
.navbar ul.dropdown-menu li a:hover, .seven-cols ul > li a:hover{
	color: #1f1f1f;
	text-decoration: underline;
}

/*Submenu comes from LEFT side*/
.navbar .dropdown-submenu > .dropdown-menu. submenu-left{
	left:-100%;
}

.navbar .dropdown-submenu:hover > .dropdown-menu{
	display:block;
}
.navbar-right{
	margin-right: 0px;
	height: 60px;
	overflow: hidden;
}
.navbar-right li{
	margin: 15px 8px;
	float: left;
}
.navbar-right li:first-child{
	margin: 15px 8px 15px 15px;
}
.navbar-right li a{
	padding: 0;
	line-height: inherit;
}
.navbar-right li a i{
	font-size: 30px;
}
.nav > li.socialTop{
	display: inline-block;
}
/*full width submenu*/
.navbar. dropdown.mega-menu-fullwidth .dropdown-menu{
	left: 0;
	right: 0;
	overflow: hidden;
}

/*END TOP MENU
-----------------------*/
.topBanner{
	text-align: center;
}

.slideControls{
  position: absolute;
    width: 100%;
    top: 45%;
  left:0;}
  .slideControls i{
    font-size:2.7em;
    color: #c4262e;
  }
  .slideControls i:hover{
  	opacity: .8;
  }
  .slideNext{
    right:0;
    position:absolute;
    cursor:pointer;
    margin: 0 -0.3em 0 0;
  }
  .slidePrev{
    left:0;
    position:absolute;
    cursor:pointer;
    margin: 0 0 0 -0.3em;
  }
  
  /* FOOTER
------------------------- */
@media (min-width: 1200px) {
  .five-cols .col-md-1,
  .five-cols .col-sm-1,
  .five-cols .col-lg-1 {
    width: 20%;
    *width: 20%;
  }
}
/* 20% = 100% (full-width row) divided by 5 */

#footer-top{
	background-color: #373737;
	padding: 20px 2vw 12px;
   margin-top: 22px;
   text-align: center;
   font-size: 11px;
}
#footerWrapper h3{
	color:#bababa;
	font-size: 16px;
	letter-spacing: 1px;
	line-height: 35px;
	margin: 0;
	text-transform: uppercase;
}
#footerWrapper h3.join{
	float: left;
}
#footer-top span.bont_icon{
	height: 20px;
    width: 85px;
    display: inline-block;  
}
ul.socialNetwork{
    padding: 0;
    display: block;
    margin: 0;
    text-align: left;
}
ul.socialNetwork li, .newsletter li{
    display: inline-block;
    list-style-type: none;
    padding: 0 3px;
    text-align: center;
    vertical-align: top;
}
.newsletter li{
	/*float: left;*/
}
.newsletter input[type=text], .newsletter input[type=email]{
	/*width: 200px;*/
}

ul.socialNetwork li a{
	width: 33px;
	height: 33px;
	line-height: 33px;
}
ul.socialNetwork li a:hover i{
	background-color: #ffffff;
}
ul.socialNetwork li i{
	background-color: #666;
	border-radius: 5px;
	color: #222;
 	width: 33px;
	height: 33px;
	line-height: 33px;
}
.newsletter{
	float: right;
	line-height: 30px;
}
.newsletter form{
	margin: 0;
	padding: 0;
}
.newsletter ul{
	margin: 0;
	padding: 0;
   text-align: center;
}
.newsletter li input{
	 background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px !important;
    box-shadow: none;
    color: #fff;
    font-size: 14px !important;
    padding: 2px 10px;
    width: 100%;
    min-width: 15em;
}
.fa-submit {
  	background: transparent;
   border: 0;
   color: #5a5a5a;
}
.fa-submit:hover{
	color: #ffffff;
}
#main-footer{
	background-color: #2e2e2e;
	color: #888;
	padding: 40px 0;
}
#main-footer a{
	color: #888;
	font-size: 15px;

}
#main-footer a:hover{
	text-decoration: underline;
}
.footerWidget li{
	line-height: 25px;
}
.logo-btm{
	background: transparent url(../images/BontCyclingLogo-btm.svg) no-repeat center;
	background-size: cover;
	width: 100%;
    padding-top: 25%;
}
.copy{
	float:right;
	font-size: 13px;
	text-align: right;
}

/* Featurettes
------------------------- */

.featurette-divider {
  margin: 0px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 1200px){
	.five-cols > div:last-child{
	float: right;
	}
}

@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}
/* 14% = 100% (full-width row) divided by 7 */
@media (max-width: 991px){
	.newsletter{
		text-align: center;
		margin-top: 20px;
		float: none;
	}
	#footerWrapper h3.join{
		float: none;
		text-align: right;
	}
	.footerWidget ul li {
    display: inline-block;
    margin: 0 10px 0 0;
	}
	.five-cols > div:last-child{
	float: none;
	text-align: center;
	}
	.copy {
    float: none;
    display: inline-block;
    font-size: 13px;
    text-align: center;
	}
	
}
@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}



@media (width: 768px){ /*only for newsletter layout*/
	/*#footerWrapper h3.join {
    float: right;
	}
	.newsletter {
    float: none;    
    margin: 8px auto 0;
	}*/
	.footerWidget ul li {
    display: inline-block;
    margin: 0 10px 0 0;
	}
	.five-cols > div:last-child{
	float: none;
	}
}

@media (max-width: 767px){
	h1{
	font-size: 2em;
   /*padding-left: 10px;*/
 }
	/* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 0px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 0px;
  }

/* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
	.navbar ul.dropdown-menu li h3{
		color: #ffffff;
	}
	.navbar ul.dropdown-menu li a{
		color: #9d9d9d;
	}
	.navbar ul.dropdown-menu li a:hover{
		color: #ffffff;
	}
	.navbar .col-sm-4{
		padding: 0 0 0 2em;
	}
	.seven-cols > div{
		display: block;
		float: none;
		overflow: hidden;
		width: 100%;
	}
	.seven-cols > div > ul > li:first-child{
		display: block;
    	clear: both;
    	width: 100%;
	}
	.seven-cols > div > ul > li:first-child h3{
		margin-top: 10px;
		margin-bottom: 5px;
	}
	.seven-cols > div > ul > li{
		float: left;
      margin: 3px 10px;
	}
/*footer---------*/
	
	#footerWrapper h3.join{
	float: none;
	text-align: center;
	margin-bottom: 10px;
	}
	ul.socialNetwork{
	margin: 0 auto;
	text-align: center;
	}
	.newsletter{
		float: none;
	}
	.newsletter ul{
		padding: 0 10%;
	}
	.newsletter li{
		width: 100%;
    margin: 3px auto;
	}
	
	.slider1{
    	text-align: right;
    	margin: 50px auto 0;
    }
    .slider2{
    	margin: 0;
    }
    .footerWidget ul li {
    display: inline-block;
    margin: 0 10px 0 0;
	}
	.five-cols > div:last-child{
	float: none;
	}
}


/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
#cboxOverlay{background-color: rgba(0,0,0,0.95);}


#modal-pop{
	width: 100%;
	height: 100%;
}
/* Full-width input fields */
.modal input[type=text], .modal input[type=password], .modal input[type=email] {
    width: 100%;
    padding: 6px 20px;
    margin: 6px auto;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
	font-size:16px;
	max-width: 100%;
	color: #3a3939;
}
.modal select{
	width: 100%;
	padding: 6px 20px;
	margin: 6px 0;
}

.modal button {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    background-color: #0a0a0a;
    color: white;
    padding: 10px 20px;
    margin: 6px auto;
    border: none;
    cursor: pointer;
    width: 100%;
	font-size:20px;
}
.modal button:hover {
    opacity: 0.8;
}
.modal-logo{
	margin: 20px auto;
	width: 12rem;
	
}
/* Center the image and position the close button */
.popupHeader {
    font-family: "Roboto Condensed", sans-serif;
    text-align: center;
    position: relative;
    max-width: 100%;
    line-height: 1.5;
    
}

.popupHeader h1{
	font-size: 1.2em;
	font-family: 'Roboto Condensed', "Open Sans", Verdana, sans-serif;
	font-weight: 700;
	color: #000;
	margin: 5px 0;
	padding: 0 4rem;
	text-align: center;
	text-transform: uppercase;
	line-height: 1.2;
}
.popupHeader h1 span{
	display: block;
	margin: 0 0 10px 0;
	
}
.popupHeader p{
	font-size: 1em;
	color: #000;
	text-align: center;
	padding: .5em 0;
	margin: 0;
	
}
.modal-country{
	float: left;
	width: calc(50% - 10px);
	margin-right: 10px;
}
.modal-riding{
	float: left;
	width: calc(50% - 0px);
}
/* The Modal (background) */
.modal {
	 padding: 1em;
    background-color: rgba(239,239,239,1);
    
}
#cboxClose{border: none; position:absolute; top:10px; right:10px; background-image:url(../images/icons/close-modal.png); background-repeat: no-repeat; width:25px; height:25px; text-indent:-9999px;z-index:9999}
#cboxClose:hover{background-position:-25px 0;}
/* The Close Button (x) */
.close {
    position: absolute;
    right: 0px;
    top: -30px;
    color: #000;
    font-size: 40px;
    font-weight: bold;
    z-index: 999;
}
.close:hover,.close:focus {
    color: red;
    cursor: pointer;
}


@media (max-width: 767px){
	.colorbox{
		max-width: calc(100% - 1em);
	}
	.modal{
		width: 90vw;
    margin: 0px 5vw;
	}
	.modal form{
		padding: 0;
		margin: 0 auto;
	}
	.popupHeader h1{
		padding: 0 1rem;
	}

}