/*
* {
	outline: 2px solid black;
}
*/

/* GENERAL */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* general */
body {
	color: #323232;
	font-size: 100%;
 	background: #eeefed;
 }

::-moz-selection { background: #a6a6a6; color: #000; text-shadow: none; }
::selection { background: #a6a6a6; color: #000; text-shadow: none; }

a {
	text-decoration: none;
}

.menu {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.menu li {
  float: left;
}

.fa {
  vertical-align: middle;
}

.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1.25em; /* 20px/980px */
}

/* clear-fix */

.group:before,
.group:after {
  content: " ";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  *zoom: 1;
}


/* contact */

.contact-bar {
	color: #fff;
   
  }
  
  .contact-bar {
	background: #39a3d4;
	height: 3.5714285714285716em; /* 50/14 */
	font-size: 0.875em;  /* 14/16 */
  }
  
  .personal {
	/*float: left;*/
	/*margin: 1.0714285714285714em 0; /* 15/14 */
	width: 100%;
	display: flex;
	  justify-content: center;
  }
  
  .personal img {
	vertical-align: middle;
  }
  
  .personal li {
	padding-top: 0.3571428571428571em;
  }
  
  .contact-bar .container ul {
	padding-top: 0.3571428571428571em;
  }
  
  
  .personal li:first-child {
	/*margin-right: 3.5714285714285716em; /* 50/14 */
	/*margin-right: 5.291005291005291%; /* 50px/945 */
  }
  
  .personal img {
	/*image-resolution: ;*/
	margin: 0 0.35714285714285715em 0.35714285714285715em 0.35714285714285715em; /* 5/14 */
  }
  
  .personal li:first-child:after {
	content: '/';
	margin: 0 0.9375em 0 0.9375em; /* 15/16 */
	color: #fff;
  }


/* HEADER */

/* navigation */

.navigation-bar {
	/*height: 7.625em; /*5.625em; /* 90/16 */
}

.navigation {
	/*float: right;*/
	width: 100%;
	display: flex;
	justify-content: space-around;
}

.navigation .fa {
  display: block;
  /*padding-top: 15px;*/
  padding-bottom: 0.5em;
}

/*.navigation li {
	width: 14.28571428571429%;
 	border-left: 1px solid #cecece;
}

.navigation li:first-child {
  border-left: 1px solid #cecece;
}

.navigation li:last-child {
  border-right: 1px solid #cecece;
}*/

.navigation a {
  display: block;
  color: #a6a6a6;
  /*width: 136px;*/
  /*width: 8.5em; /* 136/16 */
  /*height: 90px;*/
  height: auto;
  padding: 1.85em 0;
  text-align: center;
  text-transform: uppercase;
}

.selected a,
.navigation a:hover,
.navigation a:focus {
  color: #39a3d4;
}


/* main */


h1 {
	text-align: center;
}

.under {
	/*height: 150px;*/
	background: url('image-anatomy/anatomy back.jpg') 0px -89px no-repeat;
}

.title {
	color: #fff;
  	font-size: 1.875em; /* 30/16 */
  	font-weight: 600;
  	background: rgb(57, 163, 212);
 	background: rgba(57, 163, 212, 0.8);
 	padding: 0.4em 1.0222222222222221em; /* 18/45 */ /* 46/45 */
 	border-radius: 0.15555555555555556em; /* 7/45 */
 	display: inline-block;
 	text-transform: uppercase;
 	letter-spacing: 0em; /* 0/45 */
 	margin-top: 0.8em; /* 36/45 */
 	margin-bottom: 2.2em;
}

.institute {
	text-align: center;
	color: #a6a6a6;
	margin-top: 0.3125em; /* 5/16 */
	margin-bottom: 0em; /* 0/16 */
	padding-bottom: 0.3125em; /* 5/16 */
	padding-left: 0;
	border-bottom: 1px solid #cecece;
}

.institute li:first-child:after {
	content: '/';
	margin: 0 0 0 0.9375em; /* 15/16 */
	color: #a6a6a6;
}

.institute li {
	margin: 0.3125em; /* 5/16 */
	list-style: none;
	display: inline;
	color: #cecece;
}

.institute a {
	color: #a6a6a6;
}

.institute a:hover,
.institute a:focus {
	color: #39a3d4;
}




/* article */




/*.middle {
	
	text-align: justify;
	margin: 0 auto;
	background: url('image-anatomy/KFZ logo.png');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 50%;
	min-height: 48em;
}

/*
.middle p {
	line-height: 1.5625em;*/ /* 25/16 */
/*}*/



/* article */
/*---------------------------*/



.link {
	width: inherit;
	/*margin: 2em auto;*/
	text-align: center;
	display: flex;
	justify-content: space-around;
}

.link li {
	list-style: none;
}

.link a {
	display: block;
	/*color: #a6a6a6;*/
	color: #323232;
	/*color: #39a3d4;*/
	/*width: 136px;*/
	/*width: 8.5em; /* 136/16 */
	/*height: 90px;*/
	height: auto;
	padding: 1.85em 0;
	
	text-align: center;
	text-transform: uppercase;
  }

.link a:hover,
.link a:focus {
		color: #39a3d4;
		/*color: #a6a6a6;*/
		/*color: #323232;*/
}

.link .fa {
	margin-right: 0.35714285714285715em; /* 5/14 */
}


.fa-leanpub {
	color: #39a3d4;
}



/* aside - subjects */
/*---------------------------*/



.subjects {
	text-align: center;
	float: left;
	margin: 0.5em;
	padding-right: 2em;
}

.subjects ul {
	list-style: none;
	padding-left: 0;
	text-align: left;
	line-height: 1.5em;
}

.subjects li {
	border-bottom: 0.1em dotted #a6a6a6;
}

.subjects li:last-child {
	border-bottom: none;
}

.subjects a {
	color: #a6a6a6;
}

.subjects a:hover,
.subjects a:focus {
	color: #39a3d4;
}

h2 {
	margin: 0em auto 0.2em;
	font-size: 1.3em;
}

.middle h3 {
	margin-bottom: 0.3em;
}

.middle p {
	margin-top: 0.3em;
}

h3 a {
	color: #39a3d4;
}

h3 a:hover {
	color: white;
	background: #39a3d4;
	padding: 0.1em;
	border-radius: 0.15em;
}





/* MAIN CONTENT */ /*.container max-width: 980px;*/

.main-content {
	/*width: 600px; /*600px/980px=0.61224489...*100=61.224489*/
	width: 61.2224489%;
	float: left;
	margin: 0em;
}

.sidebar {
	/*max-width: 300px;*/ 
	width: 30.61224489795918%; /*300px/980px*/
	float: right;
	margin: 0.5em;
}

.degree {
	background: #39a3d4;
	color: #fff;
	text-align: center;
	padding: 0.5em;
}

.degree .fa {
	padding-bottom: 0.25em;
}

.subjects {
	width: 100%;
	padding: 0;
	margin-bottom: 1.5em;
	background: #F7F7F7;
	border-bottom: 1px solid #cecece;
	box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.1);
}

.subjects h2 {
	background: #39a3d4;
	color: #fff;
	padding: 0.75em 0em 0.75em 0em;
}

.subjects .fa {
	padding-left: 0.75em;
}

/*----------*/
.subjects button {
	width: 100%;
	/*background: #39a3d4;*/
	background: #a6a6a6;
	/*color: #fff;*/
	color: #393939;
	padding: 0.75em;
	border: none;
	font-size: 130%;
	font-weight: bold;
}



.subjects button:hover,
.subjects button:focus {
	color: #fff;
	background: #39a3d4;
}

/*----------*/


.subjects a {
	color: #39a3d4;
}

.subjects a:hover, 
.subjects a:focus {
	color: #F7F7F7;
	background: #39a3d4;
}

.box {
	background: #F7F7F7;
	border-bottom: 1px solid #cecece;
	margin-bottom: 1.5em;
	box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.1);
}

