I'm trying to put the social media bar in the footer but it does not have the desired effect, like the bar above the example. It remains as pigeonholed in a box. If I delete <li class="social_icons clearfix"> it works, but the elements of the footer are misplaced.
How could I solve it? Thank you
I leave an example done in codepen: More colorful example
body {
background: #2f3133 url(../images/patternbg.jpg) 0 0 repeat;
}
.row_4 {
padding: 30px 0 81px;
background: #ffffff;
}
p {
font-family: 'Arial', sans-serif;
font-size: 15px;
line-height: 22px;
color: #adadad;
margin: 0;
padding: 0;
margin-bottom: 11px;
}
h2 {
font-family: 'Georgia', serif;
font-size: 26px;
line-height: 28px;
color: #474848;
margin: 0;
padding: 35px 0;
}
.select-menu {
display: none !important;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.pad_bot3 {
padding-bottom: 42px;
}
#container {
margin-left: 0;
}
.containerExtra {
margin-left: -30px;
}
/*--------links------------*/
.btn-link4 {
color: #474848;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.btn-link4:hover {
color: #eb5368;
text-decoration: none;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.pad_bot2 {
padding-bottom: 43px;
}
.links p {
margin-bottom: 28px;
}
/*-- contacts page --*/
.gmap {
margin-top: 7px;
}
.map {
overflow: hidden;
line-height: 0;
font-size: 0;
margin-bottom: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: none;
border-radius: 0;
}
.map iframe {
width: 100%;
height: 393px;
border: none;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.address h2 {
padding-bottom: 35px;
}
address {
margin: 8px 0 0 0;
margin-bottom: 30px;
}
.info {
font-family: 'Arial', serif;
font-size: 15px;
line-height: 22px;
font-weight: normal;
color: #adadad;
}
.padding_top1 {
padding-top: 31px;
}
.info > p {
font-family: 'Arial', serif;
font-size: 15px;
line-height: 22px;
font-weight: normal;
color: #adadad;
margin-bottom: 0;
}
.info > p span {
font-family: 'Arial', serif;
font-size: 15px;
line-height: 22px;
font-weight: normal;
color: #adadad;
width: 94px;
display: inline-block;
}
.info a {
color: #adadad;
text-decoration: none;
font-weight: normal;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.info a:hover {
text-decoration: none;
color: #eb5368;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
/***** contact form *****/
.contact-form {
position: relative;
vertical-align: top;
z-index: 1;
margin: 0 0 0;
top: 0;
}
.contact-form .txt-form {
display: none;
}
.contact-form .coll-1, .contact-form .coll-2, .contact-form .coll-3 {
margin-right: 20px;
margin-bottom: 16px;
float: left;
width: 192px;
}
.contact-form .coll-3 {
margin-right: 0;
}
.contact-form .coll-4 {
margin-bottom: 5px;
}
.contact-form fieldset {
top: 13px;
border: none;
padding: 0;
width: 100%;
position: relative;
z-index: 10;
}
.contact-form label {
display: block;
min-height: 45px;
position: relative;
margin: 0;
padding: 0;
float: left;
width: 100%;
}
.contact-form .message {
display: block;
width: 100%;
}
.contact-form input {
padding: 9px 14px 8px;
margin: 0;
text-decoration: none;
font-family: 'Arial', sans-serif;
font-size: 15px;
line-height: 22px;
font-weight: normal;
color: #adadad;
background: transparent;
outline: none;
width: 100%;
border: 1px solid #dbdbdb;
-webkit-box-shadow: none;
box-shadow: none;
float: left;
border-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*-------privacy_page--------*/
.privacy_page h2 {
padding-bottom: 42px;
}
.privacy_page p {
margin-bottom: 22px;
}
.privacy_page .m_bot4 {
margin-bottom: 27px;
}
.privacy_page a {
color: #adadad;
}
.privacy_page a:hover {
color: #eb5368;
}
/*--- content end ------*/
/*--------- footer --------- */
footer {
padding: 64px 0;
background: url("../images/linefooter.jpg") top center repeat-x;
}
/*--------------social----------------*/
.social_icons {
overflow: hidden;
padding: 0;
list-style: none;
white-space: nowrap;
position: relative;
margin: 28px 0 0;
z-index: 10;
}
.social_icons > li {
float: left;
cursor: pointer;
width: 32px;
height: 31px;
overflow: hidden;
margin-right: 14px;
}
.social_icons > li a {
width: 32px;
height: 31px;
overflow: hidden;
}
.social_icons > li a img {
position: relative;
top: 0;
}
.social_icons > li a:hover img {
position: relative;
top: -31px;
}
.footerlogo {
text-align: center;
}
.smalllogo2 {
position: relative;
top: 5px;
}
.footerpriv {
margin-top: 21px;
margin-right: 66px;
text-align: right;
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 22px;
font-weight: normal;
color: #f2eee5;
}
.footerpriv a {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 22px;
font-weight: normal;
color: #f2eee5;
text-transform: uppercase;
}
.footerpriv a:hover {
text-decoration: none;
color: #eb5368;
}
.share-fb{
background-color: #2d609b;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI2LjY2NyAwaC0yMS4zMzRjLTIuOTQ1IDAtNS4zMzMgMi4zODgtNS4zMzMgNS4zMzR2MjEuMzMyYzAgMi45NDYgMi4zODcgNS4zMzQgNS4zMzMgNS4zMzRoMTAuNjY3di0xNGgtNHYtNGg0di0zYzAtMi43NjEgMi4yMzktNSA1LTVoNXY0aC01Yy0wLjU1MiAwLTEgMC40NDgtMSAxdjNoNS41bC0xIDRoLTQuNXYxNGg2LjY2N2MyLjk0NSAwIDUuMzMzLTIuMzg4IDUuMzMzLTUuMzM0di0yMS4zMzJjMC0yLjk0Ni0yLjM4Ny01LjMzNC01LjMzMy01LjMzNHoiPjwvcGF0aD48L3N2Zz4=);
}
.share-twitter{
background-color: #00c3f3;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTMyIDYuMDc2Yy0xLjE3NyAwLjUyMi0yLjQ0MyAwLjg3NS0zLjc3MSAxLjAzNCAxLjM1NS0wLjgxMyAyLjM5Ni0yLjA5OSAyLjg4Ny0zLjYzMi0xLjI2OSAwLjc1Mi0yLjY3NCAxLjI5OS00LjE2OSAxLjU5My0xLjE5OC0xLjI3Ni0yLjkwNC0yLjA3My00Ljc5Mi0yLjA3My0zLjYyNiAwLTYuNTY1IDIuOTM5LTYuNTY1IDYuNTY1IDAgMC41MTUgMC4wNTggMS4wMTYgMC4xNyAxLjQ5Ni01LjQ1Ni0wLjI3NC0xMC4yOTQtMi44ODgtMTMuNTMyLTYuODYtMC41NjUgMC45Ny0wLjg4OSAyLjA5Ny0wLjg4OSAzLjMwMSAwIDIuMjc4IDEuMTU5IDQuMjg3IDIuOTIxIDUuNDY1LTEuMDc2LTAuMDM0LTIuMDg4LTAuMzI5LTIuOTc0LTAuODIxLTAuMDAxIDAuMDI3LTAuMDAxIDAuMDU1LTAuMDAxIDAuMDgzIDAgMy4xODEgMi4yNjMgNS44MzQgNS4yNjYgNi40MzctMC41NTEgMC4xNS0xLjEzMSAwLjIzLTEuNzMgMC4yMy0wLjQyMyAwLTAuODM0LTAuMDQxLTEuMjM1LTAuMTE4IDAuODM1IDIuNjA4IDMuMjYgNC41MDYgNi4xMzMgNC41NTktMi4yNDcgMS43NjEtNS4wNzggMi44MS04LjE1NCAyLjgxLTAuNTMgMC0xLjA1Mi0wLjAzMS0xLjU2Ni0wLjA5MiAyLjkwNSAxLjg2MyA2LjM1NiAyLjk1IDEwLjA2NCAyLjk1IDEyLjA3NiAwIDE4LjY3OS0xMC4wMDQgMTguNjc5LTE4LjY4IDAtMC4yODUtMC4wMDYtMC41NjgtMC4wMTktMC44NDkgMS4yODMtMC45MjYgMi4zOTYtMi4wODIgMy4yNzYtMy4zOTh6Ij48L3BhdGg+PC9zdmc+);
}
.share-google-plus{
background-color: #eb4026;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE3LjQ3MSAyYzAgMC02LjI4IDAtOC4zNzMgMC0zLjc1NCAwLTcuMjg3IDIuODQ0LTcuMjg3IDYuMTM4IDAgMy4zNjYgMi41NTkgNi4wODMgNi4zNzggNi4wODMgMC4yNjYgMCAwLjUyNC0wLjAwNSAwLjc3Ni0wLjAyNC0wLjI0OCAwLjQ3NS0wLjQyNSAxLjAwOS0wLjQyNSAxLjU2NCAwIDAuOTM2IDAuNTAzIDEuNjk0IDEuMTQgMi4zMTMtMC40ODEgMC0wLjk0NSAwLjAxNC0xLjQ1MiAwLjAxNC00LjY0OS0wLTguMjI4IDIuOTYxLTguMjI4IDYuMDMyIDAgMy4wMjQgMy45MjMgNC45MTYgOC41NzMgNC45MTYgNS4zMDEgMCA4LjIyOC0zLjAwOCA4LjIyOC02LjAzMiAwLTIuNDI1LTAuNzE1LTMuODc3LTIuOTI4LTUuNDQyLTAuNzU3LTAuNTM2LTIuMjA0LTEuODM5LTIuMjA0LTIuNjA0IDAtMC44OTcgMC4yNTYtMS4zNCAxLjYwNy0yLjM5NSAxLjM4NS0xLjA4MiAyLjM2NS0yLjYwMyAyLjM2NS00LjM3MiAwLTIuMTA2LTAuOTM4LTQuMTU5LTIuNjk5LTQuODM3aDIuNjU1bDEuODc0LTEuMzU1ek0xNC41NDYgMjIuNDgzYzAuMDY2IDAuMjggMC4xMDMgMC41NjkgMC4xMDMgMC44NjMgMCAyLjQ0NC0xLjU3NSA0LjM1My02LjA5MyA0LjM1My0zLjIxNCAwLTUuNTM1LTIuMDM1LTUuNTM1LTQuNDc4IDAtMi4zOTUgMi44NzktNC4zODkgNi4wOTMtNC4zNTQgMC43NSAwLjAwOCAxLjQ0OSAwLjEyOSAyLjA4MyAwLjMzNCAxLjc0NSAxLjIxMyAyLjk5NiAxLjg5OSAzLjM0OSAzLjI4MXpNOS40MDEgMTMuMzY4Yy0yLjE1Ny0wLjA2NS00LjIwNy0yLjQxMy00LjU4LTUuMjQ2czEuMDc0LTUuMDAxIDMuMjMxLTQuOTM3YzIuMTU3IDAuMDY1IDQuMjA3IDIuMzM4IDQuNTggNS4xNzFzLTEuMDc1IDUuMDc3LTMuMjMxIDUuMDEyek0yNiA4di02aC0ydjZoLTZ2Mmg2djZoMnYtNmg2di0yeiI+PC9wYXRoPjwvc3ZnPg==);
}
.share-linkedin{
background-color: #0074a1;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI2LjYyNSAwaC0yMS4yNWMtMi45NTYgMC01LjM3NSAyLjQxOS01LjM3NSA1LjM3NXYyMS4yNWMwIDIuOTU2IDIuNDE5IDUuMzc1IDUuMzc1IDUuMzc1aDIxLjI1YzIuOTU2IDAgNS4zNzUtMi40MTkgNS4zNzUtNS4zNzV2LTIxLjI1YzAtMi45NTYtMi40MTktNS4zNzUtNS4zNzUtNS4zNzV6TTEyIDI2aC00di0xNGg0djE0ek0xMCAxMGMtMS4xMDUgMC0yLTAuODk1LTItMnMwLjg5NS0yIDItMiAyIDAuODk1IDIgMi0wLjg5NSAyLTIgMnpNMjYgMjZoLTR2LThjMC0xLjEwNS0wLjg5NS0yLTItMnMtMiAwLjg5NS0yIDJ2OGgtNHYtMTRoNHYyLjQ4M2MwLjgyNS0xLjEzMyAyLjA4Ni0yLjQ4MyAzLjUtMi40ODMgMi40ODUgMCA0LjUgMi4yMzkgNC41IDV2OXoiPjwvcGF0aD48L3N2Zz4=);
}
.share-pinterest{
background-color: #ca212a;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2IDBjLTguODM3IDAtMTYgNy4xNjMtMTYgMTYgMCA2Ljc3OCA0LjIxNyAxMi41NjggMTAuMTY5IDE0Ljg5OS0wLjE0LTEuMjY2LTAuMjY2LTMuMjA4IDAuMDU1LTQuNTkgMC4yOTEtMS4yNDkgMS44NzYtNy45NTMgMS44NzYtNy45NTNzLTAuNDc5LTAuOTU4LTAuNDc5LTIuMzc1YzAtMi4yMjUgMS4yOS0zLjg4NiAyLjg5NS0zLjg4NiAxLjM2NSAwIDIuMDI0IDEuMDI1IDIuMDI0IDIuMjU0IDAgMS4zNzMtMC44NzQgMy40MjUtMS4zMjUgNS4zMjctMC4zNzcgMS41OTMgMC43OTkgMi44OTIgMi4zNjkgMi44OTIgMi44NDQgMCA1LjAzMC0yLjk5OSA1LjAzMC03LjMyNyAwLTMuODMxLTIuNzUzLTYuNTA5LTYuNjgzLTYuNTA5LTQuNTUyIDAtNy4yMjUgMy40MTUtNy4yMjUgNi45NDMgMCAxLjM3NSAwLjUzIDIuODUgMS4xOTEgMy42NTEgMC4xMzEgMC4xNTggMC4xNSAwLjI5NyAwLjExMSAwLjQ1OS0wLjEyMSAwLjUwNi0wLjM5MSAxLjU5My0wLjQ0NCAxLjgxNS0wLjA3MCAwLjI5My0wLjIzMiAwLjM1NS0wLjUzNSAwLjIxNC0xLjk5OC0wLjkzLTMuMjQ4LTMuODUyLTMuMjQ4LTYuMTk4IDAtNS4wNDcgMy42NjctOS42ODIgMTAuNTcyLTkuNjgyIDUuNTUgMCA5Ljg2NCAzLjk1NSA5Ljg2NCA5LjI0MSAwIDUuNTE0LTMuNDc3IDkuOTUyLTguMzAyIDkuOTUyLTEuNjIxIDAtMy4xNDUtMC44NDItMy42NjctMS44MzcgMCAwLTAuODAyIDMuMDU1LTAuOTk3IDMuODAzLTAuMzYxIDEuMzktMS4zMzcgMy4xMzItMS45ODkgNC4xOTUgMS40OTcgMC40NjMgMy4wODggMC43MTMgNC43MzggMC43MTMgOC44MzYtMCAxNi03LjE2MyAxNi0xNnMtNy4xNjMtMTYtMTYtMTZ6Ij48L3BhdGg+PC9zdmc+);
}
.share-tumblr{
background-color: #36465d;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI2LjY2OCAwaC0yMS4zMzRjLTIuOTM0IDAtNS4zMzQgMi40LTUuMzM0IDUuMzM0djIxLjMzMmMwIDIuOTM2IDIuNCA1LjMzNCA1LjMzNCA1LjMzNGgyMS4zMzRjMi45MzMgMCA1LjMzMi0yLjM5OCA1LjMzMi01LjMzNHYtMjEuMzMyYy0wLTIuOTMzLTIuMzk5LTUuMzM0LTUuMzMyLTUuMzM0ek0yMi44NjYgMjUuNzcxYy0wLjk0MiAwLjQ0My0xLjc5OCAwLjc1Ni0yLjU2MyAwLjkzNi0wLjc2NSAwLjE3OC0xLjU5MyAwLjI2Ny0yLjQ4MSAwLjI2Ny0xLjAxMCAwLTEuNjA1LTAuMTI3LTIuMzgxLTAuMzgxLTAuNzc1LTAuMjU2LTEuNDM4LTAuNjIxLTEuOTg0LTEuMDkwLTAuNTQ5LTAuNDczLTAuOTI4LTAuOTc1LTEuMTQtMS41MDZzLTAuMzE3LTEuMzAzLTAuMzE3LTIuMzEzdi03Ljc0NGgtM3YtMy4xMjdjMC44NjctMC4yODEgMS44NzMtMC42ODUgMi40OS0xLjIxMSAwLjYyLTAuNTI3IDEuMTE2LTEuMTU4IDEuNDktMS44OTYgMC4zNzUtMC43MzYgMC42MzMtMS42NzYgMC43NzQtMi44MTVoMy4xNDF2NS4xMDhoNS4xMDV2My45NDFoLTUuMTA2djUuNjYyYzAgMS4yODEtMC4wMTcgMi4wMjAgMC4xMTkgMi4zODMgMC4xMzUgMC4zNjEgMC40NzMgMC43MzYgMC44NDEgMC45NTMgMC40ODkgMC4yOTMgMS4wNDcgMC40MzkgMS42NzYgMC40MzkgMS4xMTggMCAyLjIzMS0wLjM2MyAzLjMzNi0xLjA5MHYzLjQ4MnoiPjwvcGF0aD48L3N2Zz4=);
}
/**************** footer end ***************/
/*----- media queries ------*/
@media (min-width: 1220px) {
.contact-form .coll-1, .contact-form .coll-2, .contact-form .coll-3 {
margin-right: 20px;
margin-bottom: 16px;
float: left;
width: 243px;
}
.contact-form .coll-3 {
margin-right: 0;
}
.chef figure {
padding: 0;
margin: 0;
float: left;
margin-right: 31px;
}
.list3 li figure {
margin-right: 53px;
}
.list3 li .info1 {
overflow: hidden;
margin-top: 46px;
}
.box2 figure img {
height: 270px;
}
.container {
padding: 0;
}
}
/**************************************************/
@media (min-width: 768px) and (max-width: 991px) {
.contact-form .coll-1, .contact-form .coll-2, .contact-form .coll-3 {
margin-right: 0;
margin-bottom: 16px;
float: none;
width: 100%;
}
.reserve_table {
overflow: hidden;
}
.reserve_table figure {
width: 100%;
padding: 0;
float: none;
margin: 0 0 20px 0;
}
.reserve_table figure img {
width: 100%;
}
.reserve_table .m_bot2 {
margin-bottom: 20px;
}
.footercol {
float: left;
width: 33%;
margin-bottom: 20px;
}
.footerpriv {
margin-top: 21px;
margin-right: 0;
font-size: 14px;
}
.footerpriv a {
font-size: 14px;
}
.row_4 {
margin-left: 0;
}
.row_4 .chef figure {
padding: 0;
margin: 0 0 10px;
}
.row_4 .row4_col {
margin: 0;
float: left;
margin-left: 0;
width: 33%;
}
.list3 {
margin-left: 0;
}
.list3 li {
width: 50%;
float: left;
margin-left: 0;
}
.list3 li figure {
width: 100%;
float: none;
margin-right: 0;
}
.list3 li .info1 {
overflow: hidden;
margin-top: 0;
padding: 20px;
}
.box2 figure img {
height: 165px;
}
.list1 li a p {
font-size: 20px;
line-height: 22px;
padding: 24px 0 21px;
}
.nav-collapse_ .nav > li {
float: left;
}
.navbar_ {
width: auto!important;
overflow: visible !important;
height: auto;
clear: none;
}
}
/**************************************************/
@media (max-width: 767px) {
.row_4 .row4_col .btn-link3 {
font-size: 12px;
}
.contact-form .coll-1, .contact-form .coll-2, .contact-form .coll-3 {
margin-right: 0;
margin-bottom: 16px;
float: none;
width: 100%;
}
.reserve_table {
overflow: hidden;
}
.reserve_table .m_bot2 {
margin-bottom: 30px;
}
.reserve_table figure {
padding: 0;
float: left;
margin: 0 20px 10px 0;
}
.footercol {
float: none;
width: 100%;
margin-bottom: 20px;
text-align: center;
}
.social_icons {
display: inline-block;
}
.footerpriv {
margin-top: 0;
margin-right: 0;
float: none;
text-align: center;
}
.row_4 {
margin-left: 0;
}
.row_4 .chef figure {
padding: 0;
margin: 0 0 10px;
}
.row_4 .row4_col {
margin: 0;
float: left;
margin-left: 0;
width: 30%;
}
.box1, .box2, .box3 {
float: none;
width: 100%;
margin: 0 auto 25px;
}
.box1 figure, .box2 figure, .box3 figure {
width: 100%;
}
.box1 figure img, .box2 figure img, .box3 figure img {
width: 100%;
}
.box2 figure img {
height: auto;
}
.listbox1 {
padding-right: 15px;
}
.listbox2 {
padding-right: 15px;
padding-left: 15px;
}
.listbox3 {
padding-left: 15px;
}
.list1 {
text-align: center;
}
.sf-menu {
display: none !important;
}
.select-menu {
display: block !important;
color: #ffffff;
border: 1px solid #343434;
background: #343434 !important;
-webkit-box-shadow: none;
box-shadow: none;
position: relative;
width: 100%;
margin: 0;
padding: 5px;
}
.select-menu option {
padding: 0;
}
}
/**************************************************/
@media (max-width: 600px) {
.row_4 .row4_col .btn-link3 {
font-size: 18px;
}
.reserve_table {
overflow: hidden;
}
.reserve_table .m_bot2 {
margin-bottom: 30px;
}
.reserve_table figure {
width: 100%;
padding: 0;
float: none;
margin: 0 0 10px 0;
}
.reserve_table figure img {
width: 100%;
}
.row_4 {
margin-left: 0;
}
.row_4 .chef figure {
padding: 0;
margin: 0 15px 5px 0;
}
.row_4 .row4_col {
margin: 0;
float: none;
margin-left: 0;
width: 100%;
}
}
/**************************************************/
@media (max-width: 480px) {
.list3 li figure {
float: none;
width: 100%;
margin-right: 0;
}
.list3 li .info1 {
padding: 20px;
overflow: hidden;
margin-top: 20px;
}
}
/**************************************************/
@media (max-width: 360px) {
.chef figure {
padding: 0;
float: none;
width: 100%;
margin: 0 0 10px 0;
}
}
/*Core variables and mixins*/
img {
max-width: 100%;
}
/**** Style de buscador google ***********/
/*
Created by Alejandro Palacios https://github.com/AlexSoicalap
*/
.share-buttons-row{
height: 40px;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
.share-buttons-row >div:hover {
transform: rotate(360deg) scale(2);
border-radius: 100px;
}
.share-buttons-row > div {
transition: all .3s ease-in-out;
width: 50px;
height: 50px;
cursor: pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-align: center;
float: left;
margin-right: .3em;
padding: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 30px 30px;
}
/* Style para transicon de carga*/
.loader-page {
position: fixed;
z-index: 25000;
background: rgb(255, 255, 255);
left: 0px;
top: 0px;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
}
.loader-page::before {
content: "";
position: absolute;
border: 2px solid rgb(50, 150, 176);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
border-left: 2px solid rgba(50, 150, 176, 0);
border-top: 2px solid rgba(50, 150, 176, 0);
animation: rotarload 1s linear infinite;
transform: rotate(0deg);
}
@keyframes rotarload {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.loader-page::after {
content: "";
position: absolute;
border: 2px solid rgba(50, 150, 176, .5);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
border-left: 2px solid rgba(50, 150, 176, 0);
border-top: 2px solid rgba(50, 150, 176, 0);
animation: rotarload 1s ease-out infinite;
transform: rotate(0deg);
}<!DOCTYPE html>
<head>
<title>Gallery</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./js/compartir.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<header id="header">
</header>
<!--content-->
<div id="content">
<div class="col-lg-4 col-md-4 col-sm-4 chef row4_col">
<h2>Comparta nuestra idea </h2>
<div class="share-buttons-row">
<div class="share-fb"></div>
<div class="share-twitter"></div>
<div class="share-google-plus"></div>
<div class="share-linkedin"></div>
<div class="share-pinterest"></div>
<div class="share-tumblr"></div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 footercol">
<li class="social_icons clearfix">
<div class="share-buttons-row">
<div class="share-fb"></div>
<div class="share-twitter"></div>
<div class="share-google-plus"></div>
<div class="share-linkedin"></div>
<div class="share-pinterest"></div>
<div class="share-tumblr"></div>
</li>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 footerlogo footercol"></div>
</div>
</div>
</footer>
<script src="js/bootstrap.min.js"></script>
<script src="js/tm-scripts.js"></script>
</body>
</html>