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

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

	
	body{font-family: 'Open Sans', sans-serif;}
.free{height:auto; width:100%; background-color:rgb(96, 61, 39); text-align:center; line-height:100px; }
.freelink{display: inline-block;
  vertical-align: middle;
line-height: 30px;
color:white;
padding-left:5px; padding-right:5px;}
/* sw specific css start */

.twitcont{width:100%; height:auto; grid-area:twita; padding-top:4rem;}
@media only screen and (max-width:992px){.twitcont {display:none; width:100%; height:auto; grid-area:twita;}}
.twitter-timeline{ max-height:3450px; max-width:300px;}



.banner{ background-color:#080a20;

 }
.iconic{width:35px; height:auto;}

/*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: 99; /* Make sure it does not overlap */
  border: 2px solid #174d5b; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgb(33, 113, 133,0.7); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #174d5b; /* Add a dark-grey background on hover */
}

.gridcont1{	display: grid;
			width:100%;
			height: auto;
			justify-content: space-evenly;
			grid-template-columns:30% 30% 25%;
			grid-template-rows:auto auto auto  auto auto auto auto auto auto auto auto auto auto;
			grid-template-areas: 	"swtext1 wstext1 twita"
									"swimg   wsimg   twita"
									"swtext2 wstext2 twita"
									"bord1 bord1 twita"
									"book1 blurb1 twita"
							
									"amad1 . twita"
									"bord2 bord2 twita"
									"book2 blurb2 twita"
									"amad2 . twita"
									"bord3 bord3 twita"
									"book3 blurb3 twita"
									"amad3 . twita";
									"bord4 bord4 twita";
  grid-gap: 15px;
	background-color: #8ff7f8;
	padding: 10px;
	overflow:hidden;}
@media only screen and (max-width:992px) { 
.gridcont1{display: grid;
width:100%;
  height: auto;
  justify-content: space-evenly;
  grid-template-columns:45% 45%;
  grid-template-rows:auto auto auto  auto auto auto auto  auto auto auto auto auto auto;
  grid-template-areas: 				"swtext1 wstext1 "
									"swimg   wsimg   "
									"swtext2 wstext2 "
									"bord1 bord1 "
									"book1 blurb1 "
							
									"amad1 . "
									"bord2 bord2 "
									"book2 blurb2 "
									"amad2 . "
									"bord3 bord3 "
									"book3 blurb3 "
									"amad3 . "
									"bord4 bord4 ";
						
  
  grid-gap: 10px;
  background-color: #8ff7f8;
padding: 10px;}
}
@media only screen and (max-width:700px) { 
.gridcont1{display: grid;
width:100%;
  height: auto;
  justify-content: space-evenly;
  grid-template-columns:100%;
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto  ;
  grid-template-areas: 	"swtext1" 
						"swimg"
						"swtext2"
						"wstext1"
						"wsimg"
						"wstext2"
						"bord1" 
						"book1" 
						"blurb1"
						"amad1" 
						"bord2"
						"book2" 
						"blurb2"
						"amad2" 
						"bord3" 
						"book3" 
						"blurb3"
						"amad3" 
						"bord4";
  grid-gap: 10px;
  background-color: #8ff7f8;
padding: 10px;}
}

.image1{object-fit: cover;
  width: 100%;
max-height: 100vh;}

.border1{grid-area:bord1; border-top:7px solid rgb(33, 113, 133,0.3); border-bottom:14px solid rgb(33, 113, 133,0.7); margin-left:-20%; margin-right:-70%; overflow:hidden; height:0%;}
.border2{grid-area:bord2; border-bottom:6px solid rgb(64, 49, 246,0.5); border-top:6px solid rgb(64, 49, 246,0.7); margin-left:-20%; margin-right:-70%; overflow:hidden; height:0%;}
.border3{grid-area:bord3; border-bottom:6px solid rgb(64, 49, 246,0.5); border-top:6px solid rgb(64, 49, 246,0.7); margin-left:-20%; margin-right:-70%; overflow:hidden; height:0%}
.border4{grid-area:bord3; border-bottom:6px solid rgb(64, 49, 246,0.5); border-top:6px solid rgb(64, 49, 246,0.7); margin-left:-20%; margin-right:-70%; overflow:hidden; height:0%}





