/* CSS reset */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td { 
    margin:0;
    padding:0;
	font-family: 'Roboto', arial, serif;
	font-size: 102%;
	line-height: 21px;
	/* font-family: sans-serif, museo-sans, arial, helvetica; */
}

fieldset, img { 
    border:0;
}

body {
  background-image: url('../images/dental-bg3.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  }

a:link {text-decoration:none; color: #3d3d3d;}    /* unvisited link */
a:visited {text-decoration:none; color: #3d3d3d;} /* visited link */
a:hover {text-decoration:underline; color: #5f0041;}   /* mouse over link */
a:active {text-decoration:underline; color: #5f0041;}  /* selected link */


/*  MAIN */

#mainContainer {
max-width: 1200px;
width: 92%;
height: auto;
padding: 0%;
margin: 1% auto;
background-image: url("../images/mainbg.png");
background-repeat: repeat;
-webkit-box-shadow: 0px 1px 10px 1px rgba(50, 50, 50, 0.5);
-moz-box-shadow:    0px 1px 10px 1px rgba(50, 50, 50, 0.5);
box-shadow:         0px 1px 10px 1px rgba(50, 50, 50, 0.5);
}

#container {
width: 98%;
height: auto;
margin: 1% auto;
}


.dentalHeader img {
width: 100%;
margin: 1% 0 0 0;
}

#menu  {
width: 100%;
margin: 0.5% 0 0.5% 0;
}

#content {
width: 100%;
background-image: url("../images/dental-bg3-V.png");
background-repeat: repeat;
background-color: #b6cfdd;
height: 1650px;
}

.section1slide {
width: 98%;
float: left;
margin: 1% 0 0 1%;
}

.section1slide img, .headerImg {
width: 100%;
}

.section2, .section3 {
width: 48.5%;
background-color: #FFFFFF;
height: 200px;
float: left;
margin: 1% 0 0 1%;
}

.section2 img, .section3 img {
float: left;
width: 48%;
border: 1px solid #4c94c3;
margin: 1.5% 0 0 1.5%;
}

.section2 ul, .section3 ul {
float: left;
margin: 7% 0 0 3.5%;
}

.section2 ul li, .section3 ul li {
list-style-type: none;
}

.section2 h1, .section3 h1 {
margin-top: 3%;
}

.section4, .section5, .section6,
.section7 {
position: relative;
width: 23.75%;
float: left;
height: 300px;
margin: 1% 0 0 1%;
}

.section4 {
background-color: #6eabd7;
}

.section5 {
background-color: #4587b6;
}

.section6 {
background-color: #2b6e9e;
}

.section7 {
background-color: #14517d;
}

.section4 img, .section5 img, .section6 img,
.section7 img {
width: 96.25%;
border: 1px solid #FFFFFF;
margin: 1.5% 0 0 1.5%;
}

.section4 p, .section5 p, .section6 p,
.section7 p {
text-align: justify;
color: #FFFFFF;
font-size: 92%;
padding: 2.5% 2% 1.5% 2%;
}

.section9 {
position: relative;
width: 23.75%;
float: left;
background-color: #6e96ad;
height: 300px;
margin: 1% 0 0 1%;
}

.section8 {
position: relative;
width: 73.25%;
float: left;
background-color: #eeeeee;
height: 300px;
margin: 1% 0 0 1%;
}

.section8 p {
text-align: justify;
color: #3f3f3f;
padding: 2.5% 1.5% 1.5% 1.5%;
}

.section9 img,
.section35 img {
width: 100%;
}

.section35 {
float: left;
width: 98%;
height: auto;
margin: 1% 0 0 1%;
}

.section10 img {
position: relative;
width: 98%;
margin: 1% 0 0 1%;
z-index: 10;
}

#footerMain {
width: 100%;
background-color: #dbdee0;
height: 210px;
font-size: 90%;
margin: 0.5% 0 0 0;
opacity: 0.85;
}

#footerMain ul {
list-style-type: none;
padding-top: 1%;
margin: 0 0 0 1%;
}

.footerTower1 ul, .footerTower2 ul ,
.footerTower3 ul, .footerTower4 ul {
width: 20%;
list-style: none;
float: left;
}

