*{margin:0; padding: 0;}

body{
	background-color: #fff;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: Lato;
}
.wrapper{
	flex-grow: 1;
}

a{text-decoration: none; color: #333;}

h1{
	font-size: 2.441rem;;
	font-weight: 500;
    margin: 40px 0 20px 0px;
	text-align: center;}

h2
{
	font-family: 'Lato','Helvetica','Arial', sans-serif;
	font-weight: 400;
	margin: 50px 0 10px;
	font-size: 1.6rem;
	hyphens: none;
	line-height: 1.5em;
	text-align: center;}

h3,
h4{
	font-family: 'Lato','Helvetica','Arial', sans-serif;
	font-weight: 300;
	margin: 20px 0 10px;
	font-size: 1.4rem;
	hyphens: none;
	line-height: 1.5em;
	text-align: center;}

.container{max-width: 1060px; margin: 0 auto;}

.flex-block{display: flex;}

/*main menu*/

header{
	border-bottom: 1px solid #eaeaea;
	padding: 10px;}

main p{
	font-size: 1.2rem;
    font-family: Lato;
    font-weight: 400;
    line-height: 1.65em;
    padding-bottom: 8px;
    hyphens: none;
	margin-bottom: 4px;}

main ul{margin-left: 45px;}	

main li{
	font-size: 1.2rem;
    font-family: Lato;
    font-weight: 400;
    line-height: 1.65em;
    padding: 2px 0;
    hyphens: none;
	margin-bottom: 4px;}

main aside{
	color: #fff;
	text-align: center;
	padding: 17px 0;
	font-size: 27px;}

main aside img{margin-right: 10px;}

main ul{margin-left: 25px;}

main article{max-width: 700px; margin: 0 auto; padding: 0 10px;}

main article strong {font-size: 20px; margin-bottom: 20px;}


main .sb-nav{
	margin-top: 25px;
	max-width: 680px;	
}
main .sb-nav ul li{
	line-height: 1.3;
	font-size: 1.1rem;
	list-style: circle !important;
}

main .sb-nav ul li a{
	color: #2197FF;
}


.dwld-btn{
	text-decoration: none;
	color: #fff;
	background: #2197FF;
	font-size: 20px;
	padding: 10px 35px;
}

.dwnld-title{
	color: #2197FF;
	font-weight: 600;
	font-size: 27px;
}

.sb-nav .sb-title{
	text-align: center;
	font-size: 18px;
	margin: 25px 0px 10px 0px;
	padding-bottom: 10px;
	border-bottom: 1px solid #333;
}

.main__menu{
	display: flex; 
	justify-content: center;}

.main__menu li{
	list-style:none;
	display: flex;
	flex-grow: 0.5;
}


.main__menu li:first-child{
	flex-grow: 5;
}


.main__menu li a{
	display: block;
	padding: 10px;
	text-decoration: none;
	color: #333;}

.main__menu li a:hover{transition: 0.5s; color: #2197FF;}


/*mobile menu*/
.hamburger-mob-menu{display: none;}

#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
}

.menu__btn {
  display: flex;
  align-items: center;
  position: relative;
  top: 0px;
  left: 20px;

  width: 26px;
  height: 26px;

  cursor: pointer;
  z-index: 1;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;

  width: 100%;
  height: 2px;

  background-color: #616161;

  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}

.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;

  width: 300px;
  height: 100%;

  margin: 0;
  padding: 80px 0;

  list-style: none;

  background-color: #ECEFF1;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);

  transition-duration: .25s;
}

.menu__item {
  display: block;
  padding: 12px 24px;

  color: #333;

  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;

  text-decoration: none;

  transition-duration: .25s;
}
.menu__item:hover {
  background-color: #CFD8DC;
}

main .table-content{margin-top: 15px;}

main .table-content li{
	margin-bottom: 5px;
	list-style: circle;
	font-size: 1.1em;
}

main .table-content li a,
main article a{
	color: #2197FF;
}


main .coll-pack-list li,
main .coll-pack-list li p{
	margin-bottom: 2px;
}

.author-block{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 5px 0;}


.author-block .author-icon img{
	max-width: 130px;
	margin: 10px 20px;}


.author-block p{
	font-size: 1.2rem;
    font-family: 'Georgia', serif;
    font-weight: 400;
    line-height: 1.4em;
    padding-bottom: 8px;
    hyphens: none;
	margin-bottom: 10px;}

.author-block h3{
	font-weight: 400;
	margin: 10px 0 10px;
	font-size: 1.4rem;
	hyphens: none;
	line-height: 1.5em;
	text-align: left;
}

.author-block a{
	text-decoration: underline;}

.author-block a:hover{
	transition: 0.5s; color: #2197FF;}

.articles-list {margin-left: 15px;}

.articles-list li p a{
	color: #2197FF;}

.articles-list li p{
	margin-bottom: 8px;
}

.related-links{
	margin-top: 35px;
}

/*faq*/
.faq-quest{
	border: 1px solid #ccc;
	margin: 0 0 10px 0;
	border-radius: 15px;
	padding:5px 15px 5px 15px;
}
.answer-box{
	display: none;
}
.open{
	display: block;
	padding: 5px 0px;
	cursor: pointer;
	font-size: 20px;
	text-align: center;
	font-weight: 900;
}
.open:hover{
	text-decoration: none;
	color: #0088ff;
}


footer{
	text-align: center;
	padding: 40px 0;
	margin-top: 30px;
	background-color: #eeeeee;}




/*media query*/

@media screen and (max-width: 1050px){
	.flex-block{display: flex;
		flex-direction: column;
		justify-content: center;
	}

	main .sb-nav{margin: 10px auto;}

}

@media screen and (max-width: 475px){
	.hamburger-mob-menu{display: block;}

	.main__menu{display: none;}

	header{
    padding: 10px 10px 27px 10px;}

    .author-block .author-icon img{
	display: none;}
}