Develop Reference

Why is "keyframes method" not working the way it should in my css?

In the keyframes part, my PC doesn't recognize the from part. If it would, it would be blue and the opacity command would be grey. But as you see none of them is correct and I don't know why. Because of this little error, my HTML website is not working the way it should. Can anyone please help me? I would like to finish my HTML website.
body {
margin: 0;
padding: 0;
animation: bgcolor infinite 20s;
}
h1 {
font-family: 'Yeseva One', cursive;
font-size: 4em;
margin: 0;
color: #fff;
}
#keyframes bgcolor {
0% {
background: #f1c40f;
}
10% {
background: #f39c12;
}
20% {
background: #e67e22;
}
30% {
background: #d35400;
}
40% {
background: #e74c3c;
}
50% {
background: #c0392b;
}
60% {
background: #e74c3c;
}
70% {
background: #d35400;
}
80% {
background: #e67e22;
}
90% {
background: #f39c12;
}
100% {
background: #f1c40f;
}
}
h2 {
font-family: 'IM Fell DW Pica', serif;
font-size: 3em;
margin: 0;
color: #fff;
}
p {
font-family: 'Clicker Script', cursive;
font-size: 2em;
margin: 0;
color: #fff;
}
button {
font-family: 'Playfair Display SC', serif;
font-size: 1em;
}
button {
margin: 0;
border: none;
background: #ea1538;
padding: 12px 30px;
border-radius: 30px;
color: white;
font-weight: bold;
box-sizing: border-box;
transition: .3s
}
button:hover {
transform: scale(1.3);
cursor: pointer;
}
.hero {
height: 100vh;
width: 100%;
}
nav {
display: flex;
align-items: center;
min-height: 8vh;
justify-content: space-between;
padding-left: 25%;
padding-right: 10%;
}
.logo {
color: white;
font-size: 28px;
}
.nav-links {
display: flex;
justify-content: space-between;
}
.nav-links a {
text-decoration: none;
letter-spacing: 1px;
}
.line {
width: 100%;
height: 3px;
background-color: white;
margin: 5px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
}
span {
color: #000000;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 20px;
font-size: 19px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
color: #000000;
transition: .2s;
}
#media screen and (max-width:1024px) {
.nav-links {
display: flex;
justify-content: space-between;
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
background-color: #ffeaa7;
/*just to see if the slider works*/
right: 0px;
height: 100vh;
top: 18vh;
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
padding-left: 100%;
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}

I'm not sure I fully understand your question, it might be helpful to reframe it, with a minimal reproducible example. See StackOverflows MRE
I don't see you calling the animation anywhere in your code. You need to target the nav links, and tell it to use the animation navLinkFade.
Here is an example of a super simple animation.
ul {
animation: fade 3s forwards;
}
#keyframes fade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
<ul>
<li>Test</li>
<li>Test</li>
</ul>

Carousel - Grid Spacing Issues (images getting crunched) - CSS - Using Unbounce (which lets you build websites)

