html {-webkit-text-size-adjust: 100%;}

body{padding: 0; margin: 0; width: 100%; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 24px; color: #505050;}

h1{color: #fff; font-size: 34px; line-height: 46px; font-weight: bold; margin: 0; padding: 0; font-family: 'Roboto Slab', sans-serif;}
h1 span {background: rgba(0,0,0,0.4); text-shadow: 1px 1px 1px #000;}
h2{color: #000; font-size: 20px; line-height: 30px; font-weight: bold; padding: 0; margin: 0; font-family: 'Roboto Slab', sans-serif;}


a img{border: 0;}
a{}

strong {color: #000;}

#BillBoardHome,
#BillBoardFamily,
#BillBoardSchooling,
#BillBoardIntegration,
#BillBoardAbout{display: inline-block; float: left; width: 100%; background: #008ee0; height: 600px; background-size: auto;}

#BillBoardHome {height: auto;}

#BillBoardHome {background: #004770;}
#BillBoardFamily {background: #008ee0 url(../Media/Images/Family.jpg) no-repeat center;}
#BillBoardSchooling {background: #008ee0 url(../Media/Images/Schooling.jpg) no-repeat center;}
#BillBoardIntegration {background: #008ee0 url(../Media/Images/Integration.jpg) no-repeat center;}
#BillBoardAbout {background: #008ee0 url(../Media/Images/AntoinetteDeWeck01_V2.jpg) no-repeat center;}


#BillBoardTextBlock {display: block; margin: 25% auto 0 auto; width: 60%; font-family: 'Roboto Slab', sans-serif;}

#BillBoardHome h1 {position: absolute; z-index: 100; display: block; width: 100%; margin-top: 25%; text-align: center;}



#TopLeft{float: left; display: inline-block; margin: 60px 0 0 40px; width: 252px; height: 30px; position: absolute; top: 0; left: 0; z-index: 1000;}
#TopLeft img{width: 100%;}

#TopRight{display: inline-block; float: right; width: 400px; margin: 30px 40px 0 0; height: 60px; position: absolute; top: 0; right: 0; z-index: 1000;}

    #Language{padding: 0; margin: 0; text-align: right; height: 30px; line-height: 30px; width: 400px;}
    #Language li{display: inline; padding: 0; margin: 0; color: #9DDDFF;} 
    #Language li a{color: #9DDDFF; text-decoration: none; font-size: 14px; margin-left: 10px;}
    #Language li a:hover{color: #fff;}
    #Language li#LanguageItemSelected a{color: #fff; font-weight: bold; text-decoration: none;}

    #Menu{padding: 0; margin: 0; text-align: right; height: 30px; line-height: 30px; width: 400px;} 
    #Menu li{display: inline; padding: 0; margin: 0;} 
    #Menu li a{color: #9DDDFF; text-decoration: none; font-weight: bold; font-size: 18px; margin-left: 10px; font-family: 'Roboto Slab', sans-serif;}
    #Menu li a:hover,
    #Menu li#MenuItemSelected a{color: #fff;}

    

#Header{display: inline-block; float: left; width: 100%; background: #fff;}
    #HeaderTextBlock {display: block; margin: 5% auto; width: 60%; background: #fff; font-size: 20px; line-height: 34px; color: #000; font-family: 'Roboto Slab', sans-serif;}
    
    #HeaderTextBlock a {background: url(../Media/Images/Arrow.png) no-repeat; margin: 0 0 20px 0; padding-left: 30px; font-size: 16px; line-height: 26px; color: #008ee0; font-family: 'Open Sans', sans-serif; text-decoration: none; font-weight: bold;}

#Content{display: inline-block; float: left; width: 100%; background: #fff url(../Media/Images/Background.gif) repeat-x;}
    #ContentTextBlock {display: block; margin: 0 auto; width: 60%; background: #fff;}
        .TextBlock {display: inline-block; float: left; width: 42%; padding: 0 4%; margin: 0 0 4% 0;}
        .TextBlockWithMarginTop {margin: 4% 0 4% 0;}
        .TextBlockWithBorderLeft {border-left: solid 1px #d0d0d0; width: 41%;}
        .TextBlockWithBorderRight {border-right: solid 1px #d0d0d0; width: 41%;}
        .TextBlock a {color: #000;}
        .TextBlock img {width: 100%;}
        .TextBlock ul.List, .TextBlock ul.List li {list-style-type: none; margin: 0; padding: 0;}
        .TextBlock ul.List li {background: url(../Media/Images/Arrow.png) no-repeat; margin: 0 0 10px 0; padding-left: 30px;}
        .TextBlock ul li {margin: 0 0 5px 0; line-height: 22px;}
        .TextBlock ul li ul li {font-size: 12px; line-height: 18px;}

        span.Legend {font-size: 12px; line-height: 14px; color: #505050; margin: 0; padding: 0;}
        
        div.Insert {display: block; float: left; border: solid 1px #828282; width: 89%; background: #fff; padding: 5%; margin-bottom: 40px;}
        

        div.FiguresContainer {display: block; float: left; border: solid 1px #828282; width: 100%;}
        div.FiguresContainer a {display: block; margin: 5%; font-size: 14px; line-height: 18px; font-weight: bold; font-family: 'Roboto Slab', sans-serif; }
        div.FiguresContainer a img{display: block; width: 100%; max-width: 220px; margin: 0 auto;}
        div.Figures {margin: 15px auto; height: 55px; width: 220px; display: block; color: red; font-size: 14px; line-height: 18px; font-weight: bold; font-family: 'Roboto Slab', sans-serif; text-align: left; }
        div.FiguresNumber {float: left; display: inline; font-size: 62px; float: left; height: 55px; line-height: 55px; padding-right: 10px;}
        div.FiguresText {float: left; display: inline; height: 55px;}
        

        div.columngroup{width: 100%; display: inline-block; float: left; background: url(../Media/Images/Shadow.jpg); background-size: cover; margin-top: 8%; padding-bottom: 8%;}
        div.column{width: 33%; display: inline-block; float: left; vertical-align: top; text-align: left;}

        img.Portrait {width: 150px; float: left; margin: 0 40px 30px 0;}

        .hovereffect{
	        margin: auto;
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        .hovereffectimage img {
            display:block;
            width: 100%;
        }
        .hovereffectimage img {
            transform:scale(1);
            -ms-transform:scale(1);
            -moz-transform:scale(1);
            -webkit-transform:scale(1);
            -o-transform:scale(1);
	        -webkit-transition: all 0.5s ease;
  	        -moz-transition: all 0.5s ease;
  	        -o-transition: all 0.5s ease;
  	        transition: all 0.5s ease;
        }

        .hovereffect:hover .hovereffectimage img {    
	        cursor: pointer;
            transform:scale(1.5);
            -ms-transform:scale(1.2);
            -moz-transform:scale(1.2);
            -webkit-transform:scale(1.2);
            -o-transform:scale(1.2);
        }

        .hovereffecttext{
            position: absolute;    
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            text-align: center;
            -webkit-transition: all 0.5s ease;
  	        -moz-transition: all 0.5s ease;
  	        -o-transition: all 0.5s ease;
  	        transition: all 0.5s ease;
        }

        .hovereffecttext:hover{background: rgba(0, 142, 224, 0.9);}

        .hovereffecttext a{
            
            text-decoration: none;
            color: #fff;
            opacity: 0;
            margin: 20% auto;
            display: inline-block;
            width: 90%;
        }

        .hovereffect:hover a strong {color: #fff; font-size: 20px; line-height: 30px;}
        .hovereffect:hover a,
        .hovereffect:hover a:hover{opacity: 1; color: #fff; font-size: 14px; line-height: 24px;}


#Map{display: inline-block; float: left; width: 100%; height: 500px;}
    #map{width: 100%; height: 500px; line-height: 18px;}

#Footer{display: inline-block; float: left;  width: 100%; background: #fff url(../Media/Images/Background.gif) repeat-x;}

    #FooterLeft{float: left; display:  inline-block; margin: 40px;}
    #FooterLeft a{color: #3c3c3c; text-decoration: none}
    #FooterLeft a:hover{text-decoration: underline;}
    #FooterRight{float: right; display:  inline-block; text-align: right; margin: 40px;}


/* Desktop Laptop
------------------------- */
@media screen and (min-width: 980px) 
{

.js .nav-collapse {position: relative;}
.js .nav-collapse.closed {max-height: none;}
.nav-toggle {display: none;}

}

@media (max-width: 1400px) {

#BillBoardTextBlock {width: 80%; margin: 30% auto;}
#HeaderTextBlock {margin: 40px auto; width: 80%;}
#ContentTextBlock {margin: 40px auto; width: 80%;}

}


/* Tablet
------------------------- */
@media (max-width: 980px) {

#TopLeft{margin: 40px 0 0 40px;}
#TopRight{margin: 0; width: 50px;}

#BillBoardFamily,
#BillBoardSchooling,
#BillBoardIntegration,
#BillBoardAbout {height: 580px; background-size: 980px;}

#BillBoardHome h1 {margin-top: 25%;}

img.Portrait {display: none;}



.nav-collapse ul#Menu,
.nav-collapse ul#Language {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
  position: fixed;
  left: 0;
  top: 0;  
}

.nav-collapse ul#Language{background: rgba(0,0,0,0.9); height: 50px; border-bottom: solid 1px #000;}

.nav-collapse ul#Menu{
top: 51px;
}

.nav-collapse ul#Menu li {
  width: 100%;
  display: block;
  border-bottom: solid 1px #000;
  padding-left: 20px;
  height: 50px;
  line-height: 50px;
  text-align: left;
  background: rgba(0,0,0,0.9); 
}

.nav-collapse ul#Language li {
  display: inline;
  float: left;
  border-bottom: solid 1px #000;
  padding-left: 20px;
  height: 50px;
  line-height: 50px;
  text-align: left;
}

.nav-collapse ul#Menu li a,
.nav-collapse ul#Menu li a:hover,
.nav-collapse ul#Menu li#MenuItemSelected a,
.nav-collapse ul#Language li a,
.nav-collapse ul#Language li a:hover,
.nav-collapse ul#Language li#LanguageItemSelected a{color: #d0d0d0; margin-left: 0; font-weight: normal;}

.nav-collapse ul#Menu li#MenuItemSelected a,
.nav-collapse ul#Language li#LanguageItemSelected a {font-weight: bold; color: #fff; }

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: absolute;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.nav-toggle,
.nav-toggle:before,
.nav-toggle.active::before {position: fixed; right: 0; top: 0; z-index: 1000; background: #000; color: #fff; text-indent: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; text-decoration: none;}

.nav-toggle:before{content: "≡"; font-size: 20px; font-weight: normal; }
.nav-toggle.active::before{content: "x"; font-size: 14px; font-weight: bold; }

}


/* Other
------------------------- */
@media (max-width: 900px) {

    #BillBoardFamily,
    #BillBoardSchooling,
    #BillBoardIntegration,
    #BillBoardAbout {background-size: 900px; height: 540px;}

    

}

/* Other
------------------------- */
@media (max-width: 800px) {

    #BillBoardFamily,
    #BillBoardSchooling,
    #BillBoardIntegration,
    #BillBoardAbout {background-size: 800px; height: 490px;}
    
}

/* Other
------------------------- */
@media (max-width: 700px) {

    #BillBoardFamily,
    #BillBoardSchooling,
    #BillBoardIntegration,
    #BillBoardAbout {background-size: 700px; height: 420px;}

    .TextBlock {display: inline-block; float: left; width: 100%; padding: 0; margin: 0 0 10% 0;}
    .TextBlockWithMarginTop {margin: 0;}
    .TextBlockWithBorderLeft {border-left: solid 0px #d0d0d0; width: 100%;}
    .TextBlockWithBorderRight {border-right: solid 0px #d0d0d0; width: 100%;}
    
    div.columngroup{background: none;}
    div.column{width: 100%; }
}


/* iPhone 5 Landscape
------------------------- */
@media (max-width: 640px) {

/*500*/

#BillBoardFamily,
#BillBoardSchooling,
#BillBoardIntegration,
#BillBoardAbout{background-size: 640px; height: 390px;}


#Map{display: inline-block; float: left; width: 100%; height: 300px;}
    #map{width: 100%; height: 300px;}

#TopLeft{margin: 20px 0 0 20px; width: 200px;}

h1{font-size: 24px; line-height: 33px; }
h2{color: #000; font-size: 18px; line-height: 28px;}
#HeaderTextBlock {font-size: 18px; line-height: 28px;}



.hovereffect:hover a strong {font-size: 18px; line-height: 28px;}

#FooterLeft{margin: 20px;}
#FooterRight{ margin: 20px;}

}

/* iPhones 4 Landscape - iPhone 5 Portrait
------------------------- */
@media (max-width: 480px) {

/*400*/

#BillBoardFamily,
#BillBoardSchooling,
#BillBoardIntegration,
#BillBoardAbout{background-size: 480px; height: 290px;}
}
	
/* iPhones 4 Portrait
------------------------- */
@media (max-width: 320px) {

/*300*/




}