.text {
	padding: 1.5em;
	text-align: justify;
}


/*----------*/
#hide-show1,
#hide-show2,
#hide-show3, 
#hide-show4 {
	padding: 1.5em;
	text-align: justify;
	display: none;
}



/*----------*/


.main-content p,
.sidebar p {
	line-height: 1.5em;
}


.box a {
	/*color: #a6a6a6;*/
	color: #323232;
}

.box a:hover,
.box a:focus {
	text-decoration: none;
	color: #39a3d4;
}






.analysis {
	/*width: 100%;*/
	text-align: left;
	/*background: #cecece;*/
	background: #F7F7F7;
	float: left;	
	margin: 0.5em;
	border-bottom: 1px solid #cecece;
	box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.1);
	text-align: justify;
}



.header {
	background: #a6a6a6;
	color: #fff;
	padding: 0.5em;
}

.header h2 {
	background: none;
	margin: 0;
	padding: 0.25em;
}


.text {
	padding: 0.5em;
}




/*table*/


table {
	background: #d7d7d7;
	/*border: 0.15em solid #333;*/
	border-collapse: collapse;
	border-radius: 0.5em;
	margin-bottom: 1em;
	text-align: left;
  font-size: 90%;
}

th, td {
	padding: 0.5em;
	border-bottom: 0.15em solid #fff;
	border-right: 0.15em solid #fff;
}

