/*
**	www.sheppard-it.com
**	styles.css
*/

/*
** Desktop layout (> 875 pixel)
*/
@media all and (min-width: 875px) {
	body,
	html {
	 	/* Box model declarations */
		height: 100%;
		margin: 0;
		padding: 0;
		/* Other declarations */
		color: #777;
		font: large "Lucida Sans Unicode","lucida grande",sans;
	}

	h2 {
		/* Other declarations */
		font-size: x-large;
		letter-spacing: 5px;
		text-align: left;
		text-transform: uppercase;
	}
				
	/*
	** bgimg
	*/
	.bgimg-1, 
	.bgimg-2,
	.bgimg-3 {
		/* Positioning declarations */
		position: relative;
		/* Other declarations */	
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		opacity: 0.65;
	}
			
	/* https://pixabay.com/de/wolken-wolke-flugzeug-flug-310110/				  */
	/* CC0 Creative Commons, Freie kommerzielle Nutzung, Kein Bildnachweis nötig */
	.bgimg-1 {
	 	/* Box model declarations */
		min-height: 100%;
		/* Other declarations */	
		background-image: url(img/img_parallax1.jpg);		
	}

	/* https://pixabay.com/de/himmel-wolken-sonnenlicht-dunkel-690293/			  */
	/* CC0 Creative Commons, Freie kommerzielle Nutzung, Kein Bildnachweis nötig */
	.bgimg-2 {
	 	/* Box model declarations */
		min-height: 400px;
		/* Other declarations */	
		background-image: url(img/img_parallax2.jpg);
	}

	/* https://pixabay.com/de/himmel-wolken-landschaften-blau-264778/			  */
	/* CC0 Creative Commons, Freie kommerzielle Nutzung, Kein Bildnachweis nötig */
	.bgimg-3 {
	 	/* Box model declarations */
		min-height: 400px;
		/* Other declarations */	
		background-image: url(img/img_parallax3.jpg);
	}

	.imprint {
		/* Other declarations */	
		font-size: x-small;
	}


	/*
	** MobileMenu
	*/
	div#MobileMenu {
		/* Box model declarations */
		display: none;
	}


	#burger {
		/* Box model declarations */
		display: none;
	}


	/*
	** navi
	*/
	div.navi {
		/* Positioning declarations */
		position: relative;
		right: 0px;
		/* Box model declarations */
		padding: 10px;
		/* Other declarations */	
		color: #000;
		text-align: right;
	}
	
	div.navi span {
		/* Other declarations */	
		font-size: 11pt;
		color: #000;
		cursor:pointer;
	}

	/*
	** caption
	*/
	div.caption {
		/* Positioning declarations */
		position: absolute;
		top: 50%;
		left: 50%;
		/* Box model declarations */
		width: 875px;
		height: 124px;
		margin-left: -437.5px;
		margin-top: -62px;
		/* Other declarations */
		background-image: url(img/logo.png);
		border-collapse: collapse;
		font-size: 12pt;
		line-height: 12pt;
	}

	div.captiontop { 
		/* Positioning declarations */
		position:absolute;
		top:20px;
		left:100px;
	}

	div.captionbottom { 
		/* Positioning declarations */
		position:absolute;
		bottom:1px;
		left:360px;
		/* Other declarations */
		color:#000;
	}

	div.caption h1 {
		/* Box model declarations */
		padding: 0;
		margin: 0;
	    -webkit-margin-after: 0em;
		-webkit-margin-before: 0em;
		-webkit-margin-end: 0px;
		-webkit-margin-start: 0px;
		/* Other declarations */
		color: #000;
		font: 42pt "Lucida Sans Unicode","lucida grande",sans;
		letter-spacing: 2px;
	}


	/*
	** blocks
	*/
	#Consulting {
		/* Box model declarations */
		padding: 50px 80px;
		/* Other declarations */
		background-color: white;
		color: #777;
		text-align: justify;
	}
				
	#Development {
		/* Positioning declarations */
		position: relative;
		/* Box model declarations */
		padding: 50px 80px 10px 80px;
		/* Other declarations */
		background-color: #282E34;
		color: #ddd;
		text-align: justify;
	}

	#ProjectManagement {
		/* Positioning declarations */
		position: relative;
		/* Box model declarations */
		padding: 10px 80px 50px 80px;
		/* Other declarations */
		background-color: #282E34;
		color: #ddd;
		text-align: justify;
	}

	#Imprint {
		/* Positioning declarations */
		position: relative;
		/* Box model declarations */
		padding: 50px 80px;
		/* Other declarations */
		color: #ddd;
		background-color: #282E34;
		text-align: justify;
	}
	
	#Imprint a {
		/* Other declarations */
		color: #ddd;
		text-decoration: underline;
	}

	p.footer {
		/* Box model declarations */
		margin-top: 50px;
		/* Other declarations */
		text-align: center;
	}

}


