Line 1,751: | Line 1,751: | ||
.mySlides {display: none} | .mySlides {display: none} | ||
img {vertical-align: middle;} | img {vertical-align: middle;} | ||
+ | /* Slideshow container */ | ||
+ | .survey1 .slideshow-container { | ||
+ | max-width: 1000px; | ||
+ | position: relative; | ||
+ | margin: auto; | ||
+ | border:1px solid ; | ||
+ | |||
+ | } | ||
+ | |||
+ | /* Next & previous buttons */ | ||
+ | .survey1 .prev, .next { | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | width: auto; | ||
+ | padding: 16px!important;; | ||
+ | margin-top: -22px!important;; | ||
+ | color: #d1c17e; | ||
+ | font-weight: bold; | ||
+ | font-size: 60px; | ||
+ | transition: 0.6s ease; | ||
+ | border-radius: 0 3px 3px 0; | ||
+ | padding-right: 0!important; | ||
+ | margin-left: 0!important; | ||
+ | text-decoration: none!important; | ||
+ | } | ||
+ | |||
+ | /* Position the "next button" to the right */ | ||
+ | .survey1 .next { | ||
+ | right: 0; | ||
+ | border-radius: 3px 0 0 3px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Caption text */ | ||
+ | .survey1 .text { | ||
+ | color: #f2f2f2; | ||
+ | font-size: 15px; | ||
+ | padding: 8px 12px; | ||
+ | position: absolute; | ||
+ | bottom: 8px; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | /* Number text (1/3 etc) */ | ||
+ | .survey1 .numbertext { | ||
+ | color: #f2f2f2; | ||
+ | font-size: 12px; | ||
+ | padding: 8px 12px; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | /* The dots/bullets/indicators */ | ||
+ | .survey1 .dot { | ||
+ | cursor: pointer; | ||
+ | height: 15px; | ||
+ | width: 15px; | ||
+ | margin: 0 2px; | ||
+ | background-color: #bbb; | ||
+ | border-radius: 50%; | ||
+ | display: inline-block; | ||
+ | transition: background-color 0.6s ease; | ||
+ | } | ||
+ | |||
+ | .survey1 .active, .dot:hover { | ||
+ | background-color: #717171; | ||
+ | } | ||
+ | |||
+ | /* Fading animation */ | ||
+ | .survey1 .fade { | ||
+ | -webkit-animation-name: fade; | ||
+ | -webkit-animation-duration: 1.5s; | ||
+ | animation-name: fade; | ||
+ | animation-duration: 1.5s; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes fade { | ||
+ | from {opacity: .4} | ||
+ | to {opacity: 1} | ||
+ | } | ||
+ | |||
+ | @keyframes fade { | ||
+ | from {opacity: .4} | ||
+ | to {opacity: 1} | ||
+ | } | ||
+ | |||
+ | /* On smaller screens, decrease text size */ | ||
+ | @media only screen and (max-width: 300px) { | ||
+ | .survey1 .prev, .next,.text {font-size: 11px} | ||
+ | } | ||
/* Slideshow container */ | /* Slideshow container */ | ||
− | .slideshow-container { | + | .survey .slideshow-container { |
max-width: 1000px; | max-width: 1000px; | ||
position: relative; | position: relative; | ||
Line 1,762: | Line 1,854: | ||
/* Next & previous buttons */ | /* Next & previous buttons */ | ||
− | .prev, .next { | + | .survey .prev, .next { |
cursor: pointer; | cursor: pointer; | ||
position: absolute; | position: absolute; | ||
Line 1,780: | Line 1,872: | ||
/* Position the "next button" to the right */ | /* Position the "next button" to the right */ | ||
− | .next { | + | .survey .next { |
right: 0; | right: 0; | ||
border-radius: 3px 0 0 3px; | border-radius: 3px 0 0 3px; | ||
Line 1,787: | Line 1,879: | ||
/* Caption text */ | /* Caption text */ | ||
− | .text { | + | .survey .text { |
color: #f2f2f2; | color: #f2f2f2; | ||
font-size: 15px; | font-size: 15px; | ||
Line 1,798: | Line 1,890: | ||
/* Number text (1/3 etc) */ | /* Number text (1/3 etc) */ | ||
− | .numbertext { | + | .survey .numbertext { |
color: #f2f2f2; | color: #f2f2f2; | ||
font-size: 12px; | font-size: 12px; | ||
Line 1,807: | Line 1,899: | ||
/* The dots/bullets/indicators */ | /* The dots/bullets/indicators */ | ||
− | .dot { | + | .survey .dot { |
cursor: pointer; | cursor: pointer; | ||
height: 15px; | height: 15px; | ||
Line 1,818: | Line 1,910: | ||
} | } | ||
− | .active, .dot:hover { | + | .survey .active, .dot:hover { |
background-color: #717171; | background-color: #717171; | ||
} | } | ||
/* Fading animation */ | /* Fading animation */ | ||
− | .fade { | + | .survey .fade { |
-webkit-animation-name: fade; | -webkit-animation-name: fade; | ||
-webkit-animation-duration: 1.5s; | -webkit-animation-duration: 1.5s; | ||
Line 1,842: | Line 1,934: | ||
/* On smaller screens, decrease text size */ | /* On smaller screens, decrease text size */ | ||
@media only screen and (max-width: 300px) { | @media only screen and (max-width: 300px) { | ||
− | + | .survey .prev, .next,.text {font-size: 11px} | |
} | } | ||
.survey { | .survey { | ||
+ | width:50%!important; | ||
+ | margin-left: 28vw; | ||
+ | } | ||
+ | |||
+ | .survey1 { | ||
width:50%!important; | width:50%!important; | ||
margin-left: 28vw; | margin-left: 28vw; |
Revision as of 01:02, 18 October 2018