@import url('reset.css');
@import url('skeleton.css');
@import url('panel.css');
@import url('flexslider.css');
@import url('isotope.css');
@import url('twitter.css');
@import url('jquery.fancybox-1.3.4.css');
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500);

body, html{width: 100%;height: 100%;}

/* Global properties ======================================================== */
#main_bg{width:100%; height:100%; position:absolute;top: 0;bottom: 0;left: 0;}
.glow{background: url('../images/body_glow.png') 50% 0 repeat-y;position: fixed;width: 100%;height: 100%;top: 0;left: 0;bottom: 0;}
.main_container{overflow: hidden;width: 100%;}

body{font-family: 'Ubuntu', sans-serif;font-weight: 300;color:#000; font-size: 15px; line-height:21px; min-width: 950px; min-height:100%; width:100%; height:100%; overflow:hidden;background-repeat: repeat;position: relative;background-color: #1352a2;background-image: url('../images/patterns/pattern4.png');}
/* Global Structure ========================================================= */
.main {margin:0px auto 0 auto; 	width: 942px; z-index:2; height:100%; }
.spinner{ position:fixed; background:#b4b4b4; z-index:9999; width:100%; height:100%; top:0; left:0;}
.spinner > span{position: absolute; left: 50%; top: 50%;}

.spinner{width: 100%;height: 100%;background-color: #000;}
/* ============================= main layout ================================ */
a{ color:#fff; text-decoration:none; outline:none;}
a:hover{ color: #fff;}

/*********************************CLASSES**********************************/
.m_bottom_zero{ margin-bottom:0 !important;}
.m_left_zero{ margin-left:0 !important;}
.p_bottom_zero{ padding-bottom:0 !important;}
.p_left_zero{ padding-left:0 !important;}

.clear {clear:both;width:100%;line-height:0;font-size:0;}
.wrapper {width:100%;overflow:hidden}
.extra_wrapper{ overflow:hidden;}
.container{width:100%}
.extra_last, .last{ margin-bottom:0 !important; padding-bottom:0 !important;}
.extra_last{ border:none !important; background:none !important;}
.bg_none{ background:none !important;}
.m_zero{margin: 0 !important;}

/* ============================= header ============================ */
header{position: relative;  z-index: 3;padding-top: 195px;}
header h1{float:left;position: relative;width: 326px;padding-top: 5px;}
header .description{position: absolute;top: 195px;right: 9px;font-size: 17px; line-height: 24px; color: #fff;width: 540px;background: url('../images/description_bg.png') repeat;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;}
header .description:before{width: 18px;height: 24px;display: block;position: absolute;left: -18px;top: 19px;background: url('../images/description_bef.png') no-repeat;content: "";}
header .description .inner{padding:  11px 20px 13px;}

.hide_text{text-indent: 100%; white-space: nowrap; overflow: hidden;}
#logo{display:block; background: url(../images/logo.png) 50% 50% no-repeat; width: 326px; height: 74px;}
#logo.logo_content{background: url('../images/logo2.png') 0% 8px no-repeat;}
#logo:hover{text-decoration:none; }

/*================================>> Menu <<========================================*/
.menu{position:relative; z-index:1; display: block; float: right;}
.menuHolder{ position: relative; z-index: 1; margin-right: -3px; float: right; display: inline-block;overflow: hidden; }
#menu {z-index:3; position:relative; padding-top: 23px; display:block;float: left;}
#menu > li{position:relative; color: #acb1b3;float: left;margin-left: 6px;width: 140px;}
#menu > li > a{display: block;  position:relative; z-index: 1;overflow: hidden; font-size: 18px; line-height: 24px; color: #acb1b3;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;margin: 0 3px 0 0;padding: 10px 0 16px 50px;box-shadow: 4px 4px 0 rgba(0,0,0,0.45), inset 0 0 0 1px rgba(2,11,23,0.7);}

#menu>li>a em{width: 30px;height: 30px;position: absolute;top: 11px;left: 15px;z-index: 99;content: "";}
#menu > li > a strong{display: block;position: absolute;left: 0;top: 0;width:100%;height: 100%;background: #000;opacity: 0.60;-webkit-border-radius: 6px;
-moz-border-radius: 6px;border-radius: 6px;}
#menu>li>a span{display: inline-block;position: relative;z-index: 10;}
#menu>li.active a strong, #menu > li > a:hover strong{opacity: 0.75;}
#menu>li.active a, #menu>li>a:focus{box-shadow: none;margin: 4px 0 0 0;}
#menu>li.active a, #menu > li > a:hover{color: #f2f2ea;}

#menu .about_link a em{background: url('../images/about_icon.png') no-repeat;}
#menu .port_link a em{background: url('../images/port_icon.png') no-repeat;}
#menu .service_link a em{background: url('../images/service_icon.png') no-repeat;}
#menu .contact_link a em{background: url('../images/contact_icon.png') no-repeat;}

/*================================>> Splash menu <<========================================*/

.splashHolder{position: absolute; display: block; top: 300px;}
.splash_menu {z-index:3; position:relative; margin-top: 111px; display: block;}
.splash_menu> li{position:relative; color: white;  text-align: left; display: inline-block; width: 216px; height: 216px;padding-bottom: 4px;}
.splash_menu > li > a{display: block;position:relative;z-index: 1;overflow: hidden;background: url('../images/splash_link.png') repeat;border-radius: 6px;box-shadow: 5px 5px 0 rgba(0,0,0,0.30), 0 0 0 1px rgba(0,0,0,0.7);margin:  1px 4px 4px 2px;font-size: 22px; line-height: 27px; color: #bfb3ad;text-align: center;padding: 61px 0 58px;overflow: hidden;}
.splash_menu > li > a:hover{text-decoration:none;color: #e5e5de;}
.splash_menu > li > a:focus{margin: 6px 0 0 7px;box-shadow: none;}
.splash_menu>li>a strong{display: block;position: absolute;width: 0;height: 0;left: 50%;top: 50%;background: url('../images/splash_link_h.png') repeat;border-radius: 6px;}
.splash_menu>li>a:hover strong{left: 0;top: 0;height: 100%;width: 100%;opacity: 0.73;}

.splash_menu>li>a span{display: inline-block;position: relative;z-index: 10;}
.splash_menu .menu_icon{display: block;position: relative;z-index: 10;margin-bottom: 8px;}


/*================================>> HOVERS <<========================================*/
#menu>li>a strong, #menu>li>a{
  -webkit-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
-webkit-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
   -moz-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
    -ms-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
     -o-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
        transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
}
.splash_menu>li>a strong, #logo, body, .filter_box a,#content, .skill_set, .tweet_list li, #content > ul, ul#portfolio-list li a .description {-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}

/*===============================>> Paragraphs <<=============================*/

p {margin-bottom:21px}
.p2{ margin-bottom:10px;}
.p3{ margin-bottom:15px;}

strong{font-weight:500;}
/*================================>> LISTS <<========================================*/
.list1{}
.list1 li{ background:url(../images/marker1.png) 0 7px no-repeat; padding-left:20px;}
.list1 a{}


/*================================>> H <<========================================*/
h2,h3,h4{ font-weight:normal;}
h2{font-size: 20px; line-height: 24px; color:#000; font-weight:500;letter-spacing: 0px;margin-bottom: 14px;}

h2.ind{ margin-bottom:18px;}
h2.ind1{ margin-bottom:15px;}

h3{font-size: 15px; line-height: 21px; color:#000; font-weight: 500;}

h4{font-weight: 300;font-size: 14px;}

/* ============================= content ====================== */

#content{position:relative;padding:  0px 0 0px; z-index: 4;}
#content > ul{z-index: 0; display:block;position: relative;overflow: hidden;}
#content > ul > li{ display:block; position:absolute;}

#content .box{background: url('../images/box.png') 50% 0 repeat;border-radius: 8px;margin: 28px 0px 15px;box-shadow: 4px 4px 0 rgba(0,0,0,0.35);padding: 24px 0 30px;position: relative;}
#content .p_bot1{padding-bottom: 70px;}
/*================================>> Extra Boxes <<========================================*/
.ext_list>li, .ext_box{ overflow:hidden;}
.ext_list>li>figure, .ext_box>figure{ float:left;}
.ext_list>li>div, .ext_box>div{overflow:hidden;}

/*================================>> Page About <<========================================*/
.biography{padding: 8px 10px 8px 8px;margin: 6px 0 0;overflow: hidden; background: #fff; border-radius: 5px;}
.biography .flexslider{width: 263px;float: left;}
.biography .text{overflow: hidden;padding: 5px 0 0 19px;}

.date_list, .date_list a{color: #3e3e3e;}
.date_list>li{margin-bottom: 15px;}
.date_list strong{font-weight: 500;color: #000;}

.pad_box1{padding: 0 0 0 20px;}
.pad_box2{padding: 0 20px 0 0px;}
.pad_box3{padding: 0 20px 0;}

.hire_link{display: block;position: absolute;width: 105px;height: 106px;background: url('../images/hire_me.png') no-repeat;left: -4px;bottom: -4px;z-index: 10;}
.hire_link:hover{background-position: 0 -106px;}

.img{border: 8px solid #fff;border-radius:6px;}

.experience_list{color: #3e3e3e;}
.experience_list>li{font-size: 14px;margin-bottom: 15px;}

.experience{margin-bottom: 5px;color: #000;}
.experience>div{float: right;}
.experience>figure{margin: 0 0 0 0;font-size: 15px;}
/*=============================>> Page Services <<================================*/
.reference_list{}
.reference_list>li{margin-bottom: 26px;}
.reference_list blockquote{background: #fefefe;margin-bottom: 13px;border-radius: 4px;font-size: 15px; line-height: 21px; color: #3e3e3e;position: relative;font-style: italic;padding: 14px 15px 16px;}
.reference_list blockquote:after{width: 19px;background: url('../images/after.png') repeat;height: 12px;display: block;position: absolute;bottom: -12px;right: 17px;content: "";}
.reference_list .author{text-align: right;font-size: 14px;color: #000;padding: 0 0 0 16px;}

.skill_box{font-weight:500;margin-bottom: 14px;}
.skill_label{overflow: hidden;margin-bottom: 5px;}
.skill_num{display: block;float: right;font-weight: 300;}
.skill_level{background: #fff;border-radius: 6px;}
.skill_set{height: 10px;border-radius: 6px;background-color: #1352a2;width: 0;}

.service_list{color: #3e3e3e;font-size: 14px;margin-bottom: 12px;}
.service_list>li{margin-bottom: 15px;}
.service_list h3{margin-bottom: 5px;}

.button, .button1{ display:inline-block; padding:6px 13px 8px; margin: 0px 0 0; color:#888;background: #fff; border-radius: 6px;box-shadow: 4px 4px 0 rgba(0,0,0,0.25);}
.button1{padding: 4px 20px 4px;border-radius: 4px;}
.button_wrap{padding-top: 21px;text-align: right;}
.button_wrap1{padding: 10px 15px 0 0;text-align: center;}
.button_wrap2{padding: 3px 4px 0 0;text-align: right;}
.button:hover{color: #000;text-decoration: none;}
.button:focus, .button1:focus{margin: 6px 0 0 7px;box-shadow: none;background: #c7c1cb;}
/*=============================>> Portfolio Page <<======================================*/
.filter_box{position: relative;}

ul#portfolio-filter {position: absolute;right: 28px;top: -42px;z-index: 10;}
ul#portfolio-filter li {width: 107px;}
ul#portfolio-filter>li>a {border-radius: 4px;box-shadow: 4px 4px 0 rgba(0,0,0,0.25);background: #fff;display:block;color: #b1b1b1;padding: 3px 10px 6px 12px;}
ul#portfolio-filter a:hover, ul#portfolio-filter a.current {color: #000;}
ul#portfolio-filter a.current {color:#666;}
#portfolio-filter .menu-arrow{display: block;position: absolute;width: 9px;height: 6px;background: url('../images/menu_arrow.png') no-repeat;right: 12px;top: 13px;}


#portfolio-filter ul{background: #fefefe;padding: 0 0 0;width: 100%;position:absolute;top: 34px;right: -4px;border-radius: 4px;font-size: 15px;}
#portfolio-filter ul a{color: #7f7f7f;padding: 5px 0 5px 10px;display: block;}
#portfolio-filter ul a:hover{color: #000;background: #e5e5e5;}

ul#portfolio-list {border-radius: 5px;overflow: hidden;}
ul#portfolio-list li {display: block; width:226px; float:left; padding:0 0 8px;}
ul#portfolio-list li a {display: block; position: relative; overflow: hidden;margin-right: 8px;}
ul#portfolio-list li a .description{position: absolute;display: block;top: -300px;left: 0;width: 100%;height: 100%;background: url('../images/description.png') repeat;text-align: center;font-size: 18px;line-height: 23px;border-radius: 4px;}
ul#portfolio-list li a .description .inner{padding: 44px 0 0;display: block;}
ul#portfolio-list li a .description span span{color: #7f7f7f;font-size: 14px;}
ul#portfolio-list li a:hover .description{top: 0;}

/* ========= end =========== */

/*================================>> Contact Page <<========================================*/

.map_box{padding: 8px 10px 8px 8px;margin: 6px 0 0;overflow: hidden; background: #fff; border-radius: 5px;}
.map_box>div{padding-top: 2px;}
.map_box>figure{margin: 0 18px 0 0;width: 340px;}

.map_wrapper{overflow:hidden;display:block;}
#map_canvas {width:100%;height:348px;display: block;}
.map{width: 200px;
height: 200px;}

.address{}
.address a{color: #000;}
.address dt{margin-bottom: 15px;}
.address dd{font-weight: 500;margin-bottom: 8px;}
.address dd span{display: inline-block; width: 23px;}
.address dd span img{margin-top: 4px;}
.address dd:first-child span img{margin-top: 1px;}

/* Contact form */
#contact-form {padding:1px 0 0 0;position: relative;}
#contact-form .success {position: absolute;top: 0;left: 0;width: 100%;padding: 20px 0;background: #fff;border: 1px solid #494949;z-index: 99;text-align: center;}
#contact-form textarea, #contact-form input {margin:0;font-size:15px; border:none; color:#000; padding:7px 9px 9px;outline:none; position:relative;background:#fff;border-radius: 4px;font-family: 'Ubuntu', sans-serif;width: 262px;}
#contact-form textarea {overflow:auto;height:181px;resize:none; float:left; margin: 0 0 0 0;}	
#contact-form label {display:block; min-height:41px; overflow:hidden;position: relative;}
#contact-form label.message { display:block; padding-bottom:0; }
#contact-form .button {margin-left:8px;}	
#contact-form .error, #contact-form .empty, #contact-form .success {display:none;}	
#contact-form .error, #contact-form .empty {text-align:left; color:red; font-size:11px; clear:both;position: absolute;right: 0;top: 5px;}
#contact-form .buttons2 {overflow:hidden;text-align:right; position:relative; clear:both; padding:10px 5px 5px;}
#contact-form .buttons2 a {
	cursor:pointer;
	text-align:center;
}
#contact-form .buttons2 a:hover{color: #000;text-decoration: none;}
#contact-form span{ display:block; margin: 0px 0 0 5px;}

.gray1{color: #3e3e3e;}
/* ============================= footer ====================== */
footer{position: relative; width: 100%; text-align: center; z-index: 1; padding-bottom: 10px; margin: 0px 0px 0;font-size: 14px;line-height: 20px;color: #fff;}

.splash_footer{padding-top: 112px;}
.splash_footer, .footer{display: none;}
.splash_footer, .footer .privacy{opacity: 0.5;}
.footer{overflow: hidden;}
.footer .privacy{text-align: left;float: left;padding: 14px 0 0 10px;}
.footer .social{float: right;padding: 7px 9px 20px 0;}
.footer .social>li{float: left;position: relative;}
.footer .social>li>a{display: block;float: left;width: 40px;height: 40px;overflow: hidden;border-radius: 500px;margin:0 5px 4px;box-shadow: 4px 4px 0 rgba(0,0,0,0.25);position: relative;z-index: 10;}

.icons{overflow: hidden;position: absolute;padding: 10px 20px 10px 15px;top: -5px;display: none;width: 323px;height: 32px !important;right: 60%;border-radius: 8px;background: url('../images/icons_bg.png') repeat;z-index: 1;}
.icons a{display: none;float: left;width: 32px;height: 32px;overflow: hidden;margin-right: 3px;}
.icons a:hover img{margin-top: -32px;}
.footer .social>li>a:focus{margin-top: 5px;box-shadow: none;}

.tooltip{background: #f7f7f7;color: #000;padding: 4px 10px;font-size: 13px;border-radius: 4px;z-index: 99;}
.tooltip:after{display: block;bottom: -8px;left: 35%;position: absolute;width: 11px;height: 8px;background: url('../images/tooltip.png') no-repeat;content: "";}

#show_icons{}

#contacts .grid_4 {
    height: 300px; 
    /* 启用 Flexbox 布局来控制子元素的排列 */
    display: flex;
    flex-direction: column; /* 让子元素垂直堆叠 */
    justify-content: center; /* 将所有子元素在垂直方向上居中 */
    align-items: center; /* 将所有子元素在水平方向上居中 */
}

#contacts .pad_box1 {
    /* 这个样式可以保持不变，因为父容器已经处理了居中 */
}

#contacts .rustdesk-button {
    /* 移除之前的 text-align: center; 和 margin-top: 200px; */
    /* 因为父容器的 Flexbox 布局已经处理了居中和间距 */
    text-align: initial; /* 恢复默认的文本对齐方式 */
    margin: 0; /* 移除外边距，防止影响居中效果 */
}

@media only screen and (max-width: 995px) {
 body{min-width:768px;}
 header{padding: 50px 10px 0;}
 header .description{top: 160px;width: 96%;margin: 0 10px 0 20px;left: 0;}
 .splashHolder{top: 250px;}
 .experience>figure, .experience>div,header h1, .menuHolder, #menu, .menu{float: none;}
 #menu>li{width: 170px;}
 ul#portfolio-list li{width: 237px;}
 ul#portfolio-list li img{width: 100%;}
 #contact-form textarea, #contact-form input{width: 195px;}
 .map_box>figure{float: none;margin:0 0 20px;display: block;width: auto;}
}

@media only screen and (max-width: 767px) {
 body{min-width:420px;}
 header{padding-left: 0;padding-right: 0;}
 header .description{width: 100%;margin: 0 0 0 0px;}
 header .description:before{display: none;}
#splash{height: 1200px;}
.splashHolder, .splash_menu> li, .splash_menu{width: 100%;}
.splash_footer{padding: 0 20px 30px;}
#menu>li{width: 98%;margin-left: 0;}
.footer .privacy, #menu>li{float: none;margin-bottom: 10px;}
.pad_box1{padding-right: 20px;}
.pad_box2{padding-left: 20px;}
.footer .social, .biography>div.text{float: none;padding: 0;}
.biography>div.flexslider{float: none;margin-bottom: 20px;width: 100%;height: 479px;}
.biography{padding-bottom: 20px;}
#content .box{margin-right: 4px;width: 100%;}
#twitter{margin-left: 0;margin-right: 0;}
#content>ul>li{width: 100%;}
ul#portfolio-list li{width: 190px;}
ul#portfolio-filter{right: 10px;}
.button_wrap{text-align: center;}
header h1{padding-bottom: 5px;}
#contact-form textarea, #contact-form input{width: 360px;}
.splashHolder{top: 215px;}
.wrapper, #twitter, .footer{overflow: visible;}
.map_box {
  text-align: center;
}
.button_wrap1 {
  text-align: center;
}
}

@media only screen and (max-width: 479px) {
 body{min-width:300px;}
header h1, header #logo{width: 100%;}
header #logo{background-size: contain;}
.biography>div.flexslider{height: 320px;width: 238px;}
.element a .inner{padding-top: 50px;}
#content .box{width: auto;}
 #contact-form textarea, #contact-form input{width: 240px;}
 ul#portfolio-list li{width: 100%;}
 .splashHolder{top: 250px;}
 footer{padding-top: 15px;}
 
}