#portfolio { text-align:center; }
#portfolio .mix { display:none; }
.control-group { padding-top:20px; padding-bottom:30px; }
.control-group ul { list-style:none; padding:10px; text-align:center; }
.control-group li { display:inline-block; }
.control-group .filter { padding:5px 10px; text-decoration:none; border:1px solid transparent; transition:all 200ms ease 0s; }
.box, .box img { width:240px; margin:2px; }
@media (max-width:640px) { .box { width:100%!important; } .box img { width:90%!important; } }

body
{
  color:#0C419A;
  font-family:'Roboto', Arial, Verdana, Sans-Serif;
  font-size:12pt;
  font-weight:normal;
}

a
{
  color:#D5FFFF;
}

a:hover
{
  color:#D5FFFF;
  text-decoration:underline;
}

a:focus
{
  color:#D5FFFF;
}

a:active
{
  color:#D5FFFF;
}

#topbar
{
  background-color:#0C419A;
  line-height:30px;
  border-bottom-width:0px;
}

#topbar .info li a
{
  color:#FFFFFF;
}

#topbar .info li a:hover
{
  color:#E60013;
  text-decoration:none;
}

#topbar .info li .fa
{
  font-size:20px;
  line-height:30px;
  border-width:0px;
}

#topbar .social-icons a .fa
{
  height:30px;
  font-size:14px;
  line-height:30px;
}

#topbar .social-icons a:hover .fa
{
  color:#E60013;
}

#header .logo
{
  display:block;
}

#header .logo img
{
  max-width:180px;
}

#header #menu
{
  background-color:#060463;
}

#header #menu ul
{
  font-size:0px;
}

#header #menu ul > li
{
  display:inline-block;
  letter-spacing:1px;
  font-size:10pt;
  font-weight:600;
  text-transform:uppercase;
}

#header #menu ul > li > a
{
  display:block;
  padding-left:20px;
  padding-right:20px;
  padding-top:12px;
  padding-bottom:12px;
  color:#FFFFFF;
  text-align:center;
  line-height:18px;
  border-left-width:0px;
  border-right-width:0px;
}

#header #menu ul > li > a:hover
{
  background-color:#0C419A;
  color:#FFFFFF;
}

#header #menu ul > li.current > a
{
  color:#E60013;
}

#header.fixed
{
  background-color:#FFFFFF;
}

#header.fixed .logo
{
  margin-top:0px;
  margin-bottom:0px;
}

#header.fixed .logo img
{
  max-width:167px;
  max-height:50px;
}

#header.fixed #menu ul > li > a
{
  padding-left:20px;
  padding-right:20px;
  padding-top:12px;
  padding-bottom:12px;
  line-height:18px;
}

#header .navbar-toggle
{
  background-color:#060463;
}

#header .navbar-toggle .icon-bar
{
  background-color:#FFFFFF;
}

#slider
{
  background-color:#060463;
  border-bottom-width:0px;
}

#slider .camera_bar_cont
{
  background-color:#060463 !important;
}

#slider .camera_bar_cont span
{
  background-color:#D5FFFF !important;
}

#slider .camera_commands
{
  background-color:#FFFFFF;
  border-radius:0px;
}

#slider .camera_commands:hover
{
  background-color:#E8E8E8;
}

#slider .camera_next
{
  background-color:#FFFFFF;
  border-radius:0px;
}

#slider .camera_next:hover
{
  background-color:#E8E8E8;
}

#slider .camera_prev
{
  background-color:#FFFFFF;
  border-radius:0px;
}

#slider .camera_prev:hover
{
  background-color:#E8E8E8;
}

#slider .camera_pag .cameracurrent span
{
  background-color:#D5FFFF;
}

#slider .titre h1
{
  display:block;
  letter-spacing:2px;
  margin-top:8%;
  color:#FFFFFF;
  font-family:'Roboto Condensed', Arial, Verdana, Sans-Serif;
  font-size:42pt;
  font-weight:600;
  text-transform:uppercase;
}

#slider .titre h1 span
{
  display:block;
  margin-top:22px;
  color:#060463;
  font-size:32pt;
  font-weight:400;
  text-transform:uppercase;
}

