/* =======================================================
 *
 *      [1] MAIN STUFF
 *      [2] HEADER NAVBAR
 *      [3] MENU NAVBAR
 *      [8] TO TOP
 *
 *	CSS specific for this website all pages
 *	CSS specific for this website all pages
 *
 * ======================================================= */

 	.btn-submit {

		height: 40px !important;

	}

/* ====================================================================== *
      [1] MAIN STUFF
 * ====================================================================== */

	html {

	}

	body{
		font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
		margin-top: 66px;

		-webkit-transition: margin-top 0.4s ease;
	       -moz-transition: margin-top 0.4s ease;
	         -o-transition: margin-top 0.4s ease;
	            transition: margin-top 0.4s ease;
	}

	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
		font-family: 'Open Sans';
		font-weight: 500;
	}

	p {

		color: lightgrey !important;
	}

	.textcolour {
		color: lightgrey !important;
	}

	.responsive-image {
		position: relative;
		width: 100%;

	}

	.selection {
	    background: #e54e53;
	    color: #fff;
	}

	.mediaboxlogo {

		position: absolute;
		color:white;
		text-shadow: 1px 1px #000;
		font-style: italic;
		font-weight: bold;
		text-align-last: center;
		background-color: rgba(0, 0, 0, 0.0);
		border-radius: 10px;

	  text-align-last: center;
	  top: -2%;
	  left: 50%;
	  transform: translate(-50%, 0%);

		padding-top: 0px;
		padding-left: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		margin-top: -600px;

		width: 50%;
   
		opacity: 0.0;
		z-index:-999;


	}


/*	hack to fix bootstrap horizontal scrollbar */
/*	hack to fix bootstrap horizontal scrollbar */
/*	hack to fix bootstrap horizontal scrollbar */

	.row {
	    margin-right: 0px !important;
	    margin-left: 0px !important;
	}


/*	Word Wrap   Remove them, or override them with "unset" or "normal": */
/*	Word Wrap 	Remove them, or override them with "unset" or "normal": */
/*	Word Wrap 	Remove them, or override them with "unset" or "normal": */

	h1, h2, h3, h4, h5, h6, p {
		/*
					word-break: break-all;
					word-wrap: break-word;
					overflow-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					-ms-hyphens: auto;
					hyphens: auto;
					*/

					word-break: unset !important;
					word-wrap: unset !important;
					overflow-wrap: unset !important;
					-webkit-hyphens: unset !important;
					-moz-hyphens: unset !important;
					-ms-hyphens: unset !important;
					hyphens: unset !important;
}

/* to make videos responsive in Media boxes */
video {
	/* override other styles to make responsive */
	width: 90%    !important;
	height: auto   !important;
}

/* ====================================================================== *
      [2] HEADER
 * ====================================================================== */

	.header{
		position: fixed;
		top:0;
		z-index: 999;
		background: #fff;
		width: 100%;

		-webkit-box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.07);
		   -moz-box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.07);
				box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.07);
	}

	.scrolling .header{
		-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.22);
		   -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.22);
				box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.22);
	}

	@media only screen and (max-width: 768px) {
		.header{
			position: relative;
		}
		body{
			margin-top:0;

		}
	}

