/* **************************************************************************************************** */

/* v2 */
body {
  font-family: 'Muli', sans-serif;

}

/* header */

.backgroundBanner {
  height: 500px; 
   background: linear-gradient(to right, #1D313A , #0072BC); 
}

/* navbar */
.nav-menu {
  background: #1C232E;
  padding: 5px;



}
.menuList a,.rightMenuFont a{
  font-size:10px;
}


.menu-item {
  font-size: 13px;
  letter-spacing: 1px;
  color: #eee;
  transition: color .5s;
}

.menu-item:hover {
  color: #70aed2;
}

.nav-active {
  color: #70aed2;
}

.line1, .line2, .line3 {
  width: 23px;
  height: 3px;
  margin: 5px;
  transition: all .4s;
}

.change .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.change .line2 {
  opacity: 0;
}

.change .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}


.searchBtn{
  border-radius: 0 50px 50px 0;
}

header  a{
  text-decoration:none !important;
}

.linkFont{
  font-size:13px;
}


@media only screen and (max-width: 1285px) and (min-width:1190px) {
  .menuList{
    width:800px;
  }
  .banner {
    margin-top:320px !important;
    
  }
  .inputSize {
    width: 70vw !important;
  }


}
@media only screen and (max-width: 1190px) and (min-width:1039px) {
  .menuList{
    width:700px;
  }
  .banner {
    margin-top:320px !important;
    
  }




}

@media only screen and (min-width: 992px) and (max-width:1038px) {

  .banner {
    margin-top:330px !important;
    
  }

  #bannerSection{
    margin-top:380px !important;
  }

  

}

@media only screen and (min-width: 1192px) and (max-width:1246px) {
  .inputSize {
    width: 65vw !important;
  }


}

@media only screen and (max-width: 1190px) and (min-width:946px) {
  .inputSize {
    width: 600px !important;
  }



}

@media only screen and (max-width: 1283px) and (min-width:995px) {
 

  
  #menu1{
    display:block !important;
  }

  #menu2{
    display:none !important;
  }
}





/* 3 common screen */
@media only screen and (min-width: 992px) {
  
  .IconSearch{
    display:none;
   }
 
  #menu1{
    display:none;
  }

  #bannerlogo{
    width:350px;
  }
}


@media only screen and (max-width: 991px) and (min-width: 768px) {
  .inputSize {
    width: 50vw !important;
   
  }

 
  #menu2{
    display:none;
  }

  #menu1{
    display:block;
  }

  #bannerlogo{
    width:275px !important;
  }

  #bannerSection{
    margin-top:600px !important;
  }

 

  .IconSearch{
    display:none;
   }

   

  
}

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

  #menu2{
    display:block;
  }

  #bannerlogo{
    width:275px !important;
  }

 #logoMain{
   
   padding:0;
   margin:0;
   width:40%;
   height:100%;
 }
 .IconSearch{
  order:-1;
 }
 
  .btnIcon{
    display:none;
  }

  #myNavbar{
    display:block !important;
    background-color: #ced4da;
    position:absolute;
    left:0;
    top:100%;
    width:80%;
    height:100vh;
    transform: translateX(-1000px);
    transition: all .8s;
   
    
  }

  .myNavbarShow{
    transform: translateX(0) !important;
    
  }

  .menuIcons{
    display:none;
    
  }




  #myNavbar ul{
    padding:0;
  }

  #myNavbar a:hover{
    padding:10px;
    background-color: #70aed2;
    color:white !important;
    
  }

  #myNavbar a:active{
  
    background-color: #70aed2;
    color:white !important;
    
  }

  #myNavbar_search{
    display:block !important;
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    height:50px;
    transform: translateY(-300px);
    transition: all .8s;
    
    

  }

  .myNavbar_searchShow{
    transform: translateY(0) !important;
    
  }

  #joinBtn{
    display:none;
  }
  
  
}

#joinBtn,#signUpBtn{
  border:1px solid #18EF18;
  color:#18EF18;

  }

  #joinBtn:hover,#signUpBtn:hover{
    color:white !important;
    background-color:#218838 !important;
    border:1px solid #218838 !important;
  }

  .dropdownAccBtn a{
    padding:3px !important;
    font-size:14px !important;
    color:white !important;
    font-weight:bold !important;
    width:60% !important;
  }

  .dropdownAccBtn a:hover{
    color:#00A6F9 !important;
    border:1px solid #00A6F9 !important;
    background-color:transparent !important;
  }

  .dropdownLogoutBtn{
    background-color:#F5F5F5 !important;
    position:absolute !important;
    bottom:0 !important;
    padding:6px !important;
    width:100% !important;
    border-top:1px solid #C4C4C4;
  }

  .dropdownLogoutBtn a{
    padding:3px !important;
    width:30% !important;
    font-size:14px !important;
    color:white !important;
    font-weight:bold !important;
  }


  .dropdownLogoutBtn a:hover{
    color:#DC3A4A !important;
    border:1px solid #DC3A4A !important;
    background-color:transparent !important;
  }



