html,body {height: 100%; margin: 0; font-family: "sofia_prolight", sans-serif;}
.container-fluid {padding: 0 0 0 0; overflow-x: hidden; height: 100%;}
h1, h2, h3, h4, h5, h6 {font-family: "norwester-reg", sans-serif;}
p {font-family: "sofia_prolight", sans-serif;}
a, a:focus { outline: none; border: none; }
.make-round {border-radius: 50%; -webkit-border-radius:50%;}

/* NAVIGATION */
nav {background-color: rgba(60,60,60,.75);  position: fixed; height: 100%; width: 60px; top: 0px; right: 0; z-index: 500; display: table; text-align: center;}
nav ul, nav ul li{list-style: none; margin-left: 0; padding: 0; }
nav ul {width: 100%; position: absolute; top: 50%; transform: translateY(-50%);}
nav ul li {height: 60px; margin-bottom: 2px; text-align: center; font-size: 30px; color: white; position: relative;}
nav ul li span {position: absolute; top: 27px; left: 50%; transform: translate(-50%,-50%); transform-origin: right bottom;}
nav ul li:hover {font-size: 40px;}
nav ul li.no-hover:hover {background-color: transparent;}
nav ul li.active { color: rgb(214,74,83);}
nav ul li.active:before {content: ''; width: 0; height: 0; position: absolute; top: 10px; right:100%; border-top:20px solid transparent; border-bottom: 20px solid transparent; border-right:20px solid rgba(60,60,60,.75);}

/* PANELS & COLORS */
.slate {position: relative; display: block; width: 100%; }
  .slate.use-padding {padding: 150px 0 250px;}
  .slate.control-height {height: 100%; overflow-x: hidden;}
  .slate.cut-line {border-bottom: 2px dashed white;}
    .slate.cut-line:before {position: absolute; top:96%; content:'Cut Here'; font-size: 9px; color: white; left: 50%; transform: translateX(-50%); text-transform: italic;}
.clouds {background-image: url(../img/bg-clouds.png); background-repeat: repeat; background-size: 60%; }
.clouds-2 {background-image:  url(../img/bg-clouds.png); background-repeat: repeat; background-size:30%; }
.speech-bubble { position: relative; background-color: white; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; padding: 0 40px 125px; }
.speech-bubble .speech-arrow, .speech-bubble .bird { position: absolute; top: 0; height: 100%;}
    .speech-bubble .speech-arrow img, .speech-bubble .bird img {height: 100%;}
.blue { background-color: rgb(103,179,187);}
.pink { background-color: rgb(214,74,83);}
.paper { background-image: url(../img/paper-bg.jpg); background-size: cover; background-repeat: repeat-y;}
.yellow {background-color: rgb(240,185,50);}
.green {background-color: rgb(74,185,133);}
.gray {background-color: rgb(90,90,90);}
.street-gray{background-color: rgb(133,168,169);}
.hidden {display: none; opacity:0; -webkit-opacity:0; -moz-opacity:0;}
.use-building { background: url(../img/bg-rooftop.png)  top repeat-x,
                url(../img/bg-treetop.png)  bottom repeat-x,
                rgb(214,74,83);}
.icon-tray {height: 125px; margin-top: 30px}
.project-panel {background-repeat: no-repeat; background-size: cover; }
  .project-banner img {display: none;}
  .white-cover {width: 100%; height: 100%; background: url(../img/bg-treebottom.png)  top/25% repeat-x,
                  url(../img/bg-treetop.png)  bottom/25% repeat-x,
                  rgba(150,230,180,.9);padding: 100px 0 70px;}
.close-building {height: 300px; width: 100%; background: url(../img/bg-treebottom.png)  top/25% repeat-x, url(../img/bg-building-bottom.png) top no-repeat, rgb(133,168,169);}
.my-tooltip{ background-color: rgb(240,185,50)!important;}

/*PORTFOLIO */
.project-viewer {position: fixed; left: 0; top:0; width: 100%; height:100%;  background-color: rgba(0,0,0,.85); z-index: 9990;}
.project-viewer .info-panel {position: absolute; left: 0; width: 25%; height: 100%; z-index:9999; padding: 100px 40px;}
.project-viewer .close-button {position: absolute; right:5%; top: 5%; width: 50px; height: 50px; background-color: white;}
#imagelightbox
{
    position: fixed;
    z-index: 9999;

    -ms-touch-action: none;
    touch-action: none;
}
#imagelightbox-overlay {background-color: rgba(255,255,255,.7);}

/* POSITIONING */
.row.full-window {height:100%;}
.full-height {height: 100%; position: relative;}
.centering-shell {top: 50%; transform:translateY(-50%);}
.origin-bottom {position:absolute; bottom:0; transform-origin: bottom center;}
img.portrait {position: absolute; left: 0; bottom:0 !important; width: 1920px !important;}

/* TYPOGRAPHY */
h1.title-text {font-family: 'norwester-reg', sans-serif; font-size: 8em; line-height: 1em; font-weight: 100; text-transform: uppercase; margin-top: 0; margin-bottom: 30px;}
  h1.title-text.half-margin { margin-bottom: 10px;}
