

h1 { 
    font-family: 'Montserrat'; 
    text-align: center; 
    padding-bottom: 30px; 
    margin-top:0; 
    font-size: 18px; 
    font-weight:400; 
    letter-spacing: 2px;
    text-transform:uppercase;
}
body{
    background-color:#000000;
    color:#fff;
}

.finddemo_bg{
    max-width: 900px;
    background-color: #ffffff;
    color: #000000;
    margin: auto;
    margin-top: 70px;
    margin-bottom: 70px;
    padding: 70px 70px 50px 70px;
    border-radius: 4px;
}
.finddemo_title{
    text-align: center;
    font-size: 23px;
    letter-spacing: 2px;
}
.finddemo_button {
    text-align: center;
    padding: 45px;
}
.finddemo_button a{
    border-radius: 8px;
    padding: 17px;
    font-size: 18px;
    color: #ffffff;
    background-color: #88b04b;
    box-shadow: 4px 4px 9px rgba(128, 128, 128, 0.5);
}
.finddemo_button a:hover{
  text-decoration: none;
  background-color: #67b168;
}

.logofooter{
    display: inline-block;
    padding: 60px;
    width: 100%;
    text-align: center;
}

    
#header{
    background: #fff;
    text-align: center;
    color: #000;
    font-size: 10px;
    padding: 65px 10px 45px 10px;
}
.header-logo{
    padding-bottom: 18px;
}
.author-name{
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    padding-top: 5px;
}
.croma-divider{
    margin-top:-30px;
}
.croma-divider:before, .croma-divider:after{
    content: "";
    width:1px;
    height:30px;
    background: #000;
    display:block;
    margin: 0 auto;
}
.croma-divider:after{
    background: #fff;
}
.container{
    padding-top: 100px;
}
.content-title{
    text-transform: uppercase;
    text-align: center;
    font-weight:700;
    letter-spacing: 4px;
    padding-top:38px;
}

