/*

My Custom CSS
=============

Author:  Brad Hussey
Updated: August 2013
Notes:	 Hand coded for Udemy.com

*/
/*
=====================
LIGHTBOX
=====================*/

.offsetBottom {padding-bottom:10px;}
/* --------------------------------------
   Layout
   -------------------------------------- */
.offerSection {margin-bottom:10px; padding:0 20px 20px;}
.rightAlignLarge {float:right;}
#features {
	text-align: center;
}

#features img {
	margin: 0 0 20px;
}

#inputMessage {
	margin-bottom: 15px;
}

footer {
	background: rgba(66,111,178,1);
    background: -moz-linear-gradient(top, rgba(66,111,178,1) 0%, rgba(56,96,148,1) 50%, rgba(66,111,178,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(66,111,178,1)), color-stop(50%, rgba(56,96,148,1)), color-stop(100%, rgba(66,111,178,1)));
    background: -webkit-linear-gradient(top, rgba(66,111,178,1) 0%, rgba(56,96,148,1) 50%, rgba(66,111,178,1) 100%);
    background: -o-linear-gradient(top, rgba(66,111,178,1) 0%, rgba(56,96,148,1) 50%, rgba(66,111,178,1) 100%);
    background: -ms-linear-gradient(top, rgba(66,111,178,1) 0%, rgba(56,96,148,1) 50%, rgba(66,111,178,1) 100%);
    background: linear-gradient(to bottom, rgba(66,111,178,1) 0%, rgba(56,96,148,1) 50%, rgba(66,111,178,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#426fb2', endColorstr='#426fb2', GradientType=0 );
    color: #fff;
	font-size: 11px;
	padding: 20px;
    -webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.48);
    -moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.48);
    box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.48);
    border-top:1px solid white;
}


/* --------------------------------------
   Typography
   -------------------------------------- */
.emailButton {margin-right:10px;}
.alert {display:visible;}
span.label {line-height:2;}
#content {background-color: #f5f5f5;}
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}
#moreCourses {padding-left:10px; padding-right:10px;}

.sidebar-column {margin-top:10px; margin:10px;}
.well .page-header {
	margin-top: 0;
}

.well .page-header h1 {
	margin-top: 0;
}

ul.unstyled {
	list-style: none;
	padding: 0;
}
footer {margin-top:20px;}

/* --------------------------------------
   Navbar
   -------------------------------------- */
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {background-color:#2f5385;}
#searchInput {
	width: 200px;
}
.navbar-inverse .navbar-nav > li > a {font-size:16px; color:#bebebc;}
.navbar-brand {
	padding: 13px 15px; max-width:300px;
}
.navbar  {
    max-height:52px; background-color:#3d68a3;
   -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.48);
    -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.48);
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.48);
    border-bottom:1px solid #fff;

}
   
/* --------------------------------------
   Logo Header
   -------------------------------------- */

.boxShadow {
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.67);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.67);
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.67);
    border:1px solid white;

}
.guarantee img {max-width:200px;padding-top:5px;}
.logoHeaderWrapper{
    margin-top:70px;
    
}
#logoHeader {
    border-bottom:1px solid white;
    background: rgba(118,181,244,1);
    background: -moz-linear-gradient(top, rgba(118,181,244,1) 0%, rgba(66,111,178,1) 50%, rgba(118,181,244,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(118,181,244,1)), color-stop(50%, rgba(66,111,178,1)), color-stop(100%, rgba(118,181,244,1)));
    background: -webkit-linear-gradient(top, rgba(118,181,244,1) 0%, rgba(66,111,178,1) 50%, rgba(118,181,244,1) 100%);
    background: -o-linear-gradient(top, rgba(118,181,244,1) 0%, rgba(66,111,178,1) 50%, rgba(118,181,244,1) 100%);
    background: -ms-linear-gradient(top, rgba(118,181,244,1) 0%, rgba(66,111,178,1) 50%, rgba(118,181,244,1) 100%);
    background: linear-gradient(to bottom, rgba(118,181,244,1) 0%, rgba(66,111,178,1) 50%, rgba(118,181,244,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76b5f4', endColorstr='#76b5f4', GradientType=0 );
  
   
}
#logoHeader .page-header {border-bottom:0px; margin:30px 20px 20px; background: url('../../images/buble.png') top left no-repeat; background-size: contain;}
#logoHeader .page-header h1 {font-size:28px; color:black; text-shadow: 2px 2px 8px #fff; line-height:35px; font-weight:600; }
span.textSlogan {font-size: 22px; color:white; text-shadow: 1px 1px 4px #000; line-height:24px;}
.buttonContainer {padding-top:5px;}
.page-header {border-bottom:1px solid #ddd;}
/* --------------------------------------
   Carousel
   -------------------------------------- */
.carousel-caption {
    background-color: rgba(0,0,0,0.5); 
    padding-left:20px; padding-right:10px; 
    padding-top:20px;
    padding-bottom:40px;
    font-size: 24px;
    left:0;
    right:0;
    bottom:0;
}

.carousel-inner {position:relative;}
.carousel-indicators {bottom:5px;}
#myCarousel {
	margin-top: 0px;
}

.carousel-caption p {font-size:18px; line-height:22px;}
.carousel-caption h4 {
	font-size: 28px;
}

#myCarousel .item { height: 400px; }

#slide1 {
	background: url('../../images/carousel_medium_01.jpg') top center no-repeat;
}

#slide2 {
	background: url('../../images/carousel_medium_02.jpg') top center no-repeat;
}

