/*** 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  ***/

#mfn-rev-slider { min-height:780px; }

/** Fixes Navbar Resources Tab Margin *
*************************/

.navbar .yamm-content ul {
    margin-bottom: 15px;
}

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

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

img.center { 
    display: block; 
    margin-left: auto; 
    margin-right: auto;
}

.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;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: #008ed6;
}
    
.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #008ed6;
}

.slider-b { overflow: hidden; list-style: none; margin: 0 auto 80px; height: 440px; padding: 0; background: url(../images/arrow-left-b.png) -3000em -3000em no-repeat; }
	.slider-b li { max-width: 320px; background: url(../images/arrow-right-b.png) -3000em -3000em no-repeat; }
	.slider-b img { max-width: none !important; }
	[data-carousel-3d] { position: relative; width: 100%; }
	[data-carousel-3d] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
		[data-carousel-3d] [data-prev-button], [data-carousel-3d] [data-next-button] { display: block; position: absolute; top: 50%; width: 66px; height: 66px; margin: -33px 0 0; text-align: left; text-indent: -3000em; cursor: pointer; } 
		[data-carousel-3d] [data-prev-button] { left: 0; background: url(../images/arrow-left-a.png) -5px -5px no-repeat #000; }
		[data-carousel-3d] [data-next-button] { right: 0; background: url(../images/arrow-right-a.png) -5px -5px no-repeat #000; }
			[data-carousel-3d] [data-prev-button]:hover { background: url(../images/arrow-left-b.png) -5px -5px no-repeat #000; }
			[data-carousel-3d] [data-next-button]:hover { background: url(../images/arrow-right-b.png) -5px -5px no-repeat #000; }
	[data-carousel-3d] > [data-children-wrapper] { perspective: 3000px; -ms-perspective: 3000px; -moz-perspective: 3000px; -webkit-perspective: 3000px; }
	[data-carousel-3d] > [data-children-wrapper] > [data-child] { transition: 1s; -ms-transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; }
	[data-carousel-3d] > [data-children-wrapper] > [data-child] { position: absolute; overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; }
	[data-carousel-3d] > [data-children-wrapper] > [data-child] > [data-child-frame] > [data-content-wrapper] { box-sizing: border-box; transform-origin: 0px 0px; -ms-transform-origin: 0px 0px; -moz-transform-origin: 0px 0px; -webkit-transform-origin: 0px 0px; }
	[data-carousel-3d]:before { padding-top: 40%; display: block; content: ''; }
	[data-carousel-3d] [data-children-wrapper] { position: absolute; top: 0; bottom: 0; right: 26%; left: 26%; }

/* Where is this panel CSS being used? */

.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;
}

/* Changes the color of the font in the accordion */

#accordion .panel-title a:hover {
  color: #008ed6;
  }

/** 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.michroma_50_black {
    color: #000;
    font-size: 50px;
    font-family: 'Michroma', sans-serif; /*** SkySafari Title Web Font ***/
}

.tp-caption.orbitron_50_black {
    color: #000;
    font-size: 50px;
    font-family: 'Orbitron', sans-serif; /*** Starry Night Title Web Font ***/
} 

.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-quotes {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0em;
  margin-bottom: 1.5em;
  color: #313131;
    font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-size: 30px;
    font-weight: 300;
    line-height: 30px;
}

.feature-quotes p {
  display: block;
  text-align: center;
}

.quote-content {
  font-size: 20px;
  font-weight: bold;
}

.quote-signature::before{
  content: "- ";
}
.quote-signature {
  font-size: 18px;
}

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

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

.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; }

/*** EDU Homepage Special Mod ***/

