/* CSS RESET CODE
*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,800');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

/*FONT-FACE RULE*/
@font-face {
  font-family: 'adriane';
  src: url('../assets/fonts/AdrianeTextRegular.otf') format('opentype');
}
@font-face {
  font-family: 'proxima';
  src: url('../assets/fonts/ProximaNova-Extrabld.otf') format('opentype');
}
@font-face {
  font-family: 'birra';
  src: url('../assets/fonts/Birra-Stout.otf') format('opentype');
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}
html, body {
  width: auto;
  overflow-x: hidden;
}
body{
    background: #FAF6F6;
    background-color: #FAF6F6;
    font-family: adriane;
}
h1, h2, h4, a.btn, button{
  font-family: proxima;  
}
h2{
font-size: 2.7em;
}
h2.bold-message-2{
font-size: 4.3em;
}
h1{
    font-size: 3.5em;
}
.logo{
    height: 50px;
    position: absolute;
    top: 0px;
}

.navbar{
    background: #ffffff;
    border: #ffffff;
}
nav{
    position: relative;
    z-index: 200;
    transition: top 0.2s ease-in-out;
}
.wrapper{
    max-width: 100%;
}
header{
    margin-top: 50px;
}
.sub-message{
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 35px;
    margin-top: - 20px;
}
.sub-message-2{
    font-size: 24px;
}
ul.nav{
   padding-left: 20px;
}

p{
    font-size: 1.0em;
}

.contact a{
    font-size: 1.3em;
    color: white !important;
}

.contact{
    padding-top: 120px;
}

