.flex {
  display: flex;
}

.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}

.wrapper{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: auto;}

.always{
   z-index: 50;
   text-align: center;
   position: fixed;
   left: 0; bottom: 0;
   width: 100%;
   background-color: rgba(64,64,64,0.8);}

.always h3{
   width: 80vw;
   font-weight: lighter;
   display: inline-block;
   margin: 0.5rem;}

.always h3,
.always a{
   color: white;}

.always button{
    margin: 0.5rem;
    width: 8rem;}

.always .cross{
    z-index: 10000;
    cursor: pointer;
    width: 20px; height: 20px;
    float: right;
    right: 0;
    margin: 0.5rem;
    background-image: url(../images/cross.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;}

.dimmer{
   position: absolute;
   top:0;
   width: 100%;
   height: 100%;
   background-color: white;
   animation-name: backFrames;
   animation-duration: 400ms;
   animation-iteration-count: 1;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;}

@keyframes backFrames{
   0% {
      opacity: 1.0;}
   100% {
      opacity: 0.0;}}

/*========================== Laptop w/ Zoiper 5 ==========================*/

.headerImage .laptop{
   position: absolute;
   top: 15vh; right: 40%;
   height: 65vh; width: auto;
   animation-name: deivceFrames;
   animation-duration: 500ms;
   animation-delay: 100ms;
   animation-timing-function: ease-in-out;}

@keyframes deivceFrames{
   0% {
      opacity: 0.0;
      right: 60vw;}
   100% {
      opacity: 1.0;}}

.laptop img.device{
   z-index: 21;
   position: relative;
   width: auto; height: 100%;}

.laptop img.new{
   z-index: 22;
   position: absolute;
   right: 68%; top: 14%}

.laptop img.application{
   z-index: 23;
   position: absolute;
   right: 16%; top: 12%;
   height: 65%; width: auto;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
   animation-name: appFrames;
   animation-duration: 500ms;
   animation-delay: 200ms;
   animation-timing-function: ease-in-out;}

@keyframes appFrames{
   0% {
      opacity: 0.0;
      right: 36%;}
   100% {
      opacity: 1.0;}}

.laptop img.application.classic{
   height: 45%;
   box-shadow: none;}

/*.headerImage #zoiper5 .textbox h1,
.headerImage #zoiper5 .textbox h2,
.headerImage #zoiper5 .textbox h3,
.headerImage #zoiper5 .textbox p,
.headerImage #zoiper5 .textbox ul{
   display: none;}*/

.headerImage #zoiper5 .textbox h1 {
    text-transform: uppercase;
    font-size: 4rem;
    font-weight: bolder;
}

.headerImage #zoiper5 .textbox h3 {
    font-size: 1.5em;
    line-height: 2.6rem;
    font-weight: 100;
}

.headerImage #zoiper5 .textbox h3:after {
    content: "";
    height: 8px;
    width: 20%;
    background: #f47920;
    position:absolute;
    bottom: 0;
    left: 0;
}



/*========================== Percent width ==========================*/

.w10{ width: 10%;}
.w15{ width: 15%;}
.w20{ width: 20%;}
.w25{ width: 25%;}
.w30{ width: 30%;}
.w35{ width: 35%;}
.w40{ width: 40%;}
.w45{ width: 45%;}
.w50{ width: 50%;}
.w55{ width: 55%;}
.w60{ width: 60%;}
.w70{ width: 70%;}

/*========================== SUB MENU ==========================*/

.submenu{
   z-index: 21;
   position: relative;
   width: 100%;
   background-color: #ecedee;
   display: flex;}

.submenu a{
   flex: 1;
   color: #616161;
   text-decoration: none;}

.submenu a div{
   position: relative;
   cursor: pointer;
   margin: 0;
   padding: 0;
   background-color: #ecedee;
   transition: background-color 300ms ease-out;}

.submenu:hover a div {
   background-color: #cecece;
}

