/* css3 stylesheet */

#css3div01 img {
  float: left;
  padding: 5px;
  margin-right: 30px;
  background-color: yellow;
  border-radius: 30px 0 30px 0;
}

#css3div01 img.noborder {
  padding: 0;
  border: none;
}

#css3div01 img.elipse {
  padding: 0;
  border: none;
  border-radius: 150px 150px 0px 0px / 80px 80px 0px 0px;
}

/* Responsive elements */

/* First ensure that all HTML elements have the box-sizing property set to border-box. 
  This makes sure that the padding and border are included in the total width and height of the elements. */
* {
    box-sizing: border-box;
}

body {
  background-color: white;
}

/* For width 940px and larger keep to 940px window: */
@media only screen and (min-width: 940px) {
  #container {
    width: 940px;
    margin-left: auto;
    margin-right: auto;
  }
}


.red {
  background-color: red;
}
.blue {
  background-color: blue;
  color: white;
}
.green {
  background-color: green;
}

/* The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, 
  and other elements will be placed as if the columns do not exist. 
  To prevent this, add a style that clears the flow: */
.row::after {
    content: "";
    clear: both;
    display: table;
}

/*  All these columns should be floating to the left, and have a padding of 10px all round: */
[class*="col-"] {
    float: left;
    padding: 10px;
    border: none;
}

/* Design for mobile first (max width 600px) - therefore mobile column width will be 100% */
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (max-width: 600px) {
    /* For phones: */
    .headertablet, .headerdesk {display: none;}
}   
    
@media only screen and (min-width: 601px) and (max-width: 768px) {
    /* For tablets: */
     /* 12 overlapping columns equally spaced */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
    .headerphone, .headerdesk {display: none;}
}
@media only screen and (min-width: 769px) {
    /* For desktop: */
    /* 12 overlapping columns equally spaced */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    .headertablet, .headerphone {display: none;}
}



/* Set images to scale downwards only - never bigger than actual image size */
 img {
    max-width: 100%;
    height: auto;
    border: none;
}


/* Navigation */
/* Adapted from an idea by http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu/ */

nav {
  margin: 0 0 5px 0;
  padding: 0;
  background-color: #254441;
}
	  
nav:after {
  content: "";
  display: table;
  clear: both;
}
	 
nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
	 
nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #254441;
}
	 
nav a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 14px;
  line-height: 30px;
  text-decoration: none;
}
	 
nav ul li ul li:hover { background: #000000; }
	 
nav a:hover { background-color: #000000; }
	 
nav ul ul {
  display: none;
  position: absolute;
  top: 30px;
}
	 
nav ul li:hover > ul { display: inherit; }
	 
nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}
	 
nav ul ul ul li {
  position: relative;
  top: -30px;
  left: 170px;
}
	 
li > a:after { content: ' +'; }

.toggle, [id^=drop] {
 display: none;
}

li > a:only-child:after { content: ''; }

@media all and (max-width: 600px) {
  nav { margin: 0; }
  .toggle + a,
  .menu { display: none; }
  .toggle {
    display: block;
    background-color: #254441;
    padding: 0 20px;
    color: #FFF;
    font-size: 14px;
    line-height: 30px;
    text-decoration: none;
    border: none;
  }
  .toggle:hover { background-color: #000000; }
  [id^=drop]:checked + ul { display: block; }
  nav ul li {
    display: block;
    width: 100%;
  }
  nav ul ul .toggle,
  nav ul ul a { padding: 0 40px; }
  nav ul ul ul a { padding: 0 80px; }
  nav a:hover,
  nav ul ul ul a { background-color: #000000; }
  nav ul li ul li .toggle,
  nav ul ul a { background-color: #212121; }
  nav ul ul {
    float: none;
    position: static;
    color: #ffffff;
  }
  nav ul ul li:hover > ul,
  nav ul li:hover > ul { display: none; }
  nav ul ul li {
    display: block;
    width: 100%;
  }
  nav ul ul ul li { position: static;}
}
	 
@media all and (max-width: 330px) {
  nav ul li {
    display: block;
    width: 94%;
  }
}