/*** Things to do ***/

/* 1. There is an issue with the text on XS devices which needs to be fixed by adding margin-bottom to the img-thumbnail */

/********************/

/* CSS Overides for Bootstrap ******
************************************/

/*** Global  ***/

body {
	overflow-x: hidden; /*** removes the hoizontal scroll bar https://github.com/twbs/bootstrap/issues/10711 ***/
}

.page-header {
    border-bottom: 0px solid #eee;
    padding-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    z-index: 100;
}

.navbar {
    margin-bottom: 10px;
}

.nav >li > a {
	color: #827f7f;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: black;
}

.panel-default > .panel-heading {
  background-image: linear-gradient(to bottom, #fff 0px, #fff 100%);
}

.panel-title a {  /*** Makes the <a> fill all the space of the panel-heading - important for iOS http://stackoverflow.com/questions/19236717/how-to-make-bootstrap-accordion-collapse-when-clicking-div ***/
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
    
    /*** extra style for text ***/
    
    font-size: 16px;
	color: #444;
	text-decoration: none;
}

.panel-title a:hover {
	background-color: #efefef;
	}
	
.panel-body h3 {
	font-size: 16px;
	color: #444;
}

/** ul.nav li.dropdown:hover ul.dropdown-menu { display: block; margin:0;} makes dropdown open on hover **/

/*** Fancy Centered Heading ***/

/** h3 {
	background: linear-gradient(#fff 0%, #fff 45%, #000 46%, #000 54%, #fff 54%, #fff 100%);
}

h3 span {
	background: #fff;
	padding: 0 20px;
}

h1 {
display: inline-block; 
font-family: “Archivo Black”, sans-serif;
text-align: center;
color: #ff5500;
text-transform: uppercase;
font-size: 90px;
transform: skew(-14deg) rotate(-6deg) translateZ(0);
position: relative;
z-index: 5;
white-space: nowrap;
border-top: solid 6px #ff5500;
border-bottom: solid 6px #ff5500;
line-height: 100px;
padding: 0 0 7px 0;
margin: 0;
}

h1:after {
content: attr(data-text);
display: inline-block;
position: absolute;
color: white;
top: 5px;
left: 5px;
z-index: -1;
text-align: center;
white-space: nowrap; 
}

**/

/*** educators button  ***/

#vertical-container > div > div:nth-child(2){
    display: table;
    height: 99px
}

#header-button{
    display: table-cell;
    vertical-align: middle;
}

/*** Front Page ***/

.container.marketing {
	margin-bottom: 20px;
}

/* Older IE 8/9 ********************
************************************/

.group img {
	width: inherit;
}


/* Revolution Slide Font***** ******
************************************/

.tp-caption.regular_title_white {
    color: #ffffff;
    font-size: 29px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    width: 740px !important;    
    white-space: normal !important;
    line-height: 38px;
    text-shadow: 0px 2px 2px #535458;
}

.tp-caption.bebas_neue_40{
    color: #ffffff;
    font-size: 40px;
    font-family: 'BebasNeueRegular', "bebas-neue", "Bebas Neue", sans-serif; /******/
}


.tp-caption.bebas_neue_60{
    color: #ffffff;
    font-size: 60px;
    font-family: 'BebasNeueRegular', "bebas-neue", "Bebas Neue", sans-serif; /******/
}

.tp-caption.bebas_neue_40_black {
    color: #000;
    font-size: 40px;
    font-family: 'BebasNeueRegular', "bebas-neue", "Bebas Neue", sans-serif; /******/
}

.tp-caption.bebas_neue_60_black {
    color: #000;
    font-size: 60px;
    font-family: 'BebasNeueRegular', "bebas-neue", "Bebas Neue", sans-serif; /******/
}

.tp-caption.regular_subtitle_white {
    color: #ffffff;
    font-size: 20px;
    width: 720px !important;    
    white-space: normal !important;
    position: relative;
    z-index: 260;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 300;
}

/* Revolution Slide Override ***** ******
************************************/

.tp-banner iframe {border: 0 !important; outline: none !important;}

/*** Products Page ***/

.products h3 {
	margin-top: 0px;
}

.products .btn {
	margin-bottom: 20px;
}

.products img {
	margin-bottom: 20px;
}

/*** Astronomy Products ***/

.products-astronomy .jumbotron {
	margin-bottom: 20px;
}