I'm having trouble getting this spacing down with my carousel. The difficult part is I'm using an in browser service, Unbounce to build the website (for a client) so this is an html/css snippet I have drop into the wysiwyg website framework. The spacing I am trying to achieve is where it goes across half the page horizontally. I also attempted using a more mobile friendly image (square image), but I still got the same result.
Here is what it looks like:
Here is what it should look like (normal PNG image with no background):
Slider Element
<div id="slider">
<div class="testi-bx">
<img src="" class="desk">
<img src="" class="mob">
</div>
<div class="testi-bx">
<img src="" class="desk">
<img src="" class="mob">
</div>
<div class="testi-bx">
<img src="" class="desk">
<img src="" class="mob">
</div>
</div>
<script>
$('#slider').slick({
autoplay: true,
autoplaySpeed: 4000,
dots:false,
arrows:true,
cssEase: 'linear',
pauseOnHover: false,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots:false
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows:false,
dots:true,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows:false,
dots:true,
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
// 1024
]
});
</script>
Slider Stylesheet
<style>
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-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);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
margin-top: 0px;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
.slick-dots {
display: flex;
justify-content: center;
margin: 0px;
padding: 0;
list-style-type: none;
}
.slick-dots li {
margin: 0 0.25rem;
}
.slick-dots li.slick-active button {
background-color:#E21836;
}
.slick-dots button {
background-color: #C0C0C0;
border: none;
width: 8px;
height: 8px;
border-radius: 50%;
color: transparent;
/*border: 1px solid #E2714E;*/
margin: 0 2px;
}
.slick-prev.slick-arrow {
background-image: url("");
content: "";
color: transparent;
height: 16px !important;
width: 9px !important;
background-repeat: no-repeat;
font-size: 42px;
top: 35%;
left: 0px;
position: absolute;
cursor: pointer;
z-index: 555;
}
.slick-next.slick-arrow {
background-image: url("");
content: "";
color: transparent;
height: 16px !important;
width: 9px !important;
background-repeat: no-repeat;
font-size: 42px;
top: 35%;
right: 0px;
position: absolute;
cursor: pointer;
z-index: 556;
}
/*.slick-prev::before {
background-image: url("");
content: "";
color: transparent;
height: 30px !important;
width: 30px !important;
background-repeat: no-repeat;
font-size: 42px;
}
.slick-next::before {
background-image: url("");
content: "";
color: transparent;
height: 30px !important;
width: 30px !important;
background-repeat: no-repeat;
font-size: 42px;
}*/
.slick-next, .slick-prev {
width: 19px;
height: 32px;
font-size: 0px;
border: none;
background: none;
}
.slick-slide img.desk {
width: 890px;
height: 100%;
display: block;
margin: 0 auto;
border-radius: 00px;
}
.slick-slide img.mob {
width: 290px;
height: 100%;
display: none;
margin: 0 auto;
border-radius: 0px;
}
#media only screen and (max-width: 600px) {
.slick-slide img.desk {
display: none;
}
.slick-slide img.mob {
display: block;
}
.slick-dots{margin-top: 25px;}
.slick-prev.slick-arrow{bottom: 3.6em !important; left: 40% !important; top: auto;}
.slick-next.slick-arrow{bottom: 3.6em !important; right: 40% !important; top: auto;}
}
</style>

onclick for closing cookie bar

i'm developing an app that should show a cookie bar and if the user click on the "X" it should to close, i've thinked to do it with the onclick attribute but it is ignored.
This is my code:
console.log("Ready !");
var close = function () {
console.log("close");
}
.cookie-bar {
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #800000;
color: white;
font-size: 14px;
font-family: "Lato", sans-serif;
font-weight: 100;
transition: .8s;
animation: slideIn .8s;
animation-delay: .8s;
.message {
white-space: nowrap;
text-shadow: 0 1px 0 darken(red, 10%);
#media (max-width: 767px){
display: none;
}
}
.mobile {
display: none;
#media (max-width: 767px){
display: inline-block;
}
}
}
#keyframes slideIn {
0% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
.close-cb {
border: none;
color: white;
background: darken(red, 20%);
position: absolute;
display: inline-block;
right: 10px;
top: 0;
cursor: pointer;
border-radius: 3px;
box-shadow: inset 0 0 3px 0 rgba(0,0,0,.2);
line-height: 30px;
height: 30px;
width: 30px;
font-size: 16px;
font-weight: bold;
&:hover {
background: darken(red, 10%);
}
}
.checkbox-cb {
display: none;
&:checked + .cookie-bar {
transform: translateY(-50px);
}
}
<input class="checkbox-cb" id="checkbox-cb" type="checkbox" onclick="close()"/>
<div class="cookie-bar" id="cookie">
<span class="message">Questo sito utilizza i cookies</span>
<label for="checkbox-cb" class="close-cb" >x</a>
</div>
Can i solve it?
Thank's

How to hide overflow on a carousel slider and set a loop