.full-section
{
  float:none;
  border-top-width:0px;
  border-bottom-width:0px;
}

.breadcrumb
{
  display:none;
}

body.home .breadcrumb
{
  display:none;
}

.section-title
{
  margin-top:0px;
  margin-bottom:30px;
  text-align:center;
}

.section-title .icon
{
  display:none;
  width:80px;
  margin-top:18px;
}

.section-title h1
{
  margin-top:0px;
  margin-bottom:0px;
  color:#060463;
  letter-spacing:2px;
  font-size:20pt;
  font-weight:bold;
  text-transform:uppercase;
}

.section-title h1 span
{
  color:#0C419A;
  font-weight:bold;
}

.section-title h2
{
  margin-top:10px;
  margin-bottom:0px;
  color:#D5FFFF;
  font-family:'Roboto Condensed', Arial, Verdana, Sans-Serif;
  font-size:20pt;
  font-weight:300;
}

#content
{
  padding-top:30px;
  padding-bottom:30px;
}

#content h1
{
  color:#060463;
}

#content h2
{
  color:#060463;
  font-size:20pt;
  font-weight:400;
}

#bloc-textes-1
{
  padding-top:30px;
  padding-bottom:30px;
}

#bloc-textes-1 .bloc .icone
{
  width:100px;
  height:100px;
  margin-left:auto;
  margin-right:auto;
  margin-top:0px;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
  padding-bottom:10px;
  background-color:#060463;
  border-radius:50%;
}

#bloc-textes-1 .bloc .icone .fa
{
  background-color:#D5FFFF;
  border-width:0px;
  border-color:#D5FFFF;
}

#bloc-textes-1 .bloc:hover .icone .fa
{
  background-color:#D5FFFF;
  color:#060463;
  border-color:#D5FFFF;
}

#bloc-textes-1 .bloc .icone img
{
  display:block;
  width:100px;
  height:100px;
  margin-left:auto;
  margin-right:auto;
}

#bloc-textes-1 .bloc .titre:after
{
  border-bottom-width:2px;
  border-color:#D5FFFF;
}

#bloc-textes-1 .bloc .lien a
{
  color:#D5FFFF;
  text-decoration:none;
}

#bloc-textes-1 .bloc .lien a:after
{
  margin-left:5px;
  color:#060463;
  transition:all 0.4s ease;
  -moz-transition:all 0.4s ease;
  -webkit-transition:all 0.4s ease;
}

#bloc-textes-1 .bloc .lien a:hover
{
  background-color:#D5FFFF;
  color:#060463;
}

#bloc-textes-1 .bloc .lien a:hover::after
{
  margin-left:10px;
  color:#D5FFFF;
}

#bloc-textes-2
{
  padding-top:30px;
  padding-bottom:30px;
}

#bloc-textes-2 .photo
{
  padding-top:30px;
}

#portfolio
{
  padding-top:30px;
  padding-bottom:30px;
  background-color:#FFFFFF;
}

#portfolio .port-desc-item h6
{
  color:#FFFFFF;
  font-size:10pt;
  text-transform:uppercase;
}

#portfolio .port-desc-item h6 span
{
  color:#D5FFFF;
  font-size:9pt;
}

#portfolio .item-overlay .fa
{
  background-color:#E8E8E8;
  color:#060463;
}

#portfolio .item-overlay .fa:hover
{
  background-color:#D5FFFF;
  color:#FFFFFF;
}

#portfolio .owl-controls .owl-buttons div
{
  border-color:#FFFFFF;
}

#portfolio .owl-controls .owl-buttons div .fa
{
  color:#FFFFFF;
}

#portfolio .owl-controls .owl-buttons div:hover
{
  background-color:#FFFFFF;
  border-color:#D5FFFF;
}

#portfolio .owl-controls .owl-buttons div:hover .fa
{
  color:#D5FFFF;
}

#portfolio .owl-controls .owl-pagination span
{
  background-color:#060463;
}

#portfolio .owl-controls .owl-pagination .active span
{
  background-color:#D5FFFF;
}

