/* Include the font files */
@font-face{font-family:'FontAwesome';
src:url('../font_awesome/fontawesome-webfont.eot?v=4.0.3');
src:url('../font_awesome/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
url('../font_awesome/fontawesome-webfont.woff?v=4.0.3') format('woff'),
url('../font_awesome/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
url('../font_awesome/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight:normal;font-style:normal}



body{
    margin:0;
    padding:0;
    font-family: sans-serif;
    /*background-repeat: no-repeat;*/
    background-repeat: repeat;
    background-size: cover;
    height: 100%;
    background-image: url('../images/backhome.jpg');
}
header, section, footer, hgroup{
    display:block;
}









/* container */
#container{
    width: 100%;
    height: 100%;
    min-height: 100px;
    /*overflow: hidden;*/
    /*max-height: 600px;*/
}









/* top */
#top{
    /*background-image: url('../images/backtop.png');*/
    background-image: url('../images/back1.png');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 210px;
    position: relative;
}
#top .container-header{
    width: 1024px;
    margin: 0 auto;
    padding-top: 32px;
    
}
#top .container-header > a > img{
    width: 180px;
}
#top .container-header .contact-info{
    float: right;
    color: rgb(255, 255, 255);
    font-size: 13px;
    font-weight: bold;
    margin-top: 25px;
    line-height: 22px;
}
/*#top .container-header .contact-info > div:hover{
    animation-name: pulse;
    animation-duration: 1.2s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}*/
#top .container-header .contact-info .address{
    float: left;
    margin-right: 80px;
    position: relative;
}
#top .container-header .contact-info .mobile{
    float: left;
    position: relative;
}
#top .container-header .contact-info .address:after{
    font-family: FontAwesome;
    content: '\f041';
    position: absolute;
    left: -50px;
    top: 25%;
    font-size: 16px;
    border: solid thin rgba(255, 255, 255, 0.30);
    border-radius: 50%;
    padding: 5px;
    width: 20px;
    height: 20px;
    text-align: center;
}
#top .container-header .contact-info .mobile:after{
    font-family: FontAwesome;
    content: '\f095';
    position: absolute;
    left: -50px;
    top: 25%;
    font-size: 16px;
    border: solid thin rgba(255, 255, 255, 0.30);
    border-radius: 50%;
    padding: 5px;
    width: 20px;
    height: 20px;
    text-align: center;
}

#top .search{
    width: 100%;
    height: 53px;
    position: absolute;
    bottom: 0px;
    background-color: rgba(0,0,0,.3);
}
#top .search > div{
    width: 400px;
    margin: 0 auto;
    padding-top: 12px;
}
#top .search > div input[type="text"]{
    width: 320px;
    float: left;
    height: 30px;
    font-size: 11px;
    color: #000;
    font-weight: bold;
    padding-left: 10px;
    box-sizing: border-box;
    border: none;
    border-top-left-radius: 7px;
    -o-border-top-left-radius: 7px;
    -ms-border-top-left-radius: 7px;
    -moz-border-top-left-radius: 7px;
    -webkit-border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    -o-border-bottom-left-radius: 7px;
    -ms-border-bottom-left-radius: 7px;
    -moz-border-bottom-left-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
}
#top .search > div input[type="submit"]{
    width: 80px;
    color: #fff;
    font-size: 11px;
    background-color: #254A39;
    display: block;
    float: right;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    font-weight: bold;
    border: none;
    border-top-right-radius: 8px;
    -o-border-top-right-radius: 8px;
    -ms-border-top-right-radius: 8px;
    -moz-border-top-right-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -o-border-bottom-right-radius: 8px;
    -ms-border-bottom-right-radius: 8px;
    -moz-border-bottom-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
}





#top .sm-share{position: absolute;right: 30px;bottom: 80px;}
#top .sm-share li{
    margin-top: 10px;
    animation-name: slideInRight;
    animation-duration: 1.2s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 0s;
}
#top .sm-share li a{
    width: 32px;
    height: 32px;
    display: block;
}







/* main */
#main{
    margin-top: -1px;
    height: 600px;
}




