body { 
	color:#333333; 
	font-size:100%;
	margin:0px 25px 0px 0px; padding:0px;
	background: linear-gradient(181deg, #82B8DA 0%, #A4C5C4 45%, #B5AEC4 80%);

	font-family:Georgia,arial; 
	font-size:1.1rem;
}
body, html { 
	
	display:block;
}
.reset { 
	display: block;
	font-size: 0px;
	line-height: 0px;
	height: 0.1px;
	overflow: hidden;
	clear: both;
}
.center {text-align:center;}
.instagram-link {padding:2px 0px 2px 25px; background:url('../img/instagram.png') no-repeat left center;}
.facebook-link {padding:2px 0px 2px 25px; background:url('../img/facebook.png') no-repeat left center;}

.fb-box, 
.in-box,
.wa-box {
	width:250px; height:300px; 	
	background-repeat: no-repeat; 
	background-position: center center;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;	
    background-size:cover; 
    background-image:url('../img/face2.png');
    -moz-transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity: 0.5;
    display:inline-block;
   
}
.fb-box:hover, 
.in-box:hover,
.wa-box:hover {
	opacity: 1;
}
.in-box { background-image:url('../img/insta2.png');}
.wa-box { background-image:url('../img/whats.png');}
.social a, .social a:hover {text-decoration:none;  border:none;}

h1 { 
	margin:0px 0px 10px 0px; 
	font: italic normal 46px Georgia,arial; 
	padding:0px; 
	font-family:cursive;
	color:#1E2D51;
}
h1 a.logo {
	background:url('../img/arttepa.png') no-repeat center center;
	background-size:contain;
	display:inline-block;
	width:180px;
	height:180px;
	text-decoration:none;
	border:none;
	position:relative;
	top:30px;
} 
h1 a.logo em {display:none;}
h1::after{
	display:block;
	content:'';
	border-bottom:solid 1px #1E2D51;
	position:relative;
	top:-12px;
	margin-left:88px;
	opacity:0.8;
}

h2 { 
	margin:0px 0px 30px 0px; 
	padding-left:0px;	
	padding-top:10px;
	font-family:cursive;
}
h2.underline { border-bottom:solid 1px #1E2D51; padding-bottom:3px;}
 
header h2 { color:#f746b5; text-shadow:0px 1px 1px #fff; padding-top:0px; }
header, section, footer { display:block; }
header { margin-bottom:20px; position:relative;}

#menu {
	list-style:none;
	margin:0px;
	padding:0px;
	font-family:cursive;
	position:absolute;
	display:block;
	top:30px;
	right:0px;
}
#menu li {
	float:left;
	margin-left:20px;
	font-size:1.4rem;
} 
#menu li a, 
#menu li a:visited {
	color:#1E2D51;
}

dfn {
	padding:2px 5px;
	border:solid 1px #999;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
	background-color:#fff;
	font-family:courier;
	font-style:normal;
}
#page { margin:0px 20px; padding:0px 30px; }
#page .content {
	/* background:#fff; */
	padding:20px 0px 20px 20px;
	margin:0px 0px 20px 65px;
	color:#222;	
	line-height:1.6rem;
		
}

.circle-photo {
	width:140px;
	-webkit-clip-path: circle(65px at center);
	clip-path: circle(65px at center);
	float:left;
	margin:5px 30px 20px 0px;
 	/* clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); */
}

.picture, .picture-portrait {	
	height:400px; 
	width:70%;
	    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    float:left;
}
.picture-portrait {width:30%;}

p {  margin:0px 0px 20px 0px; padding:0px;  }
hr { display:none; }
footer { padding:25px 0px 10px 25px; font-style:italic; font-size:0.9em; }
a, a:visited { color:#000; border-bottom:solid 1px #333; text-decoration:none; }
a:hover { border-bottom:none;  }

.tl { padding-top:30px;}

@media only screen and (max-width: 960px)
{
#page { padding:0px 15px 0px 0px; }
.picture {width:65%; height:300px;}
.picture-portrait {width:35%; height:300px;}

}
@media only screen and (max-width: 820px)
{
#page {  margin-left:0px; }
h1 {font-size:35px;}
}
@media only screen and (max-width: 680px)
{
	.picture, .picture-portrait {width:100%; height:300px; float:none;}
	.picture-portrait {height:800px;}
	
}
@media only screen and (max-width: 580px)
{
	header {margin-bottom:30px;}
	#menu {position:relative; width:100%; text-align:center; clear:both; top:0px; }
	#menu li {float:none; display:inline-block; margin:0px 15px;}
	h1 a.logo {display:block; width:auto; top:5px; margin-bottom:20px;}
	h1 {text-align:center; margin-bottom:20px;}
	body {margin:0px;}

#page { padding:0px 0px; margin:0px;}
#page .content {padding:0px; margin:0px 0px 10px 0px;}
h1::after {display:none;}
#page .content {text-align:center;}
h2 {text-align:center; font-size:1.6rem; margin:0px 20px 20px 20px;}
.content p {margin:0px 20px 20px 20px; }
.circle-photo {float:none; margin:0px auto 20px auto;}

}