/*--------------------------------------------------------
reset
--------------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    word-wrap: break-word;
    word-break: normal;
    word-break:break-all;
}
html,
body {
    line-height:1;
    height: 100%;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display: block;
}

#subpage ul,
nav ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
pre{
    width: 100%;
}
/*--------------------------------------------------------------
    logo
--------------------------------------------------------------*/
@media (min-width: 381px) {
    header{
    clear: both;
    width: 100%;
    height: 265px;
    overflow: hidden;
    display: block;
    }}
@media (max-width: 380px) {
    header{
    clear: both;
    width: 100%;
    height: 220px;
    overflow: hidden;
    display: block;
    }}
    #logo{
    position: relative;
    z-index: 11;
    top: 15px;
    left: auto;
    right: auto;
    display: block;
    max-width: 475px;
    width: 100%;
    margin: auto;
    height: auto;
    visibility: visible;
    overflow: hidden;

    -webkit-animation:logo 8s ease-in-out infinite alternate both;
    -moz-animation:logo 8s ease-in-out infinite alternate both;
    }

    @-webkit-keyframes logo{
    0%{-webkit-transform:scale(1)}
    10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
    100%{-webkit-transform:scale(1) rotate(0)}
    }

    @-moz-keyframes logo{
    0%{-moz-transform:scale(1)}
    10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
    100%{-moz-transform:scale(1) rotate(0)}}
    @-o-keyframes logo{
    0%{-moz-transform:scale(1)}
    10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
    100%{-moz-transform:scale(1) rotate(0)}
    }
    @keyframes logo{
    0%{-moz-transform:scale(1)}
    10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
    100%{-moz-transform:scale(1) rotate(0)}
    }

/*--------------------------------------------------------------
    copyright
--------------------------------------------------------------*/
 .copyright{
    clear: both;
    text-align: center;
    margin: 5% auto 1%;
    color: 013571;
    font-size: 13px;
 }

/*--------------------------------------------------------------
    googleSerch
--------------------------------------------------------------*/

#googleSerch{
    position: relative;
    margin: 20px auto;
    z-index: 99999;
}
#googleSerch input[type="text"]{
    width: 80%;
    margin: auto;
}
#googleSerch input{
 /*   font-size: 15px;
    height: 43px;
    line-height: 43px;*/
    vertical-align: middle;
}
@media (min-width: 1201px) {
#googleSerch{
    width: 25%;
    padding: 0 0 0 1.5%;
}}
@media (max-width: 1200px) {
#googleSerch{
    width: 35%;
    padding: 0 0 0 1.5%;
}}
@media (max-width: 955px) {
#googleSerch{
    width: 45%;
    padding: 0 0 0 2%;
}}
@media (max-width: 680px) {
#googleSerch{
    width: 65%;
}}
@media (max-width: 480px) {
#googleSerch{
    width: 75%;
}
#googleSerch input[type="text"]{
    width: 60%;}}

@media (max-width: 320px) {
#googleSerch{
    width: 85%;
}}
@media screen and (min-width:0\0) and (max-width: 300px) {
    /* IE9 , IE10 ,IE11 rule sets go here */
#googleSerch{
    width: 95%;
}}

/*--------------------------------------------------------------
    xmas banner
--------------------------------------------------------------*/

#bannerBox{
    position: relative;
    z-index: 99998;
    color: #fff;
    background: red;
}
#bannerBox img{
    width: 100%;
}
@media (min-width: 1200px) {
#bannerBox{
    width: 530px;
    margin: 20px auto auto;
}}
@media (max-width: 954px) {
#bannerBox{
    max-width: 450px;
    width: 100%;
    margin: 20px auto auto;
}}
@media (min-width: 955px) and (max-width: 1199px) {
#bannerBox{
    max-width: 450px;
    width: 100%;
    margin: 20px auto auto;
}}
@media (min-width: 120px) and (max-width: 680px) {
#bannerBox{
        clear:both;
}}
@media (max-width: 680px) {
#bannerBox{
    max-width: 450px;
    width: 100%;
    margin: 30px auto auto;
}}
@media (max-width: 480px) {
#bannerBox{
    max-width: 450px;
    width: 100%;
    margin: 0px auto auto;

}}
@media (max-width: 400px) {
#bannerBox{
    max-width: 450px;
    width: 100%;
    margin: -30px auto auto;

}}
@media (max-width: 320px) {
#bannerBox{
    max-width: 450px;
    width: 100%;
    margin: -60px auto auto;

}}


/*--------------------------------------------------------
jym-fb
--------------------------------------------------------*/

#jym-fb{
    position: relative;
    clear:both;
    width: 100%;
    text-align: center;
    z-index: 999999999;
}

#jym-fb a{
    color: #fff;
    text-decoration: none;
}
#jym-fb a:hover{
    color: #fff;
    text-decoration: underline;
}