/* Set base colors */
@primary-color: #006072;
@secondary-color: #333;

/* Container width */
@container-width: 1170px;
@optional-width: 970px; /* Some elements, like fullwidth elements, dont look nice with a big width
                           For that use an optional width. The most common width for that is 970px or 860px.
                           However you can chance this optional width to what ever you like of course.

/* Font settings */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);
@font-size: 16px;

@font-face {
    font-family: 'Trajan';
    font-weight: bold;
    src: url('../fonts/Trajan Bold.ttf');
}
@font-face {
    font-family: 'Avenir';
    font-weight: bolder;
    src: url('../fonts/AvenirLTPro-Black.otf');
}
@font-face {
    font-family: 'Avenir';
    font-weight: normal;
    src: url('../fonts/AvenirLTPro-Light.otf');
}

/* Normalize */
body, html, textarea, input {
    font-family: 'Avenir';
    font-size: @font-size;
    margin: 0;
    padding: 0;
}

.wpcf7 textarea, .wpcf7 input {
    color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Trajan';
}

h1 {
    position: relative;
    font-size: 34px;
    margin-bottom: 50px;
}

h1:before {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1:before {
    position: absolute;
    content: "\e902";
    color: @primary-color;
    bottom: -30px;
    left: 50%;
    margin-left: -102px;
}

span span {
    color: @primary-color;
}

a:link, a:visited {text-decoration:none;}

img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* Buttons */
.default-button,
input[type="submit"],
input[type="button"] {
    display: inline-block;
    background: @primary-color;
    color: #fff;
    padding: 15px;
    border-radius: 3px;
}

.default-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    cursor: pointer;
    background: @secondary-color;
}

.link-button {
    margin: 15px 0;
}

/* Classes */
.container {
    max-width: @container-width;
    margin: 0 auto;
}

.optional-width {
    max-width: @optional-width;
    margin: 0 auto;
}

.overlay-black {
    background: rgba( 0, 0, 0, .3 );
    height: 100%;
    width: 100%;
}

.has-float {
    overflow: hidden;
}

.inline-2 {
    float: left;
    width: 50%;
}

.inline-3 {
    float: left;
    width: 33.33%;
}

.inline-4 {
    float: left;
    width: 25%;
}

.inline-75 {
    width: 75%;
}

.inline-25 {
    width: 25%;
}

.center {
    text-align: center;
}

.row {
    padding: 40px 0;
}

.row.no-padding {
    padding: 0 0;
}

.row.background-image {
    padding: 0 0;
}

.row.background-image span,
.row.background-color span {
    color: #fff;
}

.row.background-color {
    background: #ededed;
    color: #fff;
}

.overlay-black .container {
    height: 100%;
    width: 100%;
    padding: 40px 0;
    box-sizing: border-box;
}

/* Header */
#site-header {
    background-color: @secondary-color;
    border-bottom: 40px solid @primary-color;
}

#site-header section {
    padding: 25px 0;
}

#site-header a {
    display: block;
    color: #fff;
    padding: 15px;
}

#site-header .column-1,
#site-header .column-2 {
    text-align: right;
}

#site-header .column-1 {
    width: 70%;
}

#site-header .column-2 {
    width: 30%;
}

#site-header .site-contact a {
    color: #fff;
}

#site-header .site-contact a:hover {
    color: @primary-color;
}

    /* Navigation */
    .site-navigation {
        
    }
    
    .site-navigation > div {
        overflow: hidden;
    }
    
    .site-navigation > div > ul {
        float: right;
    }
    
    .site-navigation ul,
    .site-navigation ul > li,
    .site-navigation ul > li > a {
        display: block;
        padding: 0;
        margin: 0;
    } 
    
    .site-navigation ul > li > ul {
        display: none;
    }
    
    .site-navigation ul {
        overflow: hidden;
    }
    
    .site-navigation ul > li {
        float: left;
    }
    
    .site-navigation ul > li > a:hover,
    .site-navigation ul > .current-menu-item a {
        background: @primary-color;
    }
        
        /* For shiftnav */
        nav ul li.current-menu-item a {
            background: @primary-color !important;
        }
    
    /* Logo */
    .logo-container .logo {
        top: 0;
        max-width: 200px;
        position: absolute;
    }
    
/* Front page */
.home .background-image span {
    font-size: 34px;
    text-shadow: 1px 3px 10px #000;
}

.choice {
    position: relative;
    width: ~"calc(25% - 50px)";
    margin: 0 25px;    
}

.choice span,
.choice img {
    display: block;
    margin: 0 auto;
}

.choice span {
    margin: auto auto 15px;
}

.choice img {
    border: 3px solid @primary-color;
}

.choice img:hover {
    opacity: 0.7;
}

/* Pages */
.menus,
.menucard {
    display: block;
    margin: 0;
    padding: 0;
}

