body,html{width:100%;height:100%}body{font-family:Merriweather,'Helvetica Neue',Arial,sans-serif}hr{max-width:50px;border-width:3px;border-color:#333333}hr.light{border-color:#fff}a{color:#333333;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}a:hover{color:#777777}h1,h2,h3,h4,h5,h6{font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}.bg-primary{background-color:#333333!important}.bg-dark{background-color:#212529!important}.text-faded{color:rgba(255,255,255,.7)}section{padding:8rem 0}.section-heading{margin-top:0}::-moz-selection{color:#fff;background:#212529;text-shadow:none}::selection{color:#fff;background:#212529;text-shadow:none}img::selection{color:#fff;background:0 0}img::-moz-selection{color:#fff;background:0 0}#mainNav{border-bottom:1px solid rgba(33,37,41,.1);background-color:#333333;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}#mainNav .navbar-brand{font-weight:700;text-transform:uppercase;color:#e74c3c;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{color:#e74c3c}#mainNav .navbar-nav>li.nav-item>a.nav-link,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus{font-size:.9rem;font-weight:700;text-transform:uppercase;color:#212529}#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:hover{color:#e74c3c}#mainNav .navbar-nav>li.nav-item>a.nav-link.active,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active{color:#F1F0E2!important;background-color:transparent}#mainNav .navbar-nav>li.nav-item>a.nav-link.active:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active:hover{background-color:transparent}@media (min-width:992px){#mainNav{border-color:transparent;background-color:transparent}#mainNav .navbar-brand{color:rgba(255,255,255,.7)}#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{color:#fff}#mainNav .navbar-nav>li.nav-item>a.nav-link{padding:.5rem 1rem}#mainNav .navbar-nav>li.nav-item>a.nav-link,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus{color:rgba(255,255,255,.7)}#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:hover{color:#fff}#mainNav.navbar-shrink{color:#000 !important;border-bottom:1px solid rgba(33,37,41,.1);background-color:#444}#mainNav.navbar-shrink .navbar-brand{color:#333333}#mainNav.navbar-shrink .navbar-brand:focus,#mainNav.navbar-shrink .navbar-brand:hover{color:#e74c3c}#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link,#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus{color:#212529}#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:hover{color:#e74c3c}}header.masthead{padding-top:10rem;padding-bottom:calc(10rem - 56px);background-color: #e74c3c;background-position:center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}header.masthead hr{margin-top:30px;margin-bottom:30px}header.masthead h1{font-size:2rem}header.masthead p{font-weight:300}@media (min-width:768px){header.masthead p{font-size:1.15rem}}@media (min-width:992px){header.masthead{height:100vh;min-height:650px;padding-top:0;padding-bottom:0}header.masthead h1{font-size:3rem}}@media (min-width:1200px){header.masthead h1{font-size:4rem}}.service-box{max-width:400px}.portfolio-box{position:relative;display:block;max-width:650px;margin:0 auto}.portfolio-box .portfolio-box-caption{position:absolute;bottom:0;display:block;width:100%;height:100%;text-align:center;opacity:0;color:#fff;background:rgba(240,95,64,.9);-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}.portfolio-box .portfolio-box-caption .portfolio-box-caption-content{position:absolute;top:50%;width:100%;transform:translateY(-50%);text-align:center}.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{padding:0 15px;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category{font-size:14px;font-weight:600;text-transform:uppercase}.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{font-size:18px}.portfolio-box:hover .portfolio-box-caption{opacity:1}.portfolio-box:focus{outline:0}@media (min-width:768px){.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category{font-size:16px}.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{font-size:22px}}.text-primary{color:#333333!important}.btn{font-weight:700;text-transform:uppercase;border:none;border-radius:300px;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}.btn-xl{font-weight:300;padding:1rem 2rem;}.btn{border-radius:0px;}.btn-primary{background-color:#e74c3c;border-color:#e74c3c}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{color:#fff;background-color:#ee4b28!important}.btn-primary:active,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(240,95,64,.5)!important}.bg-primary{color:#333333}

#brief{background-repeat:no-repeat; background-size:auto 100% ; background-position:0% 50%; background-image: url("http://optimal.agency/vid.3gp");}
#brief .row .whitebkg{ background-color:#ffffff !important; padding-top:15px; } .whitebkg .text-muted{ font-weight:300; font-family:'Open Sans', sans-serif !important; letter-spacing:0.5px; word-spacing:1.4px; font-size:16.9px; line-height:24px; padding-left:24px; padding-right:24px; padding-bottom:24px; padding-top:0px; }
#about .row .text-faded{ font-family:'Open Sans', sans-serif !important; font-weight:300; font-size:19.1px; } #about .row .section-heading{ font-size:56.4px; }
.bg-primary .row .text-faded { font-family:'Open Sans', sans-serif !important; font-weight:300; font-size:19.1px; }
#services .row .service-box .text-muted{ font-family:'Open Sans', sans-serif !important; font-weight:300; } #services .row .service-box h3{ font-size:32.3px; }
.whitebkg .text-muted{ word-spacing:2.1px; letter-spacing:1px; }
#services .row .service-box .text-primary{ font-weight:300; font-size:72px; font-style:normal; text-decoration:none; }
/* Default to hide the video on all devices */
.img-centered {
  margin: 0 auto;
}
#about{
	padding-bottom:44px;
	padding-top:57px;
  background-color:#ffffff !important;


}
.parallax2 {
  /* The image used */
  background-image: url(https://optimal.agency/img/optimal-logos-background.jpg);

  /* Set a specific height */
  height: auto;
  width:100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax3 {
  /* The image used */
  background-image: url(https://optimal.agency/img/tech-background.jpg);

  /* Set a specific height */
  width:100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax {
  /* The image used */
  background-image: url(https://optimal.agency/img/optimal-back2.jpg);

  /* Set a specific height */
  height: 240px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.overlay2 {
  position: absolute;
  height:506px;
  width: 100%;
  margin-top:-128px;
  background: #000;
  z-index: 998;
  opacity: 0.5;
}
.top2{z-index: 999;}

#standout {background-image:url(https://optimal.agency/img/tech-background.jpg);}
#about .row .section-heading{ font-weight:300; }
#logos .row .section-heading{ font-weight:300; }
 .row .section-heading{ font-weight:300; }
#logos section{ background-color:#333333 !important; }
#logos{ background-color:#333333 !important;  padding-top:40px; padding-bottom:0px; } #work{ height:0px !important; padding-bottom:77px; padding-top:41px; }
#logo{ top:-50px; position:relative; }
#brief{ padding-bottom:68px; }
#services{
	padding-bottom:61px;
	padding-top:41px;
}
#studies{ padding-top:60px; padding-bottom:79px; z-index:1000;}
body .text-white .container .mb-4{ font-weight:300; } body .text-white .container .btn-xl{ font-weight:300; } #contact{ font-weight:300; } #contact .row .section-heading{ font-weight:300; } #contact .row .mb-5{ font-family:'Open Sans', sans-serif !important; } #contact .container .row .ml-auto p{ font-family:'Open Sans', sans-serif !important; } .mr-auto p{ font-family:'Open Sans', sans-serif !important; }
#callbox{ background-color:#383838 !important; padding-bottom:54px; padding-top:47px; }
#work .row .section-heading{
	font-weight:300;
}

#services .row .section-heading{
	font-weight:300;
}

#services .row .service-box h3{
	font-weight:300;
}
.whitebkg .mb-3{ font-weight:300; }

#studies .row .service-box .text-muted{ font-family:'Open Sans', sans-serif !important; font-weight:300; } #studies .row .section-heading{ font-weight:300; } #studies .row .service-box .mb-3{ font-weight:300; }

.whitebkg{background-color:#fff;}


.fs-background-media video{ width:100% !important; position:fixed !important; z-index:-10; }
.fs-background-element .overlay{ width:100% !important;}
.fs-background-container .fs-background-media{ width:100% !important;}
header {
  position: relative;
  display: block;
  height: auto;
  width: auto;
  background-color: #222;
  background: no-repeat center center;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  padding: 100px 0;
}

header .brand-name {
  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 55px;
  line-height: 55px;
  text-transform: uppercase;
  font-weight: 900;
  margin-top: 15px;
}
header .brand-name-subtext {
  font-size: 20px;
  line-height: 20px;
  font-weight: 300;
}
header img {
  max-width: 150px;
  max-height: 150px;
}
header .scroll-down {
  position: absolute;
  width: 100%;
  bottom: 20px;
  text-align: center;
}
header .scroll-down .btn {
  height: 50px;
  width: 50px;
  border: 2px solid white;
  border-radius: 100% !important;
  line-height: 50px;
  padding: 0;
  letter-spacing: normal;
  color: white;
  font-size: 30px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
header .scroll-down .btn:hover {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
  outline: none;
}
@media (max-width: 768px) {
.fs-background-element .overlay{ display:none; }
.fs-background-media video{ display:none; }
.fs-background-container .fs-background-media{ display:none !important; }
.my-auto h2{ text-transform:none; background-color:transparent !important; font-family:'Lato', sans-serif !important; font-weight:300; font-size:4em !important; margin: 10%;}
.my-auto .sr1{ margin: 10%; line-height: 2em !important; font-size: 2em;}
.my-auto {background-color:#333333; color:#fff; padding-bottom: 2%;}
.fs-background-element{ background-color:#333333 !important; }



}
@media (min-width: 768px) {
  header {
    height: 100%;
    width: 100%;
    padding: 0;
    background-attachment: scroll;
  }
  header .intro-content {
    color: white;
    text-align: center;
    width: 50%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  header .brand-name {
    font-size: 80px;
    line-height: 80px;
  }
  header .brand-name-subtext {
    font-size: 30px;
    line-height: 30px;
  }
  header img {
    max-width: 250px;
    max-height: 250px;
  }
}
@media (min-width: 1025px) {
  header {
    background-attachment: fixed;
  }
}
header.video .overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #000;
  z-index: 998;
  opacity: 0;
}
header.video .intro-content {
  z-index: 999;
}
header.video .scroll-down {
  z-index: 999;
}
@media (min-width: 768px) {
  header.video .overlay {
    opacity: 0.5;
  }
}

}


#whiteback > p#whiteback{ font-weight:300; color:#666666; font-family:'Open Sans', sans-serif !important; } #messageBox > #whiteback{ opacity:1; }
#whiteback{background-color:#fff;}
/* The container for our text and stuff */
#messageBox{
   position: absolute;  top: 0;  left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height:100%;
}

.my-auto .mx-auto h2{
	font-weight:600;
	letter-spacing:0.9px;
	word-spacing:5.5px;
  font-size:46.7px;

}

.my-auto .mx-auto h3{
	font-weight:300;
	letter-spacing:0.9px;
	font-size:19.2px;
  line-height:0px;

}
.my-auto .sr1{ font-weight:300; }
.my-auto .sr1{ background-color:transparent !important; line-height:23.8px; font-size:27.4px; }
.fs-background-element .my-auto{ width:100%; }
.my-auto h2{ text-transform:none; background-color:transparent !important; font-family:'Lato', sans-serif !important; font-weight:300; font-size:70.3px; }


@keyframes flickerAnimation {
  0%   { opacity:1; }
  25%  { opacity:0; }
  50% { opacity:1; }
  75%  { opacity:1; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  25%  { opacity:0; }
  50% { opacity:1; }
  75%  { opacity:1; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  25%  { opacity:0; }
  50% { opacity:1; }
  75%  { opacity:1; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  25%  { opacity:0; }
  50% { opacity:1; }
  75%  { opacity:1; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation .1s infinite;
   -moz-animation: flickerAnimation .1s infinite;
   -o-animation: flickerAnimation .1s infinite;
    animation: flickerAnimation .1s infinite;
}



@keyframes flickerAnimation {
  0%   { opacity:1; }
  25%  { opacity:0; }
  50% { opacity:1; }
  75%  { opacity:1; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  25%  { opacity:0; }
  50% { opacity:1; }
  75%  { opacity:1; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  25%  { opacity:0; }
  50% { opacity:1; }
  75%  { opacity:1; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  25%  { opacity:0; }
  50% { opacity:1; }
  75%  { opacity:1; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation .1s infinite;
   -moz-animation: flickerAnimation .1s infinite;
   -o-animation: flickerAnimation .1s infinite;
    animation: flickerAnimation .1s infinite;
}
.optimal
{font-family: 'Press Start 2P', cursive;}