.itopplus-background {

}
@font-face {
    font-family: 'FC Friday';
    src: url('https://itp1.itopfile.com/ContentImage/d16fa54b58d36fa4/fonts/FC Friday Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'FC Friday';
    src: url('https://itp1.itopfile.com/ContentImage/d16fa54b58d36fa4/fonts/FC Friday Italic.ttf') format('truetype');
    font-style: italic;
}

@font-face {
    font-family: 'FC Friday';
    src: url('https://itp1.itopfile.com/ContentImage/d16fa54b58d36fa4/fonts/FC Friday Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FC Friday';
    src: url('https://itp1.itopfile.com/ContentImage/d16fa54b58d36fa4/fonts/FC Friday Medium Italic') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'FC Friday';
    src: url('https://itp1.itopfile.com/ContentImage/d16fa54b58d36fa4/fonts/FC Friday Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'FC Friday';
    src: url('https://itp1.itopfile.com/ContentImage/d16fa54b58d36fa4/fonts/FC Friday Bold Italic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

html, body {
	font-family: "FC Friday"
}


.dropdown-submenu>.dropdown-menu{
 right :100% !important;
 left: inherit !important;
}
a{
  color:#282828;
}
a:hover{
  color:#2785af;
}

.navbar-default .navbar-nav>li>a, .navbar-default .navbar-text {
    color: #2d2d2d;
    font-size: 22px;
    font-weight: bold;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: #2d2d2d;
    font-size: 20px;
    font-weight: bold;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
    color: #3875b1!important;
}
.navbar-default {
    background: linear-gradient(to bottom, #afb1b4 0%,#dcddde 50%,#feffff 100%);
    border-radius: 0;
}
.navbar-default .navbar-toggle {
    border-color: #eee0;
}
.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover {
    color: #3875b1;
    background-color: transparent
}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover {
    color: #3875b1!important;
    background-color: transparent
}
.navbar-default .navbar-toggle:focus .icon-bar,.navbar-default .navbar-toggle:hover .icon-bar {
    background-color: #3875b1;
}
.navbar-default .navbar-toggle:focus .text-bar,.navbar-default .navbar-toggle:hover .text-bar {
    color: #3875b1!important
}
.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover {
    background-color: transparent;
    color: #3875b1!important
}

@media (max-width:768px) {
    .navbar-default .navbar-nav .open .dropdown-menu>.dropdown-header {
        border-color: #e6e6e6
    }

    .navbar-default .navbar-nav .open .dropdown-menu .divider {
        background-color: #e6e6e6
    }

    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        color: #423e3e
    }

    .navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
        color: #000!important;
        background-color: transparent!important
    }

    .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover {
        color: #eee;
        background-color: transparent
    }
}

.navbar-default .navbar-link {
    color: #999
}

.navbar-default .navbar-link:hover {
    color: #000
}

.nav-pills>li {
    float: left
}

.nav-pills>li+li {
    margin-left: 2px
}

.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover {
    background-color: #fff;
    border-color: #e6e6e6;
    color: #000
}

.nav-stacked>li {
    float: none
}

.nav-stacked>li+li {
    margin-top: 2px;
    margin-left: 0
}

.nav-pills>li>a {
    border-radius: 4px;
    color: #999;
    border-color: #e6e6e6
}

.nav>li>a:focus,.nav>li>a:hover {
    text-decoration: none;
    color: #000;
    background-color: transparent;
    border-color: #e6e6e6
}

@media (max-width:768px) {
    .navbar-default {
        background: rgba(255,255,255,1);
        background: -moz-linear-gradient(top,rgba(255,255,255,1) 0,rgba(204,204,204,1) 100%);
        background: -webkit-gradient(left top,left bottom,color-stop(0,rgba(255,255,255,1)),color-stop(100%,rgba(204,204,204,1)));
        background: -webkit-linear-gradient(top,rgba(255,255,255,1) 0,rgba(204,204,204,1) 100%);
        background: -o-linear-gradient(top,rgba(255,255,255,1) 0,rgba(204,204,204,1) 100%);
        background: -ms-linear-gradient(top,rgba(255,255,255,1) 0,rgba(204,204,204,1) 100%);
        background: linear-gradient(to bottom,rgba(255,255,255,1) 0,rgba(204,204,204,1) 100%)
    }

    .nav .open>a,.nav .open>a:focus,.nav .open>a:hover {
        background: 0 0
    }
}

dropdown-menu>li>a {
    color: #423e3e
}
  
/*เมนูกึ่งกลาง*/
/* 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 ;
}

}

/* 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 ;
}

}





/*effect-steve*/
figure.effect-steve {
    background: transparent;
}
figure.effect-steve h2 {
    padding: 0;
}
figure.effect-steve h2, figure.effect-steve p {
    background: transparent;
}
figure.effect-steve h2:before, figure.effect-steve:before {
    background: #0000;
}
figure.effect-steve:before {
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.53);
}




/*effect-jazz*/
figure.effect-jazz figcaption::after {
    border-top: 0px solid #fff;
    border-bottom: 0px solid #fff;
}

figure.effect-jazz h2, figure.effect-jazz p {
  opacity: 1;
    margin-top: 15px;
    position: absolute;
    padding: 15px 5px 10px 5px;
    background: #00000059;
    width: 100%;
    height: 60px;
    font-size: 24px;
    text-align: center;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    top: 30%;
    left: 0;
    color: #fff;
    font-weight: bold;
    text-transform: capitalize;
    transform: scale3d(1,1,1);
}

figure.effect-jazz:hover h2, figure.effect-jazz:hover p {
    margin-top: 15px;
    position: absolute;
    padding: 15px 5px 10px 5px;
    background: #2785afb0;
    width: 100%;
    height: 60px;
    font-size: 24px;
    text-align: center;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    top: 30%;
    left: 0;
    color: #fff;
    font-weight: bold;
    text-transform: capitalize;
    transform: scale3d(1,1,1);
}

@media only screen and (max-width: 768px){
figure.effect-jazz h2, figure.effect-jazz p {
    opacity: 1;
    margin-top: 0px;
    position: absolute;
    padding: 10px 0px 10px 0px;
    background: #00000059;
    width: 100%;
    height: 45px;
    font-size: 15px;
    text-align: center;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    top: 35%;
    left: 0;
    color: #fff;
    font-weight: bold;
    text-transform: capitalize;
    transform: scale3d(1,1,1);
   }
  figure.effect-jazz:hover h2, figure.effect-jazz:hover p {
    margin-top: 0px;
    position: absolute;
    padding: 10px 0px 10px 0px;
    background: #2785afb0;
    width: 100%;
    height: 40px;
    font-size: 15px;
    text-align: center;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    top: 35%;
    left: 0;
    color: #fff;
    font-weight: bold;
    text-transform: capitalize;
    transform: scale3d(1,1,1);
  }
  p.margin {
    padding: 10px 0px 10px 0px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
 }
}