@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

/******************************************************/

/* Style for page Index */

/******************************************************/


*{
	padding:0; margin: 0;
}
img{
	border: none; max-width: 100%;
}


html {
	/*position: relative;
   min-height: 100%;*/
}


body{
	/*font: 14px Arial, Helvetica, sans-serif; 
	color: #000000;
	border-top: 2px solid #E5BB58;
	border-bottom: 2px solid #E5BB58;
	line-height: 1.5;*/
	background: #004475 url("../images/bg2.jpeg");
	padding-top: 50px;
}


a{	
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
a:visited{
	text-decoration: none;
}
ul {
	list-style: none;
}
.clear{
	clear:both;
}

.bg-head{
background: linear-gradient(to bottom, #fcfafc, #f4eef4 400px);
background: -webkit-linear-gradient(top, #fcfafc, #f4eef4 400px);
background: -o-linear-gradient(top, #fcfafc, #f4eef4 400px);
background: -ms-linear-gradient(top, #fcfafc, #f4eef4 400px);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcfafc", endColorstr="#f4eef4", GradientType=0);
}


.bg-wrapper{
	/*background: #F6F5F3;*/
	box-shadow: 0 0 25px rgba(0,0,0,.245);
	background: linear-gradient(to bottom, #fcfafc, #f4eef4 400px);
	background: -webkit-linear-gradient(top, #fcfafc, #f4eef4 400px);
	background: -o-linear-gradient(top, #fcfafc, #f4eef4 400px);
	background: -ms-linear-gradient(top, #fcfafc, #f4eef4 400px);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcfafc", endColorstr="#f4eef4", GradientType=0);
}


/* Форма з питанням тесту */
.form_test{
	display: none;
	overflow: hidden;
}

.ochinka{
	display: none;
}


/********* Menu  *************/
nav {
  font-family: 'Shadows Into Light Two', cursive;
  display: block;
  position: relative;
}
nav:after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  /*background: linear-gradient(90deg, 
    #CDE0EE, #CDE0EE 20%,
    #EBF0F3 20%, #EBF0F3 40%, 
    #9BB0C1 40%, #9BB0C1 60%, 
    #5D8BAD 60%, #5D8BAD 80%,
    #041E34 80%, #041E34 100%);*/
	background: linear-gradient(90deg, 
	#CDE0EE, #CDE0EE 20%, #A2D4F1 20%, 
	#3791C7 40%, #9BB0C1 40%, #9BB0C1 60%,
	#5D8BAD 60%, #5D8BAD 80%, 
	#0E426E 80%, #2983CF 100%);
}
nav ul {
  width: 100%;
  margin: 0 auto;
  padding-left: 0;
  list-style: none;
  overflow: hidden;
}
nav ul li {
  float: left;
  width: 12%;
}
nav ul li a {
  text-decoration: none;
  text-align: center;
  display: block;
  color: #868686;
  padding: 0.5em 0;
  font-size: 20px;
  /*font-weight: bold;*/
  transition: 0.5s ease-in-out;
}
nav ul li a:hover {
  color: #0054ef;
  text-decoration: none;
  background: #d1ebd2;
}

/********* End. Menu  *************/

	
	.header{
		margin: 0 auto;
		overflow: hidden;
		box-shadow: 0 0 25px rgba(0,0,0,.245);
		/*outline: 1px solid #79FF00;*/
}

	.img-header{
		float: right;
}

	.logo{	
}

	.header_desc{
		font-size: 18px;
		color: #220F6D;
		float: right;
}
	
	
	.menu_class{
		    
	}

	
	.block_left{
		margin-left: auto;
		margin-right: auto;
	}
	
	
	/*
	.class_title{
		font: 20px Segoe Print, Sant-serif;
		color: #790AA8;
		display: inline-block;
		margin-left: 15px;
	}
	.class_title_url{
		display: inline-block;
	}
	*/
	
	
	.block_right{

	}
		
		/*
		.block_right h2{
			font: normal 100%'Open Sans', sans-serif;
			font-size: 18px;
			color: #392297;
			border-bottom: 3px solid #d5d5d5;
			margin: 5px 5px 10px 10px;
		}
		
		.kod_ligpay{
			margin: 0 auto 10px auto;
		}
		
		.ligpay{
			width: 90%;
		}
		
		.webmoney p{
			margin: 0 auto 10px 10px;
		}
		
		.kod_google{
			margin: 0 0 0px 5px;
		}
	*/
	
	
	.reklama{
		margin: 20px 0 0 0px;
		width: 728px;
	}
	
		

.footer{
	border-top: 2px solid #E7AF3A;
	overflow: hidden;
	background: #f9f2f4;
}
/* End. Стилі, щоб був прижатий footer */


.f_left{
	margin: 15px 0px 0px 0px;
}
	
	.f_left p:last-child{
		margin: 10px 0 0 0;
	}
	
.f_right{
	margin: 15px 0px 0px 0px;
}

.yandex_m{
	float: right;
}
	

.wishhost{
	text-align: center; 
	float: none; 
	margin: 10px 0 0 0;
}




/******************************************************/

/* Style for page Class-new.php */

/*****************************************************/

	
	.title_games{
		/*background: #fff;*/
		margin: 0 0 30px 0;
		font-size: 18px;
		font-weight: bold;
		color: #06C;
	}
	
	
	
	.block_lesson{
		float: left;
		width: 220px;
		height: 200px;
		border: 1px solid #4BACC6;
		background: #fff;
		margin: 10px 10px 15px 8px;
		position: relative;
	}
	
		.block_lesson img{	
			width: 50px;
			height: 50px;
			margin: 10px auto 8px auto;
			display: block;
		}
		
		.block_lesson h2{
			background: #f2f2f2;
			color: #7030A0;
			font-size: 14px;
			text-align: center;
			height: 100px;
			overflow: hidden;
		}
		
		.block_lesson p{
			color: #B2A2C7;
			font-size: 12px;
			text-align: center;
			margin: 5px 0 5px 0;
			position: absolute;
			top: 85%;
			left: 25%;
		}
		
		.hidden_block{
			text-decoration: none;
			/*background: #ECCF96;
			position: absolute;
			top: 70px;
			display: none;*/
			/*margin: -110px 0 0 0;*/
			position:absolute;
			left:0;
			bottom:0;
			right:0;
			top:0;
			background:rgba(255,255,255, 0.7);
			padding:5px;
			display:none;
		}
			
			.hidden_block a{
				margin: 40px 0 -10px 35px;
				text-decoration: none;
			}
		
		.block_lesson:hover .hidden_block{
			display: block;
		}
		
		.temas-1{
			overflow: hidden;
			background: #DED2F2;
		}
		
		.temas-2{
			overflow: hidden;
			background: #59D498;
		}
		
		
	



	

/******************************************************/		
		
/* Style for page Test */
	

/******************************************************/	
	
	.nav-test{
		/*background: #fff;*/
		margin: 0px 0px 10px 0px;
		overflow: hidden;
	}
		.test_menu{
			padding: 20px 10px 10px 30px;
			text-align: center;
		}
		
		.na-holovny{
			background: url(../images/0101.png) no-repeat;
			padding: 5px 5px 5px 35px;
		}
				
		.povtorutu-test{
			background: url(../images/0202.png) no-repeat;
			padding: 5px 5px 5px 35px;
		}
		.back-with-test{
			background: url(../images/0303.png) no-repeat;
			padding: 5px 5px 5px 35px;
		}
	
	.test{
		/*padding:5px 5px 0px 5px;*/
		background: #fff;
		/*overflow:hidden;*/
		/* outline: 1px solid #79FF00;    Лінія навколо об'єкта */
	}
	
	.row_border{
		border-bottom: 1px solid #2ABEF5;
	}
	
	
		
		.nomer_yroky{
			float:left;
			color: #A2A2D0;
		}
		.nomer_putannia{
			float:right;
			color: #A2A2D0;
			margin-right: 10px;
		}
		.nazva_putannia{
			margin: 5px 5px 20px 5px;
			color: #3f51b5;
			border-radius: 15px;
			box-shadow: 1px 1px 2px #ccc;
			padding: 10px 15px 10px 15px;
			background: #EFF2F3;
			font-size: 18px;
			font-weight: bold;
			line-height: 1.4;
		}
		.button_send{
			border-top: 1px solid #2ABEF5;
			margin: 10px 0px 10px 0px;
		}
		
		.button {
			border: none;
			padding: 0.6em 1.8em;
			background: #307fb4; /*rgb(48, 127, 180);*/
			color: #fff;
			font-family: 'Lato', Calibri, Arial, sans-serif;
			font-size: 1em;
			letter-spacing: 1px;
			text-transform: uppercase;
			cursor: pointer;
			display: inline-block;
			margin: 5px 12px;
			border-radius: 2px;
		}

		.button:hover {
			background: #3E97DD;
		}
		
		.button_disabled, .button_disabled:hover{
			background: #c1c1c1;
		}
		
		
		.button2 {
			border: none;
			padding: 0.6em 1.2em;
			background: rgb(254, 115, 124);
			color: #fff;
			font-family: 'Lato', Calibri, Arial, sans-serif;
			font-size: 1em;
			letter-spacing: 1px;
			text-transform: uppercase;
			cursor: pointer;
			display: inline-block;
			margin: 3px 2px;
			border-radius: 2px;
			float: right;
		}

		.button2:hover {
			background: #3E97DD;
		}
		
	.setting_button_test{
		margin: 20px 0 0 0;
		border-top: 1px dotted green;
		padding: 15px 0 0 0;
		display: inline-block;
		width: 300px;
	}
		
	
	.block_putania{
		margin-bottom: 20px;
	}
		

/******************************************************/		
		
/* Style for test*/	


/******************************************************/

		
	.CheckBoxClass,.RadioClass{
		display: none;
	}
	.CheckBoxLabelClass{
		background: url("../images/UnCheck.png") no-repeat;
		padding-left: 30px;
		padding-top: 3px;
		margin: 5px;
		height: 28px;	
		width: 150px;
		display: block;
	}
	.CheckBoxLabelClass:hover, .RadioLabelClass:hover{
		color: #3F41D8;
		cursor: pointer;
		font-weight: bold;
	}
	
	.LabelSelected{
		background: url("../images/UnCheck.png") no-repeat;
	}
	.RadioLabelClass{
		background: url("../images/UnCheck.png") no-repeat;
		padding: 10px 10px 25px 10px;
		padding-left: 35px;
		padding-top: 2px;
		/*margin: 10px 10px 30px 10px;*/	
		display: block;
		font-weight: normal;
		width: auto;
		font-size: 15px;
		
	}
	.RadioSelected{
		background: url("../images/Check.png") no-repeat;
	}
	
	/* My Style for test */
	.vidpovidi{
		overflow: hidden;
	}
	
	.image-test{
		overflow: hidden;
		margin-top: 20px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
		
		.image-test img{
			/*width: 100%;
			height: 100%;*/
	}
	

	
	.center{
		margin-left: 155px;
	}
	
	

	
/******************************************************/
	
/* Style for page result-test */


/******************************************************/



	.ochinka{
		border-bottom: 1px solid #2ABEF5;
		padding: 15px 0 5px 0px;
		/*overflow: hidden;*/
		background: #FCF9F9;
		font-size: 20px;
		display: block;
	}
	
	.your_bal{
		background: #ebe9eb;
		padding: 10px 15px;
		border-radius: 10px;
		color: #FF0000;
		font-weight: bold;
		text-align: center;
		margin-bottom: 10px;
	}
	
	.progress_my {
		height: 46px;
		margin-top: 20px;
		border-radius: 10px;
		background-color: #fff;
		
	}
	.progress-bar_my{
		line-height: 44px;
		color: #00ff50;    /*#FF0000;*/
		font-weight: bold;
		font-size: 20px;
		/*background: #ffeb3b;*/
	}
	
	.time_test{
		text-align: center; 
		font-size: 16px;
		color: #B8B7B6;
	}
	
	
	.perevir_sebe {
		overflow: hidden;
		background: #fff;
		padding: 10px;
	}
	
	.perevir_sebe h2{
		text-align: center;
		font-weight: bold;
		font-size: 1.2em;
		color: #8B3DD5;
		text-transform: uppercase;
		margin-bottom: 35px;
	}
	
	.proideno-zaputan{
		text-align: right;
		font-size: 1.2em;
		color: #2AB524;
	}
	
	.perevir_sebe h3{
		font-weight: normal;
		color: #39326f;
		font-size: 20px;
		
	}
	
	.perevir_sebe h3 span{
		font-weight: bold;
		color: #BEA5A5;
		border: 1px solid #C2B8D7;
		background: #F9F5F5;
		border-radius: 50%;
		width: 25px;
		height: 25px;
		text-align: center;
		margin: 0px 10px 0px 5px;
		float: left;
	}
	
	.image-true{
		background:  url(../images/yes.png) no-repeat 100% 50%;
		border-bottom: 2px dotted #B8B7B6;
		margin: 10px 0px 15px 0px;
		padding: 0px 40px 10px 0px;
	}
	
	.image-false{
		background:  url(../images/no.png) no-repeat 100% 50%;
		border-bottom: 2px dotted #B8B7B6;
		margin: 10px 0px 15px 0px;
		padding: 0px 40px 4px 0px;
		
	}
	
	.banner-result-test{
		margin: 10px auto 10px auto;
		display: table;	
	}
	
	.btn_margin{
		margin: -5px 0px 0px 0;
	}
	
	
	
	
	
	
	
	
/******************************************************/	
	
/* Style for page C++ */


/******************************************************/	
	
	
	.info-block {
		margin: 0;
		border: 1px solid #d3d3d3;
		padding: 10px 0;
		box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);
	}
		
		.info-block h3 {
			font-size: 26px;
			margin: 0 0 20px 0;
			color: #210870;
		}
		
	.pagin {
		display: table;
		margin: 20px auto;
		border-top: 1px solid #ccc;
	}
	
	

	
	
	
	
	
	
/******************************************************/	
	
/* Style for page Olimpiada */


/******************************************************/


.olimp-tittle{
	text-align: center;
	font-size: 18px;
    color: #392297;
}

.olimp-desc{
	text-align: center;
	margin: 0 0 10px 0;
}

.block-olimpiada{
	width: 735px;
	height: auto;
	background: #DED2F2;
	overflow: hidden;
	text-align: center;
}

	.left-olimpiada{
		width: 35px;
		height: 42px;
		float: left;
		background: #F6CA6F;
		display: table;
	}
			.left-olimpiada h2{
				color: #C42134;
				font-size: 14px;
				display: table-cell;
				vertical-align: middle;
				
			}
	
	.right-olimpiada{
		width: 700px;
		float: right;
	}
	
		.office-olimpiada{
			width: 25%;
			float: left;
			text-align: center;
		}
			.office-olimpiada:nth-child(2n){
				background: #ECCF96;		
}



.ac-container{
	width: 98%;
	margin: 10px auto 30px 1px;
	text-align: left;
}
.ac-container label{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	padding: 5px 20px;
	position: relative;
	z-index: 20;
	display: block;
	height: 30px;
	cursor: pointer;
	color: #777;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 33px;
	font-size: 19px;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
		0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
	background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
	background: #c6e1ec;
	color: #3d7489;
	text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 7px;
	background: transparent url(../images/arrow_down.png) no-repeat center center;	
}
.ac-container input:checked + label:hover:after{
	background-image: url(../images/arrow_up.png);
}
.ac-container input{
	display: none;
}
.ac-container article{
	background: rgba(255, 255, 255, 0.5);
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
	font-style: italic;
	color: #777;
	line-height: 23px;
	font-size: 14px;
	padding: 10px 20px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article{
	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
	height: auto;
}
.ac-container input:checked ~ article.ac-medium{
	height: auto;
}
.ac-container input:checked ~ article.ac-large{
	height: 230px;
}

.title-office-wrapper{
	position: relative;
}

.title-office{
	font-size: 18px;
    color: #392297;
	display: inline-block;
	margin: 10px 20px 10px 200px;
}

.img_download{
	display: inline-block;
	/*margin: 0px 0px 0px 0px;*/
	position: absolute;
	top: 10px;
    left: 265px;
}

.powerpoint{
	position: absolute;
    top: 10px;
    left: 320px;
}

.access{
	position: absolute;
    top: 10px;
    left: 280px;
}

.hr{
	display: table;
    width: 85%;
    margin: 0 auto;
}

.ymova_zadachi_olimp{
	margin: 0px 0px 5px 20px;
}


.block-soft{
	display: table;
	width: 735px;
	height: 40px;
	background: #DED2F2;
	text-align: left;
}
	
	.setting{
		color: #005AB5;
		font-weight: bold;
		/*text-align: center;*/
		
	}

	.left-soft{
		width: 35px;
		background: #F6CA6F;
		color: #C42134;
		font-size: 14px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	
	.soft-tittle{
		width: 40%;
		display: table-cell;
		vertical-align: middle;
		padding: 0 0 0 10px;
	}
		
		.soft-desc{
			background: #ECCF96;
			display: table-cell;
			vertical-align: middle;
			padding: 0 0 0 10px;
		}		

		
		

/******************************************************/		
		
/* Style for page Soft.php */


/******************************************************/





/******************************************************/

/* Style for page games.php */


/******************************************************/
	
	
	.games_block{
		width: 245px;
		height: 190px;
		background: #fff;
		float: left;
		margin: 0px 10px 20px 0px;
		border: 1px solid #d4d4d4;
		box-sizing: border-box;
		cursor: pointer;
		/*position: relative;*/
	}
	
		.games_block p{
			text-align: center;
			font-size: 14px;
			font-weight: bold;
			color: #fff;
			margin: -47px 0px 0px 0px;
			/*position: absolute;
			left: 0;
			bottom: 0;
			display: none;*/
			background: #2abef5;;
			position: relative;
			z-index: 10;
			padding: 10px 0;
		}
		
		

/* End. Style for page games.php */






/******************************************************/

/* Style for page video.php */


/******************************************************/
		
	.block-video{
		border: 2px solid #DDD;
		padding: 5px;
		height: 170px;
		margin: 0 0 10px 0;
		background: #fff;
	}

		.title-video{
			float: left;
			width:  58%;
		}
		
			.title-video h3{
				font-size: 16px;
				font-weight: bold;
				color: #06C;
				margin: 0 0 5px 0;
			}
		
		.youtube-video{
			float: right;
		}

/* End.Style for page video.php */	






/******************************************************/

/* Style for page soft.php */


/******************************************************/
		
	.block-soft{
		border: 2px solid #DDD;
		padding: 5px;
		height: 170px;
		margin: 0 0 10px 0;
		background: #fff;
	}

		.title-soft{
			float: left;
			width:  55%;
			height: inherit;
		}
		
			.title-soft h3{
				font-size: 16px;
				font-weight: bold;
				color: #06C;
				margin: 0 0 5px 0;
			}
		
		.img-soft{
			float: right;
			width:  45%;
			height: inherit;
		}
	
	.download{
		width: 100px;
		margin: 10px 0 0 10px;
	}
/* End.Style for page soft.php */	





/******************************************************/

/* Style for page workpc.php */	

/******************************************************/
	.praktuka_title{
		text-align: center;
		margin: 0 0 10px 0;
	}



/* End.Style for page workpc.php */	







/******************************************************/

/* Style for page office.php */	


/******************************************************/
	
	.btn_office{
		padding: 0.2em 0.6em;
	}

/* End. Style for page office.php */	



	.instruction, .instruction ol{
		margin-left: 30px;
		line-height: 1.8;
	}