/*
.submenu div:hover {
   color: inherit;
   text-decoration: underline;
   background-color: #FFF;
   transition: background-color 200ms ease-in-out;}
*/
.submenu a div::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 0;
   background-color: white;
   left: 0;
   bottom: 0;
   transition: height 150ms ease-in-out;
}

.submenu a div:hover::after {
   height: 100%;
}

.submenu a div p{
   display: block;
   color: #616161;
   text-decoration: none;
   text-align: center;
   margin: 0;
   padding: 1rem 0 1rem 0;
   position: relative;
   z-index: 2;}

/*========================== HEADER IMAGE ==========================*/

.headerImage{
   position: relative;
   overflow: hidden;
   margin: 0;
   padding: 0;
   top: 0; left: 0;
   width: 100%; height: 90vh;
   background-image: url(../images/background.jpg);
   background-position: center;
   background-attachment: fixed;
   background-color: rgba(0,0,0,0.5);
   background-blend-mode: multiply;
   background-size: cover;}

.headerImage .iPhone{
   z-index: 5;
   position: absolute;
   right: 55%;
   bottom: 0;
   width: 60%;
   height: 80%;
   background-image: url(../img/home_iPhone.png);
   background-position: bottom right;
   background-repeat: no-repeat;
   background-size: contain;
   animation-name: iFrames;
   animation-duration: 600ms;
   animation-delay: 0;
   animation-iteration-count: 1;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;}

@keyframes iFrames{
   0% {
      opacity: 0.0;
      right: 55%;}
   100% {
      opacity: 1.0;
      right: 45%;}}

.headerImage .android{
   z-index: 4;
   position: absolute;
   right: 45%;
   bottom: -30%;
   width: 60%;
   height: 80%;
   opacity: 0.0;
   background-image: url(../img/home_Android.png);
   background-position: right center;
   background-repeat: no-repeat;
   background-size: contain;
   animation-name: droidFrames;
   animation-duration: 600ms;
   animation-delay: 500ms;
   animation-iteration-count: 1;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;}

@keyframes droidFrames{
   0% {
      opacity: 0.0;
      bottom: -30%;}
   100% {
      opacity: 1.0;
      bottom: 0%;}}

.headerImage .desktop{
   z-index: 3;
   position: absolute;
   right: 45%;
   bottom: 0;
   width: 60%;
   height: 80%;
   opacity: 0.0;
   background-image: url(../img/home_desktop.png);
   background-position: right center;
   background-repeat: no-repeat;
   background-size: contain;
   animation-name: deskFrames;
   animation-duration: 400ms;
   animation-delay: 800ms;
   animation-iteration-count: 1;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;}

@keyframes deskFrames{
   0% {
      opacity: 0.0;
      bottom: -20%;}
   100% {
      opacity: 1.0;
      bottom: 0%;}}

.headerImage .desktop div{
   z-index: 10;
   position: relative;
   left: 33%;
   top: 3.5%;
   width: 60%;
   height: 62%;
   overflow: hidden;}

.headerImage  .desktop div img{
   position: absolute;
   left: 15%;}

/*========================== SLOGAN ==========================*/

.headerImage .rotation div .textbox,
.headerImage .nav{
   width: 460px;
   position: absolute;
   left: 60%;}

.headerImage .rotation div .textbox{
   z-index: 6;
   top: 200px;
   color: white;}

.headerImage .nav{
   bottom: 10%;
   text-align: center;
   z-index: 33;}

.headerImage .nav #buy,
.headerImage .nav a button{
   float: left;
   width: 50%;}

.headerImage .nav #buy{
   text-transform: uppercase;}

.headerImage .nav a button{
   margin: 0;}

.headerImage .nav img{
   margin: auto;
   display: inline;
   margin: 0 0.5rem 1rem 0;}

.headerImage .nav #buy,
.headerImage .nav #download{
   display: block;}

.headerImage .rotation{
   position: relative;
   width: 100%;}

