body {

    margin: 0;

    font-family: var(--mainFont);

}



@font-face {

    font-family: 'WorkSans-Regular';

    src: url(../fonts/WorkSans-Regular.ttf) format('truetype');

}



@font-face {

    font-family: 'Slabo27px-Regular';

    src: url(../fonts/Slabo27px-Regular.ttf) format('truetype');

}



body a {

    transition: 0.5s all ease;

    -webkit-transition: 0.5s all ease;

    -moz-transition: 0.5s all ease;

    -o-transition: 0.5s all ease;

    -ms-transition: 0.5s all ease;

    text-decoration: none;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    margin: 0;

}



p {

    margin: 0;

}



ul,

label {

    margin: 0;

    padding: 0;

}



body a:hover {

    text-decoration: none;

}



/*--header--*/

.header {

    background: none;

    position: relative;

    padding: 5em 0 1.5em;

}



.header-left {

    float: left;

    margin-top: 0.5em;

}



.header-left ul li {

    display: inline-block;

}



.header-left ul li a {

    font-size: 1em;

    color: #87807c;

}



.header-left ul li a {

    font-size: 1em;

    color: #87807c;

    font-weight: 800;

}



.header-left ul li:nth-child(1) {

    padding-right: 11px;

    margin-right: 10px;

    border-right: 2px solid #aaa;

}



.logo {

    position: absolute;

    top: 9%;

    z-index: 999;

    left: calc(50% - 75px);

    width: 150px;

}



.logo a img {

    display: block;

    width: 100%;

    margin: 0 auto;

}



.top-nav {

    text-align: center;

    float: left;

    width: 100%;

    margin: 0 auto;

}



span.menu {

    display: none;

}



.top-nav ul {

    margin: 0em;

}



.top-nav ul li {

    list-style-type: none;

    display: inline-block;

    margin: 0 2.5%;

}



.top-nav ul li:nth-child(2) {

    margin-right: 100px;

}



.top-nav ul li:nth-child(3) {

    margin-left: 100px;

}



.top-nav li a {

    color: #6d615a;

    font-size: 1.5em;

    padding: 0;

    font-family: '微軟正黑體', 'Slabo27px-Regular';

    font-weight: bold;

}



.top-nav li a:hover,

.top-nav li a.active {

    color: var(--mainColor);

}



/*--//header--*/

/*--banner--*/

#top {

    text-align: center;

}



.banner {

    position: relative;

}



.banner1 {

    background: url(../images/1.jpg)no-repeat center;

    background-size: contain;

    background-position: center;

    min-height: 700px;

}



.banner2 {

    background: url(../images/2.jpg)no-repeat center;

    background-size: contain;

    background-position: center;

}



.banner3 {

    background: url(../images/3.jpg)no-repeat center;

    background-size: contain;

    background-position: center;

}



/*--//banner--*/

/*------------------ Slider Part starts Here----------*/

#slider3,

#slider4 {

    box-shadow: none;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    margin: 0 auto;

}



.rslides_tabs {

    list-style: none;

    padding: 0;

    background: rgba(0, 0, 0, .25);

    box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);

    -moz-box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);

    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);

    font-size: 18px;

    list-style: none;

    margin: 0 auto 50px;

    max-width: 540px;

    padding: 10px 0;

    text-align: center;

    width: 100%;

}



.rslides_tabs li {

    display: inline;

    float: none;

    margin-right: 1px;

}



.rslides_tabs a {

    width: auto;

    line-height: 20px;

    padding: 9px 20px;

    height: auto;

    background: transparent;

    display: inline;

}



.rslides_tabs li:first-child {

    margin-left: 0;

}



.rslides_tabs .rslides_here a {

    background: rgba(255, 255, 255, .1);

    color: #fff;

    font-weight: bold;

}



.events {

    list-style: none;

}



.callbacks {

    position: relative;

    list-style: none;

    overflow: hidden;

    width: 100%;

    padding: 0;

    margin: 0;

}



.callbacks li {

    position: absolute;

    width: 100%;

    left: 0;

    top: 0;

}



.callbacks img {

    position: relative;

    z-index: 1;

    height: auto;

    border: 0;

}



.callbacks_nav {

    position: absolute;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    top: 49%;

    left: 3%;

    z-index: 3;

    text-indent: -9999px;

    overflow: hidden;

    text-decoration: none;

    height: 32px;

    width: 32px;

    background: transparent url("../images/icons.png") no-repeat 0px 0px;

}



.callbacks_nav:active {

    opacity: 1.0;

}



.callbacks_nav.next {

    left: auto;

    right: 3%;

    background: url(../images/icons.png)no-repeat -36px 0px;

}



#slider3-pager a,

#slider4-pager a {

    display: inline-block;

}



#slider3-pager span,

#slider4-pager span {

    float: left;

}



#slider3-pager span,

#slider4-pager span {

    width: 100px;

    height: 15px;

    background: #fff;

    display: inline-block;

    border-radius: 30em;

    opacity: 0.6;

}



#slider3-pager .rslides_here a,

#slider4-pager .rslides_here a {

    background: #FFF;

    border-radius: 30em;

    opacity: 1;

}



#slider3-pager a,

#slider4-pager a {

    padding: 0;

}



#slider3-pager li,

#slider4-pager li {

    display: inline-block;

}



.rslides {

    position: relative;

    list-style: none;

    overflow: hidden;

    width: 100%;

    padding: 0;

    margin: 0;

}



.rslides li {

    -webkit-backface-visibility: hidden;

    position: absolute;

    display: none;

    width: 100%;

    left: 0;

    top: 0;

}



.rslides li {

    position: relative;

    display: block;

    float: left;

}



.rslides img {

    height: auto;

    border: 0;

    width: 100%;

}



.callbacks_tabs {

    display: block;

    list-style: none;

    position: relative;

    bottom: -6%;

    z-index: 111;

    padding: 0;

    margin: 0 auto;

}



.callbacks_tabs li {

    display: inline-block;

    margin: 0 .3em;

}



@media screen and (max-width: 600px) {

    .callbacks_nav {

        top: 47%;

    }

}



/*----*/

.callbacks_tabs a {

    visibility: hidden;

}



.callbacks_tabs a:after {

    content: "\f111";

    font-size: 0;

    font-family: FontAwesome;

    visibility: visible;

    display: block;

    height: 9px;

    border-radius: 18px;

    width: 40px;

    display: inline-block;

    background: #fff;

    border: 1px solid var(--mainColor);

}



.callbacks_here a:after {

    background: var(--mainColor);

}