.products-astronomy .user-images {
	margin-bottom: 20px;
}

.products-astronomy #accordion {
	margin-bottom: 20px;
}

.products-astronomy .panel-body .img-thumbnail {
	margin-bottom: 10px;
}

.products-astronomy .well {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0px solid #e0e0e0;	
}

.products-astronomy h3 {
	color: #222;
    font-family: "Roboto",sans-serif !important;
    font-size: 28px;
    font-weight: 300;
    line-height: 20px;
}

/*** Astronomy Education Products ***/

.products-astronomy-education .user-images {
	margin-bottom: 20px;
}

.products-astronomy-education .panel-body .img-thumbnail {
	margin-bottom: 32px;
}

/*** Earth Science Education Products ***/

.products-earth-science-education .user-images {
	margin-bottom: 20px;
}

.products-earth-science-education .panel-body .img-thumbnail {
	margin-bottom: 32px;
}

/*** eBooks Products ***/

.products-mobile-apps .jumbotron {
	margin-bottom: 20px;
}

.products-mobile-apps .user-images {
	margin-bottom: 20px;
}

.products-mobile-apps #accordion {
	margin-bottom: 20px;
}

.products-mobile-apps .panel-body .img-thumbnail {
	margin-bottom: 10px;
}


/*** eBooks Products ***/

.products-ebooks .jumbotron {
	margin-bottom: 20px;
}

.products-ebooks .user-images {
	margin-bottom: 20px;
}

.products-ebooks #accordion {
	margin-bottom: 20px;
}

.products-ebooks .panel-body .img-thumbnail {
	margin-bottom: 10px;
}

/*** Telescope Accessories ***/

.products-telescope-accessories .img-thumbnail {
	margin-bottom: 10px;
}

/*** Company ***/

/*** Why does this affect id="b-team" too? ***/

#a-team .well {
background-image: none;
background-color: white;
box-shadow: none;
}

#a-team .thumbnail {    
	border: none;
	
}

/*** Daniel's Partners page ***/
 
#carousel-example-generic > a.left.carousel-control,
#carousel-example-generic > a.right.carousel-control{
    background-image: none !important;
}
  
#planetarium-partners-wrap{
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
}
  
.partner-inner-wrapper{
    width: 60%;
    float: left;
    padding-left: 10px;
}
  
.partner-img{
    width: 125px;
    float: left;
    overflow: auto;
    text-align: center;
}
  
.partner-img img, .partner-carousel-img{
    width: 100%;
    height: auto;
}
  
body > div:nth-child(5) > div:nth-child(1), body > div:nth-child(5) > div:nth-child(2){
    margin-top: 10px;
}
  
#planetarium-partners-wrap > div{
    margin-top: 10px;
}
  
.partner-btn{
    margin-top: 5px;
    display: inline-block;
}

/*** Daniel's Services page ***/

.services-inner-wrapper{
    width: 60%;
    float: left;
    padding-left: 10px;
 
}

/*** Video Demo ****/

media="screen"
.tp-caption.black_heavy_60 {
	color: #fff;
}

/*** Contact Form ***/


@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

.contact_form {
  margin: 50px auto;
}

.contact_form ul li {
  list-style: none;}

