/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local("Lato Regular"), local("Lato-Regular"), url("/font/lato-v14-latin-regular.woff2") format("woff2"), url("/font/lato-v14-latin-regular.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local("Lato Bold"), local("Lato-Bold"), url("/font/lato-v14-latin-700.woff2") format("woff2"), url("/font/lato-v14-latin-700.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
  
* {
	margin:0; 
	padding:0
}

html {
	font-family:'Lato', Arial, sans-serif;
	background-color:rgb(245,245,245); 
}

body {
	background-color:white;
	width:50%;
	margin:0 auto;
	line-height:1.3rem;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

	body img {
		max-width:100%; 
		width:auto; 
		display:block
	}
	
	body .top {
		z-index:99;
		background-color:rgb(5,103,150);
		color:white;
		font-size:.9rem;
		padding:.3rem;
		position:fixed;
		text-decoration:none;
		border-radius:3px;
		bottom:1rem;
		right:1rem;
	}
	
	body .top:hover{
		font-weight:bold;
	}

main, header {
	width:calc(100% - 6rem); 
	margin:.5rem auto; 
	background-color:white; 
	padding:1rem 3rem; 
}

	main > .breadcrum > a{
		color:rgb(5,103,150);
		font-size:.8rem;
		text-decoration:none;
	}

main > ul {
	list-style-type:none
}
	
header {
	text-align:center;
}
	
	header > a{
		color:black;
		text-decoration:none;
		letter-spacing:.5px;
		word-spacing:5px;
		font-size:.9rem;
	}
	
	header > a::after{
		content: ' \25AA';
	}
	
	header > a:hover {
		font-weight:bold;
	}

	header > a:first-of-type{
		display:block;
	}
	
	header > a:first-of-type::after {
		content:'';
	}
	
	header > a:last-of-type::after{
		content:'';
	}
	
		header > a > img {
			padding:1rem 3rem;
			margin:0 auto;
			max-width:calc(80% - 6rem);
		}

article {
	width:100%; 
	padding:1rem 0; 
	display:block; 
	margin:1rem 0; 
	line-height:1.5rem; 
	word-wrap:break-word; 
}

	article > h1 {
		font-size:1.3rem;
		width:100%;
		display:block;
		color:rgb(80,80,80);
	}
	
	article > div {
		margin:1rem 0;
	}
	
	article > .clone_btn, article > .delete_btn  {
		background-color:white;
		padding:.5rem;
		margin-bottom:1rem;
		margin-right:1rem;
		cursor:pointer;
	}
	
	article > .clone_btn:hover, article > .delete_btn:hover  {
		border-width:2px;
	}
	
	article > .clone_btn {
		border:1px solid rgb(79,149,199);
		color:rgb(79,149,199);
	}
	
	article > .delete_btn {
		border:1px solid rgb(163,22,38);
		color:rgb(163,22,38);
	}

a:focus, a:hover{
	font-weight:bold;
}
	
footer {
	text-align:center;
	color:rgb(90,90,90);
	font-size:0.8rem;
	padding:1rem 0 0 0;
	margin:1rem 0 0 0;
	border-top:1px solid rgb(235,235,235);
}

	footer a {
		color:inherit; 
		text-decoration:none
	}
	
	footer a:hover {
		text-decoration:underline
	}

h1 {
	font-size:1.6rem;
	color:rgb(5,103,150);
	font-weight:bold;
	line-height:2rem;
	padding:0;
	padding-bottom:1rem;
}

h2 {
	font-size:1.1rem;
	padding:.8rem 0;
	color:black;
}

p {
	padding:.7rem 0;
}

label {
	display:block; 
	margin-top:1rem; 
	padding-left:0rem;
}

input, select, textarea {
	padding:1rem; 
	display:block; 
	border-radius:2px; 
	background-color:rgb(250,250,250);
	border:1px solid rgb(200,200,200); 
	box-shadow:none; 
	width:100%; 
	-webkit-box-sizing: border-box;  
	-moz-box-sizing: border-box;  
	box-sizing: border-box; 
	font-family:'Lato', Arial, sans-serif;
}

	input:focus, select:focus, textarea:focus, input:hover, select:hover, textarea:hover {
		border-bottom:3px solid rgb(79, 149, 199);
		background-color:White;
	}

input[readonly]{
	border-color:black;
	background-color:grey;
	color:white;
}

	input[readonly]:hover, input[readonly]:focus{
		border:1px solid black;
		cursor:none;
	}

input[type=submit] {
	-webkit-appearance: none;
	background-color:rgb(79, 149, 199); 
	color:white; 
	border:none; 
	font-weight:bold; 
	padding:2%; 
	margin-top:3%;
}

	input[type=submit]:hover, input[type=submit]:focus {
		background-color:rgb(5,103,150);
	}

input[type=checkbox], input[type=radio] {
	display:inline-block; 
	border:1px solid black;
	width:auto; 
	margin-right:0.5rem
}

input[type=hidden] {
	padding:0;
	margin:0;
}

progress {
	background-color:rgb(225, 226, 225); 
	border:none; 
	-webkit-appearance: none; 
	width:100%; 
	height:4px; 
	margin:1% 0;
}

progress::-moz-progress-bar {
	background-color:rgb(111, 208, 140)
}

details {
	cursor:pointer;
	font-size:0.9rem;
	width:calc(100% - 1rem);
	margin-bottom:1rem;
}

details[open]{
	padding:.5rem;
	background-color:rgb(245,245,245);
}

	details > summary {
		display:block;
		font-weight:normal;
	}
	
	details[open] > summary{
		font-weight:bold;
		padding-bottom:1rem;
	}
	
	details > summary::-webkit-details-marker {
		display: none;
	}
	
	details > ul {
		list-style-type:none;
	}
	
		details > ul > li > a{
			color:rgb(80,80,80);
			text-decoration:none;
		}
		
		details > ul > li > a:hover{
			font-weight:bold;
		}

video {
	margin:1rem 0;
}

video:focus, video:hover{
	border: 3px solid rgb(5,103,150);
	width:calc(100% - 6px);
}
		
@media only screen and (min-width:800px) and (max-width:1100px){
	body {
		width:70%;
	}
}

@media only screen and (max-width:799px) {
	body {
		width:100%;
	}
	
	main, header {
		width:calc(100% - 2rem); 
		margin:.5rem auto; 
		background-color:white; 
		padding:1rem 1rem; 
	}
	
	header > a > img {
		padding:1rem 1rem;
		margin:0 auto;
		max-width:calc(100% - 2rem);
	}
	
	header > a {
		font-size:.8rem;
	}
	
	p {
	line-height:2rem;
	}
	
}