@import url(animate.css); @import url(../../plugins/fontawesome/css/font-awesome.min.css); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Droid+Serif:400,400italic); .file__type, .news__header h1, .preloader>p { text-transform: uppercase } .home .homeboxes:hover>.gray, .subfooter a:hover, footer a:hover { text-decoration: none } @font-face { font-family: pencilpete_fontregular; src: url(../../fonts/ppetrial-webfont.eot); src: url(../../fonts/ppetrial-webfont.eot?#iefix) format('embedded-opentype'), url(../../fonts/ppetrial-webfont.woff2) format('woff2'), url(../../fonts/ppetrial-webfont.woff) format('woff'), url(../../fonts/ppetrial-webfont.ttf) format('truetype'), url(../../fonts/ppetrial-webfont.svg#pencilpete_fontregular) format('svg'); font-weight: 400; font-style: normal } html { font-size: 62.5% } body { font-family: 'Open Sans', sans-serif; color: #333; overflow-x: hidden } nav.navbar.navbar-default .navbar-toggle { border-color: none; background: #3a53a4!important; padding: 7px 10px } .row { margin: 0 } img { max-width: 100% } .nopadding { padding: 0!important } .divider { border-top: 1px solid #ccc; clear: both; display: block; margin: 20px 0 } ul.sociaIcons li { list-style: none; display: inline } ul.sociaIcons li a { color: #fff; display: inline-block; border: 1px solid #ddd; border-radius: 50%; width: 30px; height: 30px; text-align: center; line-height: 30px } header .blueheader .searchwrap button>img, header .navbar-toggle img { height: 18px } ul.sociaIcons li a:hover { background: #3a53a4 } header { position: relative } header .logo { left: 20px; position: absolute; top: 0; z-index: 1 } .home, .homeimg { position: relative } header .blueheader { background-color: #3a53a4; display: block; overflow: hidden } header .blueheader .searchwrap { float: right; width: 434px } header .blueheader .searchwrap input { background: 0 0; border: none; border-left: 1px solid #8392c4; border-right: 1px solid #8392c4; color: #fff; padding: 12px; width: 90% } header .blueheader .searchwrap button { background: 0 0; border: none; padding: 0 10px } header .blueheader .searchwrap input::-webkit-input-placeholder { color: #fff } header .blueheader .searchwrap input:-moz-placeholder { color: #fff } header .blueheader .searchwrap input::-moz-placeholder { color: #fff } header .blueheader .searchwrap input:-ms-input-placeholder { color: #fff } header .navbar-collapse { padding: 0 } header .navbar-default .navbar-nav>li>a { border-left: 1px solid #ccc; color: #333; font-size: 16px; padding: 18px 17px; box-sizing: border-box; transition: background-color .3s ease-out 0s, box-shadow .2s ease 0s, border-color .2s ease 0s } header .navbar-default .navbar-nav>li.active>a, header .navbar-default .navbar-nav>li>a:active, header .navbar-default .navbar-nav>li>a:hover { background: 0 0; box-shadow: 0 -5px 0 -1px #f7931d inset } header .navbar-default { background-color: #f6f6f6; border: none; border-bottom: 1px solid #ddd; border-radius: 0; margin: 0 } .homeimg { background: url(../../images/home-image-3.jpg) 0 0/cover no-repeat rgba(0, 0, 0, 0); height: 500px; padding: 80px 0; width: 100% } .homeimg:after { background: url(../../images/slant-accent.png) no-repeat rgba(0, 0, 0, 0); bottom: -30px; content: ""; height: 140px; position: absolute; width: 100% } .homeimg p { color: #fff; font-family: 'Droid Serif', serif; font-size: 1.8em; font-weight: 400; font-style: italic; text-shadow: 1px 1px 8px #3040b3, 1px 1px 8px #3040b3, 1px 1px 8px #3040b3, 1px 1px 8px #3040b3 } .home .overview { color: #666; font-size: 1.8em; font-weight: 300 } .home .homeboxes { margin: 80px 0 70px; position: relative; overflow: hidden } .home .homeboxes img { transition: all .3s ease 0s; width: 100% } .home .homeboxes .books { position: absolute; right: 10px; top: 10px; z-index: 1 } .home .homeboxes .gray { background-color: #666; border-right: 1px solid #999; color: #fff; display: block; padding: 12px 15px; position: relative; width: 100% } .home .homeboxes .gray>img { float: right; height: 20px; width: initial; transition: all .2s linear 0s } .home .homeboxes:hover img { transform: scale(1.05); transition: all .3s ease 0s } .home .homeboxes:hover>.books { transform: scale(1) } .home .homeboxes:hover>.gray>img { margin-right: 10px; transform: scale(1); transform: rotate(180deg); transition: all .2s linear 0s } .contact .address:after, .product .booklist .bookwrap:after, .product .category ul>li.active:before { content: ""; transform: rotate(45deg) } .flex { -webkit-display: flex; -moz-display: flex; display: flex; } .flex-wrap { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; } .bxslider { padding: 0 } .home .bx-wrapper { margin-top: -200px } .home .bx-wrapper .bx-viewport { border: 5px solid #fff; border-radius: 6px; box-shadow: 0 0 0; position: relative } .container .bx-wrapper:after { background: url(../../images/rotator-shadow.png) 0 0/contain no-repeat rgba(0, 0, 0, 0); bottom: -70px; content: ""; height: 70px; left: -6px; position: absolute; width: 100% } .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:hover { background: url(../../images/rotator-pager.png) no-repeat } .bx-wrapper .bx-pager.bx-default-pager a { z-index: 9; position: relative; background: #d6d6d6; height: 11px; width: 11px } .about { padding-bottom: 80px } .about .aboutheader { background: url(../../images/about-header.jpg) 0 0/cover no-repeat rgba(0, 0, 0, 0); margin-bottom: 80px; padding: 35px 20px; text-align: center } .about .aboutheader p { color: #fff; font-family: pencilpete_fontregular; font-size: 2.8em; line-height: normal; margin-bottom: 50px } .product .booklist, .product .prodheader h1 { font-family: "Segoe UI", sans-serif } .about .aboutheader .books { margin-bottom: -110px } .about p { color: #666; font-size: 1.2em; line-height: 1.8em; margin-bottom: 20px } .about .blue { color: #369; font-size: 2em; font-weight: 600 } .product.search { padding-top: 60px } .product { padding-bottom: 50px; min-height: 400px } .product .prodheader { padding: 30px 20px; margin-bottom: 20px } .product .prodheader, .product .prodheader.preschool { background-color: #ffc709 } .product .prodheader.gradeschool { background-color: #e31e27 } .product .prodheader.highschool { background-color: #0094d4 } .product .prodheader.junior-high { background-color: #009688 } .product .prodheader h1 { color: #fff; font-weight: 700; margin: 0 } .product .category { margin-bottom: 20px; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex } .product .category ul { margin: 0; padding: 0; display: flex } .product .category ul>li { list-style: none; position: relative; overflow: hidden } .product .category ul>li>a { background-color: #3a53a4; border-right: 1px solid #fff; color: #9cf; display: flex; align-items: center; height: 100%; font-size: 1.2em; font-weight: 700; padding: 15px 20px; text-align: center } .product .category ul>li.active>a, .product .category ul>li>a:hover { color: #fff; text-decoration: none; transition: all .3s ease 0s } .product .category ul>li.active:before { background-color: #fff; width: 15px; height: 15px; position: absolute; bottom: -10px; left: 49% } .product .category .filter { background-color: #6b7dba; display: flex } .product .category .filter label { border-right: 1px solid #9da9d2; color: #fff; font-size: 1.2em; margin: 0; padding: 15px; width: 40%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -moz-align-items: center; align-items: center } .product .category .filter select { background: url(../../images/dropdown.png) center right no-repeat rgba(0, 0, 0, 0); border: none; color: #fff; -webkit-appearance: none; -moz-appearance: none; padding: 14px; width: 60%; float: right; outline: 0 } .product .category .filter select option { color: #fff; background: #6b7dba } .product .booklist { margin: 20px 0; overflow-wrap: break-word } .product .booklist .bookwrap { background-color: #f2f2f2; border-radius: 10px; margin-bottom: 50px; height: 305px; padding: 30px; position: relative; text-align: center; display: flex; display: -webkit-flex; align-items: center } .product .booklist .bookwrap button img { max-height: 240px } .product .booklist .bookwrap:after { background-color: #f2f2f2; bottom: -12px; height: 25px; left: 45%; position: absolute; width: 25px } .product .booklist .bookwrap .book-badge { bottom: -40px; height: 80px; left: 20px; position: absolute; z-index: 1 } .product .booklist .bookwrap button { background: 0 0; border: none; width: 100% } .product .booklist .desc { min-height: 200px; word-break: break-word; overflow-wrap: break-word } .product .booklist h2 { color: #3a53a4; font-size: 1.4em; font-weight: 600; min-height: 60px } .product .booklist p { font-size: 16px; margin-bottom: 0 } .product .booklist small { color: #666; display: block; font-size: 1em } .contact .contactform { background: url(../../images/contact-bg.jpg) 0 0/cover no-repeat; padding: 20px 0 0 } .contact .contactform input, .contact .contactform textarea { background-color: rgba(255, 255, 255, .8); border: none; font-size: 1.2em; margin-bottom: 25px; padding: 15px; width: 100%; transition: background-color .3s ease-out 0s, box-shadow .2s ease 0s, border-color .2s ease 0s } .contact .contactform input:focus, .contact .contactform textarea:focus { box-shadow: 8px 0 0 0 #f7931d inset } .contact .contactform button { background-color: #3a53a4; border: none; color: #fff; display: block; font-size: 1.5em; font-weight: 700; margin-bottom: 100px; padding: 18px; width: 100%; transition: all .3s ease 0s } .contact .contactform button:hover { background-color: #F7931D; transition: all .3s ease 0s } .contact .contactform h1 { color: #fff; font-family: pencilpete_fontregular; margin: 50px 0; text-align: center } .contact .contactinfo { background-color: rgba(0, 0, 0, .5); padding: 40px 20px; text-align: center } .contact .contactinfo p { font-size: 1.5em; margin: 0 } .contact .contactinfo a, .contact .contactinfo p { color: #fff } .contact .address { background-color: #fff; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2); padding: 30px; position: relative } .contact .address:after { background-color: #fff; bottom: -15px; height: 30px; left: 49%; position: absolute; width: 30px } .contact .address p { color: #369; font-size: 1.8em; font-weight: 600; margin: 0; text-align: center } .text-warning { color: #fff; position: absolute; top: 0; right: 15px; background-color: #EC6868; padding: 15.5px 10px; font-size: 12px } .modal-open .modal { overflow-y: scroll } .modal { position: fixed; font-family: "Segoe UI", sans-serif; padding: 0!important; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden } .modal-body h1, .modal-body h2 { font-family: "Klinic Slab Light"; text-align: center } .modal button.close { background: rgba(0, 0, 0, 0); border: 0; color: #333; cursor: pointer; font-size: 1.5em; font-weight: 400; opacity: 1; text-shadow: 0 0 0 } .modal button.close img { margin-top: -6px } .modal-dialog { position: fixed; margin: 0; width: 100%; height: 100%; padding: 0 } .modal-body, .modal-content { position: absolute; top: 0; bottom: 0 } .modal-content { background: #3a53a4; border: none; border-radius: 0; box-shadow: none; left: 0; right: 0 } .modal-title { font-weight: 300; font-size: 2em; color: #fff; line-height: 30px } .modal-body { font-weight: 300; overflow: auto; padding: 0; width: 100% } .modal-body ul { color: #fff; font-size: 18px } .modal-body .col-md-8 { overflow-wrap: break-word; word-break: break-all } .modal-body h1 { color: #f63; font-size: 2rem; letter-spacing: 5px; line-height: normal; margin-bottom: 25px } .modal-body h2 { color: #f63!important; font-size: 46px; margin-bottom: 50px } .modal .header { padding: 20px; margin-bottom: 40px } .modal .header.preschool { background-color: #FFC709 } .modal .header.gradeschool { background-color: #E31E27 } .modal .header.highschool { background-color: #0094D4 } .modal .header .modal-title { font-family: "Segoe UI", sans-serif; font-size: 2.4em; font-weight: 700 } .modal h4 { color: #fff; font-size: 2.5em; font-weight: 600; margin-bottom: 50px } .modal p { color: #fff; font-size: 1.5em; font-weight: 400; margin-bottom: 40px } .modal small { color: #fff; display: block; font-size: 1.2em } .carousel .carousel-inner .item { width: 100% } .carousel .carousel-inner .item>img { border: 15px solid #fff; height: 350px; margin: 0 auto } .carousel-indicators { bottom: 0; left: 0; margin: 20px 0 0; padding: 0; position: relative; width: 100% } .carousel-indicators li { border: none; border-radius: 0; height: auto; width: auto; display: inline-table } .carousel-indicators .active { background-color: #fff; height: auto; margin: 0; width: auto } .carousel-indicators img { display: block; height: 50px; width: 50px } .aboutOpac, .preloader { height: 100%; width: 100% } .subfooter { background: url(../../images/home-image-2.jpg) center top no-repeat; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .5) inset; padding: 20px 0 0; position: relative } .subfooter a { background-color: rgba(0, 0, 0, .5); bottom: 0; clear: both; color: #fff; display: block; font-size: 20px; font-weight: 600; left: 0; padding: 20px; position: absolute; width: 100% } .aboutTitle, .bold, .preloader>p { font-weight: 700 } .subfooter p { color: #fff; font-family: "Droid Serif", serif; font-size: 2.7em; font-style: italic; margin-top: 56px; text-shadow: 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33, 0 0 4px #c33 } .subfooter .footerimg { position: relative; z-index: 1 } .subfooter .arrow { margin-left: 20px; margin-top: 10px; transition: all .2s linear 0s } .subfooter a:hover .arrow { margin-left: 30px; transition: all .2s linear 0s } footer { background-color: #393939; padding: 35px 20px 20px } footer a, footer p { color: #fff; font-size: 14px } footer a { display: inline-block; margin-bottom: 10px } footer a:hover { color: #F7931D } .history { background: url(../../images/fullrender.jpg); background-size: cover; padding: 20px; position: relative; margin-bottom: 50px } .history p { color: #fff; font-size: 17px } .aboutTitle { color: #3a53a3; font-size: 30px; border-bottom: 1px solid rgba(222, 222, 222, .1); margin-bottom: 15px; padding-bottom: 15px } .preloader p, .preloader>p { color: #fff; text-align: center } .aboutOpac { background: rgba(0, 0, 0, .6); position: absolute; top: 0; left: 0; z-index: 0 } .file__type, .news__thumbnail { background-size: cover; background-repeat: no-repeat } .terms-privacy { margin-top: 30px } .preloader { background-color: #3a53a4; position: fixed; z-index: 100000000; text-align: center; top: 0; display: flex; display: -webkit-flex; justify-content: center } .preloader>p { font-family: Raleway, sans-serif; font-size: 1.6vw; letter-spacing: 4px } .notfound .circle a, .notfound .circle h1 { font-family: "Open Sans", sans-serif } .sk-folding-cube { height: 70px; left: 0; right: 0; margin: 20px auto; position: fixed; top: 28%; width: 70px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg) } .preloader p { font-size: 15px; opacity: 1; position: absolute; top: 54%; left: 0; right: 0; margin: 0 auto; width: 100% } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) } .sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100% } .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg) } .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg) } .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg) } .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: .3s; animation-delay: .3s } .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: .6s; animation-delay: .6s } .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: .9s; animation-delay: .9s } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0 } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0); transform: perspective(140px) rotateX(0); opacity: 1 } 100%, 90% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0 } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0 } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0); transform: perspective(140px) rotateX(0); opacity: 1 } 100%, 90% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0 } } .scroll-top-wrapper svg { display: block; height: 30px; opacity: .7; width: 30px } .scroll-top-wrapper span { color: #000; display: block; line-height: 36px } .scroll-top-wrapper { position: fixed; opacity: 0; visibility: hidden; overflow: hidden; text-align: center; z-index: 9; background-color: rgba(255, 255, 255, .3); color: #eee; width: inherit; height: inherit; line-height: 48px; right: 10px; bottom: 0; padding: 0 5px; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; border-radius: 2px } .scroll-top-wrapper:hover { background-color: rgba(255, 255, 255, .4) } .notfound, .notfound .circle { background-color: #3A53A4 } .scroll-top-wrapper.show { visibility: visible; cursor: pointer; opacity: 1 } .scroll-top-wrapper i.fa { line-height: inherit } .notfound .circle { border-radius: 50%; box-shadow: 0 0 15px 3px rgba(0, 0, 0, .2); display: block; height: 500px; margin: 7% auto 2%; padding: 100px 85px; position: relative; text-align: center; width: 500px } .notfound .circle h1 { color: #fff; font-size: 2.6rem; letter-spacing: -4px; line-height: normal } .notfound .circle p { color: #ccc; font-size: 1.5em; line-height: normal } .notfound .circle a { border: 1px solid #f7931d; color: #f7931d; display: inline-block; font-weight: 600; padding: 15px; transition: all .3s ease 0s } .notfound .circle a:hover { background-color: #fea469; color: #fff; transition: all .3s ease 0s } .notfound .circle .bubble { height: 120px; position: absolute; right: -50px; top: 0 } @-webkit-keyframes bounceInDown { 0%, 100%, 60%, 75%, 90% { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0) } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0) } 100% { -webkit-transform: none; transform: none } } @keyframes bounceInDown { 0%, 100%, 60%, 75%, 90% { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0) } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0) } 100% { -webkit-transform: none; transform: none } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } .animated.bounceInDown { -webkit-animation-duration: .75s; animation-duration: .75s } .news__header { background-color: #FFC709; padding: 30px 20px; margin-bottom: 20px } .news__header h1 { color: #fff; font-weight: 700; margin: 0 } .news__main { padding: 40px 0; min-height: calc(100vh - 465px); position: relative } .news__main-col { max-width: 33.33%; width: 100%; } .news__thumbnail { border: 1px solid #3a53a4; background-position: center; height: 300px } .news__title { color: #3a53a4; font-size: 1.2em; font-weight: 600; margin-top: 10px; display: block } .news__text { font-size: 18px; line-height: 180% } .news__return-btn a { background-color: #3a53a4; color: #fff; padding: 10px 20px; border-radius: 20px; font-weight: 600; font-size: 16px; margin: 5px 5px; max-width: 240px; width: 100%; } .news__return-btn a:hover { color: #fff; text-decoration: none; } .news__return-btn { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 100%; flex-wrap: wrap; justify-content: center; } .news__cover-header h2 { margin: 0; } .news-center__modal { position: fixed; height: 100vh; width: 100%; top: 0; left: 0; justify-content: center; align-items: center; z-index: 99; background-color: rgba(0, 0, 0, 0.9); display: none; } .news-center__modal.active { display: flex; } .news-center__modal-pic { background-size: contain; height: 100%; width: 100%; background-repeat: no-repeat; background-position: center; } .news-center__modal-cont { background-color: #fff; max-width: 70.3125vw; padding: 2.604166666666667vw; height: 39.0625vw; width: 100%; position: relative; } .news-center__close { width: 30px; height: 30px; color: #fff; font-size: 30px; position: absolute; top: -15px; right: -15px; background-color: #3a53a4; border-radius: 50%; cursor: pointer; } .news-center__close span { top: 0; } .mb-40 { margin-bottom: 40px } .mb-60 { margin-bottom: 60px; } .file { margin: 0 -15px 100px; -webkit-display: flex; -moz-display: flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap } .file--video { margin-bottom: 0; } .file a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1 } .file__item { width: 25%; padding: 0 15px; margin-bottom: 25px } .file__item-inner { position: relative; cursor: pointer; } .file__item-inner:hover .file__name, .file__item-inner:hover .file__type { color: #3a53a4 } .file__type { background-color: #fff; border: 1px solid #e6e6e6; background-position: center; background-size: cover; height: 300px; font-weight: 700; font-size: 30px; -webkit-display: flex; -moz-display: flex; display: flex; -webkit-align-items: center; -moz-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center } .file__name { font-size: 15px; line-height: 1.5; text-align: center } @media (min-width:1200px) { .product .booklist { display: inline-table; float: none; width: 24.5%; vertical-align: top } } @media (min-width:1152px) { html { font-size: 2em } } @media (min-width:1366px) and (max-width:1400px) { .homeimg { height: 420px; padding: 50px 0 80px } .news__main { min-height: calc(100vh - 100px) } } @media (min-width:768px) and (max-width:1024px) { html { font-size: 1.6em } .homeimg { padding: 50px 0; height: 365px } .homeimg p { font-size: 1.5em } .home .homeboxes .books { height: 100px } .subfooter p { margin: 0 } .home .bx-wrapper { margin-top: -140px } .home .bx-wrapper img { margin: 0 auto } .product .category ul>li>a { font-size: 1em; padding: 17px 20px } .product .booklist .desc { min-height: 220px } .about .aboutheader p { font-size: 2.5em } .contact .contactinfo a, .contact .contactinfo p { font-size: 1.2em } .file__item { width: 33.33%; } } @media (max-width:900px) { .file__type { font-size: 20px; height: 300px } } @media (max-width:800px) { .file__item { width: 50%; } .news__main-col { max-width: 50%; width: 100%; } } @media (max-width:768px) { .homeimg { height: auto } .homeimg:after { background: 0 0 } .homeimg p { font-size: 18px; margin-top: 0; text-align: center } .home .bx-wrapper { margin-top: 25px } .home .bx-wrapper img, .home .homeboxes img { width: 100% } .home .homeboxes .books { height: auto; width: auto; top: 60px } .home .homeboxes { margin: 0 } .subfooter p { margin: 0; font-size: 1.6em } .subfooter a { font-size: 16px } .contact .contactinfo p { margin: 0 0 15px } .product .category .filter label { font-size: 1em; padding: 15px } .product .booklist .bookwrap { min-height: 415px } header .navbar-default .navbar-nav>li>a { padding: 18px 12px } .terms-privacy { margin-top: 50px } } @media (max-width:750px) { html { font-size: 1.2em } .subfooter { padding: 18px 0 60px } .subfooter a img { height: 20px } footer .col-md-6 { text-align: center!important } .home .overview, .modal .col-md-8, .modal h4, .modal p, .modal small, .product .booklist .desc, header .navbar-default .navbar-nav>li>a { text-align: center } header .logo { left: 6px; top: 36px; height: 90px } .navbar-nav { margin: 0 } header .navbar-default .navbar-nav>li.active>a, header .navbar-default .navbar-nav>li>a:active, header .navbar-default .navbar-nav>li>a:hover { background-color: #f7931d; color: #fff; box-shadow: 0 0 0 } .homeimg { background-size: cover; height: 260px } .homeimg:after { bottom: 0; background: 0 0 } .home .homeboxes .books { height: 100px; top: 10px } .home .overview { margin-bottom: 60px; font-size: 1.4em } header .blueheader .searchwrap { width: 100% } header .blueheader .searchwrap input { width: 86% } .contact .contactinfo p { font-size: 1em; margin-bottom: 20px } .contact .contactinfo p img { display: block; margin: 0 auto 10px } .subfooter .arrow { margin-left: 10px; margin-top: 0 } .subfooter a { font-size: 12px; padding: 15px 0 } .product .category .filter { clear: both; border-top: 1px solid #fff; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex } .product .category .filter label { padding: 15px } .product .category ul>li>a { font-size: 1em } .modal button.close { font-size: 1em; padding: 10px 0 } .modal .header .modal-title { font-size: 1.2em } .notfound .circle { height: 300px; margin: 12% auto 2%; padding: 24px 30px; width: 300px } .notfound .circle .bubble { height: 65px; right: -4px } .product .booklist .bookwrap, .product .booklist .desc { min-height: inherit } .subfooter .footerimg { position: relative; z-index: 0; margin-bottom: -10px } .product .prodheader h1 { font-size: 24px } .about .aboutheader p, .contact .contactform h1 { font-size: 2em } footer .text-right a { display: inline; margin: 0 5px } footer .clearfix { display: none } } @media screen and (max-width:600px) { .product .category { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap } .product .category ul { margin-bottom: 5px } .file__item { width: 50% } .news__main-col { max-width: 100%; width: 100%; } } @media screen and (max-width:480px) { .file__item { width: 100% } .product .category ul { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap } .product .category ul>li { width: 50%; border-bottom: 1px solid #fff } .sk-folding-cube { top: 15%; margin: 20px auto } } @media (max-width:430px) { .h1, h1 { font-size: 24px } .homeimg { height: 200px; padding: 30px 0 } .homeimg .col-md-6 { padding: 0 } .home .bx-wrapper { margin-top: 25px } .product .category ul>li>a { height: 70px } .product .category .filter label { width: auto } .product .category .filter select { width: 57% } .product .prodheader h1 { font-size: 18px; margin-left: -15px } .product .prodheader h1 img { position: absolute; right: 10%; margin-top: -10px } footer { padding: 20px 10px } footer .col-md-6, footer .container-fluid { padding: 0 } footer .col-md-6>p { width: 280px; margin: 0 auto 10px } footer .col-md-6 p+p { width: 100% } footer a { display: inline } .terms-privacy { margin-top: 30px } .news__main { min-height: calc(100vh - 265px) } } @media screen and (max-width:320px) { .product .category .filter select { width: 50% } .news__main { min-height: calc(100vh - 95px) } }