.footerTower5 ul{
width: 9%;
list-style-type: none;
float: left;
}

.footerTower6 {
display: none;
}

#copyright {
width: 100%;
text-align: center;
font-size: 90%;
height: 30px;
margin: 0.5% 0 0 0;
}

#copyright ul {
display: none;
}





/* PAGES */

#contentPage, #ourofficePage, #servicesPage,
#locationPage, #contactPage, #staffPage,
#mapPage, #drivePage, #documentsPage,
#disclaimerPage, #articlePage, #aboutPage {
width: 100%;
background-image: url("../images/contentbg.png");
background-repeat: repeat;
}

#backPain, #orthoSurg, #sportMed {
width: 100%;
}

.slideOrto {
position: relative;
width: 100%;
}

.slideOrtogallery {
position: relative;
width: 85%;
margin: 1% 0 1% 7%;
}

#ourofficePage {
height: 1000px;
}

#servicesPage {
height: 960px;
}

#articlePage p, #backPain p,
#orthoSurg p, #sportMed p {
float: left;
width: 94%;
text-align: justify;
margin: 1% 0 0 3%;
}

.servicesTop {
width: 98%;
float: left;
margin: 0% 0 4% 1%;
}

.servicesTop2 {
width: 98%;
float: left;
margin: 0.5% 0 4% 1%;
}

.servicesImg {
width: 30%;
height: auto;
float: left;
padding-left: 1.5%; 
margin: 0 0 0 1%
}

.servicesImg img {
width: 100%;
}

.servicesImg p {
text-align: justify;
padding: 3% 0 1% 0;
}

#contactPage {
height: 700px;
}

#staffPage {
height: 750px;
}

.profilePic {
float: left;
width: 25%;
padding: 2% 0 2% 2%;
}

.profilePic2 {
float: left;
width: 40%;
padding: 2% 0 2% 2%;
}

#locationPage h1 {
float: left;
color: #06355a;
font-size: 120%;
margin: 2% 0 2% 3%;
}

#locationPage p {
float: left;
width: 45%;
text-align: justify;
padding-right: 2%;
margin: 0 0 0 3%;
}


#staffPage h1, #drivePage h1,
#disclaimerPage h1,
#contactPage h1, #servicesPage h1,
#aboutPage h1, #servicesPage h1,
#articlePage h1, #drivePageLoc h1,
#backPain h1, #orthoSurg h1,
#sportMed h1 {
float: left;
color: #06355a;
font-size: 120%;
margin: 2% 0 2% 3%;
}

#staffPage p, #drivePage p,
#contactPage p, #aboutPage p,
#drivePageLoc p {
float: left;
width: 65%;
text-align: justify;
padding-right: 2%;
margin: 0 0 0 3%;
}

#mapPage {
height: 700px;
}

#mapPage ul {
width: 50%;
float: left;
margin: 5% 0 0 8%;
}

#mapPage ul li {
margin: 1% 0 1% 1%;
}

#drivePage, #locationPage {
height: 1800px;
}

.mapFrame {
width: 96%;
float: left;
height: auto;
margin: 2%;
-webkit-box-shadow: 0px 1px 5px 1px rgba(50, 50, 50, 0.5);
-moz-box-shadow:    0px 1px 5px 1px rgba(50, 50, 50, 0.5);
box-shadow:            0px 1px 5px 1px rgba(50, 50, 50, 0.5);
}

#documentsPage {
height: 960px;
}

#disclaimerPage {
height: 520px;
}

#disclaimerPage p {
float: left;
width: 96%;
text-align: justify;
margin: 2% 0 0 2%;
}

#articlePage {
height: 2300px;
}

#backPain {
height: 1350px;
}

#orthoSurg {
height: 1250px;
}

#sportMed {
height: 1300px;
}

#articlePage ul, #orthoSurg ul,
#sportMed ul, #backPain ul {
width: 91%;
float: left;
text-align: justify;
margin: 5% 0 0 5%;
}

#aboutPage {
height: 980px;
}

#aboutPage ul {
position: relative;
float: left;
width: 65%;
margin: 2% 0 0 6%;
}

#drivePageLoc {
height: 1275px;
}