/* ====================================================================== *
      [3] MENU
 * ====================================================================== */

   	.icon-bar {
  	 padding-bottom:5px !important;
  	 width:38px !important;


   }

 	.navbar-toggle:hover {
   transform: scale(1.1,1.1)!important;
	 background-color:#ffffff !important;

   -webkit-border-radius: 3px 3px 0 0;
      -moz-border-radius: 3px 3px 0 0;
        -o-border-radius: 3px 3px 0 0;
           border-radius: 3px 3px 0 0;

   -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
       -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
           transition: all 0.2s;

 }

	.navbar-default {
	    background-color: rgba(0,0,0,0.0);
	    border: none;
	    margin: 0;

	}



	.navbar-collapse {
    	max-height: inherit !important;
	}

	.content .navbar-nav>li>a{
		text-transform: uppercase;
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		font-size: 18px;
		line-height: 2.0;
	 	color: #000;
	 	top:12px;   /* set position of text in full nav bar */


	}


	.navbar-brand{
		padding: 0px 0px;
		padding-left: 0;
	}
	.navbar-brand img{
		height: 40px;
	}
	.navbar-collapse>ul>li>a{
	 	line-height: 46px;/* the line height of the items must be the same as the height of the logo image */
	 	padding: 10px 25px;

	}
	.navbar-collapse>ul>li:last-child>a{
		padding-right: 10px;
	}

	@media only screen and (max-width: 2400px) {
		.navbar-collapse>ul>li>a{
		 	line-height: 15px;
		}
		/* this is the hamburger icon for mobile */
		.navbar-toggle {
    		margin-top: 10px;
				width: 60px;
				height: 60px;
    		outline: 0;
    		background: black !important;
		}
		.navbar-default .navbar-collapse, .navbar-default .navbar-form {
		    border-color: rgb(250, 250, 250);
		}
	}

	/* drop down menu style */

	/* remove background of all items on the menu (including the drop down title) */
	.content .navbar-nav>li.active>a,
	.content .navbar-nav>li>a:hover,
	.nav>li.open>a,
	.nav>li.open>a:hover,
	.nav>li.open>a:focus,
	.nav>li.dropdown>a.selected,
	.nav>li.dropdown>a.selected:hover,
	.nav>li.dropdown>a.selected:focus {
		background: none !important;
		color: black !important;
	}

	/* the arrow pointing down of the drop down menu title */
	.dropdown-toggle .fa{
		font-size: 10px;
		margin-left: 5px;
	}

	/* drop down menu */
	.navbar-nav>li>.dropdown-menu{
		padding:0;
		background: #333333;
		width: 450px;
		color: #fff;
		border: 0 !important;
		 -webkit-border-radius: 0px;
  		    -moz-border-radius: 0px;
  				 border-radius: 0px;

		-webkit-box-shadow: none !important;
  		   -moz-box-shadow: none !important;
				box-shadow: none !important;
	}

	/* drop down content */
	.dropdown-menu-content{
  		padding: 25px 0 !important;
	}

	.dropdown-menu-content ul:first-child{
		border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
	}

	/* drop down menu column */
	.dropdown-menu-column{
		width: 50%;
		float: left;
		padding: 0 !important;
		margin: 0 !important;
	}

	.dropdown-menu-column li{
		position: relative;
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.dropdown-menu-column a{
		font-size: 12px;
		width: 100%;
		padding: 12px 40px;
		height: auto;
		color: gray !important;
		display: block;
	}

	.dropdown-menu-column a:hover,
	.dropdown-menu-column a.selected{
		color: #fff !important;
		text-decoration: none;
	}

	.dropdown-menu-column a:hover{
		background: rgba(255, 255, 255, 0.1);
	}

	/* popover for each item of the drop down menu */
	.popover{
		margin-left: -15px !important;
	}
	.popover-with-margin .popover{
		margin-left: -240px !important;
	}

	.popover{
		border-radius: 0px;
		border: 1px solid #D8D8D8 !important;
		-webkit-box-shadow: 0px 0px 14px rgba(0,0,0,0.3);
		   -moz-box-shadow: 0px 0px 14px rgba(0,0,0,0.3);
			-ms-box-shadow: 0px 0px 14px rgba(0,0,0,0.3);
			 -o-box-shadow: 0px 0px 14px rgba(0,0,0,0.3);
			    box-shadow: 0px 0px 14px rgba(0,0,0,0.3);
	}

	.popover .arrow {
		border-left-color: #D8D8D8 !important;
	}

	.popover_img_container{
		width: 244px;
		height: 160px;
		overflow: hidden;
	}

	.popover_img_container img{
		max-width: 100%;
		width: 100%;
	}

	/* reponsive style of the drop down menu */
	@media only screen and (max-width: 1280px) {

		.content .navbar-nav>li>a{
			text-transform: uppercase;
			font-family: 'Montserrat', sans-serif;
			font-weight: 700;
			font-size: 14px;
		 	color: #fff;
		}

}

/* reponsive style of the drop down menu */
@media only screen and (max-width: 1080px) {

	.content .navbar-nav>li>a{
		text-transform: uppercase;
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		font-size: 12px;
		color: #fff;
	}

}


	/* reponsive style of the drop down menu */
	@media only screen and (max-width: 992px) {


		.dropdown-menu-column{
			width: 100%;
		}
		.dropdown-toggle .fa{
			float: right;
			font-size: 15px;
		}
		.dropdown-menu-column a:hover, .dropdown-menu-column a.selected{
			color: #e54e53 !important;
		}
		.dropdown-menu-column a{
			padding: 5px 50px;
		}
		.popover_img_container{
			display: none;
		}

	.mediaboxlogo {

	  top: 0%;
	  width: 80%;

	}

	}


	/* reponsive style of the drop down menu */
	@media only screen and (max-width: 580px) {

	.mediaboxlogo {

	  top: 0%;

	}

	}


/* ====================================================================== *
      [8] TO TOP
 * ====================================================================== */

	.fixed{
		position: fixed;
		left: 24px;
		bottom: 80px;
		display: none;
		z-index: 999;
	}

	.to-top{
		height: 56px;
		line-height: 36px;
		width: 52px;
		background-color: rgba(0,0,0,.8);
		color: #fff;
		cursor: pointer;
		text-align: center;
		font-size: 18px;

		-webkit-border-radius: 3px 3px 0 0;
		   -moz-border-radius: 3px 3px 0 0;
		     -o-border-radius: 3px 3px 0 0;
		        border-radius: 3px 3px 0 0;

		-webkit-transition: all 0.2s;
		   -moz-transition: all 0.2s;
		    -ms-transition: all 0.2s;
		     -o-transition: all 0.2s;
		        transition: all 0.2s;
	}

	.to-top i{
		margin-top: 10px;
	}

	.to-top:hover{
		transform: scale(1.1,1.1);
		background-color: #90011a !important;
	}



  .mailphonebox {

  	position:fixed; 
  	border: 1px solid rgba(0, 0, 128, 0.8); 
  	box-shadow: 5px 5px 12px 0px #000080;  
  	width: 220px; height: 70px; 
  	background-color: rgba(141, 68, 25, 0.5 ); 
  	top:1.4%; 
  	right:15px; 
  	z-index: 999;
  }



	/* ====================================================================== *
	      [8] Email
	 * ====================================================================== */

		.email-fixed {
			position: fixed;
			right: 45px;
			top: 3%;
			display: block;
			z-index: 999;
		}

		.glyphicon {
		color: #fff;


		}

		.email {
			height: 52px;
			line-height: 36px;
			width: 52px;
			background-color: rgba(0,0,0,.8);
			color: #fff;
			cursor: pointer;
			text-align: center;
			font-size: 26px;

			-webkit-border-radius: 3px 3px 0 0;
			   -moz-border-radius: 3px 3px 0 0;
			     -o-border-radius: 3px 3px 0 0;
			        border-radius: 3px 3px 0 0;

			-webkit-transition: all 0.2s;
			   -moz-transition: all 0.2s;
			    -ms-transition: all 0.2s;
			     -o-transition: all 0.2s;
			        transition: all 0.2s;
		}

		.email i{
			margin-top: 10px;
		}

		.email:hover{
			transform: scale(1.1,1.1);
			background-color: #90011a !important;
		}


		/* ====================================================================== *
		      [8] Phone
		 * ====================================================================== */

			.phone-fixed {
				position: fixed;
				right: 155px;
				top:3%;
				display: block;
				z-index: 999;
			}

			.phone {
				height: 52px;
				line-height: 36px;
				width: 52px;
				background-color: rgba(0,0,0,.8);
				color: #fff;
				cursor: pointer;
				text-align: center;
				font-size: 26px;



				-webkit-border-radius: 3px 3px 0 0;
				   -moz-border-radius: 3px 3px 0 0;
				     -o-border-radius: 3px 3px 0 0;
				        border-radius: 3px 3px 0 0;

				-webkit-transition: all 0.2s;
				   -moz-transition: all 0.2s;
				    -ms-transition: all 0.2s;
				     -o-transition: all 0.2s;
				        transition: all 0.2s;
			}

			.phone i{
				margin-top: 10px;
			}

			.phone:hover{
				transform: scale(1.1,1.1);
				background-color: #90011a !important;
			}

				.phone-number {
					float: left;
					font-size: 24px;
					color: white;
					position: fixed;
					right: 5px;
					bottom:75%;
					display: block;
					z-index: 999;
					border-radius: 2px;
					background-color: rgba(0,0,0,0.5);

				}

			.bg {
			    display: none;
			}

      /* ====================================================================== *
  		      [9] red hotlinks
  		* ====================================================================== */

			       .redlink {
			    color: #90011a !important;
			    font-weight: bold !important;
			}

			.redlink:hover {
			    transform: scale(1.1,1.1);
			    color: #90011a !important;
			}