html,
body { font-family: 'Open Sans', sans-serif;font-size: 12px;font-weight: 400; }
body { color: #fff;background: #1b1b1b; }
h1,h2,h3,h4,h5,h6 { font-family: 'Open Sans', sans-serif;margin:0;padding:0; }
a { color: #fff;outline: none !important;text-decoration: none; }
a:hover,a:focus { color: #fff;text-decoration: none; }
ol, ul {  list-style:none;margin:0;padding:0;outline: none; }
li { margin:0;padding:0;list-style: none; }
img{ outline: none;border:0; }
.no-padding { padding-left:0;padding-right:0; }

/************************************************************************
---------------------------  Brand campaigner  --------------------------
++++++++++++++++++++++++++     Introduction    ++++++++++++++++++++++++++
*************************************************************************/
#introduction { position: relative;text-align: center;width: 100vw;height: 100vh;background-image: url('../images/brand-campaigner-bg.jpg');background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover; }
#introduction .logo-container { position: absolute;top: 38px;left:101px;display: inline-block; }
#introduction .logo-container a { text-decoration: none; }
#introduction .logo-container a .brand-campaigner-logo { outline: none; }
#introduction .brand-campaigner-intro { position: absolute;bottom: 5px;left: 50%;transform: translate(-50%, -50%); }
#introduction .brand-campaigner-intro .brand-campaigner-title a { text-decoration: none;outline: none;display: inline-block; }
#introduction .brand-campaigner-intro .brand-campaigner-title a>img.brand-campaigner-title-image { outline: none; }
#introduction .brand-campaigner-intro .brand-campaigner-tagline p { padding: 2px 0 0 0;font-family: 'Open Sans', sans-serif;font-weight: 300;color: #fff; }
@media (min-width: 0px) and (max-width: 480px) {
  #introduction .logo-container { top: 10px;left:26px; }
  #introduction .logo-container a .brand-campaigner-logo { width: 22px;height: 41px; }
  #introduction .brand-campaigner-intro .brand-campaigner-title a>img.brand-campaigner-title-image { width: 266px; }
  #introduction .brand-campaigner-intro .brand-campaigner-tagline p { font-size: 15px;line-height: 19px; }
}
@media (min-width: 481px) and (max-width: 767px) {
  #introduction .logo-container { top: 19px;left:44px; }
  #introduction .logo-container a .brand-campaigner-logo { width: 22px;height: 41px; }
  #introduction .brand-campaigner-intro .brand-campaigner-title a>img.brand-campaigner-title-image { width: 356px; }
  #introduction .brand-campaigner-intro .brand-campaigner-tagline p { font-size: 20px;line-height: 28px; }
}
@media (min-width: 768px) {
  #introduction .logo-container { top: 26px;left:69px; }
  #introduction .logo-container a .brand-campaigner-logo { width: 35px;height: 66px; }
  #introduction .brand-campaigner-intro .brand-campaigner-title a>img.brand-campaigner-title-image { width: 369px; }
  #introduction .brand-campaigner-intro .brand-campaigner-tagline p { font-size: 21px;line-height: 28px; }
}
@media (min-width: 992px) {
  #introduction .logo-container { top: 30px;left:78px; }
  #introduction .logo-container a .brand-campaigner-logo { width: 42px;height: 78px; }
  #introduction .brand-campaigner-intro .brand-campaigner-title a>img.brand-campaigner-title-image { width: 410px; }
  #introduction .brand-campaigner-intro .brand-campaigner-tagline p { font-size: 23px;line-height: 29px; }
}
@media (min-width: 1200px) {
  #introduction .logo-container { top: 38px;left:101px; }
  #introduction .logo-container a .brand-campaigner-logo { width: 46px;height: 85px; }
  #introduction .brand-campaigner-intro .brand-campaigner-title a>img.brand-campaigner-title-image { width: 545px;height: 65px; }
  #introduction .brand-campaigner-intro .brand-campaigner-tagline p { font-size: 30px;line-height: 38px; }
}

/************************************************************************
++++++++++++++++++++++++++++      Footer     ++++++++++++++++++++++++++++
*************************************************************************/
footer { max-height: 307px;background-color: #1b1b1b; }
footer .container { padding-top: 129px;padding-bottom: 29px; }
footer .container .social-media ul { text-align: center;margin-bottom: 82px; }
footer .container .social-media ul>li {  display: inline-block; }
footer .container .social-media ul>li:first-child { margin-right: 15px; }
footer .container .social-media ul>li a { display: block;text-decoration: none;text-align: center;width: 53px;height: 53px;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;-o-border-radius: 50%;background-color: #fff; }
footer .container .social-media ul>li a>i { color: #000;display: inline-block;margin-top: 16px; }
footer .container .social-media ul>li a>i.fa-facebook { font-size: 25px; }
footer .container .social-media ul>li a>i.fa-linkedin { font-size: 25px; }

footer .container .copyright p { color: #fff;font-weight: 300; font-size: 14px;text-align: center }