/*  font-family: 'Karla', sans-serif;

    font-family: 'Spartan', sans-serif; */
	

/* add this if issues with padding in grid  
 *{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
*/ 
p{margin-bottom: 0.5rem;}
.qtopp{margin-top:0.8rem;}

/*front page style buttons and grid*/
.decoh1{font-size:2rem; line-height:1.7;}
@media only screen and (max-width: 650px){.decoh1{font-size:2rem; line-height:1.7;}
}
@media only screen and (max-width: 500px){.decoh1{font-size:1.7rem; line-height:1.7;}
}
@media only screen and (max-width: 450px){.decoh1{font-size:1.4rem; line-height:1.7;}
}
.decoh2{font-size:1rem; line-height:1.7;}
@media only screen and (max-width: 650px){.decoh2{font-size:1rem; line-height:1.7;}
}
@media only screen and (max-width: 500px){.decoh2{font-size:1rem; line-height:1.7;}
}
@media only screen and (max-width: 450px){.decoh2{font-size:0.95rem; line-height:1.7;}
}
.fpgrid{display: grid;
  height:100vh;
  width:auto;
  justify-content: space-evenly;
	grid-template-columns: 50vw 50vw;
	grid-template-rows:30vh 30vh 1fr;
	grid-template-areas: 	
							
							" classics s3history "
	                        " redbut bluebut "
							" classicstext historytext "
							;
	grid-gap:0px;
  position:relative;
z-index:1;}


.fpbox1{
	  grid-area:classics;
 display: flex;
  align-items:end;
  justify-content:center;
  color:rgb(255, 255, 255, 0.5);
background-color:rgb(10, 6, 38);
position:relative;
	}
	.fpbox2{
	  grid-area:bluebut;
 display: flex;
  align-items:center;
  justify-content:center;
background-color:#420202;
position:relative;
	}
	.fpbox3{
		grid-area:classicstext;
 display: flex;
  align-items:start;
  justify-content:center;
  color:rgb(255, 255, 255, 0.5);
background-color:rgb(10, 6, 38);
padding-left:10vw;
padding-right:10vw;
 position:relative;
 text-align:center;
	}
@media only screen and (max-width: 650px){.fpbox3{padding-left:7vw;
padding-right:7vw;}
}
@media only screen and (max-width: 500px){.fpbox3{padding-left:4vw;
padding-right:4vw;}
}
@media only screen and (max-width: 450px){.fpbox3{padding-left:3vw;
padding-right:3vw;}
}
	.fpbox4{
	  grid-area:s3history;
 display:flex;
  align-items:end;
  justify-content:center;
  color:rgb(255, 255, 255, 0.5);
background-color:#420202;

 position:relative;
	}
	.fpbox5{
	  grid-area:redbut;
 display: flex;
  align-items:center;
  justify-content:center;
background-color:rgb(10, 6, 38);
position:relative;
	}
	.fpbox6{
	  grid-area:historytext;
 display: flex;
  align-items:start;
  justify-content:center;
  color:rgb(255, 255, 255, 0.5);
background-color:#420202;
 position:relative;
 padding-left:10vw;
padding-right:10vw;
text-align:center;
	}