.control-group
{
  padding-top:0px;
  padding-bottom:0px;
}

.control-group ul
{
  padding-top:0px;
  padding-bottom:0px;
}

.control-group ul li
{
  margin-bottom:5px;
}

.control-group .filter
{
  display:inline-block;
  padding-left:10px;
  padding-right:10px;
  background-color:#E8E8E8;
  color:#060463;
  font-size:12pt;
  font-weight:600;
  line-height:22px;
  border-width:0px;
  border-color:#FFFFFF;
}

.control-group .filter:hover
{
  background-color:#060463;
  color:#FFFFFF;
  border-color:#060463;
}

.control-group .filter.active
{
  background-color:#E60013;
  color:#FFFFFF;
  border-color:#D5FFFF;
}

.box
{
  height:220px;
  margin-bottom:0px;
  margin:0px;
}

.box a
{
  display:block;
  overflow:hidden;
  position:relative;
}

.box img
{
  height:220px;
  margin:0px;
}

.box .legend
{
  display:block;
  position:absolute;
  left:0px;
  right:0px;
  bottom:-50px;
  opacity:0;
  z-index:3;
  background-color:#060463;
  color:#FFFFFF;
  font-size:10pt;
  line-height:20px;
  transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -webkit-transition:all 0.5s ease;
}

.box a:hover .legend
{
  bottom:0px;
  opacity:1;
}

#contact
{
  padding-top:25px;
  padding-bottom:25px;
  background-color:#E8E8E8;
}

#contact p
{
  color:#060463;
  font-size:20pt;
  font-weight:300;
  text-align:left;
  line-height:35px;
}

#contact p b
{
  display:block;
  color:#060463;
  font-weight:400;
}

#contact p a
{
  color:#D5FFFF;
  font-weight:700;
}

#contact p a:hover
{
  color:#D5FFFF;
}

#contact .btn
{
  margin-top:0px;
  background-color:#D5FFFF;
  color:#FFFFFF;
  font-size:20pt;
  font-weight:bolder;
  border-width:3px;
  border-color:#FFFFFF;
}

#contact .btn:hover
{
  background-color:#060463;
  color:#FFFFFF;
  border-color:#FFFFFF;
}

.parallax
{
  position:relative;
  padding-top:30px;
  padding-bottom:30px;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
  text-align:center;
}

.parallax .opacity
{
  position:absolute;
  left:0px;
  right:0px;
  top:0px;
  bottom:0px;
  opacity:0.8;
  background-color:#060463;
}

.parallax h3
{
  color:#E60013;
  font-size:54px;
  font-weight:400;
  text-transform:capitalize;
}

.parallax .texte
{
  font-size:32px;
}

.parallax .texte p
{
  font-size:22px;
  font-weight:400;
}

.map iframe
{
  margin-bottom:25px;
}

#blog .blog-meta
{
  margin-top:0px;
  margin-bottom:0px;
}

.coordonnees .adresse > .row
{
  margin-left:0px;
}

.coordonnees .adresse .fa
{
  color:#E60013;
  border-width:0px;
}

.legal h3
{
  margin-bottom:10px;
  color:#D5FFFF;
  font-size:16pt;
  font-weight:700;
  text-transform:uppercase;
}

.sitemap h3
{
  color:#D5FFFF;
  font-size:16pt;
  font-weight:700;
  text-transform:uppercase;
}

.sitemap a
{
  color:#060463;
  font-size:12pt;
  font-weight:600;
}

.sitemap a i
{
  color:#060463;
  font-size:12pt;
  font-weight:400;
}

.sitemap a:hover
{
  color:#D5FFFF;
  text-decoration:none;
}

.sitemap a:hover i
{
  color:#D5FFFF;
}

.control-label
{
  color:#060463;
  font-size:12pt;
  font-weight:300;
}

.form-control
{
  background-color:#FFFFFF;
  color:#060463;
  font-size:12pt;
  font-weight:500;
  border-color:#E8E8E8;
  border-radius:0px;
}

.form-control:hover
{
  background-color:#FFFFFF;
  border-color:#E8E8E8;
}

