@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
html, body {	
	position: relative;
	background-image: url(../left_sidebar.jpg);
	background-repeat: repeat;
	margin: 0;
	padding: 0;
	height:100%
	max-height: 100%;
	
}
body {
	overflow-x: hidden;
	-webkit-animation: androidbugfix infinite 1s
}

img{
	display: block;
	width: 100% \9;
	max-width: 100%;
	height: auto;
}
.pagination {
	position: absolute;
	z-index: 10;
	left: 30%;
	top: 0px;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 20px;
  height: 20px; 
  border-radius: 20px;
  background: #222;
  margin-right: 5px;
  opacity: 0.8;
  border: 1px solid #fff;
  cursor: pointer;
}
.swiper-visible-switch {
  background: #aaa;
}
.swiper-active-switch {
	background-color: #03C;
}

.scroll_frame {
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling:touch;
    width: 100%;
    height: 100%;
    border: 1px solid #e0e0e0;
}

.my_frame {
    width: 100%;
    height: 100%;
    border: none;
    vertical-align: top;
}

.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
 
.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 /* http://timpietrusky.com/advanced-checkbox-hack */
@-webkit-keyframes androidbugfix {
from {
padding:0
}
to {
	padding: 0
}
} /* http://timpietrusky.com/advanced-checkbox-hack */
#header {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	height: 4.0625em;
	background-image: url(../images/menu_bkgd.jpg);
}
#header label {
	padding: 0 0.125em;
	font: 2.875em/1.4375em Arial
}
#menu label {
	padding: 0 0.25em;
	font: 3.125em/1.375em Arial
}
#menu .sub-nav .toggle {
	padding: 0 0.3125em;
	font: 2em/2em Arial;
	top: 0
}
#header label:hover, #menu label:hover {
	color: #F90
}
#main-nav-check, #menu .sub-nav-check {
	position: absolute;
	top: -9999px;
	left: -9999px
}
.toggle {
	position: absolute;
	right: 0.15em;
	cursor: pointer;
	color: #FFF
}
.container {
	background: #fff;
	min-height: 100%;
	padding: 0;
	margin: 0
}
#menu{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 13.75em;
	z-index: 9999;
	left: -13.75em;
	background-image: url(../images/menu_bkgd.jpg);
}

#menu .sub-nav {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 13.75em;
	z-index: 9999;
	left: -13.75em;
	background-color: #036;
	
}
.container, #menu, #menu .sub-nav {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
	-webkit-transition: -webkit-transform .25s ease;
	transition: transform .25s ease
}
#menu ul {
	line-height: 2.75em;
	text-decoration: none;
	padding: 0;
	list-style: none;
	margin-top: 4.0625em;
	border-top: 1px solid #444;
	background-color: #036;
}
#menu li {
	border-bottom: 1px solid #444;
	font-family: Montserrat, sans-serif;
}
#menu li a {
	display: block;
	/*font-size: 0.875em;	*/
	padding-left: 1.5em;
	color: #fff;
	text-decoration: none;
	font-family: Montserrat, sans-serif;
	font-size: 12px;
}
#menu li a:hover, #menu .toggle-sub:hover {
	background-color: #069;
	color: #F90;
}
#menu .sub-nav {
	margin-top: -1px
}
#menu .sub-heading {
	margin-top: 4.0625em;
	padding-left: 1.3125em;
	color: #888
}
#menu .sub-heading:before {
	content: "";
	display: block;
	height: 1px;
	width: 13.75em;
	margin-left: -1.3125em;
	background-color: #069;
}
#menu .toggle-sub {
	font: bold 1em/2.75em Arial;
	color: #fff;
	background: #036;
	float: right;
	margin-top: -2.75em;
	width: 2.25em;
	border-left: 1px solid #444;
	cursor: pointer;
	text-align: center
}
.container, #menu, #menu .sub-nav {
	-webkit-transform: translate3d(0, 0, 0)
} /* http://davidwalsh.name/translate3d */
/* #### - corrects 'unfixing' bug in Safari - uncomment if you have position:fixed elements inside .container - #### */
/* @media screen and (-webkit-min-device-pixel-ratio:0) { .container { -webkit-transform:none !important } } */

