.twentytwenty-right-arrow:before{
  display: block;
  position: absolute;
  content: '';
  width:60px;
  height:60px;
  top:-30px;
  left:-41px;
  background: #2c6ba4;
  border-radius: 50%;
  opacity:.7;
  box-shadow: 0 0 15px rgba(0,0,0,.4);
  -webkit-transform: scale(1.01);
  transform: scale(1.01);
  z-index: -1;
}

.twentytwenty-handle.remove-poi .twentytwenty-right-arrow:before{
	display: none;
}

.twentytwenty-right-arrow:before {
  -webkit-animation: moving 3s ease infinite;
  animation: moving 3s ease infinite;
}

@keyframes moving {
  0%         { left:-41px;}
  10%     { left:-51px;}
  25%     { left:-35px;}
  40%     { left:-41px;}
}

.imac-mockup,
.macbook-mockup,
.ipad-mockup,
.iphone-mockup{
  position: relative;
  width:100%;
}

.imac-mockup-content,
.macbook-mockup-content,
.ipad-mockup-content,
.iphone-mockup-content{
  position: absolute;
  overflow: hidden;
  z-index:0;
}

.imac-mockup.single-device {
  max-width:639px;
  margin-left:auto;
  margin-right:auto;
}

.imac-mockup-content{
  top:5.2%;
  left:3.6%;
  width:92.8%;
  height:64.2%;
}

.ipad-mockup-content{
  top:10.3%;
  left:5.9%;
  width:88.5%;
  height:79.3%;
}

.multiple-devices{
  position: relative;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:30px;
}

.multiple-devices .iphone-mockup{
  position: absolute;
  right:2%;
  bottom:-5%;
  max-width: 18%;
  z-index: 10;
}

.multiple-devices .ipad-mockup{
  position: absolute;
  left:1%;
  bottom:-5%;
  max-width: 32%;
  z-index: 10;
}


.synchronized-sliders .macbook-mockup-content.flexslider .flex-direction-nav .flex-next {
  right: -200px; 
}

.synchronized-sliders .macbook-mockup-content.flexslider:hover .flex-direction-nav .flex-next {
  right: -206px; 
}

.synchronized-sliders .macbook-mockup-content.flexslider .flex-direction-nav .flex-prev {
  left: -200px;
}

.synchronized-sliders .macbook-mockup-content.flexslider:hover .flex-direction-nav .flex-prev {
  left: -206px;
}


.flexslider.imac-mockup-content,
.flexslider.macbook-mockup-content,
.flexslider.ipad-mockup-content,
.flexslider.iphone-mockup-content{
  overflow: visible;
  margin: 0;
}

.devices-tab-content .imac-mockup-content{
  top:5.6%;
  left:17.3%;
  width:65.5%;
  height:63.7%;
}

.devices-tab-content .macbook-mockup-content{
  top:17%;
  left:17.3%;
  width:65.5%;
  height:71.4%;
}

.devices-tab-content .ipad-mockup-content{
  top:13.9%;
  left:34.6%;
  width:31.1%;
  height:71.4%;
}

.devices-tab-content .iphone-mockup-content{
  top:19.8%;
  left:40.75%;
  width:18.9%;
  height:59%;
}

/*Device rotation*/

.rotate-button{
  position:absolute;
  bottom:-22px;
  left:50%;
  margin-left: -15px;
  color:#cacacb;
  font-size: 32px;
  cursor: pointer;
  visibility: hidden;
  -webkit-transition: color .2s ease-out;
  transition: color .2s ease-out;
}

.bg-black .rotate-button{
  color: #fff;
}

.show-rotate .rotate-button{
  visibility: visible;
}

.touch .rotate-button,
.no-csstransforms .rotate-button{
	display:none !important;
}

.rotate-button:hover{
  color:#2c6ba4;
}

.devices-tab-content .allow-rotate{
  -webkit-transition:-webkit-transform .3s ease-out;
  transition:transform .3s ease-out;
}

