/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

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

html {
    line-height: 1;
    font-family: 'Open Sans',Arial, 'sans-serif';
    font-weight: 300;
}

body {
    min-width: 940px;
        background-color: #f0f5f8;
        font-size: 0.9em;
}

strong, b {
    font-weight: 600;
}

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

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

img {
    vertical-align: middle;
}

h1 {
    font-family: 'Dosis', sans-serif;
    margin: 0 0 2% 0;
}

h2 {
    font-size: 1.2em;
    font-weight: 600; 
}

h3 {
    font-size: 1em;
    font-weight: 400;
    margin: 0;
}

p {
    line-height: 1.4;
}

a {
        color: #f4a314;
                text-decoration: none;
}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.box-sized {
    box-sizing: border-box;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
}

.view-job {
    display: none;
}

.container {
    margin: 25px auto;
    width: 940px;
        background-color: #ffffff;
    }

/* Base Grid */
.row {
    *zoom: 1;
}
.row:before,
.row:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.row:after {
    clear: both;
}

/* Global */
.row .grid_4,
.row .grid_6,
.row .grid_8,
.row .grid_12 {
    float: left;
}

.row .grid_4 {
    width: 33.3333%;
}

.row .grid_6 {
    width: 46%;
}

.row .grid_8 {
    width: 66.6666%;
}

.row .grid_12 {
    width: 100%;
}

/* Images & Other Objects */
img, object, embed {
    max-width: 100%;
}

img {
    height: auto;
}

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

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

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

/* Header */
.logo-top {
    margin-bottom: 2%;
}

.logo-bottom {
    margin-top: 2%;
}

.logo-ct {
            text-align: center;
        height: 120px;
}
  
.logo-ct > img{  
    height: inherit;
}  
.map {
    background: #FAF5F5;
}

header .header-info {
        background-color: #000000;
            color: #ffffff;
        position: relative;
    padding: 3% 0;
    line-height: 1.1;
}

#job-header-info {
    display: block;
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-weight: 400;
}

#job-header-info li {
    margin: 0 10px 10px 10px;
    background: transparent url("https://job.otto.de/sap/bc/bsp/sap/zb_or/images/collins/sprite_icons.png") no-repeat left top;
    padding-left: 16px;
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
}

#job-header-info .job-contract-type {
    padding-left: 0px;
    background: #fff;
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px;
    color: #4f5d60;
    padding: 3px 4px;
    text-transform: uppercase;
    font-size: 0.6em;
}

#job-header-info .job-contract-type.contract-dark-icon {
    background: #4f5d60;
    color: #fff;
}

#job-header-info .job-location {
        color: #ffffff;
    }

/* Light coloured icons */
#job-header-info .location-light-icon {
    background-position: 0 0;
}

#job-header-info .experience-light-icon {
    background-position: 0 -19px;
}

#job-header-info .date-light-icon {
    background-position: 0 -40px;
}

/* Dark coloured icons */
#job-header-info .location-dark-icon {
    background-position: 0 -59px;
}

#job-header-info .experience-dark-icon {
    background-position: 0 -79px;
}

#job-header-info .date-dark-icon {
    background-position: 0 -99px;
}

   {
    padding-bottom: 0;
}

/* Content */
.section {
    padding: 30px 60px;
}

.section-button {
    padding: 50px 0px 10px 0px;
}

.section h2, .section .section-content__title {
        color: #4f5d60;
            }

.section p, .section .section-content__body {
        color: #4f5d60;
            }

.section ul {
        color: #4f5d60;
                line-height: 1.4;
    padding-left: 20px;
}

.section-border {
        border-bottom: 1px solid #050505;
    }


#company-details .section {
    border-bottom: none;
}

#posted-by {
        color: #000000;
            background-color: #FFFFFF;
        -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 20px;
}

#location {
    height: 200px;
}

#location.grid_8 {
    padding-left: 30px;
}

#posted-by.grid_4 {
    height: 200px;
}

#posted-by .avatar {
    /**  margin: 18px auto;
    width: 70px;
    height: 70px;**/
    float:left;
}

#posted-by .avatar img {
    /* width: 100%;*/
    height: 160px;
    /**-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;**/
}

