

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.navbar-inverse {
background-image: -webkit-linear-gradient(top,#ffffff 0,#ffffff 100%);
background-image: linear-gradient(to bottom,#ffffff 0,#ffffff 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.navbar-inverse .navbar-nav>li>a {
	text-shadow: 0 0px 0 rgba(0,0,0,.25);
color: #000000;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #cccccc;
}

footer{
	background-color: black;
}

.text-white{
	color:white;
	font-size:1em;
	margin-top: 0px!important;
margin-bottom: 0px!important;

}

.width-page{
	max-width: 1280px;
	height:auto;
}
#background-grumpy{
	background: url('../img/web_ginger.JPG')no-repeat!important;
	width: 1280px;
	height:720px;
}

body{
	background-color: #101c1a;
	font-family: 'Julius Sans One', sans-serif;

}
.img-responsive-custom{


	max-width: 100%;
	height: auto;

}
.ml25{
	margin-left:25px;
}
.p10{
	padding:10px;
}
.mt20{
	margin-top:20px!important;
}
.pb20{
	padding-bottom: 20px;
}
.pr20{
	padding-right:20px;
}
.hover_effect:hover{
	opacity:0.7;
}
.video_position{
position:absolute;
left:33%;
top:38%;
background-color:rgba(255, 255, 255, 0.6);
padding:3px;
}
/****************************android portrait(240px)**************************/

@media (min-width: 240px) and (max-width: 318px) {
	#background-grumpy{
		background: url('../img/fondo_320.png')no-repeat!important;
		 background-attachment: fixed;
	    background-position: center;
		width: 240px;
		height:390px;
	}
	.video_position{
	position:absolute;
	left:11%;
	top:180px;
	background-color:rgba(255, 255, 255, 0.6);
	padding:3px;

	}
	#player{
		width: 190px;
		height: 200px;
	}
}
/****************************iphone vertical**************************/

@media (min-width: 319px) and (max-width: 479px) {
#background-grumpy{
	background: url('../img/fondo_320.png')no-repeat!important;
	width: 320px;
	height:399px;
}
.video_position{
position:absolute;
left:12%;
top:180px;
background-color:rgba(255, 255, 255, 0.6);
padding:3px;

}
#player{
	width: 250px;
	height: 200px;
}
}
/**************************************iphone horizontal****************************/

@media (min-width: 480px) and (max-width: 599px) {
#background-grumpy{
	background: url('../img/fondo_480.png')no-repeat!important;
	width: 480px;
	height:290px;
}
.video_position{
position:absolute;
left:30%;
top:125px;
background-color:rgba(255, 255, 255, 0.6);
padding:3px;

}
#player{
	width: 200px;
	height: 150px;
}
}

/*********************************smartphoneVertical**********************************/

@media (min-width: 600px) and (max-width: 762px) {
#background-grumpy{
	background: url('../img/fondo_600.png')no-repeat!important;
	width: 600px;
	height:740px;
}
.video_position{
position:absolute;
left:20%;
top:320px;
background-color:rgba(255, 255, 255, 0.6);
padding:3px;

}
#player{
	width: 400px;
	height: 260px;
}
}
/* **********************ipad vertical*************************************/
@media (min-width: 763px) and (max-width: 802px){
#background-grumpy{
	background: url('../img/fondo_768x1024.png')no-repeat!important;
	width: 768px;
	height:904px;
}
.video_position{
position:absolute;
left:16%;
top:450px;
background-color:rgba(255, 255, 255, 0.6);
padding:3px;

}
#player{
	width: 500px;
	height: 320px;
}
}

/**********************************smartphoneHorizontal*****************************/

@media (min-width: 803px) and (max-width: 1023px)  {
#background-grumpy{
	background: url('../img/fondo_800.png')no-repeat!important;
	width: 800px;
	height:493px;
}
.video_position{
position:absolute;
left:30%;
top:230px;
background-color:rgba(255, 255, 255, 0.6);
padding:3px;

}
#player{
	width: 340px;
	height: 220px;
}
}


/*******************************************ipad horizontal*****************************/
@media (min-width: 1024px) and (max-width: 1278px) {
#background-grumpy{
	background: url('../img/fondo_1024x.png')no-repeat!important;
	width: 1024px;
	height:649px;
}
.video_position{
position:absolute;
left:23%;
top:280px;
background-color:rgba(255, 255, 255, 0.6);
padding:3px;
}
#player{
	width: 550px;
	height: 350px;
}

}


/* 1280PX X 720PX : PANTALLA*/
@media (min-width: 1280px) and (max-width: 1359px) {
	#background-grumpy{
	background: url('../img/web_ginger.JPG')no-repeat!important;
	width: 1280px;
	height:720px;
}
	.video_position{
position:absolute;
left:25%;
top:40%;
background-color:rgba(255, 255, 255, 0.6);
padding:3px;
}
}
@media (min-width: 1360px) and (max-width: 1398px) {
	.video_position{
position:absolute;
left:26%;
top:46%;
background-color:rgba(255, 255, 255, 0.6);
padding:3px;
}
}

@media (min-width: 1399px) and (max-width: 1524px) {
	.video_position{
		position:absolute;
		left:26%;
		top:36%;
		background-color:rgba(255, 255, 255, 0.6);
		padding:3px;
	}
	#player{
		width: 660px;
		height: 400px;
	}
}

@media (min-width: 1522px) and (max-width: 1695px) {
	.video_position{
position:absolute;
left:30%;
top:31%;
background-color:rgba(255, 255, 255, 0.6);
padding:3px;
}

}
@media (min-width: 1700px) {
	body{
		margin-top:50px;
	}
	.video_position{
	position:absolute;
	left:33%;
	top:36%;
	background-color:rgba(255, 255, 255, 0.6);
	padding:3px;
	}

}

.text-big{
	font-size: 1.5em;
}
body{
	/*overflow: hidden;*/
}