@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');

#log{
	position: absolute;
	top: 0;
    left: 0;
    z-index: 100;
	padding: 5px;
	background-color: #000;
	color: #0F0;
}

html{
	overflow-y: scroll;
	overflow-x: hidden;
}
body{
	font-family: 'Roboto', sans-serif;
}
.bg-1{
	background-color: #ECECE4;
}
.container{
	/*border: 1px solid red;*/
}
.left{
	float: left;
}
.right{
	float: right;
}
header{
	background-color: #1F2021;
}
#bar-1{
	height: 80px;
	background-color: #FFCC00;
	border-top: 5px solid #CCA300;
}
#bar-2{
	height: 340px;
	display: none;
	background-color: #1F1F20;
	border-top: 20px solid #000;
}
#bar-3{
	height: 340px;
	display: none;
	background-color: #FFCC00;
	border-top: 20px solid #CCA300;
}
#contact{
	/*height: 678px;*/
	background-color: #1F1F20;
}
footer{
	height: 50px;
	background-color: #000;
	text-align: center;
	line-height: 50px;
	font-size: 12px;
	color: #BFBFBF;
}
.screenshots{
	display: none;
}
h1{
	margin: 40px 0;
	padding-left: 10px;
	border-bottom: 5px solid #FFCC00;
	line-height: 50px;
	font-size: 24px;
	color: #1F2021;
}
h2{
	display: inline-block;
	margin-top: 40px;
	padding-left: 56px;
	padding-right: 5px;
	border-bottom: 3px solid #303133;
	line-height: 50px;
	font-size: 26px;
	color: #1F1F20;
}
#contact h1{
	color: #FFF;
}
h1.img{
	margin: 65px 0 40px 0;
}
h1 img{
	float: right;
	margin-top: -25px;
}
p{
	margin-bottom: 20px;
	font-size: 16px;
	color: #1E1F1F;
}
strong{
	display: inline-block;
	margin-bottom: 20px;
	font-weight: 500;
	font-size: 17px;
	color: #1E1F1F;
}
a.btn-1, a.btn-2, a.btn-3{
	display: inline-block;
	padding: 0 29px;
	background-color: #1F2021;
	line-height: 40px;
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	color: #FFF;
}
a.btn-2{
	background-color: #FFCC00;
	color: #1F1F20;
}
a.btn-3{
	background-color: #FFF;
	color: #1E2023;
}
input[type=text], textarea, select{
	width: 100%;
	height: 50px;
	padding: 0 15px;
	border: 0;
	font-style: italic;
	font-size: 14px;
	color: #1E1F22;
}
select{
	width: auto;
	padding: 0 15px;
}
textarea{
	height: 158px;
	padding: 15px;
	resize: none;
}
ul li{
	padding: 5px 0;
	font-size: 15px;
}
ul li a{
	border-bottom: 1px solid #1F2021;
	text-decoration: none;
	color: #1F2021;
}
ul li a:hover{
	border-bottom: 2px solid #FFCC00;
	text-decoration: none;
	color: #1F2021;
}
@media (min-width: 992px) {
	#bar-1{
		height: 100px;
	}
	#bar-2{
		display: block;
	}
	#bar-3{
		display: block;
	}
	.screenshots{
		display: block;
	}
	h1{
		display: inline-block;
		margin-top: 90px;
		margin-bottom: 80px;
		padding-left: 56px;
		padding-right: 5px;
		font-size: 30px;
	}
	h1 img{
		margin-left: 200px;
	}
	h1.img{
		margin: 105px 0 80px 0;
	}
	footer{
		text-align: left;
	}
}

