/* Top-level menu styles */
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  display: inline-block;
  position: relative;
}

.menu li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #ffffff;
}

/* Submenu styles */
.submenu ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff; /* Background color for submenus */
  border: 1px solid #ccc; /* Border color for submenus */
  z-index: 1000;
}

.submenu:hover ul {
  display: block;
}

.submenu ul li {
  display: block;
}

.submenu ul li a {
  padding: 10px;
  color: #333; /* Text color for submenus */
  text-decoration: none;
}

/* Styles for the entire navigation bar */
.navbar {
  background: #1B4456; /* Background color for the entire navbar */
  color: #ffffff; /* Text color for the entire navbar */
}





/* ------ Section 1 - Global Body, Font and Link Settings ------ */

body {
font-family: Arial;
font-size: 20px;
margin: 0;
padding: 0;
background-attachment: fixed;
background: url("/image-files/bkgpattern.png");
}

h1, h2, h3, h4, h5, h6 {
clear: both;
color: #1B4456;
margin: 3%;
}

h2, h3, h4, h5 {
border-bottom: 1px ridge #e8e7d7;
}

h1 {
}

h2 {
}

h3 {
}

h6 {
text-align: left;
}

blockquote {
margin: 12px 56px;
color: #006;
font-size: 100%;
line-height: 20px;
}

code {
color: #332206;
}


a:link img {
border: 0;
}

blockquotenew {
margin: 0px 0px;
color: #39412C;
font-size: 100%;
line-height: 15px;
}

blockquotenew-t3 {
margin: 0px 0px;
color: #39412C;
font-size: 100%;
line-height: 20px;
font-family: 'Courier New', Courier, monospace;
}

p.picture{
  font-style: italic; color: rgb(204, 153, 51);
} /* -- paragraph picture text -- */

/* -- General Link Styling -- */

a:link {
text-decoration: none;
color: #1B4456;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}

a:visited {
color: #1B4456;
}

a:hover {
color: #c93;
}



/* ------ ESTRUCTURA GLOBAL ------- */

#PageWrapper {
max-width: 1366px;
margin-left: auto;
margin-right: auto;
float: none;
}

/* ------ HEADER STANDARD ------- */

#Header {
z-index: 1;
width:100%;
float: left;
background-color: #032635;
}

#Logo {
background-image: url("https://www.north-korea-travel.com/image-files/logo.png");
 background-repeat: no-repeat; 
 background-size: 100%;
 width: 256px;
 height: 86px;
 float: left;
 margin-left: 3%;
 margin-top: 2px;
 margin-bottom: 2px;
}

#Flags {
float: right;
}

/* ------ SLIDESHOW DE PAGINA DE INICIO ------- */

#Slideshow {
	clear: both;
	float: left;
	margin:0;
	width: 100%;
	display: block;
}

#Slideshow .slidetext {
	position: absolute;
	padding: 1%;
	color: #FFF;
	font-family: sans-serif;
	background-color: rgba(0, 0, 0, 0.51);
	font-weight: bold;
	text-align: center;
}

#Slideshow .slidetext .style1{
	font-size: 110px;
	font-style: italic;
	color: #FC0;
}

#Slideshow .slidetext .style1-russian{
	font-size: 65px;
	font-style: italic;
	color: #FC0;
}

#Slideshow .slidetext .style2{
	font-size: 70px;
	font-style: italic;
	color: #E796AD;
}

#Slideshow .slidetext .style3{
	font-size: 64px;
	font-style: italic;
	color: #FC0;
}

#Slideshow .slidetext .style3-russian{
	font-size: 39px;
	font-style: italic;
	color: #FC0;
}

#Slideshow .slidetext .style4{
	font-size: 66px;
	font-style: italic;
	color: #AAE7FF;
}

#Slideshow .group {
	top: 0px;
	width: 392px;
	font-size: 51px;
}

#Slideshow .featured {
	bottom: 0px;
	width: 500px;
	font-size: 49px;
}

#Slideshow .responsible {
	bottom: 0px;
	width: 420px;
	font-size: 49px;
}

#Slideshow .responsible-russian {
	bottom: 0px;
	width: 420px;
	font-size: 28px;
}