.form-control:focus
{
  background-color:#E8E8E8;
  border-color:#D5FFFF;
  box-shadow:0px 5px 10px 0px #E8E8E8;
  -moz-box-shadow:0px 5px 10px 0px #E8E8E8;
  -webkit-box-shadow:0px 5px 10px 0px #E8E8E8;
}

.btn-primary
{
  background-color:#0C419A;
  letter-spacing:0px;
  color:#FFFFFF;
  font-size:12pt;
  text-transform:uppercase;
  border-width:0px;
  border-radius:0px;
  transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  -webkit-transition:all 0.3s ease;
}

.btn-primary:hover
{
  background-color:#E60013;
  letter-spacing:2px;
  color:#FFFFFF;
}

#footer
{
  background-color:#060463;
  background-image:url('img/bg-footer.png');
  background-position:right bottom;
  background-repeat:no-repeat;
  background-size:contain;
}

#footer #widgets
{
  padding-top:20px;
  padding-bottom:20px;
}

#footer #widgets h2
{
  margin-bottom:20px;
  color:#FFFFFF;
  font-size:16pt;
  font-weight:600;
  text-transform:uppercase;
}

#footer #widgets .articles h6 a
{
  color:#FFFFFF;
  font-size:12pt;
}

#footer #widgets .articles h6 a:hover
{
  color:#E60013;
}

#footer #widgets .articles em
{
  color:#E60013;
  font-size:9pt;
}

#footer #widgets .reseaux a .fa
{
  font-size:14px;
  border-width:0px;
}

#bottombar::before
{
  display:none;
}

#backtop
{
  background-color:#E8E8E8;
}

#backtop:hover
{
  background-color:#D5FFFF;
}

#bottombar
{
  background-color:#0C419A;
}

#backtop a
{
  color:#060463;
}

#backtop a:hover
{
  color:#FFFFFF;
}

#bottombar a
{
  color:#FFFFFF;
}

#bottombar a:hover
{
  color:#E60013;
}

#footer #widgets .contact p a
{
  color:#FFFFFF;
}

#footer #widgets .contact p a:hover
{
  color:#E60013;
}

#footer #widgets .coordonnees .fa
{
  color:#E60013;
}

#footer #widgets .coordonnees a
{
  color:#FFFFFF;
}

#footer #widgets .coordonnees a:hover
{
  color:#E60013;
}

#footer #widgets .coordonnees p
{
  color:#FFFFFF;
}

#bottombar a
{
  font-size:11pt;
}

#footer #widgets .contact p
{
  font-size:26pt;
}

#footer #widgets .coordonnees p
{
  font-size:12pt;
}

#bottombar a
{
  font-weight:400;
}

#footer #widgets .contact p
{
  font-weight:600;
}

#footer #widgets .coordonnees a
{
  font-weight:bold;
}

#footer #widgets .coordonnees a:hover
{
  font-weight:bold;
}

#footer #widgets .contact p a
{
  text-decoration:none;
}

#footer #widgets .coordonnees .fa
{
  border-width:0px;
}

#bottombar
{
  border-top-width:0px;
  border-bottom-width:0px;
}