.box_edu > .icon { text-align: left; position: relative; margin: 20; }
.box_edu > .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_edu > .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_edu > .icon:hover > .image { background: #fff; }
.box_edu > .icon > .image > i { font-size: 36px !important; color: #fff !important; }
.box_edu > .icon:hover > .image > i { color: white !important; }
.box_edu > .icon > .info { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0; }
.box_edu1 > .icon:hover > .info { background: rgba(0, 0, 0, 0.04); border-color: #e0e0e0; color: white; }
.box_edu > .icon > .info > h3.title { font-family: "Roboto",sans-serif !important; font-size: 18px; color: #222; font-weight: 300; line-height: 20px; }
.box_edu > .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_edu > .icon:hover > .info > h3.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { color: #222; }
.box_edu > .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_edu > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: #008ed6; /*** #63B76C is background color for featured app "read more" ***/ ; }
.box_edu .space { height: 30px; }

/*** EDU Benefits Mod ***/

.box > .icon > .info_edu, box_grey_homepage {min-height: 175px;}

.box > .icon > .info_edu { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0;}
.box1 > .icon:hover > .info_edu { background: rgba(0, 0, 0, 0.04); border-color: #e0e0e0; color: red; }
.box > .icon > .info_edu > h3.title { font-family: "Roboto",sans-serif !important; font-size: 18px; color: #222; font-weight: 300; line-height: 20px; }
.box > .icon > .info_edu > 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_edu > h3.title, .box > .icon:hover > .info_edu > p, .box > .icon:hover > .info_edu > .more > a { color: #222; }
.box > .icon > .info_edu > .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_edu > .more > a { color: #fff; padding: 6px 8px; background-color: #008ed6; /*** #63B76C is background color for featured app "read more" ***/ ; }

/*** 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;}

/*** SS5 App LAnding Page ***/

.box_apple_button > .icon { text-align: center; position: relative; }
.box_apple_button > .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_apple_button > .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_apple_button > .icon:hover > .image { background: #fff; }**/
.box_apple_button > .icon > .image > i { font-size: 36px !important; color: #fff !important; }
.box_apple_button > .icon:hover > .image > i { color: white !important; }
.box_apple_button > .icon > .info { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0; }
/**.box_apple_button > .icon:hover > .info { background: rgba(0, 0, 0, 0.04); border-color: #e0e0e0; color: white; }**/
.box_apple_button > .icon > .info > h3.title { font-family: "Roboto",sans-serif !important; font-size: 18px; color: #222; font-weight: 300; line-height: 20px; }
.box_apple_button > .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_apple_button > .icon:hover > .info > h3.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { color: #222; }
.box_apple_button > .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_apple_button > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: #008ed6; /*** #63B76C is background color for featured app "read more" ***/ ; }
.box_apple_button .space { height: 30px; }

.kbox, .kbox1, .kbox2, .kbox3, .kbox4 { background: rgba(0, 0, 0, .025) none repeat scroll 0 0;
    /*border: 1px solid #e0e0e0;*/
    padding: 10px 10px;
    margin-bottom: 10px;
    }

.kbox5 { background: rgba(0, 0, 0, .025) none repeat scroll 0 0;
    border: 1px solid #e0e0e0;
    padding: 10px 10px;
    margin-bottom: 10px;
    height: 202px; /** Here !!!!!!!!! **/
    }

.kbox_parallax { background: rgba(0, 0, 0, .5) none repeat scroll 0 0;
    border: 1px solid #fff; /* was #e0e0e0 */
    padding: 10px 10px;
    margin-bottom: 10px;
    }

    
 .kbox icon {
	 margin-top: 10px;
 }
 
 .kbox {
    min-height: 145px; /* With 350x75 image use 220px! - This .kbox2 CSS is used to force the min-height for info boxes and thereby maintain alignment (no breaking) of the grid */
    }
    
.kbox2 {
    min-height: 145px; /* With 350x75 image use 220px! - This .kbox2 CSS is used to force the min-height for info boxes and thereby maintain alignment (no breaking) of the grid */
    }
        
.kbox p, .kbox1 p, .kbox2 p, .kbox4 p {
    color: #313131;
    font-family: "Roboto",sans-serif !important;
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
    margin: 10px;
    text-align: justify;
}

.kbox3 p, .kbox5 p {
	color: #313131;
    font-family: "Roboto",sans-serif !important;
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
    text-align: none;
}

.kbox3 .media-object {
	margin-left: 10px;
}

.kbox4 .media-object {
	margin-left: 10px;
	margin-right: 15px;
	}


.kbox3 h4, .kbox5 h4 {
	margin-bottom: 15px;
}

.kbox4 h4 {
	margin: 10px;
}

.margintop50 {
	margin-top:50px;
}

.margintop25 {
  margin-top:25px;
}

.thumbnail img {
	padding-right:15px;
}

.accordion-heading a i {
    position: absolute;
    width: 65px;
    height: 65px;
    text-align: center;
    font-size: 62px;
    line-height: 66px;
    border-radius: 50%;
    color: #FFF;
    top: -5px;
    left: -2px;
    text-decoration: none;
    border: 2px solid;
}
/*** 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;
    }
    
 /** Parallax **/
 
 .ha-bg-parallax-middle {

    background: url(/images/parallax_atlas-launch-muos-1920.jpg) no-repeat fixed;
    /*background: url(/images/parallax_astronaut-1920.jpg) 50% -195px no-repeat fixed;*/
    
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    height: 500px;
    margin: 0 auto;
    width: 100%;
    display: table;
    vertical-align: middle;

}

.ha-bg-parallax-high {

    background: url(/images/parallax_nasa_shuttle-1920.jpg) no-repeat fixed;
    /*background: url(/images/parallax_astronaut-1920.jpg) 50% -195px no-repeat fixed;*/
    
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    height: 500px;
    margin: 0 auto;
    width: 100%;
    display: table;
    vertical-align: middle;

}

 
 .ha-bg-parallax-college {

    background: url(/images/parallax_astronaut-1920.jpg) no-repeat fixed;
    /*background: url(/images/parallax_astronaut-1920.jpg) 50% -195px no-repeat fixed;*/
    
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    height: 500px;
    margin: 0 auto;
    width: 100%;
    display: table;
    vertical-align: middle;

}

.ha-bg-parallax-upgrades {

    background: url(/images/parallax_endeavour-1920.jpg) no-repeat fixed;
    /*background: url(/images/parallax_astronaut-1920.jpg) 50% -195px no-repeat fixed;*/
    
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    height: 500px;
    margin: 0 auto;
    width: 100%;
    display: table;
    vertical-align: middle;

}

.ha-bg-parallax-ss5-1 {

    background: url(/images/parallax_ss5_io_1920.jpg) no-repeat fixed;
    /*background: url(/images/parallax_astronaut-1920.jpg) 50% -195px no-repeat fixed;*/
    
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    height: 300px;
    margin: 0 auto;
    width: 100%;
    display: table;
    vertical-align: middle;

}

.ha-bg-parallax-sn7 {

    background: url(/images/parallax_astronaut-1920.jpg) no-repeat fixed;
    /*background: url(/images/parallax_astronaut-1920.jpg) 50% -195px no-repeat fixed;*/
    
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    height: 300px;
    margin: 0 auto;
    width: 100%;
    display: table;
    vertical-align: middle;

}





.ha-bg-parallax-middle .ha-parallax-body, .ha-bg-parallax-high .ha-parallax-body, .ha-bg-parallax-college .ha-parallax-body, .ha-bg-parallax-upgrades .ha-parallax-body, .ha-bg-parallax-sn7 .ha-parallax-body {

    display: table-cell;

    vertical-align: middle;

}



.ha-bg-parallax-middle .ha-content-whitecolor, .ha-bg-parallax-high .ha-content-whitecolor, .ha-bg-parallax-college .ha-content-whitecolor, .ha-bg-parallax-upgrades .ha-content-whitecolor, .ha-bg-parallax-sn7 .ha-content-whitecolor {

    font-size: 17px;

    color: #ffffff;

    width: 75%; /* Was orginally 45% */

    margin: auto;

}



.ha-bg-parallax-middle .ha-diamond-divider-md, .ha-bg-parallax-high .ha-diamond-divider-md, .ha-bg-parallax-college .ha-diamond-divider-md, .ha-bg-parallax-upgrades .ha-diamond-divider-md, .ha-bg-parallax-sn7 .ha-diamond-divider-md {

    margin: 15px 0px;

}



.ha-bg-parallax-middle .ha-heading-parallax, .ha-bg-parallax-high .ha-heading-parallax, .ha-bg-parallax-college .ha-heading-parallax, .ha-bg-parallax-upgrades .ha-heading-parallax, .ha-bg-parallax-sn7 .ha-heading-parallax {

    font-style: italic;

    font-weight: bold;

    text-transform: none;

    color: #ffffff;

    padding-bottom: 0px;

}
		
 /** End Parallax **/
 
 
 /** Fixes font style for screenshots link **/
 .panel-heading .jackbox {
    font: inherit;
 }
 
/** Center responsive images **/
.img-responsive.img-center {
  margin: 0 auto;
}
 
 .icon-feature .thumbnail {
	 margin-bottom: 0px;
 }
 
 /*** Accordion Style ***/
 
 a.panel-heading {
    display: block;
}
.panel-primary .panel-heading[aria-expanded="true"], .panel-primary .panel-heading a:hover, .panel-primary .panel-heading a:focus, .panel-primary a.panel-heading:hover, .panel-primary a.panel-heading:focus {
	background-color: #286090;
}
.panel-danger .panel-heading[aria-expanded="true"], .panel-danger .panel-heading a:hover, .panel-danger .panel-heading a:focus, .panel-danger a.panel-heading:hover, .panel-danger a.panel-heading:focus {
	background-color: #c9302c;
}
.panel-default .panel-heading[aria-expanded="true"], .panel-default .panel-heading a:hover, .panel-default .panel-heading a:focus, .panel-default a.panel-heading:hover, .panel-default a.panel-heading:focus {
	background-color: rgba(0, 0, 0, .025); */ /* #dcdcdc */
}
.panel-info .panel-heading[aria-expanded="true"], .panel-info .panel-heading a:hover, .panel-info .panel-heading a:focus, .panel-info a.panel-heading:hover, .panel-info a.panel-heading:focus {
	background-color: #31b0d5;
}
.panel-success .panel-heading[aria-expanded="true"], .panel-success .panel-heading a:hover, .panel-success .panel-heading a:focus, .panel-success a.panel-heading:hover, .panel-success a.panel-heading:focus {
	background-color: #449d44;
}
.panel-warning .panel-heading[aria-expanded="true"], .panel-warning .panel-heading a:hover, .panel-warning .panel-heading a:focus, .panel-warning a.panel-heading:hover, .panel-warning a.panel-heading:focus {
	background-color: #ec971f;
}
.panel-group .panel, .panel-group .panel-heading {
	border: none !important;
}
.panel-group .panel-body {
	border: 1px solid #ddd !important;
	border-width: 0 1px 1px 1px !important;
}
.panel-group .panel-heading a, .panel-group a.panel-heading {
	outline: 0;
}
.panel-group .panel-heading a:hover, .panel-group .panel-heading a:focus, .panel-group a.panel-heading:hover, .panel-group a.panel-heading:focus {
	text-decoration: none;
}
.panel-group .panel-heading .icon-indicator {
	margin-right: 10px;
}

.panel-group .panel-heading .icon-indicator:before {
	content: "\e114";
}

.panel-group .panel-heading.collapsed .icon-indicator:before {
	content: "\e080";
}

/*** End Accordion Style ***/

/* Pixeden icon setting
=========================== */

.pe-feature {
	float:left;
	margin:5px 20px 60px 0;
	width:65px;
	height:65px;
	font-size:38px;
	line-height:58px;
	text-align:center;
	border:2px solid;
	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;
}

.feature-box:hover .pe-feature {
    background-color: #008ED6;
}

.feature-box:hover .pe-feature {
	color: #fff; /* or #008ED6 */
}

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

.gray-bg {
    background: #F9F9F9 none repeat scroll 0% 0%;
}

	/** Megamenu styes ***************
	**********************************/
				
	.list-unstyled,
	.list-unstyled ul { 
		min-width: 120px;
	}
	
	
	/*!
	* Yamm!3
	* Yet another megamenu for Bootstrap 3
	* 
	* http://geedmo.github.com/yamm3
	*/
	
	.yamm .nav,
	.yamm .collapse,
	.yamm .dropup,
	.yamm .dropdown {
	  position: static;
	}
	.yamm .container {
	  position: relative;
	}
	.yamm .dropdown-menu {
	  left: auto;
	}
	.yamm .nav.navbar-right .dropdown-menu {
	  left: auto;
	  right: 0;
	}
	.yamm .yamm-content {
	  padding: 20px 20px;
	}
	.yamm .dropdown.yamm-fw .dropdown-menu {
	  left: 0;
	  right: 0;
	}
	
	.yamm .yamm-content .row .thumbnail {
	  border: none;
	  box-shadow: none;
	}

	
	@media="screen" {
				
	.list-unstyled,
	.list-unstyled ul { 
		min-width: 120px;
	}
	
	
	/*!
	* Yamm!3
	* Yet another megamenu for Bootstrap 3
	* 
	* http://geedmo.github.com/yamm3
	*/
	
	.yamm .nav,
	.yamm .collapse,
	.yamm .dropup,
	.yamm .dropdown {
	  position: static;
	}
	.yamm .container {
	  position: relative;
	}
	.yamm .dropdown-menu {
	  left: auto;
	}
	.yamm .nav.navbar-right .dropdown-menu {
	  left: auto;
	  right: 0;
	}
	.yamm .yamm-content {
	  padding: 20px 20px;
	}
	.yamm .dropdown.yamm-fw .dropdown-menu {
	  left: 0;
	  right: 0;
	}
	
	.yamm .yamm-content .row .thumbnail {
	  border: none;
	  box-shadow: none;
	}

	}
							
	/** End of MegaMenu ***************
	**********************************/
	
	/** Removes the megamenu underline **
	*************************************/
	
	.nav-tabs {
    border-bottom: 0px solid #ddd;
        border-bottom-width: 0px;
        border-bottom-style: solid;
        border-bottom-color: rgb(221, 221, 221);
}
	
	/** Pricing Boxes *****************
	**********************************/
	
	.pricingbox {padding:55px 0; margin:0; background: #282f39 url(images/pricingbox-bg-dark.jpg) no-repeat bottom center; overflow:hidden; }
	.pricingbox.no-image-bg {background: #fff /* was #282f39 */ url(images/popular_plans_bg.jpg);}
	.pricingbox h3 {color:#fff; letter-spacing: -.03em; margin-bottom:30px; text-align: center; font-size:29px;}
	.pricingbox h3.poptitle {color:#fff; letter-spacing: -.03em; margin-bottom:20px; text-align: center; font-size:29px; font-weight:900; position: relative; padding-bottom:25px;}
	.pricingbox h3.poptitle::after {background-color: #FF377D; bottom: 0; content: ""; height: 2px; left: 50%; margin-left: -30px; position: absolute; width: 60px;}
	.pricingbox p {color:#fff; margin-bottom:70px; text-align: center; padding:0 95px; font-size:18px;}
	.pricingbox .row {margin-bottom:0; }
	
	.pricing-plan {   position: relative;   top: 0;   opacity: 1;   float: left;   padding: 30px 0px;   width: 100%;   border-radius: 0;   transform: scale(1);   -webkit-transform: scale(1);   -ms-transform: scale(1);   z-index: 5; background: #FF2770;}
	.pricing-plan:before {   content: "";   width: 100%;   height: 30px;   border-radius: 0;   position: absolute;   top: -10px;   left: 0;   transform: scale(.95);   -webkit-transform: scale(.95);   -ms-transform: scale(.95);   z-index: -1; background: rgba(255,39,112,.5);}
	.pricing-title {   width: 100%;   float: left;   line-height: 36px;   font-size: 23px;   font-weight: 400;   letter-spacing: -.03em;  color: #000;   position: relative; padding-left:30px; margin-bottom:27px; font-family: 'Montserrat', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;  }
	.pricing-title:before {   content: "";   width: 5px;   height: 100%;   position: absolute;   top: 0;   left: 0;   background: #fff;}
	.pricing-price { clear:both;  width: 100%;  font-size: 47px;   font-weight: 100;   letter-spacing: -.03em; color: #fff; padding:30px 30px 25px;  background: rgba(0,0,0,.15); text-align: center; }
	.pricing-price span {font-size: 17px;   font-weight: 300;  letter-spacing: 0; color: #fff;  }
	.pricing-price .starting {color:#ccc; margin-bottom:0; text-align: center; padding:0; font-size:11px; letter-spacing: .12em;}
	.pricing-features { padding:15px 0;}
	.pricing-features ul { padding:0; margin:0; list-style:none;}
	.pricing-features ul li { color:#000; padding:10px 20px; border-bottom:1px solid rgba(0,0,0,.2); text-align: center;}
	
	.pricing-plan.white {  background: #FFF;}
	.pricing-plan.white:before {  background: rgba(255,255,255,.5);}
	.pricing-plan.red {  background: #FF2770;}
	.pricing-plan.red:before {  background: rgba(255,39,112,.5);}
	.pricing-plan.blue {  background: #3F51B5;}
	.pricing-plan.blue:before {  background: rgba(63,81,181,.5);}
	.pricing-plan.purple {  background: #9C27B0;}
	.pricing-plan.purple:before {  background: rgba(156,39,176,.5);}
	
	.pricing-plan button {display:table; margin:0 auto;}
	.pricing-plan button.mdl-button.mdl-button--raised {background:#fff;}
	.pricing-plan button i {font-size:14px;}

	/* Use a wide full screen for small screens like tablets. */

	@media (min-width: 768px) and (max-width:992px) {
    .container {
		width: initial;
        padding-left: 2em;
        padding-right: 2em;        
	}
}

	/** Plans*************************
	**********************************/

	.my_planHeader {
	    text-align: center;
	    color: white;
	    padding-top:0.2em;
	    padding-bottom:0.2em;
	}
	.my_planTitle {
	    font-size:2em;
	    font-weight: bold;
	}
	.my_planPrice {
	    font-size:1.4em;
	    font-weight: bold;    
	}
	.my_planDuration {
	    margin-top: -0.6em;
	}
	
	@media (max-width: 768px) {
	    .my_planTitle {
	        font-size:small;
	    }    
	}

	/** Features *********************
	**********************************/

	.my_feature {
	    line-height:2.8em;   
	}
	
	@media (max-width: 768px) {
	    .my_feature {
	        text-align: center
	    }
	 }
	
	.my_featureRow {
	    margin-top: 0.2em;
	    margin-bottom: 0.2em;
	    border: 0.1em solid rgb(163, 163, 163);
	}    
	
	/** Plan 1 *************************
	************************************/
	
	.my_plan1 {
	    background: rgb(172, 205, 245);
	}
	
	.my_planHeader.my_plan1 a {
	    background: rgb(4, 49, 103);
	    color:white;
	}
	
	.my_planHeader.my_plan1 {
	    background: rgb(5, 64, 137);
	    border-bottom: thick solid rgb(4, 49, 103);
	}

	/** Plan 2 *************************
	************************************/

	.my_plan2 {
	    background: rgb(210,227,233);
	}
	
	.my_planHeader.my_plan2 a {
	    background: rgb(2, 94, 125);
	    color:white;
	}
	
	.my_planHeader.my_plan2 {
	    background: rgb(3, 115, 153);
	    border-bottom: thick solid rgb(2, 94, 125);
	}

	/** Plan 3 *************************
	************************************/

	.my_plan3 {
	    background: rgb(255, 213, 207);
	}
	
	.my_planHeader.my_plan3 a {
	    background: rgb(181, 36, 49);
	    color:white;
	}
	
	.my_planHeader.my_plan3 {
	    background: rgb(205, 42, 56);
	    border-bottom: thick solid rgb(181, 36, 49);
	}
	
	/** Plan 4 *************************
	************************************/

	.my_plan4 {
	    background: rgb(249, 247, 202);
	}
	
	.my_planHeader.my_plan4 a {
	    background: rgb(159, 154, 6);
	    color:white;
	}
	
	.my_planHeader.my_plan4 {
	    background: rgb(197, 190, 7);
	    border-bottom: thick solid rgb(159, 154, 6);
	}



	.my_planFeature {
	    text-align: center;
	    font-size: 1.8em;
	}
	
	.my_planFeature i.my_check {
	    color: green;
	}
	
	/** Responsive Btn for comparison chart http://www.bootply.com/93706 **/
  	
  	div#accordion .btn {
    font-size: 14px;
    margin-top: 15px;
	}
	
	/** Accordion Border ***************
	************************************/
	
	div#accordion .panel-body {
    border-color: #fff !important;
    }
    
    /** Apple Button ******************
	***********************************/
	
	.gi-2x{font-size: 2em;}
	.gi-3x{font-size: 3em;}
	.gi-4x{font-size: 4em;}
	.gi-5x{font-size: 5em;}
		
	.button {
		padding: 10px 15px 10px 15px;
	    font-size: 16px;
	    font-weight: bold;
	    color: #fff;
	    display: inline-block;
	    width: 160px;
	    text-align: center;
	    text-shadow: 1px 1px rgba(0, 0, 0, 0.85);
	    -webkit-border-radius: 5px;
	    -moz-border-radius: 5px;
	    border-radius: 5px;
	    margin-bottom: 5px;
	    margin-right: 2px;		
	    }
	
	.button span.icon {
		width: 30px;
		height: 35px;
		display: block;
		background: url('/images/button_icons.png') no-repeat top left;
		float: left;
		margin-right: 12px;
	}
	
	.button em {
		font-size: 10px;
		font-weight: bold;
		display: block;
		color: #fff;
		text-shadow: 0px 1px rgba(255, 255, 255, 0.65);
		font-style: normal;
	}
	
	.button:active {
		-webkit-box-shadow: inset 0px 0px 7px #333;
		-moz-box-shadow: inset 0px 0px 7px #333;
		box-shadow: inset 0px 0px 7px #333;
	}
	
	.button#apple {
		background: #2cbbfd; /* Old browsers */
		background: -moz-linear-gradient(top, #2cbbfd 0%, #006b9d 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2cbbfd), color-stop(100%, #006b9d)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #2cbbfd 0%, #006b9d 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #2cbbfd 0%, #006b9d 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #2cbbfd 0%, #006b9d 100%); /* IE10+ */
		background: linear-gradient(top, #2cbbfd 0%, #006b9d 100%); /* W3C */
	 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2cbbfd', endColorstr='#006b9d', GradientType=0 ); /* IE6-9 */
	}
	
	.button#apple em {
		color: #065478;
	}
	
	.button#apple:hover {
		text-decoration: none;
		background: #4cc6ff; /* Old browsers */
		background: -moz-linear-gradient(top, #4cc6ff 0%, #0078b0 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4cc6ff), color-stop(100%, #0078b0)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #4cc6ff 0%, #0078b0 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #4cc6ff 0%, #0078b0 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #4cc6ff 0%, #0078b0 100%); /* IE10+ */
		background: linear-gradient(top, #4cc6ff 0%, #0078b0 100%); /* W3C */
	 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cc6ff', endColorstr='#0078b0', GradientType=0 ); /* IE6-9 */
	}

    
 /** Bootstrap Media Queries Acquired from http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries **
 *************************************************************************************************************************************/

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

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
	
	.kbox {
    min-height: 250px; /* This .kbox CSS is used to force the min-height for info boxes and thereby maintain alignment (no breaking) of the grid */
    }
	
	.kbox1 {
    min-height: 210px; /* This .kbox CSS is used to force the min-height for info boxes and thereby maintain alignment (no breaking) of the grid */
    }
    
    .kbox2 {
    min-height: 170px; /* With 350x75 image use 230px! - This .kbox CSS is used to force the min-height for info boxes and thereby maintain alignment (no breaking) of the grid */
    }
    
    .kbox3 {
    min-height: 111px; /* This .kbox CSS is used to force the min-height for info boxes and thereby maintain alignment (no breaking) of the grid */
    }

    .kbox_parallax {
    min-height: 110px; /* This .kbox CSS is used to force the min-height for info boxes and thereby maintain alignment (no breaking) of the grid */
    }

    .pe-feature {
    margin:5px 20px 100px 0;
    }
    
    /* Fix for background image on iOS http://stackoverflow.com/questions/18429620/css-background-size-cover-replacement-for-mobile-safari */
    .ha-bg-parallax-middle, .ha-bg-parallax-high, .ha-bg-parallax-college, .ha-bg-parallax-upgrades, .ha-bg-parallax-sn7 {
     background-attachment: scroll;
     background-position: center center;
    }
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
	
	.kbox {
    min-height: 120px;
    }
	
	.kbox1 {
    min-height: 120px;
    }
    
    .kbox2 {
    min-height: 120px;
    }
	
  	.features .features-left {
  	text-align: center;
  	}
  	
  	.features .features-right {
  	text-align: center;
  	}
  	
  	.features .feature {
  	margin-bottom: 20px;
  	}

    .pe-feature {
    margin: 5px 20px 5px 0px;
    }
    
    /* Fix for background image on iOS http://stackoverflow.com/questions/18429620/css-background-size-cover-replacement-for-mobile-safari */
    .ha-bg-parallax-middle, .ha-bg-parallax-high, .ha-bg-parallax-college, .ha-bg-parallax-upgrades, .ha-bg-parallax-sn7 {
     background-attachment: scroll;
     background-position: center center;
    }
    
    .navbar-collapse.collapse {
	    overflow: visible !important; /* Required to show the menu, otherwise drops behind other elements */
  	}
  	
  	/** Responsive Btn for comparison chart http://www.bootply.com/93706 **/
  	
  	/**.btn-responsive {
    padding:4px 9px;
    font-size:90%;
    line-height: 1.2;
  	}**/


}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
	
	.kbox {
    min-height: 100px;
    }
	
	.kbox1 {
    min-height: 100px;
    }
    
  .kbox2 {
    min-height: 120px;
    }
	
	.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;
    }
    
    /* Fix for background image on iOS http://stackoverflow.com/questions/18429620/css-background-size-cover-replacement-for-mobile-safari */
    .ha-bg-parallax-middle, .ha-bg-parallax-high, .ha-bg-parallax-college, .ha-bg-parallax-upgrades, .ha-bg-parallax-sn7 {
     background-attachment: scroll;
     background-position: center center;
    }
    
    .navbar-collapse.collapse {
	    overflow: visible !important;  /* Required to show the menu, otherwise drops behind other elements */
  	}
  	
  	/** Responsive Btn for comparison chart http://www.bootply.com/93706 **/
  	
  	.btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
    border-radius:3px;
  }
  
  	/* Center aligns Comparison Chart Feature Title text on small screens */
  	
  	.text-center-sm {
        text-align: center;
        margin-top: 10px;
    }

}

/* Portrait phones and smaller */
@media (max-width: 480px) {
	
	/* Fix for background image on iOS http://stackoverflow.com/questions/18429620/css-background-size-cover-replacement-for-mobile-safari */
    .ha-bg-parallax-middle, .ha-bg-parallax-high, .ha-bg-parallax-college, .ha-bg-parallax-upgrades, .ha-bg-parallax-sn7 {
     background-attachment: scroll;
     background-position: center center;
    }
    
    .icon-feature .img-tumbnail {
	 text-align: center;
	 }
    
    .section-box h4 {
	    text-align: center;
    }
    
    .section-box p {
	    text-align: justify;
    }
    
    .navbar-collapse.collapse {
	    overflow: visible !important;  /* Required to show the menu, otherwise drops behind other elements */
  	}
  	
  	/** Adjust Plan Font for Small Screens **/
  	
  	.my_planPrice {
	    font-size: small;
	    font-weight: bold;    
	}
  	
  	.my_planFeature {
	    text-align: center;
	    font-size: 1em;
	}
	
	
  	
  	div#accordion .my_planHeader.my_plan1 div.my_planPrice {
	  	font-size: x-small;
  	}
  	
  	div#accordion .my_planHeader.my_plan2 div.my_planPrice {
	  	font-size: x-small;
  	}
  	
  	div#accordion .my_planHeader.my_plan3 div.my_planPrice {
	  	font-size: x-small;
  	}
	
	/** Responsive Btn for comparison chart http://www.bootply.com/93706 **/
  	
  	div#accordion .btn-responsive {
    padding:2px 4px;
    font-size:60%;
    line-height: 1;
    border-radius:3px;
    margin-top: 15px;
  	}
  	
  	/* Center aligns Comparison Chart Feature Title text on x-small screens */
  	
  	.text-center-xs {
        text-align: center;
        margin-top: 10px;
    }


}

/* 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;
			}