/* CSS 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;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
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;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
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;}
input,select,textarea{vertical-align:middle; outline: none; box-sizing: border-box; font-family: 'Ubuntu', sans-serif; font-size: 14px;}

.clearfix:after {content: ""; display: block; clear: both;}

/* Default */
body {font-family: 'Ubuntu', sans-serif; font-size: 13px; line-height: 1.5; color: #222222; background-color: #ffffff; min-width: 320px;}
img{max-width: 100%; height: auto;}
a {text-decoration: none; color: #000000; transition: background-color 0.1s ease-in-out;}
a:hover {color: #222222;}

.cookie_agree {background-color: #222222; color: #eeeeee; padding: 7px 0; position: relative; z-index: 999; font-size: 13px;}
.cookie_agree div{display: block; margin: 0 auto; width: 1200px; max-width: 100%; position: relative;}
.cookie_agree div p{display: block; text-align: left; margin: 0 35px 0 0; line-height: 1.5;}
.cookie_agree div a{color: #eeeeee; text-decoration: underline;}
.cookie_agree div a:hover{color: #ffffff;}
.cookie_agree div a.close{line-height: 1; text-align: center; font-size: 20px; opacity: 0.85; display: block; text-decoration: none; width: 20px; height: 20px; position: absolute; top: 0; right: 5px;}
.cookie_agree div a.close:hover{opacity: 1;}

.header {padding: 0 25px; background: #ffffff;}
.header_in {position: relative;max-width: 100%; width: 1200px; padding: 10px 0 15px 0; margin: 0 auto;} 
.header .left{float: left;}     
.header .right{float: right; padding: 14px 0 0 0;}
.header .center{position: absolute; top: 20px; right: 50px; left: 150px; text-align: center;}
.header .center .search{position: relative; width: 400px; display: block; margin: 0 auto; background-color: #ffffff; margin: 0 auto; text-align: left; border: 1px solid #cccccc;} 
.header .center input.text {padding: 10px; line-height: 1; border: none; background: #ffffff; width: 325px; font-size: 14px; background:url('../images/google_cs.png') right center no-repeat; box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,0.1);}
.header .center input.submit {position: absolute; top: -1px; right: -1px; bottom: -1px; width: 76px; font-size: 12px; line-height: 1; border: none; background-color: #4a8cf6; color: #ffffff; font-weight: bold; padding: 12px 0; cursor: pointer; box-shadow:inset -1px 1px 2px 0 rgba(0,0,0,0.2);}
.header .center input.submit:hover {background-color: #4181e9;}
.header .center input.submit:active{box-shadow:inset -1px 1px 2px 0 rgba(0,0,0,0.2), inset 0px 5px 5px 0px rgba(0, 0, 0, 0.15);}
 
.promo {background-size: cover !important; padding: 0 25px;}
.promo.bg1 {background: url('../images/promo/bg1.jpg') center center no-repeat #222222;}
.promo.bg2 {background: url('../images/promo/bg2.jpg') center center no-repeat #222222;}
.promo.bg3 {background: url('../images/promo/bg3.jpg') center center no-repeat #222222;}
.promo_in {height: 600px; margin: 0 auto; text-align: center; display: table;}                                                                                
.promo h1{color: #ffffff; font-size: 38px; font-weight: bold; padding: 0 0 10px 0; text-shadow: 0 0 15px rgba(0,0,0,0.5);}                                                                            
.promo h2{color: #ffffff; font-size: 22px; font-weight: normal; padding: 0 0 75px 0; text-shadow: 0 0 15px rgba(0,0,0,0.5);}       
.promo .search {width: 100%; background-color: #ffffff; margin: 0 auto; text-align: left; border: 1px solid #666666;}
.promo .search input.text {padding: 15px; line-height: 1; border: none; background: #ffffff; width: 500px; font-size: 20px; background:url('../images/google_cs.png') right center no-repeat; }
.promo .search input.submit {float: right; width: 100px; font-size: 14px; line-height: 1; border: none; background-color: #4a8cf6; color: #ffffff; font-weight: bold; padding: 20px 0; cursor: pointer;}
.promo .search input.submit:hover {background-color: #4181e9;}
.promo .search input.submit:active{box-shadow: inset 0px 5px 5px 0px rgba(0, 0, 0, 0.15);}
.promo_box {display: table-cell; vertical-align: middle;width: 600px; max-width: 100%; padding: 0 0 50px 0;}
    
.tipbox {padding: 0 25px; background-color: #f6f6f6;}
.tipbox_in {width: 1200px; max-width: 100%; padding: 35px 0; margin: 0 auto;}                                     
.tipbox h2{font-size: 22px; font-weight: bold; padding: 0 0 10px 0;}
.tipbox .videos {margin: 0 -10px; padding: 0 0 30px 0;}                         
.tipbox .video {width: 33.33%; float: left;}                         
.tipbox .video_in {position: relative; background-color: #ffffff; border-radius: 2px; margin: 0 10px; padding: 15px 15px 40px 15px; box-shadow: 0 0 0 1px #eeeeee, 0 1px 2px rgba(0,0,0,0.07); min-height: 380px;}
.tipbox .video img {width: 100%;}
.tipbox .video h3 {font-size: 20px; font-weight: normal; padding: 10px 0 0 0;}
.tipbox .video h3 a{text-decoration: underline; color: #468ad3;}
.tipbox .video h3 a:hover{color: #377bc4;}                         
.tipbox .video p.info{position: absolute; left: 0; bottom: 0; right: 0; padding: 15px; font-size: 12px; color: #666666;}            
.tipbox .video p.text{padding: 10px 0; font-size: 14px;}
.tipbox .tipline{clear: both; background-color: #ffffff; border-radius: 2px; box-shadow: 0 0 0 1px #eeeeee, 0 1px 2px rgba(0,0,0,0.07); padding: 15px 15px;}                 
.tipbox .tipline span.tip{font-weight: bold; color: #000000; margin: 0 2px 0 0;}
.tipbox .tipline a{text-decoration: underline;}                                            

.searchbox {padding: 0 25px; background-color: #f6f6f6;}
.searchbox_in {width: 1200px; max-width: 100%; padding: 35px 0; margin: 0 auto; min-height: 500px; background:url('../images/loader.gif') center center no-repeat;}
.searchbox h1 {display: none;}
.searchbox h2 {display: none;}
.searchbox_in > div{box-shadow: 0 0 0 1px #eeeeee, 0 1px 2px rgba(0,0,0,0.07);}


.wide {padding: 0 25px; background-color: #f6f6f6;}
.wide_in {width: 1200px; max-width: 100%; padding: 35px 0; margin: 0 auto;}
.wide_in .content {background-color: #ffffff; box-shadow: 0 0 0 1px #eeeeee, 0 1px 2px rgba(0,0,0,0.07); padding: 25px; font-size: 15px;}                               
.wide h1{font-size: 22px; font-weight: bold; padding: 0 0 25px 0;}                                 
.wide p + p{padding: 15px 0 0 0;}                                   
.wide a{text-decoration: underline;}    
.wide h2{padding: 20px 0 10px 0; font-size: 16px;}
.wide p{padding: 5px 0; line-height: 1.5;}
.wide ul{padding: 5px 0 5px 30px;}
.wide li{padding: 0 0 0 5px;}                                                                         
.wide .article{max-width: 640px; margin: 0 auto;}                                                                         
.wide .article h1{text-align: center;}                                                                         
.wide .article p.perex{font-size: 17px; font-weight: bold;}                                                   
.wide .article p.img span{display: block; color: #666666; font-size: 12px;}                               
.wide .ad{padding: 25px 0 15px 0;}                            

.footer {padding: 0 25px;}
.footer .in{max-width: 100%;}
.footer.top {text-align:center; background-color: #ffffff; border-top: 1px solid #e3e3e3;}
.footer.top .in {width: 1200px; padding: 30px 0; margin: 0 auto; text-align:left;}
.footer.top .in p{padding: 10px 0 0 0; color: #414141;}
.footer.top .in a{color: #222222; text-decoration: underline; background:url('../images/link.png') 2px 4px no-repeat; padding: 0 0 0 15px;}
.footer.top .in a:hover{color: #444444;}
.footer.top .in a.normal{background: none; padding: 0;}
.footer.middle {text-align:center; background-color: #3f3e36;}
.footer.middle .in {width: 1200px; padding: 30px 0; margin: 0 auto; text-align:left; color: #cccccc; line-height: 24px; text-align: justify;}
.footer.bottom {text-align:center; background-color: #4c4b43;}
.footer.bottom .in {width: 1200px; padding: 25px 0; margin: 0 auto; text-align:left; color: #ffffff;}
.footer.bottom .in p {display: block; padding: 0 100px 0 0; line-height: 18px;}
.footer.bottom .in p a{color: #ffffff; text-decoration: underline;}
.footer.bottom .in p a:hover {color: #eeeeee;}
.footer.bottom .in p em {display: block; padding: 5px 0 0 0; color: #999999; font-style: normal; font-size: 12px; text-shadow: 0 -1px 0 #2a2a2a;}
.footer.bottom .in p em a{color: #999999;}
.footer.bottom .in p em a:hover{color: #aaaaaa;}

.youtube {position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;}
.youtube iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media screen and (max-width: 700px) {    
.header.sub {height: 140px}      
.header .center{top: 80px; right: 0; left: 0;}
.promo .search {width: 400px;}
.promo .search input.text {width: 300px;}
.promo .search input.text:focus {background: #ffffff;}
.header .center input.text:focus{background: #ffffff;}
}

      
@media screen and (max-width: 680px) {                    
.tipbox {text-align: center;}
.tipbox .video {width: 100%; float: none; padding: 15px 0; max-width: 400px; margin: 0 auto;}
.tipbox .video_in {min-height: 0;}
}

@media screen and (max-width: 550px) { 
.promo .search {width: 300px;}
.promo .search input.text {width: 240px;} 
.promo .search input.submit {width: 60px;}

.header .center .search{width: 275px;} 
.header .center input.text {width: 200px;}
}