/* font-family: "PTSerifRegular"; */

@font-face {
    font-family: "PTSerifRegular";
    src: url("../fonts/PTSerifRegular/PTSerifRegular.eot");
    src: url("../fonts/PTSerifRegular/PTSerifRegular.eot?#iefix")format("embedded-opentype"), url("../fonts/PTSerifRegular/PTSerifRegular.woff") format("woff"), url("../fonts/PTSerifRegular/PTSerifRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}


/* font-family: "PTSerifBoldItalic"; */

@font-face {
    font-family: "PTSerifBoldItalic";
    src: url("../fonts/PTSerifBoldItalic/PTSerifBoldItalic.eot");
    src: url("../fonts/PTSerifBoldItalic/PTSerifBoldItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/PTSerifBoldItalic/PTSerifBoldItalic.woff") format("woff"), url("../fonts/PTSerifBoldItalic/PTSerifBoldItalic.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}


/* font-family: "PTSerifItalic"; */

@font-face {
    font-family: "PTSerifItalic";
    src: url("../fonts/PTSerifItalic/PTSerifItalic.eot");
    src: url("../fonts/PTSerifItalic/PTSerifItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/PTSerifItalic/PTSerifItalic.woff") format("woff"), url("../fonts/PTSerifItalic/PTSerifItalic.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}


/* font-family: "PTSerifBold"; */

@font-face {
    font-family: "PTSerifBold";
    src: url("../fonts/PTSerifBold/PTSerifBold.eot");
    src: url("../fonts/PTSerifBold/PTSerifBold.eot?#iefix")format("embedded-opentype"), url("../fonts/PTSerifBold/PTSerifBold.woff") format("woff"), url("../fonts/PTSerifBold/PTSerifBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}


/* font-family: "PTSansRegular"; */

@font-face {
    font-family: "PTSansRegular";
    src: url("../fonts/PTSansRegular/PTSansRegular.eot");
    src: url("../fonts/PTSansRegular/PTSansRegular.eot?#iefix")format("embedded-opentype"), url("../fonts/PTSansRegular/PTSansRegular.woff") format("woff"), url("../fonts/PTSansRegular/PTSansRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}


/* font-family: "PTSansItalic"; */

@font-face {
    font-family: "PTSansItalic";
    src: url("../fonts/PTSansItalic/PTSansItalic.eot");
    src: url("../fonts/PTSansItalic/PTSansItalic.eot?#iefix")format("embedded-opentype"), url("../fonts/PTSansItalic/PTSansItalic.woff") format("woff"), url("../fonts/PTSansItalic/PTSansItalic.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}


/* font-family: "PTSansBold"; */

@font-face {
    font-family: "PTSansBold";
    src: url("../fonts/PTSansBold/PTSansBold.eot");
    src: url("../fonts/PTSansBold/PTSansBold.eot?#iefix")format("embedded-opentype"), url("../fonts/PTSansBold/PTSansBold.woff") format("woff"), url("../fonts/PTSansBold/PTSansBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'hortensiaregular';
    src: url('../fonts/Hortensia/hortensi-webfont.eot');
    src: url('../fonts/Hortensia/hortensi-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Hortensia/hortensi-webfont.woff2') format('woff2'),
         url('../fonts/Hortensia/hortensi-webfont.woff') format('woff'),
         url('../fonts/Hortensia/hortensi-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


html {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    min-width: 1200px;
    width: 100%;
}

.first-screen {
    background: url(../img/first-screen.jpg);
    background-position: center;
    background-size: cover;
    background-color: #1b1714;
    height: 421px;
    width: 100%;
    color: white;
    text-align: center;
    position: relative;
}

.first-screen div.ipad {
    background: url(../img/first-screen-ipad.png) no-repeat center bottom;
    height: 421px;
}

.black-filter {
    height: inherit;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.first-screen .container {
    padding-top: 25px;
}

.screen-bg {
    background: url(../img/screen-bg.jpg);
    height: 123px;
    width: 666px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
}

h1 {
    color: #ffffff;
    font: 400 80px "PTSerifRegular", Times, serif;
    margin: 0;
}

h2 {
    color: #000000;
    font: 400 32px "PTSerifRegular", Times, serif;
    text-align: center;
    margin: 0;
}

h3 {
    color: #ffffff;
    font: 400 22px "PTSansRegular", Arial, sans-serif;
    margin-bottom: 30px;
}

.first-screen h3 {
    font-size: 27px;
    margin-top: 0.5em;
}

.button {
    color: #ffffff;
    font: 700 16px / 28px "PTSansRegular", Arial, sans-serif;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 8px 28px;
    border-radius: 100px;
    text-transform: uppercase;
    text-decoration: none;
}

a.button {
    text-decoration: none;
}

.buttons .button {
    margin: 0 12px;
}

.outline.button {
    border: 2px solid #ffffff;
}

.first-screen .buttons {
    margin-top: 35px;
}

.primary.button {
    background-image: -moz-linear-gradient( 90deg, rgb(0, 120, 222) 0%, rgb(24, 103, 183) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(0, 120, 222) 0%, rgb(24, 103, 183) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(0, 120, 222) 0%, rgb(24, 103, 183) 100%);
    color: white;
    border: none;
    padding: 10px 30px;
}

.primary.button:hover,
.primary.button.waiting {
    background-image: -moz-linear-gradient( 90deg, rgb(0, 120, 222) 0%, rgb(0, 69, 144) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(0, 120, 222) 0%, rgb(0, 69, 144) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(0, 120, 222) 0%, rgb(0, 69, 144) 100%);
}

.outline.button:hover,
.outline.button.clicked {
    background: white;
    color: #1867b7;
}

.pen-img {
    background: url(../img/pen2.jpg);
    width: 742px;
    height: 79px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

.second-screen {
    padding: 40px 40px 20px 40px;
}

.second-screen p {
    width: 720px;
    margin: auto;
    color: #000000;
    font: 400 17px "PTSerifRegular", Times, serif;
    margin-bottom: 18px;
    text-align: center;
}

.bold {
    font: 22px "PTSerif", Times, serif;
}

.second-screen .bold {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 25px;
}

.bold-italic {
    font: italic 700 17px "PTSerifBoldItalic", Times, serif;
}

.third-screen {
    background-color: #eee;
    padding: 30px;
    border: 1px solid #eee;
}

.third-screen h2 {
    margin-bottom: 20px;
}

.features {
    text-align: center;
}

.features h5 {
    color: #000000;
    font: 400 19px "PTSerifRegular", Times, serif;
    margin: 0;
    margin-bottom: 5px
}

.features p {
    color: #616161;
    font: 400 16px "PTSansRegular", Arial, sans-serif;
    max-width: 185px;
    width: 100%;
    margin: auto;
}

.features .row div {
    margin-bottom: 40px;
}

.features img {
    margin-bottom: 12px;
}

.features.container .col-lg-12 {
    margin-bottom: 20px;
}

.fourth-section {
    padding: 30px 0;
    position: relative;
    height: 785px;
}

h5.mutted {
    color: #616161;
    font: 400 22px "PTSansRegular", Arial, sans-serif;
    text-align: center;
    margin: 0;
    margin-bottom: 45px;
}

.fifth-section h2 {
    text-align: left;
    margin-bottom: 10px;
}

.principles {
    position: absolute;
    right: 10px;
    top: 91px;
}

.principle {
    margin-bottom: 18px;
}

.principle div {
    width: 403px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
    color: #000000;
    font: 400 17px "PTSerifRegular", Times, serif;
}

.principle+h2 {
    width: 80%;
    min-width: 440px;
}

.img-mac {
    background: url(../img/mac.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 758px;
    width: 765px;
}

.fifth-section {
    position: relative;
    height: 758px;
}

h2.blue {
    color: #1867b7;
    margin-top: 30px;
}

.sixth-section {
    background-color: #eee;
    padding: 30px;
}

.plus {
    text-align: center;
}

.sixth-section h2 {
    margin-bottom: 48px;
}

.plus .num {
    border: 1px solid #1d6bb9;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    margin: auto;
    padding: 7px;
    color: #1867b7;
}

.plus {
    margin-bottom: 66px;
}

.about-us-section {
    padding: 30px;
    background: linear-gradient(0deg, #5695d6 0%, #53c3ff 100%);
}

.about-us-section div, .about-us-section h2 {
    color:white;
}

.about-us-section .photo {
    padding: 40px 0 30px;
    text-align: center;
}

.about-us-section .namesurname {
    font:23px "PTSerifRegular", Times, serif;
    text-align: left;
}

.about-us-section .about-person {
    font:15px "PTSansRegular", Times, serif;
    text-align: left;
    padding:10px 15px 15px;
    color:#d0f0ff;
    line-height:20px;
}

.about-person p {
    margin:4px 0;
    line-height:16px;
}

.about-us-section .namesurname-others {
    font:20px "PTSerifRegular", Times, serif;
    text-align: left;
    padding:20px 0 20px 99px;
    text-indent:-85px;
}

.about-us-section .cido {
    font:23px "PTSansRegular", Times, serif;
    text-align: left;
    padding-top:20px;
    text-align:center;
    color:white;
}

.cido a {
    color:white;
}

.about-us-section .more-text {
    padding-top:20px;
    text-align:center;
}

.about-us-section .more-text span {
    border-bottom:1px dashed white;
    cursor:pointer;
}

.about-us-section .main-text p {
    text-indent:30px;
    text-align:justify;
}

.about-us-section .main-text {
    margin-top:10px;
    overflow:hidden;
    color:white;
    font:17px/20px Georgia, Times, serif;
    background:rgba(0,0,0,0.4);
    border-radius:10px;
}

.price-section {
    background: linear-gradient(0deg, #68ffaa 0%, #c2ffdf 100%);
    padding:30px;
}

.price-section .advantages {
    padding:20px 0;
    font:120%/170% PTSerifRegular, Times, serif;
    color:black;
}


.main-text a {
    color:white;
}


.seventh-section {
    padding: 30px 0 0;
    background: linear-gradient(0deg, #0078de 0%, #1867b7 100%);
}

.plus p {
    color: #000000;
    font: 400 16px / 19.347px "PTSerifRegular", Times, serif;
}

.seventh-section h2 {
    color: #ffffff;
    margin-bottom: 40px;
}

.seventh-section img {
    margin-bottom: 5px;
}

.review {
    margin-top: 35px;
}

.review img {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    display: inline-block;
    vertical-align: top;
}

.review .text {
    display: inline-block;
    margin-left: 28px;
    vertical-align: top;
    color: #ffffff;
    max-width: 455px;
    width: 90%;
    font: 400 19px / 24px "PTSerifRegular", Times, serif;
    margin-bottom: 16px;
}

.review p {
    margin: 0;
    margin-bottom: 16px;
}

.white.button {
    background-image: -moz-linear-gradient( -90deg, rgb(255, 255, 255) 0%, rgb(165, 214, 255) 100%);
    background-image: -webkit-linear-gradient( -90deg, rgb(255, 255, 255) 0%, rgb(165, 214, 255) 100%);
    background-image: -ms-linear-gradient( -90deg, rgb(255, 255, 255) 0%, rgb(165, 214, 255) 100%);
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.3);
    color: #1867b7;
    width: 278px;
    height: 53px;
    text-align: center;
    padding: 13px;
    margin: auto;
    letter-spacing: 2px;
    margin: 40px auto 20px;
}

.mutted-info {
    color: #a5d2ff;
    color: #a5d2ff;
    font: 400 16px "PTSansRegular", Arial, sans-serif;
}

.mutted-info b {
    font-family: "PTSansBold", Arial, sans-serif;
}

.mutted-info div {
    margin-top: 3px;
}

footer {
    padding: 30px 40px 20px;
}

.reserved {
    float: right;
    padding: 30px 0 0;
    color: #616161;
    font: 400 16px "PTSansRegular", Arial, sans-serif;
}

footer .reserved,
footer img {
    display: inline-block;
    vertical-align: middle;
}

.right {
    float: right;
}

.addon-text {
    position: absolute;
    bottom: -30px;
    left: 55px;
}

.addon-text h6 {
    color: #000000;
    font: 400 16px "PTSerifRegular", Times, serif;
    margin: 0;
}

.addon-text p {
    color: #616161;
    font: 400 13px "PTSansRegular", Arial, sans-serif;
    margin: 0;
}

div.film_roll_children {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div.film-roll-children img {
    position: absolute;
    width: 90%;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
}

.film_roll_pager {
    position: relative;
    top: -20px;
}

img.carousel-img {
    width: 85% !important;
    max-width: 785px !important;
    margin: 30px 55px;
    -webkit-box-shadow: 0px 0px 35px -4px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: 0px 0px 35px -4px rgba(0, 0, 0, 0.21);
    box-shadow: 0px 0px 35px -4px rgba(0, 0, 0, 0.21);
    border-radius: 5px;
}

#fill_roll {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.film_roll_prev,
.film_roll_next {
    color: #c4c4c4;
    font-weight: bold;
}

#film_roll {
    position: relative;
}

.film_roll_pager {
    position: absolute !important;
    top: -12px !important;
    left: 0 !important;
    right: 0 !important;
    text-decoration: none;
}

.filter-bg {
    position: absolute;
    top: 0;
    height: 555px;
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    cursor: pointer;
}

.film_roll_child.active .filter-bg {
    opacity: 0;
}

.fourth-section h2 {
    margin-bottom: 8px;
}

#film_roll img {
    cursor: pointer;
}

.video {
    position: absolute;
    bottom: 0;
    top: 0;
    height: 255px;
    width: 588px;
    margin: auto;
    left: 0px;
}

.video {
    text-align: center;
}

.video div {
    width: 230px;
    margin: auto;
}

.video svg {
    opacity: 0.9;
}

.video div:hover svg {
    opacity: 1;
}

.video div:hover h3,
.video div:hover p {
    color: #fff;
}

.video h3 {
    color: #ddd;
    font: 400 32px "PTSerifRegular", Times, serif;
    margin: 0;
    margin-top: 10px;
}

.video p {
    color: #ddd;
    font: 400 17px "PTSansRegular", Arial, sans-serif;
    margin: 0;
}

@media (min-width: 1100px) {
    .col-md-offset-6 {
        margin-left: 57%;
    }
}

@media (min-width: 1200px) {
    .col-md-offset-6 {
        margin-left: 58%;
    }
    .first-screen {
        background-position: center center;
        height: 421px;
    }
}

@media (max-width: 1200px) {
    .right {
        float: none;
    }
    .review {
        margin-bottom: 30px;
    }
    .principles {
        max-width: 466px;
        width: 100%;
    }
}

@media (min-width: 1450px) {
    .col-md-offset-6 {
        margin-left: 50%;
    }
}

@media (min-width: 1500px) {
    .col-md-offset-6 {
        margin-left: 40%;
    }
}

@media (min-width: 1600px) {
    .principles {
        right: 65px;
    }
}

.container {
    width: 1140px;
}


/*.times_onload { font-family: Times, serif; visibility:hidden;}
.arial_onload { font-family: Arial, sans-serif; visibility:hidden;}

.first-screen h1.times_onload { font-size:88px; padding-top:2px; margin-left:-6px; }


.first-screen h3.arial_onload { font-size:25px; padding-top:8px;}

.first-screen .buttons.arial_onload { padding-top:1px;}
.first-screen .button.arial_onload { font-size:14px; padding:10px 28px;}
.first-screen .button.primary.arial_onload { padding:12px 28px;}

.second-screen h2.times_onload {padding-top:2px; font-size:35px;}

.second-screen p.times_onload, .second-screen span.bold.times_onload, .second-screen span.bold-italic.times_onload { font-family: Times, serif; }

.second-screen p.times_onload {font-size:19px;padding-top:1px;}
.second-screen span.bold-italic.times_onload {font-size:20px;}

.third-screen .times_onload { font-size:35px;padding-top:2px;padding-bottom:0px;}*/

.overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10;
}

.popup {
    display: none;
    position: fixed;
    width: 426px;
    min-height: 360px;
    top: 45%;
    left: 50%;
    margin-left: -215px;
    margin-top: -210px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    z-index: 11;
}

.popup .close {
    width: 31px;
    height: 31px;
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    margin-top: -15px;
    margin-right: -15px;
    background: url('../img/popup-close.png') no-repeat;
    cursor: pointer;
}

.popup h2 {
    font: 32px "PTSerifBold";
    margin-top: 20px;
    margin-bottom: 22px;
}

.popup label,
.popup input,
.popup .error,
.popup .hint {
    display: block;
    font: 18px "PTSansRegular";
    margin-left: 34px;
    padding: 0 12px;
}

.popup label {
    margin-top: 15px;
}

.popup input {
    margin-top: 10px;
    padding: 3px 10px;
    width: 355px;
}

.popup .buttons {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 33px;
}

.popup .links {
    margin-bottom: 20px;
}

.popup a {
    margin-left: 34px;
    font: bold 15px "PTSansRegular";
}

a {
    text-decoration: underline;
}

a.button {
    text-decoration: none;
}

.popup a.reg {
    margin-left: 75px;
}

.popup .error {
    display: none;
    margin: 10px 0 -10px;
    color: red;
    text-align: center;
}

.popup .error a {
    margin-left: 0;
}

.popup.enter h2 {
    margin-bottom: 1px;
}

.popup.enter .min {
    font: 21px "PTSerif";
    margin-top: 1px;
    margin-bottom: 17px;
}

.popup.restore {
    display: none;
    min-height: 320px;
}

.popup.restore .shadow {
    color: #888;
    margin-bottom: 10px;
}

.popup.restore .min {
    font-size: 27px;
    margin-top: 10px;
}

.popup.restore .hint {
    display: none;
    margin-left: 30px;
    margin-bottom: 30px;
    padding: 0 10px;
}

.login_now {
    font-size: 22px;
}

.login_now a {
    margin-left: 40px;
    font-size: 20px;
    color: white;
}

.seventh-section img {
    cursor: pointer;
    margin-bottom: 5px;
}

.film_roll_prev,
.film_roll_next {
    margin: -270px 0 0 0;
}

.film_roll_prev {
    padding: 230px 150px 230px 0;
    left: 0px;
}

.film_roll_next {
    padding: 230px 0px 230px 150px;
    right: 0px;
}

.film_roll_prev:hover,
.film_roll_next:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

#video_about {
    font-size:120%;
    cursor: p1ointer;
    color:white;
    text-align:left;
    padding-top:30px;
}

#video_about a {
    color:white;
}

a.question {
    display: inline-block;
    margin-right: 60px;
}

.teacher {
    margin-right:50px !important;
}


.first-screen div.whiteboard {
    background: url(../img/teacher-screen-whiteboard.png) no-repeat center bottom;
}
.first-screen div.whiteboard h2 {
    font: 57px Hortensia;
    color: #007eff;
    margin-top:76px;
}
.forteacher .first-screen, .first-screen div.whiteboard {
    height: 345px;
}
.forteacher .first-screen h1 a {
    text-decoration:none; 
    color:white;
}

.forteacher .second-screen p {
    line-height: 2;
}
.big {
    font: 24px "PTSerif", Times, serif;
}

.forteacher .third-screen {
    background:linear-gradient(0deg, #f2f2f2 0%, #eee 100%);
    border-bottom:1px dashed #bbb;
}
.forteacher .third-screen p {
    width:720px;
    margin:auto;
    font: 400 16px "PTSansRegular", Arial, sans-serif;
}
.forteacher .third-screen h5 {
    width:720px;
    margin:10px auto 35px;
    margin-top:10px;
    font: 400 16px "PTSansRegular", Arial, sans-serif;
    color: gray;
}

.forteacher .fourth-section {
    background:linear-gradient(0deg, #eee 0%, #f2f2f2 100%);
}
.forteacher .fourth-section {
    text-align:center;
    height:auto;
}
.forteacher .fourth-section p {
    margin-top:30px;
}
.forteacher .fourth-section a span {
    margin-left:20px;
    padding-right:40px;
}

.forteacher .fifth-section {
    height: auto;
    padding:25px 0 60px;
}
.forteacher .fifth-section h2 {
    padding:20px;
}
.forteacher .fifth-section h2 {
    text-align: center;
}
.forteacher .fifth-section p {
    width:740px;
    margin-left:auto;
    margin-right:auto;
}
.forteacher .fifth-section ul {
    width:720px;
    margin:auto;
}
.forteacher .fifth-section li {
    margin-bottom: 15px;
}

.forteacher .sixth-section h2 {
    margin-bottom: 30px;
}
.forteacher .sixth-section ul {
    width:720px;
    margin:auto;
}
.forteacher .sixth-section p {
    text-align:center;
    margin-top: 20px;
    margin-bottom: 30px;
}
.forteacher .sixth-section a span {
    margin-left:20px;
    padding-right:40px;
}
.forteacher .sixth-section table {
    border: 1px solid black;
    width:690px;
    font-size: 20px;
    font-family: PTSerifRegular;
}
.forteacher .sixth-section table th {
    padding:5px 10px;
    font-weight:normal;
}
.forteacher .sixth-section table td {
    padding:5px 10px;
    text-align:center;
    border-left: 1px solid #aaa;

}


.forteacher .seventh-section {
    background:none !important;
}
.forteacher .seventh-section p {
    width:720px;
    margin:20px auto 30px;
    text-align:center;
    font: 400 17px "PTSerifRegular", Times, serif;
}
.forteacher .seventh-section .links {
    margin-top: 50px;
    text-align:center;
}

.forteacher li {
    list-style-type: disc;
}

.forteacher .blue-section {
    background:linear-gradient(0deg, #0078de 0%, #1867b7 100%);
    color:white;
    padding:30px;
}

.rub {
display: inline-block;
border-bottom: 1px solid;
line-height: 0px;
width: 8px;
height: 4px;
font-size: 20px;
box-sizing: border-box;
}

.forteacher footer {
    padding-top:10px;
}