@import url(https://fonts.googleapis.com/css?family=Bitter:400,700);
.wrapper {padding: 50px 15px; text-align: center; margin-top:60px}
.wrapperAbout {padding: 50px 0; text-align: center;}
a:hover {cursor:pointer}

/*---COLOURS---*/
.green {color:#99c139}
.blue {color:#0093d0}
.lightBlue {color: #8abcd6}
.purple {color:#b092b3}
.red {color:#ce5316}
.mustard {color:#ceaf16}
.black {color:#000}

/*---TOOLS---*/
.left {float:left}
.right {float:right}
.inlineImg {width:100%; margin: 20px 0}
.w100 {width:100%}
.seperator {border-top:dotted 1px #ccc; padding:6px 0;}
.slow {transition: all 0.5s ease;}
.clearfix {clear:both}

.moreBtn        {background-color:#99c139; color:white; padding:2px 4px; font-size:13px; width:109px; opacity: .4; border-radius: 2px; margin:30px 0; display:block}
.moreBtn:hover  {opacity: 1; cursor:pointer; color:white}
.btn            {background-color:#99c139; color:white; padding:7px 13px; font-size:13px; opacity: .6; border-radius: 2px}
.btn:hover      {opacity: 1; cursor:pointer; color:white}
.moreBtnWide    {background-color: #333; color: white; padding: 8px 4px; font-size: 19px; width: 100%; border-radius:2px; margin: 4px 0; font-family: 'Bitter', sans-serif;}
.moreBtnWide:hover  {background-color:#b092b3; cursor:pointer;}
.titleArrow     {width:20px; margin-top:3px}

.nextBtn    {position:fixed; right:6px; top:50%}
.prevBtn    {position:fixed; left:6px; top:50%}
.nextBtn a,
.prevBtn a  {font-weight:100; font-size: 30px; opacity:.2;transition: all 0.4s ease-in-out;}
.nextBtn a:hover,
.prevBtn a:hover    {opacity:1; text-decoration:none;}


iframe.irVideo {width:504px; height:284px}

/*--- THUMBS ---*/
.thumbs img {width:100%;}
.thumbs .col-xs-12 {/*height:226px*/}

.thumbs .col-sm-4 {/*height:180px;*/ padding:0; border:1px solid white; overflow:hidden}
.thumbs .col-sm-6 {/*height:240px;*/ padding:0; border:1px solid white; overflow:hidden}

.thumbs .col-md-4 {/*height:200px;*/ padding:0; border:1px solid white; overflow:hidden}
.thumbs .col-md-6 {/*height:303px;*/ /*width:454px;*/ width:50%; padding:0; border:1px solid white; overflow:hidden}
.thumbs .col-md-3 {/*height:227px;*/ width:25%; padding:0; border:1px solid white; overflow:hidden}


/*--- FONTS ---*/
@import url(https://fonts.googleapis.com/css?family=Martel+Sans:800,900,300,700|Bitter:400,700|Fjalla+One|Bree+Serif);

body    {font-family: 'Martel Sans', sans-serif; font-size:16px; line-height:1.6em}
h1      {font-family: 'Bitter', sans-serif; font-weight:900; font-size:27px}
h2      {font-family: 'Martel Sans', sans-serif; font-weight:900; font-size:11px; margin:0 0 8px 0; letter-spacing:.3em; color:#999}
h3      {font-size: 11px;width: 100%;border-top: 1px dotted #ccc;border-bottom: 1px dotted #ccc;margin: 20px 0 10px;padding: 10px 0;line-height: 1em;}
p       {font-size:.8em}
p.lead  {font-weight:400; font-size:.9em; line-height:1.7em}
.enlarge {font-family: 'Bitter', sans-serif; font-weight:900; font-size: 5em; float: left; letter-spacing: -3px; margin:20px 9px 0 0; display: block;}
.enlargeText {width: -moz-calc(100% - 100px);width: -webkit-calc(100% - 100px);width: calc(100% - 100px);}
.enlargeHide {display:none}
.textLeft {text-align:left}

/*--- LAYOUT ---*/
.projectDescription {width:330px; float:right; padding-left:40px; text-align: left}
.projectDescription h2 {margin-top:0}
.projectImages {float:left; width:-webkit-calc(100% - 400px); -webkit-box-sizing:border-box }
.projectImages img.shadow {box-shadow:0 1px 4px #ccc}
.projectImages img.restrict {margin: 0 auto; max-width:77%}
.img-half {width:50%; float:left; padding:2%}
figure {margin-bottom:4vw}
figcaption {font-size: .7em; color: #999; font-weight: 100; line-height: 1.6em; padding:15px}

/*--- Bootstrap overrides ---*/

/*--- NAVIGATION ---*/
.navbar {background:#0093d0;}
.navbar-fixed-top {border:none}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {background:url('../img/tri.svg') no-repeat 50% bottom; background-size:15px}
.navbar-inverse .navbar-nav>li>a { color:white; font-family:'Bitter', serif; letter-spacing:1px; font-weight:700;  text-transform: uppercase; font-size:13px}
/*.navbar-nav {float:none; margin:0 auto; width:600px}*/
.navTitle {color:white}
.navbar-inverse .navbar-toggle {opacity:.4; border:none; background-color:white}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {opacity:1; background-color:white;    transition: all 0.4s ease-in-out;
}
.navbar-inverse .navbar-toggle .icon-bar {background:#0093d0}
.name {
    font-family: 'Bitter', serif;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 12px;
    border-right: 1px solid #fff;
    padding: 12px;
    margin-top: -7px;
}
.name a {font-size: 14px; color: white;}
.nameTitle {font-size: 10px; color: white; line-height: 0.7em; opacity: .5; letter-spacing: 2.6px; font-weight: 900; font-family: 'Martel Sans', sans-serif;}

.ramblings {background: url('../img/speech.png') no-repeat;
    float: right;
    width: 91px;
    height: 41px;
    background-size: cover;
    padding: 9px 13px;
    font-family: 'Bitter', serif;
    /* letter-spacing: 1px; */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    opacity: .7;
    margin-top: 3px;
}
.ramblings:hover {opacity:.5}
a.ramblings:hover {text-decoration:none}
/*--- HOME ---*/
.home               {background: url('../img/bg-us.jpg'); background-size:  cover}
.portrait           {width:30%}
.hmIntro            {width:900px; margin:0 auto}
.hmPic 				{background: url('../img/5.jpg') no-repeat; /*--width:220px;--*/width:25%; height:330px; float:left; background-size:cover }
.hmText 			{width:55%; float:left; margin-top:75px; padding: 0 55px;}
.hmText p			{font-size:.9em; text-align: left}
.hmText .small      {font-size:.8em}
.hmLinks 			{margin-top:40px;}
.hmLinks a			{float:left; -moz-transition: all .2s ease-out 0s; margin-left:24px;}
.details            {float:left; width:20%; margin-top:75px; border-left: 1px solid #ccc; padding-left: 25px;}

.hmImg {background:url('../img/homeBg.jpg') center top no-repeat; position:relative; max-height:700px; height:62vw; background-size:cover; margin:0 auto; max-width:1500px}

.hmWrapper p {max-width: 27vw;
    padding: 10px;
    font-size: 1.3vw;
    text-align: center;
    line-height: 1.6em;
    position: absolute;
    top: 65px;
    left: 20vw;
    font-family: 'Bitter', serif;
font-weight:400}
.contactBannerHm,
.contactBanner {color:white; margin-top:1px; padding:25px 15px; text-align: center;
background: #19364b; /* Old browsers */
background: -moz-linear-gradient(top,  #19364b 0%, #0d1a26 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19364b), color-stop(100%,#0d1a26)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #19364b 0%,#0d1a26 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #19364b 0%,#0d1a26 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #19364b 0%,#0d1a26 100%); /* IE10+ */
background: linear-gradient(to bottom,  #19364b 0%,#0d1a26 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19364b', endColorstr='#0d1a26',GradientType=0 ); /* IE6-9 */
} 
.contactBanner {margin-top:50px}
.contactBannerHm a,
.contactBanner a {color:white; font-weight:100; font-size:14px}
.linkedin {margin-right:15px}
.linkedin img {width:30px; height:30px}


/*--ABOUT--*/
.workHistory h1 {margin-top:0}
.workHistory h2 {margin-bottom:4px}
.workHistory p {margin-bottom:4px}
.secBanner {background:#19364b;
    margin-top:51px;
    background: #19364b; /* Old browsers */
background: -moz-linear-gradient(top,  #19364b 0%, #0d1a26 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19364b), color-stop(100%,#0d1a26)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #19364b 0%,#0d1a26 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #19364b 0%,#0d1a26 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #19364b 0%,#0d1a26 100%); /* IE10+ */
background: linear-gradient(to bottom,  #19364b 0%,#0d1a26 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19364b', endColorstr='#0d1a26',GradientType=0 ); /* IE6-9 */
}

.secBanner p {font-family:'Bitter', serif; padding:50px 15px; font-size: 1.1em; width:75%; color:#f2f2f2; line-height: 1.7em;}
.sticky {float:left; text-align:center; margin-top:33px; width:145px; min-height:140px; display:none}
.sticky img {max-height:80px}
/*--- HOVER EFFECT ---*/
.view {
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
}
.view .mask, .view .content {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}

.third-effect .mask {
    opacity: 0;
    overflow:visible;
    background:url('../img/bgDots2.png');
    background-color:#333;
    box-sizing:border-box;
    transition: all 0.4s ease-in-out;
    padding:0 10px
}

.third-effect .info {
    position:relative;
    top:43%; /* Center the link */
    opacity: 0;
    transition: opacity 0.5s 0s ease-in-out;
    color:white;
    font-family:'Bitter', serif; 
    letter-spacing:1px;
}
@media (max-width: 990px) {
    .third-effect .info {top:40%; font-size:13px}
}
.infoType {
    font-size: .7em;
    text-transform: uppercase;
    border-top: 1px dotted #444;
    color: #777;
    width:70%;
    margin:0 auto
}

.third-effect:hover .mask {
    opacity: .8;
    background:url('../img/bgDots2.png');
    background-color:#333
}

.third-effect:hover .info {
    opacity:1;
    transition-delay: 0.3s;
}


/*-- CONTACT --*/
.bellContainer		{float:left; background:url(../img/bell-hand.png); width:154px; height:119px; margin-top:50px;}
.bellContainer .mobile	{position:relative; top:28px; left:240px; font-size:14px; color:#ccc; color:#5e6e65; text-shadow:0 1px 0 rgba(255, 255, 255, 0.1);}
.bellContainer .email	{position:relative; top:61px; left:234px; font-size:14px; color:#5e6e65; text-shadow:0 1px 0 rgba(255, 255, 255, 0.1);}
.bellContainer .email a	{color:#5e6e65; text-shadow:0 1px 0 rgba(255, 255, 255, 0.1);}
.bellContainer .email a:hover	{text-decoration:underline;}

/*--- Responsive ---*/
@media (min-width: 1200px) {
    .container {width:970px}
    .hmImg {max-height:900px}
}
@media (max-width:1024px){
    .hmWrapper p {position:inherit; max-width:750px; margin:0 auto; padding: 5%; font-size: 18px; text-align: center; line-height: 1.7em;}
}

@media (max-width: 990px) {
    .wrapper {padding:50px 15px}
    .thumbs .col-md-6 {/*height:231px*/}
    .thumbs .col-sm-3 {width:25%}
    .projectDescription {width:100%; float:left; padding:0 0 40px 0; text-align: center}
    .projectImages {width:99%}
    .moreBtn {margin:30px auto}
    .enlarge {display:none}
    .enlargeHide {display:inline-block}
}

@media (min-width: 768px) {
    .hideDesktop {display:none!important}
}
@media (max-width: 767px) {
    .navbar-nav {text-align:right; margin:0 -15px}
    .navbar-inverse .navbar-nav>li>a:hover {background-color:#0093d0} 
    .navbar-inverse .navbar-nav>.active>a, 
    .navbar-inverse .navbar-nav>.active>a:hover, 
    .navbar-inverse .navbar-nav>.active>a:focus,
    .navbar-inverse .navbar-nav>li>a:hover, 
    .navbar-inverse .navbar-nav>li>a:focus{background:url('../img/tri-side.svg') right 50% no-repeat; background-size:13px; background-color:#0093d0}
    .navbar-inverse .navbar-collapse, 
    .navbar-inverse .navbar-form {background-color:#8abcd6; border-color: white}
    .ramblings {display:none}
    .nav>li {border-bottom: 1px solid #fff;}
    .name {float:left; border:none; opacity:1; margin-left:17px}
    .name a {font-size:16px}
    .nameTitle {letter-spacing: 3.7px}
    .secBanner p {padding:39px 15px; font-size: 1em; width:100%}
    iframe.irVideo {width:453px; height:316px}

}
@media (max-width:570px) {
    .thumbs .col-xs-6 {width:50%}
    .thumbs .col-xs-12 {width:100%}
    .hmWrapper p {font-size:16px}
    .hmImg {margin-top:51px}
    iframe.irVideo {width:320px; height:237px}
}