/*--//slider end here--*/

/*--start-search--*/

.search-box {

    float: right;

}



.sb-search {

    position: absolute;

    right: 14%;

    width: 0%;

    min-width: 41px;

    margin: 0;

    height: 26px;

    float: right;

    overflow: hidden;

    -webkit-transition: width 0.3s;

    -moz-transition: width 0.3s;

    transition: width 0.3s;

    -webkit-backface-visibility: hidden;

    background: none;

}



.sb-search-input {

    position: absolute;

    top: 0px;

    left: 0;

    border: none;

    outline: none;

    height: 25px;

    width: 80%;

    margin: 0;

    z-index: 10;

    font-size: 1em;

    color: #808080;

    padding: 0 0.5em;

    border-bottom: 1px solid;

}



.sb-search-input::-webkit-input-placeholder {

    color: #000;

}



.sb-search-input:-moz-placeholder {

    color: #000;

}



.sb-search-input::-moz-placeholder {

    color: #efb480;

}



.sb-search-input:-ms-input-placeholder {

    color: #ffffff;

}



.sb-icon-search,

.sb-search-submit {

    width: 41px;

    height: 35px;

    display: block;

    position: absolute;

    right: 0;

    top: 0px;

    padding: 0;

    margin: 0;

    line-height: 85px;

    text-align: center;

    cursor: pointer;

}



.sb-search-submit {

    background: #fff url('../images/search.png') no-repeat center 3px;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    /* IE 8 */

    filter: alpha(opacity=0);

    /* IE 5-7 */

    color: transparent;

    border: none;

    outline: none;

    z-index: -1;

    -webkit-appearance: none;

}



.sb-icon-search {

    background: #fff url('../images/search.png') no-repeat center 3px;

    z-index: 90;

}



/* Open state */

.sb-search.sb-search-open,

.no-js .sb-search {

    width: 12%;

}



.sb-search.sb-search-open .sb-icon-search,

.no-js .sb-search .sb-icon-search {

    z-index: 11;

}



.sb-search.sb-search-open .sb-search-submit,

.no-js .sb-search .sb-search-submit {

    z-index: 90;

}



/*-- search-ends --*/

/*--//start-search--*/

h3.title {

    font-size: 3.5em;

    font-family: var(--viceFont);

    line-height: 1em;

    color: #9966cb;

    text-align: center;

    font-weight: bold;

}



h1.hdng {

    font-size: 3.5em;

    font-family: var(--viceFont);

    line-height: 1em;

    color: #000000;

    text-align: center;

}



.welcome,

.about,

.gallery,

.news,

.codes,

.contact,

.account {

    padding: 5em 0;

}



.banner-bottom {

    background: url(../images/slid1.jpg)no-repeat 0px 0px fixed;
    background-attachment: fixed;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    padding: 8em 0;
    height: 300px;
}



.banner-bottom h2,

.contact h2 {

    font-size: 3.5em;

    margin-top: 1em;

    font-family: var(--viceFont);

    line-height: 1em;

    color: #fff;

}



.banner-bottom p {

    font-size: 1em;

    margin-top: 1.5em;

    color: rgba(256, 256, 256);

    line-height: 1.6em;

}



.banner-bottom h4 {

    font-size: 1.6em;

    color: #fff;

    letter-spacing: -1px;

}



/*--welcome--*/

.welcome p {

    font-size: 20px;

    margin-top: .5em;

    color: #000000;

    line-height: 1.8em;

    text-align: center;

    font-weight: bold;

}



.welcome img {

    width: 100%;

}



.welcome-info {

    margin: 3em 0;

}



/*--//welcome--*/

/*--services--*/

.services {

    background: url(../images/slid.jpg)no-repeat 0px 0px;

    background-size: cover;

    padding: 8em 0 5em;

}



.services-grids {

    background-color: #fff;

    width: 50%;

    margin: 0 auto;

    text-align: center;

    padding: 5em 0;

}



.services span.glyphicon {

    font-size: 3em;

}



.services h4 {

    font-size: 2.5em;

    margin: 0.6em 0;

    font-family: var(--viceFont);

    color: #9966cb;

}



.services p {

    font-size: 1em;

    color: #87807c;

    line-height: 1.6em;

    width: 50%;

    margin: 0 auto;

}



.services span.glyphicon {

    font-size: 3em;

    color: var(--mainColor);

    border: 10px double;

    padding: 0.5em;

    border-radius: 20px;

}



/*--//services--*/

/*--work--*/

.work-grids.work-img {

    background: url(../images/img3.jpg)no-repeat 0px 0px;

    background-size: contain;

    min-height: 700px;

}



.img5 {

    background: url(../images/img5.jpg)no-repeat 0px 0px !important;

    background-size: contain !important;

}



.img7 {

    background: url(../images/img7.jpg)no-repeat 0px 0px !important;

    background-size: contain !important;

}



/*@media screen and (max-width: 500px){

.work-grids.work-img, .img5, .img7{

  background-size: cover !important;

  }

}*/

.work-grids {

    padding: 8.5em 5em;

}



.work-grids h3 {

    font-size: 3em;

    font-family: var(--viceFont);

    color: #9966cb;

}



.work-grids p {

    font-size: 1em;

    color: #87807c;

    line-height: 1.6em;

    margin: 1.5em 0 1em;

}



.work-grids ul li {

    display: block;

    margin: 1em 0 0;

}



.work-grids ul li a {

    font-size: 1em;

    color: #87807c;

}



.work-grids ul li a:hover {

    color: var(--mainColor);

    padding-left: 10px;

}



span.glyphicon.glyphicon-chevron-right {

    font-size: .9em;

    margin-right: 1em;

}



.work-grids.work-img.work-img-btm {

    background: url(../images/img4.jpg)no-repeat 0px 0px;

    background-size: cover;

    min-height: 720px;

}



.work-grids.work-img2.work-img-btm {

    background: url(../images/img8.jpg)no-repeat 0px 0px;

    background-size: cover;

    min-height: 800px;

}



.img6 {

    background: url(../images/img6.jpg)no-repeat 0px 0px !important;

    background-size: contain !important;

}



/*@media screen and (max-width: 500px){

.work-grids.work-img.work-img-bt, .work-grids.work-img.work-img-btm, .img6{

  background-size: cover !important;

  }

}*/

/*--//work--*/

/*--footer--*/

.footer {

    text-align: center;

    background: #000;

    padding: 1.5em 0;

}



.footer p {

    color: #fff;

    font-size: 1em;

    margin-top: 10px;

}