.devices-tab-content .allow-rotate.rotate-screen{
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.devices-tab-content .allow-rotate .img-landscape{
  display: none;
}

.devices-tab-content .allow-rotate.rotate-screen .ipad-mockup-content img,
.devices-tab-content .allow-rotate.rotate-screen .iphone-mockup-content img{
  width: 100% !important;
}

.devices-tab-content .allow-rotate .ipad-mockup-content,
.devices-tab-content .allow-rotate .iphone-mockup-content{
  -webkit-transition: -webkit-transform .3s ease .3s,
    top 0s ease .4s,
    left 0s ease .4s,
    width 0s ease .4s,
    height 0s ease .4s;
  transition: transform .3s ease .3s,
    top 0s ease .4s,
    left 0s ease .4s,
    width 0s ease .4s,
    height 0s ease .4s;
}

.devices-tab-content .allow-rotate.rotate-screen .ipad-mockup-content,
.devices-tab-content .allow-rotate.rotate-screen .iphone-mockup-content{
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.devices-tab-content .iphone-mockup .rotation-wrapper{
  position: absolute;
  top:19.8%;
  left:40.75%;
  width:18.9%;
  height:59%;
}

.devices-tab-content .ipad-mockup .rotation-wrapper{
  position: absolute;
  top:13.9%;
  left:34.6%;
  width:31.1%;
  height:71.4%;
}

.devices-tab-content .rotation-wrapper .ipad-mockup-content,
.devices-tab-content .rotation-wrapper .iphone-mockup-content{
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.devices-tab-content .iphone-mockup.rotate-screen .iphone-mockup-content{
  top:22.8%;
  left:-40.5%;
  width:180%;
  height:55%;
}

.devices-tab-content .ipad-mockup.rotate-screen .ipad-mockup-content{
  top:12.3%;
  left:-16.1%;
  width:132%;
  height:75.7%;
}

.iphone-mockup-content.flexslider .flex-direction-nav .flex-next,
.ipad-mockup-content.flexslider .flex-direction-nav .flex-next,
.imac-mockup-content.flexslider .flex-direction-nav .flex-next,
.macbook-mockup-content.flexslider .flex-direction-nav .flex-next {
  right: -110px; 
}

.iphone-mockup-content.flexslider:hover .flex-direction-nav .flex-next,
.ipad-mockup-content.flexslider:hover .flex-direction-nav .flex-next,
.imac-mockup-content.flexslider:hover .flex-direction-nav .flex-next,
.macbook-mockup-content.flexslider:hover .flex-direction-nav .flex-next {
  right: -116px; 
}

.iphone-mockup-content.flexslider .flex-direction-nav .flex-prev,
.ipad-mockup-content.flexslider .flex-direction-nav .flex-prev,
.imac-mockup-content.flexslider .flex-direction-nav .flex-prev,
.macbook-mockup-content.flexslider .flex-direction-nav .flex-prev {
  left: -110px;
}

.iphone-mockup-content.flexslider:hover .flex-direction-nav .flex-prev,
.ipad-mockup-content.flexslider:hover .flex-direction-nav .flex-prev,
.imac-mockup-content.flexslider:hover .flex-direction-nav .flex-prev,
.macbook-mockup-content.flexslider:hover .flex-direction-nav .flex-prev {
  left: -116px;
}


/*------------------------
---Scrolling animations---
-------------------------*/

.scrolling-animation.fade-in{
	opacity:0;
	-webkit-transition:opacity 1.2s ease-out;
	transition:opacity 1.2s ease-in;
}

.scrolling-animation.fade-in.in{
	opacity:1;
}

.scrolling-animation.scale-in{
	opacity:0;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform:scale(0.5);
	-webkit-transition: -webkit-transform .8s cubic-bezier(.17,.89,.67,1.57), opacity 1s ease-out;
	transition: transform .8s cubic-bezier(.17,.89,.67,1.57), opacity 1s ease-out;
}

.scrolling-animation.scale-in.in{
	opacity:1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform:scale(1);
}

.scrolling-animation.fade-right{
	opacity:0;
	-webkit-transform: translateX(-60px);
	-moz-transform: translateX(-60px);
	-ms-transform: translateX(-60px);
	transform:translateX(-60px);
	-webkit-transition: -webkit-transform .6s ease-out,opacity 1s ease-out;
	transition: transform .6s ease-out,opacity 1s ease-in-out;
}

.scrolling-animation.fade-right.in{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}

.scrolling-animation.fade-left{
	opacity:0;
	-webkit-transform: translateX(60px);
	-moz-transform: translateX(60px);
	-ms-transform: translateX(60px);
	transform:translateX(60px);
	-webkit-transition: -webkit-transform .6s ease-out,opacity 1s ease-out;
	transition: transform .6s ease-out,opacity 1s ease-in-out;
}

.scrolling-animation.fade-left.in{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}

.scrolling-animation.fade-up{
	opacity:0;
	-webkit-transform: translateY(60px);
	-moz-transform: translateY(60px);
	-ms-transform: translateY(60px);
	transform:translateY(60px);
	-webkit-transition: -webkit-transform .6s ease-out,opacity 1s ease-in-out;
	transition: transform .6s ease-out,opacity 1s ease-in-out;
}

.scrolling-animation.fade-up.in{
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform:translateY(0px);
}

.scrolling-animation.fade-down{
	opacity:0;
	-webkit-transform: translateY(-60px);
	-moz-transform: translateY(-60px);
	-ms-transform: translateY(-60px);
	transform:translateY(-60px);
	-webkit-transition: -webkit-transform .6s ease-out,opacity 1s ease-in-out;
	transition: transform .6s ease-out,opacity 1s ease-in-out;
}

.scrolling-animation.fade-down.in{
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform:translateY(0px);
}

.scrolling-animation.d1{
	-webkit-transition-delay:.3s;
	transition-delay:.3s;
}

.scrolling-animation.d2{
	-webkit-transition-delay:.6s;
	transition-delay:.6s;
}

.scrolling-animation.d3{
	-webkit-transition-delay:.9s;
	transition-delay:.9s;
}

.scrolling-animation.d4{
	-webkit-transition-delay:1.2s;
	transition-delay:1.2s;
}

.touch .scrolling-animation.fade-in,
.disable-animations .scrolling-animation.fade-in{
	opacity:1;
}

.touch .scrolling-animation.scale-in,
.disable-animations .scrolling-animation.scale-in{
	opacity:1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform:scale(1);
}

.touch .scrolling-animation.fade-right,
.disable-animations .scrolling-animation.fade-right{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}

.touch .scrolling-animation.fade-left,
.disable-animations .scrolling-animation.fade-left{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}

.touch .scrolling-animation.fade-up,
.disable-animations .scrolling-animation.fade-up{
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform:translateY(0px);
}

.touch .scrolling-animation.fade-down,
.disable-animations .scrolling-animation.fade-down{
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform:translateY(0px);
}

/*Style Switcher (to be removed)*/
#style-switcher {
  position:fixed;
  z-index:999;
  top:150px;
  left:-122px;
  width:122px;
  background:#fff;
  padding:10px;
  border:1px solid #bcbdbf;
  -webkit-transition:left .3s ease-out .8s;
  transition:left .3s ease-out .8s;
}

#style-switcher:hover{
  left:-10px;
  -webkit-transition:left .4s ease-out;
  transition:left .4s ease-out;
}

#style-switcher .switch-to{
  display: inline-block;
  font-size: 12px;
  width:90px;
  margin:10px 0 0 10px;
  padding: 10px 0;
  background: #212223;
  color: #fff;
  text-align:center;
}