@media only screen and (max-width: 650px){.fpbox6{padding-left:7vw;
padding-right:7vw;}
}
@media only screen and (max-width: 500px){.fpbox6{padding-left:4vw;
padding-right:4vw;}
}
@media only screen and (max-width: 450px){.fpbox6{padding-left:2vw;
padding-right:2vw;}
}
.pstyles {
	outline: 0;
    width: 200px;
    height: 60px;
    border: 2px solid rgb(93, 51, 43);
    outline: none;
    color: rgb(255, 255, 255, 0.5);
	background-color:0b068e;
	opacity:0.8;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 50%;
}
@media only screen and (max-width: 700px){.pstyles{width:150px; height:40px}
}
.pstyles:before {
    content: '';
    background: linear-gradient(45deg, #441252, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -15px;
    left:-15px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 30px);
    height: calc(100% + 30px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 50%;
	
}
@media 
.pstyles:active {
    color: #000;

}

.pstyles:active:after {
    background: transparent; 
}

.pstyles:hover:before {
    opacity: 1; 
	
}
.pstyles:hover: {
    opacity: 1; 
	
}
.pstyles:after {
	outline: none !important;  box-shadow: none !important;
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:#0b068e;
    left: 0;
    top: 0;
    border-radius: 50%;
}
.blueme.pstyles:after{background-color:#8e0906;}
.blueme.pstyles{background-color:#8e0906;}
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}


	body{font-family: 'Open Sans', sans-serif; background-color:#c5b498;}
/*classics specific starts here */

/*examq specific formating*/
.ossie{
	  grid-area:pimage4;
 display: flex;
  align-items:center;
  justify-content:center;
background-color:rgb(34, 33, 27,0.2);
 border: 2px solid #91800b;
 position:relative;
 
	}
.divide{background-color:#bdd0d2; height:5px; width:100%; border:4px groove #669ea5 ; margin-bottom: 30px !important; margin-top: 30px !important }
.sour {  padding:1rem; border:2px solid #4b4b4b ;}
.exgap {margin-bottom: 20px;}
.b900{font-weight:900;}
.b600{font-weight:500; }
.steps{background-color:#bdd0d2; max-width:5rem; padding:0.5rem; border:4px groove #669ea5 ; margin-top:2rem !important;}
.extit{background-color:#89a3a6; padding-left:2rem; padding-right:2rem; padding-top:1.5rem; padding-bottom:1.5rem;}
.boldcol{ background-color:#8fe7f2;}
.boldcol2{ background-color:#f28fb4;}
.bluebox{border:2px solid blue; padding:2rem;}
.redbox{border:2px solid red; padding:2rem;}
/*questions ol class*/
.qclass li{padding-left:20px; line-height:200%;}
.square {list-style-type: square;}
iframe{
    border-width: 0px;
}

#stay.popover-header{color:red; }


/*back to the top*/
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 100; /* Make sure it does not overlap */
  border: 2px solid #7b4a2d; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgb(255, 243, 205,0.5); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding:8px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 0px; /* Increase font size */
 }
 
 #myBtn2 {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  top: 20px; /* Place the button at the bottom of the page */
  left: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: 2px solid #7b4a2d; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgb(255, 243, 205,0.7); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding:8px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 12px; /* Increase font size */
  
 
 }

#myBtn:hover {
  background-color: #174d5b; /* Add a dark-grey background on hover */
}
/*text color style*/
.women, .conflict, .leader, .hero, .fate{ color:rgb(33, 37, 41); font-size:16px; line-height:2rem; padding-left:15px; padding-right:15px;}


/*sandbox style*/
/*swiper custom css*/

.sandcont{}	


   .swiper-container {
	  width: 100%;
      height: 100%;
	  background-image:url(resources/images/backsand.jpg);
 }


   .swiper-container {
	  width: 100%;
      height: 100%;
	    }
	   
	   /*sandbox frame*/
	   .sandboxcont{border: 2rem solid rgb(1, 66, 98,0.5);  padding:1rem; background-image:url(resources/images/backsand.jpg); position:relative; margin: 5rem; }
.sandboxcont:before {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 10;
  top: 0rem;
  left: 0rem;
  right: 0rem;
  bottom: 0rem;
  border-top: 1.2rem solid rgb(1, 0, 28, 0.7);
	border-right: 0.8rem solid rgb(1, 0, 28, 0.7); 
}
.sandboxcont:after {
 
pointer-events: none;
 content: " ";
  position: absolute;
  z-index: 10;
  top: 0rem;
  left: 0rem;
  right: 0rem;
  bottom: 0rem;
  border-left: 3rem solid rgb(0, 0, 0, 0.3);
  border-bottom: 1.5rem solid rgb(0, 0, 0, 0.2 );
}

	 


    .swiper-slide {
		margin-top:60px;
		 margin-bottom:60px;
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
	
	/*.swiper-container {padding:20px 0}
	.swiper-slide {transition:25ms all;
	
	&hover:{transform:scale(1.2);}
	}
*/	
.swiper-slide {
  position: relative;
  display: block;
  flex: 1 1 0px;
  transition: transform 500ms;
}

.swiper-container:focus-within .swiper-slide,
.swiper-container:hover .swiper-slide {
  transform: translateX(-25%);
}

.swiper-slide:focus ~ .swiper-slide,
.swiper-slide:hover ~ .swiper-slide {
  transform: translateX(25%);
}

.swiper-container .swiper-slide:focus,
.swiper-container .swiper-slide:hover {
  transform: scale(1.5);
  z-index: 10;
} 

.sbox1{height:200px; width:200px; background-color:red;}
.sbox2{height:200px; width:200px; background:green;} 
.sbox3{height:200px; width:200px; background: blue;} 
.sbox4{height:200px; width:200px; background:yellow;} 
.sbox5{height:200px; width:200px; background:brown;} 
.sbox6{height:200px; width:200px; background:purple;} 
.sbox7{height:200px; width:200px; background:orange;} 
.sbox8{height:200px; width:200px; background:pink;} 

/*video: style*/
.vidt{color:rgb(94, 41, 29);}
.vidtopmar{margin-top:2rem;}
.vidbotmar{margin-bottom:1.8rem;}
.viddblbot {margin-bottom:2.5rem;}

.framecont{  position: relative;
  width: 100%;
  height:100%;
  padding-top: 56.25%; 
  
}
.vidframe{
  position: absolute;
  top:0;
  left:0;
  width: 100% ;
  height: 100% ;
max-width:100%;
max-height:100%;


}
.vidframetop{
  position: absolute;
  top:0;
  left: 0;
  width: 100% ;
  height: 60% ;
max-width:100%;
max-height:100%;
}
.vidframetopbig{
  position: absolute;
  top:0;
  left: 0;
  width: 100% ;
  height: 80% ;
max-width:100%;
max-height:100%;
}
/*picmax*/
.picmax{max-height:375px;}
/*typography*/
h1{font-family: 'Merienda', cursive; font-size:2rem;}
h2{font-size:1.4rem; font-weight:500; line-height:2rem; margin-bottom:0rem;}
h3{font-size:1.2rem; font-style:italic; line-height:2rem;}
h4{font-size:1.2rem; font-style:italic; line-height:0.5rem; padding-bottom:2rem;}
.adva{background-color:#f0bac0;}
.disa{background-color:#c09df2;}
.whead{font-size:1.2rem; background-color:rgb(220, 204, 243); border:3px solid rgb(164, 153, 178) ; padding-left:0.3rem;padding-right:0.3rem;padding-top:0.1rem;padding-bottom:0.1rem;}
/*heading adjustments*/
.h2norm{font-style:normal; font-weight:600; margin-bottom:0.4rem;}
.h2title{font-style:normal; font-weight:500; margin-bottom:1.8rem; margin-top:2rem; background-color:#dcccf3;padding-top:2rem; padding-bottom:2rem; padding-left:1.5rem; padding-right:1.5rem; border: 4px solid #91800b;
position:relative;}
	  .h2title:before {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 1;
  top:12px;
  left:12px;
  right:12px;
  bottom:12px;
 border: 2px solid rgb(34, 33, 27,0.3);
  }
   .h2title:after {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 2;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
 border: 8px solid rgb(34, 33, 27,0.3);
  }

.h3norm{font-style:normal; font-size:1rem;}
.h4norm{font-style:normal; font-size:1rem;}
/*lists*/
.list1{line-height:2rem; padding-top:0.5rem; list-style-type:square;}
.list2{line-height:2rem; padding-top:0.5rem; list-style-type:circle;}


.stated { background-color:rgb(89, 124, 164); color:white;}

/*under images and video text and attributions*/

a{display:inline;}
.litattrib{ display:block; color:black; font-size:0.8rem; line-height:1.1rem; display:inline-block; margin-left:5vw; padding:2px;}
.litthemeattribpingu{ display:block; color:black; font-size:0.8rem; line-height:1.1rem; display:inline-block; margin-left:4rem; padding:2px;}
@media only screen and (min-width:1220px){.litthemeattribpingu{ display:block; color:black; font-size:0.8rem; line-height:1.1rem; display:inline-block; margin-left:10vw; padding:2px;}
}
.litthemeattrib{ display:block; color:black; font-size:0.8rem; line-height:1.1rem; display:inline-block; margin-left:4rem; padding:2px;}
.newattrib{color:black; font-size:0.8rem; line-height:1.1rem; display:inline-block; padding-top:0.5rem;}
.attrib{color:black; font-size:0.7rem; line-height:1rem; display:inline-block; }
.vidattrib{color:black; font-size:0.9rem; line-height:1.2rem; display:inline-block; padding-top:0.5rem; padding-left:0.3rem; padding-right:0.3rem;}

.attrimargin{margin-left:10rem;}
.utitle{font-size:0.8rem; margin-top:3px;}

/*summary boxes styling*/

.crosslines{border: 0.8rem solid rgb(1, 66, 98,0.5); background-image: url("resources/images/coldwar/paper.jpg"); padding:1rem; pointer-events: none; }
.crosslines:before {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 10;
  top: -0.3rem;
  left: -1.6rem;
  right: -1.6rem;
  bottom: -0.3rem;
  border-top: 0.8rem solid rgb(1, 66, 98, 0.5);
  border-bottom: 0.8rem solid rgb(1, 66, 98, 0.5);
}

.crosslines:after {
  content: " ";
  position: absolute;
  z-index: 10;
  top: -1.6rem;
  left: -0.3rem;
  right: -0.3rem;
  bottom: -1.6rem;
  border-left: 0.8rem solid rgb(1, 66, 98, 0.5);
  border-right: 0.8rem solid rgb(1, 66, 98,0.5);
}

/*navbar customisation 
/*collapse breakpoint - see end of file*/
/* tablet hamburger icon custom */

.navbar-toggler {background-image:url(resources/images/classlit/tablet.jpg);
background-repeat:repeat-y;
position:relative;
background-size:contain;
z-index:12;
border:2px solid rgb(93, 51, 43);
}

/* change the background color */
.navbar-custom {
   background-color: #1e6181;
	background-image:url(resources/images/2sand100.jpg);
	position:relative;
	z-index:30;
	
	
}
.navbar-custom:after {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: -10;
  top: 0rem;
  left: 0rem;
  right: 0rem;
  bottom: 0rem;


background-color: rgb(1, 66, 98,0.5);
}


/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #11272a;
}
/* change the link color */
.navbar-custom .navbar-brand, .navbar-nav .nav-link {
    color: #11272a;
}
.navbar-brand:hover, .navbar-brand:focus{color:#d0e6e9;}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #d0e6e9;
}

/* style dropdown menu */

/*.dropdown {list-style: none; background: green; padding: 10px; display: inline-block;}
.dropdown .nav-link {color:yellow; text-decoration: none;}*/
.dropdown .dropdown-menu a{color: black; background-color:rgb(255, 243, 205); text-decoration: none; }

@media only screen and (max-width:900px){ .dropdown .dropdown-menu a{ color: white; text-decoration: none; background-color:rgb(39, 54, 57);
	
	}     
} 
.dropdown .dropdown-menu .newdrop a{color: black; background-color:rgb(255, 243, 205); text-decoration: none; }
/*.highlight:hover{background-color:green !important;}


/*.dropdown-menu{ background-color:rgb(255, 243, 205); max-width:340px;}*/

/*.dropdown .btn {background: green; color:#fff;}
.dropdown .btn:hover {background: cyan; color:#000;}
.dropdown .btn:active {background: cyan; color:#000;}
.dropdown .btn:focus {background: cyan; color:#000;} */
/*.dropdown-menu .dropdown-item {display: inline-block; width: 100%; padding: 10px 5px; margin:0; color:green; background-color:green;} */
/*.container .dropdown .dropdown-menu a:hover
{
  color: #fff;
  background-color: #b91773;
  border-color: #fff;
  
}*/
.dropdown-menu{ background-color:rgb(255, 243, 205); max-width:300px;}

.highlight{background-color:rgb(255, 243, 205)}

@media only screen and (max-width:900px){.highlight{background-color:rgb(255, 243, 205)}}

.highlight:hover{background-color:#daba8c !important ;}

@media only screen and (max-width:900px){.highlight:hover{background-color:rgb(113, 132, 142) !important;}}

.highlight-index:hover{background-color:#daba8c !important ;}

.dropdown-item{background-color:rgb(255, 243, 205);
position:relative;
z-index:80;}
.index-item{background-color:rgb(255, 243, 205) !important; color:black !important; width:500px;
}

/*second navbar*/

.hamnav-custom { height:90px;
pointer-events:none; outline: 0; box-shadow:none; 
   } 

.hamnav-custom-item   {pointer-events:auto; padding-right:2rem; outline: 0; font-family: 'Lato', sans-serif;
font-family: 'Open Sans', sans-serif; font-size:1rem;} 
@media only screen and (max-width:900px){.hamnav-custom-item{padding-right:0rem;}}
.menu-text-1{ margin-top:1rem; width:30rem; background-color:#6aa0a1; }
 .menu-text-2{  font-size:1rem; color:#0a2f30; padding-left:1rem; line-height:2rem; }
 .menu-text-longer{ scrollable-menu 
    height: 85vh;
    max-height:85vh;
    overflow-x: hidden;
	margin-top:1rem; width:30rem; background-color:rgb(255, 243, 205);
}
 /*styles the dropdown menus for mobile and desktop*/
 .menu-text-drop{
	height:auto; 
    max-height:75vh;
    overflow-x: hidden;
	margin-top:1rem; width:300px; background-color:f8f9fa;
	position:relative;
	z-index:80;
}

@media only screen and (max-width:900px){ .menu-text-drop{ height: 75vh; 
    height:auto;
	width:300px;
    overflow-x: visible;
	margin-top:1rem;  background-color:rgb(39, 54, 57);
	position:relative;
	z-index:80;
	
	
	}     
} 

.menu-text-long {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
	font-size:16px; color:#0a2f30; padding-left:1rem; padding-top:0.5rem;
}

/*subheadings on dropdown menu*/
.subhead, .subhead:hover{ font-weight:500; background-color:rgb(239, 215, 181);}

@media only screen and (max-width:900px){.subhead, .subhead:hover{ font-weight:500; color:white; background-color:#123347 !important;}}
.indent{padding-left:3rem;}

.subhead-index, .subhead-index:hover{ font-weight:500; background-color:rgb(239, 215, 181);}

/*--Button Styles--*/

.navbuttontext{font-family: 'Lato', sans-serif;

font-weight:500;
font-size:1.05rem;
color:#f5ecb8;
padding:1.7rem 1.5rem;
position:relative;
z-index:1;
}
.navbuttontext:hover {font-family: 'Lato', sans-serif;

font-weight:500;
font-size:1.05rem;
color:#e3bf40;
padding:1.7rem 1.5rem;
position:relative;
z-index:1;
}
/*turns small screen home button blank*/
@media only screen and (max-width:900px){.hide, .hide:hover{color:rgb(1, 1, 1, 0)}} 
/*navgif css !essential to navbar!*/ 
.snow, .blood, .steam, .blank{background:transparent;
border:none; margin:0;

}
.snow:hover{background:transparent;
background-image:url(resources/images/coldwar/snofall.gif);
}
.snow:active{background:transparent;
background-image:url(resources/images/coldwar/snofall.gif);
}

.blood:hover{background:transparent;
background-image:url(resources/images/mqs/blood.gif);
}
.blood:active{background:transparent;
background-image:url(resources/images/mqs/blood.gif);
}

.steam:hover{background:transparent;
background-image:url(resources/images/coldwar/steam2.gif);
}
.steam:active{background:transparent;
background-image:url(resources/images/coldwar/steam2.gif);
}
.navbar{padding-top:0rem; padding-bottom:0rem !important;}

@media (min-width: 900px) {
  .navbar-expand-custom {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-custom .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-custom .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
  }
  .navbar-expand-custom .navbar-collapse {
    display: flex!important;
  }
  .navbar-expand-custom .navbar-toggler {
    display: none;
  }
  .navbar-expand-custom .navbar-nav .dropdown-menu {
    position:absolute;
  }
}

.glow-on-hover {
	outline: 0;
    width: 60px;
    height: 30px;
    border: 2px solid rgb(93, 51, 43);
    outline: none;
    color: #f5ecb8;
	background-image:url(resources/images/classlit/tablet.jpg);
	opacity:0.8;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #441252, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
	
}

.glow-on-hover:active {
    color: #000;

}

.glow-on-hover:active:after {
    background: transparent; 
}

.glow-on-hover:hover:before {
    opacity: 1; 
}

.glow-on-hover:after {
	outline: none !important;  box-shadow: none !important;
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:url(resources/images/classlit/tablet.jpg);
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}




/*youtube style*/

.under{ position:relative; z-index:2;
}
.over {position:absolute; z-index:1;
}
.stop{pointer-events:none;}
/*home image style*/
.nclasshome{
 
  width: 100%;
  height:auto;
 
}
/*image style */
.nclasstop300{
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 300px;
  margin-top:2vw;
}

.nclasstop700{
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 700px;
  margin-top:2vw;
}


.nclasstop475{
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 550px;
  margin-top:2vw;
}

.nclasstop450{
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 450px;
  margin-top:2vw;
}

.nclasstop475pingu{
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 550px;
  margin-top:2vw;
}

@media only screen and (min-width:1050px)
{.nclasstop475pingu{
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 550px;
 margin-bottom:-0.3vw;
}
}



@media only screen and (min-width:1220px)
{.nclasstop475pingu{
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 550px;
 margin-bottom:-2vw;

}
}




.classtop475{
  object-fit: contain; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 475px;
  margin-top:2vw;
}
.classtop670{
  object-fit: contain; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 670px;
  margin-top:2vw;
}

.frenchbox45 {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 450px;
  margin-bottom: 1rem;
}

.frenchbox {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 400px;
  margin-bottom: 1rem;
}
.frenchbox45 {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 450px;
  margin-bottom: 1rem;
}
.frenchboxhome {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: calc(100vh - 56px);
 width: 100vw;
  
}
.frenchbox65 {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 650px;
  margin-bottom: 1rem;
}
.frenchbox55 {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 550px;
  margin-bottom: 1rem;
}
.frenchbox5 {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 500px;
  margin-bottom: 1rem;
}

.frenchcont {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 300px;
  margin-bottom: 1rem;
}

/* cookie style */
.alertcont{width:25%;
height:auto;
text-align:center;}

/* footer styles  */

.footcont{display: grid;
padding:0px;
width:100%;
  height: auto;
 min-height:200px;
  justify-content: space-evenly;
	grid-template-columns:1fr 1fr 1fr 1fr;
	grid-template-rows:auto;
	grid-template-areas: 	"foottext1 foottext2 foottext3 foottext4";
	grid-gap: 10px;
  position:relative;
border: 0.5rem solid rgb(35, 50, 50,0.7);
 background-image:url(resources/images/sand300.jpg);
 background-size:auto;
 padding: 10px;
z-index:1;}


.footcont:before {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 10;
  top: 0rem;
  left: 0rem;
  right: 0rem;
  bottom: 0rem;


background-color: rgb(1, 66, 98,0.5);
}




@media only screen and (max-width:992px) { 
.footcont{display: grid;
	width:100%;
  height: auto;
  justify-content: space-evenly;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  grid-template-areas: 	"foottext1  foottext2"
						"foottext3  foottext4"
						;
  
  grid-gap: 10px;
  background-color: #8ff7f8;
padding: 10px;}
}
@media only screen and (max-width:576px) { 
.footcont{display: grid;
width:100%;
  height: auto;
  

  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr 1fr 1fr;
  grid-template-areas: 	"foottext1"
						"foottext2"
						"foottext3"
						"foottext4";
  grid-gap: 10px;

padding: 10px;}
}
.footitem1{ 

  padding: 1rem 1.5rem;
  font-size: 16px;
  color:black;
  grid-area:foottext1;
 display: flex;
  align-items: top;
  justify-content: left;
  background-color:rgb(197, 180, 152, 0.6);
    position:relative;
   z-index:20;
  }
.footitem2{ 
  padding: 1rem 1.5rem;
  font-size: 16px;
  grid-area:foottext2;
 display: flex;
  align-items: top;
  justify-content: left;
  color:black;
 background-color:rgb(197, 180, 152, 0.6);
   position:relative;
   z-index:20;
}

.footitem3{ 
 padding: 1rem 1.5rem;
  font-size: 16px;
  grid-area:foottext3;
 display: flex;
  align-items: top;
  justify-content: left;
  color:black;
   background-color:rgb(197, 180, 152, 0.6);
   position:relative;
   z-index:20;
  }

.footitem4 { 
  padding: 1rem 1.5rem;
  font-size: 16px;
  grid-area:foottext4;
 display: flex;
  align-items: top;
  justify-content: left;
  background-color:rgb(197, 180, 152, 0.6);
     position:relative;
   z-index:20;
  }

/* classical Literature: Introduction */



.introhead{padding:3rem;}

.litintrocont1{
	
	grid-template-areas: 	
									
									" .  litintro1 .  "
									" .  litintro2 .  "
									" . vidtitle2 . "
									" . vidgridlit2 .  "
									" . litintro3 .  "
									" . litintro4 . "
									" . vidtitle1 . "
									" . vidgridlit1 .  "
									" . litintro5 . "
									" . litintro6 . "
									" . vidtitle3 . "
									" . vidgridlit3 . "
									" . litintro7 . "
									" . vidtitle4 . "
									" . vidgridlit4 . "
									" . litintro8 . " 
									" . vidtitle5 . "
									" . vidgridlit5 . "
									;
	
}




.litintrocont1, .litrexcont1, .littextcont1{	
			display: grid;
			width:100%;
			height: auto;
			margin:auto;
			justify-content: space-evenly;
			grid-template-columns:20% 60% 20%;
			grid-auto-rows:auto;
			grid-column-gap: 40px;								
			grid-row-gap: 12px;
			background-color: #cac3b4;
			padding:50px;
			overflow:hidden;}
@media only screen and (max-width:1050px) { 
.litintrocont1, .litrexcont1, .littextcont1{			
			grid-template-columns:15% 70% 15%;
			}
}

@media only screen and (max-width:900px) { 
.litintrocont1, .litrexcont1, .littextcont1{			
			grid-template-columns:10% 80% 10%;
			}
}

@media only screen and (max-width:700px) { 
.litintrocont1, .litrexcont1, .littextcont1{			
			grid-template-columns:5% 90% 5%;
			}
}

@media only screen and (max-width:600px) { 
.litintrocont1, .litrexcont1, .littextcont1{			
			grid-template-columns:0% 100% 0%;
			grid-column-gap: 0px;
			padding:15px;
			}
}

 .litintrotext1{ 
  
  font-size: 16px;
  grid-area:litintro1;
  }
.litintrotext2{ 
  
  font-size: 16px;
  grid-area:litintro2;
  padding-bottom:1rem;
  }

.litintrotext3{ 
  
  font-size: 16px;
  grid-area:litintro3;
  padding-top:1rem;
  }
.litintrotext4{ 
  
  font-size: 16px;
  grid-area:litintro4;
   padding-bottom:1rem;
  }
.litintrotext5{ 
  
  font-size: 16px;
  grid-area:litintro5;
  padding-top:1rem;
  }
.litintrotext6{ 
  
  font-size: 16px;
  grid-area:litintro6;
  padding-bottom:1rem;
  }
.litintrotext7{ 
  
  font-size: 16px;
  grid-area:litintro7;
  padding-top:1rem;
  padding-bottom:1rem;
  }
.litintrotext8{ 
  
  font-size: 16px;
  grid-area:litintro8;
  padding-top:1rem;
  padding-bottom:1rem;
  }

.vidgridlit1{   
  grid-area:vidgridlit1;
 display: flex;
  align-items: center;
  justify-content: center;
 
}

.vidgridlit2{   
  grid-area:vidgridlit2;
 display: flex;
  align-items: center;
  justify-content: center;
}

.vidgridlit3{   
	grid-area:vidgridlit3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vidgridlit4{   
  grid-area:vidgridlit4;
 display: flex;
  align-items: center;
  justify-content: center;
}

.vidgridlit5{   
  grid-area:vidgridlit5;
 display: flex;
  align-items: center;
  justify-content: center;
}
/*video intro css*/
.vidtitlelitintro1{	grid-area:vidtitle1;
					background-color:#c5b498;
					padding:1.5rem;
					margin-bottom:0.8rem;}
.vidtitlelitintro2{grid-area:vidtitle2;
					background-color:#c5b498;
					padding:1.5rem;
					margin-bottom:0.8rem;}
.vidtitlelitintro3{grid-area:vidtitle3;
					background-color:#c5b498;
					padding:1.5rem;
					margin-bottom:0.8rem;}
.vidtitlelitintro4{grid-area:vidtitle4;
					background-color:#c5b498;
					padding:1.5rem;
					margin-bottom:0.8rem;}
.vidtitlelitintro5{grid-area:vidtitle5;
					background-color:#c5b498;
					padding:1.5rem;
					margin-bottom:0.8rem;}

/*image css*/

.port{width:40%; padding-top:3rem; padding-bottom:3rem;}

.land{width:40%; padding-top:0.5rem; padding-bottom:0.5rem;}
.dom{width:100%; padding:2.5rem; }
.con{width:100%; padding:1.5rem; }

.impad{margin-top:2rem;}
.impadbot{margin-bottom:1.8rem;}

.gridimage1{
	  grid-area:pimage1;
 display: flex;
  align-items:center;
  justify-content:center;
background-color:rgb(34, 33, 27,0.2);
 border: 2px solid #91800b;
 position:relative;
	}
	  .gridimage1:before {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 1;
  top:12px;
  left:12px;
  right:12px;
  bottom:12px;
 border: 2px solid rgb(34, 33, 27,0.3);
  }
  	  .gridimage1:after {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 1;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
	border: 12px solid #c0c5c0;);
  }

.picaccred0{
grid-area:picaccred1;
padding-left:15px;
padding-right:15px;
font-size:0.8rem;
}
.picaccred{
grid-area:picaccred1;
padding-left:15px;
padding-right:15px;
margin-top:-10px;
font-size:0.8rem;
}

.gridimage2{
	  grid-area:pimage2;
 display: flex;
  align-items:center;
  justify-content:center;
background-color:rgb(34, 33, 27,0.2);
 border: 2px solid #91800b;
 position:relative;
	}
	  .gridimage2:before {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 1;
  top:12px;
  left:12px;
  right:12px;
  bottom:12px;
 border: 2px solid rgb(34, 33, 27,0.3);
  }
  	  .gridimage2:after {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 1;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
	border: 12px solid #c0c5c0;);
  }
.picaccred2{
grid-area:picaccred2;
padding-left:15px;
padding-right:15px;
margin-top:-10px;
font-size:0.8rem;
}
.gridimage3{
	  grid-area:pimage3;
 display: flex;
  align-items:center;
  justify-content:center;
background-color:rgb(34, 33, 27,0.2);
 border: 2px solid #91800b;
 position:relative;
	}
	  .gridimage3:before {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 1;
  top:12px;
  left:12px;
  right:12px;
  bottom:12px;
 border: 2px solid rgb(34, 33, 27,0.3);
  }
  	  .gridimage3:after {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 1;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
	border: 12px solid #c0c5c0;);
  }
.picaccred3{
grid-area:picaccred3;
padding-left:15px;
padding-right:15px;
margin-top:-10px;
font-size:0.8rem;
}
.gridimage4{
	  grid-area:pimage4;
 display: flex;
  align-items:center;
  justify-content:center;
background-color:rgb(34, 33, 27,0.2);
 border: 2px solid #91800b;
 position:relative;
 
	}
	  .gridimage4:before {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 1;
  top:12px;
  left:12px;
  right:12px;
  bottom:12px;
 border: 2px solid rgb(34, 33, 27,0.3);
  }
  	  .gridimage4:after {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 1;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
	border: 12px solid #c0c5c0;);
  }
.picaccred4{
grid-area:picaccred4;
padding-left:15px;
padding-right:15px;
margin-top:-10px;
font-size:0.8rem;
}
.gridimage5{
	  grid-area:pimage5;
 display: flex;
  align-items:center;
  justify-content:center;
background-color:rgb(34, 33, 27,0.2);
 border: 2px solid #91800b;
 position:relative;
 
	}
	  .gridimage5:before {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 1;
  top:12px;
  left:12px;
  right:12px;
  bottom:12px;
 border: 2px solid rgb(34, 33, 27,0.3);
  }
  	  .gridimage5:after {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 1;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
	border: 12px solid #c0c5c0;);
  }
.picaccred5{
grid-area:picaccred5;
padding-left:15px;
padding-right:15px;
margin-top:-10px;
font-size:0.8rem;
}




/*image css*/



					
/*literature themes*/ /*literature themes*/ /*literature themes*/ /*literature themes*/ 

/*container typography*/
.unpad{margin-top:-1rem;}
.munpad{margin-top:-1.5rem; padding-right:1rem;}
.cent{position:relative; text-align:center;}
.lefty {position:relative; text-align:right;}
.litthemecont1 p {margin-bottom: 0.8rem;}
.litthemecont1 button, .litthemecont1 input[type="submit"], .litthemecont1 input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	width:100%
}   /* removes button styling */



.fed             {  font-size:1.5rem; font-weight:500; 
					padding:1.5rem; position:relative; z-index:10; margin-top:80px;
}
.fed:after {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 1;
  top:-8px;
  left:-8px;
  right:-8px;
  bottom:-8px;
 border: 2px solid #91800b;
  }
  
  .fed:before {
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 1;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
 border: 6px solid rgb(34, 33, 27,0.2);
  }
/*.purple:hover{background-color:#d67cbf;}
.red:hover{background-color:#bc7771;}
.blued:hover{background-color:#587787;}
.bluel:hover{background-color:#74b2ae;}
.green:hover{background-color:#669f4c;} */
.toggreen{margin-top:0.8rem;}
.myweebtn{border:2px solid brown;}
.btn:focus {
  outline-color: red;
}
.green{background-color:#669f4c;}
.bluel{background-color:#74b2ae;}
.purple{background-color:#d67cbf;}
.red{background-color:#bc7771;}
.blued{background-color:#587787;}
.bluedtxt{background-color:#587787;}
.fedpurple{border: 8px solid rgb(255, 243, 205); } 
.fedred{ border: 8px solid rgb(255, 243, 205);} 
.fedblued{ border: 8px solid rgb(255, 243, 205);} 
.fedbluel{ border: 8px solid rgb(255, 243, 205);} 
.fedgreen{ border: 8px solid rgb(255, 243, 205);}
/*question css*/
.kumar{margin-top:1rem; margin-bottom:1rem;}
.space{padding-top:24px; line-height:32px; }
.togg1{ width:100%; background-color:#e2c89c; border:5px solid color:#c5b498; box-shadow:none; border-radius:20px; padding:10px 10px; 
}
.togg1:hover{background-color:#c2ab85;}
.query{background-color:rgb(255, 243, 205,0.5); position:relative; text-align:center; border: 2px solid #7b4a2d; border-radius:20px; padding-top:0.2rem; padding-bottom:0.2rem; margin-bottom:0!important;}

.query:hover:after{
	pointer-events: none;
  content: " ";
  position: absolute;
  z-index: 10;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 5px solid #d9a840;
border-radius:20px;
opacity:0.5;
  
}
.litthemecont1 {	
			display: grid;
			width:100%;
			height: auto;
			justify-content: space-evenly;
			grid-template-columns:20% 60% 20%;
			grid-auto-rows:auto;
			grid-template-areas: 	
									
									"  . littheme1 .  "
									" . litthemehead3 . "
									" . pimage3 . "
									" . picaccred3 . "
									"  . littheme2  . "
									" . litthemehead4 . "
									" . pimage4 . "
									" . picaccred4 . "
									"  . littheme3   . "
									" .  vidtitle1 .   "
									" . vidgridlittheme1 .	"
									" . litthemehead5 . "
									" . pimage5 . "
									" . picaccred5 . "
									"  . littheme4   . "
									" . litthemehead2 . "
									" . pimage2 . "
									" . picaccred2 . "
									"  . littheme5   . "
									" . litthemehead1 . "
									" . pimage1 . "
									" . picaccred1 . "
									"  . littheme6   . "
									;
									
									
									
									
									
	grid-column-gap: 40px;								
  grid-row-gap: 12px;
	background-color: #cac3b4;
	padding:50px;
	overflow:hidden;}
@media only screen and (max-width:1050px) { 
.litthemecont1{			
			grid-template-columns:15% 70% 15%;
			}
}

@media only screen and (max-width:900px) { 
.litthemecont1{			
			grid-template-columns:10% 80% 10%;
			}
}

@media only screen and (max-width:700px) { 
.litthemecont1{			
			grid-template-columns:5% 90% 5%;
			}
}

@media only screen and (max-width:600px) { 
.litthemecont1{			
			grid-template-columns:0% 100% 0%;
			grid-column-gap: 0px;
			padding:15px;
			}
}

.litthemetext1{ 
  
  font-size: 16px;
  grid-area:littheme1;
  
  }
.litthemetext2{ 
  
  font-size: 16px;
  grid-area:littheme2;

  }

.litthemetext3{ 
  
  font-size: 16px;
  grid-area:littheme3;
  }
.litthemetext4{ 
  
  font-size: 16px;
  grid-area:littheme4;
   
  }
.litthemetext5{ 
  
  font-size: 16px;
  grid-area:littheme5;

  }
.litthemetext6{ 
  
  font-size: 16px;
  grid-area:littheme6;
  padding-bottom:1rem;
  }
  .litthemehead1{ 
  
  font-size: 16px;
  grid-area:litthemehead1;
  padding-bottom:1rem;
  }
    .litthemehead2{ 
  
  font-size: 16px;
  grid-area:litthemehead2;
  padding-bottom:1rem;
  }
      .litthemehead3{ 
  
  font-size: 16px;
  grid-area:litthemehead3;
  padding-bottom:1rem;
  }
        .litthemehead4{ 
  
  font-size: 16px;
  grid-area:litthemehead4;
  padding-bottom:1rem;
  }
          .litthemehead5{ 
 
  font-size: 16px;
  grid-area:litthemehead5;
  padding-bottom:1rem;
  }
  
 .litthemeq1{ 
  font-size: 16px;
  grid-area:q1;
  padding:2rem;
  display:none;
  background-color:rgb(255, 243, 205,0.5);
  border: 2px solid #7b4a2d;
  border-radius:20px;
  margin-top:10px;
  }
  
  .vidgridlittheme1{   
  grid-area:vidgridlittheme1;
 display: flex;
  align-items: center;
  justify-content: center;
 }

.litrexcont1{
	
	grid-template-areas: 	
									
									" .  litrex1 .  "
									;
	}
.litrex1{ 
  font-size: 16px;
  grid-area:litrex1;
   }
   .litrex1 p{ 
  margin-bottom:1.2rem;
}
.littextcont1{
	display: grid;
			width:100%;
			height: auto;
			justify-content: space-evenly;
			grid-template-columns:20% 60% 20%;
			grid-auto-rows:auto;
	grid-template-areas: 	
									
									" . littextvid1 . "
									" . littext1 .  "
									
									;
	}
.littext1{ 
  font-size: 16px;
  grid-area:littext1;
   }
.littextvid1{ 
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area:littextvid1;
   }

/* FULL POPOVER CSS FOR ALL POPOVERS */
/*.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 276px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.popover.top {
  margin-top: -10px;
}
.popover.right {
  margin-left: 10px;
}
.popover.bottom {
  margin-top: 10px;
}
.popover.left {
  margin-left: -10px;
}
.popover-title {
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0;
}
.popover-content {
  padding: 9px 14px;
}
.popover > .arrow,
.popover > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.popover > .arrow {
  border-width: 11px;
}
.popover > .arrow:after {
  content: "";
  border-width: 10px;
}
.popover.top > .arrow {
  bottom: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-color: #999;
  border-top-color: rgba(0, 0, 0, .25);
  border-bottom-width: 0;
}
.popover.top > .arrow:after {
  bottom: 1px;
  margin-left: -10px;
  content: " ";
  border-top-color: #fff;
  border-bottom-width: 0;
}
.popover.right > .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-right-color: #999;
  border-right-color: rgba(0, 0, 0, .25);
  border-left-width: 0;
}
.popover.right > .arrow:after {
  bottom: -10px;
  left: 1px;
  content: " ";
  border-right-color: #fff;
  border-left-width: 0;
}
.popover.bottom > .arrow {
  top: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #999;
  border-bottom-color: rgba(0, 0, 0, .25);
}
.popover.bottom > .arrow:after {
  top: 1px;
  margin-left: -10px;
  content: " ";
  border-top-width: 0;
  border-bottom-color: #fff;
}
.popover.left > .arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: #999;
  border-left-color: rgba(0, 0, 0, .25);
}
.popover.left > .arrow:after {
  right: 1px;
  bottom: -10px;
  content: " ";
  border-right-width: 0;
  border-left-color: #fff;
}
*/