.footer p a {

    color: var(--mainColor);

}



.footer p a:hover {

    color: #fff;

}



.footer-left {

    float: left;

}



.social-icons {

    float: right;

}



.social-icons ul li {

    display: inline-block;

    margin-right: 10px;

}



.social-icons ul li a {

    background: url(../images/iconsprite.png)no-repeat 3px -33px;

    display: block;

    width: 32px;

    height: 32px;

    transition: none;

}



.social-icons ul li a.fb {

    background: url(../images/iconsprite.png)no-repeat 10px 3px;

}



.social-icons ul li a.pn {

    background: url(../images/iconsprite.png)no-repeat 6px -108px;

}



.social-icons ul li a.gg {

    background: url(../images/iconsprite.png)no-repeat 6px -69px;

}



.social-icons ul li a.line {

    background: url(../icon/line.svg)no-repeat;

}



.social-icons ul li a.new {

    background: url(../icon/web.svg)no-repeat;

}



.social-icons ul li a.youtube {

    background: url(../icon/yt.svg)no-repeat;

}



.social-icons ul li a.ig {

    background: url(../icon/ig.svg)no-repeat;

}



.social-icons ul li a.ruten {

    background: url(../icon/ruten.svg)no-repeat;

}



.social-icons ul li a.pixnet {

    background: url(../icon/pixnet.svg)no-repeat;

    background-size: cover;

}



.social-icons ul li a.yahoo {

    background: url(../icon/yahoo.png)no-repeat;

    background-size: cover;

}



.social-icons ul li a.soeasy {

    background: url(../icon/soeasy.png)no-repeat;

    background-size: cover;

}



.social-icons ul li a.buzzdaily {

    background: url(../icon/buzzdaily.png)no-repeat;

    background-size: cover;

}



.social-icons ul li a.PC {

    background: url(../icon/PC.png)no-repeat;

    background-size: cover;

}



.social-icons ul li a:hover {

    opacity: 0.5;

}



/*--//footer--*/

/*--slider-up-arrow--*/

#toTop {

    display: none;

    text-decoration: none;

    position: fixed;

    bottom: 3%;

    right: 3%;

    overflow: hidden;

    width: 32px;

    height: 32px;

    border: none;

    text-indent: 100%;

    background: url("../images/move-up.svg?0430") no-repeat center;

    background-size: cover;

}



#toTopHover {

    width: 32px;

    height: 32px;

    display: block;

    overflow: hidden;

    float: right;

    opacity: 0;

    -moz-opacity: 0;

    filter: alpha(opacity=0);

}



/*--//slider-up-arrow--*/

/*--about-page--*/

.banner1.about-bnr {

    min-height: 700px;

}



.about-text {

    padding: 3em 0 5em;

}



.about-text-left img {

    width: 100%;

}



.about-info-left:nth-child(1) {

    padding-left: 0;

}



.about-text-right h4 {

    color: var(--mainColor);

    font-size: 1.5em;

    font-family: var(--mainFont);

    letter-spacing: -1px;

}



.about-text-right p {

    font-size: 1em;

    margin-top: 1em;

    color: #87807c;

    line-height: 1.8em;

}



.about-text-right ul {

    padding: 0;

}



.about-text-right ul li {

    display: block;

    margin: 1.2em 0 0;

}



.about-text-right ul li a {

    color: #87807c;

    font-size: 1em;

}



.about-text-right ul li a:hover {

    color: var(--mainColor);

    padding-left: 10px;

}



.about-slid {

    background: url(../images/slid3.jpg)no-repeat 0px 0px fixed;

    background-size: cover;

    text-align: center;

    padding: 6em 0;

}



.about-slid h2 {

    font-size: 3.4em;

    color: #fff;

    font-family: var(--viceFont);

}



.about-slid p {

    color: #fff;

    font-size: 1em;

    margin: 2em auto 0;

    line-height: 1.8em;

    width: 75%;

}



.about-slid-info {

    width: 80%;

    margin: 0 auto;

}



.about-team {

    padding: 2em 0 4em;

}



.row.team-row {

    margin: 5em 0 0;

}



.thumbnail.team-thmnl {

    border: none;

    text-align: center;

}



.about-team .caption {

    padding: 1.5em .5em !important;

}



.about-team h4 {

    font-size: 1.8em;

    font-family: var(--viceFont);

}



.about-team h4 a {

    color: var(--mainColor);

}



.about-team h4 a:hover {

    color: #9966cb;

}



.about-team p {

    color: #87807c;

    font-size: 1em;

    line-height: 1.8em;

    margin-top: 1em;

}



img.zoom-img {

    transform: scale(1, 1);

    -webkit-transform: scale(1, 1);

    -moz-transform: scale(1, 1);

    -ms-transform: scale(1, 1);

    -o-transform: scale(1, 1);

    transition-timing-function: ease-out;

    -webkit-transition-timing-function: ease-out;

    -moz-transition-timing-function: ease-out;

    -ms-transition-timing-function: ease-out;

    -o-transition-timing-function: ease-out;

    -webkit-transition-duration: .5s;

    -moz-transition-duration: .5s;

    -ms-transition-duration: .5s;

    -o-transition-duration: .5s;

}



.team-grids:hover img.zoom-img {

    transform: scale(1.08);

    -webkit-transform: scale(1.08);

    -moz-transform: scale(1.08);

    -ms-transform: scale(1.08);

    -o-transform: scale(1.08);

    -webkit-transition-timing-function: ease-in-out;

    -webkit-transition-duration: 750ms;

    -moz-transition-timing-function: ease-in-out;

    -moz-transition-duration: 750ms;

    -ms-transition-timing-function: ease-in-out;

    -o-transition-timing-function: ease-in-out;

    -ms-transition-duration: 750ms;

    -o-transition-duration: 750ms;

    overflow: hidden;

}



/*--//about-page--*/

/*--Login --*/

#loginContainer {

    position: relative;

}



#loginContainer a span {

    display: block;

}



/* Login Button */

#loginButton {

    display: inline-block;

    position: relative;

    z-index: 30;

    cursor: pointer;

}



/* Login Box */

#loginBox {

    position: absolute;

    top: 44px;

    left: -18px;

    display: none;

    z-index: 99999;

}



#loginForm:after {

    content: '';

    position: absolute;

    left: 25px;

    top: -10px;

    border-left: 10px solid rgba(0, 0, 0, 0);

    border-right: 10px solid rgba(0, 0, 0, 0);

    border-bottom: 10px solid var(--mainColor);

}



