.itopplus-background {

}
.navbar-default .navbar-nav>li>a {
    color: #151514;
    font-size: 18px;
}

.dropdown-menu>li>a {
    font-size: 16px;
}

.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover {
    color: #ff7900;
}
.navbar-default .navbar-toggle {
    border-color: #ff7900;
}
.navbar-default .navbar-toggle:focus .icon-bar,.navbar-default .navbar-toggle:hover .icon-bar {
    background-color: #ff7900;
}
.navbar-default .navbar-toggle:focus .text-bar,.navbar-default .navbar-toggle:hover .text-bar {
    color: #ff7900!important
}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover {
    background-color: transparent!important;
    color: #ff7900;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
    background-color: transparent;
    background-image: none;
    color: #ff7900;
}
.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover {
    background-color: transparent;
    background-image: none;
    color: #ff7900!important;
}

 .glyphicon-phone-alt:before {
     content: "\e182";
}


@media (max-width:768px) {
    .navbar-default {
        background: #ff7900;
    }
  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: white;
}
  .navbar-default .navbar-toggle:focus .text-bar, .navbar-default .navbar-toggle:hover .text-bar {
    color: #000000!important;
}
  .navbar-default .navbar-toggle:focus .icon-bar, .navbar-default .navbar-toggle:hover .icon-bar {
    background-color: #000000;
}
  .navbar-default .navbar-brand {
    color: #fff;
}
  .text-bar {
    color: #fff!important;
}
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}
  .navbar-default .navbar-nav>li>a {
    color: #ffffff;
    font-size: 18px;
}
  .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    background-color: white!important;
    color: #ff7900;
}
  .navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: #fff;
}
}

/*เมนูกึ่งกลาง*/
/* Medium Devices, Desktops */
@media only screen and (min-width : 1024px) {
h1,.h1 { font-size: 2.250em;}
h2,.h2 { font-size: 1.875em;}
h3,.h3 { font-size: 1.500em;}
h4,.h4 { font-size: 1.125em;}
h5,.h5 { font-size: 0.875em;}
h6,.h6 { font-size: 0.750em;}
p { margin: 0 0 10px;}
.navbar .nav,
.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}
#main-navbar-collapse{
  text-align:center ;
}
.itopplus-banner {
    background: rgba(255,255,255,.9);
    position: inherit;
    width: 100%;
    z-index: 100;
}
/*ฟอร์มสร้างเอง*/
#capcha0{
    margin-left: -0.5%;
    margin-right: -4%;
}
#bannerInside{
margin-right: -27%;
}
.navbar-default .navbar-nav>li>a {
    padding-left: 9px;
    padding-right: 9px;
}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1366px) {
h1,.h1 { font-size: 2.250em;}
h2,.h2 { font-size: 1.875em;}
h3,.h3 { font-size: 1.500em;}
h4,.h4 { font-size: 1.125em;}
h5,.h5 { font-size: 0.875em;}
h6,.h6 { font-size: 0.750em;}
p { margin: 0 0 10px;}
.navbar .nav,
.navbar .nav > li {
    float:none;	
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}
#main-navbar-collapse{
  text-align:center ;
}
.itopplus-banner {
    background: rgba(255,255,255,.9);
    position: inherit;
    width: 100%;
    z-index: 100;
}
.navbar-default .navbar-nav>li>a {
    padding-left: 15px;
    padding-right: 15px;
}
}

/*เนื้อหาระบบ*/

.Contentmanager .site .col-section .item.-micro a .caption .title {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2em;
    color: #000;
    -webkit-transition: 300ms ease-in-out;
    -moz-transition: 300ms ease-in-out;
    -o-transition: 300ms ease-in-out;
    -ms-transition: 300ms ease-in-out;
    transition: 300ms ease-in-out;
}

.Contentmanager .site .col-section .item.-micro a .post {
    text-align: center;
    margin: 10px;
    font-size: .8em;
    color: #777;
}


.managerHeader{
    font-size: 24px;
    color: #000;
}
#Contentmanager .post-time {
    font-size: 14px;
    color: #666;
}
.page-header {
    padding-bottom: 9px;
    margin: 40px 0 40px;
    border-bottom: 1px solid #777;
}
.landingpagemanager {
    display: none;
}

.contenemanager-gallery a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active {
    border-color: #fe7c04;
}





/*effect*/
.ef1{
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;

}

.ef1:hover{
-webkit-transform: scale(1.1);
    transform: scale(1.1);
}


/*effect วงกลม*/
.circle-container {
  position: relative;
  -webkit-perspective: 1000;
          perspective: 1000;
  margin: 0 auto;
}

.circle-container:hover .circle {
  -webkit-transform: rotate3d(45, 45, 0, 180deg);
          transform: rotate3d(45, 45, 0, 180deg);
}

.circle-container:hover .outer-ring {
  -webkit-transform: rotate3d(45, 0, 0, 180deg);
          transform: rotate3d(45, 0, 0, 180deg);
}

.circle-container:hover .outer-outer-ring {
  -webkit-transform: rotate3d(0, 45, 0, 180deg);
          transform: rotate3d(0, 45, 0, 180deg);
}

.circle-container, .front, .back {
  width: 175px;
  height: 175px;
  background-color: rgba(0, 0, 0, 0);
}

.circle, .outer-ring, .outer-outer-ring {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
          transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.circle {
  position: relative;
  width: 175px;
  height: 175px;
}

.front, .back {
  border-radius: 50%;
  
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  background-color: transparent;
  z-index: 2;
}
.back {
  -webkit-transform: rotate3d(45, 45, 0, 180deg);
          transform: rotate3d(45, 45, 0, 180deg);
  background-color: transparent;
}
.back-logo {
  width: 60%;
  display: block;
  margin: 2em auto;
}
.outer-ring {
  position: absolute;
  top: -10px;
  left: -10px;
  border-radius: 50%;
  border: 2px solid transparent;
  width: 195px;
  height: 194px;
  background-color:#ff7900;
 
}
.outer-outer-ring {
  position: absolute;
  top: -20px;
  left: -20px;
  border-radius: 50%;
  border: 2px solid #fff;
  width: 211px;
  height: 211px;
  background-color:#ff7900;
 
}


/*ปุ่มแฟลช 1*/
.myButt {
    width: 80%;
    margin: auto;
    outline: none;
    border-radius: 25px;
    border: none;
    padding-top: 5px;
    padding-bottom: 7px;
    display: block;
    cursor: pointer;
    background-color: #ff7900;
    position: relative;
    border: 2px solid #ff7900;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}
.one {
    border-color: #ff7900;
    overflow: hidden;
    color: #fff;
}
.one .insider {
  background-color: #fff;
  width: 100%;
  height: 20px;
  position: absolute;
  left: -135px;
  transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
}
.one:hover {
    background-color: #333;
    border-color: #ccc;
    color: #fff;
}

.one:hover .insider {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  left: 135px;
}






@media only screen and (max-width: 768px){
#display1{
margin-right: -3%;
}

#display3{
margin-right: -3%;
}
#capcha0 {
      margin-left: -1%;
    margin-right: -7%;
}
}




@media only screen and (max-width: 414px){
#display1{
margin-right: -7%;
}

#display3{
margin-right: -7%;
}
#capcha0 {
    margin-left: -3%;
    margin-right: -15%;
}
}