Here is the fiddle link
Hi !
I have a carousel slider and I want to hide the overflow outside the grey box (see the fiddle) and I would like the first button (the first div inside) to come back when the last one is gone.
I am really note familiar with carousel and if someone have a basic lesson on that topic I would apreciate it. I am familiar with css but it feels like the carousel isn't working the same way. I hope this is not duplicated I didn't find a lot about carousel on stack.
$(document).ready(function(){
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
#background_etape2 {
background-color: #a6a6a6;
width: 100%;
height: 800px;
}
#sondage {
Float: left;
left: 35px;
font-size: 20px;
font-weight: bold;
white-space: nowrap;
position: relative;
top: 100px;
color: black;
}
#liste_categorie_sondage {
margin-left: auto;
margin-right: auto;
height: 200px;
width: 600px;
background-color: #555;
border: 1px solid black;
position: relative;
top: 390px;
}
/*
#nav_sondage {
list-style-type: none;
margin: auto;
padding: 0;
list-style-position:inside;
}
*/
#categorie_sondage {
display: block;
width: 600px;
color: #99b3ff;
padding: 8px 16px;
list-style-position:inside;
display: table-cell;
font-size: 20px;
position: relative;
top: -300px;
left: 250px;
}
#menusondage {
text-decoration: none;
color: black;
width: 600px;
background-color: #808080;
text-align: right;
padding: 8px;
display:table-cell;
border: 2px solid black;
}
#menusondage:hover {
background-color: #555;
color: white;
}
<div id="background_etape2" name="etape2">
<div id="etape2">
<div id="liste_categorie_sondage" class="slider">
<div id="categorie_sondage"> Économie <a id="menusondage" href="economie.php">Listes des sondages</a></div>
<div id="categorie_sondage"> Environnement <a id="menusondage" href="environnement.php">Listes des sondages</a></div>
<div id="categorie_sondage"> Santé <a id="menusondage" href="sante.php">Listes des sondages</a></div>
<div id="categorie_sondage"> Éducation <a id="menusondage" href="education.php">Listes des sondages</a></div>
<div id="categorie_sondage"> Services Sociaux <a id="menusondage" href="sociaux.php">Listes des sondages</a></div>
</div>
</div>
</div>
EDIT : My basic problem was coming from my link to code in the css plug-in.
Like one of the anwser told me, I need absolutely the slick.css file in order to make it work and I can or not add the -theme file. Those css sheet hide the overflow without hidding the arrow.
See those file here :
There is the first one (slick.css)
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-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);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
And here is the last one slick-theme.css
#charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
background: #fff url('./ajax-loader.gif') center center no-repeat;
}
/* Icons */
#font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url('./fonts/slick.eot');
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
}
/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
After this, I still have one probleme : The slider buttons just dont show up.
I tried to hide my CSS code with /* */ and yes, the slider button appear but in a weird way.
This is the picture of what happen

To hide the overflow, add overflow: hidden; to #background_etape2 in CSS.
About the circular permutation you want to achieve, it takes a bit more work to do. I'd suggest to use existing jQuery plugins which offer good solutions. Just Google 'carousel javascript' and you'll find some good and well documented examples free to download and use.
Gaby's proposal seems to be the answer.