#posted-by .job-owner {
    /**text-align: center;   **/ 
    width:300px;
    float:left;
    padding-left:15px;
}

#posted-by .name {
    display: block;
    font-weight: 600;
}

#posted-by .position {
    display: block;
}

#map_canvas {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.btn {
    text-align: center;
        color: #FFFFFF;
        padding: 0.6em 4em;
    border: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
            -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
        background-color: #050505;
    }

a.btn:hover {
        color: #ffffff;
                    background-color: #0085ca;
    }

#company-wrap {
    padding-bottom: 60px;
    border-bottom: 1px solid #000000;
}

/* Footer */
footer {
    font-weight: 600;
}

footer section {
    border-bottom: 1px solid #edf0f0;
}

footer .share {
    display: block;
    float: left;
    margin-left: 150px;
}

footer ul {
    float: right;
    padding: 0 !important;
    margin: -5px 0 0 0;
    list-style: none;
}

    footer ul li {
        float: left;
        width: 25px;
        margin: 0 0 0 12px;
        background-color: #5e696e;
        position: relative;
        -webkit-border-radius: 2px; 
        -moz-border-radius: 2px; 
        border-radius: 2px; 
    }

footer .share img {
    float: left;
    position: relative;
    width: 100%;
    height: auto;
    z-index: 2;
}

.social-share-list .facebook {
    background-color: #3b5998;
}

.social-share-list .linkedin {
    background-color: #0e76a8;
}

.social-share-list .google {
    background-color: #dd4b39;
}

.social-share-list .twitter {
    background-color: #55acee;
}

.social-share-list .xing {
    background-color: #126567;
}

footer .section-footer {
    padding: 30px 60px;
    font-size: 0.8em;
    font-weight: 100;
    color: #7a7b7b;
    text-align: right;
}
  
.logo-image,
.header-image {
    display: none;
}


/* =============================================================================
   768px Grid
   ========================================================================== */
@media only screen and (min-width: 768px) and (max-width: 995px) {
	
	body {
        min-width: 750px;
    }

	/* Container | 768px */
	.container {
        width: 750px;
    }
    
    footer .share {
        margin-left: 65px;
    }
}

/* =============================================================================
   Less than 768px
   ========================================================================== */
   
@media only screen and (max-width: 767px) {
	
	body{
        min-width:0;
        font-size: 0.8em;
    }
	
    h1 {
        font-size: 1.3em;
    }
    
	/* Container */
	.container { margin:0 auto; width:456px; overflow:hidden; }
	
	/* Global */
    .row .grid_4,
	.row .grid_6,
    .row .grid_8,
	.row .grid_12	{
		width: 100%;
		float: none;
	}
    
    .section {
        padding: 11px 24px;
    }
    
    .section-button {
        padding: 35px 0px;
    }
    
    #company-wrap {
        padding-bottom: 30px;
    }
    
    #posted-by {
        width: 350px;
        margin: 0 24px 24px;
        text-align: left;
        padding-left: 38px;
        position: relative;
    }

    #posted-by.grid_4 {
        margin: auto;
        width: auto;
        height: auto;
    }

    #location.grid_8 {
        padding-left: 0;
    }
    
    h3 {
        margin-left: 6px;
    }
        
    #posted-by .avatar {
        margin: 18px 0;
        width: 70px;
        height: 70px;
    }

    #posted-by .job-owner {
        position: absolute;
        top: 70px;
        left: 131px;
        width: 247px;
    }
    
    footer .social {
        margin-top: 25px;
        font-size: 1.2em;
    }
    
    footer .share {
        margin: 0;
    }
    
    footer .section-footer {
        padding: 30px 24px;
    }
        

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* =============================================================================
   Less than 480px
   ========================================================================== */
@media only screen and (max-width: 479px) {
	
    body{
        min-width:0; 
    }
    
	/* Container */
	.container { width:320px; }
	
	/* Global */  
    .section {
        padding: 0px 13px;
    }
    
    header .header-info ul {
        float: none;
        overflow: hidden;
        margin-top: 10px;
    }

    header .header-info ul:nth-child(2) {
        margin-left: 0;
    }
    
    #company-wrap {
        padding-bottom: 22px;
    }
    
    #posted-by {
        width: 238px;
    }