/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/*
 * Style Style Sheet - Defines the main look like colors and backgrounds
 * Not all style related CSS is included, only colors and backgrounds which may change for different theme styles
 */


/* Base
----------------------------------------------------------------------------------------------------*/

h1 {
	text-transform: none!important;
}

/* footer */

.box {
	display: flex;
	flex-flow: column;
	height: 100%;
  }
  
  .box .row.content {
	flex: 1 1 auto;
  }
  
  .box .row.footer {
	flex: 0 1 40px;
  }

/* footer */


/* Full Yellow */
a { color: #fff; }

h2,
h4,
ins,
code,
.menu-dropdown .level2 a.current,
.menu-dropdown .level2 a.current span.subtitle,
.menu-dropdown .level3 a.current,
.menu-sidebar li.level1 > .level1 > span,
.menu-sidebar .level2 a.current,
.menu-line a,
em.box,
#system .title a:hover,
.searchbox .results li.more-results,
#system span.highlight {
	color: #333333;
	text-shadow: 0px 0px 6px rgba(204,204,204,0.5);
}

/* Light Yellow */
h1,
h3,
a:hover,
blockquote,
.menu-dropdown li.active .level1,
.menu-dropdown li.active .level1 span.subtitle,
.menu-dropdown a.level2:hover,
.menu-dropdown a.level2:hover span.subtitle,
.menu-dropdown a.level3:hover,
.menu.menu-sidebar li.level1.active > .level1,
.menu.menu-sidebar li.level1.active > .level1:hover > span,
.menu-sidebar .level2 a:hover,
.mod-box-color .button-default,
.mod-box-color form.style button,
.mod-box-color form.style input[type="button"],
.mod-box-color form.style input[type="submit"],
form.style button:hover,
form.style input[type="button"]:hover,
form.style input[type="submit"]:hover,
#system .title a,
.searchbox .results li.more-results:hover,
.searchbox .results li.result.selected,
.wk-slideshow-tabs-drive .nav li.active {
	/* color: #333333;
	text-shadow: 0px 0px 6px rgba(204,204,204,0.5);
    font-weight: bold; */
}

/* Dark Yellow */
.menu-dropdown li.level1:hover .level1,
.menu-dropdown li.remain .level1,
.menu-dropdown li.level1:hover .level1 span.subtitle,
.menu-dropdown li.remain .level1 span.subtitle,
.menu-sidebar li.level1 .level1:hover > span,
.mod-box-color .menu.menu-sidebar li.level1 > .level1:hover > span,
.mod-box-color .menu-sidebar .level2 a:hover,
.mod-box-color,
.mod-box-color h1,
.mod-box-color h3,
.mod-box-color a:hover,
.mod-box-color em.box,
.button-primary,
.mod-box-color form.style input,
.mod-box-color form.style select,
.mod-box-color form.style textarea,
#system .pagination strong { color: #4C462F; }