/* Login Form */

#loginForm {

    width: 300px;

    background: #fff;

    border: 1px solid #d6d6d6;

}



#loginForm fieldset {

    margin: 0 0 15px 0;

    display: block;

    border: 0;

    padding: 0;

}



fieldset#body {

    border-radius: 3px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    -o-border-radius: 3px;

    padding: 15px 15px;

    margin: 0;

}



#loginForm #checkbox {

    width: auto;

    margin: 3px 6px 0 0;

    float: left;

    padding: 0;

    border: 0;

    *margin: -3px 9px 0 0;

    /* IE7 Fix */

}



#body label {

    color: #87807c;

    margin: 10px 0 0 0;

    display: block;

    float: left;

    font-size: 0.9em;

}



#loginForm #body fieldset label {

    display: block;

    float: none;

    margin: 0 0 6px 0;

}



#body label i {

    color: #87807c;

    font-size: 1em;

}



/* Default Input */

#loginForm input {

    width: 92%;

    border: 1px solid #DADADA;

    color: #222;

    background: #FFF;

    padding: 6px;

    font-size: 0.9em;

    -webkit-apperance: none;

}



/* Sign In Button */

#loginForm #login {

    background: var(--mainColor);

    color: #fff;

    font-size: 1em;

    padding: 5px 20px;

    border: 1px solid var(--mainColor);

    /* margin: 0; */

    transition: all .5s;

    -webkit-transition: all .5s;

    -moz-transition: all .5s;

    -o-transition: all .5s;

    font-family: var(--mainFont);

}



#loginForm #login:hover {

    background: #fff;

    color: var(--mainColor);

}



/* Forgot your password */

#loginForm span {

    display: block;

    padding-bottom: 15px;

    text-align: center;

}



#loginForm span a {

    font-weight: 100;

}



#loginForm span a:hover {

    text-decoration: underline;

    color: var(--mainColor);

}



input:focus {

    outline: none;

}



/*--//Login --*/

/*--gallery--*/

.gallery-grids {

    margin: 6em 0;

}



h2.hdng-two {

    font-size: 1.3em;

    text-align: center;

    margin-top: 1em;

    letter-spacing: -1px;

    color: #A9A4A1;

}



.gallery-grids ul li {

    display: inline-block;

    width: 25%;

    float: left;

    position: relative;

}



.gallery-grids ul li a {

    display: block;

}



.gallery-grids ul li a img {

    width: 100%;

}



.glry-bgd {

    position: absolute;

    top: 0%;

    text-align: center;

    width: 100%;

    background: rgba(0, 0, 0, 0.55);

    height: 100%;

    transition: .5s all;

    -webkit-transition: .5s all;

    -moz-transition: .5s all;

    -o-transition: .5s all;

    -ms-transition: .5s all;

}



.gallery-grids ul li:hover div.glry-bgd {

    background: none;

}



/*--//gallery--*/

/*--news--*/

.news-grids {

    margin-top: 6em;

    padding: 0;

}



.news-grids-left {

    float: left;

    width: 33%;

    margin-right: 2em;

}



.news-grids-right {

    float: left;

    width: 50%;

    margin-top: 1em;

}



.news-grids-left img {

    border-radius: 50%;

    -webkit-border-radius: 50%;

    -o-border-radius: 50%;

    -ms-border-radius: 50%;

    border: 5px double #87807C;

}



.news-grids h5 {

    font-size: 2.5em;

    border-bottom: 4px dotted;

    padding-bottom: 10px;

    color: #000000;

    font-family: var(--viceFont);

}



.news-grids p {

    font-size: 1.5em;

    line-height: 1.8em;

    margin-top: 1em;

    color: #87807c;

}



/*--//news--*/

/*--Shortcodes--*/

h3.hdg {

    font-size: 2em;

}



.show-grid [class^=col-] {

    background: #fff;

    text-align: center;

    margin-bottom: 10px;

    line-height: 2em;

    border: 10px solid #f0f0f0;

}



.show-grid [class*="col-"]:hover {

    background: #e0e0e0;

}



.grid_3 {

    margin-bottom: 2em;

}



.xs h3,

h3.m_1 {

    color: #000;

    font-size: 1.7em;

    font-weight: 300;

    margin-bottom: 1em;

}



.grid_3 p {

    color: #999;

    font-size: 0.85em;

    margin-bottom: 1em;

    font-weight: 300;

}



.grid_4 {

    background: none;

    margin-top: 50px;

}



.label {

    font-weight: 300 !important;

    border-radius: 4px;

}



.grid_5 {

    background: none;

    padding: 2em 0;

}



.grid_5 h3,

.grid_5 h2,

.grid_5 h1,

.grid_5 h4,

.grid_5 h5,

h3.hdg {

    margin-bottom: 0.6em;

    color: var(--mainColor);

}



.table>thead>tr>th,

.table>tbody>tr>th,

.table>tfoot>tr>th,

.table>thead>tr>td,

.table>tbody>tr>td,

.table>tfoot>tr>td {

    border-top: none !important;

}



.tab-content>.active {

    display: block;

    visibility: visible;

}



.pagination>.active>a,

.pagination>.active>span,

.pagination>.active>a:hover,

.pagination>.active>span:hover,

.pagination>.active>a:focus,

.pagination>.active>span:focus {

    z-index: 0;

}



.badge-primary {

    background-color: #03a9f4;

}



.badge-success {

    background-color: #8bc34a;

}



.badge-warning {

    background-color: #ffc107;

}



.badge-danger {

    background-color: #e51c23;

}



.grid_3 p {

    line-height: 2em;

    color: #888;

    font-size: 0.9em;

    margin-bottom: 1em;

    font-weight: 300;

}



.bs-docs-example {

    margin: 1em 0;

}



section#tables p {

    margin-top: 1em;

}



.tab-container .tab-content {

    border-radius: 0 2px 2px 2px;

    border: 1px solid #e0e0e0;

    padding: 16px;

    background-color: #ffffff;

}



.table td,

.table>tbody>tr>td,

.table>tbody>tr>th,

.table>tfoot>tr>td,

.table>tfoot>tr>th,

.table>thead>tr>td,

.table>thead>tr>th {

    padding: 15px !important;

}



.table>thead>tr>th,

.table>tbody>tr>th,

.table>tfoot>tr>th,

.table>thead>tr>td,

.table>tbody>tr>td,

.table>tfoot>tr>td {

    font-size: 0.9em;

    color: #999;

    border-top: none !important;

}



