body{
		margin:0;
		font_family:'Montserrat',sans-serif;
		
		font-size:15px;
		line-height:1.6;
		color:#333;
	}

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

	h1,h2,h3,h4,h5,h6{
		margin:0;
	}

	.container{
		width:90%;
		max-width:1200px;
		margin:0 auto;
	}

	.header{
		display:block;
		width:100%;
		height:100px;
		position:fixed;
		top:0;
		left:0;
		right:0;
		z-index:1000;
		background: #FFFFFF;
		
		box-shadow:0 0 5px;
	}

	.header_inner{
		margin-top:20px;
		margin-left:15px;
		margin-right:15px;
		
		display:flex;
		justify-content:space-between;
	}

	.header_logo{
		border:0;
		width:192px;
		height:65px; 
	}
	
	.left_checkbox input[type="checkbox"]{
		display:none;
	}
	
	.nav-container input[type="checkbox"]{
		display:none;
	}
	
	.topmenu{
		position:static;
		text-align: center;
		padding: 0 0 0 ;
		
	}
	
	.topmenu a{
		text-decoration: none;
		display: block;
		color: #222;
	}
	
	.topmenu ul{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.topmenu > li {
	  display: inline-block;
	  vertical-align:middle;
	  position: relative;
	}
	
	.topmenu > li > a {
	  position: relative;
	  padding: 0px 15px 10px;
	  font-family:'Times New Roman';
	  font-size: 1.4em;
	  
	  
	  line-height: 1;
	  letter-spacing: 1px;
	}
	
	.topmenu > li > a:before {
	  content: "";
	  position: absolute;
	  z-index: 4;
	  left: 50%;
	  top: 85%;
	  width: 15px;
	  height: 15px;
	  background: #358AFF;
	  border-radius: 50%;
	  transform: translate(-50%, 20px);
	  opacity: 0;
	  transition: .1s;
	}
	
	.topmenu li:hover a:before {
	  transform: translate(-50%, 0px);
	  opacity: 1;
	}
	
	.submenus{
		position:relative;
		width:100%;
	}
	
	.sub1{
		position:relative;
		width:200px;
		
		left:-20px;
		top:20px;
		
	}
	.sub2{
		position:relative;
		width:240px;
		
		left:120px;
		top:20px;
	}
	
	.submenu{
	  position: absolute;
	  index: 5;
	  padding: 15px 0 15px;
	  margin-top: 5px;
	  background: #0000FF;
	  border-radius: 15px;
	  box-shadow: 0px 5px 10px 5px #0088FF;
	  box-sizing: border-box;
	  visibility: hidden;
	  opacity: 0;
	  transition-duration: .30s;
	  text-align:center;
	}
	
	.submenu ul{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.submenu li{
		display: inline-block;
	}

	.submenu a {
	  font-family: 'Libre Baskerville', serif;
	  font-size: 16px;
	  text-transform:uppercase;
	  letter-spacing: 1px;
	  padding: 5px 10px;
	  transition: .2s linear;
	  color:white;
	  text-decoration: none;
	  display: block;
	}
	.submenu a:hover {
		background: #00479F; 
		border-radius:10px;
	}

@media (max-width:1100px){
	.header{
		height:100px;
		z-index:1;
		position:fixed;
	}
	
	.header_inner{
		height:10px;
	}
	
	
	.header_logo{
		position:relative;
		width:150px;
		height:55px;
		margin-top:15px;
		margin-left:10px;
	}
	
	
	
	.left_checkbox input[type="checkbox"]{
		position: fixed;
		display: block;
		height: 100%;
		width: 100%;
		top: 0px;
		bottom:0px;
		left: 0px;
		z-index: 2;
		opacity: 0;
		transition-duration: 0.5s;
		transform: translateX(-100%);
	}

	
	.nav-container input[type="checkbox"] {
		position: fixed;
		display: block;
		height: 105px;
		width: 310px;
		top: 0px;
		right: 30px;
		z-index: 6;
		opacity: 0;
		transition-duration: 0.5s;
		
	}
	
	
	
	.btn2 {
		position:absolute;
		width: 0px;
		height: 0px;
		top:40px;
		right:105px;
		transition-duration: 0.5s;
	}
	.btn2 .back{
		position: absolute;
		top:-15px;
		right:-45px;
		height: 55px;
		width: 55px;
		background-color: #00BFFF;
		z-index:4;
		border-radius:30px;
	}
	.btn2 .icon {
		transition-duration: 0.5s;
		position: absolute;
		height: 4px;
		width: 35px;
		top: 10px;
		background-color: #fff;
		z-index:5;
	}
	.btn2 .icon:before {
		transition-duration: 0.5s;
		position: absolute;
		width: 35px;
		height: 4px;
		background-color: #fff;
		content: "";
		top: -10px;
		z-index:5;
	}
	.btn2 .icon:after {
		transition-duration: 0.5s;
		position: absolute;
		width: 35px;
		height: 4px;
		background-color: #fff;
		content: "";
		top: 10px;
		z-index:5;
	}	
	
	.topmenu {
		position:absolute;
		padding-top: 200px;
		padding-right: 50px;
		padding-left:10px;
		padding-right:150px;

		margin-right: -80px;
		margin-top:-80px;
		
		/* right:10px; */
		right:-300px;
		/* right:0px; */
	
		background: #fff;
		height: 120vh;
		max-width: 600px;
		display: flex;
		flex-direction: column;
		
		z-index:3;
		
		/* transform: translate(100%); */
		
		
		transition: transform 0.01s ease-in-out;
		transition-duration:0.3s;
		box-shadow: -5px 0px 10px 0px #aaa;
	}
	
	.topmenu > li > a {
	  padding: 0px 0px 40px 40px;
	}
	
	.topmenu > li > a:before {

	  left: 0%;
	  top: 10%;
	  width: 15px;
	  height: 15px;
	  
	  transform: translate(-100%, 0px);
	  opacity: 0;
	  transition: .3s;
	}
	
	.topmenu li:hover a:before {
	  transform: translate(-10%, 0px);
	  opacity: 1;
	}
	
	.submenus{
		position:relative;
		height: 100%;
		width:100%;

		z-index:2;
	}
	
	.sub1{
		position:relative;
		left:-200px;
		top:100px;		
	}
	
	.sub2{
		position:relative;
		left:-240px;
		top:0px;		
	}

	
	.submenu {
	  padding: 15px 0 15px;

	  visibility: hidden;
	  opacity: 0;
	  transition-duration: .3s;
	}
	.topmenu > li:hover .submenu {
	  visibility: visible;
	  opacity: 1;
	  transform: translate(-27%, 0px);
	}

	
	.nav_link{
		font-size:18px;
		padding-bottom:10px;
	}
	
	.nav-container input[type="checkbox"]:checked ~ .topmenu {
	  transform: translateX(-100%);
	}

	
	.nav-container input[type="checkbox"]:checked ~ .btn2 .icon{
		transition-duration: 0.5s;
		transform: rotateZ(-180deg);
	}
	
	.nav-container input[type="checkbox"]:checked ~ .btn2 .icon:before{
		transform: rotateZ(-45deg) scaleX(0.5) translate(-26px, -6px);
	}
	
	.nav-container input[type="checkbox"]:checked ~ .btn2 .icon:after{
		transform: rotateZ(45deg) scaleX(0.5) translate(-26px, 6px);
	}
}

@media screen and (orientation:landscape) and (max-device-width: 1000px){
	.header{
		background:none;
		box-shadow:none;
		height:0px;
		z-index:1;
	}
	
	.header_inner{
		height:0px;
	}

	
	.header_logo{
		display:none;
	}
	
	.nav-container input[type="checkbox"] {
		width:100px;
		height:100px;
	}

	.topmenu{
		overflow-y:scroll;
		padding-bottom:150px;
	}
	
	.topmenu > li > a {
		padding: 0px 15px 40px;
	}
	
	.submenus{
		position:relative;
		height:100%;
		width:100%;

		z-index:2;
	}
	
	.sub1{
		position:relative;
		width:240px;
		left:-260px;
		top:120px;		
	}
	
	.sub2{
		position:relative;
		width:240px;
		left:-260px;
		top:-50px;	
	}
	
	.topmenu > li > a:before {
		top:5%;
	}
	
	
	
	
}
 /* @media screen and (orientation:portrait) { … } */
 /* @media screen and (orientation:landscape) { … } */


/* @media screen and (max-device-width: 1000px){ */
@media screen and (orientation:portrait)and (max-device-width: 1000px){
	
	.header{
		height:160px;
		z-index:1;
	}
	
	.header_inner{
		height:10px;
	}
	
	.header_logo{
		position:relative;
		width:250px;
		height:80px;
		margin-top:30px;
		margin-left:30px;
	}
	
	.nav_link:after{

		height:10px;

		top:50%;

	}
	
	.nav-container input[type="checkbox"] {
		position: absolute;
		display: block;
		height: 105px;
		width: 310px;
		top: 30px;
		right: 0px;
		z-index: 6;
		opacity: 0;
	}
	
	
	.left_checkbox input[type="checkbox"]{
		position: fixed;
		display: block;
		height: 100%;
		width: 100%;
		top: 0px;
		bottom:0px;
		left: 0px;
		z-index: 2;
		opacity: 0;
		transition-duration: 0.5s;
		transform: translateX(-100%);
	}
	

	.btn2 {
		position:absolute;
		width: 0px;
		height: 0px;
		top:54px;
		right:170px;
		transition-duration: 0.5s;
		z-index:3
	}
	
	.btn2 .back{
		position: absolute;
		top:-35px;
		right:-100px;
		height: 120px;
		width: 120px;
		background-color: #00BFFF;
		z-index:4;
		border-radius:60px;
	}
	
	.btn2 .icon {
		transition-duration: 0.5s;
		position: absolute;
		height: 9px;
		width: 80px;
		top: 20px;
		background-color: #fff;
		z-index:5;
	}
	.btn2 .icon:before {
		transition-duration: 0.5s;
		position: absolute;
		width: 80px;
		height: 9px;
		background-color: #fff;
		content: "";
		top: -20px;
		z-index:5;
	}
	.btn2 .icon:after {
		transition-duration: 0.5s;
		position: absolute;
		width: 80px;
		height: 9px;
		background-color: #fff;
		content: "";
		top: 20px;
		z-index:5;
	}	
	
	.topmenu {
		position:absolute;
		padding-top: 200px;
		padding-right: 50px;
		padding-left:10px;
		padding-right:150px;

		margin-right: -80px;
		margin-top:-80px;
		
		right:-500px;
	
		background: #fff;
		height: 120vh;
		max-width: 600px;
		display: flex;
		flex-direction: column;
		
		z-index:3;	
		
		transition: transform 0.5s ease-in-out;
		transition-duration:0.3s;
		box-shadow: -5px 0px 10px 0px #aaa;
	}
	
	.topmenu > li > a {
	  padding: 140px 0px 20px 100px;
	  font-size: 2.6em;
	}
	
	.topmenu > li > a:before {

	  left: 0%;
	  top: 70%;
	  width: 30px;
	  height: 30px;
	  
	  transform: translate(-100%, 0px);
	  opacity: 0;
	  transition: .3s;
	}
	
	.topmenu li:hover a:before {
	  transform: translate(0%, 0px);
	  opacity: 1;
	}
	
	.submenus{
		position:relative;
		height: 100%;
		width:100%;

		z-index:2;
	}
	
	.sub1{
		position:relative;
		width:450px;
		left:-450px;
		top:200px;		
	}
	
	.sub2{
		position:relative;
		width:450px;
		left:-450px;
		top:-50px;	
	}
	
	.submenu {
	  padding: 15px 0 15px;

	  visibility: hidden;
	  opacity: 0;
	  transition-duration: .3s;
	}
	.topmenu > li:hover .submenu {
	  visibility: visible;
	  opacity: 1;
	  transform: translate(-27%, 0px);
	}
	
	.submenu a {
	  font-size: 36px;
	  letter-spacing: 1px;
	  padding: 20px 10px 20px;
	}
	.submenu a:hover {
		border-radius:10px;
	}
	
	/* .nav { */
		/* position:absolute; */
		/* padding-top: 400px; */
		/* padding-right: 50px; */
		/* padding-left:40px; */
		/* padding-right:150px; */

		/* margin-right: -80px; */
		/* margin-top:-80px; */
		
		/* right:-500px; */
	
		/* background: #fff; */
		/* height: 120vh; */
		/* max-width: 600px; */
		/* display: flex; */
		/* flex-direction: column; */
		/* z-index:3; */
		
		/* /* transform: translate(100%); */ */
		
		
		/* transition: transform 0.5s ease-in-out; */
		/* box-shadow: -5px 0px 10px 0px #aaa; */
	/* } */
	
	.nav_link{
		font-size:45px;
		padding-bottom:80px;
	}
	
	/* .nav-container input[type="checkbox"]:checked ~ .nav { */
	  /* transform: translateX(-10%); */
	/* } */
	
	/* .nav-container input[type="checkbox"]:checked ~ .nav { */
	  /* transform: translateX(-10%); */
	/* } */
	
	.nav-container input[type="checkbox"]:checked ~ .btn2 .icon{
		transition-duration: 0.5s;
		transform: rotateZ(-180deg);
	}
	
	.nav-container input[type="checkbox"]:checked ~ .btn2 .icon:before{
		transform: rotateZ(-45deg) scaleX(0.70) translate(-30px, -18px);
	}
	
	.nav-container input[type="checkbox"]:checked ~ .btn2 .icon:after{
		transform: rotateZ(45deg) scaleX(0.70) translate(-30px, 18px);
	}

}