.headerImage .rotation .slide{
   position: relative;
   display: block;
   width: 100%; height: 90vh;}

.headerImage .rotation .slide#zoiper5 .textbox img{
   position: relative;
   left: -100px; top: -150px;
   width: 500px; height: auto;}

.headerImage .rotation .slide#zoiper5 .coloring{
   width: 100%; height: 100%;
   position: absolute;
   top: 0; left: 0;
   /*background-color: rgba(0,0,0,0.5);*/}

.headerImage .handle{
   z-index: 50;
   cursor: pointer;
   position: absolute;
   top: calc(50% - 2rem);
   width: 3rem;
   height: 4rem;
   background-color: rgba(0,0,0,0.2);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 2rem;
   transition: width 100ms ease-in-out,
               background-color 300ms ease-in-out,
               background-position 100ms ease-in-out;}

.headerImage .shade:hover .handle{
   background-color: rgba(0,0,0,0.5);
   width: 4rem;}

.headerImage .handle img{
   width: 2rem;
   height: 2rem;
   position: absolute;
   top: calc(50% - 1rem);
   left: calc(50% - 1rem);
   float: left;
   margin: 0;}

.headerImage .handle.left{
   background-image: url('../images/handle_left.png');
   float: left;
   left: 0rem;}

.headerImage .handle.right{
   background-image: url('../images/handle_right.png');
   float: right;
   right: 0rem;}

.headerImage .slick-dots{
   top: 82vh;}

.headerImage .slick-dots li button::before{
   vertical-align: middle;
   transition: color 150ms ease-in-out,
               font-size 150ms ease-in-out;
   opacity: 0.5;
   color: white;}

.headerImage .slick-dots .slick-active button::before{
   font-size: 10px;
   color: #f47920;}

.headerImage .rotation div .textbox h1{
   margin: 0;
   padding: 0 0 0.5rem 0;
   color: white;
}

.headerImage .slogan .textbox h2{
   margin: 10px 0 0 0;}

.headerImage .slogan img{
   width: 273px;
   padding: 40px 0 15px 0;}

.headerImage #download{
   position: relative;
   width: 50%; height: 40px;
   float: right;
   text-transform: uppercase;}

.headerImage #download a{
   color: white;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);}

.headerImage #download a:hover{
   text-decoration: underline;}

/*========================== SLOGAN/SLIDES ==========================*/

.slogan .textbox{
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 280px;}

.headerImage .rotation div .textbox h2{
   padding-bottom: 0;}

.headerImage .rotation div .textbox ul{
   margin: 0;
   padding: 10px 0 0 30px;}

/*========================== Header @800px height ==========================*/

@media screen and (max-height: 800px){
   .headerImage{
      height: 700px;}

   .headerImage .rotation div .textbox{
      top: 150px;}

   .headerImage .slick-dots{
      top: 650px;}
}

/*========================== Header @700px height ==========================*/

@media screen and (max-height: 700px){
   .headerImage{
      height: 550px;}

   .headerImage .rotation div .textbox{
      top: 100px;}

   .headerImage .rotation div .textbox ul li{
      margin: 0;}
   .headerImage .slick-dots{
      top: 500px;}

   .always h3{
      width: 80vw;}

   }

/*==========================  BUTTON DEFINITION ==========================*/

button, a.btn{
   font-weight: bold;
   position: relative;
   display: inline-block;
   height: 40px;
   margin: 0 4px 0 0;
   padding: 0 15px 0 15px;
   z-index: 22;
   cursor: pointer;
   border: 0;
   font-size: 1em;
   color: white;
   transition: margin 200ms ease-in-out,
            box-shadow 200ms ease-in-out,
            background-color 200ms ease-in-out;}

button:hover, a.btn:hover{
   box-shadow: 0 5px 10px rgba(0,0,0,0.2);
   transition: margin 200ms ease-in-out,
            box-shadow 200ms ease-in-out,
            background-color 200ms ease-in-out;}