.tab-content>.active {

    display: block;

    visibility: visible;

}



.label {

    font-weight: 300 !important;

}



.label {

    padding: 4px 6px;

    border: none;

    text-shadow: none;

}



.nav-tabs {

    margin-bottom: 1em;

}



.alert {

    font-size: 0.85em;

}



h1.t-button,

h2.t-button,

h3.t-button,

h4.t-button,

h5.t-button {

    line-height: 1.8em;

    margin-top: 0.5em;

    margin-bottom: 0.5em;

}



li.list-group-item1 {

    line-height: 2.5em;

}



.input-group {

    margin-bottom: 20px;

}



.in-gp-tl {

    padding: 0;

}



.in-gp-tb {

    padding-right: 0;

}



.list-group {

    margin-bottom: 48px;

}



ol {

    margin-bottom: 44px;

}



h2.typoh2 {

    margin: 0 0 10px;

}



/*--//Shortcodes--*/

/*--contact-page--*/

.contact h3,

.contact h1.hdng {

    text-align: left;

    margin-bottom: .6em;

}



.contact h2 {

    color: #000000;

    margin: 0 0 .6em 0;

}



.map iframe {

    width: 100%;

    height: 340px;

    border: 0;

}



.address p {

    color: #87807c;

    margin: 0 0 .5em 0;

    text-align: left;

    font-size: 1em;

    line-height: 1.8em;

}



p.cnt-p {

    margin-bottom: 1.5em;

}



.address a {

    color: var(--mainColor);

    margin: 0 0 .5em 0;

    text-align: left;

    font-size: 1em;

}



.address a:hover {

    color: #87807c;

}



.contact-form {

    margin-top: 5em;

}



.contact-form input[type="text"] {

    display: inline-block;

    background: none;

    border: 3px double #BDBDBD;

    width: 100%;

    outline: none;

    font-size: 1em;

    color: #87807c;

    padding: .8em 1em;

    -webkit-appearance: none;

}



.contact-form textarea {

    background: none;

    margin-bottom: 0.8em;

    border: 3px double #BDBDBD;

    width: 100%;

    display: block;

    height: 9.9em;

    outline: none;

    font-size: 1em;

    color: #87807c;

    resize: none;

    padding: .8em 1em;

    -webkit-appearance: none;

}



.contact-form input[type="text"]:nth-child(2) {

    margin: 1.6em 0;

}



.contact-form input[type="submit"] {

    width: 100%;

    font-size: 1.1em;

    color: #fff;

    outline: none;

    padding: 6px 10px;

    border: 3px double var(--mainColor);

    background: var(--mainColor);

    transition: 0.5s all;

    -webkit-transition: 0.5s all;

    -moz-transition: 0.5s all;

    -o-transition: 0.5s all;

    -ms-transition: 0.5s all;

    -webkit-appearance: none;

}



.contact-form input[type="submit"]:hover {

    background: #fff;

    color: var(--mainColor);

}



.form-grids:nth-child(1) {

    padding-left: 0;

}



.form-grids:nth-child(2) {

    padding-right: 0;

}



/*--//contact-page--*/

/*-- registration-form --*/

.account h1,

.account h2 {

    font-size: 2em;

    color: #333;

    text-transform: capitalize;

    margin-bottom: 0.8em;

    font-family: var(--viceFont);

}



.account span {

    color: #9966cb;

}



.account-left {

    float: left;

    width: 45.33333%;

    margin-left: 9.333%;

}



.account-left:first-child {

    margin-left: 0;

}



.registration_form {

    display: block;

}



.registration_form div {

    padding: 10px 0;

}



.sky_form1 {

    margin-bottom: -30px;

}



.sky_form1 ul {

    padding: 0;

    list-style: none;

    padding-left: 1.5em;

}



.sky_form1 ul li {

    float: left;

    margin-left: 3em;

}



.sky_form1 ul li:first-child {

    margin-left: 0;

}



.radio {

    margin-top: 0;

}



.checkbox {

    font-size: 0.9em;

    color: #87807c;

}



input[type="checkbox"] {

    margin: 0 !important;

}



.checkbox i {

    font-style: normal;

    margin-left: 1.8em;

}



label {

    display: block;

    margin-bottom: 0;

    font-weight: normal;

}



.registration_form input[type="text"],

.registration_form input[type="email"],

.registration_form input[type="tel"],

.registration_form input[type="password"] {

    padding: 8px;

    display: block;

    width: 100%;

    outline: none;

    color: #333333;

    -webkit-appearance: none;

    text-transform: capitalize;

    background: #FFFFFF;

    border: 1px solid rgb(231, 231, 231);

    font-weight: normal;

    font-size: 1em;

}



.registration_form input[type="submit"] {

    font-size: 0.9em;

    background: var(--mainColor);

    padding: 0.5em 2em;

    color: #fff;

    text-decoration: none;

    border: none;

    text-transform: uppercase;

    transition: 0.5s ease;

    -moz-transition: 0.5s ease;

    -o-transition: 0.5s ease;

    -webkit-transition: 0.5s ease;

    font-family: var(--mainFont);

}



.registration_form input[type="submit"]:hover {

    background: #87807c;

}



.terms {

    text-decoration: underline;

    text-transform: capitalize;

    color: #87807c;

}



.terms:hover {

    text-decoration: none;

    color: var(--mainColor);

}



.forget a {

    text-transform: capitalize;

    color: #87807c;

    text-decoration: underline;

    font-size: 0.9em;

}



.forget a:hover {

    text-decoration: none;

    color: var(--mainColor);

}



/*--//registration-form--*/

/*---- responsive-design -----*/

@media(max-width:1440px) {

    .sb-search {

        right: 10%;

    }



    .work-grids {

        padding: 8.5em 4em;

    }

}



@media(max-width:1366px) {

    .work-grids.work-grids-left {

        padding: 7.5em 4.5em;

    }

}



@media(max-width:1280px) {



    .sb-search.sb-search-open,

    .no-js .sb-search {

        width: 14%;

    }



    .sb-search {

        right: 5%;

    }



    .top-nav {

        width: 100%;

    }



    .banner1 {

        min-height: 500px;

    }



    .callbacks_tabs {

        bottom: -9%;

    }



    .work-grids {

        padding: 5em 5em;

    }



    .banner-bottom h2 {

        margin-top: 0.8em;

    }



    .about-team {

        padding: 0em 0 2em;

    }



    img.img-responsive.zoom-img {

        width: 100%;

    }



    .work-grids.work-img {

        min-height: 510px;

    }



    .work-grids.work-grids-left {

        padding: 6em 4em;

    }



    .work-grids.work-img.work-img-btm {

        min-height: 520px;

    }



    .work-grids.work-grids-left {

        padding: 6em 4em;

    }



    .work-grids h3 {

        font-size: 2.8em;

    }

}



