#maths_submit{
    font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;
    color: #007bff;
    font-size: 14px;
    border: none;
}
 


.course-details {
    margin: 0px 6px;
    width: 70%;
    height: 100%;
    margin: 60px auto;
	
}

.subject-info-page {
    border: solid 1px black;
    text-align: center;
    width: 63%;
    margin: 0px auto;
    padding: 13px 4px;
    position: relative;
	border-top-left-radius: 15px;
    color: #fff;
    cursor: pointer;
	background-color: #4f92d5;
}



#subjectcard.subjectcard {
	display: flex;
   	flex-flow: row wrap;
	background-color: aliceblue;
	margin: 45px 8px;
	padding: 20px 6px;
	
}


#subjectcardCape.subjectcardCape {
	display: none;
   	flex-flow: row wrap;
	background-color: aliceblue;
	margin: 45px 8px;
	padding: 20px 6px;

}	
	

span#subject.subject {
    padding: 16px;
    height: 100%;
    width: 31%;
    cursor: pointer;
    margin: 3px;
    padding: 2px;
    background-color: #f6b949;
    color: #333;
    text-align: center;
    border-radius: 5px;
    display: block;
}


span#subject.subject:hover {	
  background-color: #333;
	
}

span#subject.subject a{
    color: #0d0c0d;
	padding: 18px 0px;
    display: block;
}


span#subject.subject a:hover {
	color: #f6b949;
	text-decoration: none;
}


.click-to-start {
    background-color: #317085;
    width: 35%;
    padding: 18px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    margin: 47px auto 2px auto;
}

.click-to-start p {
    margin-top: 0;
    margin-bottom: 0rem;	
}


.discover-learning-styleSubjects {
    width: 80%;
    position: relative;
    padding: 15px 2px 8px 2px;
    text-align: center;
    margin: 65px auto 1px auto;
    border-radius: 4px;
}



.course-details-subjects {
    border: solid thin transparent;
    display: flex;
    flex-direction: row;
    top: 3px;
    position: relative;
}

.background-ccc {
    background-color: #333;
   /*background-color: #000333; */
   // background-color: #f6b949;
}





#card.tab {
	 height: 100%;
	 display: flex;
	 flex-direction: column;	 
 }


.quiz{
	
	border: solid thin #ccc;
	border-radius: 5px;
	height: 100%;
	width:  100%;	
	cursor: pointer;
	margin: 6px auto;
	padding: 4px;
	background-color: #f6b949;
	color: #333;
	display: inline-block;
	
}

a span#quiz-topic.quiz {
	border: solid thin transparent;
    padding: 5px 14px;	
	
}


 .course-details{
	   border: solid thin transparent;
	   margin: 0px auto;
	   width: 100%;
	   height: 100%;
       margin-bottom: 60px;
   }
  
  
   .course-details-subsects{
	  border: solid thin #666; 
	  display: flex;
	  flex-direction: row;
	  top: 3px;
      position: relative;
  }

   
	  
  .subject-info-heading {
	  border: solid thin #726a6a;
	  text-align: center;
	  width: 20%;
	  margin: 0px;
	  padding: 6px 8px;
	  position: relative;
	  left: 9%;
	  border-top-left-radius: 15px;
  }
  
  
   
     
  .subject-info-heading h6 {
	  
    animation-iteration-count: infinite;
    padding: 12px 21px 10px 9px;
    margin-bottom: -1px;	  
	  
  }  
	
   .subject-info-heading h6:hover {
     background-color: #31708f;
	 color: #fff;
     border-radius: 5px;
   }
  
  #card.tab {
    width: 80%;
    padding: 18px;
    margin: 24px auto 24px auto;
    background-color: aliceblue;
	padding: 20px 18px;
}



 /* Styles for desktops  Larger screens (Monitors) */
  @media only screen and (min-width: 1280px) {
  
  
  
}
  
    /* Styles for laptops */
   @media only screen and (min-width: 769px) and (max-width: 1024px) {
   
      .click-to-start {
       width: 55%;
     }
     
     input#newsletter-email {
        border: solid thin red;
        width: -webkit-fill-available;
     }
}
    
  /* Styles for tablets */
  @media only screen and (min-width: 481px) and (max-width: 768px) {
    .course-details-subjects {
        flex-direction: column;
        width: 98%;
         
     }
     
     h3#subjecttype {
        width: 100%;
        font-size: 27px;
         
     }
     
     .subject-info-page {
        width: 100%;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        margin: 1px auto;
     }
     
     .click-to-start {
        width: 75%; 
     }
     
     #subjectcard.subjectcard {
        border: solid thin #ccc;
        margin: 26px auto;
     }
     
     span#subject.subject {
         width: 98%;
     }
     
    
}

   /*  mobile phones */
   @media (max-width: 480px) {
       
     .course-details-subjects {
        flex-direction: column;
        width: 98%;
         
     }
     
     h3#subjecttype {
        width: 100%;
        font-size: 27px;
         
     }
     
     .subject-info-page {
        width: 100%;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        margin: 1px auto;
     }
     
     .click-to-start {
        width: 75%; 
     }
     
     #subjectcard.subjectcard {
        border: solid thin #ccc;
        margin: 26px auto;
     }
     
     span#subject.subject {
         width: 98%;
     }
     
     
     
     .course-details-subsects {
         flex-direction: column;
         padding: 4px;
         border: none;
         border-bottom: solid thin #ccc;
         //background-color: #ccc;
         box-shadow: 2px 2px 5px lightgray;
     }
     
     .subject-info-heading {
         width: 100%;
         border-top-left-radius: 15px;
         border-top-right-radius: 15px;
         border-bottom: none;
         left: 0%;
         margin: -4px auto;
         background-color: #f3f3f3;
         border-color: #4ea5ef;
     }
     
     #maths_submit {
         background-color: #ffffff00;
     }
     
    #card.tab {
         width: 90%;
         text-align: center;
    
     } 
     
     .quiz {
         margin: 2px auto;
         padding: 10px 0px;
         
     }
     
     .discover-learning-style {
         padding: 15px 2px;
         margin: 40px auto;
         width: 100%;
     }
     
     a span#quiz-topic.quiz {
       border: solid thin transparent;
       padding: 10px 14px;
    }
     
     
     
}