/* Updated website with less stylesheet */
@base-color: #272262;
@second-color: #83702C;
@third-color: #0B0044;
@overlay-black: rgba( 0, 0, 0, 0.5 );

/* Normalize */
@default-button-color: #f7f7f7;
@font-size: 16px;

/* Color border (See the blog page) */
@colored-first-color: #272262;
@colored-second-color: #403a99;
@colored-third-color: #4740d6;
@colored-fourth-color: #6d68ff;

/* Container width */
@page-width: 1270px;
@optional-width: 970px;
@with-sidebar: 70%;
@sidebar: 30%;

/* Media width */
@full-screen-width: 100%;

/* Icons */
@facebook: #4867AA;
@linkedin: #0177B5;
@twitter: #2EACF6;
@youtube: #DB2824;
@mail: #333333;

/* Mixing */
.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	   -moz-border-radius: @radius;
	        border-radius: @radius;
}

.box-shadow(@x: 0px, @y: 3px, @blur: 5px, @color: #000) {
	-webkit-box-shadow: @x @y @blur @color;
	   -moz-box-shadow: @x @y @blur @color;
	        box-shadow: @x @y @blur @color;
}


/* Font */
@import 'https://fonts.googleapis.com/css?family=Titillium+Web:400,700';

body, textarea, input, button {font-family: 'Titillium Web', sans-serif;font-size: @font-size;}

/* html, body */
body, html {
    background: #ededed;
    margin: 0;
    padding: 0;
}

/* Links */
a:links, a:visited {
    text-decoration: none;
    color: #000;
}

a:hover {
    color: #202020;
}

.content-block a:link, .content-block a:visited {
    text-decoration: none;
    color: @second-color;
}

