/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

/*@font-face {
    font-family: 'rajdhaniregular';
    src: url('../fonts/rajdhani-regular-webfont.eot');
    src: url('../fonts/rajdhani-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rajdhani-regular-webfont.woff2') format('woff2'),
         url('../fonts/rajdhani-regular-webfont.woff') format('woff'),
         url('../fonts/rajdhani-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'rajdhanilight';
    src: url('../fonts/rajdhani-light-webfont.eot');
    src: url('../fonts/rajdhani-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rajdhani-light-webfont.woff2') format('woff2'),
         url('../fonts/rajdhani-light-webfont.woff') format('woff'),
         url('../fonts/rajdhani-light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rajdhanibold';
    src: url('../fonts/rajdhani-bold-webfont.eot');
    src: url('../fonts/rajdhani-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rajdhani-bold-webfont.woff2') format('woff2'),
         url('../fonts/rajdhani-bold-webfont.woff') format('woff'),
         url('../fonts/rajdhani-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rajdhanimedium';
    src: url('../fonts/rajdhani-medium-webfont.eot');
    src: url('../fonts/rajdhani-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rajdhani-medium-webfont.woff2') format('woff2'),
         url('../fonts/rajdhani-medium-webfont.woff') format('woff'),
         url('../fonts/rajdhani-medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}*/
html, body{height: 100%;}

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 13px;
    line-height: 1.4;
    font-family: rajdhani;
    font-weight: 400;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


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


/*General Styles*/
a{text-decoration:none;}
.leftFloat{float: left!important;}
.rightFloat{float: right!important;}
.grid{width: 990px; margin: 0 auto; position: relative;}
#container{width: 100%; height: 100%;}



@media screen and (min-width: 1px){
#top_bg{background: url(../images/top_bg.png) repeat-x; width: 100%; height: 300px; position: absolute; z-index: 1}
#bot_bg{background: url(../images/bot_bg.png) repeat-x;  width: 100%; height: 414px; position: absolute; z-index: -1; bottom: 0;}
#wide_wrp{
        position: relative;
        min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: -50px auto 0px; /* the bottom margin is the negative value of the footer's height */
        z-index: 1;
        //overflow: auto;
        //padding-bottom: 50px;
}
#footer_wrp{position: relative; width: 960px; margin: -50px auto 0px; height: 50px; background-color: #2A3B8E; z-index: 1; }

#body_wrapper{
    width: 960px;
    margin: 0 auto;
    //height: auto;
    //min-height: 100%;
        
}

#top_wrapper{height: 210px; position: relative;}
#language{position: absolute; right: 0; top: 60px; color: #fff;}
#language a{color: #fff}
#logo{width: 205px; height: 62px; margin-left: 15px; margin-top: 110px; background: url('../images/kalconen_logo.png') no-repeat; display: inline-block;}

#menu{float: right; margin-top: 100px; z-index: 1}
#menu > li {
    position: relative;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
    display: inline-block; 
    padding: 10px; 
    height: 65px;
}
#menu > li > ul{display: none; position: absolute; background-color: #2A3B8E; color: #fff; list-style: none; padding-top: 5px; margin: 0; top:85px; left: -1px; z-index: 1}
#menu > li:last-child > ul{left: -89px;text-align: right;}
.menu_en > li:last-child > ul{left: -77px !important;}
#menu > li > ul > li{ background-color: #2A3B8E; color: #fff; width: 140px; padding: 5px 10px 5px 10px; border-top: 1px solid #27A8E0; }
#menu > li > ul > li:hover{ background-color: #27A8E0; -webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;-ms-transition: all 300ms linear; }
#menu > li > ul > li:first-child{border-top: 0px solid #27A8E0; }
#menu > li > ul > li a{ color: #fff;}
#menu > li:hover{
    height: 65px;
    position: relative;
    display: inline-block;
    background: #27A8E0;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
    background-color: #27A8E0; 
    color: #fff;
}
#menu > li:hover > ul{display: block;}
.menu_number{font-size: 26px; color: #1D75BB; font-family: rajdhani; font-weight: 300; -webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear}
.menu_text{font-size: 15px; color: #fff; font-family: rajdhani; font-weight: 700; -webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear}

#menu > li:hover .menu_number{opacity: 1;
color: #2676ac;
-webkit-animation: moveFromTop 300ms ease-in-out;
-moz-animation: moveFromTop 300ms ease-in-out;
-ms-animation: moveFromTop 300ms ease-in-out;}
#menu >li:hover .menu_text{opacity: 1;
-webkit-animation: moveFromBottom 300ms ease-in-out;
-moz-animation: moveFromBottom 300ms ease-in-out;
-ms-animation: moveFromBottom 300ms ease-in-out;}