/* Light Dark Yellow */
.mod-box-color .menu-sidebar li.level1 > .level1 > span,
.mod-box-color .menu-sidebar .level2 a,
.mod-box-color h4,
.mod-box-color h6,
.mod-box-color small { color: #84794E; }

/* Module Color Link Color */
.mod-box-color h2,
.mod-box-color h5,
.mod-box-color a,
.mod-box-color em,
.mod-box-color code,
.mod-box-color .menu-sidebar .level2 a.current,
.button-primary:hover,
.mod-box-color .text-dark { color: #AB7910; }

/* Selection */
::-moz-selection { background: rgba(255,235,158,0.3); color: #FFF9E5; }
::selection { background: rgba(255,235,158,0.3); color: #FFF9E5; }


/* Layout
----------------------------------------------------------------------------------------------------*/

/* System  White */
.system-white #content a { color: #c59400; }
.system-white #content a:hover { color: #906c00; }


/* Menus
----------------------------------------------------------------------------------------------------*/

/* Menu-Dropdown */
.menu-dropdown li.level1:hover,
.menu-dropdown li.level1.remain,
.menu-dropdown li.level1.remain:first-child,
.menu-sidebar li.level1 .level1:hover {
	background-color: rgb(255, 255, 255);     /* เปลี่ยนสีหน้าเมนู */
/*	box-shadow: inset 0 0 12px rgba(173,112,17,0.8),
				inset 0 0 8px rgba(0,0,0,0.3); */
}




/* .menu-dropdown li.active .level1:before { background-image: url(../images/menu_dropdown_level1_active_color.png); } */
/* .menu-dropdown li.active .level1:before { background-color: rgba(88,80,54,0.5); } */

.menu-dropdown li.level2.current:before { background-image: url(../images/menu_dropdown_level2_active.png); }

.menu-dropdown a.level3 { background-image: url(../images/menu_dropdown_level3.png); }

/* Menu-Sidebar */
.menu.menu-sidebar li.level1.active > .level1,
.mod-box-color .menu.menu-sidebar li.level1.active > .level1 {
	background-color: #b2a77d;
	background-color: rgba(76,70,47,0.3);
}

.menu-sidebar li.level1.active > .level1:before { background-image: url(../images/menu_sidebar_level1_active.png); }
.mod-box-color .menu-sidebar li.level1.active > .level1:before { background-image: url(../images/menu_sidebar_level1_active_mod_color.png); }

.menu-sidebar .level2 a { background-image: url(../images/menu_sidebar_level2.png); }

/* Modules
----------------------------------------------------------------------------------------------------*/

/* Module Badges */
.module .badge { background-image: url(../images/module_badges.png); }

/* Module Icons */
.module .module-title .icon { background-image: url(../images/module_icons.png); }

/* Module Box Title */
.mod-box-color .module-title { text-shadow: none; }

/* Module Box */
.mod-box-color,
.wk-slideset-drive li > article {
	background: #FFEB9E;
	background: -moz-radial-gradient(50% 50%, #FFF2C1 0%, #FFEB9E 90%);
	background: -webkit-radial-gradient(50% 50%, #FFF2C1 0%, #FFEB9E 90%);
	background: -o-radial-gradient(50% 50%, #FFF2C1 0%, #FFEB9E 90%);
	background: radial-gradient(at 50% 50%, #FFF2C1 50%, #FFEB9E 90%);
	box-shadow: inset 0 0 30px rgba(197,154,42,0.5);
}

.mod-box-color code { text-shadow: none; }

#footer:before,
.mod-box-effect:before { background: url(../images/mod_box_effect.png) 0 0 repeat-x; }



/* Tools
----------------------------------------------------------------------------------------------------*/

/* Buttons */
.button-primary {
	background-color: #FFEB9E;
	box-shadow: inset 0 0 12px rgba(173,112,17,0.8),
				inset 0 0 8px rgba(0,0,0,0.3),
				0 1px 1px rgba(0,0,0,0.3);
}

.button-primary:focus {
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.3),
				inset 0 0 12px rgba(173,112,17,1),
				inset 0 0 8px rgba(0,0,0,0.5);
}

.mod-box-color .button-primary {
	border: 1px solid #bfb386;
	border: 1px solid rgba(0,0,0,0.25);
	box-shadow: inset 0 0 12px rgba(173,112,17,0.2),
				inset 0 0 8px rgba(0,0,0,0.07),
				0 1px 0 rgba(0,0,0,0.07);
}

.mod-box-color .button-primary:focus {
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.15),
				inset 0 0 12px rgba(173,112,17,0.4),
				inset 0 0 8px rgba(0,0,0,0.07);
}

/* List Line */
.mod-box-color ul.line > li,
.mod-box-color .comments-list > article,
.mod-box-color .wk-twitter-list article,
.mod-box-color ul.zoo-list > li,
.mod-box-color .zoo-comments-list > article {
	border-top: 1px solid #E5D491;
	border-top: 1px solid rgba(76,70,47,0.1);
}

.mod-box-color ul.line > li:first-child,
.mod-box-color .comments-list > article:first-child,
.mod-box-color .wk-twitter-list article:first-child,
.mod-box-color ul.zoo-list > li:first-child,
.mod-box-color .zoo-comments-list > article:first-child { border: none; }

/* List Line Icon */
#page ul.line-icon > li,
#page ul.line-icon > li:first-child { background-image: url(../images/tools/list_line_icon.png); }

/* List Check */
ul.check > li { background-image: url(../images/tools/list_check.png); }

/* List Zebra */
.mod-box-color ul.zebra > li.odd,
.mod-box-color ul.tag-cloud > li {
	background: #E4D28D;
	background: rgba(76,70,47,0.1);
}

.mod-box-color ul.zebra > li:nth-of-type(odd) {
	background: #E4D28D;
	background: rgba(76,70,47,0.1);
}


/* Inline Text Box */
ins,
em.box,
#system span.highlight,
p.links > a,
div.reply > a {
	background-color: rgba(255,153,0,0.5);
}

.mod-box-color ins,
.mod-box-color em.box {
	background: #E4D28D;
	background: rgba(76,70,47,0.1);
}

/* Boxes */
.box-info { background-image: url(../images/tools/box_info.png); }
.box-warning { background-image: url(../images/tools/box_warning.png); }
.box-hint { background-image: url(../images/tools/box_hint.png); }
.box-download { background-image: url(../images/tools/box_download.png); }

/* Form Elements */
.mod-box-color form.style input,
.mod-box-color form.style select,
.mod-box-color form.style textarea {
	border: none;
	background-color: #E4D28D;
	background-color: rgba(76,70,47,0.1);
	box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
}

.mod-box-color form.style input:focus,
.mod-box-color form.style select:focus,
.mod-box-color form.style textarea:focus {
	background-color: #665F44;
	background-color: rgba(76,70,47,0.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.4);
	color: #fff;
}

/* Social Icons */
.social-icons li a { background-image: url(../images/tools/icons_social.png); }


/* System
----------------------------------------------------------------------------------------------------*/

/* Searchbox */
.searchbox { background-image: url(../images/searchbox_magnifier.png); }

/* Pagination */
#system .pagination strong {
	background-color: #FFEB9E;
	box-shadow: inset 0 0 8px rgba(173,112,17,0.8),
				inset 0 0 3px rgba(0,0,0,0.3);
}

/* Latest Comments */
#system #comments .comment-byadmin .comment-head { border-color: #FFEB9E; }


/* Extensions
----------------------------------------------------------------------------------------------------*/

/* Widgetkit Spotlight */
 .spotlight .overlay-default { background-color: rgba(255,235,158,0.5); }

/* Widgetkit Slideset : Drive */
.wk-slideset-drive .nav.icon span { background-image: url(../images/widgetkit/nav.png); } 

.wk-slideset-drive > div .next,
.wk-slideset-drive > div .prev { background-image: url(../images/widgetkit/buttons.png); }  

/* Widgetkit Slideshow Tabs : Drive */
 .wk-slideshow-tabs-drive .nav li.active:before { background-image: url(../images/widgetkit/color_line.png); }  

 /* New layout by DevLM */
 #content .clearfix strong {
	 color: #fff;
 }
 
/* Main menu by Living Museum */


.deepest td:hover  {
	background-color: #fff;



	color: #5a4f31;
}

#menubar {
	width: 100%;
}

.deepest a {
	color: #fff; 
}

.deepest a:hover {
	color: #5a4f31;
	background-color: #fff;
}


.menu-dropdown {

	max-width: 100%;
	max-height: 70px;
}

nav#menu
{
	min-height: 70px;
}

.level1 a 
{

	min-height: 70px;
	/* border-bottom: 1px  solid  white; */
}


/*  เมาส์ไม่ active กับโลโก้  */
ul.menu.menu-dropdown li.level1.item204 { 
	
/*	pointer-events: none;  */
}


/*  เปลี่ยนสี link email footer เป็นสีใส */
footer#footer a{ 
	
	background-color:transparent !important;
}


/* scroll menu left */
/*div#menubar{
	overflow-x: scroll; 
}*/


footer#footer a
{
	display: flex;
	flex-wrap: wrap;
	align-content:flex-end;
}
  
footer#footer a img
{
	width: 100%;
	height: 100%;
}

header#header{
	line-height: 0px;
}

footer#footer{
	top:-1px;
}

