/*

    Created on : Feb 17, 2016, 2:19:39 PM
    Author     : nlindhorst

*/

/* SCREENS */
@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;


/* COLORS */
@ptx-very-light-gray: #999;
@ptx-light-gray: #b8b8b8;
@ptx-dark-gray: #666;
@ptx-teaser-gray: #333;
@ptx-group-header-color: #fff;
@ptx-white: #fff;
@ptx-orange: #f2981a;
@ptx-header-background: #eee;

/* FONTS */
@font-open-sans: 'Open Sans Condensed', sans-serif;
@font-lucida-sans: "Lucida Sans Regular", "Loma", sans-serif;
@font-open-sans-regular: 'Open Sans', sans-serif;

/* FUNCTIONS */
.transition-properties(...) {
    -webkit-transition: @arguments;
    -moz-transition: @arguments;
    -o-transition: @arguments;
    -ms-transition: @arguments;
    transition: @arguments;
}
.transform-properties(...) {
    transform: @arguments;
    -webkit-transform: @arguments;
    -moz-transform: @arguments;
    -ms-transform: @arguments;
    -o-transform: @arguments;
}
.clearfix() {
    &:before,
        &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}

::selection {
    background: @ptx-orange; /* WebKit/Blink Browsers */
    color: #fff;
}
::-moz-selection {
    background: @ptx-orange; /* Gecko Browsers */
    color: #fff;
}

@-ms-viewport{ width: auto !important; }

body {
    font-family: @font-open-sans-regular;
}

header {
    width: 100%;
    padding-bottom: 10px;
    background: @ptx-header-background;
}
header > #ptx-group-header > .ptx-group-container-outer {
    float: left;
    background: @ptx-dark-gray;
    width: 100%;
}
header > #ptx-group-header > .ptx-group-container-outer > .ptx-group-container-inner {
    font-family: @font-lucida-sans;
    color: @ptx-white;
    font-size: 13px;
    > div {
        height: auto;
        padding-bottom: 10px;
        padding-top: 5px;
    }
}
header > #ptx-group-header > .ptx-group-container-outer > .ptx-group-container-inner > div > div {
    &:first-child {
        padding-top: 36px;
        padding-left: 0px;
        @media (max-width: @screen-sm-max) {
            padding-top: 5px;
        }
    }
    &:last-child {
        padding-top: 34px;
        padding-right: 0px;
    }
    > p {
        margin-top: 5px;
    }
    @media (max-width: @screen-sm-max) {
        padding: 0px;
    }
} 
header > #ptx-group-header > .ptx-group-button-container {
    background: @ptx-light-gray;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 30px;
    div > a { 
        font-size: 23px;
        color: #fff;
        span.glyphicon {
            top: 5px;
        }
        > img {
            width: 15px;
            @media (max-width: @screen-sm-max) {
                width: 20px;
            }
        }
    }
}
button.ptx-group-collapse {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
        background: none;
        color: @ptx-white;
        font-size: 16px;
        font-weight: bold;
        > span.glyphicon-menu-up {
            top: 4px;
        }
        > span.glyphicon-menu-down {
            top: 3px;
        }
        @media (max-width: @screen-sm-max) {
            font-size: 20px;
        }
    }