#main .content{
    width: 100%;
    height: 430px;
    position: relative;
}
#main .inside-content{
    width: 600px;
    margin: 0 auto;
    height: auto;
    margin-top: 50px;
}
#main .inside-content .left{
    float: left;
    width: 300px;
    text-align: center;
}
#main .inside-content .right{
    float: right;
    width: 300px;
    text-align: center;
}
#main .inside-content .right > div span,
#main .inside-content .left > div span{
    font-size: 14px;
    font-weight: bold;
    background-color: rgb(0, 0, 0);
    border-radius: 20px;
    padding: 12px 24px;
    position: relative;

    animation-name: tada;
    animation-duration: 1.2s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease;
    /*animation-fill-mode: forwards;*/
    /*animation-delay: 1s;*/
    display: inline-block;
}
#main .inside-content .right > div span a,
#main .inside-content .left > div span a{
    color: rgb(255, 255, 255);
    text-decoration: none;
}

#main .inside-content .right > div span:after,
#main .inside-content .left > div span:after{
    content: '';
    position: absolute;
    bottom: -11px;
    right: 0;
    left: 0;
    width: 0;
    margin: 0 auto;
    border-top: 13px solid #000;
    border-right: solid 9px transparent;
    border-left: solid 9px transparent;
}



#main .inside-content .right > a,
#main .inside-content .left > a{
    display: block;
    width: 240px;
    height: 240px;
    border: 12px solid rgb(37, 74, 57);
    border-radius: 50%;
    margin: 0px auto;
    margin-top: 50px;
}



#main .inside-content .right > a img,
#main .inside-content .left > a img{
    width: 240px;
    height: 240px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    box-sizing: border-box;
    transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}
#main .inside-content .left > a img:hover, #main .inside-content .right > a img:hover{
    transform: scale(1.11) rotate(7deg);
    -o-transform: scale(1.11) rotate(7deg);
    -ms-transform: scale(1.11) rotate(7deg);
    -webkit-transform: scale(1.11) rotate(7deg);
    -moz-transform: scale(1.11) rotate(7deg);
}




/* footer */
#footer{
    width: 100%;
    height: 54px;
    background-color: #3C6752;
    position: relative;
    /*position: absolute;*/
    /*bottom: 0;*/
    /*bottom: 7px;*/
    /*margin-top: -20px;*/
    /*display: none;*/
    /*z-index: -1;*/
}
.inside-footer{width: 1024px;margin: 0 auto;color: #fff;padding: 4px;}
.inside-footer .left{float: left;}
.inside-footer .right{float: right;}
.inside-footer a > img{
    width: 70px;
    float: left;
    margin-top: 5px;
}
.inside-footer span.rights{
    margin-left: 10px;
    font-size: 10px;
    float: left;
    margin-top: 20px;
}





@media only screen and (min-device-width:320px) and (max-device-width:768px){
    #top{height: 170px;background-size: cover;}
    #top .container-header{width: 100%;text-align: center;}
    #top .container-header > a > img{width: 140px;}
    #top .container-header .contact-info{display: none;}

    #top .sm-share{}
    #top .sm-share li{}
    #top .sm-share li a{width: 28px;height: 28px;}
    #top .sm-share li a img{width: 100%;}

    #top .search > div{width: 100%;}
    #top .search > div form{width: 320px;margin: 0 auto;}
    #top .search > div input[type="text"]{width: 180px;margin-left: 40px;}
    #top .search > div input[type="submit"]{width: 60px;margin-right: 40px;}
    
    #main .content{height: auto;min-height: 10px;overflow: hidden;}
    #main .inside-content{width: 100%;}
    #main .inside-content .left{float: none;margin: 0 auto;}
    #main .inside-content .right{float: none;margin: 0 auto;margin-top: 50px;}
    #main .content{padding-bottom: 60px;}
    #footer{height: 100px;position: relative;}
    .inside-footer{width: 100%;padding: 18px 0 0 0;}
    .inside-footer .left{float: none;width: 80%;margin: 0 auto;height: 50px;}
    .inside-footer .right{display: none;float: none;width: 80%;margin: 0 auto;height: 50px;margin-top: 25px;}
    
    
    #main{height: auto !important;}    
    .inside-footer a > img{float: none;}
    .inside-footer span.rights{float: none;margin: 0 auto;display: block;text-align: center;margin-top: 10px;}
    .inside-footer .left > a{display: block;text-align: center;}
    /*.inside-footer .right > a{display: block;text-align: center;}*/
}






/*/////////////////////*/
/* screen between 360px and 640px */
/*/////////////////////*/
@media only screen and (min-device-width:360px) and (max-device-width:640px){
    #main{height: auto !important;}
}
@media only screen and (min-device-width:360px) and (max-device-width:640px) and (orientation:landscape){
    #main{height: auto;}
    #main .inside-content .left{float: left;}
    #main .inside-content .right{float: right;margin-top: 0;}
}