@import 'https://fonts.googleapis.com/css?family=Open+Sans|Amarante|Gayathri|Playfair+Display|Uncial+Antiqua|Cookie' ;
{ 
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body, html {
background: #d0eaf9 url(images/st-olaves-outside.jpg) top center no-repeat;
background-size: cover;
margin: 0;
font-size:16px;

}
#policy {
	position:absolute;
margin: auto  ;
width:90%;
max-width:1100px;
	height:auto;
	z-index:100;
padding:30px;
	visibility: hidden;
	background-color: #d8d3c8;
border: 2px solid black;
-moz-border-radius: 15px 15px 15px 15px;
 border-radius: 15px 15px 15px 15px;
}
/*.xcontent-text {font-family: "Playfair Display", serif, times;font-size: 20px;letter-spacing: 1px line-height: 1.5;color:#092235;}*/

.content-text {font-family: "Open Sans", san-serif, arial  ;font-size: 1em;letter-spacing: 1px line-height: 1.5;color:#092235;}
.content-text a {color:#3c729a; font-weight:bold; }
.content-text a:hover {color:#606060; font-weight:bold;}
.footer-text {font-family: "Open Sans", san-serif, arial ;font-size: 12px;letter-spacing: 1px line-height: 1.5;color:#0b1319;}
.footer-text a { color:#3c729a; font-weight:bold;}
.footer-text a:hover {color: #606060;}
.content-text h1 {font-size: 1.5em;}

.safeguard-text {font-family: "Open Sans", san-serif, arial ;font-size: 22px;}
.safeguard-text a { color:#a9251f; font-weight:bold;}
.safeguard-text a:hover {color: #606060;}


.titletext {
font-family:'Cookie,Uncial Antiqua', times; serif;
font-weight:bold;
font-size: 23px;
text-align:center;
color:#144d75;
letter-spacing:-1.5px;
line-height:0.9;
margin-top: 10px;

}
.smalltext {font-family: Ranchers, Arial, Helvetica, sans-serif;	font-size: 18px;	 text-align: center; color:#144d75;	line-height:150% ;}

.titletext h1 {font-family:'Amarante', times; serif; font-size:65px;  color:#144d75; margin:5px; padding:0; }
.titletext h2 {font-family: times, serif; font-size:45px;  color:#144d75;  padding: 10px 0px 0px 0px; margin:0px}



#general-content {border-radius: 25px;background: url(images/tile1.png); margin: 30px auto; padding: 0px 30px;  max-width: 900px;}

#footer-content {border-radius: 25px;background: url(images/tile2.png);margin: 30px auto;padding: 10px 20px;  max-width: 900px; text-align: center;}

#safeguard-content { text-align: center;}



.picture-place {text-align:center; font-size:12pt;}
#smallcenter {display: none; width:90%; min-height:150px; margin:auto; background: #ffca6d; padding:15px;  text-align: center}


/*IMAGE STUFF*/
#pictures {width:90%; min-height:150px; margin:auto; background: #ffca6d; padding:15px
 
}

/*TESTING GALLERY*/

.tg_container  {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
}

.tg_item {
  flex-basis: 28%;
  object-fit: cover;
padding:5px;


}

.tg_item img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
border: 1px solid #b9aa9f 

}








/* END TESTING GALLERY*/



.flexbox_container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
}
.flexbox_item {
  flex-basis: 28%;
  object-fit: fill;
padding:5px;


}

.flexbox_item img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
border: 1px solid #b9aa9f 

}
#black {display:none }
/*END OF IMAGE STUFF */




/*BIG MENU STUFF*/

    #trans-nav { list-style-type: none; height: 44px; padding: 0; margin: 0; }
    #trans-nav { list-style-type: none; height: 44px; padding: 0; margin: 0; display:inline-block; }
    #trans-nav li { float: left; position: relative; padding: 0; line-height: 44px; background:#144d75; ;border-left: solid 1px #fff; }
	#trans-nav li:first-child { border-left: none; }
    #trans-nav li:hover { background-position: 0 -40px; }
    #trans-nav li a { display: block; padding: 0 1.2em; color: #fff; text-decoration: none;width:100px }
    #trans-nav li a:hover { color: #a3f1d7;  }
    #trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #144d75; list-style-type: none; padding: 20px; margin: 0; }
    #trans-nav li:hover ul { opacity: .9; }
	#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
	#trans-nav li:hover ul li { height: 30px; line-height: 20px; border-left: none; }
    #trans-nav li { -webkit-transition: all 0.2s; }
    #trans-nav li a { -webkit-transition: all 0.5s; }
    #trans-nav li ul { -webkit-transition: all 1s; }
    #trans-nav li ul li { -webkit-transition: height 0.5s; }
	
.big-menu-text {
font-family:'open sans', sans, ariel; font-size; 10px; font-color; darkblue;
}

	#big-menu  {color: #fff; background-color:#144d75;  text-align:center; width:100%; }
	#med-menu {width:600px; margin:auto}


/*

#big-menu a { color: #fff; background-color:#144d75; display: block; padding: 0.5em 1em; text-decoration: none; width:100px; }
#big-menu a:hover { color: #Fff; background-color:#507b9a; text-decoration:underline; }
#big-menu ul,
#big-menu ul li { list-style-type: none; padding: 0; margin: 0; }

#big-menu > ul { background: #144d75; text-align: center; }
#big-menu > ul > li { display: inline-block; border-left: solid 1px #aaa; }
#big-menu > ul > li:first-child { border-left: none; }
*/
.sub-menu {
  background: #144d75;
}

#large-sub-title {font-family:'open-sans', sans, ariel; font-size:15px; color:#144d75; padding:10px;  text-align:center;  }*/
/*END OF BIG MENU STUFF*/
/*NEW MEDIUM MENU */

    #medium-nav { list-style-type: none; height: 40px; padding: 3px; margin: 0; display:inline-block; }
    #medium-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; display:inline-block; }
   #medium-nav li { float: left; position: relative;  padding: 0 0px;  line-height: 40px; background:#144d75; ;border-left: solid 1px #fff; }
	#medium-nav li:first-child { border-left: none; }
    #medium-nav li:hover { background-position: 0 -40px; }
    #medium-nav li a { display: block; width: 75px; padding:  0 3px ; color: #fff; text-decoration: none;   }
    #medium-nav li a:hover { color: #a3f1d7;  }
    #medium-nav li ul { opacity: 0; position: absolute; left: 0; top: 40px; width: 73px; background: #144d75;; list-style-type: none; padding: 5px 1px; margin: 0; }
    #medium-nav li:hover ul { opacity: .8; width:79px }
	#medium-nav li ul li { float: none; position: static; font-size: .8em; height: 0;    }
	#medium-nav li:hover ul li { height: 30px; line-height: 15px; border-left: none; }

    #medium-nav li { -webkit-transition: all 0.2s; }
    #medium-nav li a { -webkit-transition: all 0.5s; }
    #medium-nav li ul { -webkit-transition: all 1s; }
    #medium-nav li ul li { -webkit-transition: height 0.5s; }

	#medium-menu  {font-family: sans, arial; color: #fff; background-color:#144d75;  text-align:center; width: 580px; margin:auto }









/*END OF NEW MEDIUM MENU */

/* MEDIUM MENU STUFF
.med-sub-menu-parent { position: relative; }

.med-sub-menu { 
  visibility: hidden; /* hides sub-menu */
  opacity: .5;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: translateY(-2em);
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.med-sub-menu-parent:focus .med-sub-menu,
.med-sub-menu-parent:focus-within .med-sub-menu,
.med-sub-menu-parent:hover .med-sub-menu {
  visibility: visible; /* shows med-sub-menu */
  opacity: 0.8;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}


#med-menu a { color: #fff; background-color:#144d75; display: block; padding: 0.5em 0.4em; text-decoration: none; width:90px; }
#med-menu a:hover { color: #Fff; background-color:#507b9a; text-decoration:underline; }
#med-menu ul,
#med-menu ul li { list-style-type: none; padding: 0; margin: 0; }

#med-menu > ul { background: #144d75; text-align: center; width:660px; margin:auto }
#med-menu > ul > li { display: inline-block; border-left: solid 1px #aaa; }
#med-menu > ul > li:first-child { border-left: none; }

.med-sub-menu {
  background: #144d75;
}
.med-menu-text {
font-family:'open sans', sans, ariel; font-size: 10pt; font-color; darkblue;
}
#med-sub-title {font-family:'open-sans', sans, ariel; font-size:15px; color:#144d75; padding:15px;  text-align:center;  }


END OF THE MEDIUM MENU STUFF*/

/*SMALL MENU STUFF */

.little-nav {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
	background-color: white;
	opacity: 0.9;
	color: #000;
	line-height: 2;
	text-align: left;
	padding:5px;
}

.little-nav a {
color: #000;
text-decoration:none;
}

.little-nav  :hover {
color: #3332db;
text-decoration:none;
}

.nav-holder{
	position:absolute;
	top:10px;
	left: 7px;
	overflow:hidden;
	max-height: 10px;
	max-width:30px;
	padding:10px;
z-index:1;
	transition: max-width 1s,max-height 2s;
	
}

.nav-holder:hover {
  max-height: 200px;
max-width: 200px;
}
/*END OF THE SMALL MENU STUFF */
/*SMALL MENU STUFF */

.little-nav {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
	background-color: white;
	opacity: 0.9;
	color: #000;
	line-height: 2;
	text-align: left;
	padding:5px;
}

.little-nav a {
color: #000;
text-decoration:none;
}

.little-nav  :hover {
color: #3332db;
text-decoration:none;
}

.nav-holder{
	position:absolute;
	top:10px;
	left: 7px;
	overflow:hidden;
	max-height: 10px;
	max-width:30px;
	padding:10px;
	transition: max-width 1s,max-height 2s;
	
}

.nav-holder:hover {
  max-height: 400px;
max-width: 200px;
}
/*END OF THE SMALL MENU STUFF */





/* STUFF TO MAKE THE SITE REACTIVE*/

#div1 {display:block;}
#div2 {display:none;}
#div3 {display:none;}

@media only screen and ( max-width: 1200px ) {
#div1{display:none; }
#div2{display:block;}
#div3{display:none;}
.content-text { font-size: 1em;}
.content-text h1 {font-size: 1.2em}
#general-content {border-radius: 25px;background: url(images/tile1.png);margin: 10px ;padding: 3px 20px;}
#footer-content {positon:absolute;top: 5px;left: 10px;border-radius: 25px;background: url(images/tile2.png);margin: 5px 30px;padding: 10px;}
}


@media only screen and (min-width: 1px) and ( max-width: 600px ) {
 html {
        -webkit-text-size-adjust: none;
     }

#div1{display:none; }
#div2{display:none;}
#div3{display:block;}

.safeguard-text {font-family: "Open Sans", san-serif, arial ;font-size: 20px;}
.content-text {font-size:1em;  text-size-adjust: 100%;}
.content-text h1 {font-size:1.1em;}
#general-content {min-width: 50px;border-radius: 25px;background: url(images/tile1.png); margin: 10px 10px; padding: 10px;}

#policy {
	position:absolute;
margin: auto  ;
width:90%;
max-width:1100px;
	height:auto;
	z-index:100;
padding:30px;
	visibility: hidden;
	background-color: #d8d3c8;
border: 2px solid black;
-moz-border-radius: 15px 15px 15px 15px;
 border-radius: 15px 15px 15px 15px;
}