button.cyan{
   background-color: #00a0f3;}

button.cyan:hover{
   background-color: #0085ca;}

button.green{
   background-color: #6EB74B;}

button.green:hover{
   background-color: #186428;}

button.orange{
   background-color: #f47920;}

button.orange:hover{
   background-color: #da6b27;}

button.neutral{
   background-color: #646464;}

button.neutral:hover{
   background-color: #404040;}
button.white{
   background-color: white;
   color: black;
}

button.stroke{
   font-weight: normal;
   border: 1px solid #646464;
   background-color: initial;
   color: #646464;}

button.stroke:hover{
   background-color: rgba(100,100,100,0.15);
   box-shadow: none;}

#notbutton{
   color: #646464;
   background-color: rgba(255,255,255,0);}

#notbutton:hover{
   color: #646464;
   text-decoration: underline;
   box-shadow: 0 0 0 rgba(0,0,0,0.0);}

/*========================== FEATURES LAYERS BLOCK ==========================*/

.layers{
   position: relative;
   margin: 0 0 0 0;
   width: 100%;}

.layers div{
   overflow: hidden;
   position: relative;
   transition: height 200ms ease-in-out 0ms;}

/*========================== FOOTER ==========================*/

.footer{
   background-color: #404040;
   position: relative;
   display: -webkit-flex;
   width: 100%;
   margin: 0 0 0 0;
   padding: 0;
   border-top: 5px solid #f47920;}

.footer h2{
   color: white;
   margin-left: 10px;}

.footer .items{
   position: relative;
   display: inline;
   width: 1000px;
   margin: 0 auto 1rem auto;
   text-align: left;
   clear: right;}

.footer .items div{
   display: inline-block;
   position: relative;
   float: left;
   width: 20%;
   margin: 0;
   padding: 0;}

.footer .items div:nth-child(1) {
    width: 35%}

.footer .items div ul{
   color: #C8C8C8;
   list-style: none;
   padding: 0 0 0 0;
   margin: 0 20px 0 10px;}

.footer p{
   color: #C8C8C8;}

.footer a{
   color: #C8C8C8;}

.footer a:hover{
   text-decoration: underline;}

.footer #rights{
   padding-top: 2rem;
   width: 100%;
   text-align: center;}

/*========================== PAGES / ELEMENTS ==========================*/

.content{
  margin: 0 auto 50px;
  position: relative;
  max-width: 1000px;
  min-height: 300px;
  text-align: center;
}

/*============= reset above rule used in and messing up FAQ articles =============*/

.content span{
   color: #f47920;}

.side {
	display: inherit;
	flex-direction: column;
}

/*========================== PAGES COVER ==========================*/

.cover {
   position: relative;
   width: 100%;
   height: 200px;
   margin-bottom: 50px;
   background-size: 100% auto;
   background-image: url(../images/background.jpg);
   background-color: #404040;
   box-shadow: 0 5px 20px rgba(0,0,0,0.3);}

.cover h1{
   font-family: UbuntuLight;
   z-index: 10;
   position: relative;
   font-size: 3rem;
   line-height: 4rem;
   color: white;
   text-align: center;
   top: calc(50% - 0.5rem);}

.cover .background{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 460px;
   background-size: cover;
   background-position: center top;}

/*========================== SYSTEMS ==========================*/

.systems{
   left: 50%;
   transform: translateX(-50%);
   position: relative;
   margin-bottom: 50px;}

.systems button{
   position: absolute;
   float: right;
   right: 0;
   bottom: 0;}

.systems div{
   cursor: pointer;
   margin: 0 1px 0 1px;
   position: relative;
   float: left;
   display: inline-block;
   width: 140px;
   height: 140px;
   background-color: #c8c8c8;
   transition: height 200ms ease-in-out,
            background-color 100ms ease-in-out;}

.systems div:hover{
   background-color: #a8a8a8;
   transition: background-color 200ms ease-in-out;
   text-decoration: none;}

.systems div img{
   display: block;
   text-align: center;
   margin: 20px auto 20px auto;
   position: relative;
   width: 60px;
   height: 60px;
   transition: height 100ms ease-in-out 50ms,
               width 100ms ease-in-out 50ms;}

.systems p{
   display: block;
   color: white;
   font-weight: bold;
   width: 100%;
   margin: 0 0 0 0;
   font-size: 1rem;
   line-height: 1.4rem;
   text-align: center;
   position: relative;}

.systems p.auto{
   position: absolute;
   top: -30px;
   color: #151515;
   display: none;}

.systems h2{
   margin: 0;
   position: absolute;
   float: left;
   bottom: 0;}

.systems div.detected{
   background-color: #f47920;
   transition: height 100ms ease-in-out,
            background-color 100ms ease-in-out;}

.systems div.detected:hover{
   background-color: #e66b00;}

.systems div.detected p.auto{
   display: block;}

/*========================== CAROUSEL ==========================*/

.wrap{
   position: relative;
   width: 1000px;
   height: 20rem;}

.wrap .carousel{
   z-index: 20;
   position: absolute;
   width: 100%;
   background-color: #c8c8c8;
   margin-bottom: 50px;}

.shade{
   z-index: 40;
   position: absolute;
   width: 70px; height: 100%;
   cursor: pointer;}

.shade.left{
   background-position: right;
   left: 0;}

.shade.right{
   background-position: left;
   right: 0;}

.wrap .carousel div a{
   padding-left: 2rem;
   display: block;}

.wrap .carousel div a img{
   display: block;
   position: relative;
   float: left;
   height: 16rem;
   width: auto;
   margin: 2rem 0 2rem 0;
   padding: 0;}

.wrap .handle{
   z-index: 50;
   cursor: pointer;
   position: absolute;
   top: calc(50% - 2rem);
   width: 3rem;
   height: 3rem;
   background-color: #FFF;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 2rem;
   transition: width 100ms ease-in-out,
               background-position 100ms ease-in-out;}

.shade:hover .handle{
   width: 2rem;}

.wrap .handle img{
   width: 2rem;
   height: 2rem;
   position: absolute;
   top: calc(50% - 1rem);
   left: calc(50% - 1rem);
   float: left;
   margin: 0;}

.wrap .handle.left{
   background-image: url('../images/handle_left.png');
   float: left;
   left: 0rem;}

.wrap .handle.right{
   background-image: url('../images/handle_right.png');
   float: right;
   right: 0rem;}

.center{
   left: 50%;
   transform: translateX(-50%);}

/*========================== Mobile Version ==========================*/
@media screen and (max-width: 992px){
    .headerImage .laptop {
        right: 50%;
    } 
    .headerImage .rotation div .textbox, .headerImage .nav {
        left: 50%;
        width: 400px;
    }
}
@media screen and (max-width: 800px){

   .cover{
      height: 160px;
      background-color: rgba(0,0,0,0.3);
      background-blend-mode: multiply;
      background-size: cover;}

   .cover .background{
      position: relative;
      height: 100%;}

   .cover h1{
      font-size: 1.8rem;}

   .headerImage{
      height: 780px;}

   .headerImage .iPhone,
   .headerImage .android,
   .headerImage .desktop,
   .headerImage .desktop div,
   .headerImage .desktop div img,
   .headerImage .slick-dots,
   .slick-dots li button{
      display: none;}

   .submenu{
      height: initial;}

   .submenu div{
      display: block;
      text-align: center;
      vertical-align: middle;}

   .submenu a p{
      vertical-align: middle;
      top: initial; left: initial;
      transform: translate(0,0);
      position: relative;
      margin: 1rem auto 1rem auto;
      line-height: 1.2rem;}

   .headerImage .handle{
      width: 2rem;}

/*========================== Laptop w/ Zoiper 5 ==========================*/

   .headerImage .laptop#zoiper5,
   .headerImage #zoiper5 .textbox img{
      display: none;}

   .headerImage #zoiper5 .textbox h1,
   .headerImage #zoiper5 .textbox h2,
   .headerImage #zoiper5 .textbox h3,
   .headerImage #zoiper5 .textbox p,
   .headerImage #zoiper5 .textbox ul{
      display: block;}

   .headerImage .nav{
      left: 50%; bottom: 5%;
      width: 300px;
      transform: translateX(-50%);}

   .headerImage .rotation div .textbox{
      z-index: 6;
      left: 10%; top: 80px;
      width: 80%;
      color: white;}

   .headerImage .rotation div .textbox h1{
      text-align: center;
      font-size: 1.8rem;
      line-height: 2rem;
      margin: 0 0 20px 0;
      color: white;
    }

   .headerImage .rotation div .textbox h2{
      font-size: 1.2rem;
      line-height: 1.6rem;}

   .headerImage .rotation div .textbox ul li{
      margin-bottom: 0;}

   div.expanded{
      height: initial;}

   .slogan .textbox{
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 280px;}

   .headerImage .slogan img{
         width: 273px;
         padding: 40px 0 15px 0;}


    .systems{
        left: 0;
        transform: translate(0,0);
        width: initial;
        height: initial;
        margin: 0;}

    .systems div{
        width: 25%;
        height: 100px;
        padding: 0;
        margin: 0;}

   .systems div img{
      margin: 10px auto 10px auto;
      width: 40px;
      height: 40px;}

    .systems h2{
        position: relative;
        clear: both;
        padding: 1rem 0 1rem 0;}

   .systems button{
      margin: 1rem 0 1rem 0;
      position: relative;
      bottom: initial;
      float: left;
      clear: both;}

   .systems p{
      font-size: 0.8rem;
      line-height: 1.2rem;}

   .systems p.auto{
      color: white;
      position: relative;
      top: initial;
      display: none;}

/*========================== FOOTER ==========================*/

.footer{
   position: relative;
   width: 100%;
   height: initial;}

.footer .layer{
   position: inherit;
   top: 1rem;
   left: 0;
   width: 100%;
   height: initial;}

.footer .items{
   top: initial;
   width: initial;}

.footer .items div{
   display: block;
   position: relative;
   left: 10%;
   width: 30%;
   margin: 0; padding: 0;
   float: left;}

.footer .items div:nth-child(1),
.footer .items div:nth-child(3){
   width: 50%;}

.footer .items div ul{
   line-height: 1.4rem;}

.footer #rights{
   position: relative;
   clear: both;
   left: 0;
   bottom: initial;
   text-align: center;
   padding: 4rem 0 1rem 0;
   transform: translateX(0);}

.content{
   float: initial;
   width: auto;
   min-height: 300px;
   left: initial;
   padding: 0 2rem 0 2rem;
   transform: translateX(0);}

.wrap{
   transform: translate(0);
   width: 90%;}

.systems.mini{
   display: none;}

}

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

.headerImage .nav{
   width: 480px;
   bottom: 0;}

.headerImage .nav div,
.headerImage .nav #buy,
.headerImage #download{
   float: left;
   display: inline-block;}

.headerImage .nav #buy,
.headerImage #download{
   width: 7rem;}

.headerImage .nav #buy{
   margin: 0 1rem 0 1rem;}

}

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

.systems div{
   width: 50%;}

   .left.get-started{
      width: 100%;}

   img.left,
   img.right,
   .looking,
   .help{
      width: 100%;}


.footer .items div:nth-child(1),
.footer .items div:nth-child(4){
   width: 80%;}

.footer .items #middle{
   display: inline-block;
   left: 10%;
   width: 40%;
   float: left;}

}

.iconfa-caret-down {
    position: relative;
    top: 9px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;

    border-top: 8px solid #da6b27;
}

.contact-confrm {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}