/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html { -webkit-font-smoothing: antialiased; }
body { font-family: 'Tinos', serif; background: #fff; clear: both; }
#top {
    background: #fff; height: 400px; text-align: center; padding-top: 80px;
}
#top ul { margin: 0 0 0px 0; padding:0; }
#top ul li { display: inline; }
.list-spacer { background: url(../img/layout/bolli.png) center top no-repeat; width: 16px; height: 9px; display: inline-block; line-height: 10px; text-align:center; }
#top h1 { margin-top: 10px;}
#navigation {
    background: #352d2c; height: 80px;
    position: relative; z-index: 999999;
}
#navigation.fixed {
    position: fixed; top:0px; width: 100%; height: 40px;
    transition: all linear .05s;
}
#main-navigation { text-align: center; }
#main-navigation ul { padding: 0; }
#navigation.fixed li { line-height: 40px; }
#main-navigation li { display: inline; line-height: 80px; padding-left: 20px; }
#main-navigation li a { text-transform: uppercase; font-size: 16px;  letter-spacing: 0.1em; font-weight: 400;  position: relative; }

#main-navigation a:link,
#main-navigation a:active,
#main-navigation a:visited { color: #fff; text-decoration: none; transition: all .125s ease-in-out;}
#main-navigation a:hover { color: #f2b600; }

.top-link { display: inline-block; position: relative; text-indent: -999em; width: 23px; height: 21px; background: url(../img/layout/top.png) no-repeat; }
.top-link:hover { background: url(../img/layout/top-hover.png) no-repeat; }

#main-navigation a.active { color: #f2b600; }
#main-navigation a:after {
    content:"";
    background: #999595;
    position: absolute;
    bottom: -5px;
    left: 5px;
    right: 5px;
    height: 1px;
    width: 90%;
    opacity: 0;
    transition: all .175s ease;
}

#main-navigation a.link:not(.active):hover:after,
#main-navigation a.link.active:after {
    opacity: 1;
}

#portfolio { background: url(../img/layout/brett.jpg) repeat-x; height: 499px; position: relative; }
#portfolio #masterslider { width: 100%; margin: 0 auto; text-align: center; }
#portfolio .master-slider { margin: 0 auto; text-align: center; width: 100%; }
#portfolio.fixed { margin-top: 40px; }
#portfolio .container { padding-top: 45px; position: relative; top: -510px; margin: 0 auto; text-align: center; }
/*#portfolio .container { padding-top: 45px; position: relative; top: -30px; margin: 0 auto; text-align: center; }*/
#portfolio .bxslider { margin-left:0px; }
#portfolio .bx-wrapper { box-shadow: none; border: none;background: transparent; margin-bottom: 0; }
#portfolio .bx-wrapper .bx-viewport { background: transparent!important; border: none!important; box-shadow: none; }
#portfolio .bx-viewport { left: 0!important; }
#portfolio #boxes li img { transform: scale(0.7); -ms-transform: scale(0.7); -moz-transform: scale(0.7); -webkit-transform: scale(0.7); transition: all .5s ease; }
#portfolio #logos li img { transform: scale(0.7); -ms-transform: scale(0.7); -moz-transform: scale(0.7); -webkit-transform: scale(0.7); transition: all .5s ease; }
#portfolio #else li img { transform: scale(0.7); -ms-transform: scale(0.7); -moz-transform: scale(0.7); -webkit-transform: scale(0.7); transition: all .5s ease; }
#portfolio #boxes li.current img { transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); }
#portfolio #logos li.current img { transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); }
#portfolio #else li.current img { transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); }
#portfolio .container.more { text-align: center; position: relative; margin-top: 350px; }
#portfolio .bx-prev { left: 30%; background: url(../img/layout/navi-l.png) no-repeat; width: 32px; height: 55px; z-index: 99999; background-size: cover; }
#portfolio .bx-next { right: 30%; background: url(../img/layout/navi.png) no-repeat; width: 32px; height: 55px; z-index: 99999; background-size: cover; }
.bx-wrapper .bx-controls-direction a { margin-top: -30px; }
#portfolio .bx-next:hover,
#portfolio .bx-prev:hover { background-size: cover; width: 34px; height: 58px; }
#portfolio article {  position: absolute; }
#portfolio .more { z-index: 99999; position: relative; }
#portfolio .more ul { padding: 0;  }
#portfolio .more li { display: inline; padding: 10px; color: #fff; }
#portfolio a.more-slide:link { color: #fff; transition: all .175s ease; text-decoration: none; }
#portfolio a.more-slide:hover { border-bottom: 1px solid #f2b600; }
#portfolio a.more-slide:active { border-bottom: 1px solid #f2b600; }
#portfolio a.more-slide:visited { border-bottom: none; }
#portfolio .more li:first-child a { color: #f2b600; }
#portfolio article li img { height: auto; }
#portfolio .fade {  position: absolute; color: #000; top: 0; background: url(../img/layout/fade.png) top center no-repeat; width: 100%; height: 499px; z-index: 9999; opacity: 1; }


