/*

Theme Name: jagaban
Author: obi tobias
Author URI: http://www.obitobias.com
*/



/*--------------
 * Table of Contents
--------------*/

/*-----------------
1. Reset.css
2. Helper Classes
3. Home page banner
4. Pitch Section
5. Features Section
6. Review
7. Pricing
8. Subscribe form
9. Media Queries
------------------*/
/*-------------------------------my menu dropdown workarround-------------*/

@media (max-width: 2000px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
       
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
	
/*----------------------forms re_form sign_in form--------*/
input[type="text"],
input[type="password"],
textarea,
select,
textarea.form-control {
	float: center;
	display: block;
	border-radius: 5px;
	position:relative;
	left: 15%;
	width: 70%;
	height: 30px;
	margin: 5px 0px;
	padding: 0px 5px;

}

form button ,
form img {
	
	position:relative;
	left: 15%;
	width: ;
	height:;
	margin: 5px 0px;

}

#heading{
	font-weight: bold;
	margin: 10px;
	text-align: center;
	

}

/*---------------alert---------------------------*/

.error{
	color: red;
	margin: 10px;
	font-size: 12px;
	
	
	
}

.error_val{
	color: red;
	position:relative;
	left: 15%;
	font-size: 12px;
	
}

.successnotify{
 color: blue;
 margin: 10px;
font-size: 13px;
}