@media(max-width:1080px) {



    .welcome,

    .about,

    .gallery,

    .news,

    .codes,

    .contact,

    .account {

        padding: 4em 0;

    }



    .header {

        padding: 4em 0 1.5em;

    }



    .banner-bottom {

        padding: 5em 0;

    }



    .work-grids {

        padding: 6em 3em;

    }



    .work-grids.work-img {

        min-height: 470px;

    }



    .work-grids h3 {

        font-size: 2.6em;

    }



    .work-grids p {

        margin: 1em 0;

    }



    .work-grids.work-img.work-img-btm {

        min-height: 500px;

    }



    .work-grids.work-grids-left {

        padding: 5.5em 3em;

    }



    .services {

        padding: 6em 0 4em
    }



    .services-grids {

        width: 35%;

        padding: 3em 0;

    }



    .services span.glyphicon {

        font-size: 2em;

    }



    .services h4 {

        font-size: 2.3em;

    }



    .services p {

        width: 81%;

    }



    h1.hdng {

        font-size: 3.3em;

    }



    .about-text-right h4 {

        font-size: 1.4em;

    }



    .about-text-right ul li {

        margin: 0.8em 0 0;

    }



    .about-text {

        padding: 3em 0 4em;

    }



    .about-slid {

        padding: 5em 0;

    }



    .about-slid p {

        margin: 1em auto 0;

        width: 92%;

    }



    .about-team h4 {

        font-size: 1.6em;

    }



    .gallery-grids {

        margin: 4em 0;

    }



    h3.title {

        font-size: 3.3em;

    }

}



@media(max-width:1024px) {

    .work-grids {

        padding: 5.5em 3em;

    }



    .work-grids.work-grids-left {

        padding: 5.3em 3em;

    }

}



@media(max-width:991px) {

    .header-left {

        float: none;

        margin: 1em 0;

        width: 100%;

    }



    .header {

        padding: 1em 0;

    }



    .sb-search.sb-search-open,

    .no-js .sb-search {

        width: 20%;

    }



    .top-nav {

        width: 100%;

        float: none;

    }



    .sb-search {

        right: 13%;

        top: 20%;

    }



    .header-left {

        float: none;

        margin: 1em 0;

        width: 100%;

        border-bottom: 1px solid;

        padding-bottom: 1em;

    }



    .banner1 {

        min-height: 425px !important;

    }



    h1.hdng {

        font-size: 3em;

    }



    .welcome-grids {

        float: left;

        width: 50%;

    }



    .welcome-info {

        margin: 2em 0;

    }



    .banner-bottom {

        padding: 4em 0;

    }



    .banner-bottom h2 {

        margin-top: 0;

    }



    .banner-bottom-grids:nth-child(2) {

        margin: 3em 0;

    }



    .banner-bottom-grids {

        width: 72%;

    }



    .banner-bottom p {

        margin-top: 1em;

    }



    .work-grids {

        float: left;

        width: 50%;

    }



    .work-grids {

        padding: 3em 3em;

    }



    .work-grids h3 {

        font-size: 2.5em;

    }



    .work-grids.work-img {

        padding: 0;

        min-height: 375px;

    }



    .work-grids.work-img.work-img-btm {

        min-height: 375px;

    }



    .work-grids.work-grids-left {

        padding: 3.1em 5em;

    }



    .work-grids {

        padding: 3em 5em;

    }



    .services {

        padding: 5em 0 2em;

    }



    .services h4 {

        font-size: 2em;

    }



    .services-grids {

        width: 45%;

    }



    .about-text-left,

    .about-text-right {

        padding: 0;

    }



    .about-text-right {

        margin: 1.5em 0 0;

    }



    .about-text {

        padding: 2em 0 3em;

    }



    .about-text-right p {

        margin-top: 0.5em;

    }



    .about-slid h2 {

        font-size: 2.9em;

    }



    .about-slid p {

        width: 100%;

    }



    .row.team-row {

        margin: 3em 0 0;

    }



    .team-grids {

        width: 25%;

        padding-left: 0;

        float: left;

    }



    .about-team h4 {

        font-size: 1.4em;

    }



    .about-team .caption {

        padding: 1em 0em !important;

    }



    h2.hdng-two {

        font-size: 1.2em;

        margin-top: 0.5em;

    }



    .gallery-grids {

        margin: 4em 0 2em;

    }



    .gallery-grids ul li {

        width: 33.33%;

    }



    .news-grids {

        margin-top: 4em;

    }



    .news-grids-left {

        width: 22%;

    }



    .news-grids-right {

        margin-top: 0.8em;

    }



    .news-grids-right p {

        text-align: justify;

    }



    h3.title {

        font-size: 3em;

    }



    .address {

        margin-top: 2em;

    }



    .banner-bottom h2,

    .contact h2 {

        font-size: 3em;

    }



    .contact h2 {

        margin: 0 0 .2em 0;

    }



    p.cnt-p {

        margin-bottom: 0.5em;

    }



    .contact-form {

        margin-top: 2em;

    }



    .form-grids {

        padding: 0;

    }



    .form-grids:nth-child(2) {

        padding: 0;

        margin-top: 1em;

    }



    .map iframe {

        height: 280px;

    }



    .account-left {

        float: left;

        width: 46%;

        margin-left: 7%;

    }



    .account h1,

    .account h2 {

        font-size: 1.8em;

    }

}



@media(max-width:768px) {

    .top-nav ul {

        margin: 0em;

        padding-left: 0em;

    }



    .sb-search {

        right: 2%;

    }



    .sb-search.sb-search-open,

    .no-js .sb-search {

        width: 25%;

    }



    .banner1 {

        min-height: 400px;

    }



    .callbacks_tabs a:after {

        height: 6px;

        width: 35px;

    }



    .work-grids.work-img {

        min-height: 350px
    }



    .work-grids h3 {

        font-size: 2.3em;

    }



    .work-grids.work-img.work-img-btm {

        min-height: 350px;

    }





    .work-grids.work-grids-left {

        padding: 4em 3em;

    }



    .flex-control-nav {

        right: 8%;

    }



}



