*{ padding: 0; margin: 0; border: none; outline: none; box-sizing: border-box; text-decoration: none; font-family: Arial, Helvetica, sans-serif; } img{ max-width: 100%; } .clear{ clear: both; } p{ font-size: 14px; line-height: 29px; color: #666666; } body{ background: url(../images/body-bg.jpg) left top repeat; } .main{ width: 100%; float: left; margin-bottom: 50px; } .wrapper{ max-width: 1000px; width: 96%; margin: 0 auto; } .container{ width: 100%; float: left; background: #fff; } .header{ width: 100%; float: left; padding: 5px 16px; } .logo{ float: left; } nav{ width: 100%; float: left; background: #9db9dd; margin-top: 16px; } nav ul{ width: 100%; float: left; } nav ul li{ display: inline-block; float: left; } nav ul li a{ display: block; padding: 18.5px 23px; font-family: Oswald,sans-serif; text-decoration: none; font-size: 14px; font-weight: 300; color: #fff; text-transform: uppercase; border-right: solid 1px #6f89aa; border-left: solid 1px #cbd9eb; } nav ul li:first-child a{border-left: none;} nav ul li:last-child a{border-right: none;} nav ul li a:hover{color: #f60;} .feature_sec{ width: 100%; float: left; padding: 5px; } .feature_sec img{width: 100%;} .feature_sec span{display: none;background: #d4e0f0;text-align: center;padding: 6px 0;} .content{ width: 100%; float: left; padding: 8px; } .left_content{ width: 24.5%; float: left; } .right_content{ width: 75.2%; float: right; } .description_tag{ font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #404040; } .right_content_row1{ width: 100%; float: left;margin-top: 40px; } .right_content_row1_col1{width: 49%;float: left;} .right_content_row1_col2{width: 49%;float: right;} .right_content_row2{ width: 100%; float: left; margin-top: 10px; } .h2_tag{ width: 100%; float: left; font-size: 20px; color: rgb(64, 64, 64); text-decoration: underline; margin: 20px 0; } .h4_tag{ font-size: 18px; font-weight: bold; text-decoration: underline; color: #C00; margin: 28px 0 22px; } .right_content_row2 u{text-decoration: underline;} .film_ul{ width: 100%; float: left; } .film_ul li{ width: 30%; display: inline-block; float: left; padding: 2px; } .right_content_row2 .text_ul{ width: 100%; float: left; padding-left: 20px; } .right_content_row2 .text_ul li{ width: 100%; float: left; list-style-type: disc; list-style-position: outside; display: list-item; font-size: 14px; line-height: 29px; color: #666666; } footer{ width: 100%; float: left; background: #537199; padding: 8px 15px; margin-top: 50px; } footer p{ float: right; font-size: 11px; color: #fff; } /******************gallery-css******************/ .gallery_container { width: 100%; position: relative; margin: 0 auto } .thumbnails { list-style: none; font-size: 0 } .thumbnails li { margin: 6px 6px 0 0; padding: 2px; width: 50px; height: 50px; border: 1px solid #d7d7d7; display: inline-block; text-align: center; vertical-align: middle; overflow: hidden } .thumbnails input[name=select] { display: none } .thumbnails .item-hugger { position: relative; transition: all 150ms ease-in-out; text-align: center; background: #fff } .thumbnails .item-hugger img { display: inline-block } .thumbnails label { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer } .thumbnails .title { padding: 20px 0 0; font-size: 18px; color: #555; transition: all 150ms linear } .thumbnails .gallery_content { padding: 3px; border: 1px solid #e1e1e1; position: absolute; top: 0; left: 0; width: 100%; height: 360px; opacity: 0; transition: all 150ms linear; display: flex; flex-direction: column; justify-content: center; overflow: hidden } .thumbnails input[name=select]:checked~.gallery_content { opacity: 1 } .white-box { height: 370px; overflow: hidden } /******************tab-css******************/ .css_tab { width: 100%; float: left; position: relative } .css_tab li { display: inline-block; float: left; margin-right: 1px; width: 100% } .content_tab,.radio_btn { display: none } .css_tab li:nth-child(2) label { left: 33.6%; } .css_tab li:nth-child(3) label { left: 67.1%; } .css_tab li label { text-align: center; position: absolute; left: 0; top: 0; width: 33%; cursor: pointer } .label_btn:hover { color: #fff; background: #4176bd } .css_tab li:last-child { margin-right: 0 } .top_label_btn { width: 100%; float: left; color: #fff; padding: 10px; cursor: pointer; background: #0e0e0e } .label_btn { float: left; background: #474747; padding: 13px 10px; font-size: 12px; letter-spacing: 1px; font-weight: 400; color: #fff; text-shadow: 1px 1px 1px rgba(255, 255, 255, .3); border-radius: 3px 3px 0 0; text-transform: uppercase; } .content_tab { width: 100%; float: left; font-size: 14px; border: 1px solid #e1e1e1; background: #fff; padding: 10px; margin-top: 48px; height: 395px; overflow-y: scroll } .radio_btn:checked+.label_btn { color: #fff; background: #4176bd } #rad1:checked~#cont1, #rad2:checked~#cont2, #rad3:checked~#cont3, #rad4:checked~#cont4, #rad5:checked~#cont5, #rad6:checked~#cont6 { display: block } .content_tab ul{width: 100%;float: left;} .content_tab ul li { font-family: Arial,Helvetica,sans-serif; font-size: 13px; color: #777; list-style-type: disc; list-style-position: inside; display: list-item; } .content_tab p { font-size: 13px; line-height: 16px; text-align: left; padding-bottom: 7px; color: #777; padding-left: 5px } .content_tab p b { margin: 5px 0; display: inline-block } .content_tab h2 { color: #333; font-size: 20px; font-weight: 400; margin-bottom: 10px } .content_tab p h6 { font-weight: 700 } .respo_menu{ float: left; display: none; } nav input{display: none;} .respo_menu span{ width: 26px; float: left; height: 3px; background: #fff; position: relative; margin: 18px 10px; } .respo_menu span:before{ content: ''; position: absolute; left: 0; right: 0; top: -7px; height: 3px; background: #fff; } .respo_menu span:after{ content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 3px; background: #fff; } @media screen and (max-width:980px){ .header{text-align: center;} .logo{float: none;} .left_content,.right_content{width: 100%;} .left_content div{width: 33.33%;float: left;display: flex;height: 180px;} .left_content div img,.left_content div a{margin: auto;} .left_content div img,.left_content div a{margin-bottom: auto !important;} .content{margin-top: 20px;} .main{margin-bottom: 20px;} footer{margin-top: 20px;} } @media screen and (max-width:800px){ .feature_sec > img{display: none;} .feature_sec span img{width: auto;} .feature_sec span{display: block;} .right_content_row1{margin-top: 20px} .right_content_row1_col1,.right_content_row1_col2{width: 100%;} .right_content_row1_col2{margin-top: 30px;} .gallery_container{width: 360px;} } @media screen and (max-width:600px){ .respo_menu{display: block;} nav ul{margin-top: 0px;} nav ul li{width: 100%;float: left;} nav ul li a{padding: 10px 11px;} #chk:not(checked) ~ ul{display: block;} #chk:checked ~ ul{display: none;} .film_ul li{width: 33.33%;} .left_content div{width: 100%;height: auto;margin: 5px 0;} /*tab-css*/ .css_tab li label{ position: static; width: 100% !important; margin: 0; outline: none !important; border-radius: 0; } .css_tab li{ margin-bottom: 1px; } .content_tab{ margin-top: 0px; } .label_btn{ background: #103d89 url(../images/plus.png) right center no-repeat; color: #fff; text-align: left !important; } .radio_btn:checked + .label_btn{ background: #103d89 url(../images/minus.png) right center no-repeat; color: #fff; text-align: left; border-width: 0; } .label_btn:hover{ background: #103d89 url(../images/plus.png) right center no-repeat; color: #fff; border-width: 0; } .content_tab{height: auto;} } @media screen and (max-width:400px){ .gallery_container{width: 100%;} } @media screen and (max-width:360px){ .thumbnails .gallery_content,.white-box{height: 330px;} }