/* #### - define ids of animated container, menu and sub-menus here - #### */
#main-nav-check:checked ~ .container, #main-nav-check:checked ~ #menu, #menu .sub-nav-check:checked ~ #teach-sub, #menu .sub-nav-check:checked ~ #teacher-sub, #menu .sub-nav-check:checked ~ #events-sub, #menu .sub-nav-check:checked ~ #gallery-sub, #menu .sub-nav-check:checked ~ #monasteries-sub,#menu .sub-nav-check:checked ~ #contact-sub,#menu .sub-nav-check:checked ~ #merits-sub {
	-webkit-transform: translate(13.75em, 0);
	-ms-transform: translate(13.75em, 0);
	transform: translate(13.75em, 0)
}
 @media ( min-width:60em ) { /* #### - switch to fancy desktop fly-out menu at 960px (960/16=60 - 16px being default browser font-size) - #### */
.container, #menu {
	-webkit-transform: translate(0, 0) !important;
	-ms-transform: translate(0, 0) !important;
	transform: translate(0, 0) !important
}
.wrapper {
	max-width: 78.75em;
	margin: auto;
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0)
}
.container {
	background: #222;
	padding-left: 13.75em
}
#menu {
	left: 0
}
#menu label, #header label, #menu .sub-heading {
	display: none
}
#menu .sub-nav {
	position: absolute;
	z-index: -9999;
	top: auto;
	margin-top: -2.75em;
	left: 0;
	bottom: auto;
	visibility: hidden;
	opacity: 0
}
#menu ul li a {
	background-color: #036;
} /* counteracts opacity so children don't ghost through parents */
#menu ul label {
	display: inline-block
}
#menu .toggle-sub, #menu .toggle-sub:hover {
	background: transparent
}
#menu ul {
	position: relative;
	margin-left: 0
}
#menu ul li:hover > label {
	color: #ccc
}
#menu ul li:hover > a {
	-webkit-transition: background-color .25s ease;
	transition: background-color .25s ease;
	background-color: #069;
} /* fade effect for modern browsers */
#menu ul li:hover > ul {
	position: absolute;
	left: 0;
	border-top: 0;
	visibility: visible;
	opacity: 1;
	-webkit-transform: translate(13.75em, 0);
	-ms-transform: translate(13.75em, 0);
	transform: translate(13.75em, 0);
	-webkit-transition: all .25s ease;
	transition: all .25s ease;
	background-color: #036;
}
#menu ul li:hover > ul:before {
	content: "";
	display: block;
	position: absolute;
	top: -1px;
	left: 0;
	height: 1px;
	width: 13.75em;
	background-color: #069;
}
#menu ul ul ul {
	margin-left: -1px
}
#menu ul ul li {
	border-left: 1px solid #444;
	border-right: 1px solid #444
}
}
.page-content {
	padding: 1em 2em;
	background-color: #FF9;
	font-size: 12px;
	font-weight: normal;
}
.page-content:after {
	display: block;
	content: '';
	height: 1px
} /* fixes bottom padding issue in IE10 */
code {
	display: block;
	background: #ebebeb;
	font-size: 0.875em;
	padding: 1em 2em;
	overflow-x: scroll;
	white-space: nowrap
}
img, object, embed, video {
	max-width: 100%;
}
article, aside, figure, footer, header, nav, section {
	display: block;
	margin: 20px;
	padding: 0px;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}
.podContent {
    margin-top:10px;
    width: 100%;
}

#contact {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
footer p {
	margin-left:5px;
}
#facebookTwitter {
	margin-right:5px;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
#contact {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
footer p {
	margin-left: 5px;
	font-size: 14px;
	text-align: center;
	font-weight: normal;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
#contact {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
footer {
	clear: both;
	color: #000;
	font-size: 14px;
	text-align: center;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 200px;
}
footer p {
	margin:0 0 5px 0;
}
#phone {
	font-weight:bold;
	color: #000;
}
#facebookTwitter {
	float:right;
	margin-right:25px;
}