header > nav {
    width: 100%;
    margin-top: 40px;
    font-family: @font-open-sans;
    &.affix {
        z-index: 99999;
        top: 0;
        background: @ptx-header-background;
        padding-top: 10px;
        margin-top: 0;
        box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);  
    }
}
header > nav > #main-navigation-container {
    float: left;
    @media (max-width: @screen-sm-max) {
        width: 100%;
        &.collapse.in,&.collapse.collapsing {
            height: auto !important;
        }
    }
    @media (min-width: @screen-md-min) {
        height: auto !important;
        display: block;
    }
    #main-navigation {
        padding: 0;
        @media (max-width: @screen-sm-max) {
            width: 100%;
            padding: 20px 0px;
            margin-top: 20px;
        }
        li {
            list-style-type: none;
            display: inline-block;
            padding: 5px;
            @media (min-width: @screen-md-min) {
                &:first-child {
                    padding-left: 0px;
                }
            }
            @media (max-width: @screen-sm-max) {
                display: block;
                padding: 5px 0px;
            }
            a {
                text-transform: uppercase;
                color: @ptx-dark-gray;
                text-decoration: none;
                letter-spacing: 2px;
                font-weight: bold;
                font-size: 23px;
                @media (max-width: @screen-sm-max) {
                    color: @ptx-teaser-gray;
                    span.glyphicon.menu.orange {
                        display: none;
                    }
                }
            }
        }
    }
}
button.menu-collapse {
    margin: 0;
    padding: 4px 8px 0px 8px;
    border: none;
    outline: none;
    background: @ptx-dark-gray;
    color: @ptx-white;
    font-size: 24px;
    .transition-properties(width 1s, height 1s, background-color 1s, transform 1s;);
}
section {
    font-family: @font-open-sans-regular;
    line-height: 30px;
    font-size: 20px;
    color: @ptx-teaser-gray;
    padding-top: 40px;
    padding-bottom: 40px;
    @media (max-width: @screen-sm-max) {
        font-size: 18px;
        line-height: 26px;
    }
    &:first-child {
        padding-top: 100px;
        @media (max-width: @screen-sm-max) {
            padding-top: 20px;
        }
    }
    h1 {
        line-height: 46px;
        color: @ptx-teaser-gray;
        text-transform: uppercase;
        font-family: @font-open-sans;
        font-size: 52px;
        font-weight: bold;
        letter-spacing: 2px;
        margin-bottom: 30px;
    }
    h2 {
        line-height: 35px;
        color: @ptx-orange;
        text-transform: uppercase;
        font-family: @font-open-sans;
        font-size: 38px;
        font-weight: bold;
        letter-spacing: 2px;
        padding-bottom: 20px;
        text-align: center;
        @media (min-width: @screen-lg-min) {
            text-indent: -25px;
        }
    }
    h3 {
        line-height: 30px;
        color: @ptx-teaser-gray;
        text-transform: uppercase;
        font-family: @font-open-sans;
        font-size: 26px;
        font-weight: bold;
        letter-spacing: 2px;
        margin-bottom: 20px;
    }
    h4 {
        color: @ptx-dark-gray;
        text-transform: uppercase;
        font-family: @font-open-sans;
        font-size: 22px;
        font-weight: bold;
        letter-spacing: 2px;
        margin-bottom: 5px;

    }
    img {
        width: auto;
        margin: auto;
        display: block;
    }
    h1,h2,h3,h4,h5,h6 {
        a {
            color: inherit;
            text-decoration: none;
            &:hover, &:focus {
                color: inherit;
                text-decoration: none;
            }
        }
    }
    &.teaser-unit {
        h1 {
            @media (min-width: @screen-md-min) {
                text-indent: -25px;
            }
            @media (max-width: @screen-sm-max) {
                line-height: 38px;
                font-size: 43px;
            }
            > span.orange {
                color: @ptx-orange;
                @media (max-width: @screen-sm-max) {
                    line-height: 40px;
                }
            }
        }
        &+ .submenu {
            padding-top: 20px;
        }
    }
    &.submenu {
        padding-top: 80px;
        > hr.submenu-line {
            border-top: 1px solid @ptx-orange;
            @media (max-width: @screen-xs-max) {
                display: none;
            }
        }
        > div > div.submenu-buttons {
            width: auto;
            text-align: center;
            margin-top: 20px;
            a {
                &:hover {
                    text-decoration: none;
                }
                display: inline-block;
                top: -38px;
                padding: 3px 20px;
                margin: 0px 10px 10px 0;
                background: @ptx-teaser-gray;
                color: @ptx-white;
                text-transform: uppercase;
                font-weight: bold;
                font-size: 16px;
                position: relative;
                @media (max-width: @screen-xs-max) {
                    width: 100%;
                    text-align: left;
                    font-size: 15px;
                    line-height: 30px;
                    padding: 3px 10px;
                    > .glyphicon {
                        line-height: inherit;
                    }
                }
            }
        }
    }
    &.credentials {
        padding-top: 0px;
        padding-bottom: 20px;
        div.credentials-buttons {
            width: auto;
            text-align: center;
            a {
                &:hover {
                    text-decoration: none;
                }
                display: inline-block;
                padding: 3px 20px;
                margin: 0px 10px 10px 10px;
                background: @ptx-very-light-gray;
                color: @ptx-teaser-gray;
                text-transform: uppercase;
                font-weight: bold;
                font-size: 16px;
                @media (max-width: @screen-xs-max) {
                    width: 100%;
                    margin: 0px 0px 10px 0px;
                    text-align: left;
                    font-size: 15px;
                    line-height: 30px;
                    padding: 3px 10px;
                    box-shadow: 0px 2px 3px 0px #888;
                    > .glyphicon {
                        line-height: inherit;
                    }
                }
            }
        }
    }
    &.more-about + section.more-about {
        padding-top: 0px;
    }
    &#credentials {
        div.credential {
            height: 350px;
            width: ~"calc((100%) / 3)";
            float: left;
            padding: 0px 10px;
            @media (max-width: @screen-md-max) {
                width: ~"calc((100%) / 2)";
            }
            @media (max-width: @screen-xs-max) {
                width: 100%;
            }
        }
        span.label {
            line-height: 35px;
        }
        a.title-link {
            > .credential-logo {
                margin-bottom: 10px;
                filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
                filter: gray; /* IE6-9 */
                -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
            }
            &:hover {
                color: @ptx-teaser-gray;
                > .credential-logo {
                    filter: none;
                    -webkit-filter: grayscale(0%);
                }
            }
        }
    }
    &.portfolio {
        .row {
            div {
                a img {
                    margin-bottom: 10px;
                }
            }
        }
        .portfolio-collapse {
            padding-top: 15px;
        }
        > div.portfolio-button {
            width: auto;
            text-align: center;
            > button {
                display: inline-block;
                position: relative;
                background: #fff;
                outline: none;
                border: none;
                padding: 5px;
                font-weight: bold;
                font-size: 26px;
                z-index: 99999;
                top: -40px;
            }
        }
        & > hr {
            border-width: 2px;
        }
    }
    &.no-padding {
        padding: 0px;
    }
    &.no-padding-bottom {
        padding-bottom: 0px;
    }
    &.no-padding-top {
        padding-top: 0px;
    }
    &:last-child {
        padding-bottom: 60px;
    }
}

