body{margin: 0; padding: 0; font-family: 'bariolregular'; font-size: 16px; background-color: #ffffff;}
#header{width: 100%; background-color: #FFF; height: 96px; text-align: center; box-sizing: border-box; padding: 0; margin-bottom: 75px;  width: 100%; display: flex; justify-content: center; align-items: center;   border-bottom: 2px solid #e2e2e2;}
#header img{display: block; width: 100%; max-width: 534px;}

#header .container{position: relative; display: flex; justify-content: center; align-items: center}
#header.with-menu .container{display: block}
#content-header{  padding-bottom: 10px; margin-bottom: 20px;  }
#content-header img{display: block; width: 100%;position: relative; }

#menu{position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
#menu ul{margin: 0; padding: 0; display: flex}
#menu ul li{margin: 0; padding: 0; list-style: none;}
#menu ul li a{padding: 5px 20px; font-size: 1.125em;}
#menu ul li:last-child a{background-color: #513686; color: #FFF; border-radius: 50em;}


body.content #header{margin-bottom: 0;}

p,h1,h2,h3,h4,h5,h6{margin-top: 0}
a{text-decoration: none; color: #011689;}
.w100{display: block; width: 100%;}
#page-outer{padding-bottom: 50px;}
.container{width: 100%; max-width: 1210px; margin: auto; box-sizing: border-box;  box-sizing: border-box; }
.container.w960{padding: 0; max-width: 960px;}

strong{font-family: 'bariolbold'}

#login-form-wrapper{display: flex; padding: 30px 0;  border-radius: 5px; position: relative; z-index: 2;}

#login-tab {
	 position: relative; transform: translateY(5px);z-index: 1;
	background: #2b3c90;
	background: -moz-linear-gradient(left,  #2b3c90 0%, #513686 100%);
	background: -webkit-linear-gradient(left,  #2b3c90 0%,#513686 100%);
	background: linear-gradient(to right,  #2b3c90 0%,#513686 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b3c90', endColorstr='#513686',GradientType=1 );

	
	height: 60px;
	display: inline-flex; 
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	font-size: 1.25em;
	font-family: 'bariolbold';
	color: #011689;
	box-sizing: border-box;
	padding: 10px 0;
	border:1px solid #c7cbe1;
	border-bottom: none;
	padding-bottom: 15px;
	
	
  }
  .tab-header{ height: 100%; min-width: 180px; border-right: 2px solid #e8e8f1; }
  .tab-header:last-child{border-right: none;}
  .tab-header a{display: flex; height: 100%; align-items: center; justify-content: center; text-decoration: none; color: #FFF;}

.login-form-cell{padding: 0 30px; box-sizing: border-box; width: 100%;}
#login-form-controls{width: 355px; background: url("../img/icon/dotted-border.png") right top repeat-y; background-size: 2px 4px; }
#login-form-description{width: calc(100% - 355px);}


#logo-wrapper{position: relative}
#logo-wrapper img{position: absolute; left: 40px; width:130px; top: 40px; }

#form-outer{z-index: 3; position: relative}

#form-wrapper{width: 100%; color: #2c3f8e; box-sizing: border-box;  border-radius:5px; display: flex; flex-direction: column;  }
.form-cell{width: 100%; box-sizing: border-box}





h1.center-header{text-align: center;  color: #011689; font-size: 3.4375em; font-weight: normal}

#week-container{}


#week-selector-container{position: relative; z-index: 10; height: 110px; }
#week-selector{width: 360px;  box-sizing: border-box; padding: 2px; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
#week-selector ul{margin: 0; padding: 15px 30px; }
#week-selector ul li{max-height: 0; font-size: 3.4375em; color:#011689; list-style: none; margin: 0; padding: 0;  transition: all .1s linear; overflow: hidden; }
#week-selector ul li a{color: #cdcecf; text-decoration: none;}
#week-selector ul li.selected{max-height: 100px;background: url("../img/icon/down-arrow.png") no-repeat right center; background-size: 27px 14.5px; }
#week-selector ul li.selected a{color: #011689; }

#week-selector.week-length-1 ul li.selected{background: none; }

#week-selector.week-selector-opened{}

#week-selector.week-selector-opened ul{box-shadow: 3.564px 1.816px 7px 0px rgba(32, 22, 5, 0.35); background-color: #FFF;}
#week-selector.week-selector-opened ul li{max-height: 100px;  color: #cdcecf}
#week-selector.week-selector-opened ul li.selected a{color: #011689;}


#week-content-wrapper{display: flex;}
.week-content-cell{width: 280px; box-sizing: border-box;}
.week-content-cell.full{width: 100%}
.week-content-cell:nth-child(2){width: calc(100% - 610px); margin: 0 25px; }

.week-frame { margin-bottom: 30px;}
.week-content-cell .week-frame:last-child{margin-bottom:0;}

.week-frame h2{margin: 0; padding: 0;  display: flex; align-items: center; min-height: 90px; color: #2b3c90; font-family: 'bariolbold'; padding: 5px 20px; box-sizing: border-box; font-size: 1.3375em;}
.week-frame h2 img{width:50px; margin-right: 20px; }
.week-frame h3{color: #011689; font-family: 'bariolregular'}

.week-frame-content{padding: 20px; }
#inspiration .week-frame-content{font-style: italic}
#week-documents{text-transform: uppercase}
#week-documents a.button{text-transform: none}

.video-week-wrapper{display: flex;}
.video-week-wrapper img{margin-right:20px; }
.video-week-wrapper h3, #week-documents h3{text-transform: uppercase; font-size: 1em}
.video-week-wrapper .video-image-wrapper::after{display: none;}
.document_video{position: relative; display: block}
.document_video::after{content: ''; background: url("../img/icon/play_icon.png") no-repeat center center; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); position: absolute; z-index: 2; width: 48px; height: 48px; background-size: contain}

.question-item{margin-bottom: 30px; }
.question-item h3{font-family: 'bariolbold'}

.question-options{padding-left: 35px;}

#quiz-questions-wrapper{padding-left: 70px;}


#profile-form-wrapper{display: flex;  justify-content: center; align-items: flex-start}
#profile-form-wrapper h2{font-size: 2.5em; display: block; text-align: center}
#profile-form-wrapper h2 span{text-transform: uppercase; margin-left: 10px;}


#profile-form-wrapper #login-form-controls{background: none;}

#task-thumb{max-width: 269px; margin: auto;}

#footer{background: url("../img/footer/band.png") no-repeat left bottom ; height: 159px; width: calc(100% - 13px); max-width: 1507px; margin: auto; background-size: 1507px 159px; position: relative;}
#footer img{position: absolute; right: 13px; bottom: 54px; z-index: 2; }


#slides,#videos, #slide-control{max-width: 780px; margin: auto;}

#week-documents div{margin-bottom: 20px;}
	#week-documents div a{display: block; margin-bottom: 5px;}
	#week-documents div a.button{ display: inline-block; margin-bottom: 0}


.week-frame-content{padding: 20px}
	.product-content{display: flex; align-items: center;}
	.product-content h2{font-size: 2.5em; font-family: 'bariolbold'; margin-bottom: 0; line-height: 150%; min-height: auto; padding: 0;}
	.product-content h3{font-size: 1.25em;font-family: 'bariolbold'; margin-bottom: 10px;}
	.product-content ul{margin: 0; padding: 0}
	.product-content ul li{list-style: none; position: relative;  margin: 10px 0; padding-left: 10px;}
	.product-content ul li::after{position: absolute; left: 0; top: 8px; content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #2b3c90;}

.features-tip{font-size: 80%; font-style: italic}


#slide-control .test-btn{position: absolute; right: 0; bottom: 10px}
.video-week-wrapper{flex-direction: column}
	.video-image-wrapper{order: 2}
	.video-title-wrapper{order: 1}
	.video-image-wrapper img{margin: 0; width: 100%; display: block}
.video-week-wrapper h3{font-size: 1em}

.home-task-item{margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #dfdfdf;}
.home-task-item-title{margin-bottom: 10px; font-family: 'bariolbold'; color: #011689;}
.home-task-desc{margin-bottom: 10px;}

.video-image-wrapper{position: relative}
.video-image-wrapper::after{content: ''; background: url("../img/icon/play_icon.png") no-repeat center center; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); position: absolute; z-index: 2; width: 48px; height: 48px; background-size: contain}

.more-description{display: none; padding-top: 20px; font-style: italic;}
.more-link{color: #000; text-decoration: underline; font-weight: 700}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	select{background-image: none; padding-right: 20px;}
 }



@media(max-width:1260px){
	.container{padding: 0 20px}
}
@media(max-width:1210px){
	#menu ul li{margin: 0;}
	
	
	
}

@media(max-width:1100px){
	#header img{max-width: 400px}
	#form-wrapper{display: block}
	.form-cell{width: 100%; padding: 0 !important}
	.form-cell:nth-child(1){margin-bottom: 50px}
}

@media(max-width:1000px){
	.container.w960{padding: 0 20px;}
	#slogan{padding: 0 20px;}
	
	#week-content-wrapper{flex-direction: column;}
	.week-content-cell{width: 100%; margin-bottom:40px }
	.week-content-cell:nth-child(2){width: 100%; margin: 0;}
	.week-frame{margin-bottom: 40px}
	
	.week-content-cell .week-frame:last-child{margin-bottom: 40px}
	
}


@media(max-width:980px){
	#mobile-menu-trigger{width:31px; height: 31px; right: 20px; top: 50%; transform: translateY(-50%); position: absolute; z-index: 12; display: flex; align-items: stretch; flex-direction: column; justify-content: space-around; padding: 5px 0; box-sizing: border-box}
	#mobile-menu-trigger i{background-color: #17469e; height: 3px; width: 100%; }
	#mobile-menu-trigger i:last-child{margin-bottom: 0;}
	#menu{overflow: hidden; width: 0; height: 100vh; background-color: rgba(0,0,0,.5); position: fixed; transition: ease-out all .15s; z-index: 11;}
	#menu ul{width: 50%; position: absolute; right: 0; top: 0; height: 100%; background-color: #fff; box-sizing: border-box; padding: 50px 20px;}
	#menu ul{flex-direction: column}
	#menu ul li{text-align: left; font-size: 2em;}
	#menu ul li a{padding: 10px 20px; display: block}
	#header.mobile-menu-opened #menu{width: 100%;}
	
	#menu ul li:last-child a{background-color: transparent; color: #011689;}
}

@media(max-width:960px){
	
	
	#footer img{width: 150px; }
}
@media(max-width:768px){
	.product-content-img img{width: 200px; display: block}
	.product-content h2{font-size: 1.75em;}
	
	#menu ul{width: 85%;}
}
@media(max-width:767px){
	
	#profile-form-wrapper h2{font-size: 1.75em;}
#profile-form-wrapper h2 span{display: block}

	
	#week-selector{width: 310px;}
	#week-selector ul li,h1.center-header{font-size: 2.8375em}
	#week-selector-container{height: 90px;}
	.login-form-cell{padding: 0}
	#login-tab{width: 100%;}
	.tab-header{width: 50%}
	#login-form-wrapper{flex-direction: column; padding: 30px;}
	#login-form-controls{width: 100%; max-width: 355px; margin: auto; padding-right: 0; background-repeat: repeat-x;background-position: left bottom; padding-bottom: 25px; margin-bottom: 25px; background-image: url("../img/icon/dotted-border-bottom.png"); background-size: 4px 2px;}
	#login-form-description{width: 100%; margin: auto; max-width: 355px;}
	
}

@media(max-width:600px){
	
	.product-content-img img{width: 200px; display: block; margin-left: -30px;}
	.product-content h2{font-size: 1.75em;}
	.product-content{flex-direction: column; justify-content: flex-start; align-items: flex-start}
	
	#desc-paragraph{font-size: 24px;}
	.form-row{display: flex; flex-direction: column}
	.form-row label{width: 100%; margin-bottom: 10px;}
	input, select, textarea{font-size: 16px; height: 40px;}
	
	.tab-header{min-width: auto}
	#header img{max-width: 280px}
}

@media (hover: none) {
	#week-selector ul li.selected{position: relative; }
	#week-selector ul li.selected::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%;  content: ''; z-index: 1}
}

@media(max-width:374px){
	#menu ul li{font-size: 1.125em}
	#header img{width: 230px}
}