.spaceH {
position: relative;
float: left;
width: 100%;
height: 10px;
background-color: #EEEEEE;
margin: 3% 0 2% 0;
}

.spaceH2 {
display: none;
}




@media all and (max-width: 1024px), only screen and (-webkit-min-device-pixel-ratio: 2)
and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2)
and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1)
and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2)
and (max-width: 1024px), only screen and (min-resolution: 192dpi)
and (max-width: 1024px), only screen and (min-resolution: 2dppx)
and (max-width: 1024px) {

#mainContainer {
width: 98%;
font-size: 90%;
}

#content {
width: 100%;
background-color: #EEEEEE;
height: 2200px;
}

.section2, .section3 {
width: 48.5%;
height: auto;
margin: 1% 0 0 1%;
}

.section2 img, .section3 img {
float: left;
width: 97%;
margin: 1.5% 0 0 1.5%;
}

.section2 ul, .section3 ul {
float: left;
margin: 4% 0 3% 5%;
}

.section8 {
width: 98%;
height: auto;
padding: 4% 0 5% 0;
}

.section4, .section5, .section6, .section7 {
width: 48%;
height: 350px;
margin: 1% 0 0 1%;
}

.section9  {
display: none;
}

.footerTower1, .footerTower6 {
display: none;
}

.footerTower2 ul ,.footerTower3 ul,
.footerTower4 ul {
width: 28%;
list-style: none;
float: left;
}

#footerMain ul {
list-style-type: none;
padding-top: 1%;
margin: 0 0 0 1%;
}

#copyright {
font-size: 50%;
}


/* PAGES */

#ourofficePage {
height: 750px;
}

#staffPage h1 {
font-size: 100%;
}

#staffPage p, #aboutPage p {
width: 94%;
}

#staffPage {
height: 1050px;
}

#drivePage, #locationPage {
height: 2000px;
}

#disclaimerPage {
height: 400px;
}

#contactPage {
height: 1100px;
}

#aboutPage {
height: 1500px;
}

#mapPage {
height: 580px;
}

#articlePage {
height: 2250px;
}

#servicesPage {
height: 2650px;
}

#backPain {
height: 1200px;
font-size: 90%;
}

#orthoSurg {
height: 1100px;
font-size: 90%;
}

#sportMed {
font-size: 90%;
height: 1300px;
}

.servicesImg {
width: 94%;
height: auto;
padding-bottom: 2%;
margin: 0 0 0 1%
}

#drivePageLoc {
height: 1350px;
}

.profilePic, .profilePic2 {
width: 40%;
}

.spaceH2 {
display: block;
position: relative;
float: left;
width: 100%;
height: 10px;
background-color: #EEEEEE;
margin: 2% 0 5% 0;
}

}




@media all and (max-width: 600px), only screen and (-webkit-min-device-pixel-ratio: 2)
and (max-width: 600px), only screen and (min--moz-device-pixel-ratio: 2)
and (max-width: 600px), only screen and (-o-min-device-pixel-ratio: 2/1)
and (max-width: 600px), only screen and (min-device-pixel-ratio: 2)
and (max-width: 600px), only screen and (min-resolution: 192dpi)
and (max-width: 600px), only screen and (min-resolution: 2dppx)
and (max-width: 600px) {

#content {
width: 100%;
background-color: #EEEEEE;
height: auto;
}

.section2, .section3 {
width: 48.5%;
height: auto;
font-size: 75%;
margin: 1% 0 0 1%;
}

.section2 img, .section3 img {
float: left;
width: 97%;
margin: 1.5% 0 0 1.5%;
}

.section2 ul, .section3 ul {
float: left;
margin: 3% 0 3% 5%;
}

.section2 h1, .section3 h1 {
font-size: 120%;
}

.section4, .section5, .section6, .section7 {
width: 98%;
height: auto;
margin: 1% 0 0 1%;
}

.section8 {
font-size: 85%;
height: auto;
padding: 4% 0 5% 0;
}

.section8 p {
padding: 2.5% 2.5% 2.5% 2.5%;
}

#footerMain {
display: none;
}

#copyright ul {
display: block;
padding: 2% 0 0 0;
}

#copyright {
height: auto;
font-size: 60%;
}

#copyright ul  li {
display: inline;
}


/* PAGES */

