/* Custom Stylesheet */
/**
 * Use this file to override the default styles
 *
 */



/* Table of contents
_______________________________________________________
- Grid
- Base Styles
- Corner ribbon
- Typography
- Navigation bar
- Links
- Buttons
- Images/Elements
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* Base Styles
_______________________________________________________ */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */

html {
  font-family: 'Noto Sans', sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;
   } 
body {
  padding:0;
  margin: 0;
  font-family: 'Noto Sans', sans-serif;} 
  

.header {
 overflow: hidden; 
  background-color: #00CCCC;  /* #333 Türkis*/
  position: relative; 
  top: 0;
  bottom: 0;
  /* margin-left: -70px;*/
  width: 100%;
  min-width: 350px;   /* 400px ist schon zu groß für Smartphone -< erzeugt overflow scrollbar */
  height: 215px;
  margin: 0rem;
}
.header a {
  float: left;
  display: block;
  color: #f0f0f0;
  text-align: left;
  padding: 12px 16px;
  text-decoration: none;
  font-size: 17px;
}
  
.header-text {
  font-weight: lighter;
  color: #f0f0f0;
  font-size: 1.4em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.1;
  letter-spacing: .2rem;
  font-weight: 400;
  font-family: 'Noto Sans', sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;
  height: 25%;   /* 30% */
  margin: .5rem 8rem .5rem 1rem;
  padding-right: 4rem; }
  
@media (min-width: 550px) {
.header-text {
  font-size: 1.4em; 
  line-height: 1.1;}	
	}

.header-text-gray {
  color: #666;
}
.header-text-white {
  color: #f0f0f0;
}

.header-text-subsite {
  float: left;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bolder;
}

.title {
  color: #666;
  text-transform: uppercase;  
  text-decoration: none;
  font-size: 1.0em;
  font-weight: 600;
  letter-spacing: .2rem;    
  padding: .5rem;
  margin-top: .5rem;
  margin-bottom: .5rem;
  }
  

.design-ref {
  display: block;
  font-size: 80%;
  text-align: center;
  margin-bottom: .5rem;
  margin-top: 10px; 
  font-size: 80%;
}


/* HOME button im Header */
.header-go-home {
	z-index:3000;
   text-decoration:none; 
   font-weight: lighter;
   color: #f0f0f0; 
   font-weight:400; 
   float: right; 
   font-size: 1.8rem; 
	letter-spacing: .5rem; 
	text-align:right; 
	margin-right: 3rem; 
	margin-top: -3rem;
	position: relative; 
	padding-bottom: .1rem;
}


footer {
  display: block;
  font-size: 80%;
  text-align: center;
  margin: 10px;} 


/* Corner ribbon
__________________________________________________ */
/* NEUE INTERNETSEITE ECKENBAND - START */
*{
  margin: 0;
  padding: 0;
}
h1{
  width: 500px;
  height: 100px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -275px;
  font-size: 3.2em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  line-height: 100px;
  color: #aaa;
}
h2{
  width: 500px;
  height: 100px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0 0 0 -225px;
  font-size: 1.6em;
  font-weight: 400;
  text-align: center;
  line-height: 100%;
  color: #bbb;
}