#Slideshow .experts {
	bottom: 0px;
	right: 0px;
	width: 410px;
	font-size: 51px;
}

#Slideshow .experts-russian {
	bottom: 0px;
	right: 0px;
	width: 410px;
	font-size: 29px;
}

#Slideshow .yearly {
	top: 0px;
	right: 0px;
	width: 410px;
	font-size: 41px;
}

#Slideshow .yearly-russian {
	top: 0px;
	right: 0px;
	width: 410px;
	font-size: 22px;
}

#Slideshow .bridges {
	top: 0px;
	right: 0px;
	width: 410px;
	font-size: 41px;
}
#Slideshow .bridges-russian{
	top: 0px;
	right: 0px;
	width: 410px;
	font-size: 23px;
}

#Slideshow .independent {
	bottom: 0px;
	width: 570px;
	font-size: 51px;
}

.social {
	width: 100%;
	float: left;
	height: 39px;
	background: -moz-linear-gradient(top, #1B4456 0%, #003751 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1B4456), color-stop(100%,#003751));
	background: -o-linear-gradient(top, #1B4456 0%,#003751 100%);
	background: -ms-linear-gradient(top, #1B4456 0%,#003751 100%);
}

/* ------ CONTENIDO ------- */

#Content {
	background: beige;
	float: left;
	width: 100%;
}

/* ------ TEXT-HIGHLIGHT ------ */

::-moz-selection { /* Code for Firefox */
  color: black;
  background: rgb(255, 204, 0);
}

::selection {
  color: black;
  background: rgb(255, 204, 0);
}

/*CONTENIDO:ENVOLTURA*/

#ContentWrapper {
	width: 80%;
	margin-left:10%;
	margin-right:10%;
	background-color: #ffffff;
	float:left;
}

/*CONTENIDO:PRINCIPAL*/

#ContentColumn {
	float:left;
	width:66%;
	text-align: center;
	padding: 2%;	
}

#ContentColumn p{
	text-align: left;
	padding: 0;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#ContentColumnGroupTours {
	float:left;
	margin-left: 10%;
	margin-right: 10%;
	width:80%;
	text-align: center;
}

#ContentColumnGroupTours p{
	text-align: left;
	padding: 0;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/*CONTENIDO:TAMAÑO IMAGENES*/

#ContentColumn .imgXLarge {
	width: 100%;
	max-width: 700px;
}

#ContentColumn .imgMiddle535 {
	width: 100%;
	max-width: 535px;
}

#ContentColumn .imgMiddle489 {
	width: 100%;
	max-width: 489px;
}

#ContentColumn .imgMiddle455 {
	width: 100%;
	max-width: 455px;
}

#ContentColumn .leftImgLarge {
	width: 75%;
	max-width: 500px;
	float: left;
	margin-right: 3%;
}

#ContentColumn .rightImgLarge {
	width: 75%;
	max-width: 500px;
	float: right;
	margin-left: 3%;
}

#ContentColumn .leftImgMedium400 {
	width: 50%;
	max-width: 400px;
	float: left;
	margin-right: 3%;
}

#ContentColumn .leftImgMedium {
	width: 50%;
	max-width: 325px;
	float: left;
	margin-right: 3%;
}
#ContentColumn .rightImgMedium {
	width: 50%;
	max-width: 325px;
	float: right;
	margin-left: 3%;
}
#ContentColumn .leftImgSmall {
	width: 33%;
	max-width: 123px;
	float: left;
	margin-right: 3%;
}
#ContentColumn .rightImgSmall {
	width: 33%;
	max-width: 123px;
	float: right;
	margin-left: 3%;

}
#ContentColumn .chart-information {
	border: 1px solid white;
	background-color: rgb(216, 216, 224);
	text-align: left;
	color: rgb(25, 22, 115);
}

#ContentColumn .chart-rates {
	border: 1px solid white;
	border-color: FFFF66;
	background-color: cccccc;
	text-align: center;
	color: rgb(25, 22, 115);
}

#ContentColumnGroupTours .groupImg {
	width:100%;
	height: auto;
	max-width: 219px;
}

/*COLUMNA DERECHA*/

#ExtraColumn {
	float:left;
	width:30%;
	text-align: center;
}

#ExtraColumn h3 {
	background-color: #1B4456;
	padding: 2%;
	color: #ffffff;
}

