We Keep Coding

How to make a horizontal scroll with transition?

I get stuck to add animated transition on the background carousels.
I am trying to create like pepsi.com website.
e.x: https://www.pepsi.com/#!products/diet-pepsi-caffeine-free
When you click on the button right / left they will shows transition.
This is my trial: https://codepen.io/dimassmacip/pen/yLMEJwp
Expected :
https://drive.google.com/file/d/1ZjGTwtaSiVEVipB3uVEgLPQUAcppr48C/view
Please Help me.
$(".cta").click(function() {
$(".transition").toggleClass("anim-trans");
});
* {
padding: 0;
margin: 0;
}
body {
background: #fff;
overflow-x: hidden;
font-family: arial;
}
.transition {
position: absolute;
height: 100%;
width: 30%;
background: #d6d6d6;
transform: skewX(-5deg) translateX(-50px);
transition: 2s all ease-in-out;
-webkit-transition: 2s all ease-in-out;
}
.content {
position: relative;
padding: 200px 0 0 200px;
color: #000;
z-index: 10;
height: 300px;
}
.cta {
outline: none;
border: none;
text-decoration: none;
text-transform: uppercase;
background: #202020;
color: #eaeaea;
box-sizing: border-box;
margin-top: 20px;
padding: 10px 40px;
}
.anim-trans {
animation: anim 4s ease-in-out;
}
#keyframes anim {
0% {}
20% {
z-index: 11;
\transform: skewX(5deg) translateX(-100%);
}
40% {
transform: skewX(0deg) translateX(0);
width: 100%;
z-index: 11;
box-shadow: 10px 10px 5px #eaeaea;
}
60% {
transform: skewX(3deg) translateX(0);
width: 100%;
z-index: 11;
box-shadow: 10px 10px 5px #eaeaea;
}
80% {
transform: skewX(1deg) translateX(-100%);
width: 60%;
z-index: 11;
box-shadow: 10px 10px 5px #eaeaea;
}
100% {
transform: skewX(-5deg) translateX(-50px);
width: 30%;
z-index: 1;
box-shadow: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="transition"></div>
<div class="content">
<h1>Heading title</h1>
<p>Lorem ipsum dolor sit amet</p>
<button class="cta">Click</button>
</div>

My webpage seems to work on certain platforms and not on others, the css doesn't get applied, why is this?

Here is a link to my webpage https://taniaswebpages.com/, specifically Website 5 - Snowfall that I am currently working on, the webpage only works for me on Safari on Iphone6s, and doesn't apply the css on Mac Chrome/Safari. But for others it works... why is it changing depending on the type of platform or user?
HTML/CSS:
body.mainpage2 {
margin: 0;
padding: 0;
font-family: lato;
background-color: #e74c3c;
}
.color {
margin-top: 350px;
text-align: center;
}
#hex {
display: block;
color: white;
font-size: 40px;
text-transform: uppercase;
margin: 15px;
letter-spacing: 0.1em;
}
.color button {
background: none;
outline: none;
color: white;
border: 2px solid white;
cursor: pointer;
font-size: 22px;
border-radius: 5px;
box-shadow: 5px 6px 30px 5px #fff;
width: 200px;
}
body.mainpage3 {
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(221, 106, 95, 0.81));
margin: 0;
padding: 2em 2em 4em;
font-family: Lato;
font-size: 16.5px;
line-height: 24px;
float;
align-content: flex-start;
display: block;
}
input[type=button] {
width: 8%;
border: none;
padding: 8px 8px;
cursor: pointer;
color: palevioletred;
}
.image1 {
position: relative;
right: -400px;
bottom: 600px;
animation: shake 0.9s;
animation-iteration-count: infinite;
}
.image2 {
position: relative;
right: -100px;
bottom: 200px;
animation: shake 0.9s;
animation-iteration-count: infinite;
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
body.mainpage4 {
margin: 0;
padding: 0;
background-color: darkseagreen;
}
.container1 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container1 span {
text-transform: uppercase;
display: block;
}
.Words1 {
color: forestgreen;
font-family: monospace;
font-size: 60px;
font-weight: 700;
letter-spacing: 6px;
margin-bottom: 4px;
position: relative;
}
.Words2 {
color: red;
font-family: cursive;
font-size: 40px;
font-weight: 750;
letter-spacing: 2px;
animation: blinkingText 1s linear infinite;
}
#keyframes blinkingText {
0% {
color: #f00;
}
49% {
color: transparent;
}
50% {
color: transparent;
}
99% {
color: transparent;
}
100% {
color: #f00;
}
}
.image {
background-size: cover;
width: 100%;
height: 1000px;
position: relative;
overflow: hidden;
}
.snow1 {
background: url(https://taniaswebpages.com/snow.png);
background-repeat: repeat;
width: 100%;
height: 2000px;
position: absolute;
top: 0;
left: 0;
animation: snowfall 3s infinite linear;
}
.snow2 {
background: url(snow.png);
background-repeat: repeat;
width: 100%;
height: 2000px;
position: absolute;
top: 0;
left: 0;
animation: snowfall 8s infinite linear;
}
#keyframes snowfall {
0% {
background-position: 0px 0px
}
100% {
background-position: 100px 650px
}
}
#keyframes snowfallSecond {
0% {
background-position: 0px -100px
}
100% {
background-position: 0px 650px
}
}
<!DOCTYPE html>
<html>
<head>
<link href="taniaWebsite2.css" type=text/css rel=Stylesheet>
</head>
<body class="mainpage4">
<div class="container1">
<span class="Words1">Merry Christmas</span>
<span class="Words2"> and Happy Holidays!</span>
</div>
<div class="image">
<div class="snow1"></div>
<div class="snow2"></div>
</div>
</body>
</html>

