@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100;
src: url(https://okulyk.com/wp-content/themes/okulyk.com/dist/fonts/0c2090aa39a7707c42236ef78ef0338a.woff2);
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
src: url(https://okulyk.com/wp-content/themes/okulyk.com/dist/fonts/4cd0fd34f59af6827ed740223b5ce110.woff2);
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
src: url(https://okulyk.com/wp-content/themes/okulyk.com/dist/fonts/b4c1a1dc7f990c3b92ae0ad6b180bbf8.woff2);
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url(https://okulyk.com/wp-content/themes/okulyk.com/dist/fonts/bbc96d50ab9d8291be82b05f64bfeb11.woff2);
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(https://okulyk.com/wp-content/themes/okulyk.com/dist/fonts/b6e1d0fde881ad6c9a4de81882059be4.woff2);
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(https://okulyk.com/wp-content/themes/okulyk.com/dist/fonts/2e0bf09ac4b4cb07efe92b9df7b39d64.woff2);
}
@font-face {
font-family: 'Exo2';
font-style: normal;
font-weight: 300;
src: url(https://okulyk.com/wp-content/themes/okulyk.com/dist/fonts/9de14b185487f7dddf9505c4730c7646.woff2);
}
@font-face {
font-family: 'Exo2';
font-style: normal;
font-weight: 500;
src: url(https://okulyk.com/wp-content/themes/okulyk.com/dist/fonts/66c93d454cf5766e2a93bbf2e7cd200d.woff2);
}
@font-face {
font-family: 'Exo2';
font-style: normal;
font-weight: 700;
src: url(https://okulyk.com/wp-content/themes/okulyk.com/dist/fonts/0e1af1409f59c64251ca53f133de6818.woff2);
}
.single-book-block {
background: #f4f5f6;
padding: 30px 0;
}
@media (max-width: 768px) {
.single-book-block {
padding: 15px 0;
}
}
.single-book-block .single-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.single-book-block .single-wrapper h1 {
margin-bottom: 20px;
padding: 0 5px;
}
@media (max-width: 768px) {
.single-book-block .single-wrapper h1 {
font-size: 22px;
margin-bottom: 15px;
font-weight: 500;
padding: 0 10px;
}
}
.single-book-block .single-wrapper .single-book {
width: 64%;
background: #fff;
border-radius: 15px;
box-shadow: 1px 1px 5px 0px #e2e2e2;
height: 100%;
}
@media (max-width: 768px) {
.single-book-block .single-wrapper .single-book {
width: 100%;
}
}
.single-book-block .single-wrapper .single-book iframe {
width: 100%;
height: 1000px;
border: none;
outline: none;
border-radius: 15px 15px 0 0;
}
@media (max-width: 768px) {
.single-book-block .single-wrapper .single-book .desk-player {
display: none;
}
}
.single-book-block .single-wrapper .single-book .mobile-player {
display: none;
}
@media (max-width: 768px) {
.single-book-block .single-wrapper .single-book .mobile-player {
display: block;
width: 100%;
height: calc(100vh / 1.45);
border: none;
outline: none;
border-radius: 0;
}
}
@media (max-width: 768px) {
.mobile-no-pad {
padding: 0 !important;
}
}
* {
box-sizing: border-box;
touch-action: manipulation;
margin: 0;
padding: 0;
}
body {
color: #000;
font-family: Exo2;
background: #fff;
}
.container {
width: 1140px;
margin: 0 auto;
padding: 0 20px;
}
@media (max-width: 1140px) {
.container {
width: 720px;
padding: 0;
}
}
@media (max-width: 768px) {
.container {
width: 100%;
padding: 0 10px;
}
}
img {
width: 100%;
}
.mb20 {
margin-bottom: 20px;
}
.mt33 {
margin-top: 33px;
}
.breadcrumbs {
color: #269;
padding-left: 3px;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.breadcrumbs {
display: none;
}
}
.breadcrumbs a {
color: #269;
}
.breadcrumbs a:hover {
text-decoration: none;
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
.showAll {
overflow: visible !important;
height: auto !important;
}
.hideDesc {
display: block;
}
@media (max-width: 768px) {
.hideDesc {
display: none;
}
}
.hideMob {
display: none;
}
@media (max-width: 768px) {
.hideMob {
display: block;
}
}
.blue {
color: #0173cd;
}
footer {
background: #000;
padding: 30px 0;
}
@media (max-width: 1140px) {
footer {
padding: 20px 0;
}
}
footer .footer-top a {
display: block;
width: 30%;
}
@media (max-width: 768px) {
footer .footer-top a {
width: 60%;
}
}
footer .footer-disklamer {
margin: 20px 0;
}
@media (max-width: 768px) {
footer .footer-disklamer {
margin: 10px 0;
}
}
footer .footer-disklamer p {
color: #878d92;
font-family: Roboto;
font-weight: 300;
line-height: 24px;
}
footer hr {
margin-bottom: 20px;
border: none;
height: 1px;
background: #292929;
}
@media (max-width: 768px) {
footer hr {
margin-bottom: 10px;
}
}
footer .footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer .footer-bottom p {
color: #878d92;
}
footer .footer-bottom a {
text-decoration: none;
color: #878d92;
}
footer .footer-bottom a:hover {
color: #fff;
}
header {
padding: 20px 0;
margin-bottom: 0;
}
@media (max-width: 768px) {
header {
padding: 10px 0;
}
}
header .container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
position: relative;
}
@media (max-width: 1140px) {
header .container {
width: 100%;
padding: 0 40px;
}
}
@media (max-width: 768px) {
header .container {
padding: 0 10px;
}
}
header .container a.logo {
width: 400px;
margin-right: 60px;
text-decoration: none;
}
@media (max-width: 768px) {
header .container a.logo {
width: 70%;
margin: 0;
}
}
.nav-header {
display: none;
}
@media (max-width: 768px) {
.nav-header {
display: block;
}
}
.nav-header .nav-classes,
.nav-header .nav-subjects {
min-width: 100%;
display: flex;
overflow-x: auto;
padding-left: 10px;
}
.nav-header .nav-classes a,
.nav-header .nav-subjects a {
display: inline-block;
color: #000;
text-decoration: none;
padding: 10px 5px;
padding-top: 0;
font-size: 14px;
border-bottom: 2px solid transparent;
white-space: nowrap;
}
.nav-header hr {
border: none;
height: 1px;
background: #ececed;
}
.nav-header .nav-subjects a {
padding-top: 10px;
}
.nav-header .nav-subjects .active-menu {
border: none !important;
}
.nav-header .active-menu {
border-bottom: 2px solid #05adfa !important;
color: #1497cc !important;
}
.nav-classes::-webkit-scrollbar,
.nav-subjects::-webkit-scrollbar {
display: none;
}
.hr-mob {
display: none;
margin-bottom: 20px;
border: none;
height: 1px;
background: #e9eced;
}
@media (max-width: 768px) {
.hr-mob {
display: block;
}
}
.hero {
margin-top: 20px;
margin-bottom: 50px;
}
@media (max-width: 1140px) {
.hero {
margin-bottom: 30px;
}
}
@media (max-width: 768px) {
.hero {
margin-top: 10px;
margin-bottom: 0;
}
}
.hero .container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.hero .container .hero-left {
width: 70%;
}
@media (max-width: 1140px) {
.hero .container .hero-left {
padding-bottom: 10px;
}
}
@media (max-width: 768px) {
.hero .container .hero-left {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
}
.hero .container .hero-left h1 {
font-size: 64px;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.hero .container .hero-left h1 {
font-size: 28px;
margin-bottom: 10px;
font-weight: 500;
}
}
.hero .container .hero-left p {
font-size: 28px;
font-weight: 300;
color: #54aced;
font-family: Roboto;
}
@media (max-width: 768px) {
.hero .container .hero-left p {
font-size: 20px;
font-weight: 300;
color: #888e93;
}
}
.hero .container .hero-right {
width: 25%;
}
@media (max-width: 768px) {
.hero .container .hero-right {
width: 100%;
}
}
.class-table {
margin-bottom: 50px;
}
.class-table .container {
padding: 0 15px;
overflow: hidden;
position: relative;
}
@media (max-width: 768px) {
.class-table .container {
height: auto !important;
}
}
.class-table .container .show-all-subjects {
display: none;
}
@media (max-width: 768px) {
.class-table .container .show-all-subjects {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin-top: -13px;
padding: 10px;
margin-bottom: 0;
cursor: pointer;
z-index: 999;
}
.class-table .container .show-all-subjects img {
width: 20px;
margin-right: 5px;
}
}
.class-table .container .class-table-item {
margin-bottom: 15px;
display: block;
}
@media (max-width: 768px) {
.class-table .container .class-table-item {
width: 100%;
margin: 0;
margin-bottom: 10px;
height: 140px;
position: relative !important;
left: auto !important;
top: auto !important;
overflow: hidden;
}
}
.class-table .container .class-table-item:nth-child(3n) {
margin-right: 0;
}
.class-table .container .class-table-item:nth-child(10n) {
margin-bottom: 0;
}
.class-table .container .class-table-item:nth-child(11n) {
margin-bottom: 0;
}
.class-table .container .class-table-item h2 {
font-family: Roboto;
margin-bottom: 7px;
}
.class-table .container .class-table-item a {
text-decoration: none;
display: inline-block;
padding: 5px 10px;
margin-right: 5px;
background: #e3faff;
color: #269;
font-size: 16px;
border-radius: 5px;
margin-bottom: 10px;
font-weight: 500;
}
@media (max-width: 768px) {
.class-table .container .class-table-item a {
padding: 5px 10px;
font-size: 14px;
margin-bottom: 10px;
}
}
.class-table .container .class-table-item a:first-child {
color: #000;
background: transparent;
padding: 0;
margin: 0;
font-size: 20px;
}
.class-table .container .class-table-item a:first-child:hover {
background: transparent;
color: #269;
}
.class-table .container .class-table-item a:hover {
background: #ccf3fd;
}
.hero-desc {
background: #e3faff;
}
.hero-desc .container {
padding: 80px;
padding-bottom: 50px;
}
@media (max-width: 1140px) {
.hero-desc .container {
padding: 40px 0;
}
}
@media (max-width: 768px) {
.hero-desc .container {
padding: 20px 15px;
}
}
.hero-desc h2 {
font-weight: 500;
font-size: 40px;
line-height: 48px;
}
@media (max-width: 768px) {
.hero-desc h2 {
font-size: 22px;
margin-bottom: 10px;
font-weight: 500;
line-height: 32px;
}
}
.hero-desc h2 span {
color: #788a92;
}
.hero-desc .hero-img {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: -30px;
background: url(https://okulyk.com/wp-content/themes/okulyk.com/dist/images/ad8fd470a9a8224e7a2b5ca52c9610a5.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position-y: 75%;
}
@media (max-width: 768px) {
.hero-desc .hero-img {
background: none;
align-items: end;
justify-content: space-between;
margin-top: 10px;
}
}
.hero-desc .hero-img span {
width: 25%;
font-size: 20px;
line-height: 30px;
display: block;
padding-top: 80px;
}
@media (max-width: 768px) {
.hero-desc .hero-img span {
width: 50%;
font-size: 18px;
line-height: 26px;
}
}
.hero-desc .hero-img img {
width: 60%;
margin-right: 30px;
}
@media (max-width: 768px) {
.hero-desc .hero-img img {
width: 48%;
margin-right: 0;
}
}
.why-block {
padding: 50px 80px;
padding-bottom: 80px;
background: #e3faff;
}
@media (max-width: 1140px) {
.why-block {
padding: 40px 0;
padding-top: 20px;
}
}
@media (max-width: 768px) {
.why-block {
padding: 0;
padding-top: 40px;
}
}
.why-block .container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.why-block .container .why-item {
background: #fff;
border-radius: 10px;
padding: 30px;
padding-right: 170px;
width: 48%;
background: #fff url(https://okulyk.com/wp-content/themes/okulyk.com/dist/images/b464ee9f51b0b6198d660f1dfb4d56fc.jpg);
background-repeat: no-repeat;
background-size: 45%;
background-position-x: 120%;
background-position-y: 50%;
}
.why-block .container .why-item:last-child {
background: #fff url(https://okulyk.com/wp-content/themes/okulyk.com/dist/images/ab45f59f69e69bd3d19c9361a4738f3b.jpg);
background-repeat: no-repeat;
background-size: 40%;
background-position-x: 115%;
background-position-y: 50%;
}
@media (max-width: 1140px) {
.why-block .container .why-item {
padding-right: 85px;
}
}
@media (max-width: 768px) {
.why-block .container .why-item {
padding: 15px;
padding-right: 45px;
margin-bottom: 40px;
}
}
.why-block .container .why-item h3 {
font-weight: 500;
font-size: 24px;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.why-block .container .why-item h3 {
font-size: 18px;
}
}
.why-block .container .why-item span {
color: #878d92;
font-size: 20px;
line-height: 30px;
}
@media (max-width: 768px) {
.why-block .container .why-item span {
font-size: 14px;
line-height: 18px;
}
}
.book-list-block {
background: #f4f5f6;
padding: 30px 0;
}
@media (max-width: 768px) {
.book-list-block {
padding: 15px 0;
padding-top: 10px;
}
}
.book-list-block h1 {
margin-bottom: 20px;
padding: 0 5px;
}
@media (max-width: 768px) {
.book-list-block h1 {
font-size: 22px;
margin-bottom: 10px;
font-weight: 500;
}
}
.book-list-block .book-list-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.book-list-block .book-list-wrapper .subject-list {
background: #fff;
width: 100%;
border-radius: 15px;
padding: 15px;
padding-bottom: 5px;
margin-bottom: 19px;
}
@media (max-width: 768px) {
.book-list-block .book-list-wrapper .subject-list {
border-radius: 10px;
}
}
.book-list-block .book-list-wrapper .subject-list a {
text-decoration: none;
background: #e3faff;
color: #269;
display: inline-block;
padding: 7px 10px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 5px;
}
.book-list-block .book-list-wrapper .subject-list a:hover {
background: #ccf3fd;
}
.book-list-block .book-list {
display: flex;
flex-wrap: wrap;
width: 66%;
height: 100%;
}
@media (max-width: 768px) {
.book-list-block .book-list {
width: 100%;
justify-content: space-between;
}
}
.book-list-block .book-list h3 {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 3px;
}
.book-list-block .book-list h3:first-child {
margin-top: 0;
}
.book-list-block .book-list .book {
width: 30.4%;
background: #fff;
padding: 15px;
border-radius: 15px;
margin-right: 21px;
margin-bottom: 20px;
text-decoration: none;
color: #000;
transition: 0.2s;
box-shadow: 1px 1px 5px 0px #e2e2e2;
}
.book-list-block .book-list .book:hover {
outline: 2px solid #54acec;
background: #e3faff;
}
@media (max-width: 768px) {
.book-list-block .book-list .book {
width: 48.5%;
margin-right: 0;
padding: 10px;
margin-bottom: 10px;
border-radius: 10px;
}
}
.book-list-block .book-list .book .cover {
height: 260px;
margin-bottom: 5px;
border-radius: 15px;
}
@media (max-width: 768px) {
.book-list-block .book-list .book .cover {
height: 220px;
border-radius: 10px;
}
}
.book-list-block .book-list .book .authors {
display: block;
margin-bottom: 5px;
}
@media (max-width: 768px) {
.book-list-block .book-list .book .authors {
font-size: 14px;
line-height: 18px;
margin-bottom: 0;
}
}
.book-list-block .book-list .book .subject,
.book-list-block .book-list .book .lang-year {
color: #878d92;
}
@media (max-width: 768px) {
.book-list-block .book-list .book .subject,
.book-list-block .book-list .book .lang-year {
font-size: 14px;
}
}
.sidebar {
width: 34%;
height: 100%;
background: #fff;
padding: 15px;
border-radius: 15px;
box-shadow: 1px 1px 5px 0px #e2e2e2;
}
@media (max-width: 768px) {
.sidebar {
width: 100%;
margin-top: 15px;
}
}
.sidebar .book-info {
margin-bottom: 40px;
}
@media (max-width: 768px) {
.sidebar .book-info {
margin-bottom: 0;
}
}
.sidebar .book-info img {
border-radius: 15px;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.sidebar .book-info img {
width: 48%;
float: left;
margin-right: 15px;
}
}
.sidebar .book-info p {
font-size: 18px;
color: #878d92;
font-size: 18px;
line-height: 24px;
display: block;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.sidebar .book-info p {
font-size: 16px;
line-height: 22px;
margin-bottom: 5px;
}
}
.sidebar .book-info p span {
color: #000;
}
.sidebar .book-info .download-link {
text-decoration: none;
background: #e3faff;
color: #269;
display: block;
padding: 7px 10px;
border-radius: 5px;
text-align: center;
margin-top: 20px;
font-size: 18px;
font-weight: 700;
}
@media (max-width: 768px) {
.sidebar .book-info .download-link {
clear: both;
margin-bottom: 30px;
padding: 20px;
}
}
.sidebar .book-info .download-link:hover {
background: #ccf3fd;
}
.sidebar h2 {
margin-bottom: 20px;
}
.sidebar ul {
list-style: none;
}
.sidebar ul li {
display: inline-block;
}
.sidebar ul li:last-child a {
margin-bottom: 0;
}
.sidebar ul li a {
text-decoration: none;
background: #e3faff;
color: #269;
display: inline-block;
padding: 7px 10px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 5px;
}
.sidebar ul li a:hover {
background: #ccf3fd;
}
.error-table {
margin-top: 20px;
background: #fff;
padding: 20px 0;
border-radius: 15px;
}
p.book-seo {
font-size: 16px;
line-height: 24px;
color: #878d92;
padding: 15px;
}
@media (max-width: 768px) {
p.book-seo {
padding: 10px;
}
}
#vk_comments iframe {
border-radius: 0;
}
.player {
height: 0;
}
.player-cover {
height: 80vh;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
overflow: hidden;
font-size: 10px;
position: relative;
background: #fff;
z-index: 99;
background: #222429;
}
.player-cover .book-player-cover {
width: 100%;
height: auto;
margin: 0 auto;
filter: blur(3px);
display: block;
}
.player-cover .read-online-cover {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
text-decoration: none;
background: #e3faff;
color: #269;
padding: 10px 25px;
border-radius: 5px;
text-align: center;
font-size: 23px;
font-weight: 700;
outline: 5px solid #ffac32;
}
.player-cover .read-online-cover:hover {
box-shadow: none;
background: #ccf3fd;
}
.player-show {
height: 80vh;
}
@media (max-width: 768px) {
.player-cover .read-online-cover {
padding: 10px 15px;
font-size: 24px;
}
}
.player-cover .spinner {
position: absolute;
width: 40%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.download-right {
text-align: center;
padding: 20px 20px;
padding-bottom: 0;
font-size: 22px;
}
.download-right p {
margin-bottom: 10px;
}
.download-right img {
width: 30%;
}
.download-right #timer {
font-size: 32px;
}
#example a {
text-decoration: none;
background: #e3faff;
color: #269;
display: inline-block;
padding: 20px;
width: 100%;
border-radius: 5px;
}
#example a:hover {
background: #ccf3fd;
}
.other-link {
color: #269;
}