.success{
 color: blue;
 
}


 .input_box{ width: 25px; border: 2px solid #000000; margin: 3px; position: relative; left: 2%; }
 .input_box_event, .input_box_year { width: 50px; border: 2px solid #000000; margin: 3px; position: relative; left: 2%; }
	 
  #bar {font-size: 40px; font-weight: bold; line-height: 20px; position: relative; left: 2%;  }
  .divinput { width: 400px; background: #aaa; margin-bottom: 10px;} 
  .main1 { background: green; width: 100%; align: center; position: relative; left: 0%;
		   box-shadow: 5px 5px 5px 0px solid #aaa;  }
		   
   .success { font-size: 15px; font-weight: bold; position: relative; left: 20%;}
   .machine { font-size: 15px; font-weight: bold; color: red; position: relative; left: 65%;}
   
	.formselect{ width: 75%; position: relative; left: 10%; }
	.scroll{	background: #fdfdfd; width: 180%; align: center; position: relative; left: 0%;
				box-shadow: 5px 5px 5px 0px solid #aaa; height: 60px; margin: auto;  }
	.inner_div{ height: 40px; background: #aaa; width: 140%; margin: auto; }

	.single{	background: #fdfdfd; width: 100%; align: center; position: relative; left: 0%;
				box-shadow: 5px 5px 5px 0px solid #aaa; height: 60px; margin: auto;  }
	.single-div{ height: 40px; background: #aaa; width: 100%; margin: auto; }
	
	.lapping{	background: #fdfdfd; width: 180%; align: center; position: relative; left: 0%;
				box-shadow: 5px 5px 5px 0px solid #aaa; height: 90px; margin: auto;  }
	.lapping-div{ height: 80px; background: #aaa; width: 140%; margin: auto; }

	.knocking{	background: #fdfdfd; width: 180%; align: center; position: relative; left: 0%;
						box-shadow: 5px 5px 5px 0px solid #aaa; height: 130px; margin: auto;  }
	.knocking-div{ height: 120px; background: #aaa; width: 140%; margin: auto; }
	
	.non-consecutive{	background: #fdfdfd; width: 180%; align: center; position: relative; left: 0%;
						box-shadow: 5px 5px 5px 0px solid #aaa; height: 130px; margin: auto;  }
	.non-consecutive-div{ height: 120px; background: #aaa; width: 160%; margin: auto; }
	
	.pattern{	background: #fdfdfd; width: 180%; align: center; position: relative; left: 0%;
						box-shadow: 5px 5px 5px 0px solid #aaa; height: 130px; margin: auto;  }
	.pattern-div{ height: 120px; background: #aaa; width: 160%; margin: auto; }
 
 #hidden{
	display: none;
	
	}
	
	#result { 
font-weight: bold; 
color: #000000; 
position: relative;
background: #fdfdfd;
font-size: 30px;
font-size: 3.2vw; 
width: 100%;
margin: auto;
text-align: justify;
font-family: roboto;
padding: 5px;

}

.hideoption{
	display: none;
}
.unhideoption{
 display: visible;
}

.green_numbers{
	color: blue;
	font-weight: bolder;
}

.red_numbers{
	color: red;
	font-weight: bolder;
}

.btn-action{
font-size: 12px;
}

.bankers, .best_five{
	font-weight: bold;
	color: #000;
	font-size: 2.0vw;
	display: block;
	
}


.permutation , .pool{
	font-weight: bold;
	color: #000;
	font-size: 1.5vw;
	display: block;

}

#header{
	font-size: 2.7vw;
}

#day {
	background: #aaa;
	border: 2px solid #aaa;
	box-shadow: 0 0 3px 3px solid #aaa;
	
	padding: 5px 2px;
	margin: 10px 3px;
	border-radius: 5px;
}

#game {
	background: #fff;
	box-shadow: 0 3px, 3px solid #aaa;
	padding: 3px;
	margin: px;
	border-radius: 10px;
	border: 1px solid #aaa;
}

.footer{
	background: #fff;
	margin-top: 10px;
}

#tutor > p {
 
 padding: 15 5px;

}

.field {
 text-align: center;
 font-family:hebrew;
 font-size: 16px;
 font-weight:bold;
 color: indigo;
}

img {
overflow-x: hidden;
}

.vipInfo {
	font-size: 16px;
}  



/***********************media screen*****************/

@media only screen and (max-width: 450px) {
  .scroll, .close, .lapping, .knocking, .non-consecutive, .pattern { 
	overflow: scroll;
  }
}

@media only screen and (min-width: 500px) {
  .success { position: relative; left: 20%;}
   .machine { position: relative; left: 50%;}
}

@media only screen and (min-width: 650px) {
  .success {position: relative; left: 15%;}
   .machine { position: relative; left: 40%;}
}

@media only screen and (min-width: 980px) {
  .success {position: relative; left: 15%;}
   .machine { position: relative; left: 35%;}
}

@media only screen and (min-width: 1100px) {
  .success {position: relative; left: 10%;}
   .machine { position: relative; left: 25%;}
}

@media screen and (max-width: 850px){
	.bankers, .best_five{
	font-weight: bold;
	color: #000;
	font-size: 2.5vw;
	display: block;
	
	}


.permutation , .pool{
	font-weight: bold;
	color: #000;
	font-size: 1.9vw;
	display: block;

	}

#header{
	font-size: 2.8vw;
	}
}

@media screen and (max-width: 600px){
	.bankers, .best_five{
	font-weight: bold;
	color: #000;
	font-size: 4.0vw;
	display: block;
	
	}


.permutation , .pool{
	font-weight: bold;
	color: #000;
	font-size: 2.8vw;
	display: block;

	}

#header{
	font-size: 4.0vw;
	}
}


@media screen and (max-width: 400px){
	.bankers, .best_five{
	font-weight: bold;
	color: #000;
	font-size: 4.2vw;
	display: block;
	
	}


.permutation , .pool{
	font-weight: bold;
	color: #000;
	font-size: 3.4vw;
	display: block;

	}

#header{
	font-size: 5.0vw;
	}
}

@media screen and (min-width: 200px), screen and (max-width: 330px){
  #result { 
font-size: 10px; 
font-size: 4.1vw;
width: 100%;

}

}


@media screen and (max-width: 330px){
	.bankers, .best_five{
	font-weight: bold;
	color: #000;
	font-size: 4.7vw;
	display: block;
	
	}


.permutation , .pool{
	font-weight: bold;
	color: #000;
	font-size: 3.9vw;
	display: block;

	}

#header{
	font-size: 5.5vw;
	}
}

@media screen and (min-width: 200px), screen and (max-width: 330px){
  #result { 
font-size: 10px; 
font-size: 4.1vw;
width: 100%;

}

}

@media screen and (max-width: 200px){
	.bankers, .best_five{
	font-weight: bold;
	color: #000;
	font-size: 5.5vw;
	display: block;
	
	}


.permutation , .pool{
	font-weight: bold;
	color: #000;
	font-size: 4.5vw;
	display: block;

	}

#header{
	font-size: 6.5vw;
	}
}


.balls{
	width:10%;
	height:10%;
	background-color:#fff;
	border-style:solid;
	border-radius:50%;
	display:inline-block;
	text-align:center;
	padding:7px;
	border-color:#bbb;
	margin:2px;'
}

.powerball{
	width:10%;
	height:10%;
	background-color:coral;
	border-style:solid;
	border-radius:50%;
	display:inline-block;
	text-align:center;
	padding:7px;
	border-color:#bbb;
	margin:2px;'
}

@media screen and (min-width: 200px), screen and (max-width: 330px){
  #result { 
font-size: 10px; 
font-size: 4.1vw;
width: 100%;

}

}



@media screen and (min-width: 780px){
  #result { 
font-size: 10px; 
font-size: 3.9vw;

}

@media screen and (min-width: 885px){
  #result { 
font-size: 10px; 
font-size: 2.8vw;


}

@media screen and (min-width: 1881px){
  #result { 
font-size: 10px; 
font-size: 1.9vw;


}


/*******************************************carousal*******************************************************************************/

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relativ;
  margin: auto;
  z-index: 1;
}

/* Make the images invisible by default */
.CarousalContainers {
  display: none;
}

/* forward & Back buttons */
.Back, .forward {
  cursor: pointer;
  position: absolute;
  top: 48%;
  width: auto;
  margin-top: -23px;
  padding: 17px;
  color: grey;
  font-weight: bold;
  font-size: 19px;
  transition: 0.4s ease;
  border-radius: 0 5px 5px 0;
  user-select: none;
}

/* Place the "forward button" to the right */
.forward {
  right: 0;
  border-radius: 4px 0 0 4px;
}

/*when the user hovers,add a black background with some little opacity */
.Back:hover, .forward:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption Info */
.Info {
  color: #e3e3e3;
  font-size: 16px;
  padding: 10px 14px;
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

/* Worknumbering (1/3 etc) */
.MessageInfo {
  color: #f2f2f3;
  font-size: 14px;
  padding: 10px 14px;
  position: absolute;
  top: 0;
}

/* The circles or bullets and indicators */
.dots {
  cursor: pointer;
  height: 16px;
  width: 16px;
  margin: 0 3px;
  background-color: #acc;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.5s ease;
}

.enable, .dots:hover {
  background-color: #717161;
}

/* Faint animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.4s;
  animation-name: fade;
  animation-duration: 1.4s;
}

@-webkit-keyframes fade {
  from {opacity: .5}
  to {opacity: 2}
}

@keyframes fade {
  from {opacity: .5}
  to {opacity: 2}
}