/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

/* For iphone PORTRAIT: */
@media screen
	and (min-width: 320px) 
	and (max-width: 480px) {

header.header hgroup {height: 120px;}

.logo {width: 100px; margin-left: 10px;}

header span.tel {
	position: absolute;
	top: 103px;
	right: 13px;
	display: block;
	font-family: 'Arvo', serif;
	font-size: 24px;
	color: #000;
	}

header span.tel a {color: black;}

header span.tel a img {
	margin-right: 15px;
	position: static;
	width: 23px;
	height: auto;
	}

#two {padding: 0 10px 0 10px;}

.col, .mid-one, .mid-two, .col-right, .page article {
	margin: 20px auto 0 auto;
	float: none;
	clear: both;
	display: block;
	}

body.page main section, body.page main aside, body.blog main, body.single main, body.archive main, aside.sidebar {
	float: none;
	width: 100%;
	margin: 0 auto 0 auto;
	}

iframe {
	width: 100% !important;
	height: 30% !important;
	}

#footer {
	padding-top: 8px;
	clear: both;
	}

.site-info, .site-info p span, .site-info p strong {display: block; float: none; text-align: center;}

.site-info p span a {padding: 5px 0 5px 0; color: white; display: block; text-align: center;}

} 

/* For iphone LANDSCAPE: */
@media screen
	and (min-width: 480px) 
	and (max-width: 760px) {

header.header hgroup {height: 120px;}

.logo {width: 100px; margin-left: 10px;}

header span.tel {
	position: absolute;
	top: 103px;
	right: 13px;
	display: block;
	font-family: 'Arvo', serif;
	font-size: 24px;
	color: #000;
	}

header span.tel a {color: black;}

header span.tel a img {
	margin-right: 15px;
	position: static;
	width: 23px;
	height: auto;
	}

#two {padding: 0 10px 0 10px;}

.col, .mid-one, .mid-two, .col-right, .page article {
	margin: 20px auto 0 auto;
	float: none;
	clear: both;
	display: block;
	}

body.page main section, body.page main aside, body.blog main, body.single main, body.archive main, aside.sidebar {
	float: none;
	width: 100%;
	margin: 0 auto 0 auto;
	}

iframe {
	width: 100% !important;
	height: 30% !important;
	}

#footer {
	padding-top: 8px;
	clear: both;
	}

.site-info, .site-info p span, .site-info p strong {display: block; float: none; text-align: center;}

.site-info p span a {padding: 5px 0 5px 0; color: white; display: block; text-align: center;}

} 

/* For ipad: */
@media screen 
  and (min-width: 768px) 
  and (max-width: 1000px) 
  and (-webkit-min-device-pixel-ratio: 1) {

header.header hgroup {height: 120px;}

.logo {width: 100px; margin-left: 10px;}

header span.tel {
	position: absolute;
	top: 103px;
	right: 13px;
	display: block;
	font-family: 'Arvo', serif;
	font-size: 24px;
	color: #000;
	}

header span.tel a {color: black;}

header span.tel a img {
	margin-right: 15px;
	position: static;
	width: 23px;
	height: auto;
	}

#two {padding: 0 10px 0 10px;}

.col, .mid-one, .mid-two, .col-right, .page article {
	margin: 20px auto 0 auto;
	float: none;
	clear: both;
	display: block;
	}

body.page main section, body.page main aside, body.blog main, body.single main, body.archive main, aside.sidebar {
	float: none;
	width: 100%;
	margin: 0 auto 0 auto;
	}

iframe {
	width: 100% !important;
	height: 30% !important;
	}

#footer {
	padding-top: 8px;
	clear: both;
	}

.site-info, .site-info p span, .site-info p strong {display: block; float: none; text-align: center;}

.site-info p span a {padding: 5px 0 5px 0; color: white; display: block; text-align: center;}

}