/*** GLOBAL ***/

body {
   margin: 0px;
   font-family: 'Roboto', sans-serif;
   font-size: 12px;
   color: #3d3d3d;
   background: #e5e5e5;
}

* {
   margin: 0px;
   padding: 0px;
   text-decoration: none;
   list-style-type: none;
   border: 0px;
}

.center_wrapper {
   margin: 0px auto;
   max-width: 1920px;
   overflow-x: hidden; 
}

.main_info {
   max-width: 940px;
   margin: 20px auto;
   padding: 20px;
   color: #757575;
   font-size: 1.25em;
   -webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.1);
   -moz-box-shadow:    0px 2px 6px 0px rgba(50, 50, 50, 0.1);
   box-shadow:         0px 2px 6px 0px rgba(50, 50, 50, 0.1);
   border-top: 3px solid rgb(66, 146, 217);
   border-radius: 3px;
} 

article > p {
   padding: 5px 0px;
}

article > div {
   margin-bottom: 14px;
}

article > div > h3 {
   margin-bottom: 2px;
   text-align: left;
   font-size: 1.2em;
}

address {
   margin: 15px 0px;
   font-style: normal;
}

.about_bsp {
   background: rgba(255, 255, 255, 0.99) url("../images/about_bsp_background.png") bottom right no-repeat;
}

.our_clients {
   background: rgba(255, 255, 255, 0.99) url("../images/our_clients_background.png") bottom right no-repeat;
}

.contact {
   background: rgba(255, 255, 255, 0.99) url("../images/contact_background.png") bottom right no-repeat;
}

.contact a, .contact a:link, .contact a:visited {
   color: #757575;
   text-decoration: none;
}

.contact a:hover {
   color: #4392D9;
   text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
   padding: 0px;
   margin: 0px;
}

h1 {
   max-width: 720px;
   margin: 0px auto;
   color: #17385C;
   text-align: center;
   font-size: 1.5em;
}

h2 {
   margin-bottom: 20px;
   color: #4292D9;
   text-align: left;
   font-variant: small-caps;
   font-size: 2em;
}

.clear {
   clear: both;
}

/*** HEADER ***/

#main_header {
   position: relative;
   background-color: white;
}

#main_header #main_mobile_menu_button {
   display: none;
   position: absolute;
   margin: 15px;
   top: 0px;
   left: 0px;
   z-index: 5000;
}

#main_header #main_mobile_menu_button img {
   width: 32px;
   height: auto;
}

#main_header #logo {
   -webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -o-transition: all 0.4s ease;
   transition: all 0.4s ease;
   position: absolute;
   width: 250px;
   height: auto;
   top: -50px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   margin: auto auto;
   border-radius: 16px;
   -webkit-box-shadow: 0px 0px 120px rgba(255, 255, 255, 0.80);
   -moz-box-shadow:    0px 0px 120px rgba(255, 255, 255, 0.80);
   box-shadow:         0px 0px 120px rgba(255, 255, 255, 0.80);
   z-index: 1000
}

#main_header #logo:hover {
   width: 200px !important;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

#main_header video {
   position: fixed; 
   width: auto;
   height: auto;
   min-width: 100%; 
   min-height: 100%;
   margin: auto auto;
   display: block;
   z-index: 0;
}

#header_poster {
   display: none;
   width: 100%;
   height: 100%;
   min-height: 290px;
   -webkit-box-shadow: inset 0px -25px 10px -20px rgba(0, 0, 0, 0.1);
   -moz-box-shadow:    inset 0px -25px 10px -20px rgba(0, 0, 0, 0.1);
   box-shadow:         inset 0px -25px 10px -20px rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(181, 181, 181, 0.8);
   background: url("../images/header_poster.jpg") no-repeat top center fixed; 
}

#main_header #flags {
   position: absolute;
   top: 15px;
   right: 15px;
   float: left;
}

#flags a {
   display: inline-block;
   border-radius: 16px;
 }

.en_flag, .fr_flag {
   width: 32px;
   height: 32px;
   margin-right: 5px;
}

/*** MENU ***/

#main_menu {
   width: 100%;
   height: 50px;
}

nav {
   width: 100%;
   height: 50px;
   overflow: hidden;
   -webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.1);
   -moz-box-shadow:    0px 2px 6px 0px rgba(50, 50, 50, 0.1);
   box-shadow:         0px 2px 6px 0px rgba(50, 50, 50, 0.1);
   background: rgba(255, 255, 255, 0.97);
   z-index: 1000;
}

nav ul {
   height: 50px;
   width: 660px;   
   margin: 0px auto;
}

nav ul li {
   float: left;
}

nav ul li a {
   display: block;
   padding: 0px 20px;
   line-height: 50px;
   font-family: 'Roboto', sans-serif;
   font-size: 1.5em;
   color: #1F5FA5;
}

nav ul li a:hover {
   color: #4292D9;
   background-color: rgba(243, 243, 243, 0.75);
}

nav .active {
   color: #4292D9;
}