#ourofficePage {
height: 500px;
}

#drivePage, #locationPage {
height: 1800px;
}

#contactPage {
height: 800px;
}

#aboutPage {
height: 1400px;
}

#mapPage {
height: 400px;
}

.servicesImg {
width: 94%;
height: auto;
padding-bottom: 2%;
margin: 0 0 0 1%
}

#servicesPage {
height: 1750px;
}

#drivePageLoc {
height: 1195px;
}

.profilePic, .profilePic2 {
width: 50%;
}

#backPain {
height: 1770px;
}

}



/* MENU */

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 500;
  opacity: 0.985;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  font-family: Montserrat, sans-serif;
  background: #246faf;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 17px;
  font-size: 18px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 400;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
  background: #124672;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu li:hover > ul > li {
  height: 35px;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 15px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 400;
  background: #246faf;
  border: 0.08em solid #ffffff;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
  background: #124672;
}
#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
  right: auto;
  left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
  right: auto;
  left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu ul ul li,
  #cssmenu li:hover > ul > li {
    height: auto;
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu ul ul li a {
    padding-left: 25px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 35px;
  }
  #cssmenu ul ul li a {
    color: #dddddd;
    background: none;
  }
  #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li.active > a {
    color: #ffffff;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu.align-right ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul > li.has-sub > a:after,
  #cssmenu ul ul > li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
    display: block;
    padding: 17px;
    color: #dddddd;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
  }
  #cssmenu #menu-button:after {
    position: absolute;
    top: 22px;
    right: 17px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    content: '';
  }
  #cssmenu #menu-button:before {
    position: absolute;
    top: 16px;
    right: 17px;
    display: block;
    height: 2px;
    width: 20px;
    background: #dddddd;
    content: '';
  }
  #cssmenu #menu-button.menu-opened:after {
    top: 23px;
    border: 0;
    height: 2px;
    width: 15px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cssmenu #menu-button.menu-opened:before {
    top: 23px;
    background: #ffffff;
    width: 15px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    height: 46px;
    width: 46px;
    cursor: pointer;
  }
  #cssmenu .submenu-button.submenu-opened {
    background: #262626;
  }
  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }
  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: #ffffff;
  }
  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
  }
}



/* FRONT GALLERY */

/* SLIDE SHOW */

@-webkit-keyframes left-right {
  0% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); }
  100% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); } }
@-moz-keyframes left-right {
  0% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); }
  100% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); } }
@-ms-keyframes left-right {
  0% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); }
  100% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); } }
@keyframes left-right {
  0% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); }
  100% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); } }
@-webkit-keyframes right-left {
  0% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); }
  100% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); } }
@-moz-keyframes right-left {
  0% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); }
  100% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); } }
@-ms-keyframes right-left {
  0% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); }
  100% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); } }
@keyframes right-left {
  0% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); }
  100% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); } }
/* added to the original element calling slippry */
.sy-box.sy-loading {
  background: url(../images/slide/sy-loader.gif) 50% 50% no-repeat;
  -moz-background-size: 32px;
  -o-background-size: 32px;
  -webkit-background-size: 32px;
  background-size: 32px;
  min-height: 40px; }
  .sy-box.sy-loading .sy-slides-wrap, .sy-box.sy-loading .sy-pager {
    visibility: hidden; }

/* element that wraps the slides */
.sy-slides-wrap {
  position: relative;
  height: 100%;
  width: 100%; }
  .sy-slides-wrap:hover .sy-controls {
    display: block; }

/* element that crops the visible area to the slides */
.sy-slides-crop {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden; }

/* list containing the slides */
.sy-list {
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute; }
  .sy-list.horizontal {
    -moz-transition: left ease;
    -o-transition: left ease;
    -webkit-transition: left ease;
    transition: left ease; }
  .sy-list.vertical {
    -moz-transition: top ease;
    -o-transition: top ease;
    -webkit-transition: top ease;
    transition: top ease; }