hr {
    margin: 0px;
}
.carousel.slide {
    img {
        margin: auto;
        display: block;
    }
    .carousel-control.left, .carousel-control.right {
        background-image: none;
        .glyphicon-chevron-left,.glyphicon-chevron-right {
            color: @ptx-orange;
            font-size: 60px;
        }
    }
}

.button-more-about {
    color: @ptx-dark-gray;
    &:hover {
        color: @ptx-dark-gray;
    }
}

footer {
    background: #ccc;
    font-family: Myriad Pro,'PT Sans Narrow', sans-serif;
    padding-bottom: 30px;
    .footer-bar {
        width: 100%;
        background: #6d6d6d;
        @media (max-width: @screen-sm-max) {
            span.glyphicon {
                font-size: 22px;
                top: 5px;
            }
        }
        .sitemap-control {
            button {
                font-size: 14px;
            }
            @media (max-width: @screen-sm-max) {
                width: 100%;
                background: #bbb;
                float: left;
                padding: 10px 0px;
            }
        }
        .inner {
            width: 100%;
            color: #fff;
            .container {
                @media (max-width: @screen-sm-max) {
                    padding-right: 0px;
                }
            }
            .copyright {
                padding: 10px 0px;
                float: left;
                color: #fff;
            }
            button.scroll-up {
                background: @ptx-orange;
                padding: 10px;
            }
            .meta {
                padding: 10px 0px;
                a {
                    color: #fff;
                    text-transform: uppercase;
                    font-weight: bold;
                }
            }
            @media (max-width: @screen-sm-max) {
                width: 100%;
                line-height: 31px;
                background: @ptx-orange;
            }
        }
    }
    .footer-inner {
        @media (min-width: @screen-md-min) {
            height: auto !important;
            display: block;
        }
    }
}
body.page-home {
    #wrapper {
        #content-wrapper section:last-child {
            padding-bottom: 0px;
        }
    }
}
#footer-navigation {
    margin-top: 25px;
    @media (max-width: @screen-sm-max) {
        margin-top: 60px;
        .transition-properties(width 1s, height 1s, margin-top 1s, transform 1s;);
    }
    > div.row {
        margin: 0;
        padding: 0;
        > div {
            list-style-type: none;
            @media (max-width: @screen-sm-max) {
                padding-left: 0px;
                padding-right: 0px;
            }
            @media (min-width: @screen-md-min) {
                &:first-child {
                    padding-left: 0px;
                }
                &:last-child {
                    padding-right: 0px;
                }
            }
            > a.topic {
                text-transform: uppercase;
                font-size: 16px;
                text-decoration: none;
                color: #333;
                font-weight: bold;
            }
            hr {
                border-width: 1.3px;
                border-color: #636262;
            }
            > ul {
                margin: 5px 0px 10px;
                padding: 0;
                > li {
                    list-style-type: none;
                    > a {
                        text-transform: uppercase;
                        font-size: 13px;
                        text-decoration: none;
                        color: #636262;
                        line-height: 14px;
                        padding: 7px 0 3px;
                        display: inline-block;
                    }
                    > ul.footer-sub-menu {
                        margin-left: 5px;
                        > li {
                            list-style-type: none;
                            > a {
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
input {
    border-radius: 0px !important; 
    &.invalid {
        border-color: red;
    }
}
select {
    width: 100% !important;
    border-radius: 0px !important;
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    box-shadow: none !important;
    outline: none;
    font-family: @font-open-sans;
    font-size: 20px !important;
    padding: initial !important;
    font-weight: bold;
    color: @ptx-teaser-gray;
    background: transparent url(/ceemes/webfile/show/899/) no-repeat center center;
    option {
        font-weight: normal;
        font-size: 20px;
        background-color: @ptx-light-gray;
        color: @ptx-teaser-gray;
        &[disabled] {
            font-weight: bold;
            border-bottom: 1px solid #666;
            background-color: #eee;
        }
    }
    &.invalid {
        border-color: red;
    }
}
textarea {
    border-radius: 0px !important;
    &.invalid {
        border-color: red;
    }
}
span.error-info {
    color: red;
}

form {
    &.form-contact {
        > input,select,textarea {
            width: 50%;
            margin-bottom: 15px;
            @media (max-width: @screen-sm-max){
                width: 100%;
            }
        }
    }

}

.btn {
    border-radius: 0px !important;
}
button[type=submit],button.btn-primary {
    background: @ptx-orange;
    border-color: @ptx-orange;
    font-weight: bold;
    &:hover,&:focus,&:active,&:active:hover,&:active:focus {
        background: #c60;
        border-color: #c60;
    }
}


div.alert {
    border: none;
    background: none;
    padding: 10px 0px;
    &.alert-success {
        color: @ptx-orange;
    }
}
.modal-header {
    border-bottom: none;
    .close {
        opacity: 1;
        margin-top: -20px;
        margin-right: -10px;
        font-size: 43px;
    }
}
.modal-backdrop.in {
    opacity: 0.8;
}
div.sidebar {
    width: 36px;
    position: fixed;
    display: block;
    top: 50%;
    right: 5px;
    padding: 5px 0px 5px 0px;
    z-index: 9999;
    background: @ptx-orange;
    button {
        margin: 0 auto;
        padding: 0;
        display: block;
        font-size: 24px;
        border: none;
        background: none;
        outline: none;
        color: @ptx-white;
    }
    @media (max-width: @screen-sm-max) {
        display: none;
    }
}
span.glyphicon {
    &.orange.menu {
        color: @ptx-orange;
        font-stretch: -50px;
    }
    &.glyphicon-more-right:before {
        content: "\e080\e080\e080";
    }
}
a {
    color: @ptx-orange;
    text-decoration: none;
}
a:hover,
a:focus {
    text-decoration: none;
    &.no-hover {
        text-decoration: none;
        color: inherit;
        background: inherit;
    }
    color: @ptx-orange;
    h1,h2,h3,h4,h5,h6 {
        text-decoration: none;
    }
}
a:focus {
    outline: none;
}
img {
    width: inherit;
    max-width: 100%;
    height: auto;
    &.float-image {
        &.pull-left {
            margin-right: 10px;
        }
        &.pull-right {
            margin-left: 10px;
        }
    }
    + div.clearfix {
        @media (max-width: @screen-sm-max) {
            + p {
                margin-top: 10px;
            }
        }
        @media (min-width: @screen-md-min) {
            display: none;
        }
    }
    &.ptx-logo {
        width: 150px;
    }
    &.img-teaser {
        @media (min-width: @screen-md-min) {
            max-width: 150px;
        }
    }
}
hr {
    border-top: 1px solid @ptx-orange;
    &.gray {
        border-color: @ptx-light-gray;
    }
    &.black {
        border-color: @ptx-teaser-gray;
    }
    &.bold {
        border-width: 3px;
    }
}
.rotate {
    .transform-properties(rotate(90deg););
}
.bold {
    font-weight: bold;
}
.italic {
    font-style: italic;
}
.underline {
    text-decoration: underline;
}
.form-group.text-center,
.form-group.text-right{
    @media (max-width: @screen-sm-max){
        text-align:left;
    }
}
.slider-container{
    @media (max-width: 567px){
        display: none;
    }
}
iframe {
    border: none;
}