@import url("https://fonts.googleapis.com/css?family=Prompt:300");
@font-face{
    font-family: "Thonburi";
    src: url("fonts/Thonburi.ttf"),
    url("fonts/Thonburi.ttf"); /* IE */
}


@-ms-viewport{
  width: device-width;
}


body
{
margin:0px;
padding:0px;
background-color:white;
    
font-family: "Thonburi";
    vertical-align:top;
    text-align:left;
    font-size:10pt;
}

a.menu:link {color:black ;text-decoration: none;}
a.menu:visited {color:black ;text-decoration: none;}
a.menu:hover {color:white ;text-decoration: none;}
a.menu:active {color:white;text-decoration: none;}

a.menu2:link {color:white ;text-decoration: none;}
a.menu2:visited {color:white ;text-decoration: none;}
a.menu2:hover {color:white ;text-decoration: none;}
a.menu2:active {color:white;text-decoration: none;}

a.button:link {color:white ;text-decoration: none;}
a.button:visited {color:white ;text-decoration: none;}
a.button:hover {color:white ;text-decoration: none;}
a.button:active {color:white;text-decoration: none;}



a:link {color: #4A4BC4;text-decoration: none;}
a:visited {color: #575961;text-decoration: none;}
a:hover {color: #B10000;text-decoration: none;}
a:active {color: #575961;text-decoration: none;}

h1, h2, h3, h4
{
font-family: "Prompt", sans-serif;
}

h1
{
padding:10px 5% 15px 10%;
}

p
{
font-family: "Thonburi";
color:black;
padding:10px 0px 10px 0px;
}


.webhosting-thailand-title
{
background-color: #AD0707;
width:100%;
margin:0px;
padding:0px;
height:60px;
position:fixed;
z-index:10000;
}

img, div {
    vertical-align: text-top;
}

#webhosting-logo
{
display:inline-block;
padding-left:10%;
width:250px; 
-webkit-transition: width .5s; /* For Safari 3.1 to 6.0 */
    transition: width .5s;  
}

#webhosting-logo:hover
{
width:280px;
}


#webhosting-logo-auto
{
  width:100%;
  padding:5px 5px 8px 5px;
}


#imgEffect
{
width:100%;
padding:0px;
margin:0px;
    opacity: .85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
    -webkit-transition: opacity .5s; /* For Safari 3.1 to 6.0 */
    transition: opacity .5s; 
}

#imgEffect:hover
{
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}


.languages
{
text-align:right;
font-family: "Prompt", sans-serif;
    position: absolute;
    top: 0px;
    right: 30px;
    width: 120px;
    height: 52px;
}
   
#webhosting-language
{
margin:0px;	
text-align:center;
display:inline-block;
padding:0px;
-webkit-transition: border .2s, padding .5s; /* For Safari 3.1 to 6.0 */
    transition: border .2s, padding .5s;  
}

#webhosting-language:hover
{ 
    color: black; 
    border: 1px solid white;
    padding:4px;
}


.webhosting-mainmenu
{
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("img/businessman.jpg");
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
    
width:100%;
margin:0px;
padding:100px 0px 80px 0px;
height:auto;
z-index:9000;
text-align:center;
vertical-align:top;
font-family: "Prompt", sans-serif;
    
}


.hero-text
{
    background-color: lightskyblue;
    background-size: cover;
    padding: 15pt 5pt 15pt 5pt;
    font-family: "Prompt", sans-serif;
    font-size: 18pt;
    font-weight: 600;
color:white;
        opacity: .9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

#webhosting-menu-block
{
display:inline-block;
background-color:white;
text-align:left;
width:300px;
height:430px;
padding:0px;
margin:10px 5px 2px 5px;
list-style:none;
-webkit-transition: height .8s; /* For Safari 3.1 to 6.0 */
    transition: height .8s;
}

#webhosting-menu-block:hover
{
height:480px;
}





#hosting-head1, #hosting-head2,#hosting-head3,#hosting-head4
{
padding:15px 0px 5px 0px;
margin:0px;
color:white;
height:40px;
text-align:center;
text-shadow: 0px 0px 1px white;
font-size:16pt;
}

#hosting-head1
{background-color:#FF6732;}

#hosting-head2
{background-color:#FFA900;}

#hosting-head3
{background-color:#01BB4C;}

#hosting-head4
{background-color:#A6A6A6;}

#webhosting-header
{
padding:10px 20% 10px 20%;

text-align:left;
}

#webhosting-catch
{
padding:10px 20% 10px 20%;
text-align:center;
}

















#indent
{
padding:10px 5% 15px 18%;
text-align:left;
}


input
{ ;margin-bottom:10px;}

input[type=text],input[type=number] {
    border: 1px solid #CCCCCC;
    border-radius: 8px;
    background-color:#F2F2F2;
    padding:4px 8px 4px 8px;
}
input[type=text]:focus {
    background-color: #D9D9D9;
}

input[type=password] {
    border: 1px solid #CCCCCC;
    background-color:#FDFBEE;
    padding:4px 8px 4px 8px;
    color:#BB1010;
}

input[type=button], input[type=submit], input[type=reset]{
    background-color: #0081CC;
    border: none;
    color: white;
    padding: 10px 5px;
    text-decoration: none;
    margin:0px;
    cursor: pointer;
    font-size: 12pt;
    width:100%;
}

.button {
    background-color: #0081CC; /* blue */
    border: none;
    color: white;
    padding: 15px 40px 15px 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width:auto;
      opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */ 
    -webkit-transition: opacity .5s; /* For Safari 3.1 to 6.0 */
    transition: opacity .5s;    
}

.button:hover
{
    opacity: .70;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}



.topics {
    padding: 2px 3px 2px 25px;
    margin:5px 0px 0px 0px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 14pt;
    -webkit-transition-duration: 0.3s; /* Safari */
    transition-duration: 0.3s;
    cursor: pointer;
    width:272px;
font-family: "Prompt", sans-serif;    
}

.hosting-topic1:hover {
    background-color: #FF6732;
    color: white;
}


.hosting-topic2:hover {
    background-color: #FFA900;
    color: white;
}


.hosting-topic3:hover {
    background-color: #01BB4C;
    color: white;
}


.hosting-topic4:hover {
    background-color: #A6A6A6;
    color: white;
}




#hosting-item
{
padding-top:5px;
vertical-align:bottom;
height:auto;
}

#buttonEffect
{
width:200px;
padding:10px 5px 25px 5px;
margin:0px;
    opacity: .80;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    -webkit-transition: opacity .5s; /* For Safari 3.1 to 6.0 */
    transition: opacity .5s; 
}

#buttonEffect:hover
{
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}



#webhosting-t1, #webhosting-t2, #webhosting-t3, #webhosting-t4, #webhosting-t5, #webhosting-t6, #webhosting-t7
{
text-align:center;
padding:40px 0px 40px 0px;
margin:0px;
    opacity: 0.90;
    filter: alpha(opacity=90); /* For IE8 and earlier */
    -webkit-transition: opacity .3s; /* For Safari 3.1 to 6.0 */
    transition: opacity .3s; 
}

#webhosting-t1
{background-color:#F3CDD5;}

#webhosting-t2
{background-color:#FFED9B;}

#webhosting-t3
{background-color:aliceblue;}

#webhosting-t4
{background-color:#`;}

#webhosting-t5
{background-color:#A7D5FB;}

#webhosting-t6
{background-color:floralwhite;}

#webhosting-t7
{background-color:#FFCED9;}

#webhosting-t1:hover, #webhosting-t2:hover, #webhosting-t3:hover, #webhosting-t4:hover, #webhosting-t5:hover, #webhosting-t6:hover, #webhosting-t7:hover
{
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}



#innerT1,#innerT2,#innerT3,#innerT4,#innerT5,#innerT6,#innerT7,#innerT8
{
padding:10px 20% 10px 20%;
color:white;
text-align:left;
}

#innerT1
{background-color:#EC7992;}

#innerT2
{background-color:#FECB02;}

#innerT3
{background-color:cadetblue;}

#innerT4
{background-color:#00AFC5;}

#innerT5
{background-color:#4F7FFA;}

#innerT6
{background-color:#B32C8E;}

#innerT7
{background-color:#D62207;}

#innerT8
{background-color:#D65F88;}









#webhosting-footer
{
width:100%;
height:auto;
text-align:center;
background-color:#EEF6F1;
margin:0;
border-top:1px solid lightgrey;
border-bottom:1px solid lightgrey;
}

#webhosting-footer-block1
{
background-color:#FF6732;
}

#webhosting-footer-block2
{
background-color:#FFA900;
}


#webhosting-footer-block3
{
background-color:#01BB4C;
}


#webhosting-footer-block4
{
background-color:#A6A6A6;
}


#webhosting-footer-block1, #webhosting-footer-block2,#webhosting-footer-block3,#webhosting-footer-block4
{
margin:15px;
padding:10px 15px 23px 25px;
width: 240px;
font-size:10pt;
text-align:left;
display:inline-block;
height:200px;
    border-style:solid;
    border-width:2px;
    border-color:white;
border-radius: 10px;   
color:white; 
}


#important
{
color:#CF0312;
}




td
{
padding:2px 5px 2px 5px;
text-align:left;
}



#copyright
{
text-align:center;
font-size:8pt;
color:grey;
padding-top:15px;
padding-bottom:30px;
font-family: "Prompt", sans-serif;
}



#webplan
{
font-size:9pt;
background-color:#EEF6F1;
padding:10px;
width:100%;
}

#weborder
{
font-size:12pt;
background-color:#A6A6A6;
padding:20px;
width:auto;
color:white;
}


#weborderInner
{
width:100%;
padding:12px;
background-color:#EEF6F1;
color:black;
}

#webplan-head
{
color:grey;
text-align:right;
}







#web1, #web2, #web3, #web4, #web5
{
width:100%;
color:white;
padding:5px;
text-align:center;
}

#web1
{background-color:#FF6732;}

#web2
{background-color:#FFA900;}

#web3
{background-color:#01BB4C;}

#web4
{background-color:#A6A6A6;}

#web5
{background-color:#886BB1;}










#navigate2
{
display:inline-block;
padding:15px;
margin:10px;
background-color:#EEF6F1;
background-position:center top;
opacity: .9;
filter:Alpha(opacity=90);
position:inherit;
box-shadow: 0px 1px 3px grey;
font-size:10pt;
font-size-adjust:auto;
font-family: "Prompt", sans-serif;
color: black;	
text-align:center;
vertical-align:top;
height: 400px;
width:250px;
}




#webhost-pax
{
display:inline-block;
padding:15px;
margin:10px;
border-style:solid;
border-width:1px;
border-color:lightgrey;
background-color:#FFFFFF;
background-position:center top;
position:inherit;

font-size:10pt;
font-size-adjust:auto;
font-family: "Prompt", sans-serif;
color: black;	
text-align:center;
vertical-align:top;
height: auto;
width:250px;
}


#subpax1,#subpax2,#subpax3,#subpax4,#subpax5 
{
color:white;
font-size:14pt;
}


#subpax1
{background-color:#FF6732;}

#subpax2
{background-color:#FFA900;}

#subpax3
{background-color:#01BB4C;}

#subpax4
{background-color:#A6A6A6;}

#subpax5
{background-color:#886BB1;}


#webpax-detail
{
width:auto;
vertical-align:text-top;
}


#price
{
background-color:#3A71A7;
color:white;
width:auto;
margin:2px;
}

#price1
{
background-color:lightgrey;
color:white;
width:auto;
margin:2px;
}










#align-center
{
text-align:center;
}

#mobile
{
background-color:#0008A2;
color:white;
width:auto;
margin:2px;
}

.product
{
font-size:16pt;
color:#B91841;
font-weight:bold;
}

#webhosting-details
{
text-align:left;
font-size:10pt;
}

#bold 
{
font-weight:bold;
font-size:12pt;
background-color:#E7EFEF;
}

#topic
{
color:white;
background-color:#00AFC5;
font-family: "Prompt", sans-serif; 
font-size:14pt; 
padding:5px 15px 5px 15px;
}




#center {
text-align:center;
padding-left:10px;
padding-right:10px;
font-weight: bold;
}

strong
{
font-weight:bold;
color:orange;
}

#white
{ color:white;}

#yellow
{ color:#FEF49F;}

#blue
{ color:#AEFCFB;}















@media  (max-width: 1080px) {
    body {
font-size:11pt;
  }
  
#webhosting-logo
{
padding-left:5%;
}
  
#webhosting-logo-auto
{
  width:80%;
}
 
#innerT1,#innerT2,#innerT3,#innerT4,#innerT5,#innerT6,#innerT7, #innerT8
{
padding:10px 5% 10px 5%;
color:white;
} 
 
#webhosting-header, #webhosting-catch
{
padding:10px 5% 10px 5%;
}



#indent
{
padding:10px 5% 15px 5%;
}


#webhosting-language
{	
text-align:center;
}



td
{
vertical-align:top;
padding:5px;
padding-top:3px;
padding-bottom:3px;
}

  
}