/* The ribbons */
.corner-ribbon{
	z-index: 50;
  width: 350px;
  background: #999;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
  letter-spacing: 1px;
  font-weight: 400;
  text-transform: uppercase;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* Füge Text hinzu */
.corner-ribbon:before {
    content: "Neue Internetseite";
    padding: 1rem;   /* Erzwinge Zeilenumbruch durch den Rand */
}
/* Custom styles */
.corner-ribbon.sticky{
  position: fixed;
}
.corner-ribbon.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}
/* Different positions */
.corner-ribbon.top-left{
  top: px;
  left: -50px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.corner-ribbon.top-right{
  top: 65px;
  right: -85px;
  left: auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.corner-ribbon.bottom-left{
  top: auto;
  bottom: 25px;
  left: -50px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-right{
  top: auto;
  right: -50px;
  bottom: 25px;
  left: auto;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
/* Colors */
.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;} 
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}


/* Mache das Band auf dem Smartphone dünner und kleiner */
@media (max-width: 749px) {
	/* The ribbons */
	.corner-ribbon{
	  white-space: pre-line;
	  width: 220px;
	  height: auto;
	  background: #e43;
	  position: absolute;
	  vertical-align: middle;
	  top: 25px;
	  left: -50px;
	  text-align: center;
	  line-height: 18px;
	  letter-spacing: 1px;
	  font-weight: 500;
	  font-size: 1.4rem;
	  text-transform: uppercase;
	  color: #f0f0f0;
	  padding: .5rem;
	  transform: rotate(-45deg);
	  -webkit-transform: rotate(-45deg);
	}
	/* Füge Text hinzu */
	.corner-ribbon:before {
	    content: "Neue Internetseite";
	    padding: 1rem;   /* Erzwinge Zeilenumbruch durch den Rad */
	}
	/* Custom styles */
	.corner-ribbon.sticky{
	  position: fixed;
	}
	.corner-ribbon.shadow{
	  box-shadow: 0 0 3px rgba(0,0,0,.3);
	}
	/* Different positions */
	.corner-ribbon.top-left{
	  top: 20px;
	  left: -50px;
	  transform: rotate(-45deg);
	  -webkit-transform: rotate(-45deg);
	}
	.corner-ribbon.top-right{
	  top: 35px;
	  right: -50px;
	  left: auto;
	  transform: rotate(45deg);
	  -webkit-transform: rotate(45deg);
	}
	.corner-ribbon.bottom-left{
	  top: auto;
	  bottom: 25px;
	  left: -50px;
	  transform: rotate(45deg);
	  -webkit-transform: rotate(45deg);
	}
	
	.corner-ribbon.bottom-right{
	  top: auto;
	  right: -50px;
	  bottom: 25px;
	  left: auto;
	  transform: rotate(-45deg);
	  -webkit-transform: rotate(-45deg);
}
}

/* Aufruf in HTML mit:
<div class="corner-ribbon top-right sticky blue">Neue Internetseite</div>
<div class="corner-ribbon bottom-left sticky orange">Hello</div>
<div class="corner-ribbon bottom-right sticky green shadow">Hello</div>
<div class="corner-ribbon top-left sticky red shadow">Hello</div>

<h1>Corner Ribbons</h1>
<h2>(with custom settings and all...)</h2> */

/* Corner ribbons - ENDE */
/* NEUE INTERNETSEITE ECKENBAND - ENDE */


/* Danksagung am Seitenende */
.danksagung {
  text-align:center; 
  width: 100%;
  margin: auto; 
  margin-top: .5rem;
  border-radius: 50px;
  font-size:1.2rem;
}
/* For devices larger than 550px */
@media screen and (min-width: 550px) { 
  .danksagung {
  	width: 100%;
  	text-align: center;
  	margin: auto;  
  }
}


/* Typography
_______________________________________________________*/


/* Navigation bar (Bootstrap)
_______________________________________________________ */
/* Override list style of Skeleton because browser friendly
navigation bar needs submenus without margins */
.nav .sub li {
  margin-bottom: 0; } 
  
/* For devices larger than 1000px (Desktop) */
@media (min-width: 750px) {
  /* Navbar */
  .navbar-spacer {
    background: #666;
  }
}




/* Browser friendly navigation bar no script, pure HTML START
--> timos-nonjs-nabar.css */

/* Navigation bar as a formdropdown menu START 
___________________________________________________ */
/* https catalin[dot]red[slash]making-html-dropdowns-not-suck/ */
/* Naming convention BEM http bem[dot]info[slash]method/
(Block) .custom-dropdown            = The main component
(Element) .custom-dropdown__select  = Descendant of .custom-dropdown
(Modifier) .custom-dropdown--*      = Different state of .custom-dropdown */

 
/* Show dropdown menu only on small devices */
/* Larger than mobile */
@media (min-width: 750px) {
.nav-mini-only {    /* show dropdown menu only on small devices */
  display: none;
  visibility: hidden;}  
}

@media (max-width: 749px) {
.nav-maxi-only {    /* show browser friendly navbar only on large devices */
  display: none;
  }  
}


           
           
.custom-dropdown {  /* dropdown menu */
   background-color: transparent;
   border-radius: 5px;
   padding-right: 0em;
   margin-bottom: .5rem;
   margin-right: 0;
   max-width: 300px;   /* fill the screen = 100% */
   float: none;
}

.custom-dropdown--large {
	font-size: 1.5em;
}

.custom-dropdown--small {
	font-size: .7em;
}

.custom-dropdown__select{   /* dropdown menu - size and text */
   width: 100%;  /* prevents overflow */
	font-size: inherit; /* inherit size from .custom-dropdown */
	/*height: auto;   /* resize dropbdown box when the font size increases */
	padding: .5em; /* add some space*/
	margin: 0; /* remove default margins */
}

/* When window maximized */
.custom-dropdown__select--white {

	background-color: #f0f0f0;
	color: #444;    /* #444 dark anthrazit */
   float: none; 

}
.custom-dropdown__select--turquoise {
	background-color: turquoise;
	color: #666;    
}
.custom-dropdown__select--anthrazit {
	background-color: #666;
	color: #f0f0f0;    
}
.custom-dropdown__select--black {
	background-color: #000;
	color: #f0f0f0;    /* #444 */
}

@supports (pointer-events: none) and
	  ((-webkit-appearance: none) or
	  (-moz-appearance: none) or
	  (appearance: none)) {

	.custom-dropdown {
		position: relative;
		display: inline-block;
		vertical-align: middle;
	}

	.custom-dropdown__select {
		background-color: #f0f0f0;
		padding-right: 2.5em; /* accommodate with the pseudo elements for the dropdown arrow */
		border: 0;
		border: solid 2px #666;
		border-radius: 3px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;    
	}

	.custom-dropdown::before,  /*  Small dropdown arrow */
	.custom-dropdown::after {
	   z-index:50;
		content: "";
	   color: #666;    /* #444 dark anthrazit */
		position: absolute;
		pointer-events: none;
	}

	.custom-dropdown::after { /*  Overlay custom dropdown arrow */
			content: "\25BC";
			height: 1em;
			font-size: .725em;
			line-height: 1;
			right: 1.2em;
			top: 50%; 
			margin-top: -.5rem;
		}

	.custom-dropdown::before { /*  Custom dropdown arrow cover */ 		
		width: 2em;
		right: 0; top: 0; bottom: 0;
		border-radius: 0 3px 3px 0;
	}

	.custom-dropdown__select[disabled] {
		color: rgba(0,0,0,.3);
	}

	.custom-dropdown.custom-dropdown--disabled::after {
		color: rgba(0,0,0,.1);
	}

	/* White dropdown style */   /* small arrow as an overlay */
	.custom-dropdown--white::before {
		background-color: transparent;
		z-index: 20;
		border-left: 1px solid rgba(0,0,0,.1);  /* Trennbalken */
		height: auto;
	}

	.custom-dropdown--white::after {  /* Small dropdown arrow */
		color: rgba(0,0,0,.9);
	}
	
	/* Turquoise dropdown style */
	.custom-dropdown--turquoise::before {
		background-color: turquoise;
		border-left: 1px solid rgba(0,0,0,.1);
	}

	.custom-dropdown--turquoise::after {
		color: rgba(0,0,0,.9);
	}
	
   /* Anthrazit dropdown style */
	.custom-dropdown--anthrazit::before {
		background-color: #666;
		border-left: 1px solid rgba(0,0,0,.1);
	}

	.custom-dropdown--anthrazit::after {
		color: rgba(0,0,0,.9);
	}
	
	 /* Black dropdown style */
	.custom-dropdown--black::before {
		background-color: #000;
		border-left: 1px solid rgba(0,0,0,.1);
	}

	.custom-dropdown--black::after {
		color: rgba(0,0,0,.9);
	}

	/* FF only temp fix */
	@-moz-document url-prefix() {
		.custom-dropdown__select { padding-right: .9em }   /* Distance of dropdown text the box margins */
		.custom-dropdown--large .custom-dropdown__select { padding-right: 1.3em }
		.custom-dropdown--small .custom-dropdown__select { padding-right: .5em }
	}
/* Navigation bar dropdown menu END */


/* Portfolio boxes / Images
_______________________________________________________ */  
 /* Portfolio margins */
/* Images with small text on main page */
		 .portfolio-margins {
           border-radius: 10px;
           padding-bottom: .5em; 
           padding-top: 0em; 
           margin-bottom: 2em;
           margin: 2rem;
           padding: 0 .5em; 
           text-align: left;
           border: solid 2px #00CCCC;   /* transparent */
        }  
      .portfolio-headings {
          margin-bottom: 0; 
          margin: 1rem .1rem;
          text-align: center; 
          color: #666;
          font-size: 1.5em; 
          line-height: 1.6;  
          letter-spacing: 0;
         }  	
      @media (max-width: 749px) {
			.portfolio-headings { 
			 font-size: 1.4em;
			}
		 }
		 


	/* Überschreibe Bilder-Design der Hauptseite für die neuen Container auf dieser Seite */  
	  .portfolio-images {
      width: 1auto;
      margin-top: 2.5em;	
		 *height: 650px; /* actual img height - IE7 */
      border-radius: 10px;
	    }    
	    
  		  @media (max-width: 800px) {
		 .portfolio-images { 
		 position: relative;
		 *height: 650px; /* actual img height - IE7 */
		 background-position: 50% 50%;
		  }       
     
		 .fluid-ratio-portfolio-image { 
		    max-width: 100%; /* Don't use size. The images will overlap. */
		    *height: 150px; /* actual img height - IE7 */
		    background-repeat: no-repeat;
		    /*background-image: url(images/Urlaub_france_2005_06.10.2005_15-57-24-4.jpg);*/
		    background-size: cover;
		    background-position: 5% 5%;
	   	}
	    .fluid-ratio-portfolio-image:after {
		    content: " ";
		    display: block; 
		    width: 100%; 
		    padding-top: 0; /* slope 4.918%*/
		    height: 202.786px; /* start height */
		    max-height: 150px 250px
		   }
		  }
		  

		
		  @media (min-width: 750px) {
			.fluid-ratio-portfolio-image { 
			 *height: 650px; /* actual img height - IE7 */
			 background-position: 50% 50%;
			}
			.fluid-ratio-portfolio-image:after {
			 padding-top: 4.918%; /* slope */
			 min-height: 600px; /* start height 202.786px*/
			 max-height: 750px;
			}
		  }  

 
		 
/* Text in Portfolio-Box */
.portfolio-text {
   float: right; /* Put the text before the button (mobile only) */)
   padding: .5rem 1rem; 
          padding-bottom: 50%; /* Align vertically in the middle */
       padding-top: .5rem;
       padding-bottom: .5rem;
   border-radius: 10px;	
}
/* Portfolio button */
/* Put the buttons at the end of the box (mobile only) */
.portfolio-button {
   float: left;
   padding: .5rem 1rem;
}



/* Buttons
_______________________________________________________ */

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	 margin: .5rem;
	 font-size: 1.4rem;
    padding: 1em;
    width: 95%;
	 margin: auto;
    display: inline-block;
    text-align: center;
 }
  
  
  
.button.button-primary,
 button.button-primary,
 input[type="submit"].button-primary,
 input[type="reset"].button-primary,
 input[type="button"].button-primary {
   margin: .5rem;
   font-size: 1.4rem;
   padding: 1em;
   height: auto;
   white-space: normal;
 }
	 


/* Make normal button as big as the primary button */
.button.button-primary-transparent,
button.button-primary-transparent,
input[type="submit"].button-primary-transparent,
input[type="reset"].button-primary-transparent,
input[type="button"].button-primary-transparent {
  white-space: pre-wrap;   /* passe Box an Textlänge an */
  color: #666;
  font-size: 1.4rem;
  background-color: transparent;   /* #33C3F0; light blue */ 
  border-color: #00CCCC; }     /* #33C3F0 */
.button.button-primary-transparent:hover,
button.button-primary-transparent:hover,
input[type="submit"].button-primary-transparent:hover,
input[type="reset"].button-primary-transparent:hover,
input[type="button"].button-primary-transparent:hover,
.button.button-primary-transparent:focus,
button.button-primary-transparent:focus,
input[type="submit"].button-primary-transparent:focus,
input[type="reset"].button-primary-transparent:focus,
input[type="button"].button-primary-transparent:focus {
  color: #666;
  background-color: transparent;  /* #1EAEDB */
  border-color: #1EAEDB; }


/* Smaller than phablet (also point when grid becomes active) */
@media (max-width: 549px) {
button,
.button {
  margin: 1rem; 
  width: 75%;
  text-align: center;
  	  margin: auto;
     display: block;
 }
}



    
  
/* Images / Elements
____________________________________________________ */
/* Do not use 2 x 100 %. This will stretch the window to fit
into the window */
/* Scale image width to maximum */
img {
    max-width: 100%;
    max-height: auto;
}


/* Header image cover the complete area with fixed
height and a focus point */
.fluid-ratio-resize1 { 
 max-width: 100%; /* 960px actual img width */
 width: auto\9; /* IE8 */
 *height: 150px; /* actual img height - IE7 */
 background-repeat: no-repeat;
 /*background-image: url(images/Urlaub_france_2005_06.10.2005_15-57-24-4.jpg);*/
 background-size: cover;
 background-position: 60% 35%;
 z-index: 30;
}
.fluid-ratio-resize1:after {
 content: " ";
 display: block; 
 width: 100%; 
 padding-top: 0; /* slope 4.918%*/
 height: 202.786px; /* start height */
 max-height: 150px 250px
}

@media (min-width: 750px) {
	.fluid-ratio-resize1 { 
	 *height: 650px; /* actual img height - IE7 */
	 background-position: 50% 35%;
	}
	.fluid-ratio-resize1:after {
	 padding-top: 4.918%; /* slope */
	 min-height: 600px; /* start height 202.786px*/
	 max-height: 750px;
	}
}

/* Call it with:
<div class="fluid-ratio-resize1"  
  document.getElementById("fluid-ratio-resize1").style.backgroundPosition = "center top";
  style="border: double 4px lightblue;
  background-image: url(images/Urlaub_france_2005_06.10.2005_15-57-24-4.jpg);">
</div> */

/* Bild fixiert, Content fließt drumherum. Größe von Bild bleibt gleich */
.cover-fluid {
    width: 100%;
    max-width: 100%;
    height: 130px;
    max-height: 200px;
    background-image: url('images/Urlaub_france_2005_06.10.2005_15-57-24-4.jpg');
    background-repeat: no-repeat;
    /* background-size: cover; */  /* opposite to background-attachment: fixed; */
    background-attachment: fixed;  /* fix the image and scroll the others */
    /*border: 1px solid red;*/
    background-position: 47% 50%;
}
/* Call it with:
<div class="cover-fluid" style="border: double 1px lightblue;" 
  document.getElementById("cover-image-fluid").style.backgroundPosition = "center top"; ></div>*/

/* END Flowing images */



/* Scmale image orientation */
.portrait {
	 max-width: 100%;
    max-height: 80px;
    width: 30px;
}

.landscape {
	max-width: 100%;
   max-height: 30px;
   max-width: 80px;
}

.square {
    max-width: 100%;    
    max-height: 75px;
    width: 75px;
}


/* scale image at the top of the site */
/* Needs to be optimized */
.image-top {
  max-width: 100%;
	position: relative;
  vertical-align: middle;
  font-weight: bold; 
  max-height: 100%;
  width: auto;
  margin: auto;
  padding: 0;} 
  }
  
/* Keep ratio of image and define initial point of view within the image.
 Use fixed image and scroll the transparent background above 
 the image and define initial picture focus. */
.cover-image-fixed {
    width: 100%;
    height: 400px;
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;  /* fix the image and scroll the others */
    /*border: 1px solid red;*/
    background-position: 30% 50%;  /* Upper left corner is 0% 0% */
}
/* Call it with: <div class="cover-image-fixed"></div> */ 
 
/* Keep ratio of image and scroll image with all the others */
.fluid-ratio-resize { 
 max-width: 960px; /* 960px actual img width */
 *height: 150px; /* actual img height - IE7 */
 /*background-image: url(images/Urlaub_france_2005_06.10.2005_15-57-24-4.jpg);*/
 background-repeat: no-repeat;
 background-size: cover;
 background-position: 40% 35%;
}
.fluid-ratio-resize:after {
 content: " ";
 display: block; 
 width: 100%; 
 padding-top: 4.918%; /* slope */
 height: 202.786px; /* start height */
 max-height: 150px
}
/* Call it with: <div class="fluid-ratio-resize"></div> */ 

  



/* Position Text in image */
.image-container {
    position: relative;
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-size: 2.2em;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    line-height: 100px;
}
.bottom {
    position: absolute;
    width: 60%;
    margin: 0 auto;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-size: 2.2em;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    line-height: 20px;
}
.play-rahmen-white {   /* Zeichne Rahmen um den Play-Button */
     width: auto; 
     height:auto; 
     padding:1rem .5rem 1rem 1rem; 
     color: #f0f0f0; 
     border: solid 3px #00CCCC;
     border-radius: 10px;
}
.play-rahmen-blue {   /* Zeichne Rahmen um den Play-Button */
     width: auto; 
     height:auto; 
     padding:1rem .5rem 1rem 1rem; 
     color: #00CCCC; 
     border: solid 3px #f0f0f0;
     border-radius: 10px;
}
.img-text { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}


 
 
/* Resize automatically */	
/* resize buttons also on tablet size */
@media (max-width: 400px) {
.ressi
 {
   max-width: 95%;
   white-space: pre-line;  /* allow wrapping of text within the button box */
   font-size: 1.0rem;
   text-align: center;
	margin: auto;
   display: inline-block;
   height: auto;   
   text-align:center;   
   }
 }
 @media (max-width: 600px) {
.ressi
 {
   max-width: 90%;
   white-space: pre-line;  /* allow wrapping of text within the button box */
   font-size: 1.2rem;
   text-align: center;
	margin: auto;
   display: inline-block;
   height: auto;  
   text-align:center;  
   }
 }
.ressi {
 min-width: 85%;
 white-space: pre-line;  /* allow wrapping of text within the button box */
 font-size: 1.2rem;
 text-align: center;
 margin: auto;
 display: inline-block;
 height: auto; 
 padding-top: .1rem;    
 } 
 
 
 
/* HTML:
<div class="container">
  <img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="center">Centered</div>
</div> */

/* Position Text in image - ENDE */



/* Utilities
____________________________________________________ */
/* Text within the tables flows out of the box.
The workaround is to hinder overflow*/
/*.code-example-body {
  overflow: auto;
  table-layout: fixed;
  width: 100% 
  }*/
  



/* Misc
____________________________________________________ */
/* horizontal line */
/*hr {
  max-width: 90%;
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; } /* default #E1E1E1 */


/* Media Queries
____________________________________________________*/
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile 
@media (min-width: 400px) {}

 Larger than phablet (also point when grid becomes active) 
@media (min-width: 550px) {}

 Larger than tablet 
@media (min-width: 750px) {}

 Larger than desktop 
@media (min-width: 1000px) {}

Larger than Desktop HD 
@media (min-width: 1200px) {} */