body {
  padding: 2em;
  background: url("../images/tsc-background.jpg") no-repeat center center fixed;
  background-size: cover;
}

.layout {
  display: flex;
  flex-flow: row wrap;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  /*text-align: center;*/
  border: 1px solid black;
  box-shadow: 3px 3px 5px #333333;
  min-width: 80px;
  min-height: 80px;
}

.layout > * {
  padding: 10px;
  flex: 1 100%;
}

input#responsive-nav,
label.responsive-nav-label {
  display: none;
}

.breadcrumps {
	/*background: #82b721;*/
	background: #3168D4;
  clear: both;
}

.mod-languages {
    float: left;
}

div.mod-languages img {
	box-shadow: 2px 2px grey;
}

.search {
    float: right;
}

div.mod-languages ul {
  flex-flow:unset;
}

.topnavigation {
  box-sizing: border-box;
  float: left;
  width: 100%;
  /*background: #3a3a3a;*/
  background: #5482DC;
  font-size: 17px;
}

.topnavigation a {
  display: block;
  color: darkblue;
  text-decoration: none;
}

.topnavigation  ul {
  margin: 0;
  padding: 0;
  z-index: 10;
}

.navigation ul li {
  position: relative;
  float: left;
  list-style: none;
}
 
.navigation ul li:hover {
  /*background: #4096ee;*/
  background: lightblue;
}
 
.navigation ul li a {
    padding: 20px;
}

.navigation ul ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  background: #88cee5;
  /*background: #333;*/
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
 
.navigation ul ul li {
  float: none;
  width: 200px;
  border-bottom: 1px solid #555;
}
 
.navigation ul ul li a {
  padding: 10px 20px;
}

.navigation ul li:hover > ul {
  top: 100%;
  left: 0;
}

.navigation ul ul li:hover > ul {
  top: 0;
  left: 200px;
}

aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  /*align-items: center;*/
  flex-flow: column wrap;
}

aside a {
  text-decoration: none;
  display: block;
  padding: 0.2em;
  color: black;
}

aside a:hover {
  text-decoration: none;
  display: block;
  font-weight: bold;
  /*color: violet;*/
}

.left {
  /*background: #6cc06c;*/
  background: #1150CC;
  width: 10%;
  float: left;
}

.left-2 {
  border: 1px solid #52603c;
  background-color: #5482DC;
  border-radius: 10px/10px;
  padding: 10px;
}

.left-3 {
    border: 1px solid #52603c;
    background-color: #5482DC;
    border-radius: 10px/10px;
    padding: 10px;
    margin-top: 10px;
}

.left-menu li {
  border: 1px solid black;
  box-shadow: 3px 3px 5px #333333;
  margin-bottom: 5px;
  width: 140px;
  height: 30px;
  background-color: #62881a;
}

.left-menu li:hover {
  background-color: #9ed92c;
}

.left-menu li:first-of-type {
  margin-top: 10px;
}

.header {
  /*background: #82b721;*/
  background: #3168D4;
}

.header img {
  float: right;
  width: 12%;
  /*clear:both;*/
}

.banner img{
  float: left;
  width: 85%;
}

.footer {
  /*background: #279033;*/
  background: #5482DC;
}

.content {
  text-align: left;
  background: #d4e3fe;
}

.right {
  /*background: #6cc06c;*/
  background: #1150CC;
  width: 10%;
  float: left;
}

.right-1 {
  border: 1px solid #52603c;
  background-color: #5482DC;
  border-radius: 10px/10px;
  padding: 10px;
}

.right-2 {
  border: 1px solid #52603c;
  background-color: #5482DC;
  border-radius: 10px/10px;
  padding: 10px;
  margin-top: 10px;
}

.next-events {
	/*list-style: disc;*/
}

.event-name {
	background-color: #3168d4;
  	font-weight: bold;
    font-size: 14px;
  	/*text-decoration: underline;*/
	text-align:left;
}

.event-duration{
  	background-color: #7fa4ec;
  	text-indent:20px;
}

.event-location{
  	background-color: #7fa4ec;
  	text-indent:20px;
}

.fb-image{
  width:13vw;
}


img,iframe {
  max-width: 100%;
}

.embed-container {
  position: relative; 
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
  padding-bottom: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
  
  .embed-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}


@media all and (min-width: 600px) {
  .left, .right {
     flex: 1 auto;
  }  
}

@media all and (max-width: 600px) {
  .navigation {
      flex-flow: column wrap;
      padding: 0;
  }

  .topnavigation {
      padding: 0px;
  }

  .topnavigation a {
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
  }
  
  .fb-image{
  width:35vw;
}
  
.embed-container {
  padding-top: 100vh;
}   
}

@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }

   .right {
    /*border-top: 1px solid black;*/
    width: 20%;
    float: left;
  }
  
  .left {
    width: 20%;
    float: left;
  }
  
  .left li {
    border: 0;
    margin-bottom: 2px;
    width: 100%;
    /*height: 20px;*/
  }

  .left li:first-of-type {
    margin-top: 5px;
  }

}

@media all and (min-width: 800px) {
  .content {
    flex: 10 0px;
    order: 2;
  }

  .left {
    order: 1;
    /*border: 1px solid black;*/
  }

  .right {
    order: 3;
  }

  .footer {
    order: 4;
  }
}
 

@media screen and (max-width: 1024px) {
* {
  /*padding: 0;*/
  /*font-family: 'Roboto', sans-serif;*/
  box-sizing: border-box;
}	
	
  label.responsive-nav-label {
  position: relative;
  display: block;
  padding: 20px;
  background: #222;
  cursor: pointer;
  color: #fff;
}

label.responsive-nav-label span {
  margin-right: 10px;  
}

.topnavigation {
  position: absolute;
  top: -9999px;
  padding: 10px;
}
 
input#responsive-nav[type=checkbox]:checked ~ nav {
  position: relative;
  top: 0;
}

.topnavigation li {
  float: none !important;
  width: 100% !important;
  border-bottom: none !important; 
}
   
.topnavigation li a {
  margin-bottom: 10px !important;
  padding: 10px 20px !important; 
  background: #4a4a4a;
  color: #fff;
}
 
.topnavigation ul li:hover {
  background: none;
}
   
.topnavigation ul li a:hover {
  background: lightblue;
}

.navigation ul ul {
  position: relative !important;
  width: 100%;
  left: 0 !important;
  top: 0 !important;
  background: none !important;
  box-shadow: none;
}

.navigation ul ul li {
  padding-left: 20px;
}
  
.left, .right {
   width: 20%;    
} 
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

.embed-container {
  padding-top: 100vh;
}
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    
.embed-container {
  padding-top: 100vh;
}
}

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

.embed-container {
  padding-top: 100vh;
}   
}