/*        Media req for first.html                   */
  @media only screen and (min-width: 1400px) and (max-width: 1600px){
	body{
        width: 100vw;
        overflow-x: hidden;
    }
    #fr{
		width: 1200px;
	}
	.cabinet-list {
		width: 1200px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	  }
}
@media only screen and (min-width: 1000px) and (max-width: 1400px){
	.cabinet-list {
		width: 900px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	  }

    #fr{
		width: 900px;
		height: 500px;
	}
	.head-info {
	  flex-direction: column;
	  justify-content: center;
	}
	
	#kap, #zag_k {
	  margin-bottom: 10px;
	}
	.info-block {
		margin-bottom: 20px;
		margin-top: 3vh;
		width:700px;
	  }
}
@media only screen and (min-width: 700px) and (max-width: 999px){
	.btn_list {
		margin: 20px;
		padding: 20px;
		border: none;
		border-radius: 5px;
		background-color: #8167A9;
		color: white;
		font-size: 26px;
		cursor: pointer;
	  }
	#fr{
		width: 600px;
	}
	.cabinet-list {
		width: 500px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	  }

      .head-info, .main-info {
        padding: 5px;
        border-radius: 0;
  
      }
      
      #kap, #zag_k {
        font-size: 20px;
      }
      
      #det {
        font-size: 14px;
      }
      
      #zag_c {
        font-size: 30px;
		margin-left: 3%;
		width: 90%;
		text-align: justify;
      }
      #zag_i{
        font-size: 25px;
        width: 90%;
		text-align: justify;
		margin-left: 3%;
      }

      .info-block {
		margin-bottom: 20px;
		margin-top: 3vh;
		width:600px;
	  }
	 .infotext{
		width: 500px;
		text-align: center;
	 }
}
@media only screen and (min-width: 500px) and (max-width: 700px){
	.btn_list {
		margin: 25px;
		padding: 20px;
		border: none;
		border-radius: 5px;
		background-color: #8167A9;
		color: white;
		font-size: 26px;
		cursor: pointer;
	  }
	#fr{
		width: 490px;
	}
	.cabinet-list {
		width: 490px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	  }
	  #zag_c {
        font-size: 30px;
		margin-left: 3%;
		width: 90%;
		text-align: justify;
      }
      #zag_i{
        font-size: 25px;
        width: 90%;
		text-align: justify;
		margin-left: 3%;
      }
      .info-block {
		margin-bottom: 20px;
		margin-top: 1vh;
		width:400px;
	  }
	  .infotext{
		font-size: 30px;
		width: 400px;
		text-align: center;
	 }
}
@media only screen and (min-width: 400px) and (max-width: 500px){
	.btn_list {
		margin: 25px;
		padding: 20px;
		border: none;
		border-radius: 5px;
		background-color: #8167A9;
		color: white;
		font-size: 26px;
		cursor: pointer;
	  }
	#fr{
		width: 390px;
	}
	.cabinet-list {
		width: 390px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	  }
	  #zag_i{
		font-size: 25px;
		width: 300px;
	  }
      .info-block {
		margin-bottom: 20px;
		margin-top: 1vh;
		width:300px;
        
	  }
	  .head-info{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
	  }
	  .infotext{
		font-size: 20px;
		width: 300px;
		text-align: center;
		margin-top: 50px;
	 }
}
@media only screen and (min-width: 300px) and (max-width: 400px){
	.btn_list {
		margin: 25px;
		padding: 20px;
		border: none;
		border-radius: 5px;
		background-color: #8167A9;
		color: white;
		font-size: 26px;
		cursor: pointer;
	  }
	#fr{
		width: 250px;
	}
	.cabinet-list {
		width: 250px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	  }
	  #zag_i{
		font-size: 14px;
		width: 250px;
	  }
	  .info-block {
		margin-bottom: 20px;
		margin-top: 1vh;
		width:250px;
	}
	.infotext{
		font-size: 20px;
		width: 200px;
		text-align: center;
		margin-top: 70px;
	 }
}
@media only screen and (min-width: 150px) and (max-width: 300px){
	#fr{
		width: 190px;
		height: 300px;
	}
	.cabinet-list {
		width: 150px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	  }
	  #zag_i {
		font-size: 14px;
		width: 150px;
	  }
	  .infotext{
		font-size: 20px;
		width: 100px;
		text-align: center;
		margin-top: 80px;
	 }
	 .info-block {
		margin-bottom: 20px;
		margin-top: 1vh;
		width:150px;
	}
} 


/* style for naw */
@media only screen and (min-width: 500px) and (max-width: 999px){
.cd-header{
	background-color: #1f2029;
	height: 120px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.55);
}
.position_links{
	flex-direction: column;
	justify-content: space-around;
}
.info{
	margin-top: 20px;
}

.logo-wrap {
	position: absolute;
	display:block;
	left:0;
	top: 50px;
	cursor: pointer;
}
.logo-wrap a {
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-size: 30px;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #fff;
	transition : all 0.3s ease-out;
}
.switch-wrap p {
	font-weight: 600;
	width: auto;
	font-size: 20px;
	letter-spacing: 1px;
	line-height: 1;
	color: #8167a9;
	text-align: center;
	margin-top: 15px;
}

.nav__list-item {
	font-size: 5vh;
	font-weight: 900;
}}

@media screen and (max-width: 499px){

	.logo-wrap {
		position: absolute;
		display:block;
		left:0;
		top: 40px;
		cursor: pointer;
	}
	.logo-wrap a {
		cursor: pointer;
		font-family: 'Montserrat', sans-serif;
		font-weight: 900;
		font-size: 40px;
		line-height: 20px;
		text-transform: uppercase;
		letter-spacing: 2px;
		color: #fff;
		transition : all 0.3s ease-out;
	}
	.switch-wrap p {
		font-weight: 600;
		font-size: 26px;
		letter-spacing: 1px;
		line-height: 1;
		color: #8167a9;
		text-align: center;
		margin-top: 15px;
	}
	.text_information_about h1{
		width: 400px;
		font-size: 37px;
	}
	.text_information_about p{
		width: 360px;
		font-size: 30px;
	}
	.nav__list-item {
		font-size: 3vh;
		font-weight: 900;
	}
    }