.rounded-icon {
    .border-radius(50%);
    .box-shadow(0px, 0px, 2px, #ccc);
    background: #fff;
    text-decoration: none !important;
    padding: 15px 20px;
    font-size: 24px;
    margin: 15px 10px;
    border: 1px solid #ccc;
    color: #656565 !important;
}

.rounded-icon:hover {
    background: @base-color;
    color: #fff !important;
    border: 1px solid #333;
    .box-shadow(0px, 0px, 2px, #333);
}

.rounded-icon .fa-phone {
    margin-left: 3px;
}

/* Hovers */
a, a:hover, button, button:hover, input, input:hover, 
.default-button, textarea, textarea:hover {
    -webkit-transition:.2s;
       -moz-transition:.2s;
        -ms-transition:.2s;
         -o-transition:.2s;
            transition:.2s;
}

/* Spinner */
.spinner {
    box-sizing: border-box;
    height: 60px;
    width: 60px;
    margin: 60px auto;
    border: 0px solid @base-color;
    border-radius: 50%;
    box-shadow: 0 -20px 0 24px @base-color inset;
    animation: rotate 1s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Slide CSS */
@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

/* Elements */
blockquote {
    border-left: 10px solid #fff;
    margin: 1.5em 40px;
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
    box-sizing: border-box;
    max-width: 700px;
    color: #fff;
}

blockquote p {
  display: inline;
}

hr {
    background: #ccc;
    border: 0;
    height: 1px;
}

table {
    padding: 15px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

table td {
    vertical-align: top;
    padding: 0 20px 0 0;
}

table td strong {
    color: @base-color;
}



/* Default buttons */
.default-button {
    .border-radius(3px);
    display: inline-block;
    box-sizing: border-box;
}

.link-button {
    margin: 45px 0 0;
    text-decoration: none;
}

.button {
    background: ;
    padding: 10px 20px;
    color: @second-color;
    border: 2px solid @second-color;
}

.button:hover {
    background: @second-color;
    color: #fff !important;
}

/* Tooltipster */
.tooltipster-default {
    .border-radius(2px);
    background: @second-color !important;
    border: 0 !important;
    padding: 2px 15px !important;
}

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

.optional-width {
    max-width: @optional-width;
}

.center {
    text-align: center;
}

.page-row {
    padding: 30px 0;
}

.overlay-black {
    background-color: @overlay-black;
    height: 100%;
    width: 100%;
    position: relative;
}

.align-left {
    float: left;
    text-align: center;
}

.align-right {
    float: right;
    text-align: center;
}

.float-left {
    float: left;
}

.nt-margin {
    margin-top: 0 !important;
}

/* Color border (See blog) */
.colored {
    display: none;
    overflow: hidden;
}

.colored div {
    float: left;
    width: 25%;
    height: 3px;
}

.colored > div:nth-child(1) {
    background: @colored-first-color;
}
.colored > div:nth-child(2) {
    background: @colored-second-color;
}
.colored > div:nth-child(3) {
    background: @colored-third-color;
}
.colored > div:nth-child(4) {
    background: @colored-fourth-color;
}

/* Sticky elements */
.connect {
    z-index: 999;
    position: fixed;
    top: 50%;
    left: 0;
    margin-top: -88px;
}

.connect a {
    position: relative;
    margin-left: -100px;
    width: 120px;
    display: block;
    color: #fff;
    padding: 10px 15px;
    font-size: 24px;
    text-decoration: none;
    overflow: hidden;
    transition: .3s;
}

.connect a:hover {
    margin-left: -90px;
    transition: .3s;
}

.connect span {
    font-size: 16px;
    float: left;
}

.connect i {
    float: right;
}

.connect .facebook i {
    position: relative;
    left: -4px;
}

.connect .facebook {
    background: @facebook;
}
.connect .linkedin {
    background: @linkedin;
}
.connect .twitter {
    background: @twitter;
}
.connect .youtube {
    background: @youtube;
}
.connect .mail {
    background: @mail;
}

/* Modal */
.modal {
    background: rgba( 0, 0, 0, .5 );
    position: fixed;
    display: none;
    height: 100%;
    width: 100%;
    z-index: 999999;
    top: 0;
    left: 0;
}

.modal .modal-row {
    display: table-row;
    height: 100%;
    width: 100%;
}

.modal .modal-column-50 {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    height: 100%;
}

.modal [modal-close] {
    position: absolute;
    border: 0;
    top: 25px;
    right: 15px;
    background: transparent;
    color: #fff;
    outline: none;
    font-size: 55px;
}

.modal [modal-close-mobile] {
    position: absolute;
    border: 0;
    top: 97px;
    right: 35px;
    background: transparent;
    color: #000;
    outline: none;
    font-size: 24px;
    z-index: 99999;
}

.modal #selector {
    padding: 40px;
}

.modal .modal-box {
    background: #fff;
    .box-shadow(0, 0, 2px, #333);
}

@media screen and (max-width: 970px){
    .modal {
        background: rgba( 0, 0, 0, .5 );
        position: fixed;
        display: none;
        height: 100vh;
        width: 100vw;
        z-index: 999999;
        top: 0;
        left: 0;
    }
    
    .modal .modal-row {
        display: block;
        height: 100%;
        width: 100%;
    }
    
    .modal .modal-column-50 {
        position: relative;
        display: block;
        vertical-align: middle;
        width: 100vw;
        height: 100vh;
        overflow: scroll;
    }
    
    .modal .modal-column-50:nth-child(1) {
        display: none;
    }
    
    .modal .modal-column-50 {
        padding-top: ;
    }
    
    .modal .modal-box {
        padding: 40px 0 !important;
        box-sizing: border-box;
    }
}

/* Header */
.header-title {
    position: absolute;
    margin: 0 auto;
    width: 100%;
    color: #ffffff;
    font-size: 44px;
    bottom: 15px;
}

.header-title h1 {
    max-width: @page-width;
    margin: 0 auto;
}

/* Navigation */
.shiftnav-wrap {
    padding-top: 0 !important;
}

.navigation {
    .box-shadow(0px, 0px, 3px, #000);
    background-color: @base-color;
    height: 77px;
}

.navigation .wrapper {
    
}

.navigation .logo {
    width: 50px;
    padding: 15px 30px 15px 0;
}

.navigation ul,
.navigation ul li,
.navigation ul li a {
    display: block;
    margin: 0;
    padding: 0;
}

.navigation ul {
    
}

.navigation ul li {
    position: relative;
    float: left;
}

.navigation ul li a {
    padding: 25px;
    text-decoration: none;
    color: #fff;
    border-top: 3px solid transparent;
}

.navigation ul li:hover > a {
    color: @second-color;
}

.navigation ul li.current_page_item > a,
.navigation ul li.current_page_parent > a {
    border-top: 3px solid @second-color;
    color: @second-color;
}

/*
.navigation ul li.current_page_item:after {
    position: absolute;
    content: "";
    border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-bottom: 14px solid #000;
    bottom: 0;
    left: 50%;
    margin-left: -14px;
}
*/
    
    /* Sub menu */    
    .navigation ul ul {
        display: none;
        background: #2c2770;
        position: absolute;
        width: 250px;
        z-index: 999;
    }
    
    .navigation ul ul li.current_page_item a {
        background: #ffffff;
        color: #000000;
    }
    
    .navigation ul li:hover > ul {
        display: block;
    }
    
    .navigation ul ul:after {
        position: absolute;
        content: "";
        border-left: 14px solid transparent;
    	border-right: 14px solid transparent;
    	border-bottom: 14px solid #2c2770;
        top: -14px;
        left: 40px;
    }
    
    .navigation ul ul li {
        float: none;
        width: 100%;
    }
    
    .navigation ul ul li a {
        color: #fff;
        padding: 15px;
        border-bottom: 1px solid @base-color;
    }
    
    .navigation ul ul li a:hover {
        background: #fff;
        color: @base-color;
    }

/* Splash page */
video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

.splash-redirect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.splash-redirect button {
    position: absolute;
    background: transparent;
    color: #fff;
    border: 3px solid #fff;
    padding: 15px;
    border-radius: 3px;
    left: 50%;
    top: 50%;
    outline: none;
    cursor: pointer;
    font-size: 22px;
    margin-top: -35px;
    margin-left: -93px;
}
    
/* site content */
.content-block {
    position: relative;
    overflow: hidden;
}

.content-block ul {
    padding: 0;
}

.content-block ul li {
    position: relative;
    display: block;
    padding-left: 25px;
    margin-left: 25px;
}

.content-block ul li:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
}

.content-block ul li:before {
    position: absolute;
    content: "\f096";
    font-size: 10px;
    color: @second-color;
    left: 5px;
    top: 8px;
}

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

.content-block .column {
    position: relative;
    background: #fff;
    .box-shadow(1px, 1px, 2px, #ccc);
    margin-bottom: 35px;
}

.content-block .column .column-head,
.content-block .column .column-content {
    padding: 20px 20px 0 20px;
}

.content-block .column .column-content {
    padding-top: 0;
    padding-bottom: 20px;
    overflow: hidden;
}

.content-block .column .column-content .button {
    background: @base-color;
    border: 0;
    color: #fff;
    float: right;
    margin: 0;
}

.content-block .column .column-content .button:hover {
    background: rgba( 11, 0, 68, .7 );
}

.content-block .column .column-head h1,
.content-block .column .column-head h2 {
    margin: 0;
}

.content-block .with-sidebar,
.content-block .sidebar {
    margin: 40px 0;
    float: left;
    box-sizing: border-box;
}

.content-block .with-sidebar {
    background: #fff;
    box-shadow: 1px 1px 2px #e2e2e2;
    width: @with-sidebar;
    padding: 0 !important;
    box-sizing: border-box;
    border-radius: 1px;
}

.content-block .no-block {
    background: transparent;
    box-shadow: 0 0 0 0;
}

.content-block .content-padding {
    padding: 40px;
}

.content-block .sidebar {
    width: @sidebar;
    padding: 40px;
}

.content-block .blog-post {
    position: relative;
    background: #fff;
    .box-shadow(1px, 1px, 2px, #ccc);
    margin-bottom: 35px;
}

.content-block .blog-post .blog-image,
.content-block .blog-post .blog-content {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}

.content-block .blog-post .blog-head,
.content-block .blog-post .blog-image {
    padding: 20px;
    box-sizing: border-box;
}

.content-block .blog-post .blog-head {
    padding-top: 35px;
    padding-bottom: 0;
}

.content-block .blog-post .blog-head .blog-date {
    background: @base-color;
    position: absolute;
    display: block;
    padding: 10px;
    color: #fff;
    margin-top: -53px;
    font-size: 14px;
}

.content-block .blog-post .blog-image {
    width: 30%;
}

.content-block .blog-post .blog-image > img {
    height: 130px;
}

.content-block .blog-post .normal-image > img {
    height: auto;
    width: 200px;
}

.content-block .blog-post .blog-content {
    width: 69%;
    padding: 5px 25px 5px 0;
}

.content-block .blog-post .referentie-content {
    padding-bottom: 40px;
}

.content-block .blog-post .blog-content .button {
    background: @base-color;
    border: 0;
    color: #fff;
    float: right;
    margin-bottom: 20px;
}

.content-block .blog-post h2 {
    margin: 0;
    color: #000;
}

.content-block .blog-post p {
    margin-bottom: 0;
}

.content-block .blog-post .head-permalink {
    text-decoration: none !important;
}

/* Contact form */
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea {
    box-shadow: inset 0 0 5px #ccc;
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    outline: none;
}

.wpcf7 .wpcf7-text:hover,
.wpcf7 .wpcf7-text:focus,
.wpcf7 .wpcf7-textarea:hover,
.wpcf7 .wpcf7-textarea:focus {
    border: 1px solid @base-color;
}

.wpcf7-submit {
    background: @base-color;
    float: right;
    border: 0;
    color: #fff;
    padding: 15px 25px;
    .border-radius(5px);
}

.wpcf7-submit:hover {
    background: rgba( 11, 0, 68, .7 );
    cursor: pointer;
}

/* Single */
.post-navigation {
    box-sizing: border-box;
    padding: 20px 40px;
    overflow: hidden;
    border-top: 1px solid #ccc;
}

.post-navigation a {
    text-decoration: none !important;
}

.post-navigation i {
    font-size: 34px;
}

.post-navigation i,
.post-navigation span {
    color: #969696;
}

/* Sidebar */
.sidebar {
    
}

.sidebar section {
    margin: 0 0 45px;
}

.sidebar h3 {
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 10px;
    color: #565656;
    font-size: 18px;
    text-shadow: 0px 0px -1px #565656;
    border-bottom: 1px solid #ccc;
}

.sidebar .latest-posts {
    
}

.sidebar .latest-posts p,
.sidebar .latest-posts h4 {
    color: #777777;
    margin: 0;
}

.sidebar .latest-posts p {
    font-size: 14px;
}

.sidebar .latest-posts td:first-child {
    width: 50px;
}

.sidebar .latest-posts td {
    padding: 5px;
}

.sidebar .latest-posts a {
    color: #777777;
    font-weight: bold;
    text-decoration: none;
}

/* Footer */
.footer-section {
    background: @third-color;
}

.footer-section,
.footer-section a {
    color: #fff;
    text-decoration: none;
}

.footer-section p {
    max-width: 970px;
    margin: 0 auto;
    padding: 20px 0;
}

.footer-section .callMeBtn {
    font-weight: bold;
    font-size: 24px;
}

.footer-section .socialLink {
    font-size: 22px;
}

footer #copyright {
    background: @base-color;
}

footer #copyright p {
    margin: 0;
    padding: 15px;
}

footer #copyright a,
footer #copyright p {
    color: #fff;
}

/* Touch devices */
@media screen and (max-width: 1340px){
    .wrapper,
    .header-title {
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .has-background-image .wrapper {
        padding: 20px;
    }
    
    .sidebar {
        padding-right: 0 !important;
    }
}

@media screen and (max-width: 780px){
    .content-block .blog-post .blog-image > img {
        height: auto;
    }
}

@media screen and (max-width: 650px){
    .content-block .blog-post .blog-image,
    .content-block .blog-post .blog-content {
        width: 100%;
        float: none;
        padding: 20px;
    }
    
    .header-title h1 {
        font-size: 54px;
    }
}

@media screen and (max-width: 430px){
    h1 {
        font-size: 24px !important;
    }
}

@media screen and (max-width: 950px){
    .content-block .with-sidebar,
    .content-block .sidebar {
        padding: 20px;
        float: none;
        width: @full-screen-width;
    }
    
    .content-block .content-padding {
        padding: 20px;
    }
    
    .content-block .sidebar {
        padding-right: 40px !important;
        position: relative;
        background: #fff;
        .box-shadow(1px, 1px, 2px, #ccc);
    }
    
    .connect {
        z-index: 999;
        position: relative;
        top: auto;
        left: auto;
        margin-top: 0;
        overflow: hidden;
    }
    
    .connect a {
        position: inherit;
        margin-left: 0;
        text-align: center;
        float: left;
        width: 25%;
        box-sizing: border-box;
        display: block;
        color: #fff;
        padding: 10px 15px;
        font-size: 24px;
        transition: all .2s ease-in-out;
    }
    
    .connect a:hover {
        transform: scale(1.1);
        margin-left: 0;
    }
    
    .connect i {
        float: none;
    }
    
    .connect .facebook i {
        margin-left: 4px;
    }
}