@media screen and (min-width: 992px)
{
  #topbar { position:absolute; top:0px; left:0px; right:0px; z-index:2; }
  #topbar .container { width:auto; padding-left:0px; padding-right:0px; }
  #topbar .container > .row { margin-left:0px; margin-right:0px; }
  #topbar .container > .row > div { width:95%; float:left; padding-left:0px; padding-right:0px; }
  #topbar .container > .row > div.col-xs-12 { display:block; width:3%; float:left; }
  #topbar .info { height:30px; overflow:hidden; padding-left:0px; padding-right:30px; text-align:right; }
  #topbar .info li.company { display:none; }
  #topbar .info li.phone { font-size:18px; font-weight:700; margin-right:0px; }
  #topbar .info li .fa { display:inline-block; height:30px; vertical-align:top; }
  #topbar .social-icons {  }

  #header { height:90px; position:absolute; top:30px; z-index:3; background-color:transparent; }
  #header .container { width:auto; padding-left:0px; padding-right:0px; }
  #header .navbar-header { float:none; position:absolute; z-index:2; margin-top:-30px; }
  #header #menu { float:none!important; padding-left:0px; padding-right:0px; }
  #header #menu ul { float:none; padding-right:20px; text-align:right; }
  #header #menu ul > li { display:inline-block; float:none; vertical-align:middle; }
  #header #menu ul > li a { box-sizing:content-box; }
  #header .navbar-header a { display:block; padding:10px 0px 10px 20px; }
  #header .navbar-header a::before { content:""; display:block; position:absolute; right:0px; bottom:0px; z-index:2; width:500px; height:500px; -webkit-transform:rotate(45deg);transform:rotate(45deg); -webkit-transform-origin:100% 100%; transform-origin:100% 100%;}


  #header .navbar-header a img { position:relative; z-index:3; }
  #header .navbar-header a, #header .navbar-header a::before { background-color:#fff; }

  #header.fixed { height:auto; background-color:#fff; }
  #header.fixed .navbar-header { margin-top:0px; }
  #header.fixed .navbar-header a { padding:5px 20px 5px 40px; }
  #header.fixed .logo { margin-top:0px; margin-bottom:0px; }

  #slider, { z-index:1; }
  #slider, #slider .camera-slider { height:100vh!important; max-height:100vh!important; }
  #slider .camera_wrap img { width:100vw!important; max-width:none!important; height:auto!important; left:0px; right:0px; top:auto; bottom:0px; margin:0px!important; }

  #main { padding-top:120px; }
  body.index #main { padding-top:0px; }

  .box a::after { content:"\f00e"; color:#fff; font-family:FontAwesome; font-size:1px; display:flex; align-items:center; justify-content:center; position:absolute; left:50%; right:50%; top:50%; bottom:50%; z-index:2; background-color:rgba(24, 160, 212, 0.7); opacity:0.0; transition:all 0.4s ease; }
  .box:hover a::after { font-size:50px; left:0px; right:0px; top:0px; bottom:0px; opacity:1.0; }
  .box .legend { z-index:3; }

  #footer { position:relative; }
  #footer #widgets { width:auto; padding:0px 30px; }
  #footer #widgets .footer-widget.col-md-3 { padding-top:20px; padding-bottom:70px; }

  #bottombar { position:absolute; left:0px; right:0px; bottom:0px; padding:15px 0px;  }
  #bottombar .container { width:auto; padding-left:30px; padding-right:70px; line-height:20px; }
  #bottombar .footer-menu.col-lg-7 { width:75%; }
  #bottombar .copyright.col-lg-5 { width:25%; }
  #bottombar .footer-menu.col-lg-push-5 { left:25%; }
  #bottombar .copyright.col-lg-pull-7 { right:75%; }
  #bottombar .copyright a { color:#e8e8e8; }
  #bottombar .copyright a:hover { color:#e60013; }
}



#slider .titre h1 { text-shadow:0px 1px 5px #000; }
#slider .titre h1 span { text-shadow:0px 1px 2px #000; }

body.nos-realisations #portfolio { padding-top:10px; padding-bottom:50px; }

hr { margin-top:30px; margin-bottom:40px; }

.parallax .marques img { height:80px; margin:30px 20px; vertical-align:middle; }
.parallax .opacity, .parallax > div { background-color:transparent; }


.img-effet { display:inline-block; position:relative; }
.img-effet::after { content:""; display:block; position:absolute; left:15px; right:-15px; top:15px; bottom:-15px; z-index:1; background-color:rgba(24, 160, 212); }
.img-effet img { position:relative; z-index:2; }

.parallax .opacity, .parallax > div { background-color:transparent; }

.box, .box img { width:auto; }

#footer #widgets h2 b { display:block; color:#f74307; font-size:18px; font-weight:700; }

#bottombar .footer-menu a > span { display:none; }

@media screen and (max-width: 991px)
{
  #header #menu ul > li { display:block; }
  #slider .camera-slider, #slider .cameraSlide img { height:50vh!important; }
  .img-effet::after { left:5px; right:-5px; top:5px; bottom:-5px; }
  #footer #widgets h2 { margin-top:30px; }
  #footer #widgets img.logo,
  #footer #widgets img.dev { max-width:60%; margin:0px auto; background-color:#fff; border:10px solid #fff; }
}

@media screen and (max-width: 767px)
{
  .photos3col { padding-left:14px; padding-right:14px; }
  .photos3col > div { padding-left:1px; padding-right:1px; }
}

.effet-photo p { background-color: #FFFFF; overflow: hidden; }
.effet-photo img { transition: all 0.5s ease; }
.effet-photo img:hover { opacity: 0.4; transform:scale(1.20); }

.form-control { box-shadow:none; }
.form-control:hover { background-color:#f8f8f8; }

.slider-city {
    padding: 0;
    position: absolute;
}

.slider-city img {
    filter: brightness(10);
    position: absolute;
    left: 10vw;
    bottom: 0;
    width: 50vw;
    height: auto;
}

.effet-photo p { background-color: #295494; overflow: hidden; }
.effet-photo img { transition: all 0.5s ease; }
.effet-photo img:hover { opacity: 0.6; transform:scale(1.20); }



#bloc-textes-1 .bloc .titre h3,#bloc-textes-1 .bloc .lien a {
  
  text-shadow: 1px 1px 2px #444;
}


div#bloc-textes-1 {
  background-color: rgba(0, 163, 234, 0.78);
  border-bottom: 5px solid #0B6E99;
}

.vertical-list .vertical-content p {
  font-size: 14px;
  line-height: 21px;
  color: #222;
}

	.box-content {
		margin-top: 100px;
		margin-bottom: 45vh; 
		position: relative;
		width: 100%;
	}

	.box-content img {
		position: absolute;
		margin: 0 20%;
		top: 100%;
		width: 60vw;
		height: 40vh;
		object-fit: cover;
		box-shadow: 2px 2px 10px rgb(0 0 0 / 20%);
	}

	.box-content div {
	    position: relative;
	    top: 0;
	    margin: 0 10%;
	    width: 80%;
	    padding: 10px;
	    border: 0px solid;
	    border-radius: 15px;
	    background-color: white;
	    box-shadow: 2px 2px 10px rgb(0 0 0 / 20%);
	}

.indexb {margin: 0 5vw;}

@media (min-width: 992px)
{
.box-content {
  margin-top: 100px; 
  margin-bottom: 0;
  position: relative;
  width: 100%;
}

.box-content img {
border-bottom: 5px solid #060463;
border-top: 5px solid #060463;
border-radius: 10px;
  position: absolute;
  margin: 0;
  top: 10%;
  right: 50vw;
  width: 35%;
  height: 65%;
  object-fit: cover;
  box-shadow: 2px 2px 10px rgb(0 0 0 / 20%);
}
.box-content:nth-child(2n) img { left: 50vw; bottom: 10%; top: auto; }

.box-content div {
  position: relative;
  top: 0;
  left: 45vw;
  width: 45vw;
  margin: 0;
  padding: 20px;
  border: 0px solid;
  border-radius: 15px;
  background-color: white;
  box-shadow: 2px 2px 10px rgb(0 0 0 / 20%);
}
.box-content:nth-child(2n) div { left: 10vw; }
}

.index .parallax {
    background-image: linear-gradient(rgb(0 0 0 / 20%), rgb(0 0 0 / 20%)),url(img/coordonnateur-sps-lons-le-saunier-parallax.jpg) !important;
    background-blend-mode: darken;
}

@media (min-width: 1200px)
{
.box-content img {
  width: 40%;
}
}

.index .parallax strong { text-shadow: 1px 1px 10px white, -1px -1px 10px white; }

#slider .titre h1 span { -webkit-text-stroke: 0.2px white; }

.form-horizontal .control-label { color: #0c419a; }
.coordonnees i { color:#060463; border-color:#FFA600; }
.contact .coordonnees .row h3 { color: #e60013; font-weight:bold; }
.contact .coordonnees .row a { color: #e60013; }
.contact .coordonnees .row a:hover { color: #e60013; }