.DivBarraNav {
	width: 100%;
    overflow: hidden;
    padding-bottom: 0;
}
.BarraNav {
    width: 84%;
	font-family: 'Sarabun', sans-serif;
    font-size: 1.3vw;
    color: rgba(0,0,0,0.6);
    font-weight: 400;
    white-space: nowrap;
    letter-spacing: 1px;
	padding: 0.3% 8% 0.5%;
    left: 0;
    top: 0;
    position: fixed;
    /*overflow: hidden;*/
    display: block;
    background-color: #fff;
    z-index: 100;
    -webkit-transition: .9s;
    transition: .9s;
    height: 12vw;
	-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
    -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
}
.BarraNav.small {
	top: 0;
	-webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
}
.BarraNav .logo {
	height: 4.5vw;
    float: left;
    padding: 0 2vw 0 4vw;
}
.BarraNav div {
	display: inline-block;
    padding: 1vw 0 0 0;
    line-height: 3vw;
}
.BarraNav li {
	display: inline-block;
	margin: 0 1vw;
	/*margin: 0 2.3vw 0 1vw;*/
}
.BarraNav li a {
	color: rgba(0,55,109,1);
	text-transform: uppercase;
    font-weight: 600;
}
.BarraNav ul li ul a {
	color: rgba(255,255,255,1);
	text-transform: uppercase;
    font-weight: 600;
}
.BarraNav.CH {
	top: 0;
    position: relative;
    background-color: #fff;
	z-index: 99;
	-webkit-transition: .9s;
	transition: .9s;
	-webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
	display: none;
}
.BarraBott.CH {
	bottom: 2%;
	z-index: 97;
	-webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
	right: 2%;
	position: fixed;
}
.parallelogram span {
    color: #fff;
    line-height: 3.6vw;
    margin: 0 0.5vw;
	font-family: 'Sarabun', sans-serif;
	font-weight: 300;
    font-size: 1.5vw;
    position: relative;
    display: block;
}
.parallelogram.CH span {
	font-size: 1.5vw;
    line-height: 2.4vw;
}
#head {
	padding-top: 0;
	z-index: 101;
    min-height: 60vh;
}
#header {
	width: 90%;
	padding: 1% 5% 10%;
	/*background-color: #fff;*/
	margin: 0;
	display: block;
	position: relative;	
	font-family: 'Sarabun', sans-serif;
	font-size: 1.3vw;
	color: rgba(0,0,0,0.6); 
	font-weight: 600;
    white-space: nowrap;
    letter-spacing: 1px;
	overflow: hidden;
	z-index: 99;
}
#header .logo {
	height: 100px;
    float: none;
    margin: 2% auto;
    display: block;
}
#header div {
	display: none;
}
#header ul {
	display: inline-block;
}
#header li {
	margin: 0 4.4% 0 0;
	display: inline-block;
}
#header .SM {
	height: 1.9vw;
    margin: 0 0.3vw -6px;
    position: relative;
}
#header a {
	color: rgba(0,55,109,1);
}
#header a:hover {
	color: rgba(0,55,109,0.8);
}
ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

li {
	/*color: #fff;
  background: darkorange;*/
	display: block;
	float: none;
	/*padding: 1rem;*/
	position: relative;
	text-decoration: none;
  transition-duration: 0.5s;
}
li.dropdown {
	float: left;
}
li a {
  color: #fff;
  text-transform: uppercase;
}

li:hover,
li:focus-within {
	cursor: pointer;
}

li:focus-within a {
  outline: none;
}

ul li ul {
	background: rgba(36,72,118,1);
	visibility: hidden;
 	opacity: 0;
	padding: 0.7vw 12px;
    font-size: 1.1vw;
    line-height: 1.9vw;
    min-width: 5rem;
    position: absolute;
    transition: all 0.5s ease;
    margin-top: 1.7vw;
    left: -5px;
	border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
	display: none;
}

ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
   visibility: visible;
   opacity: 1;
   display: block;
}

