@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,cyrillic,cyrillic-ext);

html{width: 100%; min-width: 1000px; min-height: 768px; overflow-x: hidden;}
html *{margin: 0; padding: 0}
body{min-width: 1000px; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; color: #080f1d; background: #ececec}
h1, .h1{font-size: 32px; font-weight: 300}
h2, .h2{font-size: 22px; font-weight: 300; margin: 30px 0 10px 0}
h3, .h3{font-size: 24px; font-weight: 300}
h4, .h4{font-size: 18px; font-weight: 300}
h5, .h5{font-size: 12px; font-weight: 300}
h6, .h6{font-size: 10px; font-weight: 300}
a{text-decoration: none; outline: none}
p{font-size: 16px; font-weight: normal}
ul{list-style: none; padding: 0; margin: 0}

#body{min-height: calc(100vh - 251px)}
.wrap{width: 1000px; margin: 0 auto; padding: 0; clear: both; float: none}
.light{font-weight: 100}
.clear{clear: both; float: none; display: block}
.right{float: right}
.left{float: left}
.white{color: white}
.black{color: #080f1d}
.inline{display: inline-block}
.solid{border-bottom: 1px solid}
.dashed{border-bottom: 1px dashed}
.block{display: block!important;}
.super{vertical-align: super; font-size: 12px}
.upper{text-transform: uppercase}
.vtop{vertical-align: top}
.bold, b{font-weight: 600}
.no_margin{margin: 0!important;}
.no_padding{padding: 0!important;}
.gray{ color: #909090 }
.text-center{ text-align: center }
.text-right{ text-align: right }
.text-left{ text-align: left }

.space10{height: 10px; display: block; float: none; clear: both}
.space20{height: 20px; display: block; float: none; clear: both}
.space30{height: 30px; display: block; float: none; clear: both}
.space50{height: 50px; display: block; float: none; clear: both}

#fade{ display: none; position: fixed; width: 100vw; height: 100vh; background: rgba(0,0,0,0.45); z-index: 50 }

.modal{
    display: none; position: fixed;
    z-index: 100;
    background: white;
    border: 1px solid #909090;
    padding: 20px; text-align: center;
    margin: auto;
    width: 400px; border-radius: 5px;
    left: 0; right: 0; top: 15vh;

}
.modal input{
    outline: none;
    padding: 6px 10px;
    font-size: 14px;
    margin: 10px 0; border-radius: 5px;
    border: 1px solid #909090;
    width: 100%; box-sizing: border-box;
}
.modal .btn-rounded{ border-radius: 5px }
.modal p { line-height: 26px }
.modal p b{ color: #15bdf4; font-family: "Open Sans" }

p.title{
    color: #15bdf4; font-family: "Open Sans";
    font-size: 20pt; text-align: center; display: inline-block;
    height: 58px; position: relative; line-height: 58px; padding: 0 30px;
    margin: 20px auto 10px;
}
p.title:before{
    position: absolute; left: 0;  content: ''; width: 16px; height: 58px;
    background: url("../img/left_bracket.png");
}
p.title:after{
    position: absolute; right: 0;  content: ''; width: 16px; height: 58px;
    background: url("../img/right_bracket.png");
}

ul.marked_ul{ margin: 30px 0; position: relative }
ul.marked_ul li{ padding-left: 40px;  position: relative;  height: 35px; }
ul.marked_ul li:before{
    position: absolute; left: 10px; top: 3px;
    content: ''; width: 15px; height: 15px;  background: #15bdf4;
}

.btn{ display: inline-block; margin: 20px }
.btn-rounded{
    border: 1px solid #15bdf4; color: #15bdf4;  border-radius: 30px;
    padding: 10px 50px;  cursor: pointer;
}
.btn-rounded:hover{ color: #ef1672; border-color: #ef1672; }
.btn-fill{ background: #15bdf4; color: white }
.btn-fill:hover{ background: #ef1672; color: white }

#head { background: #555555; margin: 0 0 30px 0 }

#home_head{ height: 435px; width: 100%;  background: url("../img/head.jpg") center no-repeat; }
#home_head h1{ color: white; text-align: center; margin-top: 60px; font-size: 30pt }
#home_head.course_head { height: 380px }
#home_head.course_head h1{ font-size: 24pt }
#home_head h2{ color: white; text-align: center; margin: 20px auto 0; font-size: 16pt; width: 620px; }
#home_head h1, #home_head h2{ text-shadow: 2px 2px 2px rgba(0,0,0,0.5) }

#menu { height: 60px; text-align: center; display: table; border-spacing: 10px 0; margin: 0 auto }
#menu a{
    display: table-cell; background: #15bdf4;  color: white; font-weight: 400;
    width: 140px; height: 60px; vertical-align: middle;
}
#menu a:hover{ background-color: #ef1672}
#menu a.logo{ background: url("../img/logo.png") center no-repeat; background-size: 40px; width: 60px }
#menu a.home{
    width: 60px;
    background-image: url("../img/home.svg");  background-position: center;
    background-repeat: no-repeat;  background-size: 20px;
}

#course h2{ margin: 50px 0 15px 0 }
#course_btn{
    display: block; background-color: #15bdf4;
    background-image: url("../img/play-button.svg");
    background-position: 22px center;
    background-repeat: no-repeat;
    background-size: 38px; width: 615px; margin: 110px auto 0;
    padding-left: 80px; height: 60px;
    box-sizing: border-box; color: white; cursor: pointer;
    font-size: 20pt; font-weight: 300; line-height: 60px;
}
#course_btn:hover{ background-color: #ef1672}

#course_video_btn{
    display: block; background-color: #15bdf4;
    background-image: url("../img/play-button.svg");
    background-position: 22px center;
    background-repeat: no-repeat;
    background-size: 38px; width: 385px;
    margin: 60px auto 0;
    padding-left: 80px; height: 60px;
    box-sizing: border-box; color: white; cursor: pointer;
    font-size: 20pt; font-weight: 300; line-height: 60px;
}
#course_video_btn:hover{ background-color: #ef1672}

#lessons_preview{ margin: 80px 0 0 0 }
#toggle_btn { margin: 0 0 20px 0 }
#toggle_btn h3{ display: inline-block; margin: 0 120px 0 0; font-weight: 300; font-size: 18pt; cursor: pointer; color: #909090 }
#toggle_btn h3.active,
#toggle_btn h3:hover{ border-bottom: 2px solid #15bdf4; color: #080f1d }

#lessons_container{}
#lessons_container a{
    font-size: 11pt;  display: inline-block;  width: 300px; height: 200px;
    background-repeat: no-repeat;  background-position: bottom center;
    margin: 30px 30px 0 0; font-weight: 500;  color: #080f1d;
}
#lessons_container a span{ color: #909090; font-weight: 300 }
#lessons_container a:hover{ color: #15bdf4 }

#gray_bg_text{
    display: block;
    color: rgba(0,0,0,0.07); position: relative; bottom: 60px; left: 190px;
    font-family: "Open Sans Extrabold"; font-size: 42pt;
}
#gray_bg_text:after, #gray_bg_text:before{content: none}

#bottom{ background: #555; padding: 30px 0; color: white }
#bottom table{ width: 100% }
#bottom table td{ vertical-align: top }

.UUrok{ margin: 50px 0 0 0 }
.UUrok .UPic{ display: inline-block; }
.UUrok .UDescr{ display: inline-block; width: 500px; vertical-align: top; padding: 0 0 0 20px}
.UUrok .UDescr .UTitle a{ font-size: 16pt; font-weight: 400; color: #0d52ab }
.UUrok .UDescr .UTitle a:hover{ color: #ef1672 }
.UUrok .UDescr .UText{ margin: 10px 0 0 0}
.UUrok .UDescr .UText p{ font-size: 12pt; font-weight: 400}
.UUrok .UDescr .UBut{ background: #15bdf4; color: white; outline: none; float: right; margin: 30px 0 0 0 }
.UUrok .UDescr .UBut:hover{ background: #ef1672; color: white }

#mini_lessons{ margin: 30px 0 }
.MiniLes{
    width: 900px;  height: 60px;
    margin-top: 10px;  margin-bottom: 10px;
    padding-top: 10px;  padding-left: 30px;
    -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #efefef), color-stop(1, #e9e9e9) );
    background: -moz-linear-gradient( center top, #efefef 5%, #e9e9e9 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
    background-color: #f9f9f9;
    -moz-border-radius: 6px;  -webkit-border-radius: 6px;  border-radius: 6px;
    border: 1px solid #dcdcdc;  display: inline-block;
}
.MiniLes a{ font-size: 16pt; font-weight: 400; color: #0d52ab }
.MiniLes a:hover{ color: #ef1672 }

#lesson h1 + img,#lesson .h1 + img{ margin: 30px 0 0 0 }
#lesson h2{ margin: 30px 0 0 0; font-size: 20px; font-weight: 500; }
#lesson h3{ margin: 20px 0 0 0 }
#lesson ul li{ line-height: 28px }
.main_les {
    font-size: 17px;
    font-weight: 400;
    color: #333;
    margin-top: 15px;
    line-height: 26px;
}
.main_les img { margin: 0 15px 0 0 }
.KursBut{}
.KursBut{ background: #15bdf4; color: white; outline: none; margin: 10px 20px 20px 0 }
.KursBut:hover{ background: #ef1672; color: white }

.price{ margin: 20px 0 0 0; text-align: center }
.price p:first-child{ font-size: 24px; display: inline-block }
.price p:first-child b{ color: #15bdf4; margin: 0 8px; font-size: 30px }
.price p:first-child span{ color: #909090; font-size: 14px }
.price p:nth-child(2){
    margin: 5px 0 5px 25px; color: #ef1672;
    font-family: "Open Sans Semibold"; text-transform: uppercase;
    font-size: 22px; display: inline-block;
}
.price p:nth-child(2) b{ font-size: 34px }


#course-promo{ padding: 30px 0 }
#course-promo .h1{  }
#course-promo .h2{ margin: 30px 0 10px 0; padding: 15px 30px; color: white; background: #15bdf4; font-size: 14pt }

#new_course iframe{margin: 30px 0}

.video{cursor: pointer; display: inline-block; position: relative}
.video a.btn{
    display: block; position: absolute;
    background: #15bdf4; color: white;
    padding: 10px 20px;
    right: 0;
}
.video:hover a.btn{background: #ef1672}

.adsense_auto{ width: 100%; height: auto; margin: 25px 0}
.adsense_720{ width: 720px; min-height: 90px; margin: 25px 0}
.text-center .adsense_720{ margin: 25px auto}
.adsense_336{ width: 336px; margin: 25px 25px 25px 0; float: left }
.adsense_600{ width: 300px; height: 600px; float: left }

.get_adv{ width: 800px; height: 100px; line-height: 100px; text-align: center; background: #dedede; border: 1px solid #ccc; display: block; margin: 50px auto; color: #7e959e }
.kurs{ display: block; margin-bottom: 30px }

.kurs_btn{
    display: block;
    background-color: #15bdf4;
    background-image: url(../img/play-button.svg);
    background-position: 22px center;
    background-repeat: no-repeat;
    background-size: 38px;
    width: 315px;
    padding-left: 80px;
    height: 60px;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    font-size: 20pt;
    font-weight: 300;
    line-height: 60px;
}