/* end of navbar */

/* banner */
.banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}


.banner-heading {
  animation-name: anim;
  animation-duration: 2s;
  font-size:30px;
}

.banner-par {
  animation-name: anim;
  animation-duration: 2s;
  animation-delay: .5s;
  animation-fill-mode: backwards;  
  font-size:15px;
}

@keyframes anim {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}



@media only screen and (min-width: 992px) {
  .banner {
    margin-top:290px;
  }

}
@media only screen and (min-width: 992px) and (max-width: 1040px) {
  .backgroundBanner{
    height:600px;
  }
}



@media only screen and (max-width: 991px) and (min-width: 768px) {
  .banner {
    margin-top:280px;
    
  }

  .textMargin{
    margin-top:550px;
  }

 
  .backgroundBanner{
    height:850px;
  }
}

@media only screen and (max-width: 767px){
  .banner {
    margin-top:210px;
  }

  .textMargin{
    margin-top:530px;
  }

  .backgroundBanner{
    height:800px;
  }

  #myNav{
    order:-1;
  }

  .banner-par {
    font-size:12px;
  }

}


.cardBanner{
  width:6rem;
  height:6rem;
  margin-right:15px;
  margin-bottom:15px;
  transition:all .5s;
}

.cardBanner:hover{
  transform:scale(1.1,1.1);
  border-top-color:red;
  border-top-width: 4px;
}

.cardBanner p{
  font-size: 15px;
  font-weight: bold;
  letter-spacing:0;
  
  
}

.cardBodyBanner{
  padding:0px;
}


.cardBanner img{
  border:none;
}

.shadowCard{
  box-shadow: 0px 1.5px #999999;

}

.cardstack,.cardstack1{
  height:350px;
}



@media only screen and (min-width: 992px) {
  .cardstack {
    width:400px;
    padding-top:10px;
 
   
  }

  .cardstack1 img {
    width:90%;
    padding-top:10px;
   
  }



  img.carouselResponsive {
    height:550px!important;
  }

}
@media only screen and (max-width: 991px) and (min-width: 768px) {
  .cardstack {
    width:400px;
    padding-top:10px;
    
  }

  .cardstack1 img {
    width:80%;
    padding-top:10px;
   
  }

  img.carouselResponsive {
    height:300px !important;
  }
}

@media only screen and (max-width: 767px){

  .cardBanner{
    width:6rem;
    height:6rem;
    margin-right:6px;
    margin-bottom:6px;
   
    
  }
  .cardstack {
    width:400px;
    padding-top:10px;
   
  }

  .cardstack1 img {
    padding-top:10px;
    width:80%;
   
  }

  img.carouselResponsive {
    height:300px !important;
  }
}

.mainCarousel{
  background-image: linear-gradient(to right, #1D313A, #0072BC);
}





.dropdown-content,.dropdown-content1{
  display:none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 250px;
  height:150px;
  transform:translateX(-85%);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10000;
  margin-top:15px;
  border-radius:3px;
  box-shadow:1px 1px #999999;
  
 

  
}

.dropdown-content:before,.dropdown-content1:before{
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
  top:-10px;
  content: '';
  left: 88%;
  margin-left: -10px;
  position: absolute;
}

.dropdown-content a,.dropdown-content1 a {
  color: black;
  padding: 13px 16px;
  text-decoration: none;
  display: block;
  font-size:3vh;
}

.dropdown-content a:hover,.dropdown-content1 a:hover {
  background-color: #999999;
  border-radius:3px;
  color:white;
}

#startDownloadBtn:hover{
  color:white !important;
}

/* end of banner */

/* end of header */



/* modal */
.choiceBtn a:hover{
color:white !important;
}



/* card collection */
.codeDiscount{
  position:absolute;
  right:0 !important;
}



.cardStyle{
 display:inline-block;
 width:215px;
 height:95%;
}


.tabColor{
  color:#1C232E;

}

.nav-pills a{
  font-size:13px;
}


#cardNav .nav-pills .nav-link.active{
  background-color: transparent !important ;
  color:#0062CC;
  border-bottom:2px groove black;
  border-right:1px groove black;
  font-weight: bold;
  text-transform:uppercase;
  box-shadow:3px 3px grey;
  
 }

 #cardNav .nav-pills a:hover{
   animation-name: tabAnim;
 }

 @keyframes tabAnim{
   0%{
    border-bottom:3px groove black;
   }

   50%{
    border-bottom:3px groove black;
   }

   100%{
    border-bottom:3px groove black;
   }
 }

 @media only screen and (max-width: 767px){

  .tabColor{
    width:200px !important;
     text-align:center;
  }

  #morepaperBtn{
    width:170px !important;
    height:25px !important;
    font-size:10px !important ;
    font-weight:bold;
  }
     

  #pills-tab{
    width:60%;
    margin:0  auto;
  }

  .card-collection .nav-item{
    height:40px !important;
  }
 }


 .bgCard{
  background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)), url(/resources/assets/imagesV2/bg_student_exam.jpg) no-repeat center center /cover;
  
 }





