body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    margin: 0;
    background-color:#f2f2f2; 
    
  
}


#cardHome {
   

}



.containerWhite {
    margin: 0.3em;
    position: relative;
}

.marginLeftRight {
    margin: 0 0.3em 0 0.3em;
}


.container {
   
    padding: 1em 0.45em 1em 0.45em;
    background: #ffffff;
    border: 1px solid lightgrey;
    margin: 1em 0.1em 0.5em 0.2em;
    position: relative;
    font-size: 0.9em;
}

.containerRed {
    width: 20em;
    padding:0.35em 0.45em 0.35em 0.45em;
    margin: 0.5em 0.1em 0.5em 0.2em;
    position: relative;
    background: #ffffff;
         border: 3px;
    border-style: solid;
    border-color: red;
}

#B1 {
    margin-top: 1em;
}


.about {    
    padding: 1em 0.45em 1em 0.45em;
    background: #ffffff;
    border: 1px solid black;
    margin: 1em 1em 1em 1em;
    position: relative;
}



.panel-heading {
   text-align: center; 
   margin: 0;
  text-decoration:underline;
}


h3, h4 {
    margin: 0.3em 0.3em 1em 0.3em

}

#Card {
  width: 19em;
    height: 10em;
    position: relative;
    padding: 2em 0em 0.5em 2em;
    margin: 0.25em  0em 1em 0em;
    border: 0.5px solid black;
    box-shadow: 0 10px 10px 0   #4d4d4d;
    background: white;
   
 
}


#somepadding {
    width: 20em; 
 padding: 0em 0.25em 0em 0.25em;   
 margin: 0.1em 0.1em 0.1em 0.1em; 
     border: 1px;
    border-style: solid;
    border-color: red;
    
}

#aroundCard {
      width: 18em;   
     position: relative;
    padding: 1em 0em 0em 0em;
    margin: 0.25em  0em 0em 0em;
    }
    
   #wordsleft{        
     margin: 0.5em  0em 0.5em 0em;   
    }
    
    #questiongender{        
     margin: 0.5em  0em 0.5em 0em;   
    }
    
     #rightwrong{        
     margin: 0.5em  0em 0.5em 0em;   
    }
    
     #rightanswers{        
     margin: 0.5em  0em 0.5em 0em;   
    }
    #wronganswers{        
     margin: 0.5em  0em 0.5em 0em;   
    }
    
    

#blueBar {
    background: #b3e8ff;
    height: 1.3em;
    color: black;
    width: 5%;
    border: 1px;
    border-style: solid;
    border-color: #007db3;
}

#redBar {
    background: #ffb3b3;
    height: 1.3em;
    color: black;
    width: 5%;
    border: 1px;
    border-style: solid;
    border-color: #b30000;
}

#greenBar {
    background: #89f589;
    height: 1.3em;
    color: black;
    width: 5%;
    border: 1px;
    border-style: solid;
    border-color: #0ea40e;
}

.inline {
    display: inline;
}

table,
th,
td {
    border: 1px solid grey;
    border-collapse: collapse;
}

#tableHome {
 text-align: center;
    
}

#tableDiv {
    display: inline-block;
}


table {
     width: 19em;
     margin: auto;
     
}
th,
td {
    font-size: 0.9em;
    text-align: center;
    background: #ffffff;
    padding: 0em 0.15em;
}


.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #000;
}

.active {
  background-color: #007db3;
}


#flip {
    position: absolute;
    bottom:0;
    left:0;
     font-size: 1em;
}

#reload {
   position: absolute;
    bottom:0;
    right:0;
}

* {
    box-sizing: border-box;

}

.buttonContainer {
    position: absolute;
    right: 2em;
}



.button {
    background-color: #007db3;
    border: none;
    color: white;
    padding: 0.5em 1em;
    text-align: center;
    text-decoration: none;
    font-size: 1em;
    cursor: pointer;
}

.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.audioButton {
    background-color: #007db3;
    border: none;
    color: white;
    padding: 0.25em 0.25em;
    text-align: center;
    text-decoration: none;
    font-size: 1em;
    cursor: pointer;
}


#caseNoteEn {
    margin:0;
  
}

#titleGrammarSection {
 
 text-align:center; 
 margin:0.5em;
}

#grammarSection {
/* width: 27em;*/
 max-height:19em;      
}

.bullet {
  padding-left: 1em;  
  /*padding-bottom: 0.5em;*/
 
}

li {
 margin-bottom: 0.5em;
    
}


ul {

    padding: 0;
    margin: 0.75em;
}

.caseName {
   text-decoration: underline;
   margin-top: 0.4em;
   margin-bottom: 0em;
    
}

.caseText {
   margin-top: 0em;
   margin-bottom: 0.4em;
    
    
}


.center {
  margin: auto;
 /* width: 27em;*/
}

#twoWayColumn p{
    padding-bottom: 0.8em;
}

/* section responsive */


.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 0.5em
}

/* mobile phones */
[class*="col-"] {
  width: 100%;
  
  #twoColDon {
    display: none;
}
#threeColDon {
    display: none;
}
  
   
}
@media screen and (max-width: 800px) {
  .navbar a {
    float: none;
    display: block;
  }
}
@media only screen and (max-width: 1150px) and (min-width: 800px) {
    #hideOnTwoCol{
      display: none; 
    }

    td {
    font-size: 0.9em;
    }
    
    #Card {
    font-size: 1em;
}

#oneColDon {
    display: none;
}
#threeColDon {
    display: none;
}
}
@media only screen and (min-width: 800px) {
  /* For tablets: */
  
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}




@media only screen and (min-width: 1150px) {
  /* For desktop: */
  .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%;}
  
}
  
  @media only screen and (min-width: 1480px) {

  
#Card {
    font-size: 1em;
}

#oneColDon {
    display: none;
}

#twoColDon {
    
    display: none;
}
 
 
  }
  
  @media only screen and (max-width: 1480px) and (min-width: 1150px) {
      
      #oneColDon {
    display: none;
}

#twoColDon {
    
    display: none;
}
 
      
      
  }


  @media only screen and (max-width: 800px){
      
         #twoColDon {
    display: none;
}

#threeColDon {
    
    display: none;
}
 
      
      
      
  }


/*
*{
   border: 1px solid red !important;
}
*/