tr:last-child td {
	border-bottom: none;
}

.last-column {
	border-right: none;
}

.section {
  background: #BDBDBD;
}

.literatura a {
	color: #39a3d4;
	
}

.literatura a:hover,
.literatura a:focus {
	background: none;
	color: #fff;
}

/*------------*/







/* footer */

footer {
	font-size: 0.8125em; /* 13/16 */
}

.footer-nav {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0.9375em; /* 15/16 */
	padding-bottom: 0.625em; /* 10/16 */
	margin: 0;
	text-align: center;
	border-top: 1px solid #cecece ;
}

footer li:after {
  content: '/';
  margin: 0 0.3125em 0 0.3125em; /* 5/16 */ /* 5/16 */
  color: #a6a6a6;
}

footer li:last-child:after {
  content: ' ';
}

.footer-nav a {
  color: #a6a6a6;
  width: 6.25em; /* 100/16 */
  height: 2.1875em; /* 35/16 */
  text-align: center;
  text-transform: uppercase;
}


.footer-nav a:hover,
.footer-nav a:focus {
  color: #39a3d4;
}

.footer-nav li {
	display: inline;
}



/* design by */
.design {
	background: #39a3d4;
	color: #fff;
 	font-size: 0.875em; /* 14/16 */
	padding-top: 0.625em; /* 10/16 */
	padding-bottom: 0.625em; /* 10/16 */
	text-align: right;
	margin: 0px;
}

.design a {
	color: #fff;
}

.design a:hover,
.design a:focus {
  color: #000000;
}

footer i {
	margin: 0 0.625em 0 0.3125em; /* 10/16 */ /* 5/16 */
}


/* MEDIA QUERIES */


@media ( max-width: 980px) {
	/*.navigation-bar .container {
		padding-right: 0;
		padding-left: 0;
	}*/

	.navigation li:last-child {
		border-right: none;
	}
	.navigation li:first-child {
		border-left: none;
	}
}



@media ( max-width: 910px) {
	.main-content, 
	.degree {
		font-size: 90%;
	}
}




@media ( max-width: 880px) {
	.navigation a,
	.link a {
		text-transform: none;
	}
}

@media ( max-width: 820px) {
	.main-content, 
	.degree {
		font-size: 80%;
	}
}


@media ( max-width: 720px) {
	.main-content,
	.sidebar {
		float: none;
	}

	.main-content {
		height: 270px;
		width: 100%;
		margin: 0 auto;

	}

	.sidebar {
		margin: 1.75em auto;
		width: 70%;
	}
}



@media ( max-width: 720px) {
  .navigation,
  .link {
    float: none;
    font-size: 90%;
  }

	/*.navigation li {
		width:;
	}*/

	.navigation a {
		/*width: 100%;*/
		padding: 1em 0;
	}

	/*article {
	    font-size: 90%;
	  }*/

	.title {
		font-size: 1.775em;
	}
}

@media ( max-width: 650px) {
	.navigation,
	.link {
    font-size: 80%;
    }

@media ( max-width: 590px) {
	.navigation {
    font-size: 70%;
    }

    .container {
    	padding: 0 0.9em;
    }


	.contact-bar li{
		font-size: 70%;
	  }
	  
	 
	  .personal img {
		height: 10%;
		width: auto;
	  }
  
	  .personal li {
		padding-top: 0.7142857142857143em;
	  }
  
	  .eng {
		display: none;
	  }
  
	  .personal li:first-child:after {
		content: none;
	  }
  


@media ( max-width: 360px) {
	.navigation a {
    font-size: 68%;
    }

    .container {
    	padding: 0 0.4em;
    }

	.personal {
		width: auto;
	}

	.personal li:first-child {
		margin-bottom: 0.5em;
	}
	.contact-bar {
		height: 5.5em; /* 77/14 */
	}
}

@media ( max-width: 280px) {
	.title {
    font-size: 1.4em;
}

@media ( max-width: 225px) {
	.title {
    font-size: 1.1em;
}