/* Last updated 2022-05-04 kjarri-thaiiceland */
/* possible to use this line for new version of style.css, but I am not sure how to use */
/*<appSettings><add key="Version" value="01.01"/></appSettings>*/

/*-----------------------------------------------------------------------------------*/
/*	FONTS
/*-----------------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Bai+Jamjuree|Material+Icons|KoHo|Krub|Kodchasan|Philosopher&display=swap');

@font-face {font-family: 'Poor Richard';
 src: url('https://thaiiceland.com/style/fonts/poor-richard-1361521059.ttf');
 font-weight: normal; font-style: normal;}

/*-----------------------------------------------------------------------------------*/
/* Style fonts thaiiceland style */
/*-----------------------------------------------------------------------------------*/
* {box-sizing: border-box;font-size: 15px;
    font-family: Philosopher, 'Bai Jamjuree', Krub, KoHo, Arial, sans-serif;
    font-style: normal;font-weight: normal;text-decoration: none;}
html{scroll-behavior: smooth;}
div {margin-left: auto;margin-right: auto;}
/* body {} */
.fontN {font-size: 1rem;}
.fontBig {font-size: 1.2rem;}
.fontSmall {font-size: 0.85rem;}
.fontDesign {font-size: 0.5rem;}
.footDesign {color: black;font-size:.8rem;}
.fontItalic {font-size: 1rem;font-style: italic;font-variant: normal;text-transform: none;}
.fontCap {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1rem;
 font-variant: small-caps;text-transform: none;}

/*-----------------------------------------------------------------------------------*/
/* Style tables and hr lines thaiiceland style */
/*-----------------------------------------------------------------------------------*/
.textalign {margin-left: auto;margin-right: auto;text-align: center;}
.tableNoB {border:0; padding:0 0; border-spacing:0;margin-left: auto;margin-right: auto;}
.tableInner {border:0; padding:0 0; border-spacing:0;margin-left: auto;margin-right: auto;}
.tableBorder {border-style: groove; border-width:4px; padding:0 0; border-radius: 8px; 
  border-color: gray; border-spacing:0; box-shadow: 0 12px 20px rgba(0,0,0,0.8);
  margin-left: auto;margin-right: auto;}
.hrViolet1 {border: 1px solid violet; border-radius: 2px;}
.hrViolet2 {border: 2px solid violet; border-radius: 3px;}