#style-switcher .switch-to:before{
  content: 'Dark ';
}

#style-switcher .switch-to.switch-to-light{
  background: #e8e8e8;
  color: #515253;
}

#style-switcher .switch-to.switch-to-light:before{
  content: 'Light ';
}

@media (max-width:767px){
  #style-switcher{
    display: none;
  }
}

#toggle-switcher {
	display:block;
	width:50px;
	height:50px;
	background:#fff;
	position:absolute;
	right:-50px;
	top:-1px;
	text-align:center;
	cursor:pointer;
	border:1px solid #bcbdbf;
	border-left:none;
}

#toggle-switcher [class*=fa]{
    font-size:32px;
    line-height:50px;
    color:#2c6ba4;
}

#style-switcher h1 {
    font-size:14px;
    text-align:center;
    color:#444547;
    margin:7px;
    margin-right:-10px;
}

#style-switcher ul {
    list-style:none;
    margin:0;
    padding:0;
}

#style-switcher ul li{
    display:block;
    width:40px;
    height:40px;
    margin:10px 0 0 10px;
    float:left;
    border-radius:0;
    cursor:pointer;
}

#style-switcher ul li#color-1{
    background:#2c6ba4;
}

#style-switcher ul li#color-2{
    background:#F25454;
}

#style-switcher ul li#color-3{
    background:#00AB66;
}

#style-switcher ul li#color-4{
    background:#E5C41A;
}

#style-switcher ul li#color-5{
    background:#EA8825;
}

#style-switcher ul li#color-6{
    background:#2568CB;
}

#style-switcher ul li#color-7{
    background:#8AD542;
}

#style-switcher ul li#color-8{
    background:#6B798F;
}