.ripplelink {
  position: relative;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: 0;
}

.ink {
  position: absolute;
  background: rgba(66, 146, 217, 0.20);
  border-radius: 100%;
  -webkit-transform: scale(0);
     -moz-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
}

.animate {
   -webkit-animation: ripple 0.65s linear;
   -moz-animation: ripple 0.65s linear;
    -ms-animation: ripple 0.65s linear;
     -o-animation: ripple 0.65s linear;
        animation: ripple 0.65s linear;
}

@-webkit-keyframes ripple {
    100% {
      opacity: 0; 
      -webkit-transform: scale(2.5);
   }
}
@-moz-keyframes ripple {
    100% {
      opacity: 0; 
      -moz-transform: scale(2.5);
   }
}
@-o-keyframes ripple {
    100% {
      opacity: 0; 
      -o-transform: scale(2.5);
   }
}
@keyframes ripple {
    100% {
      opacity: 0; 
      transform: scale(2.5);
   }
}

@media (max-width: 1215px) {
   #logo {
      width: 200px !important;
      border-radius: 13px !important;
   }
}

@media (max-width: 1000px) {
   #logo, .our_productions_logo {
      width: 150px !important;
      webkit-box-shadow: 0px 0px 60px rgba(255, 255, 255, 0.80) !important;
      -moz-box-shadow: 0px 0px 60px rgba(255, 255, 255, 0.80) !important;
      box-shadow: 0px 0px 60px rgba(255, 255, 255, 0.80) !important;
   }
}

/* Menu */

@media (min-width: 701px) {
   #main_mobile_menu {
      display: none !important;
   }
}

@media (max-width: 700px) {
   video {
      display: none !important;
   }

   #header_poster {
      display: block;
   }

   #main_menu {
      display: none !important;
   }

   #main_mobile_menu nav, #main_mobile_menu ul, #main_mobile_menu li {
      height: initial;
      float: none;
   }   

   #main_header #main_mobile_menu_button {
      display: block;
   }

   #main_mobile_menu {
      width: 100%;
   }

   nav {
      width: initial;
      background: #454545;
      border-bottom: 1px solid grey;
      z-index: 1000;
   }

   nav ul {
      width: initial;   
      margin: 0px auto;
   }

   nav ul li {
      float: left;
   }

   nav ul li a {
      display: block;
      padding: 0px 20px;
      line-height: 50px;
      font-family: 'Roboto', sans-serif;
      font-size: 1.3em;
      color: white;
   }

   nav ul li a:hover span {
      color: white;
      border: none;
   }

   nav ul li a:active span {
      color: black;
   } 

   nav ul li a:hover {
      color: white;
      box-shadow: none;
      background-color: #222222;
   }

   nav ul li a:active {
      box-shadow: none;
      background-color: grey !important;
   }

   nav .active {
      color: white;
      background-color: rgb(82, 82, 82);
   }

 
}

/*** Our productions ***/

#our_productions_logo {
   position: absolute;
   width: 155px;
   top: 0px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   margin: auto auto;
   border-radius: 13px;
   webkit-box-shadow: 0px 0px 120px rgba(255, 255, 255, 0.80);
   -moz-box-shadow: 0px 0px 120px rgba(255, 255, 255, 0.80);
   box-shadow: 0px 0px 120 rgba(255, 255, 255, 0.80);
}

h3 {
   margin-bottom: 2px;
   text-align: center;
   font-size: 1.4em;
}

#video_galery_header {
   width: 100%;
   height: 250px;
   background: url("../images/video_galery_header.jpg") no-repeat top center; 
}

/*** Responsive video-galery  ***/

/* First make sure the video thumbnail images are responsive. */
img {
   max-width: 100%;
   height: auto;
}

/* 
This is the starting grid for each video with thumbnails 5 across for the largest screen size.
It's important to use percentages or there may be gaps on the right side of the page. 
*/
.video {
   background: #fff;
   padding-bottom: 20px;
   box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.1);
   width: 18%; /* Thumbnails 5 across */
   margin: 1%;
   float: left;
}

/* These keep the height of each video consistent between YouTube and Vimeo.
Each can have thumbnail sizes that vary by 1px and are likely break your layout. */
.video figure {
   height: 0;
   padding-bottom: 60%;
}
/* Media Queries - This is the responsive grid. */
@media (max-width: 1366px) {
   .video {
      width: 23%; /* Thumbnails 4 across */
   }
}

@media (max-width: 1024px) {
   .video {
      width: 31.333%; /* Thumbnails 3 across */
   }
}

@media (max-width: 600px) {
   .video {
      width: 48%; /* Thumbnails 2 across */
   }
}

@media (max-width: 360px) {
   .video {
      display: block;
      width: 90%; /* Single column view. */
      margin: 5%; /* The smaller the screen, the smaller the percentage actually is. */
      float: none;
   }
}

/* These are my preferred rollover styles. */
.video img {
   width: 100%;
   opacity: 1;
}
.video img:hover, .video img:active, .video img:focus {
   opacity: 0.75;
}