.marker{
position:absolute;
padding:0;
background-color:#FFBD38;
color:black;
font-size:10px;
font-weight: bold;
top:10px;
width:60%;
height:20px;
text-align: left;
padding-left:10px;
padding-top:2px;
}




.marker1{
position:relative;
padding:0;
background-color:#0056B3;
color:white;
font-size:9px;
width:54%;
text-align: center;
text-align: left;
padding-left:10px;
padding-top:1px;


}

.infoSize{
font-size:11px;
}

.infoSize1{
font-size:12px;
font-family:'Montserrat',helvetica,'Muli';
}

.infoSize2{
font-size:11px;
font-family:'Montserrat',helvetica,'Muli';
}

/* flip card */
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 230px;
height: 300px;
}

/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
/* end of flip card */

.shareBtn{
 position:absolute;
 top:8px;
 right:10px;
}

.addCartBtn{
  color:#0062CC !important;
}

.addCartBtn:hover{
  color:white !important;
}

.removeCartBtn{
  color:#DC3545 !important;
}

.removeCartBtn:hover{
  color:white !important;
}

.btnDownloadView{
  position:absolute;
  bottom:15px;
  left:11%;

}
.btnDownloadView1{
  position:absolute;
  bottom:15px;
  left:30%

}

.teacherName{
text-decoration:none !important;
}

.teacherName:hover{
  color:dark-blue;
}

#morepaperBtn{
  width:250px;
  height:30px;
  font-size:13px;
  font-weight:bold;
}
#morepaperBtn:hover{
  background: transparent !important;
  color:blue;
}



/* end of card collection */


/* footer */
#footerBackground{
  background-color: #1C232E;
}


.footerFont{
  font-size:0.8rem;
}

.footerIcon{
 font-size: 20px;
}

footer{
  position:relative;
}

/* 3 common screen */

@media only screen and (max-width: 991px) and (min-width: 768px) {

  .footersect1,.footersect2,.footersect3{
    width:100% !important;
    text-align:center;
    margin:0 auto !important;
    padding:3px !important;
  }
}

@media only screen and (max-width: 767px){
  .footersect1,.footersect2,.footersect3{
    width:100% !important;
    text-align:center;
    margin:0 auto !important;
    padding:3px !important;
  }
}

/* end of footer */
.modal {
  overflow-y: auto;
}




/* signup */
#mainSignUpContainer{
 background: linear-gradient(to right, #2EAAE1 , #0570E2);
 width:100%;
 height:100%;
}

#mainSignUpContainer2{
  background: linear-gradient(to right, #2EAAE1 , #0570E2);
  width:100%;
  height:100%;
 }



#signUpNav{
  margin-top:150px;
}

#containerSignUp{
  position:relative;
  top:20%;
}


/* 3 common screen */

@media only screen and (min-width: 992px) {
 
}


@media only screen and (max-width: 991px) and (min-width: 768px) {

  #mainSignUpContainer{
    height:110%;
  }

  #mainSignUpContainer2{
    height:110%;
  }

  #containerSignUp{
    position:relative;
    top:5% !important;
  }
  

  #signUpNav{
    margin-top:0px;
    height:400px;
  }

  .signUpNavContainer1{
    border-top-left-radius:0px !important;
    border-bottom-left-radius:0px !important;
    margin-top:140px !important;
  }

  .signUpNavContainer2{
    border-top-right-radius:0px !important;
    border-bottom-right-radius:0px  !important;
    margin-top:140px !important;
  }
}


@media only screen and (max-width: 767px){
  #mainSignUpContainer{
    height:115%;
  }

  #mainSignUpContainer2{
    height:115%;
  }

  #containerSignUp{
    position:relative;
    top:2% !important;
  }

  #signUpNav{
    margin-top:0px;
    height:400px;
  }

  .signUpNavContainer1{
    border-top-left-radius:0px !important;
    border-bottom-left-radius:0px !important;
    margin-top:120px !important;
  }

  .signUpNavContainer2{
    border-top-right-radius:0px !important;
    border-bottom-right-radius:0px !important;
    margin-top:120px !important;
  }
}

#signUpNav .nav-pills .nav-link.active{
  background-color: green !important ;
  color:white !important;
  font-weight: bold !important;
 

}

#signUpNav a{
  border-top:1px solid grey;
  border-bottom:1px solid grey;
  color:#71B307;
  font-weight: bold;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

#signUpNav .leftSideBtn{
  border-left:1px solid grey !important;
}

#signUpNav .rigthSideBtn{
  border-right:1px solid grey !important;
}


.signUpNavContainer1{
  border-top-left-radius:10px ;
  border-bottom-left-radius:10px ;
  margin-top:150px;
  background-color:#00294A;
}

.signUpNavContainer2{
  border-top-right-radius:10px ;
  border-bottom-right-radius:10px ;
}






/* end of signUp */