Difference between revisions of "Template:Tsinghua/css/style.css"

Revision as of 08:55, 17 September 2015

html, body{ font-size: 100%; background:#fff; font-family: 'Arimo', sans-serif; } h1,h2,h3,h4,h5,h6,p,span{ margin: 0; padding: 0; } /*--header--*/ .header { background: #3598DB; min-height: 180px; } .logo{ float: left; } .header-info { padding-top: 1.5em; } .search-box { background:#fff; position: relative; float: right; margin-top: 27px; } .search-box form input[type="text"] { border: none; outline: none; background: #fff; width: 88%; padding: 5px 13px 5px; background:none; margin: 0; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; font-size: 18px; font-weight: 300; color: #999; } .search-box form input[type="submit"] { border: none; outline: none; cursor: pointer; background: url(../images/top-s.png)no-repeat 0px 0px; position: absolute; right: 0px; bottom: 7px; width: 33px; height: 25px; } .about-desc p span { display: block; margin:1em 0 2em; } /* Effect 21: borders slight translate */ .cl-effect-21 a { padding: 10px 0 10px 0; } .cl-effect-21 a::before, .cl-effect-21 a::after { position: absolute; left: 0; width: 100%; height: 2px; background: #27B6DE; content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .cl-effect-21 a::before { top: 0; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .cl-effect-21 a::after { bottom: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} .cl-effect-21 a:hover, .cl-effect-21 a:focus { color: #27B6DE; text-decoration:none; } .cl-effect-21 a:hover::before, .cl-effect-21 a:focus::before, .cl-effect-21 a:hover::after, .cl-effect-21 a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } .menu a { position: relative; display: inline-block; margin: 7px 0; color: #000; letter-spacing: 1px; font-weight: 400; font-size: 0.85em; } .menu a:hover, .menu a:focus { outline: none; } ul.cl-effect-21 { list-style: none; margin: 0; padding: 0; } ul.cl-effect-21 li { display: inline-block; margin: 0 40px; } a.active { color: #27B6DE; text-decoration: none; } /*------*/ .header-bottom { position: relative; text-align: center; width: 85%; margin: 0 auto; } .menu { background: #fff; position: absolute; z-index: 999; top: -39px; width:100%; padding: 1em 0; -webkit-box-shadow: 0 8px 6px -6px rgb(219, 219, 219); -moz-box-shadow: 0 8px 6px -6px rgb(219, 219, 219); -o-box-shadow: 0 8px 6px -6px rgb(219, 219, 219); box-shadow: 0 8px 6px -6px rgb(219, 219, 219); } /*--header--*/ /*--- slider-css --*/ .slider{ position:relative; } .rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; } .rslides_tabs{ background: none !important; border: none; box-shadow: none; position: relative; top: -90px; z-index: 999; } .callbacks_tabs a:after { content: "\f111"; font-size: 0; visibility: visible; display: block; height: 20px; width: 20px; display: inline-block; border-radius: 50%; background: #27B6DE; } .callbacks_here a:after{ background: #fff; } .callbacks_tabs a{ visibility:hidden; } .callbacks_tabs li{ display:inline-block; } ul.callbacks_tabs.callbacks1_tabs { position: absolute; bottom:-8.2%; z-index: 999; left: 25%; width:50%; background:#555F76; padding:1em 5em 1.5em; text-align: center; } /*---/slider-css --*/ .doctor-self-left a { text-decoration: none; } .doctor-self { background: #27B6DE; min-height: 400px; color: #fff; } .doctor-self-info-bottom { padding-top: 4em; } .doctor-self-info { padding:8em 0 6em; } .doctor-self-info h3 { text-align: center; font-family: 'Oswald', sans-serif; } .doctor-self-left img { padding-bottom: 18px; margin: 0 auto; } .doctor-self-left h4 { margin-bottom: 12px; font-family: 'Oswald', sans-serif; } .doctor-self-left h5{ font-size:0.95em; } .doctor-self-right p { font-family: 'Arimo', sans-serif; font-size:0.95em; line-height: 1.8em; } .doctor-self-left a h4 { font-size: 1.1em; font-weight: 400; margin-bottom: 10px; color: #fff; } .doctor-self-left { font-family: 'Arimo', sans-serif; text-align: center; } .doctor-self-left p { padding-top: 5px; } .dogs-food{ background: url(../images/dogsfood.jpg)no-repeat 0px 0px; min-height:500px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; text-align: center; color: #fff } a.dogs-top-food { border: none; outline: 0; color: #fff; background: #27B6DE; padding: 4px 18px 4px; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; font-size:14px; font-weight: 100; } a.dogs-top-food:hover { background: #196175; text-decoration:none; } .dogs-food-top-info { padding:5em 0; } .dogs-food-bottom { margin-top: 3em; } .dogs-food-info h4 { font-family: 'Oswald', sans-serif; font-size: 1.3em; margin: 20px 0 10px; font-weight: 400; } .dogs-food-info p { font-family: 'Arimo', sans-serif; font-size: 0.875em; width: 70%; margin: 0 auto; line-height: 1.5em; padding-bottom: 1em; } /*--daily-updates--*/ .daily-updates-info { text-align: center; margin: 4em 0 3em; } .daily-updates-info p span { margin-left: 8px; } .daily-updates-info h4 { font-family: 'Oswald', sans-serif; color: #27B6DE; font-weight: 600; font-size: 1.6em; margin-bottom: 38px; } .daily-updates-info p span a { color: #27B6DE; text-decoration: none; } .daily-updates-info p span a:hover{ color:#555F76; } .daily-updates-info form input[type="text"] { color: #A3A6AE; outline: 0; padding: 11px; border: 1px solid#27B6DE; width: 30%; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; } .daily-updates-info input[type="submit"] { border-bottom: 3px solid#27B6DE; outline: 0; color: #fff; font-size: 14px; background: #27B6DE; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; padding: 14px 25px; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; border: none; } .daily-updates-info input[type="submit"]:hover { background-color: #1E7188; color: #fff; text-decoration:none; } .daily-updates-info p { color: #999; margin-top: 3em; } .home-map iframe { width: 100%; height: 355px; } .home-map { line-height: 0; } /*--daily-uppdates--*/ /*--support--*/ .support { background: #27B6DE; color: #fff; padding:5em 0; } .support-info { } .support-info{ font-size:0.95em; line-height: 1.8em; margin: 3em 0 2em 0; color:#fff; } .support-info-top p { font-size:0.95em; line-height: 1.8em; margin: 3em 0 2em 0; color:#999; } .support-info h4 { text-align: center; margin:0em 0 1em; font-size: 2em; font-weight: 400; font-family: 'Oswald', sans-serif; } .support-info-left { margin: 0em 0 2em; } .support-bottom-top img { width: 100%; } .support-bottom-top img:hover { opacity: 0.8; } .support-info-left-top img { width: 100%; } .support_top{ padding:7em 0 5em; } .supporters h4 { font-family: 'Oswald', sans-serif; text-align: center; margin:0 0 0.5em; font-size: 2.5em; font-weight: 600; } /*--/support--*/ /*--map--*/ .map iframe { height: 450px; } /*--/map--*/ /*--about--*/ .about{ margin:7em 0 5em; } .about-top-info h3 { font-family: 'Oswald', sans-serif; text-align: center; margin:0 0 1.5em 0; font-size: 2.5em; font-weight: 600; } .about-topgrid1 h3 { font-family: 'Oswald', sans-serif; text-align: center; font-size: 2em; font-weight: 400; margin: 0em 0 2em; } .about-topgrid1 { padding: 5em 0 3em; } a.about-desc-button, a.about-bottom-info-button{ border: none; outline: 0; color: #fff; font-weight: 600; padding: 12px 12px; margin: 0.4em 0; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; background-color: #0DBAE4; font-size: 15px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; } a.about-desc-button:hover, a.about-bottom-info-button:hover{ background: #186A7E; text-decoration: none; } .aboutus { background: #3598DB; padding: 3em 0 3.1em; min-height: 250px; color: #fff; } .about-bottom-into { padding-top: 3em; } .about-desc p { color: #999; line-height: 1.8em; margin-bottom: 1.2em; font-size: 0.95em; } .about-topgrid1 h5 { color: #555; line-height: 1.8em; font-size: 1em; } .about-topgrid1 p { color: #999; line-height: 1.8em; font-size: 0.95em; margin-bottom:2em; } .about-img img { width: 100%; } .about-img img:hover { opacity: 0.6; } .about-bottom-info-right img { width: 100%; } .about-bottom-info-right img:hover { opacity: 0.6; } .check-out p { font-size: 0.94em; line-height: 1.5em; margin-top: 10px; } /*--/about--*/ /*--404--*/ .projects { margin: 6em 0 4em; } .page h3 { font-family: 'Oswald', sans-serif; text-align: center; color: #3598DB; font-size: 5em; padding: 0em 0 1em; } .page h1 { font-family: 'Oswald', sans-serif; color: #999; text-align: center; font-weight: 600; font-size: 13em; } .portfolio_top{ padding:7em 0 5em; } .portfolio_top h4, .support_top h4, .contact_top h4{ text-align: center; margin:0 0 1.5em; font-size: 2.5em; font-weight: 600; font-family: 'Oswald', sans-serif; } .page sapn { color: #3598DB; } /*--/404--*/ /*--support--*/ a.support-top-info { font-family: 'Arimo', sans-serif; border: none; outline: 0; color: #fff; font-weight: 600; padding: 10px 19px; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; background-color: #0DBAE4; font-size: 17px; font-weight: bold; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; margin-top: 18px; } a.support-top-info:hover { background: #186A7E; text-decoration: none; } .support-bottom { background: #3598DB; min-height: 200px; padding:5em 0; color: #fff; } .grid-bottom h3 { font-size: 1.8em; font-weight: 700; margin: 24px 0 0px; } .grid-bottom p { font-size:0.95em; line-height: 1.8em; margin:1em 0 2em; } a.support-bottom-top { font-family: 'Arimo', sans-serif; border: none; outline: 0; color: #fff; font-weight: 600; padding: 10px 18px; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; background-color: #0DBAE4; font-size: 17px; font-weight: bold; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; } a.support-bottom-top:hover { background: #186A7E; text-decoration: none; } .support-info-bottom img { width: 100%; } .support-info-bottom img:hover { opacity: 0.8; } /*--/support--*/ /*--404--*/ .page p { text-align: center; font-weight: 400; font-size: 21px; margin: 1em 0 1em; } .page p a { color: #3598DB; } /*--/404--*/ /*--contact--*/ .contact_top{ padding:7em 0 5em; } .contact-us h4 { font-family: 'Oswald', sans-serif; text-align: center; margin: 1em 0 1em; font-size: 2.5em; font-weight: 600; color: #000; } .contact { font-family: 'Oswald', sans-serif; background: #8B8F96; text-align: center; padding: 5em 0; } .contact-info h4 { color: #fff; font-weight: 500; font-size: 2em; margin:0 0 1em 0; } .contact-info p { font-family: 'Arimo', sans-serif; color: #fff; font-weight: 200; font-size: 1em; text-align: left; line-height: 1.8em; margin: 0px 143px 18px; } .contact input.text { font-family: 'Arimo', sans-serif; width: 37.2%; outline: none; margin-bottom: 1em; padding: 16px; border: 1px solid#27B6DE; color: #fff; font-size: 0.875em; background: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; } .contact input.text:hover{ outline:none; border: 1px solid#0DBAE4; text-decoration:none; } .contact textarea:hover{ border: 1px solid#0DBAE4; text-decoration:none; } .contact textarea { font-family: 'Arimo', sans-serif; width: 74.6%; height: 215px; outline: none; resize: none; border: 1px solid#0DBAE4; color: #fff; background: none; font-size: 0.875em; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; padding: 16px 0 0px 16px; } .contact input[type="submit"] { font-family: 'Arimo', sans-serif; border: none; outline: 0; color: #fff; padding: 11px 69px; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; background-color: #0DBAE4; font-size: 0.875em; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; margin-top: 18px; } .contact input[type="submit"]:hover { background-color: #182535; color: #fff; text-decoration:none; } .contact-us-down { padding: 3em 0 2em; } .map iframe { width: 100%; height: 350px; margin: 0 auto; } .contact-us-info form { padding: 1em 0; } .contact-us-info input[type="text"] { outline: none; border: 1px solid #999; padding: 17px; width: 100%; margin-bottom: 0.5em; font-size:0.85em; color:#CECECE; } .contact-us-info input[type="text"]:hover { border: 1px solid #00C7FC; } .contact-us-info textarea { border: 1px solid #999; resize: none; height: 130px; padding: 1em; width: 100%; outline: none; font-size: 0.85em; color:#CECECE; } .contact-us-info textarea:hover { border: 1px solid #00C7FC; } .contact-us-info input[type="submit"] { outline: none; border: none; background-color: #27B6DE; color: #fff; padding: 9px 45px; font-weight: 600; font-size: 19px; margin-top: 0.4em; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; } .contact-us-info input[type="submit"]:hover { background-color: #186A7E; } .contact-us-left h5 { color: #6E6E6E; text-align: center; padding: 0.58em 0 0.5em; font-size: 1.6em; font-weight: 500; } .contact-us-left p { width: 92%; margin: 0 auto; color: #999; line-height: 1.8em; font-weight: 400; font-size: 15px; padding-bottom: 1.3em; } .contact-left h5 { font-family: 'Oswald', sans-serif; text-align: center; font-weight: 600; font-size: 25px; margin-bottom: 26px; color: #060E3E; } .contact-left p { color: #999; font-size:0.95em; line-height: 1.8em; margin-bottom: 20px; } address { line-height: 1.8em; font-size: 14px; font-weight: 400; color: #999; } strong { font-weight: bold; } .view { overflow: hidden; position: relative; text-align: center; cursor: default; } .view .content-dot { width: 300px; position: absolute; overflow: hidden; top:-25px; left:45px; } .view img { display: block; position: relative; } .effect img { opacity:1; -moz-transform:scale(1,1); -webkit-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1); -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .effect:hover img { opacity:1; -moz-transform:scale(1.2,1.2); -webkit-transform:scale(1.2,1.2); -o-transform:scale(1.2,1.2); -ms-transform:scale(1.2,1.2); transform:scale(1.2,1.2); } .effect:hover a.info { opacity:1; -moz-transform:translateY(100px); -webkit-transform:translateY(100px); -o-transform:translateY(100px); -ms-transform:translateY(100px); transform:translateY(100px); } ul#filters { padding: 0px; } #filters { margin: 3% 0; padding: 0; list-style: none; text-align: center; } #filters li { display:inline-block; display: -webkit-inline-box; display: -moz-inline-box; display: -o-inline-box; display: -ms-inline-box; } #filters li span.active { display: block; text-decoration: none; color: #3598DB; cursor: pointer; font-size: 18px; margin: 0 0.875em; } #filters li span:hover { color: #A4A4A4; } #filters li label { margin: 0; padding: 0; color: #A4A4A4; } #filters li span { display: block; padding: 0; text-decoration: none; color: #000; cursor: pointer; font-size: 18px; margin: 0 0.875em; } #portfoliolist .portfolio { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width: 31%; display: none; float: left; overflow: hidden; margin: 1%; } div#portfoliolist { padding: 0px 0px; } .portfolio-wrapper { overflow:hidden; position: relative !important; cursor:pointer; padding: 1em 0; } .portfolio img { max-width:100%; transition: all 300ms!important; -webkit-transition: all 300ms!important; -moz-transition: all 300ms!important; } .portfolio .label { position: absolute; width: 100%; height:40px; bottom:-40px; } .portfolio .label-bg { background: #22B4B8; width: 100%; height:100%; position: absolute; top:0; left:0; } .portfolio .label-text { color:#fff; position: relative; z-index:500; padding:5px 8px; } .portfolio .text-category { display:block; font-size:9px; font-size: 12px; text-transform:uppercase; } .simple h5{ font-size: 1.2em; margin: 0; padding: 0; text-decoration: none; } .simple { text-align: center; border-bottom: 1px solid #ddd; padding: 1em 0; } .simple p { font-family: 'Source Sans Pro', sans-serif; font-size: 1.1em; margin: 0; padding:0.3em 0; color: #666666; } .col-md-8.col1 { padding: 0; width: 60%; } .col-md-4.dogs-food-info { margin-bottom: 3em; } .col-md-4.about-left { margin: 0 0 2em; } /*-----------*/ /*--contact--*/ /*--footer--*/ .footer{ background:#555F76; padding: 45px 0 30px; text-align: center; } .copy-rights p { color: #fff; font-size: 18px; font-weight: 200; } .copy-rights p a { color: #00C7FC; } .copy-rights p a:hover { color: #fff; text-decoration:none; } /*--/footer--*/ /*--responsive design--*/ @media (max-width: 1024px){ ul.callbacks_tabs.callbacks1_tabs { } ul.cl-effect-21 li { margin: 0 12px; } .about-bottom-info-right img { width: 100%; } .doctor-self-left img { width: 100%; } .menu { top: -50px; left: 97px; width: 76%; } .supporters h4 { margin: 1.5em 0 1em; font-size: 2em; } .support-info-right img { margin-left: 0em; width: 100%; } .aboutus { padding: 4em 0 0; min-height: 338px; } .support-info p { padding-top: 61px; } #portfoliolist .portfolio { width: 31.3333333333%; } .support-info p { padding-top: 0; font-size: 15px; } .map { width: 100%; } .map iframe { width: 910px; height: 350px; margin: 0 auto; padding-left: 0; border: none; } @media (max-width: 768px){ .menu { top: -39px; left: 0px; width: 100%; padding:0.5em 0; } .support-info-bottom img { padding-top: 1.5em; } .support-info-right-bottom img { margin-bottom: 1.2em; } .doctor-self-left { margin-bottom: 1.5em; } .col-md-4.dogs-food-info { width: 50%; float: left; } .about-img { text-align: center; } .contact-us-right { width: 100%; } .about-bottom-info-right { padding-bottom: 1em; } #portfoliolist .portfolio { width: 48%; } .col-md-4.about-left { width: 50%; float: left; text-align: center; } ul.cl-effect-21 li{ margin: 0px 10px; } .col-md-4.support-bottom-top { margin: 0 0 1em; } .support-info-bottom img { width: 46%; margin: 0 auto; } .support-info { margin: 0em 0 1em; } .daily-updates-info p { margin-top: 1em; } .support-info p { margin-bottom: 1.8em; } .support-bottom-top img { width: 30%; } .support-bottom-top img { margin-top: 1.3em; } .support h4 { margin: 0.5em 0 1em; font-size: 2em; } .contact-us-info { margin-top: 0em; } .contact input.text { width: 49.5%; } .support-bottom { padding: 2em 0; } .contact textarea { width: 100%; height: 125px; } .contact { min-height: 452px; } .support-info-right { margin-bottom: 0em; } .ul.cl-effect-21{ margin-bottom: 0; } .doctor-self-info-bottom { padding: 2em 0 1.5em; } .doctor-self-info { padding: 2em 0 0; } .doctor-self-info h3 { margin: 0; } .dogs-food-info { margin-top: 1em; } .support-info-left-top img { margin: 0 auto; width:20%; } .support-info-right-bottom img { margin: 0 auto; width:20%; } .contact input[type="submit"] { margin-bottom: 13px; } .doctor-self-left img { width: 56%; } .col-md-8.about-bottom-info { margin: 0 0 2em; } .about-topgrid1 { padding: 3em 0 3em; } .col-md-4.about-img img { padding-bottom: 30px; width: 36%; margin: 0 auto; } .about-bottom-info-right img { width: none; } .about-topgrid1 { margin: 0em 0 1em; } .aboutus { padding: 2em 0 0; } .about-bottom-into { margin-bottom: 40px; } .about-bottom-info-right img { width: 60%; } .support-bottom { text-align: center; } .support-info-bottom a img { margin: 0 auto; padding-left: 12px; } .support-info input[type="submit"] { margin-bottom: 22px; } .map iframe { width: 657px; } .contact-us-right { padding-bottom: 0em; } .dogs-food-info p { font-size: 0.875em; width: 66%; line-height: 1.6em; padding-bottom: 1em; } .doctor-self-right p { font-size: 0.875em; line-height: 1.8em; } .doctor-self-left p { font-size: 0.875em; } } @media (max-width: 640px){ span.menu-info:before { content: url("../images/menu.png") no-repeat; cursor: pointer; } .header { min-height: 119px; } .doctor-self-info { padding: 3.3em 0 0; } .doctor-self-info-bottom { padding: 1.4em 0 1em; } ul.callbacks_tabs.callbacks1_tabs { bottom: -15.2%; padding: 0.5em 0em 1em; } .daily-updates-info h4 { font-weight: 400; font-size: 1.2em; margin-bottom: 32px; } ul.cl-effect-21{ padding: 0em; z-index: 999; position: absolute; width: 100%; background: none; text-align: center; list-style: none; margin: 0 auto; right: 0em; background-color: #fff; display: none; } ul.cl-effect-21 li { margin: 0 0em 0 0; display: block; font-size: 12px; padding: 0px 0 0 0px; } .cl-effect-21 a { padding: 10px 0; } ul.cl-effect-21 li a { color: #3598DB; margin-right: 0px; text-decoration: none; display:block; } .menu a { margin: 7px 0 0 0; } .menu { top: -30px; left: 0px; width: 100%; } .search-box { right: 0px; top: -13px; } ul.callbacks_tabs.callbacks1_tabs { } ul.callbacks_tabs.callbacks1_tabs { } .header-info { padding-top: 0.6em; } .col-md-4.about-img img { padding-bottom: 0; width: 27%; margin: 0 auto 1em; } .support-info-bottom a img { margin: 0 auto; padding-left: 0px; width: 100%; } .logo a img { width: 73%; } .map iframe { width: 563px; } .daily-updates-info form input[type="text"] { padding: 7px; width: 46%; } .daily-updates-info input[type="submit"] { padding: 9px 25px; } .support { padding: 2em 0; } .support h4 { font-size: 1.2em; } .contact-info p { font-size: 1em; line-height: 1.2em; margin: 0px 0px 1em; text-align: center; } .contact { padding: 2em 0; } .about { margin: 4em 0 0em; } .about-top-info h3 { font-size: 1.5em; font-weight: 400; } .about-desc p { font-size: 0.85em; height: 96px; overflow: hidden; } .about-topgrid1 { padding: 2em 0 1em; } .about-topgrid1 h3 { font-size: 1.5em; font-weight: 400; margin: 0em 0 1em; } .portfolio_top { padding: 4em 0 3em; } .portfolio_top h4, .support_top h4, .contact_top h4 { margin: 0 0 1.5em; font-size: 1.5em; font-weight: 400; } .support_top { padding: 4em 0 2em; } .contact_top { padding: 4em 0 5em; } } @media (max-width: 480px){ ul.callbacks_tabs.callbacks1_tabs { } .menu { top: -30px; } .search-box { right: 0px; top: -7px; } ul.callbacks_tabs.callbacks1_tabs { bottom: -19.2%; padding: 0em 0em 1em; } .doctor-self-right p { height: 80px; overflow: hidden; text-align: center; } .dogs-food-info p { font-size: 0.875em; width: 100%; line-height: 1.6em; } .contact input.text { width: 100%; padding: 9px; } .col-md-4.dogs-food-info:nth-of-type(3) { display: none; } .col-md-4.dogs-food-info:nth-of-type(5) { display: none; } .col-md-4.about-left:nth-of-type(3) { display: none; } .col-md-4.about-left:nth-of-type(5) { display: none; } .col-md-4.dogs-food-info { margin-bottom: 1em; } .contact-info h4 { font-size: 1.2em; } .contact textarea { width: 100%; } .contact-info p { margin: 0; padding-bottom: 18px; } .daily-updates-info form input[type="text"] { width: 70%; } .col-md-4.about-img img { } .about-bottom-info-right img { width: 100%; } .map iframe { width: 402px; } } @media (max-width: 320px){ .logo a img { width: 50%; margin-top:5px; } .search-box { right: 0px; top: -35px; margin: 0; width: 64%; } .slider { min-height: 183px; } .rslides img { width: 149%; } .menu { top: -26px; padding: 0.2em 0 0; } .callbacks_tabs a:after { height: 12px; width: 12px; } .doctor-self-info h3 { margin: 0; font-size: 1em; } .doctor-self-left { margin-bottom: 0.5em; } .doctor-self { background: #27B6DE; min-height: 326px; } .dogs-food-top-info { padding: 1em 0; } .dogs-food-info p, .check-out p { font-size: 0.875em; width: 100%; height: 72px; overflow: hidden; } .support-info-left-top img { margin: 0 auto; width: 51%; } #filters li span, #filters li span.active{ font-size: 12px; } }