#illustration-1 { background: url(../img/layout/illus1.jpg) repeat-x; height: 212px; border-bottom: 15px solid #f2b600; }

#services { background: #fff; padding: 60px 0px 100px 0; text-align: center; height: 470px; }
#services h2 { margin-bottom: 60px; }
#services .icon-container ul { padding: 0; }
#services .icon-container li {
    vertical-align: top;
    display: inline-block;
    width: 88px;
    height: 149px;
    margin: 0px 20px;
}
.icon { height: 89px; }
.icon-title { padding-top: 20px; }

#philosophy { padding: 80px 0px 80px 0px; background: #f2b600; text-align: center; height: 500px; }

#contact { padding: 60px 0px; background: #fff;
    text-align: center; border-bottom: 15px solid #f2b600;}
#contact .container { background: url(../img/layout/contact-teaser.png) no-repeat;  }
#contact p {margin-bottom: 2px; font-size: 14px; }
#contact strong { font-size: 18px; font-weight: normal; }
#contact form { max-width: 400px; margin: 20px auto 0 auto; }
#contact input[type=submit] { width: 200px; text-transform: uppercase; background: #f2b600; -webkit-transition: all .125s ease; border-color: #f2b600; text-shadow: none; box-shadow: none; font-size: 16px; }
#contact input[type=submit]:hover { -webkit-transform: scale(1.05); }
#contact #comment {position:absolute; left: -200000px;}
#contact .alert { width: 400px; margin: 20px auto;  }

#illustration-2 {
    background: url(../img/layout/illus2.jpg) repeat-x; height: 164px; clear: both;
}

#footer { padding: 60px 0; text-align: center; color: #fff; background: #352d2c; }
#footer h3 { margin-bottom: 20px; }
#footer p {margin-bottom: 2px; font-size: 14px; }
#footer button { color: #fff; font-weight: 400; }

h2 { text-transform: uppercase; font-size: 36px; letter-spacing: .3em; }
h3 { text-transform: uppercase; font-size: 20px; letter-spacing: .1em; color: rgba(255,255,255,.7); margin-bottom: 0; }
p.cite { color: rgba(255,255,255,.7); font-style: italic; margin-bottom: 60px; }
p.readalong { max-width: 800px; margin: 0 auto 10px auto; }

::selection,
::-moz-selection {
    background: #352d2c!important;
    color: #fff!important;
}

.modal-dialog { margin: 60px auto; }
.modal-dialog h3 { color: #000; margin: 10px 0; }

/** MEDIA QUERIES **/

/* Large desktops and laptops */
@media (min-width: 1200px) {
    #contact .container { background-position: 70% 10px; }
}

/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
     #contact .container { background-position: 75% 10px; }
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
    #contact .container { background-position: 85% 10px; }
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
   #contact .container { background: transparent; }
    #main-navigation li { font-size: 10px; line-height: 10px; display: inline; }
    #portfolio article { top: 140px; }
    #navigation.fixed { height: 40px; position: fixed; padding: 0px 0 0 0; }
    #portfolio .fade { z-index: 1; }
    #services .container { padding: 0; }
    #services .icon-container li { margin: -20px 20px 30px 20px; }
    .icon-title { padding-top: 5px; }
    #philosophy h2 { text-transform: uppercase; font-size: 34px; letter-spacing: .20em; }
    #portfolio .container.more { margin-top: 0; }
    #portfolio .bx-prev,
    #portfolio .bx-next,
    #portfolio .bx-prev:hover,
    #portfolio .bx-next:hover { width: 18px; height: 30px; }
}

/* Landscape phones and smaller */
@media (max-width: 480px) {
    #contact .container { background: transparent; }
    #main-navigation li { font-size: 10px; line-height: 10px; display: inline; }
    #portfolio article { top: 180px; }
    #portfolio .container.more { margin-top: 0; }
    #navigation.fixed { height: 40px; position: fixed; }

    #portfolio .fade { z-index: 1; }
    #services .container { padding: 0; }
    #services .icon-container li { margin: -20px 5px 30px 0px; }
    .icon-title { padding-top: 5px; }
    #philosophy h2 { text-transform: uppercase; font-size: 34px; letter-spacing: .20em; }
    
    #portfolio .bx-prev,
    #portfolio .bx-next,
    #portfolio .bx-prev:hover,
    #portfolio .bx-next:hover { width: 18px; height: 30px; }
    
    #philosophy { padding: 10px 0px 80px 0px; }
    
}