You have a couple of issues
The most important is that the link to the slick CSS file is wrong. Use //cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css (and add the -theme file if you want to use the plugin theme)
You use duplicate ids on the slides and the links inside. (on the demo i changed those to classes)
See updated demo
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
#import url('//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css');
#import url('//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css');
#background_etape2 {
background-color: #a6a6a6;
width: 100%;
height: 500px;
}
#liste_categorie_sondage {
margin-left: auto;
margin-right: auto;
height: 200px;
width: 600px;
background-color: #555;
border: 1px solid black;
position: relative;
top: 150px;
}
.categorie_sondage {
display: block;
color: #99b3ff;
padding: 8px 16px;
list-style-position: inside;
display: table-cell;
font-size: 20px;
position: relative;
}
.menusondage {
text-decoration: none;
color: black;
background-color: #808080;
text-align: right;
padding: 8px;
display: table-cell;
border: 2px solid black;
}
.menusondage:hover {
background-color: #555;
color: white;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kenwheeler/slick/851da942/slick/slick.min.js"></script>
<div id="background_etape2" name="etape2">
<div id="liste_categorie_sondage" class="slider">
<div class="categorie_sondage">economie <a class="menusondage" href="economie.php">Listes des sondages</a>
</div>
<div class="categorie_sondage">environment <a class="menusondage" href="environnement.php">Listes des sondages</a>
</div>
<div class="categorie_sondage">health <a class="menusondage" href="sante.php">Listes des sondages</a>
</div>
<div class="categorie_sondage">education <a class="menusondage" href="education.php">Listes des sondages</a>
</div>
<div class="categorie_sondage">social<a class="menusondage" href="sociaux.php">Listes des sondages</a>
</div>
</div>
</div>
(and the updated fiddle: https://jsfiddle.net/gaby/eaotmar3/14/)

Hiding the overflow
It is really simple just add overflow: hidden to the gray box (#liste_categorie_sondage)
#liste_categorie_sondage {
overflow: hidden;
margin-left: auto;
margin-right: auto;
...
}
But that is not the problem, you are actually not implementing the CSS provide with the plugin. More below
Slider
Your CSS is all wrong and missing and if you are already using a plugin you have to include all the assets and fallow the docs.
Here is a JSFiddle how it should be implemented
Other Mistakes
You are using ID's to style your content which is a BIG no and mistake.
ID's must be unique it is specified ind W3 Docs
This attribute assigns a name to an element. This name must be unique in a document.
Also they will give you a CSS specificity headache, because they are second highest (right after inline declaration)
More on CSS specificity here

Automatic resize photo issue

I've found this amazing plugin called Flickity, passing through the styling options I've managed to create synced carousel with images.
The issue I can't resolve is how to make images to resize according to device width. I am implementing it to work with kind of horizontal scrolling page. How should I go about this?
Codepen link
HTML
<div class="gallery gallery-nav js-flickity gallerysub"
data-flickity-options='{ "asNavFor": ".gallery-main", "contain": true, "pageDots": false, "imagesLoaded": true, "percentPosition": false, "prevNextButtons": false, "cellAlign": "left"}'>
<div class="nav" > <img src="http://s27.postimg.org/u7fo6xssj/image.jpg"></div>
<div class="nav" > <img src="http://s27.postimg.org/z8n28b08z/image.jpg"></div>
<div class="nav" > <img src="http://s27.postimg.org/4sh5a6epv/image.jpg"></div>
<div class="nav" > <img src="http://s27.postimg.org/52ontitc3/image.jpg"></div>
</div>
<div class="gallery gallery-main js-flickity gallerymain" data-flickity-options='{"freeScroll": true, "wrapAround": true, "prevNextButtons": false, "pageDots": false, "imagesLoaded": true, "percentPosition": false}'>
<div class="for" > <img src="http://s27.postimg.org/u7fo6xssj/image.jpg"></div>
<div class="for" > <img src="http://s27.postimg.org/z8n28b08z/image.jpg"></div>
<div class="for" > <img src="http://s27.postimg.org/4sh5a6epv/image.jpg"></div>
<div class="for" > <img src="http://s27.postimg.org/52ontitc3/image.jpg"></div>
</div>
CSS
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus { outline: none; }
.flickity-viewport {
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
/* draggable */
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
}
/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: white;
background: hsla(0, 0%, 100%, 0.75);
cursor: pointer;
/* vertically center */
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.flickity-prev-next-button:hover { background: white; }
.flickity-prev-next-button:focus {
outline: none;
box-shadow: 0 0 0 5px #09F;
}
.flickity-prev-next-button:active {
filter: alpha(opacity=60); /* IE8 */
opacity: 0.6;
}
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px;
}
.flickity-prev-next-button:disabled {
filter: alpha(opacity=30); /* IE8 */
opacity: 0.3;
cursor: auto;
}
.flickity-prev-next-button svg {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
.flickity-prev-next-button .arrow {
fill: #333;
}
/* color & size if no SVG - IE8 and Android 2.3 */
.flickity-prev-next-button.no-svg {
color: #333;
font-size: 26px;
}
/* ---- page dots ---- */
.flickity-page-dots {
position: absolute;
width: 100%;
bottom: -25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
filter: alpha(opacity=25); /* IE8 */
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
filter: alpha(opacity=100); /* IE8 */
opacity: 1;
}
/* external css: flickity.css */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: sans-serif; }
.gallery-main img {
display: block;
height: 600px;
}
.gallery-nav img {
display: block;
height: 93px;
}
div.for {
margin-right: 30px;
}
.gallerymain {
margin-top: 30px;
}
.gallerysub {
margin-top: 30px;
}