@charset "UTF-8";
/*
	Theme Name: Schoolyard Stories
	Theme URI: 
	Description: 
	Version: 
	Author: SoNET Systems
	Author URI:
	Tags:

*/
/*------------------------------------*    VARIABLES
\*------------------------------------*/
.mtxl { margin-top: 30px !important; }

.mbxl { margin-bottom: 30px !important; }

.mrxl { margin-right: 30px !important; }

@media (min-width: 767px) and (max-width: 1200px) { .content.mtxl { margin-top: 90px !important; } }

@media (min-width: 767px) and (max-width: 1200px) { .sub-ideas .content.mtxl, .kick-starters .content.mtxl, .high-ceiling .content.mtxl, .ideas .content.mtxl { margin-top: 140px !important; } }

@media (min-width: 767px) and (max-width: 1200px) { .help .content.mtxl, .contact-us .content.mtxl { margin-top: 30px !important; } }

/*------------------------------------*    MAIN
\*------------------------------------*/
body { background-color: #d7d7d7; font-size: 17px; font-family: "Arial", "Helvatica", sans-serif; }

h1, h2, h3, h4, h5, h6 { font-weight: bold; }

h2 { font-size: 17px; }

h3 { font-size: 20px; color: #00a5e4; font-weight: bold; }

a, a:visited { color: #00a7e5; }

a:hover, a:visited:hover { color: #da065b; text-decoration: none; }

a:hover, a:active, a:focus, a:visited { outline: 0 !important; }

button:hover, button:active, button:focus, button:visited { outline: 0 !important; }

p { margin-bottom: 30px; }

.btn { border-radius: 0; border-color: transparent; }

.btn.btn-primary { background-color: #da065b; color: #ffcc33; }

.btn.btn-primary:hover { background-color: #da065b; border-color: transparent; color: white; }

.btn.btn-more { background-color: #da065b; color: #ffcc33; border-radius: 0; }

.btn.btn-more:after { padding-left: 2px; content: " ▲"; font-size: 12px; }

.btn.btn-more:hover { color: white; }

.btn.btn-more.collapsed:after { content: " ▼"; }

img { max-width: 100%; }

img.icon { width: auto; }

/*------------------------------------*    NAV
\*------------------------------------*/
.navbar-sys { border: 0; min-height: 0; margin-bottom: 0; background: #da065b; /* v1 background: -moz-linear-gradient(top,  #da065b 0%, #af114c 66%); // FF3.6-15 background: -webkit-linear-gradient(top,  #da065b 0%,#af114c 66%); // Chrome10-25,Safari5.1-6 background: linear-gradient(to bottom,  #da065b 0%,#af114c 66%); // W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da065b', endColorstr='#af114c',GradientType=0 ); // IE6-9 */ }

@media (min-width: 767px) { .navbar-sys { min-height: 100px; } }

@media (min-width: 1200px) { .navbar-sys { min-height: 100px; } }

@media (min-width: 1200px) { .navbar-sys.affix-top { position: absolute; top: 168px; } }

@media (min-width: 769px) { .navbar-sys { background-image: linear-gradient(-180deg, #DF0766 0%, #C20D5A 50%, #ffcc33 50%, #ffcc33 100%); } }

@media (min-width: 767px) and (max-width: 1200px) { .navbar-sys .navbar-header { width: 100%; } }

.navbar-sys .navbar-toggle { background-color: #ffcc33; }

.navbar-sys .navbar-toggle .icon-bar { color: #da065b; }

@media (min-width: 767px) { .help .navbar-sys, .contact-us .navbar-sys { min-height: 100px; } }

@media (min-width: 1200px) { .help .navbar-sys, .contact-us .navbar-sys { min-height: 100px; } }

#searchform input { font-size: 24px; height: 46px; }

.site-header { background-color: white; }

@media (min-width: 1200px) { .site-header { padding-top: 168px; background-image: url("img/bg-header.png"); background-repeat: no-repeat; background-position: right top; } }

.navbar-brand { padding: 0; position: fixed; left: 15px; z-index: 9999; }

@media (max-width: 769px) { .navbar-brand { top: 7px; left: 15px; width: 162px; } }

@media (min-width: 767px) { .navbar-brand { width: 140px; } }

@media (min-width: 1200px) { .navbar-brand { width: 306px; position: absolute; top: -103px; left: 35px; }
  .navbar-brand.affix { width: 306px; position: fixed; top: 0; } }

.menu-utility a { display: inline-block; color: #085582; padding: 10px 5px; }

@media (min-width: 769px) { .menu-utility a { padding: 5px; } }

.menu-utility a:hover { background-color: #80d4f8; }

@media (min-width: 767px) { .menu-utility a { padding: 5px 15px; } }

@media (min-width: 769px) { .menu-utility a { padding: 5px 10px; } }

.current-menu-parent .dropdown-menu, .dropdown.active .dropdown-menu { display: block; /* @media (max-width: $screen-tab) { display: none; } */ }

@media (max-width: 769px) { .dropdown.active.open .dropdown-menu, .dropdown.open .dropdown-menu { display: block; } }

.menu-main .nav li.current-menu-parent a, .menu-main .nav li.current-menu-item a { background-color: #ffcc33; color: #da065b; }

@media (max-width: 767px) { .menu-main .nav.navbar-nav .menu-item { width: 100%; }
  .menu-main .nav.navbar-nav .menu-item a { width: 100%; }
  .menu-main .nav.navbar-nav .menu-item a.parent-link { float: none; display: inline-block; width: 100%; }
  .menu-main .nav.navbar-nav .menu-item a.children-caret { display: none; width: auto; } }

@media (max-width: 767px) { .menu-main .nav.navbar-nav .menu-item.open { background-color: #ffcc33; } }

.menu-main .nav.navbar-nav .menu-item.open ul.dropdown-menu li a { background-color: #ffcc33; width: 100%; }

@media (max-width: 767px) { .menu-main .nav.navbar-nav .menu-item.current-menu-item.current_page_item, .menu-main .nav.navbar-nav .menu-item.current-menu-parent.current-page-parent { width: 100%; background-color: #ffcc33; } }

@media (max-width: 767px) { .menu-main .nav.navbar-nav .menu-item.current-menu-item.current_page_item a, .menu-main .nav.navbar-nav .menu-item.current-menu-parent.current-page-parent a { width: 100%; } }

@media (max-width: 767px) { .menu-main .nav.navbar-nav .menu-item.current-menu-item.current_page_item a.parent-link, .menu-main .nav.navbar-nav .menu-item.current-menu-parent.current-page-parent a.parent-link { float: none; display: inline-block; width: auto; } }

@media (max-width: 767px) { .menu-main .nav.navbar-nav .menu-item.current-menu-item.current_page_item a.children-caret, .menu-main .nav.navbar-nav .menu-item.current-menu-parent.current-page-parent a.children-caret { width: auto; display: inline-block; } }

.menu-main .nav .dropdown-menu li.current-menu-item a { color: #da065b; }

#menu-main-menu { line-height: 0.5; }

.menu-main { position: relative; border-color: transparent; }

.menu-main .navbar-nav { z-index: 2; }

@media (min-width: 767px) and (max-width: 1200px) { .menu-main .navbar-nav { margin-top: 50px; } }

@media (min-width: 767px) { .menu-main .navbar-nav { float: none; text-align: right; padding-right: 15px; }
  .menu-main .navbar-nav > li { float: none; display: inline-block; } }

@media (min-width: 769px) { .menu-main .navbar-nav { padding-right: 30px; } }

.menu-main .nav li { clear: both; }

.menu-main .nav li.open > a { background-color: #ffcc33; }

.menu-main .nav li a { float: left; padding: 15px 10px; color: white; font-weight: 800; }

@media (min-width: 767px) { .menu-main .nav li a { font-size: 12px; padding: 15px 13px; } }

.menu-main .nav li a.current-menu-item { color: #da065b; background-color: #ffcc33; }

.menu-main .nav li a.parent-link { float: left; padding-right: 0; }

.menu-main .nav li a.children-caret { float: right; padding-left: 0; }

@media (max-width: 767px) { .menu-main .nav li a.children-caret { min-width: 50px; } }

.menu-main .nav li:hover { color: #da065b; background-color: #ffcc33; }

.menu-main .nav li:hover a { color: #da065b; }

.menu-main .nav .dropdown-menu { border: 0; border-radius: 0; background-color: #ffcc33; }

@media (max-width: 767px) { .menu-main .nav .dropdown-menu { width: 100%; position: relative; top: auto; left: auto; float: none; } }

.menu-main .nav .dropdown-menu li a { color: black; font-size: 14px; font-weight: normal; }

.menu-main .nav .dropdown-menu li a:hover { color: #da065b; }

@media (min-width: 767px) { .menu-main .nav .dropdown-menu li a { padding: 10px 15px; } }

@media (min-width: 767px) { .menu-main .nav .dropdown, .menu-main .nav .dropdown a { position: static; }
  .menu-main .nav .dropdown-menu { width: 100%; text-align: right; padding-right: 30px; box-shadow: none; }
  .menu-main .nav .dropdown-menu li { display: inline-block; float: none; } }

@media (max-width: 767px) { .navbar-nav .open .dropdown-menu { background-color: #ffcc33; }
  .navbar-nav .open .dropdown-menu a { color: black; } }

/*------------------------------------*    STRUCTURE
\*------------------------------------*/
section[role="main"] { padding-top: 100px; }

@media (max-width: 480px) { section[role="main"] { padding-top: 50px; } }

@media (max-width: 767px) { section[role="main"] { padding-top: 50px; } }

.wrap { background-color: white; padding-bottom: 30px; }

.marquee img { width: 100%; }

main h1, .page-title, .home-secondary h2 { margin-left: -15px; margin-right: -15px; margin-top: 0; margin-bottom: 15px; font-size: 24px; padding: 10px 10px 10px 15px; background-color: #80d4f8; color: #085582; font-weight: bold; }

.section { clear: both; overflow: hidden; }

.section .section-img.alignleft { margin-left: -15px; }

.section .section-img.alignright { margin-right: -15px; }

.section h2 { margin-top: 0; margin-bottom: 15px; font-size: 24px; padding: 10px 10px 10px 15px; background-color: #80d4f8; color: #085582; font-weight: normal; }

.site-footer { background: #00adea; background: -moz-linear-gradient(top, #80d4f8 0%, #80d4f8 19%, #ffcc33 7%, #ffcc33 87%, #da065b 87%, #da065b 100%); background: -webkit-linear-gradient(top, #80d4f8 0%, #80d4f8 19%, #ffcc33 7%, #ffcc33 87%, #da065b 87%, #da065b 100%); background: linear-gradient(to bottom, #80d4f8 0%, #80d4f8 7%, #ffcc33 7%, #ffcc33 85%, #da065b 85%, #da065b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00adea', endColorstr='#da065b',GradientType=0 ); background: linear-gradient(to bottom, #80d4f8 0%, #80d4f8 19%, #ffcc33 7%, #ffcc33 85%, #da065b 85%, #da065b 100%); }

.site-footer-wrap { font-size: 14px; }

@media (min-width: 1200px) { .site-footer-wrap { background-image: url("img/bg-footer-right-sm.png"); background-repeat: no-repeat; background-position: 100% bottom; } }

.site-footer-wrap .title { font-size: 17px; }

.site-footer-wrap .sitemap li:first-of-type a { font-weight: bold; }

.site-footer-wrap .sitemap a { color: #646466; }

.site-footer-wrap .sitemap a:hover { color: #da065b; }

.site-footer-wrap .legal { margin-top: 15px; padding-top: 15px; padding-bottom: 15px; text-align: center; color: white; }

.site-footer-wrap .legal a { color: white; }

#modalSignup { padding-bottom: 0; }

#modalSignup .modal-content { background-color: #ffcc33; }

@media (min-width: 767px) { #modalSignup .modal-content { padding: 40px; padding-top: 30px; } }

#modalSignup .modal-content .modal-body { margin-top: 40px; padding-top: 0; }

#modalSignup .modal-content label { display: inline; }

#modalSignup .modal-content label small { font-size: 12px; }

#modalSignup .modal-content .legal { margin: 15px 0; }

#modalSignup .modal-content .legal a { color: black; }

#modalSignup .modal-content .legal a:hover { text-decoration: underline; }

#modalSignup .modal-content .nav-tabs { padding-bottom: 0; border-bottom: 1px solid #da065b; }

#modalSignup .modal-content .nav-tabs a { color: #da065b; }

#modalSignup .modal-content .nav-tabs a:hover { border: 1px solid transparent; color: black; }

#modalSignup .modal-content .nav-tabs > li.active > a { background-color: transparent; font-weight: bold; color: black; border: 1px solid #da065b; border-bottom-color: #ffcc33; }

#modalSignup .modal-content .tab-content { padding-top: 15px; }

.modal .modal-content button.close { color: #da065b; font-size: 42px; opacity: .8; z-index: 9999; }

.table.table-pricing thead { color: white; background-color: #da065b; }

.table.table-pricing thead tr th { border: 1px solid white; }

.table.table-pricing td { border: 1px solid white; background-color: #ffcc33; }

.table.table-hover tbody tr:hover td { background-color: #80d4f8; }

.modal-header { background-color: #ffcc33; border-top-left-radius: 6px; border-top-right-radius: 6px; color: #da065b; }

.carousel-control .fa-angle-left, .carousel-control .fa-angle-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -40px; }

/*------------------------------------*    BOOTSTRAP OVERRIDES
\*------------------------------------*/
.navbar { padding: 0; }

@media (max-width: 767px) { .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu > li > a { padding: 10px 10px; } }

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { max-height: 375px; }

.nav > li > a:focus, .nav > li > a:hover { background-color: transparent; }

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover { color: black; background-color: transparent; }

@media (min-width: 992px) { .modal-lg { width: 1200px; } }

.carousel-control.right, .carousel-control.left { background-image: none; }

.carousel-fade .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; }

.carousel-fade .carousel-inner .active { opacity: 1; }

.carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; }

.carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; }

.carousel-fade .carousel-control { z-index: 2; }

/*------------------------------------*	TYPOGRAPHY
\*------------------------------------*/
@font-face { font-family: 'Font-Name'; src: url("fonts/font-name.eot"); src: url("fonts/font-name.eot?#iefix") format("embedded-opentype"), url("fonts/font-name.woff") format("woff"), url("fonts/font-name.ttf") format("truetype"), url("fonts/font-name.svg#font-name") format("svg"); font-weight: normal; font-style: normal; }

/*------------------------------------*    MISC
\*------------------------------------*/
::selection { background: #04A4CC; color: #FFF; text-shadow: none; }

::-webkit-selection { background: #04A4CC; color: #FFF; text-shadow: none; }

::-moz-selection { background: #04A4CC; color: #FFF; text-shadow: none; }

/*------------------------------------*    WORDPRESS CORE
\*------------------------------------*/
.alignnone { margin: 5px 20px 20px 0; }

.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }

.alignright { float: right; margin: 5px 0 20px 20px; }

.alignleft { float: left; margin: 5px 20px 20px 0; }

a img.alignright { float: right; margin: 5px 0 20px 20px; }

a img.alignnone { margin: 5px 20px 20px 0; }

a img.alignleft { float: left; margin: 5px 20px 20px 0; }

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

.wp-caption { background: #FFF; border: 1px solid #F0F0F0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }

.wp-caption.alignnone { margin: 5px 20px 20px 0; }

.wp-caption.alignleft { margin: 5px 20px 20px 0; }

.wp-caption.alignright { margin: 5px 0 20px 20px; }

.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }

.wp-caption .wp-caption-text, .gallery-caption { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }

.home-primary { padding: 20px 50px; }

.home-primary h3 { padding-top: 15px; }

.home-secondary .row { margin-bottom: 20px; }

.home-secondary .row:last-child { margin-bottom: 0; }

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.home-thirdary h3 { margin-top: 0px; }

.freebies-wrapper-padding { padding: 30px 50px; }

.ajax-loader { width: auto; }

.wpcf7 .row, .yiiForm .row { margin-bottom: 10px; }

.wpcf7 .row .col-md-8, .yiiForm .row .col-md-8 { padding-right: 0px; }

.wpcf7 input, .wpcf7 textarea, .yiiForm input, .yiiForm textarea { width: 100%; padding: 0.5em; border: 1px solid #ccedfc; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) inset, 0 0 0 transparent; -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) inset, 0 0 0 transparent; -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) inset, 0 0 0 transparent; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; vertical-align: middle; outline: none; background-color: #80d4f8; color: #000000; font-size: 15px; }

.wpcf7 label, .yiiForm label { color: #26abe3; font-size: 15px; font-weight: 300; }

.wpcf7 input.wpcf7-form-control.wpcf7-submit, .wpcf7 .sumbit, .yiiForm input.wpcf7-form-control.wpcf7-submit, .yiiForm .sumbit { width: auto; border: none; padding: 8px 10px; font-weight: bold; background-color: #c81b5a; color: #f9c83b; display: inline-block; cursor: pointer; }

.wpcf7 input.wpcf7-form-control.wpcf7-submit:hover, .wpcf7 .sumbit:hover, .yiiForm input.wpcf7-form-control.wpcf7-submit:hover, .yiiForm .sumbit:hover { color: white; }

.sample-cover { padding-left: 30px; }

@media (max-width: 767px) { .sample-cover { padding-left: 0px; } }

.issue { display: block; }

.issue p { margin-bottom: 15px; }

.issue h2 { font-size: 1.9em; color: #000000; font-weight: normal; margin-bottom: 15px; }

.issue h5 { padding: 0 0 10px 0; margin: 0 0 10px 0; color: #000000; font-size: 1.17em; font-weight: bold; }

.yiiForm input { margin-bottom: 10px; }

.a-offset { display: block; position: relative; top: -110px; visibility: hidden; }

@media (min-width: 767px) and (max-width: 1200px) { .a-offset { top: -150px; } }

.how-it-works, .testimonial, .sub-ideas { display: block; clear: both; }

.how-it-works .btn-more, .testimonial .btn-more, .sub-ideas .btn-more { margin-bottom: 30px; }

.how-it-works img, .testimonial img, .sub-ideas img { width: auto; margin-top: 0px; }

@media (max-width: 767px) { .how-it-works img, .testimonial img, .sub-ideas img { width: 100%; display: block; } }

.how-it-works h2.margin-left-offset-none, .testimonial h2.margin-left-offset-none, .sub-ideas h2.margin-left-offset-none { margin-left: 0px; }

@media (max-width: 767px) { .how-it-works h2.margin-left-offset-none, .testimonial h2.margin-left-offset-none, .sub-ideas h2.margin-left-offset-none { margin-left: -15px; } }

.how-it-works h2.margin-right-offset-none, .testimonial h2.margin-right-offset-none, .sub-ideas h2.margin-right-offset-none { margin-right: 0px; }

@media (max-width: 767px) { .how-it-works h2.margin-right-offset-none, .testimonial h2.margin-right-offset-none, .sub-ideas h2.margin-right-offset-none { margin-left: -15px; margin-right: -15px; } }

@media (max-width: 767px) { .how-it-works h2, .testimonial h2, .sub-ideas h2 { clear: both; display: block; } }

.img-auto { width: auto; margin-top: 0px; }

@media (max-width: 767px) { .img-auto { width: 100%; display: block; } }

.sys-blog-hero img { width: auto; }

.blog-post .btn-more { margin-bottom: 10px; }

.blog-post img { width: auto; margin-top: 0px; }

@media (max-width: 767px) { .blog-post img { width: 100%; } }

.blog-post h2.margin-left-offset-none { margin-left: 0px; }

@media (max-width: 767px) { .blog-post h2.margin-left-offset-none { margin-left: -15px; margin-right: -15px; } }

.blog-post h2.margin-right-offset-none { margin-right: 0px; }

@media (max-width: 767px) { .blog-post h2.margin-right-offset-none { margin-left: -15px; margin-right: -15px; } }

@media (max-width: 767px) { .blog-post h2.no-img { margin-left: -15px; } }

.blog-post h2 { font-weight: normal; }

@media (max-width: 767px) { .blog-post h2 { clear: both; display: block; } }

.blog-post .fb-share-button { display: block; text-align: right; margin-bottom: 30px; }

.table-pricing { text-align: center; }

.table-pricing th { text-align: center; }

.inspirations .page-title.inspirations-sub-section-title, .inspirations .home-secondary h2.inspirations-sub-section-title, .home-secondary .inspirations h2.inspirations-sub-section-title { font-weight: normal; }

.inspirations .book { margin-bottom: 30px; }

@media (min-width: 992px) { .inspirations .book .modal-lg { width: 800px; } }

.glossary td { padding-right: 30px; }

.modal-lostpasswordform input#user_login { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }

.modal-lostpasswordform input#wp-submit { width: 100%; background-color: #da065b; color: #ffcc33; border-radius: 0; border-color: transparent; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; font-weight: 400; }

#loginTab #loginform label { display: block; }

#loginTab #loginform input#user_pass, #loginTab #loginform input#user_login { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }

#loginTab #loginform #wp-submit { width: 100%; background-color: #da065b; color: #ffcc33; border-radius: 0; border-color: transparent; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; font-weight: 400; }

#loginTab #loginform p.login-username, #loginTab #loginform p.login-password { margin-bottom: 15px; }

.container.wrap.help .row { margin-bottom: 30px; }

.container.wrap.help img { width: auto; }

/* Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x) CSS from:       http://codepen.io/transportedman/pen/NPWRGq and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide Inspired from:  http://codepen.io/Rowno/pen/Afykb  */
.carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; }

.carousel-fade .carousel-inner .active { opacity: 1; }

.carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; }

.carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; }

.carousel-fade .carousel-control { z-index: 2; }

/* WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers." Need to override the 3.3 new styles for modern browsers & apply opacity */
@media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }

/*------------------------------------*    PRINT
\*------------------------------------*/
@media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; } }