@charset "utf-8";
/*-----------------------------------------------------------------------------------------------------------------------*/
		
	#video {position: absolute; display: none; background: #fff; border: 1px solid blue; z-index: 1;}
	.video {position: absolute; display: none; background: #fff; border: 1px solid blue; z-index: 1;}
	#off {position: absolute; color: red; display: none; z-index: 2;}
	
	/*-------------------------------------------------------------------*/
	
	div[data-pc] {display: block;}
	span[data-pc] {display: inline;}
	
	[data-mobile] {display: none;}
	[data-mobile-vert] {display: none;}
	
	/*-------------------------------------------------------------------*/
	
	.grayArea {display: block; margin: 15px 0 15px 0; padding: 15px 5px 15px 10px; background-color: #f1f1f1; width: 98%;}
	
	/*-------------------------------------------------------------------*/
	
	#title-video-desktop {font-family: var(--Times); font-style: italic; font-size: 19px; letter-spacing: 0.05em; margin-left: 15px;}
	#title-video-desktop:hover {color: gray; cursor: pointer;}
	#title-video-mobile {display: none;}
	#video-mobile-vert {display: none;}
	
	ul#useful-links {list-style-type: "—  "; margin-left: 25px;}
	ul#useful-links li {margin-bottom: 10px;}
	
	#tasks-yourself {border-spacing: 0;}
	#tasks-yourself tr td:nth-child(1) {font-weight: bold;}
	#tasks-yourself tr td:nth-child(2) {padding: 15px 80px 15px 18px;}
	#tasks-yourself tr td:nth-child(3) {color: green; padding-right: 30px;}
	#tasks-yourself tr td:nth-child(3) span:hover {cursor: pointer; color: #00D700;}
	
	.answer-yourself {display: none;}
	.answer-yourself.visible {display: inline;}
	
	#tasks-yourself-mobile-vert {border-spacing: 0;}
	#tasks-yourself-mobile-vert tr:nth-child(2n-1) td:first-child {font-weight: bold; padding-left: 5px;}
	#tasks-yourself-mobile-vert tr:nth-child(2n) td {border-bottom: 1px solid gray; height: 90px;}
	#tasks-yourself-mobile-vert tr:nth-child(2n-1) td {padding-top: 15px;}
	#tasks-yourself-mobile-vert tr:nth-child(2n) td:first-child {padding-left: 5px; color: green;}
	#tasks-yourself-mobile-vert tr:nth-child(2n) td:last-child {padding-left: 20px;}
	
	#tasks-yourself-mobile-vert {display: none;}
	
@media screen and (max-width : 1029.9px) {
	
	p[data-pc] {display: none;}
	div[data-pc] {display: none;}
	span[data-pc] {display: none;}
	img[data-pc] {display: none;}
	br[data-pc] {display: none;}
	
	img[data-mobile-vert] {display: inline;}
	span[data-mobile-vert] {display: inline;}
	div[data-mobile-vert] {display: block;}
	hr[data-mobile-vert] {display: inherit;}
	br[data-mobile-vert] {display: block;}
	p[data-mobile-vert] {display: block;}
	
	/*------------------------------------*/
	
	#title-video-desktop {display: none;}
}

@media screen and (min-width : 724px) and (max-width : 1029.9px) {			/*	 iphone горизонт., ipad вертик.	*/

	#title-video-mobile {display: block;}
	#title-video-mobile a {font-family: var(--Times); font-style: italic; font-size: 22px; letter-spacing: 0.05em;}
	#content #title-video-mobile a {color: black;}
}

@media screen and (max-width : 723.9px) {
	
	#video-mobile-vert {display: inherit; font-size: 15px; font-style: italic;}
	#content #video-mobile-vert {color: black;}
}

@media screen and (max-width : 820px) {
	
	#tasks-yourself-mobile-vert {display: table;}
	#tasks-yourself {display: none;}
}

@media screen and (min-width : 600px) and (max-width : 723.9px) {
}

@media screen and (min-width : 375px) and (max-width : 599.9px) {			/*	 iphone вертик.	*/
}

@media screen and (max-width : 374.9px) {
}
	
@media (any-hover: hover) {

	#off:hover {cursor: pointer;}
}

@media (hover: none) {
	#tasks-yourself tr td:nth-child(3) span:hover {color: green;}
}

/*-----------------------------------------------------------------------------------------------------------------------*/
.width30 {width: 30%;}
.width50 {width: 50%;}
.width70 {width: 70%;}
		
.bold {font-weight: bold;}

.middle {vertical-align: middle;}

.left5 {margin-left: 5px;}
.left10 {margin-left: 10px;}
.left15 {margin-left: 15px;}
.left20 {margin-left: 20px;}
.left30 {margin-left: 30px;}
.left40 {margin-left: 40px;}
.left50 {margin-left: 50px;}
.leftMinus5 {margin-left: -5px;}
.leftMinus10 {margin-left: -10px;}

.right5 {margin-right: 5px;}
.right10 {margin-right: 10px;}
.right15 {margin-right: 15px;}
.right20 {margin-right: 20px;}
.right25 {margin-right: 25px;}
.right30 {margin-right: 30px;}

.top5 {margin-top: 5px;}
.top10 {margin-top: 10px;}
.top15 {margin-top: 15px;}
.top20 {margin-top: 20px;}
.top25 {margin-top: 25px;}
.top30 {margin-top: 30px;}
.top40 {margin-top: 40px;}
.top45 {margin-top: 45px;}
/*--------------------------------------*/
.bottom5 {margin-bottom: 5px;}
.bottom10 {margin-bottom: 10px;}
.bottom15 {margin-bottom: 15px;}
.bottom20 {margin-bottom: 20px;}

.line-height30 {line-height: 30px;}
.line-height35 {line-height: 35px;}
.line-height40 {line-height: 40px;}

.inline-block {display: inline-block;}
/*--------------------------------------*/
.clear10 {clear: both; height: 10px;}

.up1 { margin-top: -1px;}
.up2 { margin-top: -2px;}
.up3 { margin-top: -3px;}
.up4 { margin-top: -4px;}
.up5 { margin-top: -5px;}
.up6 { margin-top: -6px;}
.up7 { margin-top: -7px;}
.up8 { margin-top: -8px;}
.up9 { margin-top: -9px;}
.up10 { margin-top: -10px;}
.up11 { margin-top: -11px;}
.up12 { margin-top: -12px;}
.up13 { margin-top: -13px;}
.up14 { margin-top: -14px;}
.up15 { margin-top: -15px;}
.up16 { margin-top: -16px;}

.down3 { margin-bottom: -3px;}
.down5 { margin-bottom: -5px;}