header .top-aux{
	height: 50px;
	background-color: #000;
}
header .top{
	width: 100%;
	height: 50px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-color: rgba(0,0,0,0.7);
}
header .top .container{
	height: 50px;
}
header .top .container .menu-btn{
	float: right;
	margin-top: 13px;
}
header .top .container p{
	float: left;
	line-height: 50px;
	font-weight: 500;
	font-style: italic;
	font-size: 14px;
	color: #FFCC00;
}
header .top .container .social{
	display: none;
}
header .top nav{
	display: none;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
header .top nav .nav-top{
	height: 50px;
	background-color: #000;
}
header .top nav .nav-top img{
	margin-top: 15px;
	margin-left: 50px;
}
header .top nav .menu{
	background-color: rgba(24,26,28,0.9);
}
header .top nav .menu div{
	border-top: 1px solid #303233;
	line-height: 40px;
}
header .top nav .menu div a{
	display: block;
	padding-left: 50px;
	text-decoration: none;
	font-weight: 500;
	font-size: 16px;
	color: #FFF;
}
header .top nav .menu div a:hover{
	background-color: #FFCC00;
	color: #000;
}
header .content .container{
	height: 320px;
	background: url(../img/header-bg.png) no-repeat center bottom;
}
header .content .container .logo{
	width: 198px;
	display: block;
	margin: 44px auto 0 auto;
}
header .content .container .logo-md, header .content .container .logo-lg{
	display: none;
}
@media (min-width: 992px) {
	header .top-aux{
		display: none;
	}
	header .top{
		position: relative;
	}
	header .top .container .menu-btn{
		display: none;
	}
	header .top .container .social{
		width: 29px;
		height: 29px;
		float: right;
		display: block;
		margin-top: 12px;
	}
	header .top .container .social.youtube{
		width: 42px;
		background: url(../img/social-youtube.png);
	}
	header .top .container .social.facebook{
		margin-left: 9px;
		background: url(../img/social-facebook.png);
	}
	header .top nav{
		width: auto;
		height: 77px;
		display: block;
		position: relative;
		padding-top: 33px;
	}
	/*
	header .top nav.fixed{
		height: 44px;
		padding-top: 0;
		background-color: rgba(0,0,0,0.7);
	}
	*/
	header .top nav .nav-top{
		display: none;
	}
	header .top nav .wrapper{
		width: 970px;
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
	}
	header .top nav .menu{
		float: right;
		background-color: transparent;
	}
	header .top nav .menu div{
		display: inline-block;
		border: 0;
		line-height: 44px;
	}
	header .top nav .menu div a{
		width: 90px;
		display: block;
		padding: 0;
		text-align: center;
	}
	header .top nav .menu div a:hover{
		background-color: #FFCC00;
		color: #000;
	}
	header .content .container{
		height: 400px;
		background: url(../img/header-md-bg.png) no-repeat right bottom;
	}
	header .content .container .logo{
		display: none;
	}
	header .content .container .logo-md{
		width: 349px;
		display: block;
		margin-top: 165px;
	}
}
@media (min-width: 1200px) {
	header .top nav .wrapper{
		width: 1170px;
	}
	header .content .container{
		background: url(../img/header-lg-bg.png) no-repeat right bottom;
	}
	header .content .container .logo-md{
		display: none;
	}
	header .content .container .logo-lg{
		width: 391px;
		display: block;
		margin-top: 165px;
	}
}

#bar-1{
	padding-top: 16px;
	text-align: center;
}
@media (min-width: 992px) {
	#bar-1{
		padding-top: 25px;
	}
}

.call-to-action{
	margin: 45px 0 66px 0;
	padding: 0 40px;
}
.call-to-action .action{
	width: 145px;
	height: 125px;
	position: relative;
	margin: auto;
	text-align: center;
}
.call-to-action .action.some-teach{
	margin: 0 auto 45px auto;
}
.call-to-action .action.some-learn{
}
.call-to-action .action img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	margin: auto;
}
.call-to-action .action img.md{
	display: none;
}
.call-to-action .action a{
	width: 145px;
	height: 85px;
	display: block;
	position: absolute;
	top: 40px;
	z-index: 1;
	background-color: #FFCC00;
	line-height: 105px;
	text-decoration: none;
	font-weight: 300;
	font-size: 26px;
	color: #1F1F1F;
}
@media (min-width: 450px) {
	.call-to-action .action{
		width: 145px;
		height: 125px;
		position: relative;
		float: left;
		text-align: center;
	}
	.call-to-action .action.some-teach{
		float: left;
	}
	.call-to-action .action.some-learn{
		float: right;
	}
}
@media (min-width: 992px) {
	.call-to-action{
		margin: 70px 0 120px 0;
		padding: 0;
	}
	.call-to-action .action{
		width: 430px;
		height: 157px;
	}
	.call-to-action .action img{
		display: none;
		left: 65px;
		margin: 0
	}
	.call-to-action .action img.md{
		display: block;
	}
	.call-to-action .action a{
		width: 430px;
		height: 80px;
		top: 77px;
		padding-right: 30px;
		line-height: 80px;
		text-align: right;
		font-size: 30px;
	}
}