@media(max-width:640px) {

    .banner1 {

        min-height: 335px;

    }



    .welcome,

    .about,

    .gallery,

    .news,

    .codes,

    .contact,

    .account {

        padding: 3em 0;

    }



    .callbacks_tabs a:after {

        width: 29px;

    }



    .callbacks_tabs {

        bottom: -7%;

    }



    h1.hdng {

        font-size: 2.9em;

    }



    .welcome p {

        font-size: 0.9em;

    }



    .welcome-grids:nth-child(1) {

        padding-left: 0;

    }



    .welcome-grids:nth-child(2) {

        padding-right: 0;

    }



    .banner-bottom {

        padding: 3em 0;
        height: 200px;
    }



    .banner-bottom h2,

    .contact h2 {

        font-size: 2.8em;

    }



    .banner-bottom h4 {

        font-size: 1.4em;

    }



    .banner-bottom p {

        margin-top: 0.5em;

    }



    .banner-bottom-grids:nth-child(2) {

        margin: 2em 0;

    }



    .work-grids {

        float: none;

        width: 100%;

        padding: 2em 3em;

    }



    .work-grids.work-grids-left {

        padding: 1em 3em 3em;

    }



    .flex-control-nav {

        right: 5%;

    }



    .services-grids {

        padding: 2em 0;

    }



    .services h4 {

        font-size: 1.8em;

        margin: 0.5em 0;

    }



    .services p {

        width: 89%;

        font-size: 0.9em;

    }



    .footer-left {

        float: none;

        width: 100%;

    }



    .social-icons {

        float: none;

        width: 100%;

        margin-top: 1.5em;

    }



    .about-slid h2 {

        font-size: 2.4em;

    }



    .about-slid {

        padding: 3.5em 0;

    }



    .about-slid-info {

        width: 77%;

    }



    .about-slid p {

        font-size: 0.9em;

    }



    h3.title {

        font-size: 2.8em;

    }



    .row.team-row {

        margin: 2em 0 0;

    }



    .about-team p {

        font-size: 0.9em;

    }



    h1.hdng {

        font-size: 2.6em;

    }



    h2.hdng-two {

        font-size: 1.1em;

    }



    .gallery-grids {

        margin: 3em 0 2em;

    }



    .news-grids p {

        font-size: 0.9em;

    }



    .news-grids-right {

        width: 70%;

    }



    .grid_4 {

        margin-top: 24px;

    }



    .contact-form input[type="text"] {

        padding: .6em 1em;

    }



    .account-left {

        float: none;

        width: 80%;

        margin: 0 auto;

    }



    .account-left:first-child {

        margin: 0 auto 1.5em;

    }



    .account h1,

    .account h2 {

        margin-bottom: 0.5em;

    }

}



@media(max-width:480px) {

    .header-left ul li a {

        font-size: 0.9em;

    }



    .header {

        padding: 1em 0 0;

    }



    .top-nav {

        width: 10%;

        margin-right: .5em;

    }



    .top-nav span.menu {

        display: block;

        position: relative;

        cursor: pointer;

        background-color: var(--mainColor);

        margin: 0 0 1em 0;

        padding: 6px;

    }



    .top-nav ul {

        display: none;

        z-index: 999;

        position: absolute;

        width: 100%;

        left: 0;

    }



    .span {

        display: none;

    }



    .top-nav ul li {

        display: block;

        text-align: center;

        background: rgba(0, 0, 0, 0.84);

        margin: 0;

        width: 100%;

        border: 1px solid rgb(58, 58, 58);

    }



    .top-nav ul li a {

        display: block;

        padding: .6em 0;

        font-size: 1.2em;

        margin: 0;

        letter-spacing: 1px;

        color: #fff;

    }



    .banner1 {

        min-height: 244px;

    }



    .callbacks_tabs li {

        margin: 0;

    }



    .callbacks_tabs {

        bottom: -9%;

    }



    .banner-bottom h2,

    .contact h2 {

        font-size: 2.5em;

    }



    .banner-bottom h4 {

        font-size: 1.3em;

    }



    .banner-bottom p {

        font-size: 0.9em;

    }



    .banner-bottom-grids {

        width: 90%;

    }



    .work-grids p {

        margin: 0.8em 0;

        font-size: 0.9em;

    }



    .work-grids ul li {

        margin: 0.8em 0 0;

        font-size: 0.9em;

    }



    .work-grids.work-grids-left {

        padding: 1em 2em 2em;

    }



    .work-grids {

        padding: 2em;

    }



    .services {

        padding: 3em 0 1em;

    }



    .services span.glyphicon {

        border: 4px double;

    }



    .services h4 {

        font-size: 1.6em;

    }



    .services-grids {

        width: 63%;

    }



    .footer p {

        font-size: 0.9em;

    }



    .banner1.about-bnr {

        min-height: 240px !important;

    }



    .welcome,

    .about,

    .gallery,

    .news,

    .codes,

    .contact,

    .account {

        padding: 2em 0;

    }



    h1.hdng {

        font-size: 2.2em;

    }



    .about-text-right h4 {

        font-size: 1.3em;

    }



    .about-text-right p {

        font-size: 0.9em;

        margin-top: 1em;

    }



    .about-text-right ul li a {

        font-size: 0.9em;

    }



    span.glyphicon.glyphicon-chevron-right {

        font-size: .8em;

        margin-right: 0.8em;

    }



    .about-slid-info {

        width: 100%;

    }



    .about-slid h2 {

        font-size: 1.9em;

    }



    .about-slid {

        padding: 3em 0;

    }



    h3.title {

        font-size: 2.2em;

    }



    .team-grids {

        width: 50%;

    }



    h2.hdng-two {

        font-size: 1em;

    }



    .gallery-grids {

        margin: 2em 0 1em;

    }



    .news-grids {

        margin-top: 2em;

    }



    .news-grids h5 {

        font-size: 1.3em;

        border-bottom: 2px dotted;

        text-align: center;

    }



    .news-grids-right {

        margin-top: 0em;

    }



    .map,

    .address {

        padding: 0;

    }



    .map iframe {

        height: 210px;

    }



    .address p {

        font-size: 0.9em;

    }



    .contact-form input[type="text"] {

        padding: .5em 1em;

    }



    .contact-form input[type="text"]:nth-child(2) {

        margin: 1.2em 0;

    }



    .account h1,

    .account h2 {

        font-size: 1.6em;

    }



    .account-left {

        width: 90%;

    }



    .registration_form input[type="text"],

    .registration_form input[type="email"],

    .registration_form input[type="tel"],

    .registration_form input[type="password"] {

        font-size: 0.9em;

    }



    .registration_form input[type="submit"] {

        font-size: 0.85em;

        padding: 0.4em 2em;

    }



    .sb-search-input {

        font-size: 0.9em;

    }



    .sb-search.sb-search-open,

    .no-js .sb-search {

        width: 31%;

    }



    .news-grids-left {

        margin-right: 1em;

        margin-top: 10%;

    }



}