.body-text.size-override { font-size: 30px; line-height: 44px;}
.title-shadow {text-shadow: 4px 3px 0 white; -webkit-text-shadow: 4px 3px 0 white;}
h1.section-title {font-size: 60px; line-height: 40px; text-transform: uppercase; text-align: center; width: 100%; padding: 100px 0 50px; position: relative;}
p.body-text {font-family: 'sofia_prolight', sans-serif; font-size: 17pt; line-height: 28pt; font-weight: 400; margin-bottom: 15px;}
  p.body-text.double-margin{margin-bottom: 15px;}
a.text-link, a.text-link:visited {color:white; background-color: rgb(214,74,83); padding: 0 10px;}
  a.text-link:hover, a.text-link:active {color:white; background-color: rgb(230,90,83); text-decoration: none;}
span.body-highlight {font-family: 'sofia_prolight', sans-serif; font-weight: 900; background-color:rgb(240,190,0);}
.project-title {font-size: 40px; text-transform: uppercase; line-height: 40px; margin-bottom: 30px; text-align: center;}
.client-title {font-size: 30px; text-transform: uppercase; line-height: 30px; margin-bottom: 30px; text-align: center; }

.icon-portfolio { font-size: 30px; padding: 20px 25px; text-align: center; border-radius:50%; -webkit-border-radius:50%; border: 1px solid rgb(214,74,83); width:80px; height: 80px; line-height: 35px !important; color: rgb(214,74,83); margin-left: 50%; transform: translateX(-50%) scale(1,1); -webkit-transform: translateX(-50%) scale(1,1);}
    .icon-portfolio:hover {transform: translateX(-50%) scale(1.25,1.25); -webkit-transform: translateX(-50%) scale(1.5,1.5); color: rgb(234,94,100);}
    .icon-portfolio:active {transform: scale(.5,.5); color: rgb(170,54,53);}
.icon-tray a, .icon-tray a:hover{text-decoration: none;}

.project-links {margin: 30px auto 30px; text-align: center; list-style: none;}
.project-links li {display: inline-block; margin-right: 40px; width:60px; height: 60px;  text-align: center; }
.project-links li:hover {transform: scale(1.2,1.2);}
.project-links li:click {transform: scale(.8,.8);}
.project-links li a, .project-links li a:visited {display: block; height: 100% ; border: 2px solid rgb(214,74,83); color: rgb(214,74,83);}
.project-links li a:hover { text-decoration: none; border: 2px solid rgb(230,104,103); color: rgb(230,104,103);}
.project-links li a p{ font-size: 30px; line-height: 52px; transform: translate(2%);}

form input {height: 60px; background-color: rgba(255,255,255,.65); border: none; padding: 0 20px; outline: none; width: 48%; margin-right: 20px; margin-bottom: 20px; display: inline-block; font-size: 18pt;}
  form input:last-of-type {margin-right: 0; float: right;}
  form input:focus {background-color: rgba(255,255,255,.9);}
form textarea { font-family: 'eausans_book', sans-serif; font-size: 20pt; height: 280px; width: 100%; background-color: rgba(255,255,255,.65); padding: 20px; outline: none; resize: none; border: none;}
  form textarea:focus {background-color: rgba(255,255,255,.9);}
.my-tooltip {border: 0px none !important; background-color:rgb(240,185,50)!important; border-radius: 6px !important; font-family:"sofia_prolight" !important; font-size: 16px !important;  }
.ui-tooltip-content { border: 0px none !important;}

.portfolio-thumb { text-align: center; height: 150px; margin-bottom: 50px;}
.portfolio-thumb a.thumb {width: 150px; height: 150px; background-size: 150px 150px; background-position: center; display: block; border: 5px #333 solid;}
.portfolio-thumb a.thumb:hover {background-size: 200px 200px; border: 8px rgb(214,74,83) solid;}
.gallery-start {margin-top: 50px;}

/* ANIMATION & EFFECTS */

.shifting-shadow {text-shadow: 0px 0px 0 rgba(0,0,0,.3);}
@keyframes animatedBackground {
  from {background-position:  0;}
  to {background-position:  100%;}
}

@-webkit-keyframes animatedBackground {
  from {background-position: left 0;}
  to {background-position: left 100%;}
}

.cloud-anim-fast { animation: animatedBackground 10s linear infinite;}
.cloud-anim-med { animation: animatedBackground 70s linear infinite;}
.anim-short {transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear;}
.ease-out-anim {
  -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
  -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
   -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
     -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
        transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */

        -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
        -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
   -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
     -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
}

/* DEBUG */
aside.debug {  width:400px; height: 200px; background-color: rgba(0,0,0,.8); color: white; position: fixed; bottom:20px; left: 20px; padding: 20px; display: none;}


/* MEDIA QUERIERS */
/* EXTRA SMALL DEVICES */
@media (max-width : 767px) {

}

/* TABLETS DEVICES */
@media ( min-width:768px ) and (max-width : 991px) {

}

/* Small DESKTOPS */
@media ( min-width:992px ) and (max-width : 1199px) {


}