/*-----------------------------------------------------------------------------------*/
/* Style h1 h2 h3 and more - thaiiceland style */
/*-----------------------------------------------------------------------------------*/
h1, h2, h3, h4 {display: inline;margin:0;padding:0;}
h1 {font-size:1.5rem;color: #bd65d7;}
h2 {font-size:1rem;color: #333;}
h3 {font-size:0.9rem;color: #eee; /* text-transform: uppercase;*/}
h4 {font-size:0.8rem;color: #eee;}

/*-----------------------------------------------------------------------------------*/
/* Style pictur and videos thaiiceland style */
/*-----------------------------------------------------------------------------------*/
/*.advertise {border-top: 5px solid #bd65d7; border-radius: 8px; box-shadow: 0 10px 16px rgba(0,0,0,0.8);}*/
.adholder728{width: 730px;height: 92px;position: relative;}
.adholder468{width: 470px;height: 62px;position: relative;}
.adiframe{width: 100%;height: 100%;}
.adtopdiv{position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor:pointer;}
.advertise {box-shadow: 0 8px 12px rgba(0,0,0,0.8);}
.advertise:hover {transform: scale(1.02);}
.textpic:hover {transform: scale(1.05);}

.thaiice105:hover {transform: scale(1.05);}
.thaiice_top5 {border-radius: 8px;box-shadow: 0 10px 16px rgba(0,0,0,0.8);}
.thaiice_top5:hover {transform: scale(1.02);}
.thaiice_top7 {border-radius: 8px;box-shadow: 0 12px 20px rgba(0,0,0,0.8);}
.thaiice_top7:hover {transform: scale(1.05);}

.thaiicestyle5 {border-radius: 8px;box-shadow: 0 10px 16px rgba(0,0,0,0.8);}
.thaiicestyle5:hover {transform: scale(1.02);}
.thaiicestyle7 {border-radius: 8px;box-shadow: 0 12px 20px rgba(0,0,0,0.8);}
.thaiicestyle7:hover {transform: scale(1.05);}

/* Currency Connverter Table to Change between From and To */
.activeSell {margin:0;cursor: pointer;border: 5px solid #555;
 border-radius: 10px; background-color: #00d6d6;transition:0.9s;}

/*-----------------------------------------------------------------------------------*/
/* ddsmoothmenu and menu wrapper - thaiiceland style                    */
/*-----------------------------------------------------------------------------------*/
.thaismoothmenu {font-family: Philosopher,"Poor Richard", "Trebuchet MS"; font-size: 1rem;
 z-index: 1000; position: relative; text-shadow: 0 1px 0 #efefef;}
.thaismoothmenu ul {margin: 0; padding: 0; list-style-type: none;}
.thaismoothmenu ul li {position: relative; display: inline; float: left;
 clear: none; margin: 0 8px; padding: 0;}
.thaismoothmenu ul li a {display: block; /*background of menu items (default state)*/
 text-decoration: none; position: relative; text-shadow: 0 1px 0 #efefef;}
.thaismoothmenu ul li a:hover {color: #5d8ba6;}
* html .thaismoothmenu ul li a { display: inline-block;/*IE6 hack sub menu to behave correctly*/}
.thaismoothmenu ul li a, .ddsmoothmenu ul li a:visited {color: #565656;}

#page-top {padding-bottom: 2px;}
#headerWrapper { box-shadow: 0 0 10px 10px rgba(0,0,0,0.5); min-width: 80%; height: 60px;
 background: transparent url(../images/logo/header-bg.png) repeat-x center bottom;}
#headerWrapper.fixed {position: fixed; top:0;box-shadow: 5px 5px 19px 0px rgba(0, 0, 0, 0.5);
 width:100%;height:30px;font-size: 0.75rem;z-index:8000; transition: 0.9s;}
#header {height: 60px; margin: 0 auto; position: relative; z-index: 999;}
#header.fixed {width: 80%; height: 60px; margin: 0 auto; position: relative;
 z-index: 999;transition:0.9s;}
#logo {float: left; position: absolute; bottom: 5px; left: 0;height: 58px;transition:0.9s;}
#logo.fixed {position: absolute; top: 2px; left: 0;height:26px;transition:0.9s;}
#logo img {height: 92%;object-fit: contain;}
#menuWrapper {float: right; position: absolute; bottom: 10px; right: 0;transition:0.9s;}
#menuWrapper.fixed {position: absolute; top: 8px; right: 0;}

#notifyTopBar {width:100%;height:32px;background:yellow;text-align:center;padding-top:3px;}
.notifyTop {color:black;background:yellow;display: inline;
  font-family: Philosopher, Arial, sans-serif;font-size:1.4rem;font-style: normal;
  border:3px solid #666;border-radius:8px;margin:-3px 3px;}

/*-----------------------------------------------------------------------------------*/
/* Style form wrappers and progress bar under main picture thaiiceland style */
/*-----------------------------------------------------------------------------------*/
.thaiicelandWrapper {
  background: #ebe9f9;  /* Old browsers */
  background: radial-gradient(circle farthest-corner at 10% 20%, #ebe9f9 38.6%, #D49CFC 61.6% );
  background: -moz-radial-gradient(circle farthest-corner at 10% 20%, #ebe9f9 38.6%, #D49CFC 61.6% );
  background: -webkit-radial-gradient(circle farthest-corner at 10% 20%, #ebe9f9 38.6%, #D49CFC 61.6% );
/* background: linear-gradient( 109.6deg, rgba(245,253,116,1) 15.5%, rgba(147,164,245,1) 66%, rgba(254,215,229,1) 95.8% );  *//* Annar fallegur litur*/
  vertical-align: middle;position: relative; padding:0 0 30px 0;margin: 0 0 10px 0;
  border-radius: 8px;box-shadow: 0 12px 20px rgba(0,0,0,0.8);
  margin-left: auto;margin-right: auto;text-align: center;
  transition: background-color 2s ease-out 1000ms;}
.thaiicelandWrapper:hover {
  background-image: linear-gradient( 135deg, #b0e1dc 35.3%, rgba(248,193,253,1) 65.1% );
  background-image: -moz-linear-gradient( 135deg, #b0e1dc 35.3%, rgba(248,193,253,1) 65.1% );
  background-image: -webkit-linear-gradient(135deg, #b0e1dc 35.3%, rgba(248,193,253,1) 65.1% );}
/*background: #ebe9f9;
background: -moz-linear-gradient(-69.6deg, rgba(174,134,186,1) 11.3%, rgba(207,169,218,1) 36.8%, rgba(225,195,238,1) 62.8%, rgba(245,216,255,1) 85.1%, rgba(250,235,255,1)100%);
background: -webkit-linear-gradient(-69.6deg, rgba(174,134,186,1) 11.3%, rgba(207,169,218,1) 36.8%, rgba(225,195,238,1) 62.8%, rgba(245,216,255,1) 85.1%, rgba(250,235,255,1) 100%);
background: linear-gradient(-69.6deg, rgba(174,134,186,1) 11.3%, rgba(207,169,218,1) 36.8%, rgba(225,195,238,1) 62.8%, rgba(245,216,255,1) 85.1%, rgba(250,235,255,1) 100%);
/*background-color: #c3c3c3;}*/

.innerWrapper{margin:0; padding:4%;}
.thaiicelandTransp {vertical-align: middle; position: relative; padding:0 0 30px 0;
 border-radius: 8px; box-shadow: 0 12px 20px rgba(0,0,0,0.8);
 margin-left: auto;margin-right: auto;text-align: center;}
/* design at bottom of all main boxes and other parts */
.thaiicelandWrapper-webs {color: blue; position: absolute;bottom: 6px;
  font-size:0.65rem;text-align: center;}
.thaiicelandTransp-webs {color: blue; position: absolute; bottom: 6px;
  font-size:0.65rem;text-align: center;}

/*-----------------------------------------------------------------------------------*/
/* Style button and fields - thaiiceland style */
/*-----------------------------------------------------------------------------------*/
.field {margin: 1rem 0;}
label {display: block; margin-top: 1rem; margin-bottom: 0.5rem; color: #999;}
input {width: 80%; padding: 0 0; font-size: 1rem; text-align:center; 
  border-radius: 4px; border: 1px solid #D9D9D9;}

.thaiicebutton {cursor: pointer;border-radius: 8px; border: solid #555 2px;
  box-shadow: -10px -12px 10px #00d6d6 inset;font-size: 1rem; color: #111;
  margin: 4px;}
.thaiicebutton:hover {cursor: pointer;transform: scale(1.10);color: red;
  text-decoration: none;box-shadow: 0 0 14px yellow;border: solid yellow 2px;}
  
.thaiicebutton2 {background: #fff; border-radius: 8px; border: solid #555 2px;
 box-shadow: -10px -12px 10px #00d6d6 inset;
 cursor:pointer; font-size: 1rem; color: #111; padding: 0; margin: .5% .5%;}
.thaiicebutton2:hover {transform: scale(1.40);color: red;text-decoration: none;
 box-shadow: 0 0 14px yellow;border: solid yellow 2px;
 cursor: pointer;}
/*-----------------------------------------------------------------------------------*/
/* Style audio - thaiiceland style */
/*-----------------------------------------------------------------------------------*/
#myMovable{position: absolute;z-index: 90;text-align: center;border: 1px solid #d3d3d3;
  background-color:#E6E0F8; .borderTop5px00d6d6;border-radius: 70px;
  box-shadow: 0 8px 12px rgba(0,0,0,0.8);}
#myMovableRadio{margin:auto;text-align: center;
  transition: background-color 2s ease-out 1000ms;
  cursor: move;z-index: 100;color: #000;}

/*-----------------------------------------------------------------------------------*/
/* wrapper - thaiiceland style */
/*-----------------------------------------------------------------------------------*/
#wrapper {width:80%; margin: 0 auto; padding-top: 0; line-height: 20px;}
#wrapper ul {padding: 0 0 20px 0; display: block; overflow: hidden;}
#wrapper ul li {line-height: 20px; list-style: none; display: block;
  background: transparent url(../images/logo/bullet.jpg) no-repeat left 8px;
  padding-left: 20px;}
#wrapper ul.check-list {padding: 0 0 20px 0; display: block; overflow: hidden;}
#wrapper ul.check-list li {line-height: 20px; list-style: none; display: block;
  background: transparent url(../images/logo/check.png) no-repeat left 0; 
  padding-left: 30px;}
#wrapper {width:80%; margin: 0 auto; padding-top: 0; line-height: 20px;}
#header-wrapper { box-shadow: 0 0 10px 10px rgba(0,0,0,0.5); min-width: 80%; height: 60px;
  background: transparent url(../images/logo/header-bg.png) repeat-x center bottom;}
#header {width: 80%; height: 60px; margin: 0 auto; position: relative; z-index: 999;}
#page-top {padding-bottom: 2px;}
#logo {float: left; position: absolute; bottom: 5px; left: 0;}
#menu-wrapper {float: right; position: absolute; bottom: 10px; right: 0;}

/*-----------------------------------------------------------------------------------*/
/* to make footer stay always at bottom - thaiiceland style */
/*-----------------------------------------------------------------------------------*/
#page-container {position: relative; min-height: 100vh;}
#content-wrap {padding-bottom: 48px; /* Footer height */}

/*-----------------------------------------------------------------------------------*/
/* End all style for main-new - thaiiceland style */
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------*/
/*           Clocks                  */
.clock {padding: 0 0;border-spacing: 0;float: left;}
/*.clock td:hover {background-color:#ddd;}*/
.clock td:hover h1 {color: #f00;}
.clock td:hover h2 {color: #f00;}
.clock td:hover h3 {color: #333;}

/*-----------------------------------*/
/*           mySlydes                */
.mySlides-pic {width: 100%;border-radius: 12px;box-shadow: 0 12px 20px rgba(0,0,0,0.8);}
.mySlides {display: none}
/* Slideshow container */
.slideshow-container {max-width: 80%;position: relative;margin:0 auto;}
/* Next & previous buttons */
.prev, .next {cursor: pointer;position: absolute;top: 50%;
  width: auto;padding: 16px;margin-top: -32px;color: white;
  font-weight: bold;font-size: 18px;transition: 0.6s ease;
  border-radius: 0 3px 3px 0;user-select: none;}
/* Position the "next button" to the right */
.next { right: 0; border-radius: 3px 0 0 3px;}
.prev { left: 0; border-radius: 3px 0 0 3px;}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8);}
/* Caption text (I am not using this at the moment, and never have) */
.captiontext {color: #f2f2f2;font-size: 1.1rem;padding: 8px 12px;
  position: absolute;bottom: 8px;width: 100%;text-align: center;}
/* Number text (1/3 etc) */
.numbertext {color: #f2f2f2;font-size: 1rem;
  padding: 18px 18px;position: absolute;top: 0;}
/* The dots/bullets/indicators */
.dot {cursor: pointer;height: 15px;width: 4.5%;margin: 0 .8%;
  border-radius: 8px;display: inline-block;
  transition: background-color 0.6s ease;}
.active, .dot:hover {transform: scale(1.2);border: solid #aaa 1px;
  box-shadow: 0 5px 8px rgba(0,0,0,0.8);}

/* ------------------------------------ */
/*           Fading animation           */
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s;
  animation-name: fade;animation-duration: 1.5s;}
@-webkit-keyframes fade {from {opacity: .4} to {opacity: 1}}
@keyframes fade {from {opacity: .4} to {opacity: 1}}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}}
  
/*-----------------------------------*/
/*           Footer                  */
#footer-before-wrapper {position: absolute; bottom: 43px;width: 100%;height: -1px;
 box-shadow: 0 0 8px 3px rgba(0,0,0,0.7);}
#footer-wrapper {height: 0; padding-top: 3px;}
#footer {position: absolute; bottom: 0;min-width: 100%; height: 42px;
 background: transparent url(../images/logo/footer-bg.png) repeat-x top center;}
#footer-content {position: absolute; bottom: 0;  width: 100%; height: 34px; margin: 0 auto;}
#design {position: absolute; bottom: 5px;}