.menucard {
    color: #000;
    padding: 5px 25px;
    box-sizing: border-box;
}

.menucard h2 {
    color: @primary-color;
    font-family: 'Avenir';
}

.menucard section {
    background: #fff;
    box-shadow: 1px 1px 3px #333;
}

.menucard section .menu-head,
.menucard section .menu-content {
    padding: 0 60px;
    box-sizing: border-box;
}

.menucard section .menu-head {
    padding-top: 15px;
}

.menucard section .menu-content {
    padding-bottom: 15px;
}

.menucard section .menu-content a {
    display: block;
    font-weight: bold;
    color: @primary-color;
    padding: 10px 0;
}

.contact-btn {
    
}

.icon-arrow-right-thick {
    position: relative;
    margin-left: 15px;
    top: 1px;
}

/* wpcf7 */
.in-block {
    padding: 0;
}

.in-block span {
    position: relative;
    background: #fff;
    padding: 10px 40px;
    top: 35px;
    z-index: 999;
}

.wpcf7 {
    width: 100%;
    border: 2px solid @primary-color;
    box-sizing: border-box;
}

.wpcf7 form {
    overflow: hidden;
    padding: 25px 160px;
}

.wpcf7 form .first-child,
.wpcf7 form .second-child {
    float: left;
    width: 50%;
    box-sizing: border-box;
}

.wpcf7 form .first-child {
    padding-right: 10px;
}

.wpcf7 form .second-child {
    padding-left: 10px;
}

.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form textarea {
    background: #333;
    box-shadow: inset 0 0 5px #000;
    width: 100%;
    padding: 10px;
    border: 0;
    resize: none;
    outline: none;
    border-radius: 3px;
    box-sizing: border-box;
    margin-top: 5px;
}

.wpcf7 form input[type="submit"] {
    float: right;
    border: 0;
    border-radius: 3px;
}

/* Google Maps */
.google-maps-container {
    width: 100%;
    height: 500px;
}

.stop-scroll {
    background:transparent; 
    position:relative; 
    width:100%;
    height:500px; /* your iframe height */
    top:500px;  /* your iframe height */
    margin-top:-500px;  /* your iframe height */
}

/* Icons */
.rounded-icon {
    top: 20px;
    position: relative;
    background: @primary-color;
    color: #fff;
    padding: 10px;
    margin: 10px;
    border-radius: 50%;
}

.rounded-icon:hover {
    background: #fff;
    color: #000 !important;
}

/* Footer */
footer .first-row {
    background: @secondary-color;
}

footer .first-row ul,
footer .first-row ul li,
footer .first-row ul li a {
    display: block;
    margin: 0;
    padding: 0;
}

footer .first-row ul ul {
    display: none;
}

footer .first-row ul {
    margin-top: 50px;
    text-align: center;
    overflow: hidden;
}

footer .first-row ul li {
    display: inline-block;
}

footer .first-row ul li a {
    color: #fff;
    padding: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

footer .first-row ul li a:hover {
    color: @primary-color;
}

footer .second-row {
    padding: 15px;
    background: @primary-color;
    color: #fff;
}

footer .second-row p {
    margin: 0;
    margin-top: 10px;
    font-size: 14px;
}

footer .second-row a {
    color: #fff;
}

footer .second-row a:hover {
    color: @secondary-color;
}

@media screen and (max-width: 1230px){
    .container,
    .optional-width {
        padding: 0 15px;
    }
    
    .overlay-black .container {
        padding: 40px 15px !important;
    }
}

@media screen and (max-width: 970px) {
    .logo-container .logo {
        top: 52px;
        max-width: 150px;
        position: absolute;
    }
    
    .site-contact {
        display: none;
    }
}

@media screen and (max-width: 800px) {
    .inline-2 {
        width: 100%;
        float: none;
    }
    
    .menucard {
        padding: 25px 2px;
    }
    
    .wpcf7 form {
        overflow: hidden;
        padding: 25px 40px;
    }
    
    .wpcf7 form .first-child,
    .wpcf7 form .second-child {
        float: none;
        width: 100%;
        box-sizing: border-box;
    }
    
    .wpcf7 form .first-child {
        padding-right: 0;
    }
    
    .wpcf7 form .second-child {
        padding-left: 0;
    }
}

@media screen and (max-width: 740px) {
    .choice {
        width: ~"calc(50% - 50px)";
        margin: 0 25px 25px
    }
}

@media screen and (max-width: 500px) {
    .in-block span {
        font-size: 14px;
    }
}

@media screen and (max-width: 430px) {
    h1 {
        position: relative;
        font-size: 24px;
        margin-bottom: 50px;
    }
    
    h1:before {
        margin-left: -72px;
    }
}

@media screen and (max-width: 400px) {
    .choice {
    width: ~"calc(100% - 0px)";
        margin: 0 0 25px;    
    }
}