#bar-2 .container{
	position: relative;
}
#bar-2 .prev, #bar-2 .next{
	width: 62px;
	height: 86px;
	display: block;
	position: absolute;
	top: 117px;
	left: 15px;
	background: url(../img/prev.png);
}
#bar-2 .next{
	left: auto;
	right: 15px;
	background: url(../img/next.png);
}
#bar-2 .content{
	width: 767px;
	margin: 42px auto 0 auto;
}
#bar-2 .content .photo{
	width: 206px;
	height: 206px;
	float: left;
	position: relative;
}
#bar-2 .content .photo .border{
	width: 206px;
	height: 206px;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 103px;
	border: 20px solid #363637;
	z-index: 2;
}
#bar-2 .content .photo img{
	width: 200px;
	height: 200px;
	position: absolute;
	top: 3px;
	left: 3px;
	border-radius: 103px;
	z-index: 1;
}
#bar-2 .content p{
	width: 535px;
	float: right;
	margin-top: 10px;
	font-style: italic;
	font-weight: 300;
	font-size: 30px;
	color: #FFCC00;
}
#bar-2 .content p.person{
	width: auto;
	margin-top: 0;
	font-style: normal;
	font-weight: 500;
	font-size: 25px;
	color: #FFF;
}
#bar-2 .content p.person span{
	display: block;
	padding-left: 13px;
	font-style: italic;
	font-weight: 300;
	font-size: 15px;
}
@media (min-width: 1200px) {
	#bar-2 .content{
		width: 850px;
	}
}


.screenshot-cont{
	height: 329px;
	position: relative;
	margin: 63px 0 110px 0;
}
.screenshot{
	width: 300px;
	height: 329px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #FFF;
}
.screenshot-cont.dark .screenshot{
	background-color: #ECECE4;
}
.screenshot.dos{
	right: 0;
	margin: auto;
}
.screenshot.tres{
	left: auto;
	right: 0
}
.screenshot img{
	width: 100%;
	border: 1px solid #CBCBCB;
}
.screenshot p{
	padding: 20px 27px;
	font-size: 14px;
	color: #1E1F20;
}
@media (min-width: 1200px) {
	.screenshot-cont{
		height: 374px;
	}
	.screenshot{
		width: 360px;
		height: 374px;
	}
}


.news-item{
	padding: 30px;
	margin-bottom: 37px;
	background-color: #FFF;
	text-align: center;
}
.news-item img{
	width: 100%;
	border: 1px solid #C8CBCC;
}
.news-item h2{
	display: inline-block;
	margin: 20px 0;
	padding: 0;
	border-bottom: 0;
	line-height: 20px;
	text-align: left;
	font-size: 17px;
	color: #1E1F1F;
}
.news-item p{
	display: none;
}
.news-item .cont-btn{
	margin: 0 -30px;
	padding-top: 30px;
	border-top: 1px solid #E5E5E5;
}
.news-item .cont-btn .source{
	display: none;
}
@media (min-width: 970px) {
	.news-item{
		padding: 30px 55px 20px 55px;
		text-align: left;
	}
	.news-item img{
		width: 180px;
		float: left;
		margin-right: 40px;
	}
	.news-item h2{
		display: block;
		margin: 0 0 20px 0;
	}
	.news-item p{
		display: inline;
		font-size: 15px;
		color: #1E1F1F;
	}
	.news-item .cont-btn{
		margin: 18px -55px 0 -55px;
		padding: 20px 50px 0 50px;
		text-align: right;
	}
	.news-item .cont-btn .source{
		display: block;
		float: left;
		text-align: left;
		font-style: italic;
		font-size: 13px;
		color: #8E8F8F;
	}
}


#bar-3 .container{
	position: relative;
}
#bar-3 .prev, #bar-3 .next{
	width: 62px;
	height: 86px;
	display: block;
	position: absolute;
	top: 117px;
	left: 15px;
	background: url(../img/prev-2.png);
}
#bar-3 .next{
	left: auto;
	right: 15px;
	background: url(../img/next-2.png);
}
#bar-3 .content{
	width: 767px;
	margin: 42px auto 0 auto;
	background: url(../img/ico-comment.png) no-repeat center right;
}
#bar-3 .content p{
	width: 510px;
	float: left;
	margin-top: 28px;
	font-style: italic;
	font-weight: 300;
	font-size: 30px;
	color: #1F1F1F;
}
#bar-3 .content p.person{
	width: auto;
	float: right;
	margin-top: -15px;
	padding-right: 275px;
	font-style: normal;
	font-weight: 500;
	font-size: 25px;
	color: #1F1F1F;
}
@media (min-width: 1200px) {
	#bar-3 .content{
		width: 850px;
	}
	#bar-3 .content p.person{
		padding-right: 358px;
	}
}