a.links:hover{
    color: #cf202c !important;
    text-decoration: none;
}
.navbar-default .navbar-brand{
    color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #cf202c;
}
.navbar-default .navbar-nav > li > a {
    padding-top: 20px;
    color: #000000;
    padding-right: 30px;
    font-family: proxima;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #cf202c;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #cf202c;
}
.navbar-default .navbar-nav > .active{
   background: transparent !important;
}
.active a{
    color: #cf202c !important;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    background-color: transparent !important; 
}
.btn-danger{
    border-radius: 0px;
    border: none;
    background: #cf202c !important;
}
content section.contact-row div{
    height: 400px;
    padding-left: 0;
    padding-right: 0;

}
.home-header{
    background: url("../assets/images/home_header.jpg");
    /*background-image: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)), url("../assets/images/home_header.jpg");*/
    background-attachment: fixed;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    /*opacity: 0.2;*/
}
.about-header{
    background: url("../assets/images/about_header.jpg");
    background-attachment: fixed;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    /*opacity: 0.2;*/
}
.work-header{
    background: url("../assets/images/work_header.jpg");
    background-attachment: fixed;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    /*opacity: 0.2;*/
}
.services-header{
    background: url("../assets/images/services_header.jpg");
    background-attachment: fixed;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    /*opacity: 0.2;*/
}
.contact-header{
    background: url("../assets/images/contact_header.jpg");
    background-attachment: fixed;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    /*opacity: 0.2;*/
}
.home-image-row-1{
    background: url("../assets/images/lucozade2.old.jpg");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.home-image-row-2{
    background: url("../assets/images/unionbank_thumbnail.jpg");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.home-image-row-3{
    background: url("../assets/images/ribena_thumbnail.jpg");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.home-image-row-4{
    background: url("../assets/images/arm1.jpg");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.home-image-row-5{
    background: url("../assets/images/techplustest.jpg");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.home-image-row-6{
    background: url("../assets/images/seplattest.jpg");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.home-image-row-7{
    background: url("../assets/images/unionbank4.jpg");
    background-position:left;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.work-image-row-1{
    background: url("../assets/images/unionbank_thumbnail.jpg"); /*"../assets/images/guldertest.jpg"*/
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.work-image-row-2{
    background: url("../assets/images/lucozade2.old.jpg"); /* url("../assets/images/elixirtest.jpg"); */
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.work-image-row-3{
    background: url("../assets/images/techplustest.jpg");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.work-image-row-4{
    background: url("../assets/images/arm1.jpg");  /*etranzacttest*/
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.work-image-row-5{
    background: url("../assets/images/ribena_thumbnail.png");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.work-image-row-6{
    background: url("../assets/images/seplattest.jpg");
    background-position:top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.services-image-row{
    background: url("../assets/images/namanyoube.jpg");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.services-image-row-2{
    background: url("../assets/images/seplattest.jpg");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    
}
.contact-text-row{
    padding: 3%;
}
.space-30{
   padding: 30px; 
}
.space-up-30{
   padding-top: 30px; 
}
.space-60{
   padding: 60px;
}
.paragraph-break{
    padding: 8%;
}
.paragraph-break-2{
    padding-top: 60px;
    padding-bottom: 50px;
}
.text-center{
    text-align: center !important;
}
.full-image{
    width: 100%;
    height: auto;
}
.img-center{
    margin: auto;
    display: block;
}
.black-bg{
    background: black;
    background-color: black;
    color: white;
}
.red-text{
    color: #cf202c;
}
.bold-message{
    position: relative;
    font-size: 5.7em;
    text-align: center !important;
    width: 100% !important;
    z-index: 20;
    font-family: proxima;
    color: white;
}

.work-message{
    color: black !important;
}
.bold-message strong{
    /*position: absolute;*/
    position: relative;
    top: -65px;
    
    
}
.bold-message #one{
    /*left: 22%;*/
    padding-bottom: 80px !important;
}
/*.bold-message #two{
    right: 18%;
}*/
.ampersand{
    font-size: 3.1em;
    margin-left: auto;
    margin-right: auto;
    font-family: birra;
    z-index: -88;
    text-align: center !important;
    position: relative;
}
#one{
   right: -80px;
}
#two{
   left: -80px;
}
.v-center{
    padding: 8%;
}
#box{
    padding:0; 
    margin: 0;   
}
#overlay{  
    background:rgba(0,0,0,.75);
    text-align:center;
    height: 100%;
    padding-top: 160px; 
    margin: 0;
    opacity:0;
    -webkit-transition: opacity .25s ease;
    -moz-transition: opacity .25s ease;
}

#box:hover #overlay {
    opacity:1;
}
#overlay p, #overlay h4{
    color:rgba(255,255,255,.85);
}

hr.services-topic-rule{
    border-color: #cf202c;
    border-width: 4px;
    width: 30px;
    margin-top: 5px;
}
hr.lets-do-it-rule{
    border-color: #cf202c;
    border-width: 10px;
    width: 100px;
    margin-top: 7px;
}

.show-details{
    height: 10% !important;
    position: absolute;
    cursor: pointer;
    top: 5px;
    right: 5px;
}
.hide-details{
    height: 15% !important;
    position: absolute;
    cursor: pointer;
    top: 7px;
    right: 7px; 
}

.thumbnail{
    position: relative;
    border: none;
    border-radius: 0px;
    padding: 5px;
    margin: 0;
    overflow:hidden;
    background: transparent;
    background-color: transparent;
}

.caption {
    position:absolute;
    top: 5px;
    right:5px;
    bottom: 5px;
    left: 5px;
    background:rgba(0, 0, 0, 0.6);
    display: none;
    padding:2%;
    padding-top: 20% !important;
    text-align:center;
    color:#fff !important;
    z-index:2;
}
.our-people{
    padding-left: 10%;
    padding-right: 10%;
}
footer{
    padding: 40px;
}
footer .row div section{
    margin: 0;
    padding: 0;
}
.right-aligned{
    text-align: right;
}
.footer-ampersand{
    padding-top: 20px;
    text-align: center;
    font-size: 70px;
    font-family: birra;
}
.inner-footer-div  a{
    color: white;
    text-decoration: none;
    font-family: proxima;
}
.inner-footer-div a:hover{
    color: #cf202c;;
}
ul{
    list-style-type: none;
}
ul.social-media-links > li{ display: inline; padding-right: 10px;}
.work-summary{
    padding-top: 5%;
}
.work-temp-row{
    padding-left: 30px;
    padding-right: 30px;
    
}
.red-bg{
    background: #cf202c;
    color: white;
}
.paragraph-break-red{
    padding: 20px 10%;
}
.work-quote{
    font-size: 30px;
}
.work-summary-heading{
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.work-inner-image{
    background-position: center; 
    background-repeat: no-repeat !important; 
    background-size: cover !important; 
    background-attachment: fixed;
    height: 500px;
}
.contact-info{
    font-size: 15px !important;
}
/*DEVLOPING FOR MOBILE FIRST. MEDIA QUERIES*/

@media only screen and (max-width : 320px){
   .bold-message{font-size: 3.5em; }
    .bold-message strong{ top: 0px;}
    .ampersand{font-size: 3.5em;}
    footer .row div section{padding: 4px;}
    footer{ padding: 15px;}
    footer p, footer h4, .inner-footer-div a{ font-size: 10px;}
    .footer-ampersand{ padding-top: 20px; font-size: 40px !important;}
    footer ul{margin-left: 13%;}
    footer img{ height: 25px;}
    .home-header, .about-header, .work-header, .services-header, .work-inner-image{background-attachment: scroll !important;}
    #one{right: 0px; top: 90px;}
    #two{left: 0px; top: -83px;}
    .sub-message{font-size: 20px !important;}
}
/*smartphones*/
@media only screen and (min-width : 320px) and (max-width : 480px){
   .bold-message{font-size: 3.5em; }
    .bold-message strong{ top: 0px;}
     .ampersand{font-size: 3.5em;}
    footer .row div section{padding: 4px;}
    footer{ padding: 15px;}
    footer p, footer h4, .inner-footer-div a{ font-size: 10px;}
    .footer-ampersand{ padding-top: 20px; font-size: 40px !important;}
    footer ul{margin-left: 13%;}
    footer img{ height: 25px;}
    .home-header, .about-header, .work-header, .services-header, .work-inner-image{background-attachment: scroll !important;}
    #one{right: 0px; top: 90px;}
    #two{left: 0px; top: -83px;}
    .sub-message{font-size: 20px !important;}
    
}
/*@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : landscape){
    .bold-message{font-size: 3em; padding-top: 15%;}
    .ampersand{top: 14%;}
}
*/
@media only screen and (min-width : 481px) and (max-width : 767px){
   .bold-message{font-size: 3.5em;}
    .bold-message strong{ top: 0px;}
     .ampersand{font-size: 3.5em;}
    footer .row div section{padding: 4px;}
    footer{ padding: 15px;}
    footer p, footer h4,.inner-footer-div a{ font-size: 10px;}
    .footer-ampersand{ padding-top: 20px; font-size: 40px !important;}
    footer ul{margin-left: 13%;}
    footer img{ height: 25px;}
    .home-header, .about-header, .work-header, .services-header, .work-inner-image{background-attachment: scroll !important;}
    #one{right: 0px; top: 90px;}
    #two{left: 0px; top: -83px;}
    .sub-message{font-size: 20px !important;}
    
}

@media only screen and (min-width : 768px) and (max-width : 1024px){
.bold-message{font-size: 4.3em; padding-top: 50px;}
    #one{
   right: -50px;
    }
    #two{
       left: -50px;
    }
    .bold-message strong{
    top: -40px;}
    .sub-message{font-size: 25px !important;}
}

/*ipads*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
   .bold-message{font-size: 4em; padding-top: 50px;}
     #one{
   right: -50px;
    }
    #two{
       left: -50px;
    }
    .bold-message strong{
    top: -40px;}
    .sub-message{font-size: 25px !important;}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){
   .bold-message{font-size: 4em; padding-top: 50px;}
     #one{
   right: -50px;
    }
    #two{
       left: -50px;
    }
    .bold-message strong{
    top: -40px;}
    .sub-message{font-size: 25px !important;}
}

/*ipad 3*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2 ){
    .bold-message{font-size: 4em; padding-top: 50px;}
     #one{
   right: -50px;
    }
    #two{
       left: -50px;
    }
    .bold-message strong{
    top: -40px;}
    .sub-message{font-size: 25px !important;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2 ){
    .bold-message{font-size: 4em; padding-top: 50px;}
     #one{
   right: -50px;
    }
    #two{
       left: -50px;
    }
    .bold-message strong{
    top: -40px;}
    .sub-message{font-size: 25px !important;}
}