#slide3 {
	background: url('../../images/carousel_medium_03.jpg') top center no-repeat;
}


/* --------------------------------------
   Global Styles
   -------------------------------------- */
.imgContainer {max-width:600px;}


.well {
	margin: 20px 0 0; border-radius:0px;
}

.tabbable img.thumbnail {
	margin: 0 20px 10px 0;
}

.thumbnails {
	margin: 20px 0;
}

.thumbnail {
	position: relative;
}

.thumbnail h3 {
    font-size: 20px;
    line-height: 20px;
    margin: 10px 0 20px;
}
.thumbnail .price {
    font-size: 22px;
    padding: 10px;
    position: absolute;
    right: 30px;
    top: -60px;
    z-index: 1000;
    
}

.thumbnail .price sup {
	font-weight: normal;
		font-size: 12px;
}
.thumbnail span.glyphicon {
	margin-right: 5px;
}
.green {
	font-size: 22px;
	position: absolute;
    right: 30px;
    top: 30px;
    z-index:1000;
    padding:10px;
}


.red {
	font-size: 22px;
	position: absolute;
    left: 30px;
    top: 30px;
    z-index:1000;
    padding:10px;
}
/* --------------------------------------
   Footer
   -------------------------------------- */
#footnote {font-size:14px;}
.bottomColLeft h6 {font-size:22px; font-weight:600;}
.bottomColLeft ul li, .bottomColLeft p {font-size:14px;}
#copyright a {color:#fff;}
/* --------------------------------------
   Media Queries
   -------------------------------------- */

/* Portrait & landscape phone */
@media (max-width: 480px) {
    .sidebar-column {margin:0px 0px 20px;}
    #bigCallout .page-header h1 {font-size:28px;}
    #logoHeader .page-header h1 small {font-size:16px;}
    .logoHeaderWrapper { margin: 70px 10px 30px !important;}
   

	.thumbnail .price {
		font-size: 14px;
	}
	
	.thumbnail .price sup {
		font-size: 10px;
	}
	
}

/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
     .hideHeader {display:none;}
    #moreCourses {padding-left:0px; padding-right:0px;}
    .buttonContainer {display:none;}
	.nav-collapse {padding-top:5px; margin-top:50px; background-color:#3d68a3;}
	#myCarousel .item { height: 768px; }
	
	#slide1 {
		background: url('../../images/carousel_small_01.jpg') top center no-repeat;
	}
	
	#slide2 {
		background: url('../../images/carousel_small_02.jpg') top center no-repeat;
	}
	
	#slide3 {
		background: url('../../images/carousel_small_03.jpg') top center no-repeat;
	}
	
	.carousel-caption {
		font-size: 16px;
	}
	
	.carousel-caption h4 {
		font-size: 22px;
	}
    
    #logoHeader .page-header {margin:0 20px 20px;}
    .logoHeaderWrapper {margin:70px 20px 30px;}
    .green {top:90%; right:5px;}
    .red {left:5px;}
    #moreCourses .thumbnail img {width:100%;}
    .thumbnail {margin-bottom:20px;}
    .sticker {display:block; margin:0 auto 20px; width:250px;}
    .bottomColLeft {padding-bottom:20px;}

}
@media (max-width: 992px) {
    .rightAlignLarge {display:block; margin:0 auto 20px !important; float:none; max-width:100% !important; }
    #text-page {padding:0 10px 10px;}
    .telButton {display:none;}
   
    
}
@media (min-width: 993px) {
#text-page {padding:0 20px 10px;}
}

/* Large desktop */
@media (min-width: 1200px) {
    #text-page .imgContainer {max-width:400px;}
	#myCarousel .item { height: 500px; }
	
	#slide1 {
		background: url('../../images/carousel_large_01.jpg') top center no-repeat;
	}
	
	#slide2 {
		background: url('../../images/carousel_large_02.jpg') top center no-repeat;
	}
	
	#slide3 {
		background: url('../../images/carousel_large_03.jpg') top center no-repeat;
	}

}

@media (max-width: 1200px) {
    #logoHeader .page-header {background: url('../../images/buble.png') top right no-repeat; background-size: contain;}
   #logoHeader .page-header {text-align:center;}
    .carousel-caption {display: none !important;}
    .imgContainer {max-width:500px; margin-left:10px;}
    #text-page .rightAlignLarge  {float:none; display:block; margin:20px auto; width:100%;}
    #text-page .imgContainer {max-width:100%;}

}