/* ==== Content arranged in Columns ==== */
.content {
    float:left;
    width: calc(100% - 240px);
    margin-top:120px; /*allow the header some space. it is fixed*/
    min-width: 500px;
    margin-bottom: 70px;/*guarantee some space for the 50px high footer (that does not care about the content height)*/
}

.shipSimple {
    float: left;
    min-width: 500px;
    display: block;
    margin-left: auto ;
	margin-right: auto ;
    margin-top: 30px;
}

.shipSimple h3 {
    text-align:center;
}

.shipSimple p {
  	width: 480px;
    text-align: justify;
    text-justify: inter-word;
	margin-left: auto ;
	margin-right: auto ;
     min-height:3em;/*enable a line break and still have tile layout*/
}

.tile{
	width: 480px;
	height: 216px;
	/*width:100%;
	height:100%;*/
	
	/* wenn das Bild sich vergrößert, darf das div nicht mitwachsen */
	overflow: hidden;
	
	/* Rahmen um das Div. Padding geht nicht */
	margin: 10px;
	
	/* center the div */
	margin-left: auto ;
	margin-right: auto ;
}

.tile img{
	/*width: 400px;
	height: 300px;*/
	width:100%;
	/*height:150%;*/
	margin-left: 0%;
	margin-top: -12%;

	
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;

}

.tile img:hover {
	margin-left: -10%;
	margin-top: -20%;
	width:120%;
	/*height:180%;*/
}

.tile img:hover {
	margin-left: -10%;
	margin-top: -20%;
	width:120%;
	/*height:180%;*/
}

.tile h3 {
    visibility:hidden;
	position:absolute;
	left:2rem;
	right:2rem;
	bottom:2rem;
	line-height: 1.2;
    color: #fff;
    z-index: 2;
}

.grid-item {
	width:400px;
	margin: 10px;
	overflow: hidden;
	box-sizing: border-box;
}



/**************** HEADER AND FOOTER *********************/

body
{
    background-image:url('bg.jpg');
	background-repeat:repeat-y;
	margin:0;
	overflow-x:hidden;
}

/* ====  Header  ===== */
.blackTitleHeader {
    /*	position: absolute;*/
        padding-top: 0.7em; /* for some reason the Title wants some 0.67em space above... */
        margin-top: 0px;
        height:100px; 
        width: calc(100%);/*100% does not work on smartphone*/
        background-color:black;
    
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        height:90px; 
        width: 100%;
    }
    
    div.headerTitleContainer {
        position:relative;
        margin-left:auto;
        margin-right:auto;
        width: 790px;
        height:100px;
    }
    div.headerTitle
    {
        /*position:fixed; old. Did not work on IE*/
        position:absolute;
        top:0px;
        left:0px;
        margin-right:100px;
        z-index:5;
        
        /*Batavia font*/
        font-family: batavia;
        font-weight:bold;
        font-size:3.0em;
        text-align: center;
        vertical-align: middle;
    
        /*color gradient*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    
        color:#0066CC;/*SevenStars-Blue*/
        -webkit-mask-image: -webkit-gradient(
        linear,
        left top, left bottom, 
        from(rgba(0,0,0,1)), /*black visible*/
        color-stop(25%, rgba(0,0,0,1)), /*in the upper quarter it's totally visible. In the middle the fading starts*/
        color-stop(75%, rgba(0,0,0,0)), /* fading stops in the lower quarter. After then it's invisible until the bottom*/
        to(rgba(0,0,0,0)) /*invisible*/
        );
        
        -moz-mask-image: -moz-linear-graddient(
        rgba(0,0,0,1) 25%, rgba(0,0,0,0) 75%
        );
    }
    
    div.headerTitleBackground{
        /*position:fixed; old. Did not work on IE*/
        position:absolute;
        top:0px;
        left:0px;
        margin-right:100px;
        z-index:4;
        
        /*Batavia font*/
        font-family: batavia;
        font-weight:bold;
        font-size:3.0em;
        text-align: center;
        vertical-align: middle;
    
        /*color gradient*/
        color:#FFFFFF;/*SevenStars-Blue*/
    }
    
    div.headerBlueLine {
        position: absolute;
        margin-top: 0px;
        height:10px; 
        width: 100%;
        background-color:lightskyblue;
    
        position: fixed !important;
        left: 0 !important;
        top: 100px !important;
        right: 0 !important;
        height:10px; 
        width: 100%;
    }
    
    div.headerRedFatLine {
        position: absolute;
        margin-top: 0px;
        height:30px; 
        width: 100%;
        background-color:red;
    
        position: fixed !important;
        left: 0 !important;
        top: 100px !important;
        right: 0 !important;
        height:10px; 
        width: 100%;
    }
    
    /* ====  Footer  ===== */
    div.footer {
        /*position:absolute; 
        bottom:0px;*/
        position: fixed !important;
        left: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        height:50px; 
        width: 100%;
        background-color:black;
        color: white;
        text-align: center;
        vertical-align: middle;
    }