We Keep Coding

How to have a menu slide down on mobile and slide to the right on desktop?

I am building a custom menu for a website and am trying to have the menu slide out on desktop and slide down on mobile. However, when I am testing it on my phone it is causing the menu to come down from the top right and should be coming down vertically. I am very stuck and lost and would love any help I can get on this. Here is a link to my code: https://codepen.io/caleb-case/pen/yLLmVZa
window.onclick = function(event){if(event.target == document.getElementById('outerNav')){closeNav();}};
function openNav() {
document.getElementById("jrc-sidenav").style.display = "block";
if (window.matchMedia("only screen and (max-width: 550px)").matches) {
document.getElementById("jrc-sidenav").classList.add("slide-in-blurred-top");
document.getElementById("jrc-sidenav").classList.remove("slide-out-blurred-top");
document.getElementById("jrc-sidenav").classList.remove("jrc-slide-in-blurred-right");
} else {
document.getElementById("jrc-sidenav").classList.add("jrc-slide-in-blurred-right");
document.getElementById("jrc-sidenav").classList.remove("jrc-slide-out-blurred-right");
document.getElementById("jrc-sidenav").classList.remove("slide-out-blurred-top");
}
document.getElementById("outerNav").style.position = "fixed";
document.getElementById("outerNav").style.width = "100%";
document.getElementById("et-main-area").style.backgroundColor = "rgba(0,0,0,0.4)";
document.getElementById("hamburger").style.display = "none";
}
function closeNav() {
if (window.matchMedia("only screen and (max-width: 550px)").matches) {
document.getElementById("jrc-sidenav").classList.add("slide-out-blurred-top");
document.getElementById("jrc-sidenav").classList.remove("slide-in-blurred-top");
document.getElementById("jrc-sidenav").classList.remove("jrc-slide-out-blurred-right");
} else {
document.getElementById("jrc-sidenav").classList.add("jrc-slide-out-blurred-right");
document.getElementById("jrc-sidenav").classList.remove("jrc-slide-in-blurred-right");
document.getElementById("jrc-sidenav").classList.remove("slide-out-blurred-top");
}
document.getElementById("et-main-area").style.backgroundColor = "#fff";
document.getElementById("outerNav").style.width = "0%";
setTimeout(function(){
document.getElementById("hamburger").style.display = "block";
},250);
}
/*Menu Styles */
body {
transition: background-color .5s;
font-family: 'Gotham-Book',Helvetica,Arial,Lucida,sans-serif;
}
#jrc-sidenav {
display: none;
}
#media only screen and (min-width: 576px) {
#jrc-sidenav {
width: 250px;
}
}
.outerNav {
display: block;
position: fixed;
right: 0px;
top: 0px;
width: 0%;
height: 100%;
overflow: hidden;
background-color: transparent;
transition: 0.5s;
}
.sidenav {
height: 100%;
width: 100%;
position: fixed;
z-index: 100;
top: 0px;
right: 0px;
background-color: #fff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 45px;
transform: translate3d(100%,0,0);
}
.sidenav a {
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 16px;
color: #474747;
display: block;
transition: 0.3s;
text-align: left;
font-weight: 800;
cursor: pointer;
}
.sidenav a:hover {
color: #949494;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 5px;
font-size: 30px;
margin-left: 50px;
}
#hamburger {
font-size: 25px;
cursor: pointer;
color:#00a3e0;
position: relative;;
top: 0px;
right: 25px;
transition: 0.3s;
z-index: 101;
position: fixed;
}
#hamburger:hover {
color: #00a3e0b0;
}
.divider {
width: 215px;
border-top: 2px solid #474747;
margin-top: 15px;
margin-bottom: 15px;
transition: 0.3s;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.icon {
color: #00a3e0;
margin-right: 5px;
}
.side-links {
padding: 8px 8px 8px 20px;
}
#media only screen and (max-width: 600px) {
#hamburger {
font-size: 30px;
}
}
#media only screen and (max-width: 450px) {
.divider {
width: 90%;
transition: 0.7s !important;
}
.sidenav {
padding-top: 65px;
box-shadow: none !important;
transition: 0.7s !important;
overflow-y: auto !important;
}
.sidenav a {
padding: 20px 20px 20px 21px;
font-size: 20px;
transition: 0.7s !important;
}
}
/*Animation Menu Styles */
#keyframes jrc-slide-in-blurred-right {
0% {
-webkit-transform: translateX(1000px);
-o-transform: translateX(1000px);
transform: translateX(1000px);
-webkit-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
#keyframes jrc-slide-out-blurred-right {
0% {
-webkit-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(1000px);
-o-transform: translateX(1000px);
transform: translateX(1000px);
-webkit-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
}
.jrc-slide-in-blurred-right {
-webkit-animation: jrc-slide-in-blurred-right .5s cubic-bezier(.23,1,.32,1) both;
-o-animation: jrc-slide-in-blurred-right .5s cubic-bezier(.23,1,.32,1) both;
animation: jrc-slide-in-blurred-right .5s cubic-bezier(.23,1,.32,1) both;
}
.jrc-slide-out-blurred-right {
-webkit-animation: jrc-slide-out-blurred-right .45s cubic-bezier(.755,.05,.855,.06) both;
-o-animation: jrc-slide-out-blurred-right .45s cubic-bezier(.755,.05,.855,.06) both;
animation: jrc-slide-out-blurred-right .45s cubic-bezier(.755,.05,.855,.06) both;
}
#keyframes slide-in-blurred-top {
0% {
-webkit-transform: translateY(-1000px);
-o-transform: translateY(-1000px);
transform: translateY(-1000px);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
#keyframes slide-out-blurred-top {
0% {
-webkit-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-1000px);
-o-transform: translateY(-1000px);
transform: translateY(-1000px);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
}
.slide-in-blurred-top {
-webkit-animation: slide-in-blurred-top .5s cubic-bezier(.23,1,.32,1) both;
-o-animation: slide-in-blurred-top .5s cubic-bezier(.23,1,.32,1) both;
animation: slide-in-blurred-top .5s cubic-bezier(.23,1,.32,1) both;
}
.slide-out-blurred-top {
-webkit-animation: slide-out-blurred-top .45s cubic-bezier(.755,.05,.855,.06) both;
-o-animation: slide-out-blurred-top .45s cubic-bezier(.755,.05,.855,.06) both;
animation: slide-out-blurred-top .45s cubic-bezier(.755,.05,.855,.06) both;
}
<body id="et-main-area">
<div id="outerNav" class="outerNav">
<div id="jrc-sidenav" class="sidenav">
×
<i class="fas fa-play icon"></i>Sermons
<i class="fas fa-church icon"></i> About
<i class="fas fa-map-marker-alt icon"></i> Locations
<i class="fas fa-heart icon"></i> Give
<i class="fas fa-heart icon"></i> Events
<hr class="divider">
Get Involved
Grow Track
Life Groups
Kids & Youth
Ministries
Jobs
Blog
Contact Us
</div>
</div>
<span id ="hamburger" onclick="openNav()">☰</span>
</body>

my mega menu in safari not same as firefox and chrome.. weird css behaviour?

Safari show the overlap text... I have no idea what is happen in safari.
firefox and chrome no overlap text.
here is my screenshot:
safari:
firefox:
PLEASE USE the safari to test the result. I believe that is conflict about my css? jquery should not be a problem
//START MEGA MENU JQUERY
jQuery(document).ready(function($){
//on mobile - open submenu
$('.has-children').children('a').on('click', function(event){
//prevent default clicking on direct children of .has-children
event.preventDefault();
var selected = $(this);
selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out');
});
$('.lg-dropdown-content').menuAim({
activate: function(row) {
$(row).children().addClass('is-active').removeClass('fade-out');
if( $('.lg-dropdown-content .fade-in').length == 0 ) $(row).children('ul').addClass('fade-in');
},
deactivate: function(row) {
$(row).children().removeClass('is-active');
if( $('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row)) ) {
$('.lg-dropdown-content').find('.fade-in').removeClass('fade-in');
$(row).children('ul').addClass('fade-out')
}
},
exitMenu: function() {
$('.lg-dropdown-content').find('.is-active').removeClass('is-active');
return true;
},
});
//submenu items - go back link
$('.go-back').on('click', function(){
var selected = $(this),
visibleNav = $(this).parent('ul').parent('.has-children').parent('ul');
selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');
});
});
/* BASIC style for nav, you can ingore this part */
a:focus {
text-decoration:none;
}
a {
transition: all 0.3s ease 0s;
text-decoration:none;
}
a:hover {
color: #5ad5f4;
text-decoration: none;
}
a:active, a:hover {
outline: 0 none;
}
ul{
list-style: outside none none;
margin: 0;
padding: 0
}
.lg-dropdown-content {
background-color: #ddd;
}
/* END BASIC style for nav, you can ingore this part */
/* START MEGA MENU CSS */
.back-width {
width: 100%;
}
ul.column-two {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
.minheight2{
min-height:0px;
}
.lg-dropdown h2,
.lg-dropdown-content a,
.lg-dropdown-content ul a {
height: 50px;
line-height: 50px;
padding: 0 20px;
}
.lg-dropdown {
margin-top: 15px;
z-index: 1;
top: 0;
left: 0;
width: 100%;
background-color: #111433;
color: #ffffff;
visibility: hidden;
position: absolute;
height: auto;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
background-color: transparent;
color: #111433;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
opacity: 0;
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px);
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}
.lg-dropdown.dropdown-is-active {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity 0.3s 0s, visibility 0.3s 0s, -webkit-transform 0.3s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0.3s 0s, -moz-transform 0.3s 0s;
transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
}
.lg-dropdown-content > li{
display: inline-block;
}
.lg-dropdown-content, .lg-dropdown-content ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
padding-top: 0;
overflow: visible;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.lg-dropdown-content a {
display: block;
color: #000;
height: 50px;
line-height: 50px;
font-size: 1.5rem;
/* truncate text with ellipsis if too long */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-top-width: 1px;
border-style: solid;
border-color: #ebebeb;
border:none;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-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;
}
.lg-dropdown-content ul a {
display: block;
color: #111433;
/* truncate text with ellipsis if too long */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-top-width: 1px;
border-color: #242643;
border-style: solid;
border:none;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
}
.lg-dropdown-content.is-hidden > li > a, .lg-dropdown-content.move-out > li > a, .lg-dropdown-content ul.is-hidden > li > a, .lg-dropdown-content ul.move-out > li > a {
opacity: 1;
}
.lg-dropdown-content.is-hidden, .lg-dropdown-content ul.is-hidden {
/* push the secondary dropdown items to the right */
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.lg-dropdown-content ul.move-out > li > a{
/* push the dropdown items to the left when secondary dropdown slides in */
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
visibility: hidden;
}
.lg-dropdown-content .see-all a {
color: #5f88c3;
}
.lg-dropdown-content.move-out > li > a{
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.lg-dropdown-content .lg-menu {
top: 100%;
height: auto;
overflow: hidden;
padding-bottom: 65px;
background-color: #ffffff;
box-shadow: 0 1px 2px rgba(86, 86, 90, 0.5);
}
.lg-dropdown-content .lg-menu.is-hidden {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.lg-dropdown-content .lg-menu.fade-in {
/* animate fade in */
-webkit-animation: xs-fade-in 0.2s;
-moz-animation: xs-fade-in 0.2s;
animation: xs-fade-in 0.2s;
}
.lg-dropdown-content .lg-menu.fade-out {
/* animate fade out */
-webkit-animation: xs-fade-out 0.2s;
-moz-animation: xs-fade-out 0.2s;
animation: xs-fade-out 0.2s;
}
.lg-dropdown-content .lg-menu > .see-all {
position: absolute;
bottom: 1px;
height: 45px;
text-align: center;
}
.lg-dropdown-content .lg-menu > .see-all a {
margin: 0;
height: 100%;
line-height: 45px;
background: #ebebeb;
pointer-events: auto;
-webkit-transition: color 0.2s, background-color 0.2s;
-moz-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
}
.lg-dropdown-content .lg-menu > .see-all a:hover {
color: #ffffff;
background-color: #111433;
}
.lg-dropdown-content .lg-menu > li {
/* 3 column */
width: 33.333%;
float: left;
}
.lg-dropdown-content .lg-menu::before {
/* this is the separation line in the middle of the .lg-menu element */
position: absolute;
content: '';
top: 290px;
left: 15px;
right: 15px;
height: 1px;
width: 100%;
background-color: #ebebeb;
}
.lg-dropdown-content .lg-menu > li > a {
color: #5f88c3;
font-size: 1.6rem;
margin-bottom: 10px;
line-height: 30px;
height: 30px;
pointer-events: none;
}
.lg-dropdown-content .lg-menu > li > a::after, .lg-dropdown-content .lg-menu > li > a::before {
/* hide the arrow */
display: none;
}
.lg-dropdown-content .lg-menu.move-out > li > a {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.lg-dropdown-content .lg-menu > li {
margin: 20px 0;
border-right: 1px solid #ebebeb;
padding: 0 30px;
height: 250px;
}
.lg-dropdown-content .lg-menu > li > ul {
-webkit-transform: translate(0);
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
transform: translate(0);
position: relative;
height: auto;
}
.lg-dropdown-content .lg-menu > li > ul > .go-back {
display: none;
}
.lg-dropdown-content .lg-menu a {
line-height: 22px;
height: 20px;
font-size: 1.3rem;
padding-left: 0;
}
.lg-dropdown-content .lg-menu ul {
padding-bottom: 25px;
overflow: hidden;
height: auto;
min-height: 100%;
}
.lg-dropdown-content .lg-menu .go-back a {
padding-left: 20px;
}
.lg-dropdown-content .lg-menu .go-back a::before, .lg-dropdown-content .lg-menu .go-back a::after {
left: 0;
}
.lg-dropdown-content .lg-menu .see-all {
/*position: absolute;*/
/*bottom: 0;*/
/*left: 0;*/
width: 100%;
}
.lg-dropdown-content > .has-children > ul {
visibility: hidden;
}
.lg-dropdown-content > .has-children > ul.is-active {
/* when hover over .lg-dropdown-content items - show subnavigation */
visibility: visible;
}
.lg-dropdown-content > .has-children > .lg-menu.is-active > li > ul {
/* if .lg-menu is visible - show also subnavigation */
visibility: visible;
}
.lg-dropdown-content > .has-children > a.is-active {
/* hover effect for .lg-dropdown-content items with subnavigation */
color: #5f88c3;
}
.lg-dropdown-content > .has-children > a.is-active::before, .lg-dropdown-content > .has-children > a.is-active::after {
background: #5f88c3;
}
.has-children > a::before, .go-back a::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.has-children > a::after, .go-back a::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.has-children.root-menu > a::after {
-webkit-transform: rotate(130deg);
-moz-transform: rotate(130deg);
-ms-transform: rotate(130deg);
-o-transform: rotate(130deg);
transform: rotate(130deg);
}
.has-children > a {
padding-right: 40px;
}
.has-children > a::before, .has-children > a::after {
/* arrow goes on the right side - children navigation */
right: 20px;
-webkit-transform-origin: 9px 50%;
-moz-transform-origin: 9px 50%;
-ms-transform-origin: 9px 50%;
-o-transform-origin: 9px 50%;
transform-origin: 9px 50%;
}
.lg-dropdown-content .go-back a {
padding-left: 40px;
}
.lg-dropdown-content .go-back a::before, .lg-dropdown-content .go-back a::after {
/* arrow goes on the left side - go back button */
left: 20px;
-webkit-transform-origin: 1px 50%;
-moz-transform-origin: 1px 50%;
-ms-transform-origin: 1px 50%;
-o-transform-origin: 1px 50%;
transform-origin: 1px 50%;
}
.root-menu.has-children > a::before, .root-menu.has-children > a::after {
background: #fff;
}
.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
/* arrow icon in CSS - for element with nested unordered lists */
content: '';
position: absolute;
top: 50%;
margin-top: 1px;
display: inline-block;
height: 2px;
width: 10px;
background: #ffffff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#media only screen and (min-width: 1024px) {
.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
background: #b3b3b3;
}
}
<head>
<!-- css bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- import jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/kamens/jQuery-menu-aim/master/jquery.menu-aim.js"></script>
<!-- END import jquery -->
</head>
<!-- header start -->
<header class="header-pos navbar-fixed-top">
<div class="header-bottom-area" >
<div class="container-fluid">
<div class="inner-container">
<div class="row">
<div class="col-lg-12" style="padding:0px;">
<nav class="lg-dropdown dropdown-is-active">
<ul class="lg-dropdown-content">
<li class="has-children root-menu">
Products
<ul class="lg-menu is-hidden fade-out">
<li class="see-all">All Products</li>
<li class="has-children">Fashion
<ul class="is-hidden column-two move-out">
<li class="go-back">Products</li>
<li class="see-all">All Fashion</li>
<li class="has-children">Women Fashion
<ul class="column-two menu-level-2">
<li class="go-back back-width">Back</li>
<li class="see-all">All Women Fashion</li>
<li>Tudung</li>
<li>safari</li>
<li>safari 2</li>
<li>Jubah</li>
<li>Cheong Sam</li>
</ul>
</li>
<li>Baby Fashion</li>
<li>Man Fashion</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>

Safari is bugged in column-count rules.
Remove in class .lg-dropdown-content .lg-menu ul the min-height in % rules or define it in px.

Apply CSS animation class for many instance in one page

I try to make share button for social media with animated button in CSS. But I want some button to display in one page. For different content. But I found this didn't work for second button. If the second button is clicked, the first button that animated instead of second. My Question is how to make the CSS applied to every button in my page?
This is the fiddle :
https://jsfiddle.net/2s6w4hq7/
This is my HTML :
<title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
and this is the CSS :
/*
Using FontAwesome for icons
https://fortawesome.github.io/Font-Awesome/
*/
.share-button {
position: relative;
width: 50px;
margin: 5px;
}
.toggle {
position: relative;
width: 50px;
height: 50px;
z-index: 10;
display: block;
cursor: pointer;
color: #fff;
background-color: #3D3D3D;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 50%;
}
.toggle:hover {
background-color: #0a0a0a;
}
.toggle:after {
position: relative;
display: block;
width: 50px;
height: 50px;
font-family: 'FontAwesome';
content: "\f1e0";
line-height: 50px;
font-size: 29px;
text-align: center;
left: -2px;
}
.toggle-input {
display: none;
}
.toggle-input:checked + .toggle:after, .toggle-input:checked + .toggle:before {
background-color: #fff;
content: "";
height: 3px;
width: 30px;
position: absolute;
left: 10px;
top: 23px;
}
.toggle-input:checked + .toggle:after {
-webkit-animation: bar1 0.3s forwards;
animation: bar1 0.3s forwards;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.toggle-input:checked + .toggle:before {
-webkit-animation: bar2 0.3s forwards;
animation: bar2 0.3s forwards;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.network-list li {
position: absolute;
display: block;
width: 50px;
height: 50px;
margin: 0;
padding: 0;
list-style-type: none;
opacity: 0;
}
.network-list .twitter {
left: 50px;
top: -50px;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.network-list .facebook {
left: 50px;
top: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease 0.3s;
transition: all 0.15s ease 0.3s;
}
.network-list .googleplus {
left: 50px;
top: 50px;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease 0.15s;
transition: all 0.15s ease 0.15s;
}
.network-list a {
color: #fff;
position: relative;
display: block;
width: 50px;
height: 50px;
overflow: hidden;
line-height: 50px;
text-indent: 120%;
text-decoration: none;
}
.network-list a:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 50px;
height: 50px;
font-family: 'FontAwesome';
font-size: 26px;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 50px;
text-indent: 0;
}
.network-list .twitter a {
background-color: #00C3F3;
border-radius: 50%;
}
.network-list .twitter a:before {
content: "\f099";
}
.network-list .twitter a:hover:before {
box-shadow: inset 0 0 0 2px #00C3F3;
}
.network-list .facebook a {
background-color: #2C609B;
border-radius: 50%;
}
.network-list .facebook a:before {
content: "\f09a";
}
.network-list .facebook a:hover:before {
box-shadow: inset 0 0 0 2px #2C609B;
}
.network-list .googleplus a {
background-color: #EC3F25;
border-radius: 50%;
}
.network-list .googleplus a:before {
content: "\f0d5";
}
.network-list .googleplus a:hover:before {
box-shadow: inset 0 0 0 2px #EC3F25;
}
input:checked ~ .network-list li {
opacity: 1;
top: 0;
}
input:checked ~ .network-list .twitter {
left: 50px;
top: -50px;
-webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.4s;
transition: all 0.25s ease 0.4s;
}
input:checked ~ .network-list .facebook {
left: 50px;
top: 0;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.2s;
transition: all 0.25s ease 0.2s;
}
input:checked ~ .network-list .googleplus {
left: 50px;
top: 50px;
-webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.6s;
transition: all 0.25s ease 0.6s;
}
#-webkit-keyframes bar1 {
0% {
content: "\f1e0";
width: 46px;
height: 50px;
background-color: transparent;
-webkit-transform: scale(1);
transform: scale(1);
top: 0;
left: 0;
opacity: 1;
}
50% {
background-color: transparent;
content: "\f1e0";
width: 46px;
height: 50px;
top: 0;
left: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0;
}
50.001% {
background-color: #fff;
left: 10px;
top: 22px;
content: "";
height: 3px;
width: 30px;
-webkit-transform: rotate(45deg), scale(0.2);
transform: rotate(45deg), scale(0.2);
}
100% {
-webkit-transform: rotate(45deg), scale(1);
transform: rotate(45deg), scale(1);
opacity: 1;
}
}
#keyframes bar1 {
0% {
content: "\f1e0";
width: 46px;
height: 50px;
background-color: transparent;
-webkit-transform: scale(1);
transform: scale(1);
top: 0;
left: 0;
opacity: 1;
}
50% {
background-color: transparent;
content: "\f1e0";
width: 46px;
height: 50px;
top: 0;
left: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0;
}
50.001% {
background-color: #fff;
left: 10px;
top: 22px;
content: "";
height: 3px;
width: 30px;
-webkit-transform: rotate(45deg), scale(0.2);
transform: rotate(45deg), scale(0.2);
}
100% {
-webkit-transform: rotate(45deg), scale(1);
transform: rotate(45deg), scale(1);
opacity: 1;
}
}
#-webkit-keyframes bar2 {
0% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50.1% {
background-color: transparent;
-webkit-transform: rotate(-45deg) scale(0.2);
transform: rotate(-45deg) scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
opacity: 1;
}
}
#keyframes bar2 {
0% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50.1% {
background-color: transparent;
-webkit-transform: rotate(-45deg) scale(0.2);
transform: rotate(-45deg) scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
opacity: 1;
}
}

You need to use different id for each button and match the <label>'s for attribute to that same id:
For example:
https://jsfiddle.net/2s6w4hq7/1/
<input class="toggle-input" id="toggle-input-1" type="checkbox" />
<label for="toggle-input-1" class="toggle"></label>
<input class="toggle-input" id="toggle-input-2" type="checkbox" />
<label for="toggle-input-2" class="toggle"></label>

this is simple. you just change your id name of the input and call same name in label.
ie.
<input class="toggle-input" id="toggle-input1" type="checkbox" />
<label for="toggle-input1" class="toggle"></label>
change your code with above code.

You just need to define different ID's for Checkbox and label under div of class share-button.
Please refer below code:
<title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input1" type="checkbox" />
<label for="toggle-input1" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>

align sections side by side

I have tried several attempts to align the section & main to sit side by side? by using a display of inline-block and floating <section> to the left etc. But I am unsuccessful, any help as to what I am doing wrong here would be greatly appreciated :-)
jQuery(document).ready(function($) {
//on mobile - open/close primary navigation clicking/tapping the menu icon
$('.cd-primary-nav').on('click', function(event) {
if ($(event.target).is('.cd-primary-nav')) $(this).children('ul').toggleClass('is-visible');
});
//upload videos if not on mobile
uploadVideo($('.cd-hero-slider'));
//change visible slide
$('.cd-slider-nav li').on('click', function(event) {
event.preventDefault();
var selectedItem = $(this);
if (!selectedItem.hasClass('selected')) {
// if it's not already selected
var selectedPosition = selectedItem.index(),
activePosition = $('.cd-hero-slider .selected').index();
if (activePosition < selectedPosition) {
nextSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
} else {
prevSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
}
updateNavigationMarker(selectedPosition + 1);
}
});
function nextSlide(container, pagination, n) {
var visibleSlide = container.find('.selected'),
navigationDot = pagination.find('.selected');
visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
visibleSlide.removeClass('is-moving');
});
container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
navigationDot.removeClass('selected')
pagination.find('li').eq(n).addClass('selected');
checkVideo(visibleSlide, container, n);
}
function prevSlide(container, pagination, n) {
var visibleSlide = container.find('.selected'),
navigationDot = pagination.find('.selected');
visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
visibleSlide.removeClass('is-moving');
});
container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');
navigationDot.removeClass('selected');
pagination.find('li').eq(n).addClass('selected');
checkVideo(visibleSlide, container, n);
}
function uploadVideo(container) {
container.find('.cd-bg-video-wrapper').each(function() {
var videoWrapper = $(this);
if (videoWrapper.is(':visible')) {
// if visible - we are not on a mobile device
var videoUrl = videoWrapper.data('video'),
video = $('<video loop><source src="' + videoUrl + '.mp4" type="video/mp4" /><source src="' + videoUrl + '.webm" type="video/webm" /></video>');
video.appendTo(videoWrapper);
}
});
}
function checkVideo(hiddenSlide, container, n) {
//check if a video outside the viewport is playing - if yes, pause it
if (hiddenSlide.find('video').length > 0) hiddenSlide.find('video').get(0).pause();
//check if the select slide contains a video element - if yes, play the video
if (container.children('li').eq(n).find('video').length > 0) container.children('li').eq(n).find('video').get(0).play();
}
function updateNavigationMarker(n) {
$('.cd-marker').removeClassPrefix('item').addClass('item-' + n);
}
$.fn.removeClassPrefix = function(prefix) {
//remove all classes starting with 'prefix'
this.each(function(i, el) {
var classes = el.className.split(" ").filter(function(c) {
return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = $.trim(classes.join(" "));
});
return this;
};
});
*{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* --------------------------------
Primary style
-------------------------------- */
*,
*::after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: "Open Sans", sans-serif;
color: #2c343b;
background-color: #f2f2f2;
}
a {
color: #d44457;
text-decoration: none;
}
img {
max-width: 100%;
}
/* --------------------------------
Main Components
-------------------------------- */
/* --------------------------------
Slider
-------------------------------- */
.cd-hero {
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cd-hero-slider {
position: relative;
height: 360px;
overflow: hidden;
}
.cd-hero-slider li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.cd-hero-slider li.selected {
/* this is the visible slide */
position: relative;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-hero-slider li.move-left {
/* slide hidden on the left */
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.cd-hero-slider li.is-moving,
.cd-hero-slider li.selected {
/* the is-moving class is assigned to the slide which is moving outside the viewport */
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
#media only screen and (min-width: 768px) {
.cd-hero-slider {
height: 500px;
}
}
#media only screen and (min-width: 1170px) {
.cd-hero-slider {
height: 680px;
}
}
/* --------------------------------
Single slide style
-------------------------------- */
.cd-hero-slider li {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.cd-hero-slider li:first-of-type {
background-color: #2c343b;
}
.cd-hero-slider li:nth-of-type(2) {
background-color: #3d4952;
background-image: url("../assets/tech-1-mobile.jpg");
}
.cd-hero-slider li:nth-of-type(3) {
background-color: #586775;
background-image: url("../assets/tech-2-mobile.jpg");
}
.cd-hero-slider li:nth-of-type(4) {
background-color: #2c343b;
background-image: url("../assets/video-replace-mobile.jpg");
}
.cd-hero-slider li:nth-of-type(5) {
background-color: #2c343b;
background-image: url(../assets/img.jpg);
}
.cd-hero-slider .cd-full-width,
.cd-hero-slider .cd-half-width {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
left: 0;
top: 0;
/* this padding is used to align the text */
padding-top: 100px;
text-align: center;
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.cd-hero-slider .cd-img-container {
/* hide image on mobile device */
display: none;
}
.cd-hero-slider .cd-img-container img {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.cd-hero-slider .cd-bg-video-wrapper {
/* hide video on mobile device */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.cd-hero-slider .cd-bg-video-wrapper video {
/* you won't see this element in the html, but it will be injected using js */
display: block;
min-height: 100%;
min-width: 100%;
max-width: none;
height: auto;
width: auto;
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.cd-hero-slider h2,
.cd-hero-slider p {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
line-height: 1.2;
margin: 0 auto 14px;
color: #ffffff;
width: 90%;
max-width: 400px;
}
.cd-hero-slider h2 {
font-size: 2.4rem;
}
.cd-hero-slider p {
font-size: 1.4rem;
line-height: 1.4;
}
.cd-hero-slider .cd-btn {
display: inline-block;
padding: 1.2em 1.4em;
margin-top: .8em;
background-color: transparent;
border: 1px solid white;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 1px;
color: #ffffff;
text-transform: uppercase;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-hero-slider .cd-btn.secondary {
background-color: rgba(22, 26, 30, 0.8);
}
.cd-hero-slider .cd-btn:nth-of-type(2) {
margin-left: 1em;
}
.no-touch .cd-hero-slider .cd-btn:hover {
background-color: #d44457;
}
.no-touch .cd-hero-slider .cd-btn.secondary:hover {
background-color: #161a1e;
}
#media only screen and (min-width: 768px) {
.cd-hero-slider li: nth-of-type(2) {
background-image: none;
}
.cd-hero-slider li:nth-of-type(3) {
background-image: none;
}
.cd-hero-slider li:nth-of-type(4) {
background-image: none;
}
.cd-hero-slider .cd-full-width,
.cd-hero-slider .cd-half-width {
padding-top: 150px;
}
.cd-hero-slider .cd-bg-video-wrapper {
display: block;
}
.cd-hero-slider .cd-half-width {
width: 45%;
}
.cd-hero-slider .cd-half-width:first-of-type {
left: 5%;
}
.cd-hero-slider .cd-half-width:nth-of-type(2) {
right: 5%;
left: auto;
}
.cd-hero-slider .cd-img-container {
display: block;
}
.cd-hero-slider h2,
.cd-hero-slider p {
max-width: 520px;
}
.cd-hero-slider h2 {
font-size: 2.4em;
font-weight: 300;
}
.cd-hero-slider .cd-btn {
font-size: 1.4rem;
}
}
#media only screen and (min-width: 1170px) {
.cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width {
padding-top: 220px;
}
.cd-hero-slider h2,
.cd-hero-slider p {
margin-bottom: 20px;
}
.cd-hero-slider h2 {
font-size: 3.2em;
}
.cd-hero-slider p {
font-size: 1.6rem;
}
}
/* --------------------------------
Single slide animation
-------------------------------- */
#media only screen and (min-width: 768px) {
.cd-hero-slider .cd-half-width {
opacity: 0;
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-ms-transform: translateX(40px);
-o-transform: translateX(40px);
transform: translateX(40px);
}
.cd-hero-slider .move-left .cd-half-width {
-webkit-transform: translateX(-40px);
-moz-transform: translateX(-40px);
-ms-transform: translateX(-40px);
-o-transform: translateX(-40px);
transform: translateX(-40px);
}
.cd-hero-slider .selected .cd-half-width {
/* this is the visible slide */
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-hero-slider .is-moving .cd-half-width {
/* this is the slide moving outside the viewport
wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
-webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
-moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
transition: opacity 0s 0.5s, transform 0s 0.5s;
}
.cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2),
.cd-hero-slider li.selected.from-right .cd-half-width:first-of-type {
/* this is the selected slide - different animation if it's entering from left or right */
-webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
-moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
}
.cd-hero-slider li.selected.from-left .cd-half-width:first-of-type,
.cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) {
/* this is the selected slide - different animation if it's entering from left or right */
-webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
-moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s;
transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
}
.cd-hero-slider .cd-full-width h2,
.cd-hero-slider .cd-full-width p,
.cd-hero-slider .cd-full-width .cd-btn {
opacity: 0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}
.cd-hero-slider .move-left .cd-full-width h2,
.cd-hero-slider .move-left .cd-full-width p,
.cd-hero-slider .move-left .cd-full-width .cd-btn {
opacity: 0;
-webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-ms-transform: translateX(-100px);
-o-transform: translateX(-100px);
transform: translateX(-100px);
}
.cd-hero-slider .selected .cd-full-width h2,
.cd-hero-slider .selected .cd-full-width p,
.cd-hero-slider .selected .cd-full-width .cd-btn {
/* this is the visible slide */
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-hero-slider li.is-moving .cd-full-width h2,
.cd-hero-slider li.is-moving .cd-full-width p,
.cd-hero-slider li.is-moving .cd-full-width .cd-btn {
/* this is the slide moving outside the viewport
wait for the end of the transition on the li parent before set opacity to 0 and translate to 100px/-100px */
-webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
-moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
transition: opacity 0s 0.5s, transform 0s 0.5s;
}
.cd-hero-slider li.selected h2 {
-webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
-moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
}
.cd-hero-slider li.selected p {
-webkit-transition: opacity 0.4s 0.3s, -webkit-transform 0.5s 0.3s;
-moz-transition: opacity 0.4s 0.3s, -moz-transform 0.5s 0.3s;
transition: opacity 0.4s 0.3s, transform 0.5s 0.3s;
}
.cd-hero-slider li.selected .cd-btn {
-webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s, background-color 0.2s 0s;
-moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s, background-color 0.2s 0s;
transition: opacity 0.4s 0.4s, transform 0.5s 0.4s, background-color 0.2s 0s;
}
}
/* --------------------------------
Slider navigation
-------------------------------- */
.cd-slider-nav {
position: absolute;
width: 100%;
bottom: 0;
z-index: 2;
text-align: center;
height: 55px;
background-color: rgba(0, 1, 1, 0.5);
}
.cd-slider-nav nav,
.cd-slider-nav ul,
.cd-slider-nav li,
.cd-slider-nav a {
height: 100%;
}
.cd-slider-nav nav {
display: inline-block;
position: relative;
}
.cd-slider-nav .cd-marker {
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 100%;
color: #d44457;
background-color: #ffffff;
box-shadow: inset 0 2px 0 currentColor;
-webkit-transition: -webkit-transform 0.2s, box-shadow 0.2s;
-moz-transition: -moz-transform 0.2s, box-shadow 0.2s;
transition: transform 0.2s, box-shadow 0.2s;
}
.cd-slider-nav .cd-marker.item-2 {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.cd-slider-nav .cd-marker.item-3 {
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
}
.cd-slider-nav .cd-marker.item-4 {
-webkit-transform: translateX(300%);
-moz-transform: translateX(300%);
-ms-transform: translateX(300%);
-o-transform: translateX(300%);
transform: translateX(300%);
}
.cd-slider-nav .cd-marker.item-5 {
-webkit-transform: translateX(400%);
-moz-transform: translateX(400%);
-ms-transform: translateX(400%);
-o-transform: translateX(400%);
transform: translateX(400%);
}
.cd-slider-nav ul::after {
clear: both;
content: "";
display: table;
}
.cd-slider-nav li {
display: inline-block;
width: 60px;
float: left;
}
.cd-slider-nav li.selected a {
color: #2c343b;
}
.no-touch .cd-slider-nav li.selected a:hover {
background-color: transparent;
}
.cd-slider-nav a {
display: block;
position: relative;
padding-top: 35px;
font-size: 1rem;
font-weight: 700;
color: #a8b4be;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-slider-nav a::before {
content: '';
position: absolute;
width: 24px;
height: 24px;
top: 8px;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
background: url(../assets/cd-icon-navigation.svg) no-repeat 0 0;
}
.no-touch .cd-slider-nav a:hover {
background-color: rgba(0, 1, 1, 0.5);
}
.cd-slider-nav li:first-of-type a::before {
background-position: 0 0;
}
.cd-slider-nav li.selected:first-of-type a::before {
background-position: 0 -24px;
}
.cd-slider-nav li:nth-of-type(2) a::before {
background-position: -24px 0;
}
.cd-slider-nav li.selected:nth-of-type(2) a::before {
background-position: -24px -24px;
}
.cd-slider-nav li:nth-of-type(3) a::before {
background-position: -48px 0;
}
.cd-slider-nav li.selected:nth-of-type(3) a::before {
background-position: -48px -24px;
}
.cd-slider-nav li:nth-of-type(4) a::before {
background-position: -72px 0;
}
.cd-slider-nav li.selected:nth-of-type(4) a::before {
background-position: -72px -24px;
}
.cd-slider-nav li:nth-of-type(5) a::before {
background-position: -96px 0;
}
.cd-slider-nav li.selected:nth-of-type(5) a::before {
background-position: -96px -24px;
}
#media only screen and (min-width: 768px) {
.cd-slider-nav {
height: 80px;
}
.cd-slider-nav .cd-marker,
.cd-slider-nav li {
width: 95px;
}
.cd-slider-nav a {
padding-top: 48px;
font-size: 1.1rem;
text-transform: uppercase;
}
.cd-slider-nav a::before {
top: 18px;
}
}
/* --------------------------------
Main content
-------------------------------- */
.cd-main-content {
width: 100%;
max-width: 768px;
margin: 0 auto;
padding: 2em 0;
display: inline-block;
}
.cd-main-content p {
font-size: 1.4rem;
line-height: 1.8;
color: #999999;
margin: 2em 0;
}
#media only screen and (min-width: 1170px) {
.cd-main-content {
padding: 3em 0;
}
.cd-main-content p {
font-size: 1.6rem;
}
}
/* --------------------------------
Javascript disabled
-------------------------------- */
.no-js .cd-hero-slider li {
display: none;
}
.no-js .cd-hero-slider li.selected {
display: block;
}
.no-js .cd-slider-nav {
display: none;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<section class="cd-hero">
<ul class="cd-hero-slider">
<li class="selected">
<div class="cd-full-width">
Like what I do? Let me know
</div>
<!-- .cd-full-width -->
<div class="cd-bg-video-wrapper" data-video="assets/video/video">
<!-- video element will be loaded using jQuery -->
<img src=[!["http://blog.franceandson.com/wp-content/uploads/2015/02/marilyn-monroe-by-andy-warhol-medium.jpg"][1]][1] alt="" width=1200/>
</div>
<!-- .cd-bg-video-wrapper -->
</li>
<li>
<div class="cd-full-width">
<div id="container">
<div class='module' id='measure'>
<fieldset>
<legend></legend>
<p>Send me a message</p>
<input class="single" type='text' placeholder='Name' />
<input class="single" type='text' placeholder='Email' />
<input class="single" type='text' placeholder='Phone' />
<textarea class="message" type='text' placeholder='Message'></textarea>
</fieldset>
</div>
Send
</div>
<!-- .cd-half-width -->
</li>
<li>
<div class="cd-full-width">
Thank you
</div>
<!-- .cd-full-width -->
<div class="cd-bg-video-wrapper" data-video="assets/video/video">
<!-- video element will be loaded using jQuery -->
<img src=[!["http://www.therealbest.com/img/items/big/587/Turquoise-Marilyn_The-Head-of-Marilyn_789.jpg"][1]][1] alt="" </div>
<!-- .cd-half-width -->
</li>
</ul>
<!-- .cd-hero-slider -->
<div class="cd-slider-nav">
<nav>
<span class="cd-marker item-1"></span>
<ul>
<li class="selected">Intro</li>
<li>Tech 1</li>
<li>Tech 2</li>
</ul>
</nav>
</div>
<!-- .cd-slider-nav -->
</section>
<!-- .cd-hero -->
<main class="cd-main-content">
<p>I'd love to hear from you.</p>
</main>
<!-- .cd-main-content -->

Here's one quick and simple way:
In your CSS...
Remove position: absolute from .cd-full-width.
Add body { display: flex; }
Add width: 100% to .cd-hero.
DEMO
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

For my first suggestion, i would wrap both elements in a container:
<div class="hero-main-container">
<section class="cd-hero">[...]</section>
<main class="cd-main-content">[...]</main>
</div>
and then in your css, add the following:
.hero-main-container {
display: flex;
flex-direction: row;
}
.cd-hero, cd-main-content {
width: 50%;
}
If wrapping them in a container is not an option, positioning them side-by-side would be a second option:
//css
.cd-hero {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
}
.cd-main-content {
position: absolute;
top: 0px;
right: 0px;
width: 50%;
}

Text rendering changing un-expectedly

I've got an issue which I'm struggling to isolate whereby some of my text changes it appearance, looking slightly more bold than other times. This is in sync with a "pulsing" effect I've introduced, but I'm struggling to see why.
Here's an example of the affect. Things to look for in this animated GIF:
Name: Notice the exclamation mark that appears with a grey pulse over it
Server Item/Item Type/File Extension: Watch carefully and you'll see the text get bolder
Note that the other changes (the larger exclamation and the Item Type data changing and irrelevant, I've since commented out and still see the affect).
EDIT I've managed to get a reproduction and updated the snippet to this affect.
I should note that I've only seen this in Chrome. Firefox seems fine, IE unfortunately doesn't yet work with the codebase so I can't test until I get a reproduction working.
What the code below does is to simply toggle an animate class on a new <span class="pulse"> that has been added. This should trigger the CSS animation to kick in again, which changes the size of the grey pulse.
// Sets up a pulsing affect on any invalid icons within the Deck
(function () {
setInterval(function () {
// Check for any invalid classes, if none were found then just return
var cardErrors = $(".card.invalid");
if (cardErrors.length === 0) return;
function pulse(selection, size, position) {
var missingPulses = selection.filter(function (index, element) {
return $(element).find(".pulse").length === 0;
});
missingPulses.prepend("<div class='pulse'></div>");
// Find the pulse and remove the animation class
var pulse = selection.find(".pulse");
pulse.removeClass("animate");
// Define the pulse size if it's not done already
if (!pulse.filter(function (index, element) {
return !pulse.height() && !pulse.width();
}).length !== 0) {
pulse.css(size);
pulse.css(position);
}
//set the position and add class .animate
//pulse.css(position)
pulse.addClass("animate");
}
pulse(cardErrors, {
height: 12,
width: 12
}, {
top: 11 + 'px',
left: 316 + 'px'
});
}, 2500);
})();
.pulse {
display: block;
position: absolute;
background: #555;
border-radius: 100%;
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
/*animation effect*/
.pulse.animate {
-moz-animation: pulse-ripple 0.65s linear;
-o-animation: pulse-ripple 0.65s linear;
-webkit-animation: pulse-ripple 0.65s linear;
animation: pulse-ripple 0.65s linear;
}
#keyframes pulse-ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
/* Mixins */
/* Comment here */
html {
height: 100%;
}
body {
height: 100%;
}
body {
scrollbar-base-color: #999;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}
::-webkit-scrollbar {
width: 10px;
height: 30px;
}
::-webkit-scrollbar-button {
height: 0px;
}
::-webkit-scrollbar-track-piece {
background-color: #EBEBEB;
}
::-webkit-scrollbar-thumb {
height: 20px;
background-color: #999;
border-radius: 5px;
}
::-webkit-scrollbar-corner {
background-color: #999;
}
::-webkit-resizer {
background-color: #999;
}
.deck {
background: rgba(250, 250, 251, 0.88);
position: absolute;
top: 0;
right: 0;
width: 345px;
padding: 10px 10px 10px 10px;
opacity: 1;
height: 100%;
z-index: 10;
}
.deck .scrollable {
overflow-y: scroll;
width: 338px;
height: 100%;
padding-right: 7px;
}
.deck .non-scrollable {
width: 338px;
overflow: hidden;
}
.deck .non-scrollable .card {
width: 338px !important;
}
.deck .card {
margin-bottom: 11px;
background: #FFFFFF;
float: right;
clear: both;
font-family:'Open Sans', Arial, sans-serif;
width: 318px;
padding: 10px 12px 10px 12px;
-moz-transition: box-shadow 0.5s ease;
-webkit-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
box-shadow: 0px 1px 5px 1px rgba(198, 198, 198, 0.75);
/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
position: relative;
overflow: hidden !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* remove padding added by bootstrap, but only within cards */
}
.deck .card[class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.deck .card.summary-card {
cursor: pointer;
/* https://github.com/ConnorAtherton/loaders.css MIT */
}
.deck .card.summary-card:hover {
box-shadow: 10px 10px 50px 0px #c6c6c6;
}
.deck .card.summary-card .title {
color: #33BDDE;
font-size: 14px;
font-weight: normal;
display: block;
padding-bottom: 5px;
padding-left: 10px;
}
.deck .card.summary-card .notification {
top: 5px;
right: 5px;
width: 20px;
height: 20px;
position: absolute;
}
.deck .card.summary-card.busy .notification {
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
border: 3px solid #33BDDE;
border-bottom-color: transparent;
height: 15px;
width: 15px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 1.25s 0s linear infinite;
-moz-animation: rotate 1.25s 0s linear infinite;
-o-animation: rotate 1.25s 0s linear infinite;
animation: rotate 1.25s 0s linear infinite;
}
.deck .card.summary-card.filtered .notification:before {
position: relative;
font-family: FontAwesome;
top: 0px;
left: 0px;
color: #33BDDE;
font-size: 18px;
content:"\f0b0";
}
.deck .card.summary-card .content {
padding: 0 0 0 0;
}
.deck .card.summary-card .content .label {
color: #303E45;
font-size: 12px;
font-weight: normal;
float: left;
}
.deck .card.summary-card .content .value {
color: #8BC34A;
font-size: 12px;
font-weight: normal;
float: right;
}
.deck .card.summary-card .content .ellipsis {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#keyframes rotate {
0% {
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
/* ripple effect from http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design */
/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
display: block;
position: absolute;
background: rgba(198, 198, 198, 0.5);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
/* animation effect */
.ink.animate {
-webkit-animation: ripple 0.65s linear;
-moz-animation: ripple 0.65s linear;
-o-animation: ripple 0.65s linear;
animation: ripple 0.65s linear;
}
#-webkit-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-moz-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-webkit-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* end of cards menu */
/* tooltips */
.dxc-tooltip {
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="deck">
<div class="scrollable">
<div>
<div class="card summary-card string-card aggregate-card clickable filtered invalid" id="FI.NAM">
<div class="notification"></div> <span class="title" data-bind="text: name">Name</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.SER">
<div class="notification"></div> <span class="title" data-bind="text: name">Server Item</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.FIL">
<div class="notification"></div> <span class="title" data-bind="text: name">File Extension</span>
</div>
</div>
</div>
</div>