.columntable{
  background-color: rgb(237, 230, 216);
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
}

.columntable p{
	text-align: justify;
	padding-left: 3%;
	padding-right: 3%;
}

#ExtraColumn ul{
	list-style:none;
	padding: 0;
}

#ExtraColumn ul li{
	padding: 1%;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

#ExtraColumn ul li:hover{
	color:white!important;
	background:#1B4456;
}

#ExtraColumn img{
	width: 100%;
	max-width: 230px;
}

#ExtraColumn .testimonials {
	margin-bottom: 5%;
}

#ExtraColumn .paypal {
	width: 100%;
	max-width: 123px;
}

/*Botones para social media*/

.media {

}

.social-button{
display: inline-block;
float: right;
background-repeat: no-repeat;
background-size: 100% auto;
cursor: pointer;
margin-left: 4px;
width: 30px;
height: 30px;
margin-top: 2px;
}

.fb{
background-image: url("/image-files/social-aa.png");
}

.twitter{
background-image: url("/image-files/social-bb.png");
}

.google{
background-image: url("/image-files/social-cc.png");
}

.pinterest{
background-image: url("/image-files/social-dd.png");
}

.tumblr{
background-image: url("/image-files/social-ee.png");
}

.reddit{
background-image: url("/image-files/social-ff.png");
}

.youtube{
background-image: url("/image-files/social-gg.png");
}

/* -- FOOTER -- */

#Footer {
width: 100%;
float:left;
background: -moz-linear-gradient(top, #1B4456 0%, #003751 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1B4456), color-stop(100%,#003751));
background: -o-linear-gradient(top, #1B4456 0%,#003751 100%);
background: -ms-linear-gradient(top, #1B4456 0%,#003751 100%);
text-align: center;
color: #ffffff;
}

#FooterWrapper {
width: 70%;
margin-left:15%;
margin-right:15%;
float:left;
}

#FooterWrapper .copyright {
	display: block;
	padding: 2%;
	text-align: left;
	float: left;
	width: 46%;
}

#FooterWrapper .footerlist {
	display: block;
	padding: 2%;
	margin: 0;
	text-align: right;
	float: right;
	width: 46%;
}

#FooterWrapper .footerlist li {
	display: inline-block;
	border-right: 1px solid #ffffff;
	padding-right: 3px;
}

#FooterWrapper .last-item {
	border: none!important;
}

#FooterWrapper .footerlist a:link{
	color: #ffffff;
	font-family: Arial;
	font-weight: normal;
	font-size: 13px;
}

#FooterWrapper .footerlist a:hover{
color: #c93;
}

#Footer .ExtraNav {
font-family: 'Times New Roman', Georgia;
font-size: 115%;
background-color: transparent;
width: 960px;
margin: 0px auto 0px auto;
padding: 20px 0 25px 0;
}

#Footer .ExtraNav ul {
list-style-type: none;
padding: 0;
}

#Footer .ExtraNav ul li {
display: inline;
background-color: transparent;
text-align: center;
border: none;
}

#Footer .ExtraNav a:link {
color: #a27d37;
font-weight: normal;
text-decoration: none;
font-weight: bold;
text-align: center;
padding: 0 10px;
}

#Footer .ExtraNav a:hover {
color: #ccc;
font-weight: normal;
text-decoration: none;
font-weight: bold;
text-align: center;
padding: 0 10px;
}


#Footer .ExtraNav a:visited {
color: #fff;
font-weight: normal;
text-decoration: none;
font-weight: bold;
text-align: center;
padding: 0 10px;
}


/* ------ Section 6 - Boxes ------ */

.CalloutBox {
background-color: #000;
width: 495px;
font-family: Georgia, 'Times New Roman', Palatino, serif;
border: 2px solid #ccc;
margin: 18px auto 24px auto;
padding: 5px 5px 5px 30px;
color: #a27d37;
}

.CalloutBox img {
margin: 5px;
}

.CalloutBox h3 {
color: #a27d37;
}

div.CalloutBox p {
margin: 13px;
}

p.CalloutBox {
padding: 13px;
}

div.CalloutBox h1,
div.CalloutBox h2,
div.CalloutBox h3,
div.CalloutBox h4,
div.CalloutBox h5,
div.CalloutBox h6 {
margin: 13px 0 0 13px;
}

