@charset "UTF-8";
/* CSS Document */
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html { height: 100%;padding: 0px;margin: 0px; color: #777;background-color: #ffffff !important;line-height: 1.5; font-size:14px;}
hr {padding:0px;margin: 0px;border: 1px solid #aaa;overflow: visible;}
*, *::before, *::after {box-sizing: border-box;}




.lorem	{padding:2px 12px 12px 12px; text-align: left;}
.loremleft	{padding:2px 12px 12px 12px; text-align: left;}
@media screen and (max-width:801px){.midipix {width: 100%; height: auto;}}
@media screen and (max-width:601px){.smallpix {width: 100%; height: auto;}}
@media screen and (max-width:480px){.smallpix {width: 100%; height: auto;}}

.framefix {font-size: 10px;font-family: Arial;text-decoration: none;}
.framefix a:link {font-size: 10px;font-family: Arial;text-decoration: none;font-weight: normal;}
.framefix  a:hover { color:#000066; }
.framefix a:visited { font-size: 10px; font-family: Arial; text-decoration: none;font-weight: normal;}

.imgresp {width: 100%; height: auto;}
.imgrespslide {max-width: 50%;height: auto;}

.clean { margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}	
.cash {color:#000000;font-weight:bold;}

#container {max-width: 940px;height:inherit;z-index: 1;left: 0em;top: 1em;position: relative;margin: auto;padding: 0px;border: 1px solid #aaa;overflow: visible;background-color:#FFFFFF;	
}
	
section {padding-top: 32px !important;padding-bottom: 32px !important;padding-right: 16px;padding-left: 16px;margin-left: auto; margin-right: auto; max-width: 98%;height:auto;	background-color: #ffffff !important;   }
	
.box {margin:2px;padding: 2px 2px 2px 2px;border: 1px solid #aaa;background-color: #FFFFFF;font-family: "Lato", sans-serif;font-size: 14px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);max-width: 100%;height: auto;}

.textbox{font-size: 1.5vw;}
@media screen and (max-width:800px){.textbox {font-size: 2vw !important;}}

.profbox {margin: 20px 0px 12px -6px ; padding: 12px; border: 1px solid #aaa; background-color: #FFFFFF; font-size: 1vw;}

.boxcol {margin:2px;padding: 0px;border: 1px solid #aaa;background-color: #FFFFFF;font-family: "Lato", sans-serif;;font-size: 14px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);max-width: 100%;height: auto;}
.colbox {display: inline-block; float:left; padding:8px; border: 1px solid #aaa;font-size:14px;line-height: 1.2; }
.colboxtopbanner {font-size: 16px;color :#FFFFFF;margin: 0px 0px 4px 0px;padding: 2px 2px 2px 12px;border-bottom:1px solid #aaa;background-color: #3C77BF;}
.colboxbanner {font-size: 16px;color :#FFFFFF;margin: -8px -8px 4px -8px;padding: 2px 2px 2px 12px;border-bottom:1px solid #aaa;background-color: #3C77BF;}
@media screen and (max-width:800px){.colbox {font-size: 1.5vw !important;}}
@media screen and (max-width:700px){.colbox, .textbox {font-size: 2vw !important;}}
@media screen and (max-width:600px){.colbox, .textbox {font-size: 2.5vw !important;border:none; }}
@media screen and (max-width:480px){.colbox, .textbox {font-size: 3vw !important;}}

.logo {letter-spacing: 1vw;color: #fff !important;background-color: #000 !important; padding: 12px 24px !important;text-align: center !important; font-size: 2.2vw !important;animation: opac 0.8s;}
@media screen and (max-width:800px){.logo {padding: 10px 20px !important;font-size: 2.5vw !important;}}
@media screen and (max-width:700px){.logo {padding: 8px 16px !important;font-size: 3vw !important;}}
@media screen and (max-width:600px){.logo {padding: 4px 16px !important;font-size: 5vw !important;}}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6 {
    background-attachment: scroll;
    min-height: 400px;
  }
}	
/* End of Parallax Effect */




.button:hover{color:#ffffff!important;background-color:#3147BB!important;}

.w3-animate-fading{animation:fading 3s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 3s}@keyframes opac{from{opacity:0} to{opacity:1}}



#dbc {font-size: 1.25vw !important;
  width:fit-content;background-color:#FFFFFF!important;opacity:1;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);z-index:-2;
	
}


#myNavbar{font-size: 1.25vw !important;}
@media only screen and (max-width:1060px){#myNavbar{font-size: 1.4vw !important;} #dbc{font-size: 1.4vw !important;} .w3-bar .w3-bar-item {padding: 4px 8px;}}
@media only screen and (max-width:700px){#myNavbar{font-size: 1.7vw !important;} #dbc{font-size: 1.7vw !important;} .w3-bar .w3-bar-item {padding: 4px 3px;}}
@media only screen and (max-width:601px){#myNavbar{font-size: 15px !important;} #dbc{font-size: 15px !important;} .w3-bar .w3-bar-item {padding: 8px 16px;}}

.small-bar-item{color:#000000!important;width:100%;display:block;padding:2px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.small-button{color:#ffffff!important;background-color:#3C77BF!important;}
.small-button:hover{color:#ffffff!important;background-color:#3147BB!important;}

.hidenseek {display:none;}	
	
/* link styling */
a, a:hover, a:visited { text-decoration:none;color:inherit;}

.loremleft a {color:#000066; text-decoration: none;font-weight:bold;}
.loremleft a:hover {color: #3C77BF;}
.box a { color: #000066;text-decoration: none;font-weight:bold;}	
.box  a:hover {color: #3C77BF;}
.colbox a { color: #000066;text-decoration: none;font-weight:bold;}
.colbox a:hover { color: #3C77BF;text-decoration: none;font-weight:bold;}
.profbox a { color: #000066;text-decoration: none;font-weight:bold;}
.profbox a:hover { color: #3C77BF;text-decoration: none;font-weight:bold;}

.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:#FFFFFFF;text-align:center;cursor:pointer;white-space:nowrap;}

.jazz-blue,.jazz-hover-blue:hover{color:#fff!important;background-color:#3C77BF!important}
.jazz-red,.jazz-hover-red:hover{color:#fff!important;background-color:#D64858!important}	
.jazztext {color: #000066;}
.jazzpacity {opacity:0.75!important}	

/* box headings */
.midhead a { font-size: 16px; font-weight: normal;}

.midheadb {font-size: 16px;color: #000066;text-decoration: none; font-weight: bold;}

.midheadb  a:hover {font-size: 16px; color:white; font-weight: bold; text-decoration: none;}

.midheadbold { font-size: 16px;color: #000066; text-decoration: none; font-weight: bold;}
	
.midheadbold a:hover {font-size: 16px; font-weight: bold;text-decoration: underline;}

.topbanner {font-size: 16px;margin-top: 2px;margin-right:2px;margin-left:2px;color :#FFFFFF;padding: 2px;border: 1px solid #aaa;
background-color: #3C77BF;}
	
.banner {font-size: 16px;margin-top: 2px;margin-right:2px;margin-left:2px;color :#FFFFFF;padding: 2px;border: 1px solid #aaa;background-color: #3C77BF;}

.facbanner {font-size: 16px;float:left;margin-left:2px;color :#FFFFFF;padding: 2px 690px 2px 2px;border: 1px solid #aaa;background-color: #3C77BF;}
	
.bookbanner {font-size: 16px;float:left;margin-left:2px;color :#FFFFFF;padding: 2px 505px 2px 2px;border: 1px solid #aaa;background-color: #3C77BF;}

.banner a {font-size: 16px;color: #FFFFFF;text-decoration: none;font-weight: normal;}
	
.banner a:hover {font-size: 16px;text-decoration: underline;}
	
.bannerint {font-size: 16px;color :#FFFFFF;margin: -2px -2px 4px -2px;padding: 2px 2px 2px 12px;border-bottom:1px solid #aaa;background-color: #3C77BF;}
.bannerlong {font-size: 16px;color :#FFFFFF;margin: -2px -2px 4px -2px;padding: 2px 2px 2px 12px;border-bottom:1px solid #aaa;background-color: #3C77BF;}
.bannertop {font-size: 16px;color :#FFFFFF;margin: -2px -2px 4px -2px;padding: 2px 2px 2px 12px;border-bottom:1px solid #aaa;background-color: #3C77BF;}
.bannerbook {font-size: 16px;color :#FFFFFF;margin: -2px -2px 4px -2px;padding: 2px 2px 2px 12px;border-bottom:1px solid #aaa;background-color: #3C77BF;}

.bannerint a {font-size: 16px;color: #FFFFFF;text-decoration: none;font-weight: normal;}
  
.bannerint a:hover {font-size: 16px;text-decoration: underline;}

.bannertipeee {font-size: 16px;color :#FFFFFF;margin: -2px -2px 4px -2px;padding: 2px 2px 2px 12px;border-bottom:1px solid #aaa;background-color: #D64858;}
	
.bannertipeee a {font-size: 16px;color: #FFFFFF;text-decoration: none;font-weight: normal;}
  
.bannertipeee a:hover {font-size: 16px;text-decoration: underline;}

.formall {font-size: 16px;font-weight: bold;margin-right: 5vw; vertical-align:top;}
.formlore {padding:12px; text-align: left;font-size: 16px;}
.formnorm {font-size: 12px;text-align: left!important;}
.formnormal {font-size: 16px;text-align: left!important;}

@media screen and (max-width:601px){.colboxtopbanner,.bannerint,.bannerint a,.bannerint a:hover,.bannertipeee,.bannertipeee a,.bannertipeee a:hover, .formall, .formlore, .formnormal, .formnorm, .colboxbanner, .bannerlong   {font-size: 2.7vw;}}

@media screen and (max-width:500px){.midheadb,.midheadb a,.midheadb a:hover {font-size: 3.1vw;}}
@media screen and (max-width:460px){.bannerint,.bannerint a,.bannerint a:hover,.bannertipeee, .bannertipeee a,.bannertipeee a:hover, .formall, .formlore, .formnormal, .formnorm  {font-size: 3.1vw;}}
	
.textwrapRG {float:right ;padding:8px 12px;}

.textwrapR {float:right ;padding: 8px;}
.textwrapLS {float:left ;padding: 8px 8px 0px 0px;}

.textwrapR1 {float:right ;padding:2px 2px 2px 5px ;}
	
.textwrapR2 {float:right ;margin:auto;padding:0px 0px 5px 5px ; }
	
.textwrapL {float:left ;margin-right: 5px;}

.textwrapL1 {float:left ;padding:2px 5px 2px 2px ;}

.tw {padding:2px 0px 2px 0px ;margin: 2px 0px 2px 0px;}
	
.tw1 {float:right ;width:435px;padding: 2px ;margin: 2px ;}	

.tw2 {float:left ; width:435px;padding: 2px ;margin: 2px ;}
		
.w3-wide {letter-spacing: 10px;}

.w3-hover-opacity {cursor: pointer;}

.display-middle{position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size: 2.2vw !important;}

#fanchon {background-image:url(../images/fanchonchateau.jpg);width: 100%; height: auto;background-repeat: no-repeat;
  background-size: cover;margin:8px 12px 2px 0px;}

/* SLIDES */
.w3-bar-block .w3-bar-item {width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-animate-fading{animation:fading 3s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

.marginal{margin-top: 12px;}

.players, .chateau, .monty2, .players2, .smile, .smile2, .rooms2 {
  background-image:url(../pages/slimages/slidemonty45.jpg);
  width: 305px;
  min-height: 229px;
  margin:8px 12px 2px 0px;
	line-height:1 ;
}

.voxport {
  background-image:url("../voxport/vox6611.jpg");
  width: 180px;
  height: 272px;
  margin:6px;
	line-height:1 ;
}

.voxportsmall {
  background-image:url("../voxport/vox6611.jpg");
  width: 135px;
  height: 204px;
  margin:8px 12px;
	line-height:1 ;
	float:right ;
}

.voxportmedium {
  background-image:url("../voxport/vox6611.jpg");
  width: 135px;
  height: 204px;
  margin:8px 12px;
	line-height:1 ;
	float:right ;
}

.monty {background-image:url(../pages/slimages/slidemonty45.jpg);
  width: 305px;
  height: 229px;
  margin:8px 12px 2px 0px;
	line-height:1 ;
}
.vidsmall {margin:8px 2px; line-height:1 ;}
.vidsleft {margin:8px 8px 2px 2px; line-height:1 ;}
.players {margin:6px 12px 0px 0px; }
.snippets {margin:6px 12px 0px 0px; max-width:525px; }
.andrea {margin:6px 12px 0px 0px; max-width:300px; }
.supersmall{display:none;}

@media screen and (max-width:711px){.snippets,.andrea {width: 100%;height: auto;margin-bottom: 12px; max-width:100%;}}
@media screen and (max-width:520px){.monty,.players,.andrea, .rooms,.chateau,.monty2, .rooms2, .players2, .smile, .smile2 {width: 100%;height: auto;margin-bottom: 12px;}}
@media screen and (max-width:520px){.textwrapL, .textwrapR  {float:none ;margin: inherit;}}
@media screen and (max-width:520px){.hide-supersmall {display:none;}.supersmall{display:block;}}

.formcontainer {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
/* CSS for columns */
.row2 {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 12px;
}
.fifthrow {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0px;
}
/* Create three equal columns that sits next to each other */
.column {
  -ms-flex: 33.33%; /* IE10 */
  flex: 33.33%;
  max-width: 33.33%;
  padding: 0 12px;
}

/* Create two equal columns that sits next to each other */
.columntwo {-ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 50%;
  padding: 0 12px;}
	
.columnfifth {-ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 50%;
  padding: 0px 2px;
}	
	

.column img, .columntwo img {
 max-width: 100%;
	height:auto;
	margin-bottom:6px ;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 860px) {
  .column , .columntwo, .columnfifth {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
/* CSS for columns ends */ 
	
	
.miniprof {display: block; float:left; padding:8px;font-size:1vw;line-height: 1.2; width:20%;height:auto; }
.miniprof img {margin-bottom:4px; width:100%;height:auto; }	
@media screen and (max-width: 1000px) {.miniprof,.profbox {font-size:1.25vw;}	}
@media screen and (max-width: 900px) {.profbox {font-size:1.5vw;}	}	
@media screen and (max-width: 800px) { .profbox , .miniprof  {font-size:2vw;}	}
@media screen and (max-width: 601px) { .profbox, .miniprof {font-size:2.1vw;}	}	
@media screen and (max-width: 480px) {.profbox, .miniprof {font-size:3.5vw;}	}	
@media screen and (max-width: 601px) { .columntwo img {width:100%;height:auto;}	}
	

/* Style the label to display next to the inputs */

input[type=text],  textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
input[type=submit] {
  background-color: #3C77BF;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}


input[type=reset] {
  background-color: #3C77BF;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
}
		
input[type=submit]:hover, input[type=reset]:hover {
  background-color:#3147BB ;
}
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}


/* Floating column for labels: 20% width */
.col-20 {
  float: left;
  width: 20%;
  margin-top: 6px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-33 {
  float: left;
  width: 33.33%;
  margin-top: 6px;
}

.col-50 {
  float: left;
  width: 50%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}
.col-80 {
  float: left;
  width: 80%;
  margin-top: 6px;
}
.col-100 {
  float: left;
  width: 100%;
  margin-top: 6px;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
hr.blue {border: 1px solid #3C77BF;margin: 16px 0px;}
.jive {margin-top: 16px;}
.jiver {margin-top: 8px;}

/* Responsive layout - when the screen is less than 620px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 620px) {.col-25, .col-75 {width: 100%;margin-top: 0px;}}
@media screen and (max-width: 620px) {input[type=radio] {margin:0px;}}	
@media screen and (max-width: 620px) {.bannerbook {width: 100%;margin-top: 16px;}}
@media screen and (max-width: 620px) {label {width: 100%;margin-top: 16px;}}
@media screen and (max-width: 620px) {input[type=submit], input[type=reset] {width: 100%;margin-top: 16px;}}
@media screen and (max-width: 520px) {.formnorm {font-size: 2vw;}}	

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (min-width: 800px) {.jazz-hide-large{display:none!important}}

@media screen and (max-width: 800px) {.col-33  {width: 100%; margin-top: 6;}.jazz-hide-medium{display:none!important} 	}

@media screen and (max-width: 600px) {
 .col-20, .col-25, .col-75, .col-100, .col-50, .col-33, .col-80, input[type=submit] {
    width: 100%;
    margin-top: 6;
  }
}
	
.miniprof {display: inline-block; float:left; padding:8px;font-size:1vw;line-height: 1.2; }
.miniprof img {margin-bottom:4px; }	
@media screen and (max-width: 1000px) {.miniprof {font-size:1.25vw;}	}
@media screen and (max-width: 800px) {.miniprof {font-size:1.5vw;}	}
@media screen and (max-width: 601px) {.miniprof {font-size:2vw;}	}	
@media screen and (max-width: 480px) {.miniprof {font-size:3vw;}	}	
	
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}	
.tw {padding:2px 0px 2px 0px ; margin: 2px 0px 2px 0px;	}

.tipeee {display: inline-block; font-family: Raleway,Helvetica Neue,Helvetica,Arial,sans-serif; font-size: 1rem; color: #D64858; font-weight: 600;}

.tipeee a {display: inline-block; font-family: Raleway,Helvetica Neue,Helvetica,Arial,sans-serif; font-size: 1rem; color: #D64858; font-weight: 600;}

.tipeee a:hover {display: inline-block; font-family: Raleway,Helvetica Neue,Helvetica,Arial,sans-serif; font-size: 1rem; font-weight: 600; color: #000066; text-decoration:none; }


	body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
	
	#mpfour {
  position:relative;
  left: 0;
  top: 0;
  margin-bottom:0px;
  max-width:100%; 
  max-height: 100%;
  min-width:100%; 
  min-height: 100%;
  display:block;
	z-index:-1;
	
}
	#myBtn, #myBtn1, #myBtn2, #myBtn3, #myBtn4, #myBtn5 {
  width: 40px;
height: 40px;
  font-size: 12px;
  padding: 6px;
  margin:5px 4px 5px 4px;
  border: 2px solid white;
  background: rgba(0, 0, 0, 0.8);
 outline: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
border-style:inset;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#myBtn:hover,  #myBtn1:hover, #myBtn2:hover, #myBtn3:hover, #myBtn4:hover,#myBtn5:hover 
{ color: #000000; background: rgb(242, 242, 242);outline: none;border-style:outset;}

.controlbar {text-align:left;position: absolute;bottom:0;z-index: 1;margin:2px 2px 10px 10px ;}
	
/* Full height image header */
/* Create a Parallax Effect */
/* First image (Logo Full height) */
.bgimg-1 {background-image: url("images/DickKerrLadies1920.jpg");width:100% ;min-height: 600px;height: auto;}
.bgimg-2 {background-image: url("images/1914.jpg"); min-height: 600px;}
.bgimg-3 {background-image: url("images/singers.jpg"); min-height: 600px;}	
.bgimg-4 {background-image: url("images/pitch.png"); min-height: 400px;}	
.bgimg-5 {background-image: url("images/player1.png"); min-height: 600px;}		
	
	
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-5  {
    background-attachment: scroll;
    min-height: 600px;
  }
}	
@media only screen and (max-device-width: 1600px) {
  .bgimg-4  {
    background-attachment: scroll;
    min-height: 400px;
  }
}	
		
	
	
/* End of Parallax Effect */	
	
	.logo {letter-spacing: 1vw;color: #fff !important;background-color: #000 !important; padding: 12px 24px !important;text-align: center !important; font-size: 2.2vw !important;animation: opac 0.8s;}
@media screen and (max-width:800px){.logo {padding: 10px 20px !important;font-size: 2.5vw !important;}}
@media screen and (max-width:700px){.logo {padding: 8px 16px !important;font-size: 3vw !important;}}
@media screen and (max-width:600px){.logo {padding: 4px 16px !important;font-size: 5vw !important;}}
	

.w3-bar .w3-button {padding: 12px;}
	
.titlebox {display:block;background: rgba(0, 0, 0, 0.2);padding:10px 10px 15px 15px;position: absolute;left: 0;top: 40px;}
	
.coverbox {display:block;text-align:center;background: rgba(0, 0, 0, 0.6); padding:50px; position:relative;top:0;left:0;opacity:1}	
.lowerbox {display:block;text-align:center;background: rgba(0, 0, 0, 0.6); padding:50px; position:relative;bottom:-400px;left:0;opacity:1}	
.lowerboxsmall {display:block;text-align:center;background: rgba(0, 0, 0, 0.6); padding:50px; position:relative;bottom:-200px;left:0;opacity:1}
	@media screen and (max-width: 800px) { .lowerbox {padding:50px;bottom:-400px;}	}
	
	
.pagetitle{font-size:36px!important }	
	
.textop {font-size:15px!important}
	
.learn {border: none; display: block;padding: 12px 36px;vertical-align: middle;overflow: hidden;
  text-decoration: none;color: inherit;background-color: inherit;text-align: center;cursor: pointer;
  white-space: nowrap;font-size:18px!important; margin: 16px !important;position:relative;top:20px;right:0;}
	
.socialtwo{font-size:24px!important;color:#fff!important; padding:20px 20px;}
	
	
	
@media screen and (max-width: 800px) {
	.pagetitle {font-size:26px!important}
	.textop {font-size:12px!important}
	.titlebox {top: 25px;}
	#myBtn, #myBtn1, #myBtn2, #myBtn3, #myBtn4, #myBtn5 {
width: 30px; height: 30px;font-size: 10px;padding: 5px;margin:0px 3px 5px 3px;border: 2px solid white;
		}
	.w3-bar .w3-button {padding: 10px;}
	.socialtwo{font-size:16px!important;color:#fff!important; padding:14px 20px;}
	.learn {font-size:14px!important;padding: 10px 18px;}
	}
	
	@media screen and (max-width: 680px) {.w3-bar .w3-button {padding: 6px;}}	
	
	@media screen and (max-width: 620px) {
		.w3-bar .w3-button {padding: 4px;}
		.socialtwo{font-size:12px!important;color:#fff!important; padding:12px 16px;}
	.learn {font-size:14px!important;padding: 10px 18px;}
		#myBtn, #myBtn1, #myBtn2, #myBtn3, #myBtn4, #myBtn5 {
width: 30px; height: 30px;font-size: 10px;padding: 2px;margin:0px 2px 5px 2px;border: 2px solid white;
		}
		
		
}
	
@media screen and (max-width: 520px) {
	.pagetitle {font-size:18px!important}
	.textop {font-size:10px!important}
	.learn {font-size:10px!important;}
	#myBtn, #myBtn1, #myBtn2, #myBtn3, #myBtn4, #myBtn5 {
width: 20px; height: 20px;font-size: 6px;padding: 4px;margin:0px 2px 5px 1px;border: 1px solid white;
		}
	
	
	}	
	
.floatbox {
  float: left;
  width: 50%;
  padding: 10px 25px;
  height:525px;
	overflow: hidden;
}	
		@media screen and (max-width: 680px) {.floatbox {
  float: none;
  width: 100%;
  padding: 10px 25px;
  height:auto;
}	}	
/* Gallery */
img {width: 100%; height:auto; padding: 12px;} 	
	
	
.rowmedia {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0px 12px;
}

/* Create four equal columns that sits next to each other */
.columnmedia {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0px 12px;
}

.columnmedia img, {
  margin-top: 12px;
  vertical-align: middle;
  max-width: 25%;
  height:auto;

}

.rowmedia:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - makes a three column-layout instead of four columns */
@media screen and (max-width: 993px) {
  .columnmedia {-ms-flex: 33.33%;flex: 33.33%;max-width: 33.33%;
   img {width: 100%; height:auto; padding: 12px;} 	
	
}
	}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 700px) {
  .columnmedia { -ms-flex: 50%;flex: 50%;max-width: 50%;} img {width: 100%; height:auto; padding: 12px;} 	
  }

@media screen and (max-width: 700px) {.jazzhide {display: none;}}
@media screen and (min-width: 700px) {.blueshide {display: none;}}	

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 597px) {.columnmedia { -ms-flex: 100%;flex: 100%; max-width: 100%;} img {width: 100%; height:auto; padding: 12px;} 	
	
}
/* CSS for gallery ends */ 	
#learn  {position:absolute;right:0;bottom:0}
.blocker{margin: 100px;font-size:64px!important}	
.subblocker{margin-top: 10px;font-size:24px!important}	
.fontfall {font-size:36px!important}
.fontfallmed	{font-size:24px!important}
.fontfallxl {font-size:64px!important}
	
@media screen and (min-width: 1650px) {
	.blocker {margin: 200px 100px;font-size:72px!important}
	.titlebox {position: absolute;left: 0;top: 50px;}
	.controlbar {position: absolute;top:70px;right:5px;}
	#learn  {position:absolute;right:5px;top:125px;z-index:100; }
	}
	
	
	
	
@media screen and (max-width: 800px) 
{.blocker{margin: 80px;font-size:48px!important;}.subblocker{margin-top: 8px;font-size:20px!important}	.fontfall{font-size:30px!important} .fontfallxl {font-size:56px!important} .fontfallmed	{font-size:20px!important}	}	
@media screen and (max-width: 700px) 
{.blocker{margin: 60px;font-size:36px!important}.subblocker{margin-top: 6px;font-size:14px!important}	.fontfall{font-size:24px!important} .fontfallxl {font-size:48px!important}  .fontfallmed{font-size:14px!important}	}	
@media screen and (max-width: 600px) 
{ .blocker{margin: 40px;font-size:24px!important;} .subblocker{margin-top: 4px;font-size:12px!important}.fontfall{font-size:20px!important} .fontfallxl {font-size:44px!important} .fontfallmed{font-size:12px!important}		}
@media screen and (max-width: 600px) 
{.fontfall{font-size:16px!important} .fontfallxl {font-size:36px!important} .fontfallmed{font-size:10px!important}}	
@media screen and (max-width: 450px) 
{.blocker{margin: 40px;font-size:18px!important;} .fontfall{font-size:14px!important} .fontfallmed{font-size:8px!important}	}		
	
	
.fotlogo {letter-spacing: 0.25vw;color: #fff !important; !important; padding: 12px 24px !important;text-align: center !important; font-size: 3vw !important;animation: opac 0.8s;}
@media screen and (max-width:800px){.fotlogo {padding: 10px 20px !important;font-size: 2.5vw !important;}}
@media screen and (max-width:700px){.fotlogo {padding: 8px 16px !important;font-size: 3vw !important;}}
@media screen and (max-width:600px){.fotlogo {padding: 4px 16px !important;font-size: 4vw !important;}}	
	
.box a { color: inherit;text-decoration: none;font-weight:bold;}	
.box  a:hover {color:inherit;}
	
.linx a	{color:#000066; text-decoration: none;}
.linx a:hover 	{color:#000066;text-decoration: underline; font-weight:bold;}