body {
  
  
  background-color:#ffffff;
  padding-top: 50px;
  
}

h1,h2,h3,h4,h5,h6 {font-family: 'Ubuntu', sans-serif}

h1{ font-size:3em; line-height:0.9em; font-weight: 400; padding:0; margin:0; margin-bottom: 20px;color: #666666;}
h2{ font-size:2em; line-height:0.7em; letter-spacing:0; font-weight: 300;}
h3{ font-size:1.5em; line-height:1.3em; letter-spacing:0; margin-bottom: 20px; color: #666666;}
h5 {font-size: 1em; font-weight: lighter;}
.light {font-weight:300;}
.regular {font-weight:400;}
.medium {font-weight:500;}
.bold {font-weight:700;}

p,li {font-size:0.9em; font-family: 'Noto Sans', sans-serif; font-weight:300; line-height:1.5em;}
a { text-decoration:none;}  
hr {margin-top:-2px;}
p {margin-bottom: 20px;}
.small {font-size:3em;}
.big{font-size: 7em;}
.bigger{font-size:1.2em;}


.margin-bottom-20 {margin-bottom: 20px;}
.margin-top-20 {margin-top: 20px !important;}
.margin-top-40 {margin-top: 40px !important;}
.padding-bottom-40 {padding-bottom: 40px;}
.padding-top-30 {padding-top: 40px;}
.padding-top-40 {padding-top: 40px;}
.padding-0 {padding: 0 !important;}


.img-responsive-2 {max-height: 800px;}

.text-center {text-align: center;}
.white {color:white;}
.back-black {background-color:#f2f2f2;}
.grey {color: #666666 !important;}

img.center {
    display: block;
    margin: 0 auto;
}

.img-small {max-width: 500px;}
.section-title{margin: 40px 0; color: #666666;}
.nav-project {display: flex;align-items: center;min-height: 50px;}
.nav-project a{ color: #666666;font-size: 0.8rem; font-family: 'Ubuntu', sans-serif;font-weight: 300;}
.nav-project a:hover {text-decoration: none;}
.arrow-nav{max-height: 12px;margin-right: 10px;}
.nav-container { padding: 30px 0;}
.navigation .container-fluid{background-color: #333333;}

.container-s {

    max-width: 800px;
}

.img-responsive {max-width: 100%}
.work-display {margin-top: 40px; border-top: 1px solid #f2f2f2; padding: 20px 0}
.work-display img {border: 1px solid #f2f2f2;}
/*.banner-container {background: url(img/banner-pattern.png) repeat;}*/

.banner-container {color: #ffffff;}
.banner-container .headline{ text-align: justify;}
.banner-container h3 { line-height: 1.4em;}
.banner-flex-container{
  background-color: #376BA6;
  
    display: flex; /* or inline-flex */
    align-items: center;
    justify-content: center;
    min-height: 300px;
    width: 100%;
    padding: 60px 0;
}

.banner-flex-child{
  
   
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    background-color: #f2f2f2;
    font-size: 0.8rem;
}



.home-intro-box {padding: 0 30px;}
.home-intro-box-img {max-width: 200px;}
.home-intro-box h3 {text-align: center; margin:20px 0; color: #666666;}




.mywork-box {border: 1px solid #f2f2f2; margin-bottom: 30px; min-height: 620px; background-color: #ffffff; border-radius: 4px;}
.mywork-box-2 {border: 1px solid #f2f2f2; margin-bottom: 30px; background-color: #ffffff; border-radius: 4px;}
.mywork-box img, .mywork-box-2 img {max-width: 100%; border-bottom:1px solid #f2f2f2;}

.mywork-box a img:hover {
    opacity: 0.5;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    transition: opacity .25s ease-in-out;
      -moz-transition: opacity .25s ease-in-out;
      -webkit-transition: opacity .25s ease-in-out;
    cursor: pointer;  
}
.mywork-box h4 {margin-bottom: 10px; color: #666666;}
.mywork-box p, .link  {margin-bottom: 10px;}

.mywork-box-text {padding: 30px;}

.mywork-box a, .gallery-link {background-color:#ffffff; color: #376BA6 ; border:1px solid #376BA6; font-weight: bold; padding: 5px 10px; display: inline-block; border-radius: 4px; font-size: 0.8em;}
#contact h3 {color: #666666;}


/*------animations-------*/

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* Standard syntax */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}



/*------POPUP-------*/




@media (max-width: 510px) {
  .home-intro-box-img {max-width: 50%;}
  .banner-container p {padding:0 15px; font-size: 0.9em;}
  .banner-container .headline {
    text-align: left;
  }
  .section-title {font-size: 2.2em; margin: 20px 0; }
  .banner-flex-container{padding: 90px 0;}
  .banner-container h2 {font-size: 1.3em;}

 
}

  
@media (max-width: 768px) {
    
    h1 {font-size: 2.3em; line-height: 1.1em;}
    .navbar-toggle {float: left;margin-left: 15px;}
    .big {font-size: 3em;}
    .small {font-size: 2em;}
    .banner-container h3 {padding:0 10%; line-height: 1.4em; font-size: 1.2em;}
    .home-intro-box {margin-top: 40px;padding: 0;}

}
 



@media (max-width: 992px) {
  .mywork-box {min-height: 0;}
  .link {padding-bottom: 30px;}
}


@media (max-width: 1200px) { ... }