li.level1.item202 a span {
    text-align: center !important;
    min-width: 60%;
    max-width: 60%;
}

/* hover */
li.level1.item204:hover >
 a span span.icon{ 
	background-image: url(../../../images/menu_1/ver.2_test/icon-menu_hover.png) !important;
}

li.level1.item287:hover >
 a span span.icon{ 
	background-image: url(../../../images/menu_1/ver.2_test/icon-menu_en_hover.png) !important;
}
/* hover */

/* menu ภาษาอังกฤษ */

li.level1.item288 span{
	padding-left: 0px;
	padding-right: 0px;
}

li.level1.item289 span{
	padding-left: 0px;
	padding-right: 0px;
}

li.level1.item290 span{
	padding-left: 0px;
	padding-right: 0px;
}

li.level1.item291 span{
	padding-left: 0px;
	padding-right: 0px;
}

li.level1.item292 span{
	padding-left: 0px;
	padding-right: 0px;
}

li.level1.item293 {
    min-width: 6.42%;
	max-width: 6.42%;
	border-right-style: none;
}


/* css eng menu resposive */

@media only screen 
and (max-width: 1092px)
{ 
	  li.level1.item288{
		font-size: calc(51.8% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(51.8% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(51.8% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(51.8% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(51.8% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(51.8% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 1069px)
{ 
	  li.level1.item288{
		font-size: calc(50.8% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(50.8% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(50.8% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(50.8% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(50.8% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(50.8% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 1036px)
{ 
	  li.level1.item288{
		font-size: calc(48.8% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(48.8% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(48.8% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(48.8% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(48.8% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(48.8% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 1017px)
{ 
	  li.level1.item288{
		font-size: calc(51.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(51.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(51.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(51.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(51.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(51.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 1004px)
{ 
	  li.level1.item288{
		font-size: calc(49.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(49.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(49.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(49.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(49.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(49.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 949px)
{ 
	  li.level1.item288{
		font-size: calc(53.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(53.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(53.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(53.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(53.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(53.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 939px)
{ 
	  li.level1.item288{
		font-size: calc(52.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(52.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(52.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(52.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(52.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(52.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 915px)
{ 
	  li.level1.item288{
		font-size: calc(50.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(50.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(50.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(50.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(50.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(50.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 899px)
{ 
	  li.level1.item288{
		font-size: calc(48.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(48.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(48.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(48.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(48.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(48.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 889px)
{ 
	  li.level1.item288{
		font-size: calc(46.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(46.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(46.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(46.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(46.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(46.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 868px)
{ 
	  li.level1.item288{
		font-size: calc(44.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(44.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(44.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(44.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(44.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(44.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 863px)
{ 
	  li.level1.item288{
		font-size: calc(45.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(45.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(45.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(45.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(45.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(45.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 858px)
{ 
	  li.level1.item288{
		font-size: calc(44.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(44.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(44.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(44.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(44.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(44.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 848px)
{ 
	  li.level1.item288{
		font-size: calc(42.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(42.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(42.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(42.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(42.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(42.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 828px)
{ 
	  li.level1.item288{
		font-size: calc(40.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(40.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(40.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(40.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(40.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(40.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 806px)
{ 
	  li.level1.item288{
		font-size: calc(38.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(38.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(38.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(38.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(38.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(38.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 796px)
{ 
	  li.level1.item288{
		font-size: calc(38.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(38.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(38.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(38.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(38.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(38.5% + 1vw) !important;
	  }
}

@media only screen 
and (max-width: 787px)
{ 
	  li.level1.item288{
		font-size: calc(36.5% + 1vw) !important;
	  }
	  li.level1.item289{
		font-size: calc(36.5% + 1vw) !important;
	  }
	  li.level1.item290{
		font-size: calc(36.5% + 1vw) !important;
	  }
	  li.level1.item291{
		font-size: calc(36.5% + 1vw) !important;
	  }
	  li.level1.item292{
		font-size: calc(36.5% + 1vw) !important;
	  }
	  li.level1.item293{
		font-size: calc(36.5% + 1vw) !important;
	  }
}

/* ตัวเปลี่ยนภาษา */

.mod-languages{ 
	text-align: right;
	position: absolute;
	left: 90%;
	top:10px;
}
.mod-languages img{ 
	min-height: 25px;

}

/* css pdf responsive */

@media screen and (min-width: 768px) {
	div.pdf iframe{
		height: 1270px !important;

	}
}

@media screen and (min-width: 1024px) {
	div.pdf iframe{
		height: 1330px !important;

	}
}

@media screen and (min-width: 1366px) {
	div.pdf iframe{
		height: 1430px !important;

	}
}

@media screen and (min-width: 1440px) {
	div.pdf iframe{
		height: 1437px !important;

	}
}


/*--------------------------  ลดขอบขาว  --------------------------*/


/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
	div#main{
		min-height: 825px;
		background-color: #565944;
	}
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait */
@media only screen 
  and (device-width: 320px) 
  and (device-height: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	div#main{
		min-height: 825px;
		background-color: #565944;
	}
}

/* ----------- iPhone X ----------- */

/* Portrait */
@media only screen 
  and (device-width: 375px) 
  and (device-height: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
	div#main{
		min-height: 1206px;
		background-color: #565944;
	}
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait */
@media only screen 
  and (device-width: 375px) 
  and (device-height: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
	div#main{
		min-height: 825px;
		background-color: #565944;
	}
}

/* ----------- Google Pixel 2 XL ----------- */

/* Portrait */
@media screen 
  and (device-width: 411px) 
  and (device-height: 823px) 
  and (orientation: portrait) {
	div#main{
		min-height: 1047px;
		background-color: #565944;
	}
}



/* ----------- iPhone 4 and 4S ----------- */

/* Portrait */
@media only screen 
  and (device-width: 320px) 
  and (device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	div#main{
		min-height: 555px;
		background-color: #565944;
	}
}

/* ----------- Google Pixel 2 ----------- */

/* Portrait */
@media screen 
  and (device-width: 411px) 
  and (device-height: 731px) 
  and (orientation: portrait) {
	div#main{
		min-height: 825px;
		background-color: #565944;
	}
}

/* ----------- Google Pixel 2 XL ----------- */

/* Portrait */
@media screen 
  and (device-width: 411px) 
  and (device-height: 823px) 
  and (orientation: portrait) {
	div#main{
		min-height: 1044px;
		background-color: #565944;
	}
}

/* ----------- Nexus 4 ----------- */

/* Portrait */
@media only screen 
  and (device-width: 384px) 
  and (device-height: 640px)
  and (orientation: portrait) { 
	div#main{
		min-height: 719px;
		background-color: #565944;
	}
}

/* ----------- SS Galaxy S5 ----------- */

/* Portrait */
@media only screen 
  and (device-width: 360px) 
  and (device-height: 640px)
  and (orientation: portrait) 
  and (-webkit-device-pixel-ratio: 3){ 
	div#main{
		min-height: 826px;
		background-color: #565944;
	}
}

/* ----------- SS Galaxy Note2 ----------- */

/* Portrait */
@media only screen 
  and (device-width: 360px) 
  and (device-height: 640px)
  and (orientation: portrait) 
  and (-webkit-device-pixel-ratio: 2){ 
	div#main{
		min-height: 826px;
		background-color: #565944;
	}
}

/* ----------- Nexus 10 ----------- */

/* Portrait */
@media only screen 
  and (device-width: 800px) 
  and (device-height: 1280px)
  and (orientation: portrait) { 
	div#main{
		min-height: 653px;
		background-color: #565944;
	}
}

@media only screen 
  and (min-device-height: 896px)
  and (orientation: portrait) { 
#maininner {
    	width: 100%;
    	min-height: 44vh;
		background-color: #565835;
	}
}