ul li ul li {
	clear: both;
  width: 100%;
}
@media (min-width: 270px) {
#header {
    padding: 3vw 5%;
}
#header .logo {
    height: 21vw;
    margin: 1vw auto 2vw;
}
.BarraNav {
	top: -15vw;
}
.BarraNav.small {
    top: 0;
}
.BarraNav .logo {
    height: 10vw;
    float: left;
    padding: 1vw;
}
.BarraNav div {
    display: none;
}
.parallelogram.CH {
    height: 8vw !important;
    padding: 0 3vw;
    min-width: 27vw;
}
.parallelogram .Wapp2 {
    height: 5vw;
    margin: 1.5vw;
    position: relative;
    float: left;
}
.Whats2 {
	height: 2.4vw !important;
	padding: 0 2vw !important;
    background-color: #25D366;
	width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
	white-space: nowrap;
	text-align: left;
	min-width: 14vw;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: none;
}
.Whats2 span {
    font-size: 4.5vw !important;
    line-height: 7vw !important;
}
.Whats2 .Nope {
	display: none;
}
}
@media (min-width: 760px) {
.BarraNav {
    width: 101vw;
    left: 0;
	top: -6vw;
    position: fixed;
    /*overflow: hidden;*/
    display: block;
    background-color: #fff;
	z-index: 100;
	-webkit-transition: .9s;
	transition: .9s;
	height: auto;
}
.BarraNav.small {
	top: 0;
	-webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
}
.BarraNav .logo {
	height: 5vw;
    float: left;
    padding: 0 1vw 0 4vw;
}
.BarraNav div {
    display: inline-block;
}
.BarraNav.CH {
	top: 0;
    position: relative;
    background-color: #fff;
	z-index: 99;
	-webkit-transition: .9s;
	transition: .9s;
	-webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
	display: block;
}
.BarraBott.CH {
	bottom: 2%;
	z-index: 97;
	-webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
	right: 2%;
	position: fixed;
}
.parallelogram {
    width: auto;
    height: 3.6vw;
    padding: 0 2vw !important;
    position: relative;
    float: right;
    margin-right: -1px;
	text-align: center;
	}
.parallelogram.CH {
    height: 2.4vw !important;
	padding: 0 2vw !important;
	min-width: 9.8vw;
}
.parallelogram.CH.blue {
	min-width: 0.8vw;
	width: auto;
}
.parallelogram span {
    color: #fff;
    line-height: 3.6vw;
    margin: 0 0.5vw;
	font-family: 'Sarabun', sans-serif;
	font-weight: 300;
    font-size: 1.5vw;
    position: relative;
    display: block;
}
.parallelogram.CH span {
	font-size: 1.5vw;
    line-height: 2.4vw;
}
.parallelogram.red {
      background-color: #CC0011;
	  padding: 0 3vw !important;
	width: auto;
	}
.parallelogram.blue {
      background-color: #00376D;
	width: auto;
	}
.parallelogram.blue span {
	display: block;
}
.parallelogram.Blog {
      background-color: #2AA8A5;
	  padding: 0 3vw !important;
	width: auto;
	}
.parallelogram.Blog span {
	display: block;
}
.parallelogram.green {
      background-color: #005C4B;
	width: auto;
	}
.parallelogram.green span {
	display: block;
}
.parallelogram.Whats {
      background-color: #25D366;
	  padding: 0 1.2vw !important;
	width: auto;
	}
.Whats2 {
	height: 2.4vw !important;
	padding: 0 2vw !important;
    background-color: #25D366;
	width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
	white-space: nowrap;
	text-align: left;
	min-width: 14vw;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: block;
}
.Whats2 span {
	font-size: 1.5vw !important;
    line-height: 2.4vw !important;
}
.Whats2 .Nope {
	display: inline-block;
}
.parallelogram.Bco {
      background-color: #fff;
	padding: 0 1.5vw !important;
	display: inline-block;
	}
.parallelogram.Menu {
	padding: 0 4vw 0 3.5vw !important;
	}
.parallelogram .SM {
	height: 1.8vw;
	margin: 0.9vw 0.2vw;
	position: relative;
}
.parallelogram .Wapp {
	height: 1.8vw;
	margin: 0.9vw 0.2vw;
	position: relative;
}
.parallelogram .Wapp2 {
	height: 1.6vw;
	margin: 0.4vw;
	position: relative;
	float: left;
}
.parallelogram .logo {
	height: 2.6vw;
	margin: 0.5vw 2vw;
	position: relative;
}
.parallelogram .s21 {
	display: none;
}
.parallelogram .lBlog {
	display: none;
}
.parallelogram .lCapa {
	display: none;
}
#head {
	padding-top: 0;
}
#header {
	width: 90%;
    padding: 0 5% 1%;
	font-size: 1.4vw;
    /* overflow: hidden; */
    min-height: 9.3vw;
}
#header .logo {
	height: 5.7vw;
	float: left;
	margin: 2% 1.5vw;
	display: inline-block;
}
#header div {
	float: left;
	margin: 5% 1%;
	display: inline-block;
    min-width: 65%;
}
#header ul {
	display: inline-block;
}
#header li {
	margin: 0 2.4% 0 0;
	display: inline-block;
}
#header .SM {
	height: 1.9vw;
    margin: 0 0.3vw -6px;
    position: relative;
}
#header a {
	color: rgba(0,55,109,1);
}
#header a:hover {
	color: rgba(0,55,109,0.8);
}
}
@media (min-width: 1100px) {
#header {
	font-size: 1.3vw;
}
.Whats2 {
	height: 2.4vw !important;
	padding: 0 2vw !important;
    background-color: #25D366;
	width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
	white-space: nowrap;
	text-align: left;
	min-width: 14vw;
	border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: block;
}
.Whats2 span {
	font-size: 1.5vw !important;
    line-height: 2.4vw !important;
}
.Whats2 .Nope {
	display: inline-block;
}
}
@media (min-width: 1300px) {
.BarraNav {
    width: 101vw;
    left: 0;
	top: -147px;
    position: fixed;
    /*overflow: hidden;*/
    display: block;
    background-color: #fff;
	z-index: 100;
	-webkit-transition: .9s;
	transition: .9s;
	height: auto;
}
.BarraNav.small {
	top: 0;
	-webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
}
.BarraNav.CH {
	top: 0;
    position: relative;
    background-color: #fff;
	z-index: 99;
	-webkit-transition: .9s;
	transition: .9s;
	-webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
	display: block;
}
.BarraBott.CH {
	bottom: 2%;
	z-index: 97;
	-webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
	right: 2%;
	position: fixed;
}
.parallelogram {
    width: auto;
    height: 3.6vw;
    padding: 0 2.2vw !important;
    position: relative;
    float: right;
    margin-right: -1px;
	text-align: center;
	}
.parallelogram.CH {
    height: 2.4vw !important;
	padding: 0 2vw 0.1vw 0.5vw !important;
	min-width: 9.8vw;
}
.parallelogram.CH.blue {
	min-width: 0.8vw;
	width: auto;
}
.parallelogram span {
    color: #fff;
    line-height: 3.6vw;
    margin: 0 0.5vw;	font-family: 'Sarabun', sans-serif;
font-weight: 300;
    font-size: 1.3vw;
    position: relative;
    display: block;
}
.parallelogram.CH span {
	font-size: 1.25vw;
    line-height: 2.4vw;
}
.parallelogram.red {
      background-color: #CC0011;
	  padding: 0 4.1vw !important;
	width: auto;
	}
.parallelogram.blue {
      background-color: #00376D;
	width: auto;
	}
.parallelogram.blue span {
	display: block;
}
.parallelogram.Blog {
      background-color: #2AA8A5;
	  padding: 0 3.6vw !important;
	width: auto;
	}
.parallelogram.Blog span {
	display: block;
}
.parallelogram.green {
      background-color: #005C4B;
	width: auto;
	}
.parallelogram.green span {
	display: block;
}
.parallelogram.Whats {
      background-color: #25D366;
	  padding: 0 1.2vw !important;
	width: auto;
	}
.parallelogram.Whats2 {
    background-color: #25D366;
	width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
	white-space: nowrap;
	text-align: left;
	min-width: 14vw;
}
.parallelogram.Whats2 .Nope {
	display: inline-block;
	transform: skew(0deg);
}
.parallelogram.Bco {
      background-color: #fff;
	padding: 0 2.1vw !important;
	display: inline-block;
	}
.parallelogram.Menu {
	padding: 0 4vw 0 3.5vw !important;
	}
.parallelogram .SM {
	height: 1.8vw;
	margin: 0.9vw 0.2vw;
	position: relative;
}
.parallelogram .Wapp {
	height: 1.8vw;
	margin: 0.9vw 0.2vw;
	position: relative;
}
.parallelogram .Wapp2 {
	height: 1.6vw;
	margin: 0.4vw;
	position: relative;
	float: left;
}
.parallelogram .logo {
	height: 2.6vw;
	margin: 0.5vw 2vw;
	position: relative;
}
.parallelogram .s21 {
	display: none;
}
.parallelogram .lBlog {
	display: none;
}
.parallelogram .lCapa {
	display: none;
}
#head {
	padding-top: 0;
}
#header {
	width: 84%;
    padding: 0 8%;
	font-size: 1.3vw;
    min-height: 9.3vw;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.10);
    background-color: #fff;
}
#header .logo {
	height: 9vw;
    float: left;
    margin: 1vw 1vw 1vw 2.5vw;
	display: inline-block;
}
#header div {
	float: left;
    margin: 4.5vw auto;
    display: inline-block;
}
#header ul {
	display: inline-block;
}
#header li {
	margin: 0 0.9vw;
	display: inline-block;
}
#header .SM {
	height: 1.9vw;
    margin: 0 0.3vw -6px;
    position: relative;
}
#header a {
	color: rgba(0,55,109,1);
}
#header a:hover {
	color: rgba(0,55,109,0.8);
}
}