/* single slide */
.sy-slide {
  position: absolute;
  width: 100%;
  z-index: 2; }
  .sy-slide.kenburns {
    width: 140%;
    left: -20%; }
    .sy-slide.kenburns.useCSS {
      -moz-transition-property: opacity;
      -o-transition-property: opacity;
      -webkit-transition-property: opacity;
      transition-property: opacity; }
      .sy-slide.kenburns.useCSS.sy-ken:nth-child(1n) {
        -webkit-animation-name: left-right;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-name: left-right;
        -moz-animation-fill-mode: forwards;
        -o-animation-name: left-right;
        -o-animation-fill-mode: forwards;
        animation-name: left-right;
        animation-fill-mode: forwards; }
      .sy-slide.kenburns.useCSS.sy-ken:nth-child(2n) {
        -webkit-animation-name: right-left;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-name: right-left;
        -moz-animation-fill-mode: forwards;
        -o-animation-name: right-left;
        -o-animation-fill-mode: forwards;
        animation-name: right-left;
        animation-fill-mode: forwards; }
  .sy-slide.sy-active {
    z-index: 3; }
  .sy-slide > a {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%; }
    .sy-slide > a > img {
      margin: 0;
      padding: 0;
      display: block;
      width: 100%;
      border: 0; }

/* next/ prev buttons, with arrows and clickable area a lot larger than the visible buttons */
.sy-controls {
  display: none;
  list-style: none;
  height: 100%;
  width: 100%;
  position: absolute;
  padding: 0;
  margin: 0; }
  .sy-controls li {
    position: absolute;
    width: 10%;
    min-width: 4.2em;
    height: 100%;
    z-index: 33; }
    .sy-controls li.sy-prev {
      left: 0;
      top: 0; }
      .sy-controls li.sy-prev a:after {
        background-position: -5% 0; }
    .sy-controls li.sy-next {
      right: 0;
      top: 0; }
      .sy-controls li.sy-next a:after {
        background-position: 105% 0; }
    .sy-controls li a {
      position: relative;
      width: 100%;
      height: 100%;
      display: block;
      text-indent: -9999px; }
      .sy-controls li a:link, .sy-controls li a:visited {
        opacity: 0.4; }
      .sy-controls li a:hover, .sy-controls li a:focus {
        opacity: 0.8;
        outline: none; }
      .sy-controls li a:after {
        content: "";
        background-image: url(../images/slides/arrows.png);
        background-repeat: no-repeat;
        -moz-background-size: cover;
        -o-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
        text-align: center;
        text-indent: 0;
        line-height: 2.8em;
        color: #111;
        font-weight: 800;
        position: absolute;
        background-color: #fff;
        width: 2.8em;
        height: 2.8em;
        left: 50%;
        top: 50%;
        margin-top: -1.4em;
        margin-left: -1.4em;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%; }
  @media only screen and (max-device-width: 800px) {
    .sy-controls {
      display: block; }
      .sy-controls li {
        min-width: 2.1em; }
        .sy-controls li a:after {
          width: 1.4em;
          height: 1.4em;
          margin-top: -0.7em;
          margin-left: -0.7em; } }

/* captions, styled for the overlay variant */
.sy-caption-wrap {
  position: absolute;
  bottom: 2em;
  z-index: 12;
  left: 50%; }
  .sy-caption-wrap .sy-caption {
    position: relative;
    left: -50%;
    background-color: rgba(0, 0, 0, 0.54);
    color: #fff;
    padding: 0.4em 1em;
    -moz-border-radius: 1.2em;
    -webkit-border-radius: 1.2em;
    border-radius: 1.2em; }
    .sy-caption-wrap .sy-caption a:link, .sy-caption-wrap .sy-caption a:visited {
      color: #c0a5a3;
      font-weight: 600;
      text-decoration: none; }
    .sy-caption-wrap .sy-caption a:hover, .sy-caption-wrap .sy-caption a:focus {
      text-decoration: underline; }
  @media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
    .sy-caption-wrap {
      left: 0;
      bottom: 0.4em; }
      .sy-caption-wrap .sy-caption {
        left: 0;
        padding: 0.2em 0.4em;
        font-size: 0.92em;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0; } }

