@charset "UTF-8";
html, body {height: 100%; width: 100%;}
body { padding-top: 80px; font: 400 16px/1.6 'Lora', Georgia, serif; }
h1, h2, h3, h4, h5, h6 {font-family: 'Istok Web', sans-serif;}
h1 {font-size: 400 70px/1.2; font-weight:normal;}
p {font: 400 16px/1.6 'Lora', Georgia, serif;}
address { font-size: 14px; line-height: 20px; margin-bottom: 0; text-align: right;}
h1.quote {font-size: 30px; color: #3B3E35;}
h1 small {color: #BBD1E5;}
p.quote {font-size: 20px; color: #3B3E35;}
footer p{font-size: 10px;}
/* HEADER */
.logo {margin-bottom: 0; margin-top: 0; height: 70px;}
.address {font-size: 14px; color: #BBD1E5; line-height: 20px;}
.address a {color: #BBD1E5;}
.contact {font-size: 14px; line-height: 20px;}
.sm-profiles {color: #BBD1E5;}
.navbar { background-color: #789FC0; background-image:url(../images/pattern4.png); }
.navbar-default .navbar-nav > li {font-family: 'Istok Web', sans-serif;}
.navbar-default .navbar-nav > li > a { color: #fff;}
.navbar-default .navbar-toggle {border-color: #BBD1E5;}
.navbar-default .navbar-toggle .icon-bar { background-color: #BBD1E5;}
.dropdown-menu > li > a {padding: 7px 30px; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #577791;}

.slogan-front { background-color: #789FC0; background-image:url(../images/pattern4.png); padding: 30px 0;}
.slogan-front h1.quote {font-size: 30px; color: #FFF;}
.intro, .slogan { padding: 30px 0;}

@media (min-width: 768px) { 
	.navbar .navbar-nav {display: inline-block; vertical-align: top;}
	.navbar .navbar-collapse { text-align: center;}
	.navbar-default .navbar-nav > li > a {  line-height:  80px;} 
}
@media (min-width: 992px) { 
	.logo {height: 100px;}
}

/* padded section */
.pad-section {padding: 50px 0;}
.pad-section img {width: 100%;}
/* vertical-centered text */
.text-vcenter {display: table-cell; text-align: center; vertical-align: middle; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.75);}
.text-vcenter h1 {font-size: 3em;font-weight: 700; margin: 0; padding: 0; color:#fff;}
.text-vcenter h3 {color: #fff;}
/* additional sections */
#home { background-image: url(../images/Judy/114H.jpg); 
	display: table;  
	height: 100%; 
	position: relative;
	width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
	background-repeat: no-repeat;
}
.scroll-down-btn {
    bottom: 100px;
    display: block;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
	opacity: 0.7;
    transition: opacity 0.2s ease 0s;
	animation: 5s ease 6s normal none infinite running scroll-down-btn-picto-loop;
}
.btn-circle {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}
@-webkit-keyframes scroll-down-btn-picto-loop {
    0%,
    100%,
    16%,
    28% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    22%,
    8% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }
}

@keyframes scroll-down-btn-picto-loop {
    0%,
    100%,
    16%,
    28% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    22%,
    8% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }
}
#mediation {background: url(../images/patterns/small/pw-maze-white.png);color: #3B3E35;}

#mediation .glyphicon { border: 2px solid #FFFFFF; border-radius: 50%;display: inline-block;font-size: 60px;height: 140px;line-height: 140px;text-align: center;vertical-align: middle;width: 140px;}


#about {}
.judy-pic {padding: 0 10px 10px 0;}

.map-frame {
    width: 100%;
    height: 100%;
    position: relative;
}

.map-content {
    z-index: 10;
    position: absolute;
    top: 50px;
    right: 50px;
    width: 300px;
	padding: 30px;
    background: url(../images/patterns/small/pw-maze-white.png);
	color: #3B3E35;
}

#information {background: url(../images/law-series.jpg) no-repeat center center fixed;display: table;height: 800px; position: relative;width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#information .panel {opacity: 0.85;}

/********************************/
/*          Boxes      			*/
/********************************/
.box {  border-radius: 3px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);  padding: 10px 25px;  text-align: right;  display: block;  margin-top: 60px;}
.box-icon { background-color: #F39C12; border-radius: 50%;  display: table; height: 100px;  margin: 0 auto;  width: 100px;  margin-top: -61px;}
.box-icon span { color: #fff; display: table-cell; text-align: center;  vertical-align: middle;}
.info h4, .about h4 { font-size: 20px; text-transform: uppercase;}
.info > p { color: #717171; font-size: 14px; padding-top: 10px; text-align: justify;}
.about > p {color: #717171; font-size: 14px; padding-top: 10px;text-align: right;}
.info > a, .about > a { background-color: #789FC0;  border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); color: #fff; transition: all 0.5s ease 0s;}
.info > a:hover, .about > a:hover { background-color: #0288d1;  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12); color: #fff; transition: all 0.5s ease 0s;}