.ReminderBox {          
background-color: #000;
width: 24%;
margin: 0 0 12px 18px;
float: right;             /* adding float enables text to flow around it */
color: #a27d37;
}

.ReminderBox h4 {
margin: 0;
padding: 2px;
text-transform: uppercase;
font-family: 'Times New Roman', Georgia;
text-align: center;
background-color: #fff;
color: #000;
}

.ReminderBox p {
font-size: 80%;
padding: 0 8px;
line-height: 120%;
}

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468 {
padding: 5px;
background-color: transparent;
border: 0px;
}

.AdSenseBoxExtraColumn {
float: right;
}

.AdSenseBoxLeft {
margin: 5px 18px 12px 18px;
float: left;
}

.AdSenseBoxRight {
margin: 0 18px 12px 18px;
float: right;
}

.AdSenseBoxCenter468 {
width: 468px;
margin: 0 auto 12px auto;
clear: both;
}


.ReturnToNavBox {
width: 100%;
border-bottom: 1px dotted #ccc;
border-top: 1px dotted #ccc;
margin: 15px auto 10px auto;
padding: 3px;
text-align: center;
}


.ReturnToNavBox a:hover {
color: #c93;
}

.ReturnToNavBox a:visited {
color: #000;
}

/* -- RSS Box -- */

#RSSbox {
width: 148px;
background-color: transparent;
border: 0px dotted #332206;
margin: 8px auto 10px 3px;
padding: 2px 2px 10px 2px;
font-size: 100%;
font-weight: bold;
color: #521;
line-height: 120%;
text-align: center;
}



/* ------ ESTILOS FRECUENTES ------ */

/*IMAGEN ANIMADA*/
.thumbnail a{
	position: relative;
	overflow: hidden;
	display: block;
	width: 76%;
	margin-left: auto;
	margin-right: auto;
}

.thumbnail a .overlay {
  position: absolute;
  color: #fff;
  background: rgba(0,0,0,0.5);
  top: 100%;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-out;
  font-weight: lighter;
  text-align-last: center;
  font-weight: lighter;
  font-size: 14px;
}

.thumbnail a:hover .overlay{
	top:0px;
	margin-top:0px;
	font-family: arial;
}

.Clear {
clear: both;
}

.Caption {
font-style: italic;
display: block;
margin-top: 5%;
margin-bottom: 5%;
}

/* -- floats -- */

.ItemRight {
float: right;
margin: 12px 0 12px 18px;
text-align: center;
}

.ItemCenter {
margin: 2px auto 12px auto;
text-align: center;
clear: both;
}

.ItemLeft {
float: left;
margin: 2px 18px 12px 0;
text-align: center;
}

#ContentColumn ul {
list-style-type: none;
padding-left: 0;
margin-left: 10px;
}

#ContentColumn li {
background: url("https://www.north-korea-travel.com/image-files/ktg-bullet.jpg") left top no-repeat;
padding-left: 15px;
margin-bottom: 10px;
background-position: 0px 5px;
} 

.pie-img {
	color: rgb(204, 0, 0); 
	font-weight: bold;
	display:block;
	margin-top: 2%;
	margin-bottom: 3%;
	margin-left: 3%;
	text-align: center;
	
	}

.updates {
	color: rgb(204, 0, 0); 
	font-weight: bold;
	display:block;
	margin-top: 5%;
	margin-bottom: 5%;
	margin-left: 3%;
	text-align: center;
}

.gold-description-img {
	color: rgb(165, 137, 93);
	font-style: italic;
	text-align: left;
	
	}

/* ------ NAVBAR ------ */