/* pager bubbles */
.sy-pager {
  overflow: hidden;
  *zoom: 1;
  display: none;
  width: 100%;
  margin: 1.2em 0 0;
  padding: 0;
  list-style: none;
  text-align: center; }
  .sy-pager li {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin: 0 1em 0.2em 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%; }
    .sy-pager li.sy-active a {
      background-color: #6fc852;}
    .sy-pager li a {
      width: 0%;
      height: 0%;
      display: block;
      background-color: #ccc;
      text-indent: -9999px;
      -moz-background-size: 2em;
      -o-background-size: 2em;
      -webkit-background-size: 2em;
      background-size: 2em;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%; }
      .sy-pager li a:link, .sy-pager li a:visited {
        opacity: 1.0; }
      .sy-pager li a:hover, .sy-pager li a:focus {
        opacity: 0.6; }

/* element to "keep/ fill" the space of the content, gets intrinsic height via js */
.sy-filler {
  width: 100%; }
  .sy-filler.ready {
    -moz-transition: padding 600ms ease;
    -o-transition: padding 600ms ease;
    -webkit-transition: padding 600ms ease;
    transition: padding 600ms ease; }




/* GALLRY SLIDE SHOW */

@-webkit-keyframes left-right {
  0% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); }
  100% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); } }
@-moz-keyframes left-right {
  0% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); }
  100% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); } }
@-ms-keyframes left-right {
  0% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); }
  100% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); } }
@keyframes left-right {
  0% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); }
  100% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); } }
@-webkit-keyframes right-left {
  0% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); }
  100% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); } }
@-moz-keyframes right-left {
  0% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); }
  100% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); } }
@-ms-keyframes right-left {
  0% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); }
  100% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); } }
@keyframes right-left {
  0% {
    -moz-transform: translateY(0%) translateX(10%);
    -ms-transform: translateY(0%) translateX(10%);
    -webkit-transform: translateY(0%) translateX(10%);
    transform: translateY(0%) translateX(10%); }
  100% {
    -moz-transform: translateY(-20%) translateX(-10%);
    -ms-transform: translateY(-20%) translateX(-10%);
    -webkit-transform: translateY(-20%) translateX(-10%);
    transform: translateY(-20%) translateX(-10%); } }
/* added to the original element calling slippry */
.sy-box.sy-loading {
  background: url(../images/slide/sy-loader.gif) 50% 50% no-repeat;
  -moz-background-size: 32px;
  -o-background-size: 32px;
  -webkit-background-size: 32px;
  background-size: 32px;
  min-height: 40px; }
  .sy-box.sy-loading .sy-slides-wrap, .sy-box.sy-loading .sy-pager {
    visibility: hidden; }

/* element that wraps the slides */
.sy-slides-wrap {
  position: relative;
  height: 100%;
  width: 100%; }
  .sy-slides-wrap:hover .sy-controls {
    display: block; }

/* element that crops the visible area to the slides */
.sy-slides-crop {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden; }

/* list containing the slides */
.sy-list {
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute; }
  .sy-list.horizontal {
    -moz-transition: left ease;
    -o-transition: left ease;
    -webkit-transition: left ease;
    transition: left ease; }
  .sy-list.vertical {
    -moz-transition: top ease;
    -o-transition: top ease;
    -webkit-transition: top ease;
    transition: top ease; }

/* single slide */
.sy-slide {
  position: absolute;
  width: 100%;
  z-index: 2; }
  .sy-slide.kenburns {
    width: 140%;
    left: -20%; }
    .sy-slide.kenburns.useCSS {
      -moz-transition-property: opacity;
      -o-transition-property: opacity;
      -webkit-transition-property: opacity;
      transition-property: opacity; }
      .sy-slide.kenburns.useCSS.sy-ken:nth-child(1n) {
        -webkit-animation-name: left-right;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-name: left-right;
        -moz-animation-fill-mode: forwards;
        -o-animation-name: left-right;
        -o-animation-fill-mode: forwards;
        animation-name: left-right;
        animation-fill-mode: forwards; }
      .sy-slide.kenburns.useCSS.sy-ken:nth-child(2n) {
        -webkit-animation-name: right-left;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-name: right-left;
        -moz-animation-fill-mode: forwards;
        -o-animation-name: right-left;
        -o-animation-fill-mode: forwards;
        animation-name: right-left;
        animation-fill-mode: forwards; }
  .sy-slide.sy-active {
    z-index: 3; }
  .sy-slide > a {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%; }
    .sy-slide > a > img {
      margin: 0;
      padding: 0;
      display: block;
      width: 100%;
      border: 0; }