.feedback-input {
  color:black;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  /* border:2px solid #000; */
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #CC4949; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

.contact_form button, [type="input"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 100%;
  background:#1596d3;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
.contact_form button:hover { background:#CC4949; }

/*** Marketing ***/

.marketing h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
}

.marketing p, .marketing li {
	font-family: 'Open Sans', sans-serif;
}

.marketing .imac img {
	margin-top: 20px;
}


/*** Fancy Line ***/

.colored-line,
.colored-line-left {
    background: #0196a7;
}

hr.fancy-line { 
    border: 0; 
    height: 1px;
    position: relative;
    margin: 0.5em 0; /* Keep other elements away from pseudo elements*/
}
hr.fancy-line:before {
    top: -0.5em;
    height: 1em;
}
hr.fancy-line:after {
    content:'';
    height: 0.5em;   /* half the height of :before */
    top: 1px;        /* height of hr*/
}

hr.fancy-line:before, hr.fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

hr.fancy-line, hr.fancy-line:before {
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 75%);
    background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%,rgba(0,0,0,0.1)), color-stop(75%,rgba(0,0,0,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}

hr.fancy-line:after {
    background: #f4f4f4;
}

/** Features **/

/**.features {
padding-top: 80px;
padding-bottom: 30px;
}**/

.features .features-left {
text-align: right;
margin-top: 0px; /*** was 26px ***/
margin-bottom: 0px;
}

.features .features-left .icon-container {
float: right;
margin-left: 20px;
}

.features .features-right {
text-align: left;
margin-top: 0px;  /*** was 26px ***/
margin-bottom: 0px;
}

.features .features-right .icon-container {
float: left;
margin-right: 20px;
}

.features .feature {
margin-bottom: 40px;
}

.feature-details-main h2 {
	color: #000;
    font-family: 'Roboto', sans-serif;
	font-size: 30px;
    font-weight: 300;
    line-height: 20px;
}

.feature-details-main p {
	color: #313131;
    font-family: 'Roboto',sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
}

.feature-details h4 {
	color: #008ed6;
    font-family: 'Roboto', sans-serif;
	font-size: 18px;
    font-weight: 300;
    line-height: 20px;
}

.feature-details p {
    color: #313131;
    font-family: 'Roboto',sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
}

.features .feature .icon-container {
display: block;
min-height: 120px;
margin-top: 5px;
}

.features .feature .icon-container .icon {
width: 55px;
height: 55px;
border-radius: 50%;
line-height: 55px;
font-size: 18px;
text-align: center;
-webkit-transition: all ease-in 0.25s;
transition: all ease-in 0.25s;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}

/*** Featured Apps ***/

.box > .icon { text-align: center; position: relative; }
.box > .icon > .image_sn { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 64px; border-radius: 50%; background: #fff /*** #63B76C is background color for featured app icon ***/; vertical-align: middle; }
.box > .icon > .image_ss { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 64px; border-radius: 0%; background: #fff /*** #63B76C is background color for featured app icon ***/; vertical-align: middle; }
.box > .icon:hover > .image { background: #fff; }
.box > .icon > .image > i { font-size: 36px !important; color: #fff !important; }
.box > .icon:hover > .image > i { color: white !important; }
.box > .icon > .info { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0; }
.box > .icon:hover > .info { background: rgba(0, 0, 0, 0.04); border-color: #e0e0e0; color: white; }
.box > .icon > .info > h3.title { font-family: "Roboto",sans-serif !important; font-size: 18px; color: #222; font-weight: 300; line-height: 20px; }
.box > .icon > .info > p { font-family: "Roboto",sans-serif !important; font-size: 14px; color: #313131; line-height: 1.5em; margin: 20px; text-align: justify; font-weight: 300; line-height: 24px;}
.box > .icon:hover > .info > h3.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { color: #222; }
.box > .icon > .info > .more a { font-family: "Roboto",sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; }
.box > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: #008ed6; /*** #63B76C is background color for featured app "read more" ***/ ; }
.box .space { height: 30px; }

/*** TLE Special Mod ***/
.box > .icon > .tle_info { margin-top: -24px; background: rgba(0, 0, 0, 0); border: 1px solid #e0e0e0; padding: 15px 20px 10px 20px; }
.box > .icon > .tle_info1 { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 20px 10px 20px; }
.box > .icon > .tle_info1 > h3.title { font-family: "Roboto",sans-serif !important; font-size: 18px; color: #222; font-weight: 300; line-height: 20px; }
.box > .icon > .tle_info1 > p { font-family: "Roboto",sans-serif !important; font-size: 14px; color: #313131; line-height: 1.5em; margin: 20px; text-align: justify; font-weight: 300; line-height: 24px;}



/*** Main title & subtitles ***/

.main_title {
    font-family: 'Open Sans',Arial,sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 38px;
    text-shadow: 0 2px 2px #535458;
    }

.main_subtitle {
	font-family: 'Open Sans',Arial,sans-serif;
    font-size: 21px;
    font-weight: 300;
    }
    
/* SNWeb Icon Settings | Chromebook & ChromeOS, Google Classroom, LMS
===================================================================== */

.pe-feature-web {
	float:left;
	margin:5px 20px 60px 0;
	width:65px;
	height:65px;
	font-size:38px;
	line-height:58px;
	text-align:center;
	border:none; /* this is the change from code above*/
	border-radius:50%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.pe-feature-web {
  color: #008ED6;
  border-color: #008ED6;
  border-top-color: #008ED6;
  border-right-color: #008ED6;
  border-bottom-color: #008ED6;
  border-left-color: #008ED6;
}


/***@media (min-width: 1200px) {
  
 	.container {
    width: 970px;
	}  /*** This will override Bootstrap's default width: 1170px setting when the viewport is 1200px or bigger
}***/

@media (min-width: 768px) and (max-width: 991px) {
	
	.features .features-left {
	text-align: center;
	}
	
	.features .features-right {
	text-align: center;
	}
	
	.features .feature {
	margin-bottom: 20px;
	}
	
	.navbar-collapse.collapse {
	    overflow: visible !important;  /* Required to show the menu, otherwise drops behind other elements */
  	}

}

@media (max-width: 767px) {
	
	.dropdown-menu { /*** Makes dropdown menu 100% on small device - important as the menu must be touched to scroll hidden items ***/
	min-width: 100%;
	}
		
	.features .features-left {
	text-align: center;
	}
	
	.features .features-right {
	text-align: center;
	}
	
	.features .feature {
	margin-bottom: 20px;
	}
	
	/*** The following .nav CSS makes the tabs act as a dropdown menu onmobile devices ***/
	
	.nav-tabs > li {
        float:none;
        border:1px solid #dddddd;
    }
    .nav-tabs > li.active > a{
        border:none;
    }
    .nav > li > a:hover, .nav > li > a:focus,
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
     {
        background:none;
        border:none;
    }
    
    .main_title {
    font-family: 'Open Sans',Arial,sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 38px;
    text-shadow: 0 2px 2px #535458;
    }

.main_subtitle {
	font-family: 'Open Sans',Arial,sans-serif;
    font-size: 21px;
    font-weight: 300;
    }
    
    .navbar-collapse.collapse {
	    overflow: visible !important;  /* Required to show the menu, otherwise drops behind other elements */
  	}
}

/* Experimental Navigator CSS
================================================== */

..nav > li > a {
	color: white;
}

..header-1 {
    position: absolute;
    top: 10px;
    transition: all 0.4s ease-in-out 0s;
    width: 100%;
    z-index: 999;
}

..container.navbar.transparent.navbar-default {
    border-width: 0px;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    background-color: rgba(0,0,0,0.0);
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}

.navbar-default {
    background-image: none;
    background-repeat: none;
    border-radius: 4px;
    box-shadow: none;
    background-color: #fff;
    border-color: #fff;
}

.navbar {
    min-height: 70px;
	margin-top: 10px; /* Margin at the very top of the page */
}

.navbar ul {
	margin-top: 15px; /* Aligns the menu items with the logo */
}

.navbar-default .navbar-brand {
    padding: 0 15px;
    margin-bottom: 20px;
}

.thumb {
    margin-bottom: 50px;
}


/* Experimental Navigator CSS END
================================================== */

#box_grey {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.04);
    border: 1px solid #e0e0e0;
    margin-top: -24px;
    padding: 15px 20px 10px;
    }
    
#box_grey_homepage {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.04);
    border: 1px solid #e0e0e0;
    margin-top: 10px;
    padding: 15px 20px 10px;
    }

.hr {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: -moz-use-text-color -moz-use-text-color #fff;
    border-image: none;
    border-style: none none solid;
    border-width: medium medium 1px;
    margin: 20px auto;
    text-align: left;
    width: 120px;
}

/* #Font-Face
================================================== */
@font-face {
		    font-family: 'BebasNeueRegular';
		    src: url('../fonts/BebasNeue-webfont.eot');
		    src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
		         url('../fonts/BebasNeue-webfont.woff') format('woff'),
		         url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
		         url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
		    font-weight: normal;
		    font-style: normal;
		    }
		    
@font-face {
			font-family:"SD Eurostile Elite Demo";
			src:url('../fonts/SD_Eurostile_Elite_Demo.eot?') format('eot'),
				url('../fonts/SD_Eurostile_Elite_Demo.woff') format('woff'),
				url('../fonts/SD_Eurostile_Elite_Demo.ttf') format('truetype'),
				url('../fonts/SD_Eurostile_Elite_Demo.svg#SDEurostileEliteDemo') format('svg');
			font-weight:normal;
			font-style:normal;
			}