.navbar-fixed-top {
	width: 100%;
	float:left;
	text-align: center;
	background: -moz-linear-gradient(top, #1B4456 0%, #003751 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1B4456), color-stop(100%,#003751));
	background: -o-linear-gradient(top, #1B4456 0%,#003751 100%);
	background: -ms-linear-gradient(top, #1B4456 0%,#003751 100%);
	z-index:100;
}

nav {
	width: 100%;
	text-align: center;
	float: left;
	background: -moz-linear-gradient(top, #1B4456 0%, #003751 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1B4456), color-stop(100%,#003751));
	background: -o-linear-gradient(top, #1B4456 0%,#003751 100%);
	background: -ms-linear-gradient(top, #1B4456 0%,#003751 100%);
}

.menu{
display:block;
margin: 0;
padding: 0;
border-top: 3px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.4); 
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.4); 
box-shadow: 0 2px 5px rgba(0,0,0,1);
z-index:100;
}
 
.menu li{
display: inline-block;
position: relative;
z-index:100;
}
 
.menu li a {
font:600 13px/1.2 "Open Sans", Helvetica, Arial, sans-serif;
text-decoration:none;
padding:15px;												/*TAMAÑO DE LA CAJA DEL PRIMARY MENU*/
display:block;
color:#ffffff;
 
-webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}
 
.menu li a:hover, .menu li:hover > a{
color:rgb(28, 28, 157);
background:#D5D8EA;
}

/* hide the second level menu */
.menu ul {display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 45px;													/*ALTURA A LA QUE APARECE LA CAJA DEL SECOND LEVEL MENU*/
left: 0px;
background: #ffffff;
}
 
/* display second level menu on hover */
.menu li:hover > ul{ 
display: block;
}
 
.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}
 
.menu ul li a {font-size:12px;
font-weight:normal;
display:block;
color:rgb(28, 28, 157);
border-left:3px solid #ffffff;
background:#ffffff;}
 
.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #9CA3DA;
color:#797979;
}

/* change level 3 menu positions */
.menu ul ul {
	left: 149px;
	top: 0px;
}

/* mobile menu options */

.mobile-menu{
	display:none;
	width:94%;
	padding:3%;
	background:#3E4156;
	color:#ffffff!important;
	text-transform:uppercase;
	font-weight:600;
}
.mobile-menu:hover{
	background:#3E4156;
	color:#ffffff;
	text-decoration:none;
}



/* -- Related Pages Block -- */
#PageWrapper .RelatedPagesBlock ul {
    padding:0;
    margin:0;
    list-style:none;
}
/* down with thumbnail */
#PageWrapper .RelatedPagesBlock ul.down .relatedPagesThumbnail {
    float:left;
    margin-right:10px;
 }
 #PageWrapper .RelatedPagesBlock ul.down .relatedPagesThumbnail a {
    display: block;
    width:50px;
    height:50px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/ssimgs/image-placeholder.png);
 }
 #PageWrapper .RelatedPagesBlock ul.down h3 {
    margin-top:0;
    margin-bottom:0;
 }
 #PageWrapper .RelatedPagesBlock ul.down p {
    margin:0;
 }
 #PageWrapper .RelatedPagesBlock ul li {
    border:none !important;
    background:none;
 }
 #PageWrapper .RelatedPagesBlock ul.down  li {
    clear: both;
    overflow: hidden;
    padding-top:10px;
    padding-bottom:10px;
 }

/* 4 across */
#PageWrapper .RelatedPagesBlock ul.across {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-between;
}

#PageWrapper .RelatedPagesBlock ul.across .relatedPagesThumbnail a {
    display: block;
    width:100%;
    height:200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/ssimgs/image-placeholder.png);
 }

#PageWrapper .RelatedPagesBlock ul.across li {
    box-sizing: border-box;
    padding:10px 0;
    width: 200px;
}

/* text */
#PageWrapper .RelatedPagesBlock ul.text li {
    padding-top:10px;
    padding-bottom:10px;
}
#PageWrapper .RelatedPagesBlock ul.text li .relatedPagesThumbnail{
    display: none;
}
#PageWrapper .RelatedPagesBlock ul.text li p {
    margin:0;
}
#PageWrapper .RelatedPagesBlock .text h3 {
    margin-top:0;
}

/* Top */
<style>

#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: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* 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: #555; /* Add a dark-grey background on hover */
}
/* Add this at the end of your CSS file */
@media only screen and (max-width: 767px) {
  /* CSS code for mobile devices */

  /* Ensure the mobile menu is displayed initially */
  .menu ul {
    display: block !important;
  }

  /* Add any additional styles for mobile devices here */
  /* For example, you can modify the appearance of the navigation items */
  .menu li a {
    /* Your mobile styles here */
  }
}

</style>
/* Top */