Try changing
<link href="taniaWebsite2.css" type=text/css rel=Stylesheet>
to
<link href="taniaWebsite2.css" type="text/css" rel="stylesheet">
With quotes around the attribute values and all lowercase.

My progress bar colors are not working in Firefox

So I have built out an interactive progress bar and everything works fine in Google Chrome and it even looks fine in Safari (surprisingly) without Safari vendor prefixes. However, the progress bar color goes back to the default blue color in Firefox. I've tried using vendor prefixes and it still changes back to blue. I'm kind of confused on what route I should take now. I have heard of but never used feature queries, not sure if this is an appropriate time to use them or what. The progress bar should be red until it gets to 100% then change to green. This is what I have so far:
(function() {
var button, heading, initialValue, progressbar;
button = document.getElementById('btn');
progressbar = document.getElementById('progress-bar');
heading = document.getElementById('visual-progress');
initialValue = 'Quiz Progress';
button.addEventListener('click', function() {
var myValue;
if (progressbar.value >= 100) {
progressbar.value = 100;
} else {
progressbar.value += 25;
}
if (progressbar.value === 100) {
progressbar.classList.add('progress-100');
}
myValue = initialValue + ' ' + progressbar.value;
document.getElementById('visual-progress').innerHTML = myValue + '%';
return button.classList.add('button-active');
});
}).call(this);
#import url("https://fonts.googleapis.com/css?family=Playfair+Display");
nav {
background: black;
height: 80px;
width: 100%;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 10px;
}
.progress-container {
padding: 10px 20px;
margin-top: 3em;
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 20px;
}
progress::-webkit-progress-bar {
background-color: #ccc;
width: 100%;
}
progress::-moz-progress-bar {
background-color: #ccc;
width: 100%;
}
progress::-webkit-progress-value {
background-color: #D22128 !important;
-webkit-transition: all .7s;
transition: all .7s;
}
progress::-moz-progress-value {
background-color: #D22128 !important;
-webkit-transition: all .7s;
transition: all .7s;
}
.progress-100::-webkit-progress-value {
background-color: forestgreen !important;
-webkit-transition: all .5s;
transition: all .5s;
}
.progress-100::-moz-progress-value {
background-color: forestgreen !important;
-webkit-transition: all .5s;
transition: all .5s;
}
button {
margin-top: 2em;
background: transparent;
color: black;
border: 1px solid black;
padding: .7em 3em;
}
.button-active {
-webkit-transition: all .2s;
transition: all .2s;
background: black;
color: white;
}
.card-container {
max-width: 450px;
margin: 0 auto;
}
.success-message {
font-family: 'Playfair Display', serif;
text-align: center;
padding-bottom: 2em;
-webkit-animation: slideUp .5s;
animation: slideUp .5s;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 6px 13px rgba(0, 0, 0, 0.22);
padding: 20px;
margin-top: 3em;
min-height: 150px;
}
.success-paragraph {
font-size: 14px;
}
#-webkit-keyframes slideUp {
from {
-webkit-transform: translateY(500px);
transform: translateY(500px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes slideUp {
from {
-webkit-transform: translateY(500px);
transform: translateY(500px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
<body>
<nav></nav>
<div class='container'>
<div class='progress-container'>
<h1 class='ut-margin-v-sm' id='visual-progress'>Quiz Progress</h1>
<progress id='progress-bar' max='100' value='0'></progress>
<button id='btn'>Next</button>
</div>
</div>
<div class='card-container'>
<div id='output'></div>
</div>
</body>

Firefox doesn't seem to have the ::progress-value pseudo-element implemented.
For this browser, you will directly target the parent ::progress-bar.
(function() {
var button, heading, initialValue, progressbar;
button = document.getElementById('btn');
progressbar = document.getElementById('progress-bar');
heading = document.getElementById('visual-progress');
initialValue = 'Quiz Progress';
button.addEventListener('click', function() {
var myValue;
if (progressbar.value >= 100) {
progressbar.value = 100;
} else {
progressbar.value += 25;
}
if (progressbar.value === 100) {
progressbar.classList.add('progress-100');
}
myValue = initialValue + ' ' + progressbar.value;
document.getElementById('visual-progress').innerHTML = myValue + '%';
return button.classList.add('button-active');
});
}).call(this);
#import url("https://fonts.googleapis.com/css?family=Playfair+Display");
nav {
background: black;
height: 80px;
width: 100%;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 10px;
}
.progress-container {
padding: 10px 20px;
margin-top: 3em;
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 20px;
}
progress::-webkit-progress-bar {
background-color: #ccc;
width: 100%;
}
progress{ /* for FF target directly the element */
background-color: #ccc;
width: 100%;
}
progress::-webkit-progress-value {
background-color: #D22128 !important;
-webkit-transition: all .7s;
transition: all .7s;
}
progress::-moz-progress-bar { /* for FF ::progress-bar is the value bar */
background-color: #D22128 !important;
transition: all .7s;
}
.progress-100::-webkit-progress-value {
background-color: forestgreen !important;
-webkit-transition: all .5s;
transition: all .5s;
}
.progress-100::-moz-progress-bar {
background-color: forestgreen !important;
transition: all .5s;
}
button {
margin-top: 2em;
background: transparent;
color: black;
border: 1px solid black;
padding: .7em 3em;
}
.button-active {
-webkit-transition: all .2s;
transition: all .2s;
background: black;
color: white;
}
.card-container {
max-width: 450px;
margin: 0 auto;
}
.success-message {
font-family: 'Playfair Display', serif;
text-align: center;
padding-bottom: 2em;
-webkit-animation: slideUp .5s;
animation: slideUp .5s;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 6px 13px rgba(0, 0, 0, 0.22);
padding: 20px;
margin-top: 3em;
min-height: 150px;
}
.success-paragraph {
font-size: 14px;
}
#-webkit-keyframes slideUp {
from {
-webkit-transform: translateY(500px);
transform: translateY(500px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes slideUp {
from {
-webkit-transform: translateY(500px);
transform: translateY(500px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
<body>
<nav></nav>
<div class='container'>
<div class='progress-container'>
<h1 class='ut-margin-v-sm' id='visual-progress'>Quiz Progress</h1>
<progress id='progress-bar' max='100' value='0'></progress>
<button id='btn'>Next</button>
</div>
</div>
<div class='card-container'>
<div id='output'></div>
</div>
</body>

How to Add Html Content To Popup Slider

i am using Magiczoomplus gallery plugin to show image slider in bigger size as popup window. it works great. Now the problem is i want to add html content to popup window. How can i do for this?
Here is Code:
figure.mz-figure {
overflow: hidden;
margin: 0 !important;
-webkit-perspective: 300px;
perspective: 300px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.MagicZoom img,
.mz-figure img {
border: 0 !important;
margin: 0 !important;
outline: 0 !important;
padding: 0 !important;
}
.MagicZoom > img,
.mz-figure > img {
width: 100%;
height: auto;
}
.ie8-magic .MagicZoom > img,
.ie8-magic .mz-figure > img {
width: 100%;
max-width: none !important;
}
.mz-figure.mz-no-zoom.mz-no-expand,
.mz-expand .mz-figure.mz-no-zoom {
cursor: pointer;
}
.mz-figure.mz-active,
.mz-expand {
-ms-touch-action: none;
touch-action: none;
}
.mz-lens,
.mz-zoom-window {
position: absolute !important;
overflow: hidden !important;
pointer-events: none !important;
}
.mz-lens img,
.mz-zoom-window img {
position: absolute !important;
max-width: none !important;
max-height: none !important;
}
.mz-lens img {
-webkit-transition: none !important;
transition: none !important;
}
.mz-zoom-window {
z-index: 2000000000;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.mz-zoom-window.mz-magnifier {
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
-webkit-mask-clip: content;
cursor:pointer;
}
.mz-figure.mz-active .mz-zoom-window.mz-magnifier {
pointer-events: auto !important;
cursor: pointer !important;
}
.mz-zoom-window.mz-magnifier.mz-expanded {
z-index: 2147483647;
}
.mz-zoom-window img {
width: auto;
height: auto;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto !important;
-webkit-transition: none;
transition: none;
-webkit-transform-origin: 50% 50% !important;
-ms-transform-origin: 50% 50% !important;
transform-origin: 50% 50% !important;
}
.mz-zoom-window.mz-preview img {
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
width: 100% !important;
height: auto !important;
-webkit-transform: none !important;
transform: none !important;
}
.lt-ie9-magic .mz-zoom-window img {
margin: 0 !important;
}
.mz-expand-controls {
z-index: 2147483647;
}
.mz-fade {
-webkit-transition: opacity .25s;
transition: opacity .25s;
}
.mz-hidden {
opacity: 0;
}
.mz-visible {
opacity: 1;
}
.mobile-magic .mz-expand .mz-expand-bg {
-webkit-transform-style: flat !important;
transform-style: flat !important;
}
.mobile-magic .mz-expand .mz-image-stage > figure .mz-caption {
display: none !important;
}
.mobile-magic .mz-expand-controls.mz-fade {
transition: none !important;
}
.mobile-magic .mz-expand > .mz-zoom-window {
top: 0 !important;
left: 0 !important;
}
.mz-expanded-view-open,
.mz-expanded-view-open body {
overflow: hidden !important;
}
.mz-expanded-view-open body { height: auto !important; }
/**
* Main figure
*/
.mz-figure.mz-active {
display:none !important;
}
.mz-figure.mz-no-zoom,
.mz-figure.mz-click-zoom,
.mz-figure.mz-active {
cursor: pointer;
}
.mz-figure.mz-active.mz-magnifier-zoom.mz-hover-zoom.mz-no-expand {
cursor: pointer;
}
.mz-figure.mz-magnifier-zoom.mz-active {
overflow: visible !important;
}
.mz-zoom-window {
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
}
.mz-zoom-window.mz-magnifier {
border-radius: 100%;
border: 0;
background: rgba(255,255,255,.3);
}
.mz-zoom-window.mz-magnifier:before {
content: "";
display: block;
position: absolute;
top: 0;bottom: 0;
left: 0; right: 0;
border-radius: 100%;
border: 1px solid rgba(170,170,170,0.7);
box-shadow: inset 0 0 20px 1px rgba(0,0,0,.3);
background: transparent;
z-index: 1;
}
.mz-zoom-window.mz-magnifier.mz-square,
.mz-zoom-window.mz-magnifier.mz-square:before {
border-radius: 0 !important;
}
.lt-ie9-magic .mz-zoom-window {
border: 1px solid #e5e5e5;
}
.mz-zoom-window.mz-inner {
border: none;
box-shadow: none;
}
/* Caption in zoom window */
.mz-zoom-window .mz-caption {
background: #777;
color: #fff;
font-size: 10pt;
opacity: 0.8;
position: absolute;
top: 0;
z-index: 150;
padding: 3px;
width: 100%;
line-height: normal !important;
text-align: center !important;
}
.lt-ie9-magic .mz-zoom-window .mz-caption {
filter: alpha(opacity=80);
}
.mz-zoom-window.caption-bottom .mz-caption {
top: auto;
bottom: 0;
}
.mz-zoom-window.mz-expanded > .mz-caption {
display: none;
}
/* Zoom window animations */
.mz-zoom-window.mz-deactivating,
.mz-zoom-window.mz-activating {
-webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), -webkit-transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.mz-zoom-window.mz-deactivating {
-webkit-transition-duration: .25s, .25s, .25s;
transition-duration: .25s, .25s, .25s;
}
.mz-zoom-window.mz-p-right,
.mz-zoom-window.mz-p-left,
.mz-zoom-window.mz-p-top,
.mz-zoom-window.mz-p-bottom {
opacity: 0;
z-index: -100;
}
.mz-zoom-window.mz-p-right {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
.mz-zoom-window.mz-p-left {
-webkit-transform: translate3d(20%, 0, 0);
transform: translate3d(20%, 0, 0);
}
.mz-zoom-window.mz-p-top {
-webkit-transform: translate3d(0, 20%, 0);
transform: translate3d(0, 20%, 0);
}
.mz-zoom-window.mz-p-bottom {
-webkit-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 0);
}
/* Inner mode animation */
.mz-zoom-window > img {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mz-zoom-window.mz-p-inner.mz-deactivating > img,
.mz-zoom-window.mz-p-inner.mz-activating > img {
-webkit-transition: -webkit-transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
/* Magnifier mode animation */
.mz-zoom-window.mz-p-magnifier {
-webkit-transform: scale(.1);
transform: scale(.1);
}
/* Preview mode animation */
.mz-zoom-window.mz-preview.mz-deactivating,
.mz-zoom-window.mz-preview.mz-activating,
.mz-zoom-window.mz-custom.mz-deactivating,
.mz-zoom-window.mz-custom.mz-activating {
-webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.mz-zoom-window.mz-preview.mz-deactivating,
.mz-zoom-window.mz-custom.mz-deactivating {
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.mz-zoom-window.mz-p-preview,
.mz-zoom-window.mz-p-custom {
opacity: 0;
}
/**
* Hint & Loading
*/
.mz-hint,
.mz-loading {
color: #eee;
background: red;
font: normal 12px/1.2em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
direction: ltr;
display: inline-block;
margin: 0;
position: absolute;
z-index: 1000;
pointer-events: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.mobile-magic .mz-hint-message:before {
display: none;
}
.mz-hint-hidden {
opacity: 0;
z-index: -1;
-webkit-transition-delay: .6s;
transition-delay: .6s;
}
/* Hint in the expanded view on mobile */
.mz-expand .mz-hint {
font-size: 18px;
line-height: 1.1em;
top: 50%;
bottom: auto;
margin: 0;
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.mz-expand .mz-hint-message {
padding: 1.1em;
}
.mz-expand .mz-hint-message:before {
display: none;
}
.mz-expand .mz-hint-hidden {
-webkit-transition-delay: 1s;
transition-delay: 1s;
opacity: 0;
}
/* Loading indicator */
.mz-loading {
font-size: 0;
border-radius: 100%;
opacity: 0;
padding: 0;
width: 36px;
height: 36px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.mz-loading:after {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
width: 24px;
height: 24px;
margin: auto;
text-indent: -9999em;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 1);
border-top-color: transparent;
box-sizing: border-box;
}
.mz-loading.shown {
opacity: 1;
z-index: 1;
-webkit-transition: opacity 0s;
transition: opacity 0s;
}
.mz-loading.shown:after {
-webkit-animation: spin-loading .9s infinite linear;
animation: spin-loading .9s infinite linear;
}
#-webkit-keyframes spin-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.lt-ie10-magic .mz-loading {
font-size: 12px;
padding: .7em 1.1em;
width: auto;
height: auto;
}
.lt-ie10-magic .mz-loading:after {
content: 'Loading...';
text-indent: 0;
border: none;
position: relative;
}
.lt-ie9-magic .mz-loading {
filter: alpha(opacity=0);
right: 0;
left: 0;
width: 126px;
margin: auto;
}
.lt-ie9-magic .mz-hint-message,
.lt-ie9-magic .mz-loading.shown {
background: transparent !important;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#7c31333D', EndColorStr='#7c31333D');
}
.lt-ie9-magic .mz-hint-hidden {
filter: alpha(opacity=0);
}
/**
* Expanded view
*/
.mz-expand,
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg > img,
.mz-expand .mz-expand-bg > svg,
.mz-expand .mz-expand-stage,
.mz-expand .mz-expand-stage .mz-image-stage {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg > img,
.mz-expand .mz-expand-bg > svg {
width: auto !important;
height: auto !important;
}
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg > svg {
min-width: 100% !important;
min-height: 100% !important;
}
.mz-expand {
background-color: rgba(0, 0, 0, 1);
text-align: center;
vertical-align: middle;
display: block;
overflow: hidden;
z-index: 2100000000;
position: fixed;
width: auto;
height: auto;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-ms-overflow-style: none;
}
/* Expanded view background */
.mz-expand .mz-expand-bg {
display: inline-block;
vertical-align: middle;
margin: auto;
z-index: -100;
max-width: none !important;
max-height: none !important;
-webkit-transform: translate3d(0,0,0) scale(10) rotate(0.01deg);
-ms-transform: translate(0,0) scale(10,10) rotate(0.01deg);
transform: translate3d(0,0,0) scale(10) rotate(0.01deg);
-webkit-perspective: 600px;
perspective: 600px;
background-repeat: no-repeat;
background-size: cover;
}
.mz-expand .mz-expand-bg > img {
margin: auto;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur\'><feGaussianBlur stdDeviation=\'80\' in=\'SourceGraphic\'></feGaussianBlur></filter></svg>#blur");
-webkit-filter: blur(20px) brightness(60%);
filter: blur(20px) brightness(60%);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mz-expand .mz-expand-bg > svg {
margin: auto;
opacity: .6;
}
[data-magic-ua=edge] .mz-expand .mz-expand-bg,
.lt-ie10-magic .mz-expand .mz-expand-bg {
display: none !important;
}
.lt-ie9-magic .mz-expand {
background: #1f1f1f;
}
[data-magic-ua=edge] .mz-expand {
background-color: rgba(31, 31, 31, .96);
}
/** Plain backgrounds: dark-bg, white-bg **/
.mz-expand.plain-bg .mz-expand-bg,
.mz-expand.dark-bg .mz-expand-bg,
.mz-expand.white-bg .mz-expand-bg {
display: none !important;
}
.mz-expand.dark-bg {
background-color: #1f1f1f;
background-color: rgba(31, 31, 31, .96);
}
.mz-expand.white-bg {
background-color: #fff;
}
/* Expanded view stage */
.mz-expand .mz-expand-stage {
z-index: 2100000000;
padding: 0;
}
.mz-expand .mz-expand-stage .mz-image-stage {
z-index: 50;
left: 120px;
right: 120px;
padding: 20px 0 40px 0;
margin: 0;
text-align: center;
vertical-align: middle;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mz-expand .mz-expand-stage.with-thumbs .mz-image-stage {
padding-bottom: 120px;
}
.mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage {
padding: 0 !important;
left: 0;
right: 0;
}
.mz-expand .mz-image-stage > figure:before,
.mz-expand .mz-image-stage:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
font-size: 0;
line-height: 100%;
width: 0;
}
.mz-expand .mz-image-stage > figure {
width: 100%;
max-width: 100%;
max-height: 100%;
padding: 0;
margin: 0;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 100%;
position: relative;
}
.mz-expand .mz-figure {
overflow: visible;
max-width: 100% !important;
}
.mz-expand .mz-figure > img {
max-width: 100%;
width: auto;
height: auto;
}
.mz-expand .mz-zoom-in .mz-image-stage > figure,
.mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-activating,
.mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-active {
width: 100%;
height: 100%;
}
.mz-expand .mz-figure {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
/* When inner zoom is always shown */
.mz-expand .mz-expand-stage.mz-zoom-in.mz-always-zoom .mz-image-stage > figure > figure > img {
z-index: 1;
position: absolute !important;
top: -5000px !important;
bottom: -5000px !important;
left: -5000px !important;
right: -5000px !important;
margin: auto !important;
}
.lt-ie10-magic .mz-zoom-window.mz-expanded img { filter: alpha(opacity=100); }
.lt-ie10-magic .mz-expand .mz-figure.mz-magnifier-zoom {
overflow: hidden;
filter: alpha(opacity=100);
}
/* Caption in expanded view */
.mz-expand .mz-caption {
color: #fff;
text-shadow: 0px 0px 46px #000;
padding: 10px 4px;
font: normal 10pt/1em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif;
text-align: center;
width: 100%;
position: absolute;
left: 0;
opacity: 0;
}
.mz-expand .mz-caption.mz-show {
-webkit-transition: opacity 0.15s ease-out;
transition: opacity 0.15s ease-out;
opacity: 1;
}
.mz-expand .mz-caption a {
color: inherit;
cursor: pointer;
}
.mz-expand.white-bg .mz-caption {
color: #555;
text-shadow: none;
}
.lt-ie9-magic .mz-expand .mz-caption {
top: 100%;
}
.mz-expand .mz-zoom-window {
box-shadow: none;
background: transparent;
}
.lt-ie9-magic .mz-expand .mz-zoom-window {
border: 0;
}
/* Expanded view on mobile */
.mobile-magic .mz-expand-stage .mz-expand-thumbnails,
.mobile-magic .mz-expand-stage .mz-image-stage {
left: 0px;
right: 0px;
}
.mobile-magic .mz-expand .mz-expand-stage.with-thumbs {
bottom: 0px;
}
.mobile-magic .mz-expand-stage .mz-image-stage {
padding: 0;
}
.mobile-magic .mz-expand .mz-expand-stage.with-thumbs .mz-image-stage {
padding: 5px 0 60px;
}
.mobile-magic .mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage {
padding-top: 0;
}
.mobile-magic .mz-expand .mz-expand-thumbnails {
padding: 0;
height: 60px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://cms.seller.ir/js/magiczoomplus.js"></script>
</head>
<body>
<ul>
<li><!-- Begin magiczoomplus -->
<a id="MagicZoomPlusImage177" class="MagicZoom" title="This is popup Window" data-zoom-image="http://jj-bg.info/gallery/album_1/min/test.png" data-options="zoomPosition:left;rightClick:true;cssClass:white-bg;" >
<img itemprop="image" src="http://jj-bg.info/gallery/album_1/min/test.png" srcset="images/pic5.png 2x" />
</a>
</li>
</ul>
</body>
</html>

Personally I don't see the point of using text in this plugin, but I guess you have ideas about it. I see the plugin has hint settings, which shows text - you can try duplicate CSS and JavaScript from this setting.

Content "slides" in under fixed header on page load broken on Safari

I'm using a fixed header on a site to keep the logo & menu elements visible when scrolling the content elements. There appears to be a javascript that creates a "slide" or transistion down to the top of the content from the top/under the header. I find this annoying but can live with it.
My problem is that on iPad devices (works fine on iPhone) using Safari that the content never scrolls to the top of the content area. If you press and drag down on the screen you can see the content is nested under the header. Release the screen and it slides back up under the header.
All other browsers/OS work fine.
I incorporated some CSS that was supposed to handle all mobile devices and configured the elements below the header with padding/margin tags to give it some space. This seemed to work great except on some iPad mobile devices we get a A problem occurred with this webpage so it was reloaded. We remove this CSS and it loads fine.
So that nixes CSS as a fix so it leaves me with the obnoxious slide effect I'm thinking?
What is this slide content element in the first place and how do I make it responsive on all devices including Safari/iPad or how do I remove it or use CSS to correctly start at the top of the content?
Test site: http://www.goroyalshell.net/
UPDATED CSS isolated code that when inserted into the CSS page causes the error:
.property-item.featured:hover .property-item.featured.title-above-image .property-title::after {
background-color: transparent;
}
.property-item .property-thumbnail {
position: relative;
overflow: hidden;
}
.property-item a {
color: inherit;
}
.property-item img {
max-width: none;
width: 100%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#media (min-width: 768px) {
.property-item img {
width: -webkit-calc(120%);
width: calc(120%);
-webkit-filter: grayscale(0%);
filter: none;
-webkit-transform: translate3d(-10px, 0, 0);
-moz-transform: translate3d(-10px, 0, 0);
-ms-transform: translate3d(-10px, 0, 0);
-o-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
}
.property-item figcaption {
top: 0;
height: 100%;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#media (min-width: 768px) {
.property-item figcaption {
position: absolute;
text-align: right;
}
}
#media (min-width: 768px) {
.property-item:hover img {
filter: gray;
-webkit-filter: grayscale(100%);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.property-item:hover.title-over-image .property-title,
.property-item:hover.title-over-image .tag,
.property-item:hover.title-above-image .tag-right {
opacity: 0;
}
}
.property-item:hover .property-excerpt {
opacity: 1;
}
.property-item:hover .property-excerpt::after {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.property-item:hover .arrow-right {
opacity: 0;
}
.property-item .property-title {
overflow: hidden;
position: relative;
z-index: 0;
padding: 10px 15px;
text-align: center;
background-color: rgba(255, 255, 255, 0.9);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#media (min-width: 768px) {
.property-item .property-title {
text-align: right;
}
}
.property-item .title {
margin: 0 0 0.25em !important;
font-size: 1.4em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.property-item .address {
opacity: 0.6;
margin: 0 !important;
font-size: 1.1em;
text-transform: none;
}
.property-item .subtitle {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #999999;
}
.property-item .property-excerpt {
display: none;
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 15px 15px;
opacity: 0;
line-height: 1.7;
text-align: left;
background-color: rgba(255, 255, 255, 0.9);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#media (min-width: 768px) {
.property-item .property-excerpt {
display: block;
}
}
.property-item .property-excerpt span {
font-size: 1.4em;
color: #666666;
text-transform: uppercase;
}
.property-item .property-excerpt::after {
position: absolute;
opacity: 0.5;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: #43becc;
content: '';
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.property-item .property-excerpt p {
margin-top: 0.5em;
font-size: 1.1em;
color: #999999;
}
.property-item .property-content {
text-align: center;
background-color: #fff;
}
.property-item .property-content .property-meta {
min-height: 85px;
}
.property-item .property-content .property-meta > div {
width: 50%;
/*
#media(min-width: 1200px) {
width: 25%;
}
*/
}
.property-item .property-price {
overflow: hidden;
padding: 0 15px;
line-height: 50px;
color: #666666;
text-align: left;
border-top: 1px solid #f6f6f6;
}
#media (min-width: 768px) {
.property-item .property-price {
line-height: 60px;
}
}
#media (min-width: 992px) {
.property-item .property-price {
font-size: 1.2em;
}
}
.property-item .property-price span {
font-weight: 300;
}
.property-item .property-price i {
opacity: 0.25;
line-height: inherit;
margin-right: 10px;
display:inline-block !important;
}
.property-item .property-price i:hover {
opacity: 0.75;
cursor: pointer;
color:#aaa !important;
}
.property-item .property-price .property-status {
display: inline-block;
display: none;
float: left;
font-size: 0.8em;
text-transform: uppercase;
}
.property-item .property-price .price-tag {
float: right;
color: #999999;
}
.property-meta {
padding: 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.9em;
line-height: 2;
color: #999999;
text-align: center;
}
#media (min-width: 768px) {
.property-meta {
text-align: left;
}
}
.property-meta a {
color: #999999;
}
.property-meta a:hover {
color: #666666;
}
.property-meta a:hover .meta-data {
cursor: pointer;
}
.property-meta .meta-title {
display: inline-block;
width: 20px;
font-weight: 700;
}
.property-meta > div {
float: left;
}
.property-meta .meta-data {
display: inline-block;
}
.property-meta .meta-data:hover {
cursor: default;
}
.add-to-favorites:hover {
cursor: pointer;
}
#compare-properties-popup {
display: none;
margin: 30px 0;
padding: 30px 0;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
}
#compare-properties-thumbnails ul {
margin-bottom: 0;
}
#compare-properties-thumbnails li {
float: left;
margin-bottom: 30px;
}
#property-comparison-table .comparison-header {
display: inline-block;
width: 20%;
vertical-align: top;
}
#property-comparison-table .comparison-data {
position: relative;
display: inline-block;
width: 39%;
margin-left: 1%;
vertical-align: top;
}
#property-comparison-table .comparison-data a {
color: inherit;
}
#property-comparison-table .comparison-data.columns-3 {
width: 25.66%;
}
#property-comparison-table .comparison-data.columns-4 {
width: 19%;
}
#property-comparison-table .comparison-data .remove-property-from-comparison {
opacity: 0.75;
position: absolute;
top: 0;
right: 0;
height: 25px;
width: 25px;
line-height: 25px;
font-weight: 700;
color: #fff;
text-align: center;
background-color: rgba(0, 0, 0, 0.25);
}
#property-comparison-table .comparison-data .remove-property-from-comparison:hover {
opacity: 1;
cursor: pointer;
}
#property-comparison-table .comparison-data .remove-property-from-comparison::before {
content: "";
}
#property-comparison-table .comparison-main .property-title {
margin-bottom: 0;
}
#property-comparison-table .comparison-main .property-address {
font-size: 0.9em;
color: #999999;
}
#property-comparison-table .comparison-attributes {
margin-top: 30px;
}
#property-comparison-table .comparison-attributes .comparison-row {
font-size: 0.9em;
line-height: 2.5;
border-bottom: 1px solid #eeeeee;
}
#property-comparison-table .comparison-attributes .comparison-header {
font-weight: 700;
}

This is a validated CSS-stylesheet. Hope it fixes this error for you:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/**iPad in landscape**/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** iPad in portrait **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** iPad 3 & 4 Media Queries
If you're looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add #2x graphics, or other features for the tablet's Retina display, use the following media queries.
Retina iPad in portrait & landscape **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content, #col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12, .header-margin {
margin-top: 300px;
}
}
/** Retina iPad in landscape **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** Retina iPad in portrait **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt, {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content, #col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12, .header-margin {
margin-top: 300px;
}
}
/** iPad 1 & 2 Media Queries
If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm in your responsive design!
iPad 1 & 2 in portrait & landscape **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** iPad 1 & 2 in landscape **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** iPad 1 & 2 in portrait **/
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}

Okay, first of all you should get rid of every single important rule in your CSS. It is bad to use and is most often not neccessary!
At first sight you should check your CSS for errors. I see a trailing colon after an id and before a bracket
#searchIt, {
/* --- */
}
At https://validator.w3.org/#validate_by_input I get 11 errors and 3 warnings running your code through.
Maybe create a minimal Fiddle, so we can explore your code easier. But I think resolving the errors and warning should do the trick.