/* Stylesheet for Stories Preschool website     large above 1024px(64em)     medium 1023px-640px(40em)     small below 639px */  
a:link {color:#ffa31a;} a:visited {color:#ffa31a;} a:hover {color:#ffad33; text-decoration:underline;} a:active {color:#ffa31a;} a.website1:link {font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #fff; text-decoration: none; background-color: #007acc; padding: 6px 15px; border: thin solid #000;} a.website1:visited {color: #fff; border: thin solid #000;} a.website1:hover {color: #fff; background-color: #0099ff;} a.website1:active {color: #fff; border: thin solid #000;} a.website2:link {font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #fff; text-decoration: none; background-color: #800000; padding: 6px 15px; border: thin solid #000;} a.website2:visited {color: #fff; border: thin solid #000;} a.website2:hover {color: #fff; background-color: #AC1919;} a.website2:active {color: #fff; border: thin solid #000;} a.website3:link {font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #fff; text-decoration: none; background-color: #868179; padding: 6px 15px; border: thin solid #000;} a.website3:visited {color: #fff; border: thin solid #000;} a.website3:hover {color: #fff; background-color: #9e9a94;} a.website3:active {color: #fff; border: thin solid #000;} /* NAVIGATION MENU */ .off-canvas-wrapper {background-color: #111;} .off-canvas {background-color: #111;} .title-bar {background-color: #111; height: 80px; padding: 15px 30px; z-index: 1; font-family: Arial, Helvetica, sans-serif; font-weight:700;} .fi-list {color:#5e5a55; font-size: 30px;} .fi-list:link {color:#5e5a55;} .fi-list:visited {color:#5e5a55;} .fi-list:hover {color:#494642;} .fi-list:active {color:#5e5a55;} .brand-title {font-size: 22px; font-variant:small-caps;} .brand-title:link {color: #fff;} .brand-title:visited {color: #fff;} .brand-title:hover{color: #eee; text-decoration:none;} .brand-title:active {color: #fff;} .divider {padding: 15px 30px;} .orbit {z-index:0;} /* BUTTONS */ .secondary:link {background-color: #fff; color: #777;} .secondary:visited {background-color: #fff; color: #777;} .secondary:hover {background-color: #fff; color: #222; text-decoration:none;} .secondary:active {background-color: #fff; color: #777;} .button-main:link {background-color: #9e9a94; color: #fff;} .button-main:visited {background-color: #9e9a94; color: #fff;} .button-main:hover {background-color: #aaa6a1; text-decoration:none;} .button-main:active {color: #fff;} .button-group{margin-bottom: 0rem;} .button-top{background-color: #eee; border-radius: 50%; display: table; height: 75px; width: 75px; position: fixed; right: 50px; bottom: 30px; z-index:5; opacity: 0.7;} .button-top span {color: #fff; display: table-cell; text-align: center; vertical-align: middle;} .button-top i {font-size: 50px; color: #ccc;} .float-right {margin-left: 15px;} .float-right-thumbnail {float: right; margin-left: 15px;} .floatmenu-right {float: right; margin-left: 15px;} .label {font-size:18px;} .line {background-color:#ffa31a; height:8px; width:600px;} .line1 {background-color:#ffa31a; height:8px; width:600px;}  .featurette {font-family: 'Cabin', Arial, Helvetica, sans-serif; margin: 90px auto;} .featurette-heading {font-weight: 700;line-height: 1;letter-spacing: -1px;} .featurette p {font-size: 22px;} .center-block {display:block;margin-right:auto;margin-left:auto} /* CONTENT SECTIONS */ .section-content {font-family: 'Cabin', Arial, Helvetica, sans-serif; font-size: 22px; padding: 10px 3%;} h1 {font-size: 2.2em; font-weight: 600;} h2 {font-size: 1.6em; font-weight: 600;} h3 {font-size: 1.2em; font-weight: 600;} h4 {font-size: 1.1em; font-weight: 600;} .popup img:hover {box-shadow: 0px 6px 8px 5px #888;} .greyscale img {-webkit-filter: grayscale(1);} .greyscale img:hover {-webkit-filter: grayscale(0); box-shadow: 0px 6px 8px 5px #888;} .section-related { } .section-wiki {background-color: #fff; padding: 20px 30px; border: 1px solid #ccc;} .section-line {background-color: #e8e5e0; height:20px;} .section-end {background-color: #111; color: #fff; padding: 120px 30px 50px; position: relative; z-index: 3;} .section-info { max-width: 450px; background: #eee; color: #666; float: right; margin: 20px 25px; padding: 10px 30px 35px; border-radius: 15px; box-shadow: 0px 6px 8px #929498; } /* iBook thumbnails */ .section-thumbnail { width: 250px; margin: 15px 0 15px 25px; float: right; } /* FOOTER SECTION */ .footer {background-color: #000; color: #ccc; text-align: center; font-size: 1.2rem; padding: 1rem;} /* Icons */ .header-icons i {font-size: 25px;} .footer-icons i {font-size: 25px;} .footer .social a {display: inline-block; width: 2.5rem; height: 2.5rem; background-color: #000; border-radius: 2px; font-size: 3rem; color: #fff; text-align: center; line-height: 2rem; margin: 0 3px 0 0;} .footer .copywrite {color: #8f9296; font-size: 0.875rem; margin: 1rem 0 1rem 0;} .footer .footer-links a {list-style: none; font-weight: normal; font-variant:small-caps; color: #fff; padding: 3rem 0 2rem; margin: 0; font-size: 0.875rem;} .footer .footer-links a::after {content: "•"; padding: 0 0.5rem 0 0.5rem;} .footer .footer-links a:last-child::after {content: ""; padding: 0 0.4rem 0 0.8rem;} /* INTRO SECTIONS */ .intro {background-color: #111; color: #fff; padding: 45px 30px; position: relative; z-index: 3;} .intro h5 {font-weight:800;} .intro p {font-size: 18px; line-height:1.7;} /* FEATURES SECTION */ .features-story {text-align: center; font-size: 2.375rem;} .features {text-align: center;} .features hr {width: 25%; margin: 1rem auto;} .features .round-icon {background-color: #ddd; border-radius: 50%; display: table; height: 100px; margin: -61px auto 1rem; width: 100px; font-size: 3rem;} .features .round-icon span {color: #fff; display: table-cell; text-align: center; vertical-align: middle;} .social i {color:#222;} 
.rounded-social-buttons {/*text-align: center;*/} .rounded-social-buttons .social-button {display: inline-block; position: relative; cursor: pointer; width: 3.125rem; height: 3.125rem; border: 0.125rem solid transparent; padding: 0; text-decoration: none; text-align: center; color: #fefefe; font-size: 1.6325rem; font-weight: normal; line-height: 2em; border-radius: 1.6875rem; transition: all 0.5s ease; margin-right: 0.25rem; margin-bottom: 0.25rem;} .rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);} .rounded-social-buttons .social-button.facebook {background: #3b5998; /* #3b5998 facebook blue */} .rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {color: #3b5998; background: #fefefe; border-color: #3b5998;} .rounded-social-buttons .social-button.twitter {background: #55acee; /* #55acee twitter blue */} .rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {color: #55acee; background: #fefefe; border-color: #55acee;} .rounded-social-buttons .social-button.youtube {background: #bb0000; /* #bb0000 youtube red */} .rounded-social-buttons .social-button.youtube:hover, .rounded-social-buttons .social-button.youtube:focus {color: #bb0000; background: #fefefe; border-color: #bb0000;} .rounded-social-buttons .social-button.google-plus {background: #dd4b39; /* #dd4b39 google plus red */} .rounded-social-buttons .social-button.google-plus:hover, .rounded-social-buttons .social-button.google-plus:focus {color: #dd4b39; background: #fefefe; border-color: #dd4b39;} .rounded-social-buttons .social-button.vimeo {background: #4ebbff; /* #dd4b39 vimeo blue */} .rounded-social-buttons .social-button.vimeo:hover, .rounded-social-buttons .social-button.vimeo:focus {color: #4ebbff; background: #fefefe; border-color: #4ebbff;} .rounded-social-buttons .social-button.printer {background: #5e5a55;} .rounded-social-buttons .social-button.printer:hover, .rounded-social-buttons .social-button.printer:focus {color: #5e5a55; background: #fefefe; border-color: #5e5a55;} .rounded-social-buttons .social-button.mailing {background: #5e5a55;} .rounded-social-buttons .social-button.mailing:hover, .rounded-social-buttons .social-button.mailing:focus {color: #5e5a55; background: #fefefe; border-color: #5e5a55;} 
.tooltip-view {display: inline; position: relative; z-index: 0; } /* Trigger text */ .tooltip-item {color: #fefefe; background-color: #2a3035; cursor: pointer; display: inline-block; font-weight: 700; padding: 0 15px;} /* Gap filler */ .tooltip-item::after {content: ''; position: absolute; width: 360px; height: 20px; bottom: 100%; left: 50%; pointer-events: none; -webkit-transform: translateX(-50%); transform: translateX(-50%);} .tooltip-view:hover .tooltip-item::after {pointer-events: auto;} /* Tooltip */ .tooltip-content {position: absolute; z-index: 9999; width: 450px; left: 50%; margin: 0 0 20px -220px; bottom: 100%; text-align: left; font-size: 0.765em; line-height: 1.4; box-shadow: -5px -5px 15px rgba(48,54,61,0.2); background: #2a3035; opacity: 0; cursor: default; pointer-events: none;} .tooltip-effect-1 .tooltip-content { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s;} .tooltip-effect-5 .tooltip-content {width: 180px; margin-left: -90px; -webkit-transform-origin: 50% calc(100% + 6em); transform-origin: 50% calc(100% + 6em); -webkit-transform: rotate3d(0,0,1,15deg); transform: rotate3d(0,0,1,15deg); -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, transform 0.2s; -webkit-transition-timing-function: ease, cubic-bezier(.17,.67,.4,1.39); transition-timing-function: ease, cubic-bezier(.17,.67,.4,1.39);} .tooltip-view:hover .tooltip-content {pointer-events: auto; opacity: 1; -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0); transform: translate3d(0,0,0) rotate3d(0,0,0,0);} /* Arrow */ .tooltip-content::after {content: ''; top: 100%; left: 50%; border: solid transparent; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; border-top-color: #2a3035; border-width: 10px; margin-left: -10px;} /* Tooltip content*/ .tooltip-content img {position: relative; display: block; float: left; margin-right: 1em;} .tooltip-text {font-size: 18px; line-height: 1.35; display: block; padding: 1.31em; color: #fff;} .tooltip-effect-5 .tooltip-text {padding: 1.5em;} .tooltip-text a {font-weight: bold;}
/* max 1300px */ @media only screen and (max-width: 81.25em) {.section-end {padding: 70px 30px 50px;} }
/* above 641px */ @media only screen and (min-width: 40.063em) {.footer {padding: 4rem;} .footer p {text-align: left;} .footer .social {text-align: left; margin: 0;}} 
/* max 640px */ @media only screen and (max-width: 40em) {.features .columns { margin-bottom: 5rem;} }   
/* below 639px */ @media only screen and (max-width: 39.9375em) { h1 {font-size: 1.45em; line-height: 1.5; font-weight: 600;} h2 {font-size: 1.3em; line-height: 1.5; font-weight: 600;} h3 {font-size: 1.1em; line-height: 1.5; font-weight: 600;} h4 {font-size: 1em; line-height: 1.5; font-weight: 600;} .float-right {float:none; margin:20px auto;} .featurette {margin: 50px auto; padding: 15px;} .featurette-heading {font-size: 1.5em; line-height: 1.5; font-weight: 700;} .line {width:300px;} .line1 {width:300px;} .intro {padding: 60px 15px; text-align: center} .section-end {font-size: 17px; padding: 30px 20px;} /* Apple Books thumbnails */ .section-thumbnail { width: 100px; margin: 15px; } .button-top {border-radius: 50%; bottom: 50px; height: 60px; width: 60px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); opacity: 0.7;} .button-top i {font-size: 38px;} .footer-links {margin: 30px auto;} } 
/* ANIMATIONS / TRANSITIONS */ .slide-left {visibility:hidden;} .slide1 { animation-name: slide1; -webkit-animation-name: slide1; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; visibility: visible; } @keyframes slide1 { 0% { opacity: 0; -webkit-transform: translateX(80%); } 100% { opacity: 1; -webkit-transform: translateX(0%); } } @-webkit-keyframes slide1 { 0% { opacity: 0; -webkit-transform: translateX(80%); } 100% { opacity: 1; -webkit-transform: translateX(0%); } } .slide-right {visibility:hidden;} .slide2 { animation-name: slide2; -webkit-animation-name: slide2; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; visibility: visible; } @keyframes slide2 { 0% { opacity: 0; -webkit-transform: translateX(-80%); } 100% { opacity: 1; -webkit-transform: translateX(0%); } } @-webkit-keyframes slide2 { 0% { opacity: 0; -webkit-transform: translateX(-80%); } 100% { opacity: 1; -webkit-transform: translateX(0%); } }