a:link { color:#FFFFFF; text-decoration:none}
      a:visited { color:#FFFFFF; text-decoration:none}
      A:hover  {font-weight : normal; color : #FFFFFF;}

h1 {
  font-family: 'Open Sans', sans-serif; 
  font-weight: 700; 
  font-size:40px; 
  line-height: auto; 
  color:#FFFFFF;
  background-color: #A1A1A4;
  padding: 20px;
}

@media screen and (min-width: 601px) {
  h1 {
    font-size: 40px;
    line-height: 50px;
    
  }
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 20px;
    line-height: 30px;

  }
}

h2 {
  font-family: 'Open Sans', sans-serif; 
  font-weight: 700; 
  font-size:40px; 
  line-height: auto; 
  color:#A1A1A4;
}

@media screen and (min-width: 601px) {
  h2 {
    font-size: 30px;
    line-height: 50px;
    
  }
}

@media screen and (max-width: 600px) {
  h2 {
    font-size: 20px;
    line-height: 30px;

  }
}

      h3 { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size:4.3vw; line-height: 5vw; color:#a09ebb;}      
      h4 { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size:2.5vw; line-height: auto; color:#a8aec1;}      

/*      h5 { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size:2vw; color:#000000;}*/

@media screen and (min-width: 601px) {
  h5 {
    font-family: 'Open Sans', sans-serif; 
    font-weight: 300; 
    font-size: 1.2vw;
    line-height: 2.5vw;
    color: #000000;
    
  }
}

@media screen and (max-width: 600px) {
  h5 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    font-size: 2vw;
    line-height: auto;
    color: #000000;

  }
}



      h6 { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size:1.5vw; color:#6a6c6c;}      
      h7 { font-family: 'Open Sans', sans-serif;}      

@media screen and (min-width: 601px) {
  h7 {
    font-family: 'Open Sans', sans-serif; 
    font-weight: 100; 
    font-size: 1.5vw;
    line-height: 2.5vw;
    color: #000000;
    
  }
}

@media screen and (max-width: 600px) {
  h7 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    font-size: 3.2vw;
    line-height: auto;
    color: #000000;

  }
}



h8 { font-family: 'Open Sans', sans-serif; font-weight: 100; font-size:2vw; line-height: auto; color:#000000;}

@media screen and (min-width: 900px) {
  h8 {
    font-size: 1.5vw;
    line-height: auto;
    
  }
}

@media screen and (min-width: 601px) {
  h8 {
    font-size: 2vw;
    line-height: auto;
    
  }
}

@media screen and (max-width: 600px) {
  h8 {
    font-size: 3vw;
    line-height: auto;

  }
}


h9 {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 3vw;
  background-color: #46CB8E;

  color: #FFFFFF;
}


@media screen and (min-width: 601px) {
  h9 {
    font-size: 3vw;
    line-height: auto;
    
  }
}

@media screen and (max-width: 600px) {
  h9 {
    font-size: 20px;
    line-height: auto;

  }
}


            
      h10 { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size:12pt; line-height: 28px; color:#F95403;}      
      h11 { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size:12pt; line-height: 28px; color:#000000;}  
      
      
h12 {
  font-family: 'Open Sans';
  font-weight: 100;
  font-size: 3vw;
  color: #FFFFFF;
}


@media screen and (min-width: 601px) {
  h12 {
    font-size: 3vw;
    line-height: auto;
    
  }
}

@media screen and (max-width: 600px) {
  h12 {
    font-size: 14px;
    line-height: auto;

  }
}
      
      
          
     .b { color: black; font-style: normal; font-size: 11px; line-height: 16px; font-family: Verdana, Geneva, Arial;}
     .bodytext { color: #7D7B7B; font-style: normal; font-size: 11px; line-height: 18px; font-family: "Open Sans",Verdana, Geneva, Arial;}
     .bod2text { color: #7D7B7B; font-style: normal; font-size: 11px; line-height: 14px; font-family: Tahoma,Verdana, Geneva, Arial;}
     .main     { color: #000; font-size: 11px; font-family: tahoma, arial, verdana }
      .menufoot { font-family: 'Open Sans', sans-serif; font-weight: 100; font-size:12px; line-height: auto; color:#FFFFFF;}      


.responsive {
  width: 100%;
  height: auto;
}


div.example {
  background-color: lightgrey;
  padding: 20px;
}

@media screen and (min-width: 601px) {
  div.example {
    font-size: 40px;
    line-height: 50px;
    
  }
}

@media screen and (max-width: 600px) {
  div.example {
    font-size: 14px;
    line-height: 30px;

  }
}




/* the pink color for the background color is #DD9090

/* Container holding the image and the text */
.container {
  position: relative;
  font-family: 'Open Sans';
  font-weight: 100;
  font-size: 1em;
  text-align: left;
  color: #898C9A;
}

/* Bottom left text */
.bottom-left {

  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 6vw;
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-left2 {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 10pt;
  position: absolute;
  top: 50px;
  left: 16px;
}


/* Top right text */
.top-right {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 3vw;
  color: #000000;
  position: absolute;
  top: 40%;
  right: 2%;
  opacity: 1;
  
  
}

@media screen and (min-width: 601px) {
  .top-right {
    font-size: 4vw;
    line-height: auto;
    
  }
}

@media screen and (max-width: 600px) {
  .top-right {
    font-size: 4.5vw;
    line-height: auto;

  }
}




.top-right2 {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 2vw;
  color: #A1A1A4;
  position: absolute;
  top: 5%;
  right: 16px;
}

@media screen and (min-width: 601px) {
  .top-right2 {
    font-size: 1.2vw;
    line-height: auto;
    
  }
}

@media screen and (max-width: 600px) {
  .top-right2 {
    font-size: 2.5vw;
    line-height: auto;

  }
}



.top-right3 {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 2.3vw;
  color: #FFFFFF;
  position: absolute;
  top: 43%;
  right: 10%;
  opacity: 0.6;

}

@media screen and (min-width: 601px) {
  .top-right3 {
    font-size: 2.3vw;
    line-height: auto;
    
  }
}

@media screen and (max-width: 600px) {
  .top-right3 {
    font-size: 18px;
    line-height: auto;

  }
}




.top-right4 {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 3vw;
  background-color: #46CB8E;

  color: #FFFFFF;
  position: absolute;
  top: 25%;
  left: 25%;

}


@media screen and (min-width: 601px) {
  .top-right4 {
    font-size: 3vw;
    line-height: auto;
    
  }
}

@media screen and (max-width: 600px) {
  .top-right4 {
    font-size: 20px;
    line-height: auto;

  }
}


/* Bottom right text */
.bottom-right {
  font-family: 'Open Sans';
  font-weight: 100;
  font-size: 2.5vw;
  color: #A1A1A4;
  position: absolute;
  bottom: 20%;
  right: 2%;
}

/* Bottom right text */
.bottom-left {
  font-family: 'Open Sans';
  font-weight: 100;
  font-size: 1.7vw;
  color: #000000;
  position: absolute;
  bottom: 0%;
  left: 2%;
}

@media screen and (min-width: 601px) {
  .bottom-left {
    font-size: 2vw;
    line-height: auto;
    
  }
}

@media screen and (max-width: 600px) {
  .bottom-left {
    font-size: 14px;
    line-height: auto;

  }
}


/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.panelgrid {
    table-layout: fixed;
    width: 100%;
    max-width: 900px;
    word-wrap: break-word;
}

@media screen and (min-width: 601px) {
  .panelgrid {
    table-layout: fixed;
    width: 100%;
    max-width: 900px;
    word-wrap: break-word;
    
  }
}

@media screen and (max-width: 600px) {
  .panelgrid {
    table-layout: fixed;
    width: 100%;
    max-width: 500px;
    word-wrap: break-word;

  }
}

  .accordion-toggle {cursor: pointer;}
  .accordion-content {display: none;}
  .accordion-content.default {display: block;}