img {
  max-width: 100%;
  width: auto\9;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

.newdemo {
	padding-bottom: 50px;
}

.computer-empty>a{
  position: relative;
  display: inline-block;
}

.computer-empty {
	margin-bottom: 25px;
	overflow: hidden;
	position: relative;
	width: 100%;
  text-align: center;
}
.screen-landing:hover  {
	cursor: pointer;

}
	




.computer-empty img.computer {
	width: 100%;
}

.computer-screen {
	overflow: hidden;
	position: absolute;
	height: 158px;
	width: 282px;
	left: 36px;
	top: 14px;
}
.screen-landing {
	left: 0;
	line-height: 0;
	position: absolute;
	width: 100%;
	transition: all 6s;
	-o-transition: all 6s;
	-ms-transition: all 6s;
	-moz-transition: all 6s;
	-webkit-transition: all 6s;
}

@media (min-width: 1480px){
  .container {
    width: 1480px;
  }
  .computer-screen {
    height: 205px;
    width: 366px;
    left: 46px;
    top: 18px;
  }
}


@media only screen and (min-width:992px) and (max-width: 1199px){
	
	.computer-screen {
		height: 129px;
		width: 229px;
		left: 29px;
		top: 11px;
	}

}

@media only screen and (min-width:768px) and (max-width: 991px){
    
	.computer-screen {
		height: 95px;
		width: 170px;
		left: 21px;
		top: 8px;
	}	
}


@media only screen and (max-width: 768px) {
  .computer-empty img.computer{
    width:250px;
  }

	.computer-empty {
		max-width: 545px;
		margin-left: auto;
		margin-right: auto;
	}
	
	
	.computer-screen {
		height: 113px;
    width: 202px;
    left: 25px;
    top: 10px;
	}

  .finddemo_bg{
    padding: 45px 25px;
    margin-bottom: 0;
  }
  .finddemo_button {
    text-align: center;
    padding: 25px 25px 0px;
  }
  .finddemo_title{
    font-size: 11px;
  }
  .finddemo_button a{
    border-radius: 0;
    font-size: 14px;
    color: #88b04b;
    padding: 0;
    background-color: transparent;
    box-shadow: initial;
  }
  .finddemo_button a:hover{
    background-color: transparent;
  }
}

@media only screen and (max-width: 606px) {
  .header-logo{
    width: 110px;
  }
  
  .computer-empty h1{
    font-size: 12px;
    line-height: 18px;
    padding-bottom: 0;
  }

	.computer-empty img.computer{
    width: 155px;
  }

	.computer-screen {
    height: 70px;
    width: 125px;
    left: 16px;
    top: 6px;
	}

	.computer-empty {
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (max-width: 420px) {
  .computer-empty img.computer{
    width: 105px;
  }
     
	.computer-screen {
		height: 48px;
    width: 86px;
    left: 10px;
    top: 4px;
	}

	.computer-empty {
		max-width: 230px;
		margin-left: auto;
		margin-right: auto;
	}
}




/*Animation*/
.croma-animate-1{
    animation-duration: 2s;
    animation-name: fadein-1;
}
.croma-animate-2{
    animation-duration: 2s;
    animation-name: fadein-2;
}
.croma-animate-3{
    animation-duration: 2s;
    animation-name: fadein-3;
}
.croma-animate-4{
    animation-duration: 2s;
    animation-name: fadein-4;
}
.croma-animate-5{
    animation-duration: 2s;
    animation-name: fadein-5;
}
@keyframes fadein-1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein-2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes fadein-3 {
  0% {
    opacity: 0;
  }
    20% {
    opacity: 0;
  }

  70% {
    opacity: 1;
  }
}
@keyframes fadein-4 {
  0% {
    opacity: 0;
  }
    30% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }
}
@keyframes fadein-5{
  0% {
    opacity: 0;
  }
    40% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.col-lg-4 .computer-empty{
    animation-duration: 3.5s;
}

.col-lg-4:nth-child(1) .computer-empty{
    animation-name: fadein-c1;
}
@keyframes fadein-c1{
  0% {
    opacity: 0; 
  }
    35% {
    opacity: 0;
        margin-top: -6px;
        margin-bottom:31px;
  }

  60% {
    opacity: 1;
      margin-top: 0px;
      margin-bottom:25px;
      
  }
}

.col-lg-4:nth-child(2) .computer-empty{
    animation-name: fadein-c2;
}
@keyframes fadein-c2{
  0% {
    opacity: 0;
  }
    40% {
    opacity: 0;
        margin-top: -6px; 
        margin-bottom:31px;
  }

      68% {
    opacity: 1;
    margin-top: 0px;
    margin-bottom:25px;
  }
}

.col-lg-4:nth-child(3) .computer-empty{
    animation-name: fadein-c3;
}
@keyframes fadein-c3{
  0% {
    opacity: 0;
     
  }
    43% {
    opacity: 0;
    margin-top: -6px;
    margin-bottom:31px;
  }
      88% {
    opacity: 1;
    margin-top: 0px;
    margin-bottom:25px;      
    }
}

.col-lg-4:nth-child(4) .computer-empty{
    animation-name: fadein-c4;
}
@keyframes fadein-c4{
  0% {
    opacity: 0;
  }
  46% {
    opacity: 0;
    margin-top: -6px; 
    margin-bottom:31px;
  }
  91% {
    opacity: 1;
    margin-top: 0px;
    margin-bottom:25px;  
  }
}

.col-lg-4:nth-child(5) .computer-empty{
    animation-name: fadein-c5;
}
@keyframes fadein-c5{
  0% {
    opacity: 0;
  }
  48% {
    opacity: 0;
    margin-top: -6px;
    margin-bottom:31px;
  }
  93% {
    opacity: 1;
    margin-bottom:25px;
  }
        100% {
    margin-top: 0px;
  }
}
.col-lg-4:nth-child(6) .computer-empty{
    animation-name: fadein-c6;
}
@keyframes fadein-c6{
  0% {
    opacity: 0;     
  }
  49% {
    opacity: 0;
    margin-top: -6px; 
    margin-bottom:31px; 
  }
  94% {
    opacity: 1;
    margin-top: 0px; 
    margin-bottom:25px;  
  }
}
.col-lg-4:nth-child(7) .computer-empty{
    animation-name: fadein-c6;
}
@keyframes fadein-c6{
  0% {
    opacity: 0;     
  }
  49% {
    opacity: 0;
    margin-top: -6px; 
    margin-bottom:31px; 
  }
  94% {
    opacity: 1;
    margin-top: 0px; 
    margin-bottom:25px;  
  }
}
.col-lg-4:nth-child(8) .computer-empty{
    animation-name: fadein-c6;
}
@keyframes fadein-c6{
  0% {
    opacity: 0;     
  }
  49% {
    opacity: 0;
    margin-top: -6px; 
    margin-bottom:31px; 
  }
  94% {
    opacity: 1;
    margin-top: 0px; 
    margin-bottom:25px;  
  }
}
.col-lg-4:nth-child(9) .computer-empty{
    animation-name: fadein-c6;
}
@keyframes fadein-c6{
  0% {
    opacity: 0;     
  }
  49% {
    opacity: 0;
    margin-top: -6px; 
    margin-bottom:31px; 
  }
  94% {
    opacity: 1;
    margin-top: 0px; 
    margin-bottom:25px;  
  }
}
.col-lg-4:nth-child(10) .computer-empty{
    animation-name: fadein-c6;
}
@keyframes fadein-c6{
  0% {
    opacity: 0;     
  }
  49% {
    opacity: 0;
    margin-top: -6px; 
    margin-bottom:31px; 
  }
  94% {
    opacity: 1;
    margin-top: 0px; 
    margin-bottom:25px;  
  }
}