.griditem1{ 
  text-align: left;
  padding: 20px 20px;
  font-size: 16px;
  grid-area:wstext1;
  
  }
.griditem1b{ 
  text-align: left;
  padding: 20px 20px;
  font-size: 16px;
  grid-area:wstext2;

}

.griditem2{ 
  text-align: left;
  padding: 20px 20px;
  font-size: 16px;
  grid-area:swtext1;
  
  }

.griditem2b{ 
  text-align: left;
  padding: 20px 20px;
  font-size: 16px;
  grid-area:swtext2;
  
}
.swhead{font-size:2rem; color:#0c0b49; display:inline;}
.wshead{font-size:2rem; color:#0c0b49; display:inline;}

.gridimg1{ background-color:#51c3c5;
   padding: 20px 20px;
  font-size: 16px;
  grid-area:wsimg;
 display:flex;
align-items:center;
justify-items:center;

 }

.gridimg2{
	background-color:#51c3c5;
  text-align: left;
  padding: 20px 20px;
  font-size: 16px;
  grid-area:swimg;


}
.centerbooks:{ display:flex;
align-items:center;
justify-self:center;}


.adimage{
	object-fit: cover;
  width: 120px;
max-width:100px;
padding-bottom:5%;
}
@media screen only and (max-width:700px){.adimage{
	object-fit: cover;
  width: 5%;
}
}
.adimagecont1 {
grid-area:amad1;
text-align:center;


}

.adimage2{		object-fit: cover;
  width: 30%;


}
.adimagecont2 {
grid-area:amad2;
text-align:center;
}
.adimage3{
	object-fit: cover;
  width: 30%;


}
.adimagecont3 {
grid-area:amad3;
text-align:center;

}

.covimage{width:50%; height:auto; max-width:300px;
}
@media only screen and (min-width:1200px){.covimage{width:70%; height:auto;
}
}
@media only screen and (max-width:1199px){.covimage{width:75%; height:auto;
}
}
@media only screen and (max-width:1100px){.covimage{width:80%; height:auto;
}
}
@media only screen and (max-width:992px){.covimage{width:60%; height:auto;
}
}
@media only screen and (max-width:850px){.covimage{width:70%; height:auto;
}
}
@media only screen and (max-width:750px){.covimage{width:90%; height:auto;
}
}
@media only screen and (max-width:700px){.covimage{width:40%; height:auto; padding-top:5%;
}
}




.swimage1{ 
	text-align: center;
	align-self:center;
	grid-area:book1;
 
}
.swimage2{
	grid-area:book2;
   text-align:center;
   align-self:center;
   
}
.swimage3{
	text-align:center;
	align-self:center;
	grid-area:book3;
  
}

.sw1blurb{
	grid-area:blurb1;
	padding:5%;
	}
.sw2blurb{
	grid-area:blurb2;
	padding:5%;
	padding-top:15%;}
.sw3blurb{
grid-area:blurb3;
padding:5%; }



/* sw specific css end */






.pagehead{}
iframe{max-height:378px; max-width:672px;}
/*sectionstyles*/

.taskbox {background-color:rgb(201, 192, 245); border-top:0.3rem solid #4a8089; border-bottom:0.2rem solid #4a8089;} 
.taskans{border-top:0.2rem solid 
#4a8089; border-bottom:0.2rem solid #4a8089;}

.taskansa{border-top:0.2rem solid 
#4a8089; }
.taskansb{}
.taskansc{border-bottom:0.2rem solid #4a8089;}

.bordersource{background-color:#eff592; border-top: 0.2rem solid #4a8089; padding-bottom:0.5rem; }

.borderquestion{padding-top:1rem; background-color:rgb(201, 192, 245); border-bottom: 0.2rem solid rgb(89, 124, 164);}

/*typography*/
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;}
.stated { background-color:rgb(89, 124, 164); color:white;}

/*under images and video text and attributions*/

a{display:inline;}
.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*/

.facts-cold-m{font-weight:600; border:0.2rem solid #1d8bd6; padding:2rem; background-color:#b0d8f3;}

.facts-cold{font-size:20px; font-weight:500;}

.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);
}



/*.factstxt{padding:1rem;}*/
.keyissue{font-size:24px; color:gold; background-color:grey;}
.dyk{font-size:24px; color:purple; background-color:grey;}
.bsphoto{padding-left:30%; padding-right:30%;}

/*navbar customisation */

/* change the background color */
.navbar-custom {
    background-color: #51c3c5;
	
}
/* 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;
}



/*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;} 

.menu-text-1{ margin-top:1rem; width:30rem; background-color:#6aa0a1; }
 .menu-text-2{  font-size:1rem; color:#0a2f30; padding-left:1rem; padding-top:0.5rem;}
 .menu-text-longer{ scrollable-menu 
    height: 85vh;
    max-height:85vh;
    overflow-x: hidden;
	margin-top:1rem; width:30rem; background-color:f8f9fa;
}

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


.glow-on-hover {
	outline: 0;
    width: 60px;
    height: 30px;
    border: none;
    outline: none;
    color: #062c2d;
	
    background: ##c4e5e6;
    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: #c4e5e6;
    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;}


/*image style */

.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;
}

/*margins and padding*/
.mar-7{margin-left:7rem;}
.mar-6{margin:6rem;}
.mar-5{margin:5rem;}
.mar-4{margin:4rem;}
.mar-3{margin:3rem;}
.mar-1pt5{margin:1.5rem;}

.marl-7{margin-left:7rem;}
.marl-6{margin-left:6rem;}
.marl-5{margin-left:5rem;}
.marl-4{margin-left:4rem;}
.marl-3{margin-left:3rem;}
.marl-1pt5{margin-left:1.5rem;}
.marb-pt2 {margin-left:0.2rem;}

.marr-7{margin-right:7rem;}
.marr-6{margin-right:6rem;}
.marr-5{margin-right:5rem;}
.marr-4{margin-right:4rem;}
.marr-3{margin-right:3rem;}
.marr-1pt5{margin-right:1.5rem;}
.marb-pt2 {margin-right:0.2rem;}

.marb-7{margin-bottom:7rem;}
.marb-6{margin-bottom:6rem;}
.marb-5{margin-bottom:5rem;}
.marb-4{margin-bottom:4rem;}
.marb-3{margin-bottom:3rem;}
.marb-2{margin-bottom:2rem;}
.marb-1{margin-bottom:1rem;}
.marb-pt5{margin-bottom:0.5rem;}
.marb-1pt5{margin-bottom:1.5rem;}
.marb-pt2 {margin-bottom:0.2rem;}

.mart-7{margin-top:7rem;}
.mart-6{margin-top:6rem;}
.mart-5{margin-top:5rem;}
.mart-4{margin-top:4rem;}
.mart-3{margin-top:3rem;}
.mart-1pt5{margin-top:1.5rem;}
.mart-pt2 {margin-top:0.2rem;}

.padx-5{padding-left:5rem; padding-right:5rem;}
.padx-6{padding-left:6rem; padding-right:6rem;}
.padx-7{padding-left:7rem; padding-right:7rem;}
.padx-8{padding-left:8rem; padding-right:8rem;}

/* footer styles  */

.footstyle{ background-color: #080725; color: #d0e6e9; border:solid 1rem #0e0b47}

.innerfoot{text-align:left !important; background-color: #030319; }
.py-3{background-color: #8ff7f8;}
.twitin{margin:0.5rem;}
.facein{margin:0.5rem;}



/*navbar animations*/

/*mqs*/

/*--Global Styles--*/


/*--Button Styles--*/

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

font-weight:500;
font-size:1.05rem;
color:#0c0b49;
padding:1.7rem 1.5rem;
}
.navbuttontext:hover {font-family: 'Lato', sans-serif;

font-weight:500;
font-size:1.05rem;
color:#d7eef3;
padding:1.7rem 1.5rem;
}

/*navgif css*/
.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;}


.hamstyle{color:red; background-color:#121d8f;}