/*
Theme Name: Arlo
Theme URI: http://arlo.select-themes.com
Description: A Fresh Theme for Tech & Digital Businesses
Author: Select Themes
Author URI: http://demo.select-themes.com
Version: 1.0.2
Text Domain: arlo
License: GNU General Public License
License URI: licence/GPL.txt

CSS changes can be made in files in the /css/ folder. This is a placeholder file required by WordPress, so do not delete it.

*/
.qodef-normal-logo {
  /*width: 75px;*/
}
.qodef-controls-holder {
  display: none;
}
body { font-family:sans-serif; margin: 0px;}
.wrap-clock {
    background: transparent none repeat scroll 0 0;
    background-size: cover;
    background-position: center;
}
div { padding-bottom:0em; }
div.cool-clock {
  margin: -100px auto 0 auto;
  max-width: 500px;
  padding: 150px 0;
  position: relative;
  width: 100%;
}

@media only screen and (max-width: 1024px) {
  div.cool-clock {
    margin: 10px auto 0 auto;
    max-width: 500px;
    padding: 150px 0;
    position: relative;
    width: 100%;
  }
  .qodef-mobile-header{
    display: none!important;
  }
}

.cool-clock{
    background: rgba(0, 0, 0, 0) url("assets/img/Index_logo.png") no-repeat scroll 0 0;
    background-position: center;

}
canvas{
    position: relative;
    z-index: 9999;
}
img.bg {
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 18%;
    width: 200px;
    z-index: 10;
}
.action {
  text-align: center;
}
.action .btn {
  background: transparent none repeat scroll 0 0;
  border: 2px solid #6bcaba;
  border-radius: 30px;
  color: #6bcaba;
  font-size: 15px;
  margin: 0 15px;
  padding: 10px 15px;
  text-align: center;
  width: 150px;
  display:inline-block;
}
.action .btn:hover{
  color: #f4a88e;
  border: 2px solid #f4a88e;
} 
.icon1 {
  cursor: pointer;
  left: 102px;
  position: absolute;
  top: 171px;
  width: 70px;
  z-index: 9999;
}
.icon2 {
  cursor: pointer;
  left: 328px;
  position: absolute;
  top: 171px;
  width: 70px;
  z-index: 9999;
}
.icon3 {
  left: -3px;
  position: absolute;
  top: 365px;
  width: 70px;
  z-index: 9999;
cursor: pointer;
}
.icon4 {
  cursor: pointer;
  position: absolute;
  right: -3px;
  top: 365px;
  width: 70px;
}
.icon5 {
  cursor: pointer;
  left: 102px;
  position: absolute;
  top: 560px;
  width: 70px;
  z-index: 9999;
}
.icon6 {
  cursor: pointer;
  left: 328px;
  position: absolute;
  top: 560px;
  width: 70px;
  z-index: 9999;
}
.action {
  position: absolute!important;
}
.page-id-5338 .qodef-section {
  height: 370px!important;
}