/* next/ prev buttons, with arrows and clickable area a lot larger than the visible buttons */
.sy-controls {
  display: none;
  list-style: none;
  height: 100%;
  width: 100%;
  position: absolute;
  padding: 0;
  margin: 0; }
  .sy-controls li {
    position: absolute;
    width: 10%;
    min-width: 4.2em;
    height: 100%;
    z-index: 33; }
    .sy-controls li.sy-prev {
      left: 0;
      top: 0; }
      .sy-controls li.sy-prev a:after {
        background-position: -5% 0; }
    .sy-controls li.sy-next {
      right: 0;
      top: 0; }
      .sy-controls li.sy-next a:after {
        background-position: 105% 0; }
    .sy-controls li a {
      position: relative;
      width: 100%;
      height: 100%;
      display: block;
      text-indent: -9999px; }
      .sy-controls li a:link, .sy-controls li a:visited {
        opacity: 0.4; }
      .sy-controls li a:hover, .sy-controls li a:focus {
        opacity: 0.8;
        outline: none; }
      .sy-controls li a:after {
        content: "";
        background-image: url(../images/arrows.png);
        background-repeat: no-repeat;
        -moz-background-size: cover;
        -o-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
        text-align: center;
        text-indent: 0;
        line-height: 2.8em;
        color: #111;
        font-weight: 800;
        position: absolute;
        background-color: #fff;
        width: 2.8em;
        height: 2.8em;
        left: 50%;
        top: 50%;
        margin-top: -1.4em;
        margin-left: -1.4em;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%; }
  @media only screen and (max-device-width: 800px) {
    .sy-controls {
      display: block; }
      .sy-controls li {
        min-width: 2.1em; }
        .sy-controls li a:after {
          width: 1.4em;
          height: 1.4em;
          margin-top: -0.7em;
          margin-left: -0.7em; } }

/* captions, styled for the overlay variant */
.sy-caption-wrap {
  position: absolute;
  bottom: 2em;
  z-index: 12;
  left: 50%; }
  .sy-caption-wrap .sy-caption {
    position: relative;
    left: -50%;
    background-color: rgba(0, 0, 0, 0.54);
    color: #fff;
    padding: 0.4em 1em;
    -moz-border-radius: 1.2em;
    -webkit-border-radius: 1.2em;
    border-radius: 1.2em; }
    .sy-caption-wrap .sy-caption a:link, .sy-caption-wrap .sy-caption a:visited {
      color: #c0a5a3;
      font-weight: 600;
      text-decoration: none; }
    .sy-caption-wrap .sy-caption a:hover, .sy-caption-wrap .sy-caption a:focus {
      text-decoration: underline; }
  @media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
    .sy-caption-wrap {
      left: 0;
      bottom: 0.4em; }
      .sy-caption-wrap .sy-caption {
        left: 0;
        padding: 0.2em 0.4em;
        font-size: 0.92em;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0; } }

/* pager bubbles */
.sy-pager {
  overflow: hidden;
  *zoom: 1;
  display: block;
  width: 100%;
  margin: 1.2em 0 0;
  padding: 0;
  list-style: none;
  text-align: center; }
  .sy-pager li {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin: 0 1em 0.2em 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%; }
    .sy-pager li.sy-active a {
      background-color: #5faad4;}
    .sy-pager li a {
      width: 100%;
      height: 100%;
      display: block;
      background-color: #ccc;
      text-indent: -9999px;
      -moz-background-size: 2em;
      -o-background-size: 2em;
      -webkit-background-size: 2em;
      background-size: 2em;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%; }
      .sy-pager li a:link, .sy-pager li a:visited {
        opacity: 1.0; }
      .sy-pager li a:hover, .sy-pager li a:focus {
        opacity: 0.6; }

/* element to "keep/ fill" the space of the content, gets intrinsic height via js */
.sy-filler {
  width: 100%; }
  .sy-filler.ready {
    -moz-transition: padding 600ms ease;
    -o-transition: padding 600ms ease;
    -webkit-transition: padding 600ms ease;
    transition: padding 600ms ease; }