@media(max-width:320px) {

    .top-nav span.menu {

        padding: 3px;

    }



    .top-nav {

        width: 14%;

        margin-right: 0;

    }



    .header {

        padding: 0.5em 0 0;

    }



    .header-left ul li a {

        font-size: 0.8em;

    }



    .header-left ul li:nth-child(1) {

        padding-right: 10px;

        margin-right: 3px;

    }



    .sb-search.sb-search-open,

    .no-js .sb-search {

        width: 53%;

    }



    .sb-search-input {

        font-size: 0.85em;

    }



    .sb-search {

        top: 14%;

    }



    .top-nav ul li a {

        font-size: 1em;

    }



    .banner1 {

        min-height: 167px;

    }



    .welcome-info {

        margin: 1em 0;

    }



    .welcome-grids:nth-child(1) {

        padding-right: .5em;

    }



    .welcome-grids:nth-child(2) {

        padding-left: 0.5em;

    }



    .welcome p {

        font-size: 0.85em;

    }



    .banner-bottom h2,

    .contact h2 {

        font-size: 2em;

    }



    .banner-bottom h4 {

        font-size: 1.2em;

    }



    .banner-bottom-grids {

        width: 100%;

        padding: 0;

    }



    .banner-bottom-grids:nth-child(2) {

        margin: 1.5em 0;

    }



    .banner-bottom {

        padding: 2.5em 0;

    }



    .work-grids h3 {

        font-size: 2em;

    }



    .work-grids {

        padding: 1.5em;

    }



    .work-grids.work-grids-left {

        padding: 0em 1.5em 1.5em;

    }



    .services h4 {

        font-size: 1.4em;

    }



    .services p {

        font-size: 0.85em;

    }



    .services h4 {

        font-size: 1.3em;

        margin: 0.8em 0 .2em;

    }



    .welcome,

    .about,

    .gallery,

    .news,

    .codes,

    .contact,

    .account {

        padding: 1.5em 0;

    }



    .about-text {

        padding: 1em 0 1.5em;

    }



    .about-text-right h4 {

        font-size: 1.2em;

        line-height: 1.4em;

    }



    .about-text-right p {

        margin-top: 0.6em;

    }



    .about-slid h2 {

        font-size: 1.6em;

    }



    h1.hdng {

        font-size: 2em;

    }



    h2.hdng-two {

        font-size: 0.9em;

        width: 90%;

        margin: .5em auto;

        line-height: 1.6em;

    }



    .gallery-grids ul li {

        width: 50%;

    }



    .news-grids {

        margin-top: 1.5em;

    }



    .news-grids-left {

        width: 45%;

        float: none;

        margin: 0 auto 1em;

    }



    .news-grids-right {

        width: 100%;

    }



    .map iframe {

        height: 150px;

    }



    .contact-form input[type="text"] {

        padding: .4em 0.5em;

        font-size: 0.85em;

    }



    .contact-form input[type="text"]:nth-child(2) {

        margin: 1em 0;

    }



    .form-grids:nth-child(2) {

        margin-top: 0.8em;

    }



    .contact-form textarea {

        height: 7em;

        font-size: 0.85em;

        padding: .5em 0.5em;

    }



    .contact-form input[type="submit"] {

        font-size: 1em;

        padding: 4px 10px;

    }



    .account h1,

    .account h2 {

        font-size: 1.3em;

    }



    .account-left {

        width: 100%;

        margin: 0 auto 0.5em;

    }



    #loginBox {

        left: -87px;

    }



    #loginForm input {

        padding: 4px;

    }



    #body label {

        font-size: 0.85em;

    }



    #loginForm fieldset {

        margin: 0 0 10px 0;

    }



    #loginForm span {

        padding-bottom: 10px;

    }



    #loginForm #login {

        font-size: 0.9em;

        padding: 4px 20px;

    }



    .callbacks_nav {

        background-position: 0px 0px;

        background-size: 238%;

        height: 29px;

        width: 29px;

    }



    .callbacks_nav.next {

        background-position: -28px 0px;

        background-size: 238%;

    }

}



/*--//responsive-design---*/



@media screen and (max-width: 1000px) {

    .top-nav {

        margin-top: 60px;

    }



}



@media screen and (max-width: 800px) {

    .logo {

        width: 80px;

        left: calc(50% - 40px);

    }



    .top-nav {

        margin-top: 10px;

    }

}



@media screen and (max-width: 700px) {

    .top-nav ul li:nth-child(2) {

        margin-right: 50px;

    }



    .top-nav ul li:nth-child(3) {

        margin-left: 50px;

    }



    .top-nav ul li a {

        font-size: 1em;

    }

}



@media screen and (max-width: 480px) {



    .top-nav ul li:nth-child(2),

    .top-nav ul li:nth-child(3) {

        margin: 0 auto;

    }



    .top-nav ul li a {

        font-size: 1.2em;

    }

}



#newsArea .left,

#newsArea .right {

    display: flex;

    flex-wrap: wrap;

}



#newsArea h3 {

    color: #000000;

    font-size: 36px;

    margin-bottom: 20px;

    font-weight: bold;

}



#newsArea p {

    font-size: 16px;

    text-align: justify;

    line-height: 1.5;

}



#newsArea a {

    font-size: 14px;

    margin-top: 10px;

    display: block;

}



#newsArea .right img {

    order: 2;

}



#newsArea img {

    width: 60%;

    height: 100%;

    display: block;

}



#newsArea .text {

    width: 30%;

    justify-content: flex-start;

    align-items: center;

    align-content: center;

    display: flex;

    flex-wrap: wrap;

    margin: 0 5%;

}



@media screen and (max-width: 770px) {

    #newsArea img {

        width: 100%;

    }



    #newsArea .right img {

        order: 0;

    }



    #newsArea .text {

        width: 90%;

        margin: 40px 5% 80px 5%;

    }



}



.address p {

    color: #87807c;

    margin: 0 0 .5em 0;

    text-align: left;

    font-size: 1.5em;

    line-height: 1.8em;

}



h5,

.h5 {

    font-size: 20px;

    font-weight: bold;

    text-align: center;

}