/*
** Mobile layout (< 875 pixel)
*/
@media all and (max-width: 874px) {
	body,
	html {
		/* Box model declarations */
	 	height: 100%;
		margin: 0;
		padding: 0;
		/* Other declarations */
		color: #777;
		font: large "Lucida Sans Unicode","lucida grande",sans;
	}

	h2 {
		/* Other declarations */
		font-size: large;
		letter-spacing: 5px;
		text-align: left;
		text-transform: uppercase;
	}
				
	/*
	** bgimg
	*/
	.bgimg-1, 
	.bgimg-2,
	.bgimg-3 {
		/* Positioning declarations */
		position: relative;
		/* Other declarations */
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		opacity: 0.65;
	}
			
	.bgimg-1 {
		/* Box model declarations */
		min-height: 300px;
		/* Other declarations */
		background-image: url(img/img_mobile1.jpg);
	}

	.bgimg-2 {
		/* Box model declarations */
		min-height: 300px;
		/* Other declarations */
		background-image: url(img/img_mobile2.jpg);		
	}

	.bgimg-3 {
		/* Box model declarations */
		min-height: 300px;
		/* Other declarations */
		background-image: url(img/img_mobile3.jpg);
	}

	/*
	** navi
	*/
	div.navi {
		/* Box model declarations */
		display: none;
	}
	
	/*
	div.navi a {
		text-decoration: none;
		color: #000;
	}
	*/

	/*
	** MobileMenu
	*/
	div#MobileIcon { 
		/* Positioning declarations */
		position: absolute;
		top: 0;
		left: 10px;
		/* Other declarations */
		z-index: 1000;
	}

	#burger {
		/* Positioning declarations */
		position: relative;
		top:0;
		/* Box model declarations */
		width: 60px;
		height: 45px;	
		margin: 20px 0 10px 0;
		/* Other declarations */
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
	}

	#burger span {
		/* Positioning declarations */
		position: absolute;
		left: 0;
		/* Box model declarations */
		display: block;
		height: 4px;
		width: 100%;
		/* Other declarations */
		background: #222222;
		border-radius: 2px;
		opacity: 1;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}

	#burger span:nth-child(1) {
		/* Positioning declarations */
		top: 0px;
		/* Other declarations */
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}

	#burger span:nth-child(2) {
		/* Positioning declarations */
		top: 18px;
		/* Other declarations */
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}

	#burger span:nth-child(3) {
		/* Positioning declarations */
		top: 36px;
		/* Other declarations */
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}

	#burger.open span:nth-child(1) {
		/* Positioning declarations */
		top: -3px;
		left: 8px;
		/* Other declarations */
		background: #ffffff;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#burger.open span:nth-child(2) {
		/* Box model declarations */
		width: 0%;
		/* Other declarations */
		opacity: 0;
	}

	#burger.open span:nth-child(3) {
		/* Positioning declarations */		
		top: 39px;
		left: 8px;
		/* Other declarations */		
		background: #ffffff;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	#MobileMenu {
		/* Positioning declarations */
		position: absolute;
		left: -100%;
		/* Box model declarations */
		display: block;
		width: 100%;
		/* Other declarations */		
		background: rgba(0, 0, 0, 0.9);
		color: #ddd;
		line-height: 52px;
		cursor: pointer;
	}

	.MenuItem {
		/* Box model declarations */
		margin-left: 10px;
		margin-right: 10px;
		/* Other declarations */		
		color: white;
		border-bottom: 1px solid white;
	}

	.MenuMargin {
		/* Box model declarations */
		margin-bottom: 52px;
	}

	.MenuTitle {
		/* Box model declarations */
		padding-top: 7px;
		/* Other declarations */		
		letter-spacing: 2px;
		font: 12pt "Lucida Sans Unicode","lucida grande",sans;
	}

	.MenuSubtitle {
		/* Other declarations */		
		font: 7pt "Lucida Sans Unicode","lucida grande",sans;
	}


	/*
	** caption
	*/
	div.caption {
		/* Positioning declarations */
		position: absolute;
		top: 90px;
		left: 50%;
		/* Box model declarations */
		height: 47px;
		width: 330px;
		margin-left: -165px;
		/* Other declarations */		
		background-image: url(img/logo_mobile.png);
		border-collapse: collapse;
		font-size: 7pt;
		line-height: 8pt;
	}

	div.captiontop { 
		/* Positioning declarations */
		position: absolute;
		top: 10px;
		left: 37px;
	}

	div.captionbottom { 
		/* Positioning declarations */
		position: absolute;
		bottom: -2px;
		left: 120px;
		/* Other declarations */
		color: #000;
	}

	div.caption h1 {
		/* Box model declarations */
		padding: 0;
		margin: 0;
	    -webkit-margin-after: 0em;
		-webkit-margin-before: 0em;
		-webkit-margin-end: 0px;
		-webkit-margin-start: 0px;
		/* Other declarations */
		color: #000;
		font: 14pt "Lucida Sans Unicode","lucida grande",sans;
		letter-spacing: 2px;
	}

	

	/*
	** blocks
	*/
	#Consulting {
		/* Box model declarations */
		padding: 20px;
		/* Other declarations */
		background-color: white;
		color: #777;
		text-align: justify;
	}

	#Development {
		/* Positioning declarations */
		position: relative;
		/* Box model declarations */
		padding: 20px;
		/* Other declarations */
		background-color: #282E34;
		color: #ddd;
	}

	#ProjectManagement {
		/* Positioning declarations */
		position: relative;
		/* Box model declarations */
		padding: 20px;
		/* Other declarations */
		background-color: white;
		color: #777;
	}


	#Imprint {
		/* Positioning declarations */
		position: relative;
		/* Box model declarations */
		padding: 20px;
		/* Other declarations */
		background-color: #282E34;
		color: #ddd;
	}
	
	#Imprint a {
		/* Other declarations */
		color: #ddd;
		text-decoration: underline;
	}

}



/*
** Mobile layout small
*/
@media all and (max-width: 330px) {

	div.caption {
		/* Positioning declarations */
		left: 50%;
		/* Box model declarations */
		width: 280px;
		margin-left: -150px;
		/* Other declarations */
		background-image: none;
	}

	div.caption h1 {
		/* Other declarations */
		font: 12pt "Lucida Sans Unicode","lucida grande",sans;
	}

	div.captionbottom { 
		/* Positioning declarations */
		left: 103px;
	}
}