.search{
	padding: 30px;
	margin-bottom: 40px;
	background-color: #FFCC00;
}
.search input[type=text]{
	height: 40px;
	background: #FFF url(../img/ico-search.png) no-repeat center right 15px;
}
.search .more{
	display: none;
}
.course-item{
	margin-bottom: 43px;
	background-color: #EBEBE4;
	text-align: center;
}
.course-item img{
	width: 100%;
	border: 1px solid #C8CBCC;
}
.course-item h2{
	display: inline-block;
	margin: 20px;
	padding: 0;
	border-bottom: 0;
	line-height: 20px;
	text-align: left;
	font-size: 17px;
	color: #1E1F1F;
}
.course-item .sep {
	height: 1px;
	background-color: #D3D3CD;
}
.course-item .description {
	margin: 2px 3px;
	padding: 27px 20px;
	background-color: #FFF;
}
.course-item .description p{
	text-align: left;
	font-size: 14px;
	color: #1E1F21;
}
.course-item .description .teacher{
	text-align: left;
	color: #1E1F20;
}
.course-item .description .teacher img{
	width: 40px;
	height: 40px;
	margin-right: 10px;
}
.course-item .description .teacher .type{
	line-height: 12px;
	font-style: italic;
	font-size: 12px;
}
.course-item .description .teacher .name{
	line-height: 17px;
	font-weight: 500;
	font-size: 14px;
}
.course-item .description .teacher .rate .rate-0, .course-item .description .teacher .rate .rate-1{
	width: 12px;
	height: 11px;
	float: left;
	margin-right: 1px;
	background: url(../img/rate-0.png) no-repeat;
}
.course-item .description .teacher .rate .rate-1{
	background: url(../img/rate-1.png) no-repeat;
}
.course-item .cont-btn{
	padding: 12px 16px;
	background-color: #FFCC00;
	border-top: 1px solid #CCA300;
	text-align: left;
}
.course-item .cont-btn .users{
	padding-left: 17px;
	background: url(../img/ico-user.png) no-repeat left center;
	line-height: 20px;
	font-size: 12px;
	color: #1E1F21;
}
.course-item .cont-btn .likes{
	padding-left: 17px;
	background: url(../img/ico-heart.png) no-repeat left center;
	line-height: 20px;
	font-size: 12px;
	color: #1E1F21;
}
@media (min-width: 970px) {
	.search input[type=text]{
		width: 250px;
	}
	.search .more{
		display: block;
	}
	.search .more label{
		float: left;
		margin: 0 10px 0 0;
		line-height: 40px;
		font-weight: 400;
		font-size: 14px;
	}
	.search .more a{
		width: 114px;
		float: left;
		padding: 0;
		text-align: center;
	}
	.search .more select{
		width: 250px;
		height: 40px;
		float: left;
		margin: 0 0 0 10px;
	}
	.course-item{
		width: 48%;
		float: left;
		margin: 0 1% 43px 1%;
	}
}
@media (min-width: 1200px) {
	.course-item{
		width: 31.3%;
		margin: 0 1% 43px 1%;
	}
}


.contact{
	padding-bottom: 40px;
}
.contact .social, .contact .info{
	display: none;
}
.contact .form{
	width: 100%;
}
.contact input[type=text]{
	margin-bottom: 10px;
}
.contact textarea{
	margin-bottom: 15px;
}
.contact .contact-result{
	color: #FFF;
}
@media (min-width: 970px) {
	.contact .social{
		width: 29px;
		height: 29px;
		float: right;
		display: block;
		margin-top: 116px;
	}
	.contact .social.youtube{
		width: 42px;
		background: url(../img/social-youtube-2.png)
	}
	.contact .social.facebook{
		margin-left: 9px;
		background: url(../img/social-facebook-2.png)
	}
	.contact .info{
		width: 45%;
		height: 338px;
		display: block;
		padding: 0 55px;
		background: url(../img/ico-contact.png) no-repeat center bottom;
	}
	.contact .info p{
		font-size: 16px;
		color: #FFF;
	}
	.contact .form{
		width: 50%;
	}
}
@media (min-width: 1200px) {
	.contact .info{
		width: 35%;
	}
	.contact .form{
		width: 60%;
	}
}
.iframe{
	text-align: center;
	padding: 10px;
	margin-bottom: 30px;
}