Difference between revisions of "Template:Tsinghua/css/style.css"
ChiaweiWang (Talk | contribs) |
ChiaweiWang (Talk | contribs) |
||
| Line 1: | Line 1: | ||
| − | |||
html, body{ | html, body{ | ||
font-size: 100%; | font-size: 100%; | ||
| Line 1,524: | Line 1,523: | ||
} | } | ||
} | } | ||
| − | |||
Revision as of 08:58, 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; } }