@-webkit-keyframes moveFromBottom {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        opacity: 0;
        -moz-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        opacity: 0;
        -ms-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromTop {
    from {
        opacity: 0;
        -moz-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromTop {
    from {
        opacity: 0;
        -ms-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}

.menu_border{height: 3px; width: 50px; background-color: #27A8E0;}

#top_border{width: 100%; height: 15px; background-color: rgba(40,168,224,0.6);}
#slider{width: 100%; height: 215px;}
#slider img{width: 960; height: 215px;}
#content_slider{width: 100%; height: 285px; position: relative;}

#project_slider_arrow{width: 45px; height: 45px; background: url(../images/project_arrow_white.png) no-repeat; float: left; margin-top: 3px; margin-left: 10px;}
#project_slider_text{float: left; margin-left: 15px;}
#project_title{position: absolute; min-height: 45px; bottom: 0; background-color: rgba(40,36,96,0.8); display: block; width: 960px; color: #fff; padding: 10px 0px;}
#slider_title{font-family: rajdhani; font-weight: 700; font-size: 20px;}
#slider_abstract{}
#slider_abstract p{margin: 0; padding: 0;}

#project_detail_body{width: 475px; float: left; margin-top: 25px;}

#project_gallery{margin-top: 10px; margin-left: 5px; float: left; width: 210px;}
#project_gallery a{margin: 10px 5px; display: inline-block;}
#project_gallery img{width: 57px; height: 57px;}

#content_wrp{
    //position: relative;
        }
#content_left{width: 155px; height: 100%; display: inline-block; float: left; background-color: #E6E6E7; padding-left: 25px;background-color: rgba(230,230,230,0.9);}
#content_right{width: 690px; height: 100%; display: inline-block; float: left; background-color: #fff; padding-left: 35px; padding-right: 55px;}

#menu_title{font-family: rajdhani; font-weight: 700; color: #322C5D; font-size: 20px;  padding-bottom: 19px; padding-top: 30px;}
#menu_title_border{width: 125px; border-bottom: 1px solid #322C5D;}
#left_menu{margin-top: 15px; list-style: none;}
#left_menu a{display: block; color: #000; margin-bottom: 10px; width: 150px;-webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -o-transition: all 100ms linear; -ms-transition: all 100ms linear; transition: all 100ms linear;}
#left_menu a:hover{padding-left:5px;color: #322C5D;-webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -o-transition: all 100ms linear; -ms-transition: all 100ms linear; transition: all 100ms linear;}


h1{font-family: rajdhani; font-weight: 700; color: #322C5D; font-size: 20px; padding-top: 30px; margin: 0; padding-bottom: 19px; position: relative;}
h1:before {content : ""; position: absolute; left : 0; bottom : 0; height : 1px; width : 125px; border-bottom:1px solid #322C5D;}
h2{font-family: rajdhani; font-weight: 700; color: #322C5D; font-size: 20px; padding-top: 30px; margin: 0; padding-bottom: 19px;  position: relative;}
h2:before {content : ""; position: absolute; left : 0; bottom : 0; height : 1px; width : 125px; border-bottom:1px solid #322C5D;}
#content_title_border{width: 125px; border-bottom: 1px solid #322C5D;}

#project_list{margin-top: 10px;}
.project_list_item{margin: 14px 0px;}
#project_list a{display: inline-block; padding-left: 55px; background: url('../images/project_arrow.png') no-repeat;  min-height: 40px;}
.project_list_title{color: #322C5D; font-size: 14px; font-family: rajdhani; font-weight: 700; margin-top: 3px;}
.project_list_city{color: #322C5D;}
.project_list_city p{margin: 0; padding: 0;}

tt{font-family: rajdhani; font-weight: 700; font-size: 16px; color: #322C5D;}

#trademark{padding-top: 18px; color: #fff; display: inline-block; margin-left: 10px;}
#social_icons{float: right; margin-right: 15px; display: inline-block; padding-top: 15px;}
#social_icons a{display: inline-block; width: 20px; height: 20px;}
.icon_fb{background: url('../images/icon_fb.png') no-repeat;}
.icon_tw{background: url('../images/icon_tw.png') no-repeat;}
.icon_ins{background: url('../images/icon_ins.png') no-repeat;}
.icon_linked{background: url('../images/icon_linked.png') no-repeat;}


/* form */

.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

#application-form{margin-top: 20px;}

.form fieldset {margin-bottom: 20px;}
.form legend {font-size: 16px; line-height: 20px; color: #322C5D;}
.form .row {clear: both; width: 100%; box-sizing: border-box; margin-left: -6px; margin-right: -6px;}
.form .row-group {clear: both; background: #f1f1f2; margin-bottom: 2px; padding: 15px;}
.form .form-group {float: left;}
.form .row .col_2 {padding: 2px 6px; width: 33.3333333%; box-sizing: border-box;}
.form .row .col_3 {padding: 2px 6px; width: 50%; box-sizing: border-box;}
.form .row .col_4 {padding: 2px 6px; width: 66.3333333%; box-sizing: border-box;}
.form .row .col_6 {padding: 2px 6px; width: 100%; box-sizing: border-box;}
.form .form-group .label-container {padding: 6px 0px; font-style: italic; color: #231f20;}
.form .form-group .form-error {clear: both; float: right; padding-top: 5px; width: 100%; font-size: 12px; font-style: italic; color: #9c120f;}
.form .form-group .input-element {display: block; width: 100%; padding: 6px 10px; color: #030303; box-sizing: border-box; -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}
.form .form-group .input-select {width: 100%; display: block; padding: 6px 10px; color: #030303; box-sizing: border-box; -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}
.form .form-group .ui-selectmenu-button {background: none; border: 1px solid #b2b4b6; border-radius: 0;}
.form .form-group .ui-selectmenu-button span.ui-selectmenu-text {line-height: 18px;}
.form .form-group .input-info span {padding: 6px 0px; font-style: italic; color: #231f20;}
.form .form-group .input-file-label {display: block; margin-right: 20px; padding: 6px 12px; width: 228px; box-sizing: border-box; background: #6d6f71; color: #fff; cursor: pointer;}
.form .form-group .input-file {position: absolute; left: -9999px;}
.form .form-group .input-file-name {padding: 12px 0px;}
button.add {display: block; margin-top: 10px; padding: 0px 30px 0px 10px; border: none; font-size: 12px; line-height: 25px; font-style: italic; background: url('../images/icon-add-delete.png') right -25px no-repeat;}
button.clear {display: block; padding: 0px 30px 0px 10px; border: none; font-size: 12px; line-height: 25px; font-style: italic; background: url('../images/icon-add-delete.png') right 0px no-repeat;}
button.submit-button {display: block; width: 100%; padding: 15px 0px; background: #9c120f; border: none; font-size: 16px; line-height: 20px; color: #fff; font-family: rajdhani; font-weight: 700; margin-bottom: 20px;}

.contact_form{margin-top: 40px;}


/*Open Positions*/
.open_position_item{margin-bottom: 5px;}
.open_position_body{display: inline-block;}
.open_position_title{font-size: 16px; line-height: 20px; font-style: italic; color: #c32032;}
.open_position_text{}
.open_position_button{display: inline-block; padding-right: 30px; float: right; margin-top: 10px; border: none; font-size: 12px; line-height: 25px; font-style: italic; background: url('../img/icon-add-delete.html') right -25px no-repeat;}



}
/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}