/*-----------------------------------Modal--------------------------------------------------------------*/
/* Add a dark gray background color to the modal header and center text */
.modal-header, h4, .close {
    background-color: #333;
    color: #fff !important;
    text-align: center;
    font-size: 30px;
}

.modal-header{
	height: 20%;

}

.modal-header, .modal-body {
    padding: 40px 50px;
}

/*-------------------------------------------------------------------------------------------------*/

/*-----------------------------------modal license info--------------------------------------------------------------*/
.modal-header-license, .modal-license-close{
	background-color: #333;
    color: #fff !important;
    text-align: center;
    font-size: 30px;
}

.modal-header-license{
	height: 20%;

}

.modal-header-license, .modal-body {
    padding: 40px 50px;
}

/*-------------------------------------------------------------------------------------------------*/
* {
 box-sizing: border-box;
}
*:before,
*:after {
 box-sizing: border-box;
}

html {
 /* box-sizing: border-box;*/
}

body {
	
	/*padding-bottom: 70px; */
}

body, html {
    height: 100%;
    margin: 0;
}

html,
body {
 height: 100%;
 position: relative;
}
/* think through wich should be main conatiner--- TO DO */

.main-container {
	 min-height: 100vh; /* will cover the 100% of viewport */
	 overflow: hidden;
	 display: block;
	 position: relative;
	 padding-bottom: 100px; /* height of your footer */

	overflow:auto;
	padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.pagecontainer{
	min-height:100%;
	padding: 40px 120px !important;
}
.container {
	min-height:100%;
    /*padding: 80px 120px;*/
	padding: 40px 60px !important;

	padding-left: 70px; 
	padding-right: 70px;

}


.wrapper {
margin-top: 16px; padding-bottom: 500px; 
} 


/* Add a dark background color to the footer */

		footer a {
			color: #f5f5f5;
		}

		footer a:hover {
			color: #777;
			text-decoration: none;
		}

		footer  {
	
			background-color: #2f2f2f; 
			color: #ffffff;
			
			position: relative !important;
			margin-top: -150px; /* negative value of footer height */
			height: 150px;
			clear:both;
			padding-top:20px;
			
		}

	

@media (max-width: 978px) {
	.pagecontainer {
		padding: 80px 0px;
		margin:0;
	}
}

.info-hover-pop {
	display: none;
}



/*---------------------------CAROUSEL-------------------------------------------------------------------*/
.carousel-inner img {
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%); /* make all photos black and white */ 
    width: 100%; /* Set width to 100% */
	height: 50px;
    margin: auto;
}

.carousel-caption h3 {
    color: #0066ff !important;
}
.carousel-caption p {
    color: #0066ff !important;
}



@media (max-width: 600px) {
    .carousel-caption-content {
        display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
    }
}
@media (max-width: 600px) { /*Small screen size, make carousel pic go under navbar, try 980px or 992px if not good*/
	#frontpageCarousel { 
		margin-top: 50px !important;
	}
}

/*----------------------------------------------------------------------------------------------*/


/*-------------------------------------Dance PLayer Version pages-------------------------*/

.anchor_div .anchor_link {
  position: absolute;
  left: 0px;
  top: -70px;
}

.anchor_div {
  position: relative;
}
/*----------------------------------------------------------------------------------------------*/



.bg {
    /* The image used */
    

    /* Full height */
    height: 100%; 
	
		/* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

	  -webkit-filter: grayscale(90%);
    filter: grayscale(90%); /* make all photos black and white */ 
}

.cta h1{
    color: #fff;
	}

 .cta {
            position: relative;
            top: 35%;
            transform: translateY(-35%);

		
            /*background: rgba(0, 0, 0, 0.5);*/
            padding: 5rem; 
  }


/*
 .scrolledbg{
  transition:500ms ease;
  background: blue;

}

.scrolled{
	transition:500ms ease;
	color: green !important;
}
/*
.navbar-inverse.scrolled {
	background:#000000; 

}

.navbar-inverse.scrolled li a {
	color: red;

}
	*/
	


.navbar-default {
border: none;

	transition:500ms ease;

		background:transparent;
    
}

.navbar-default .navbar-nav > li > a {

	  color: white;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: #E7E7E7;
    /*color: purple;*/
}



/* --- TYPEAHEAD  works together with includes/typeahead.js---*/

.typeahead { 

/*border: 2px solid #FFF;border-radius: 4px;padding: 8px 12px;max-width: 300px;min-width: 290px;background: rgba(66, 52, 52, 0.5);color: #FFF;*/
}
	.tt-menu { width:300px; }

	ul.typeahead{margin:0px;padding:10px 0px;}

	ul.typeahead.dropdown-menu li a {padding: 10px !important;	border-bottom:#CCC 1px solid;color:#0d0d0d;}

	ul.typeahead.dropdown-menu li:last-child a { border-bottom:0px !important; }
	.bgcolor {
	min-width: 290px;max-height:340px;background:url("world-contries.jpg") no-repeat center center;padding: 100px 10px 130px;border-radius:4px;text-align:center;margin:10px;}
	
	.demo-label {font-size:1.5em;color: #686868;font-weight: 500;color:#FFF;}

	.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
		text-decoration: none;
		background-color: #1f3f41;
		outline: 0;
	}