@media screen and (max-width: 800px){

    .responsive-menu-item-link:hover{
      background-color: #898989 !important;
  }
  	#responsive-menu-container{
			width: 70%;
    	left: 0;
    	background: #212121;
    	transition: transform 0.5s;
    	text-align: left;
	}
  #responsive-menu-additional-content{
  	display:none;
  }
  button#responsive-menu-button{
  	position:fixed !important;
  }
  #responsive-menu-container #responsive-menu li.responsive-menu-item a{
  	line-height: 40px;
    border-top: 1px solid #212121;
    border-bottom: 1px solid #212121;
    color: #fff;
    background-color: #212121;
    font-size:13px;
  }
}
@media screen and (max-width: 320px){
      .responsive-menu-item-link:hover{
      background-color: #898989 !important;
  }
  	#responsive-menu-container{
			width: 70%;
    	left: 0;
    	background: #212121;
    	transition: transform 0.5s;
    	text-align: left;
     
	}
  #responsive-menu-additional-content{
  	display:none;
  }
  button#responsive-menu-button{
  	position:fixed !important;
  }
  #responsive-menu-container #responsive-menu li.responsive-menu-item a{
		line-height: 32px;
    border-top: 1px solid #212121;
    border-bottom: 1px solid #212121;
    color: #fff;
    background-color: #212121;
    font-size: 12px;
  }
}
@media screen and (max-width: 480px) {
.action-intro .btn.btn-default img {
  width: 250px;
}
.action .btn {
  margin: 0 15px 10px;
}
.wpb_raw_code.wpb_content_element.wpb_raw_html.clock {
  top: -130px!important;
}
    div.cool-clock {
  text-align: center;
}
canvas {
  height: 450px !important;
  position: relative;
  width: 450px !important;
  z-index: 9999;
}
.icon1 {
  cursor: pointer;
  left: 119px;
  position: absolute;
  top: 173px;
  width: 60px;
  z-index: 9999;
}
.icon2 {
  cursor: pointer;
  left: 320px;
  position: absolute;
  top: 173px;
  width: 60px;
  z-index: 9999;
}
.icon4 {
  cursor: pointer;
  position: absolute;
  right: 23px;
  top: 347px;
  width: 60px;
}
.icon3 {
  cursor: pointer;
  left: 23px;
  position: absolute;
  top: 347px;
  width: 60px;
  z-index: 9999;
}
.icon6 {
  cursor: pointer;
  left: 322px;
  position: absolute;
  top: 520px;
  width: 60px;
  z-index: 9999;
}
.icon5 {
  cursor: pointer;
  left: 119px;
  position: absolute;
  top: 520px;
  width: 60px;
  z-index: 9999;
}
.cool-clock {
  background-size: 125px auto !important;
}
}
@media screen and (max-width: 414px) {
    div.cool-clock {
  text-align: center;
}
canvas {
  height: 400px !important;
  width: 400px !important;
}
.icon1 {
  left: 107px;
  top: 171px;
  width: 50px;
}
.icon2 {
  left: 286px;
  top: 171px;
  width: 50px;
}
.icon4 {
  right: 20px;
  top: 323px;
  width: 50px;
}
.icon3 {
  left: 20px;
  top: 324px;
  width: 50px;
}
.icon6 {
  left: 272px;
  top: 480px;
  width: 50px;
}
.icon5 {
  left: 92px;
  top: 480px;
  width: 50px;
}
}
@media screen and (max-width: 375px) {
    div.cool-clock {
  text-align: center;
}
canvas {
  height: 300px !important;
  width: 300px !important;
}
.icon1 {
  left: 116px;
  top: 165px;
  width: 40px;
}
.icon2 {
  left: 250px;
  top: 165px;
  width: 40px;
}
.icon4 {
  right: 49px;
  top: 280px;
  width: 40px;
}
.icon3 {
  left: 49px;
  top: 280px;
  width: 40px;
}
.icon6 {
  left: 250px;
  top: 395px;
  width: 40px;
}
.icon5 {
  left: 118px;
  top: 395px;
  width: 40px;
}
}
@media screen and (max-width: 367px) {
.icon1 {
  left: 107px;
  top: 165px;
  width: 40px;
}
.icon2 {
  left: 241px;
  top: 165px;
  width: 40px;
}
.icon4 {
  right: 41px;
  top: 280px;
  width: 40px;
}
.icon3 {
  left: 41px;
  top: 280px;
  width: 40px;
}
.icon6 {
  left: 241px;
  top: 395px;
  width: 40px;
}
.icon5 {
  left: 107px;
  top: 395px;
  width: 40px;
}
}
@media screen and (max-width: 325px) {
.icon1 {
  left: 87px;
  top: 165px;
  width: 40px;
}
.icon2 {
  left: 221px;
  top: 165px;
  width: 40px;
}
.icon4 {
  right: 23px;
  top: 280px;
  width: 40px;
}
.icon3 {
  left: 23px;
  top: 280px;
  width: 40px;
}
.icon6 {
  left: 219px;
  top: 395px;
  width: 40px;
}
.icon5 {
  left: 89px;
  top: 395px;
  width: 40px;
}
}
.action {
  text-align: center;
  width: 100%;
}
.page-id-5338 .qodef-page-header {
  display: none;
}
.page-id-5338 .qodef-title.qodef-breadcrumb-type {
  display: none;
}
.page-id-5338 footer {
  display: none;
}
.action-intro {
  text-align: center;
}
.action-intro .btn.btn-default {
    display: block;
    line-height: 0;
    margin-top: -45px;
}
.btn.btn-default:hover .active {
  display: block !important;
  margin: 0 auto;
  text-align: center;
}
.btn.btn-default:hover .no-active {
  display: none;
}
.vc_row.wpb_row.vc_row-fluid.qodef-section.section-one.qodef-content-aligment-left {
    position: relative;
}
.wpb_raw_code.wpb_content_element.wpb_raw_html.clock {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.page-id-5338 .qodef-mobile-header {
  display: none;
}
.page-id-5338 {
  background: #6cc5b3 none repeat scroll 0 0 !important;
}
.action-intro {
  position: relative;
  text-align: center;
  z-index: 99999;
}
.cool-clock img.active {
    display: none;
}
.cool-clock div:hover .no-active {
    display: none;
}
.cool-clock div:hover .active {
    display: block !important;
}
.icon4 {
  z-index: 9999;
}
.rev_slider:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  pointer-events: none;

  /* black overlay with 50% transparency */
  background: rgba(0, 0, 0, 0.5);
}
.rev_slider::after {
  background: transparent none repeat scroll 0 0 !important;
  content: "";
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 99;
}