*, *:before, *:after { box-sizing: border-box; transition: all 0.2s ease-in;}

ul li:hover { -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; -ms-transition: 0.5s ease; transition: 0.5s ease; }

body { font-family: 'Open Sans', sans-serif; font-weight: 500; font-size: 16px; font-weight: 400; line-height: 1.8; margin: 0 auto; color: #333;  moz-font-feature-settings: "liga" on; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
.
p { margin: 0 auto; color: #676d76; }

ul { padding: 0; margin: 0 auto; }

ul li { list-style: none; }

a { cursor: pointer; text-decoration: none; transition: all 0.2s ease-in;}

button:focus, input:focus, a:focus { border: none; outline: none; }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }


h1, h2, h3 {font-family: 'Dosis', sans-serif;}
.shell {width: 80%; max-width: 1440px; margin: 0 auto;}
h2 {font-size: 2.5em; line-height: 1.5em; color: #1b1b1b; text-align: center;}


.btn-lg {font-size: 1.35em;}
.btn-md {font-size: 1.2em;}
.btn-sm {font-size: 1em;}

.green-btn { margin: 2em 0;  font-family: 'Dosis', sans-serif; font-weight: 700;  padding: 0.5em 2em; color: #fff; border-radius: 5px;  background: #2ecc71; position: relative; z-index: 1;}
.blue-btn { margin: 2em 0;  font-family: 'Dosis', sans-serif; font-weight: 700;  padding: 0.5em 2em; color: #fff; border-radius: 5px; background: #00aaf3; position: relative; z-index: 1;}
.yellow-l-btn { margin: 2em 0;  font-family: 'Dosis', sans-serif; font-weight: 700;  padding: 0.5em 2em; color: #fff; border-radius: 5px; background: #eeb70c; position: relative; z-index: 1;}
.yellow-btn { margin: 2em 0;  font-family: 'Dosis', sans-serif; font-weight: 700;  padding: 0.5em 2em; color: #2c3e50; border-radius: 5px; text-shadow: 0 1px rgba(255, 255, 255, 0.41); position: relative; z-index: 1;    
background: rgba(241,199,14,1);
background: -moz-linear-gradient(top, rgba(241,199,14,1) 0%, rgba(235,171,10,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,199,14,1)), color-stop(100%, rgba(235,171,10,1)));
background: -webkit-linear-gradient(top, rgba(241,199,14,1) 0%, rgba(235,171,10,1) 100%);
background: -o-linear-gradient(top, rgba(241,199,14,1) 0%, rgba(235,171,10,1) 100%);
background: -ms-linear-gradient(top, rgba(241,199,14,1) 0%, rgba(235,171,10,1) 100%);
background: linear-gradient(to bottom, rgba(241,199,14,1) 0%, rgba(235,171,10,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1c70e', endColorstr='#ebab0a', GradientType=0 );
}

.btn-round {border-radius: 50px;}

/*
.yellow-btn:hover:after{content: ''; z-index: -1; width: 100%; height: 100%; text-align: center; background: #2ecc71;  position: absolute; top: 0; left: 0; border-radius: 50px; margin: 0 auto;  animation: grow linear 0.5s; animation-iteration-count: 1; transform-origin: 50% 50%; -webkit-animation: grow linear 0.5s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -moz-animation: grow linear 0.5s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 50%; -o-animation: grow linear 0.5s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 50%; -ms-animation: grow linear 0.5s; -ms-animation-iteration-count: 1; -ms-transform-origin: 50% 50%;}@keyframes grow{0%{transform: scaleX(1.00) scaleY(1.00) ;}50%{transform: scaleX(1.10) scaleY(1.10) ;}100%{transform: scaleX(1.00) scaleY(1.00) ;}}@-moz-keyframes grow{0%{-moz-transform: scaleX(1.00) scaleY(1.00) ;}50%{-moz-transform: scaleX(1.10) scaleY(1.10) ;}100%{-moz-transform: scaleX(1.00) scaleY(1.00) ;}}@-webkit-keyframes grow{0%{-webkit-transform: scaleX(1.00) scaleY(1.00) ;}50%{-webkit-transform: scaleX(1.10) scaleY(1.10) ;}100%{-webkit-transform: scaleX(1.00) scaleY(1.00) ;}}@-o-keyframes grow{0%{-o-transform: scaleX(1.00) scaleY(1.00) ;}50%{-o-transform: scaleX(1.10) scaleY(1.10) ;}100%{-o-transform: scaleX(1.00) scaleY(1.00) ;}}@-ms-keyframes grow{0%{-ms-transform: scaleX(1.00) scaleY(1.00) ;}50%{-ms-transform: scaleX(1.10) scaleY(1.10) ;}100%{-ms-transform: scaleX(1.00) scaleY(1.00) ;}}
*/

.header {position: absolute; top: 0; width: 100%; top: 0em; padding: 0.3em 0; z-index: 9;}
.page .header {position: fixed; top: 0; background: #2c3e50; z-index: 9; }
.logo {position: absolute; width: 120px; height: 25px; left: 1.5em; top: 1.5em;}
.logo img {width: 100%;}

.sign-btns {position: absolute; right: 1.5em;  top: 0.5em; margin: 1em 0;}
.sign-btns ul li {display: inline-block; float: left;}
.sign-btns ul li:last-child {margin-left: 15px;}
.sign-btns ul li iframe {margin-top: -5px;}
.sign-btns .get-free-subscription {background: #2ecc71; font-family: 'Dosis', sans-serif; text-transform: uppercase; color: #fff;  padding: 0.5em 1em; border-radius: 5px; }
.sign-btns .get-free-subscription:hover {background: #26af60; transition: all 0.2s ease-in; }
.sign-btns .login-btn {background: #00adf3; font-family: 'Dosis', sans-serif; text-transform: uppercase; color: #fff;  padding: 0.5em 1em; border-radius: 5px; }
.sign-btns .login-btn:hover {background:#1191c5; transition: all 0.2s ease-in; }

.main-nav ul {text-align: center; margin: 1em 0;}
.main-nav ul li {font-family: 'Dosis', sans-serif; text-transform: uppercase;  display: inline-block; margin: 0 0.5em; border-top: 1px solid transparent; border-bottom: 1px solid transparent}
.main-nav ul li a {color: #fff; display: block;}
.main-nav ul li:hover a {color:#2ecc71; transition: all 0.2s ease-in; }
.main-nav ul li:hover {border-top: 1px solid #2ecc71; border-bottom: 1px solid #2ecc71;}

.hero {width: 100%; background: url(imgs/hero-bg.jpg); background-size: cover; text-align: center; transition: all; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.hero h2 {font-family: 'Dosis', sans-serif; font-size: 3.5em; font-weight: 700; text-align: center; color: #fff; margin: 0 auto; line-height: 1em;  text-shadow: 0 3px 2px rgba(0, 0, 0, 0.7);}
.hero .hero-sub-heading {text-align: center; color: #f0bf0e; font-size: 1.5em;  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);}

.start-now-form {display: inline-block; margin-top: 2em; border-radius: 25px; box-shadow: 0 0 50px rgba(230, 207, 77, 0.8);}
.start-now-form form {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;}
.input-wrap {background: #ffefb7; border-radius: 25px 0 0 25px; padding: 0.5em; display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;}
.taskys-domain {padding: 0 1.5em 0 0.5em; color: #a39976;}
.input-wrap ul {margin: 0 auto;}
.input-wrap ul li {display: inline-block;}
.input-wrap input {border-radius: 25px; border: 1px solid #ddd2a5; font-weight: 700; font-size: 1em; color: #3a494f; background: #fff; padding: 0.5em 0.5em 0.5em 1em;}
.hero .start-now-btn { border-radius: 0px 25px 25px 0px; font-family: 'Dosis', sans-serif; font-weight: 700; font-size: 1.5em; padding: 0.2em 1em; line-height: 1.8em; color: #3a494f; border: 0; box-shadow: inset 0 1px white;  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
background: rgba(245,215,19,1);
background: -moz-linear-gradient(top, rgba(245,215,19,1) 0%, rgba(237,181,11,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,215,19,1)), color-stop(100%, rgba(237,181,11,1)));
background: -webkit-linear-gradient(top, rgba(245,215,19,1) 0%, rgba(237,181,11,1) 100%);
background: -o-linear-gradient(top, rgba(245,215,19,1) 0%, rgba(237,181,11,1) 100%);
background: -ms-linear-gradient(top, rgba(245,215,19,1) 0%, rgba(237,181,11,1) 100%);
background: linear-gradient(to bottom, rgba(245,215,19,1) 0%, rgba(237,181,11,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5d713', endColorstr='#edb50b', GradientType=0 );
}


.hero .trial-sign {color: #fff; text-align: center; margin: 0 auto;}
.hero .trial-sign span.old { position: relative;  font-size: 1.4em; color: #fff; }
.hero .trial-sign span.old img{ position: absolute; width: 100%; top: 10%; opacity: 0.8;}
/*.hero .trial-sign span.old:after { font-family: 'FontAwesome'; content: '\f00d'; margin-right: 0.5em; color: red; position: absolute;}*/
.hero .trial-sign span.new {  font-weight: 700; color: #fff; font-size: 2em; display: inline-block; text-decoration: none; margin: 0 0.3em; font-family: 'Annie Use Your Telescope', cursive;}

.video-play {text-align: center; display: inline-block; position: relative; margin-top: 3em;}
.video-play img { position: absolute;  left: 0;  top: 2em;}
.play-btn-sign {font-family: 'Annie Use Your Telescope', cursive; font-size: 2em; color: #fff; line-height: 2;  display: block;}
.play-btn {width: 5em; height: 5em; border-radius: 50%; background: rgba(0, 173, 243, 0.8);   position: relative;  margin: 0 auto;}
.play-btn:hover {background: rgba(0, 173, 243, 1); transition: all 0.2s ease-in;}
.play-btn a {display: block; height: 5em;}
.play-btn:after { content: ''; width: 0; height: 0; border-top: 1em solid transparent; border-bottom: 1em solid transparent; border-left: 1.5em solid white; position: absolute; top: 1.5em; left: 2em;}


.video-pop {display: none; background: none; z-index: 12; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;  -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.video-pop.play-v {display: -webkit-box;display: -ms-flexbox;display: flex; background: rgba(44, 62, 80, 0.87); transition: all 0.5s ease-in;} 
.video-wrap {padding-top: 0.7em; position: relative; }
.video-wrap i.fa {color: #fff; font-size: 1.5em; position: absolute;  top: 0;  right: -0.7em; cursor: pointer; width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; border-radius: 50px; background: #2c3e50;}
.video-wrap i.fa:hover{color: #17bcb2;}
.video-wrap iframe {width: 640px; height: 360px; }
.section {padding: 5em 0 8em 0;}

.general {text-align: center;}
.general > p {text-align: center; font-size: 1.2em; margin: 2em 0;}
.general ul {text-align: center; margin-top: 5em;}
.general ul li {display: inline-block; transform: scale(0);  opacity: 0; width: 18%;   }
.general ul li:hover i {transform: scale(1.2);}
.general ul li i { font-size: 64px; }
.general ul li i.fa-users {color: #00adf3;-webkit-text-fill-color: #fff;-webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #00adf3; }
.general ul li i.fa-cubes {color: #2ecc71;-webkit-text-fill-color: #fff;-webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #2ecc71;  }
.general ul li i.fa-server {color: #efbe0d;-webkit-text-fill-color: #fff;-webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #efbe0d; }
.general ul li i.fa-check-circle {color: #e74c3c;-webkit-text-fill-color: #fff;-webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #e74c3c  }
.general ul li div {text-align: left;}
.general ul li p {margin-bottom: 0;}
.general ul li span.count { text-transform: uppercase; color: #1b1b1b; font-weight: 300; font-size: 2.8em; line-height: 1em;  margin: 0;}
.general ul li span {font-family: 'Dosis', sans-serif; text-transform: uppercase; font-weight: 700; font-size: 1em; color:#bebebe; }

.general ul li.out {transform: scale(1); opacity: 1; transition-property: transform , opacity;  transition-duration: 0.5s;  transition-timing-function: cubic-bezier(0.25, 0.26, 0.49, 1.46);}



.features {width: 100%; position: relative;}
.features video {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: -1;}
.features-home {width: 40%;}
#features-home li i {background:#00adf3; width: 2em; height: 2em; border-radius: 50%; font-size: 3em; text-align: center; line-height: 2em; color: #fff; display: block;}
#features-home li span {display: block; font-family: 'Dosis', sans-serif; font-size: 2em; color: #1b1b1b; font-weight: 700; margin: 0.5em 0;}
#features-home li a {display: inline-block;}


.features-home .bx-pager { position: absolute; bottom: -50px; }
.features-home .bx-wrapper { position: relative; }
.features-home .bx-controls-direction { display: none; }
.features-home .bx-wrapper .bx-pager.bx-default-pager a { background: #aeaeae; text-indent: -9999px; display: block; width: 10px; height: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin: 0 auto; }
.features-home .bx-wrapper .bx-pager.bx-default-pager a.active { background: #00adf3; }
.bx-pager-item { display: inline-table; margin-right: 5px; }


.testimonial-info ul {text-align: center; }
.testimonial-info ul li {display: inline-block; vertical-align: middle;}
.testimonial-info ul li span {font-weight: 700; margin-left: 0.5em;}
#testimonials li > p {font-style: italic; font-size: 1.3em; margin-bottom: 1.5em; text-align: center;}
.testimonials .bx-pager { position: absolute; bottom: -50px; }
.testimonials .bx-wrapper { position: relative; }
.testimonials .bx-controls-direction { display: none; }
.testimonials .bx-wrapper .bx-pager.bx-default-pager {text-align: center; width: 100%;}
.testimonials .bx-wrapper .bx-pager.bx-default-pager a { background: #aeaeae; text-indent: -9999px; display: block; width: 14px; height: 14px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 14px; margin: 0 auto; }
.testimonials .bx-wrapper .bx-pager.bx-default-pager a.active { background: #efbe0d; }
.bx-pager-item { display: inline-table; margin-right: 5px; }

.software {background: url(imgs/software-for-bg.jpg) center ; background-size: cover;}
.software-shot {width: 48%; float: left;}
.software-shot video {width: 100%;}

.software-overview {width: 48%; float: right;}
.software-overview span {font-family: 'Dosis', sans-serif; text-transform: uppercase; color: #fff; font-size: 1.5em}
.software-overview p.collaboration-sign {font-family: 'Dosis', sans-serif; text-transform: uppercase; font-weight: 700; font-size: 2.5em; color: #91d3f0; margin: 0;}
.software-overview p.communication-sign {font-family: 'Dosis', sans-serif; text-transform: uppercase; font-weight: 700; font-size: 2.5em; color: #fdd685; line-height: 1em; margin: 0;}
.software-overview p.knowledge-sign {font-family: 'Dosis', sans-serif; text-transform: uppercase; font-weight: 700; font-size: 2.5em; color: #bce59f; margin: 0;}
.software-overview p.knowledge-sign span {font-family: 'Dosis', sans-serif; text-transform: uppercase; font-weight: 700; font-size: 1em; color: #bce59f; margin: 0;}
.software-overview p {color: #d9d9d9; margin: 1em 0;}
.software-overview .btn-lg {margin: 1em 0; display: inline-block;}


.clients p {text-align: center; font-size: 1.2em;}
.clients ul {text-align: center;}
.clients ul li {display: inline-block; margin: 0.8em;}
.clients ul li img {width: 100%;}

.page-title {background: url(imgs/page-title-bg.jpg) center; background-size: cover; text-align: center; padding-top: 4em;}
.page-title .shell {padding: 2em 0;}
.page-title h1 {font-size: 3em; color: #fff; margin: 0; line-height: 1; text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);}
.page-title p {    color: #bacad0;  font-size: 1.2em;}
.page-title a {color: #efbc0d;}
.page-title a:hover {text-decoration: underline; color: #fff; transition: all 0.2s ease-in;}
.page-title span {font-weight: 700; color:#efbc0d; }


/*PRICING PAGE*/
.plans ul.tabs {margin: 0; text-align: center;  padding: 0; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.plans ul.tabs li {display: inline-block; font-family: 'Dosis', sans-serif; font-weight: 600; font-size: 1.2em; color: #a3a7ad; position: relative; background: #f5f5f5; padding: 0.5em 1em;cursor: pointer;}
.plans ul.tabs li[rel~="monthly"] {border-radius: 25px 0 0 25px;}
.plans ul.tabs li[rel~="yearly"] {border-radius: 0 25px 25px 0;}
.plans ul.tabs li:hover {background: #2c3e50; color: #fff;}
.plans ul.tabs li.active {  color: #1d1d1d; 
background: rgba(245,215,19,1);
background: -moz-linear-gradient(top, rgba(245,215,19,1) 0%, rgba(237,181,11,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,215,19,1)), color-stop(100%, rgba(237,181,11,1)));
background: -webkit-linear-gradient(top, rgba(245,215,19,1) 0%, rgba(237,181,11,1) 100%);
background: -o-linear-gradient(top, rgba(245,215,19,1) 0%, rgba(237,181,11,1) 100%);
background: -ms-linear-gradient(top, rgba(245,215,19,1) 0%, rgba(237,181,11,1) 100%);
background: linear-gradient(to bottom, rgba(245,215,19,1) 0%, rgba(237,181,11,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5d713', endColorstr='#edb50b', GradientType=0 );
}
.plans .tab_container {clear: both; width: 100%; background: #fff; overflow: auto;}
.plans .tab_content {padding: 20px;display: none;}
.plans .tab_content h2 {margin: 0 auto; line-height: 2em;}
.plans .tab_drawer_heading { display: none; }

.pricing-tables > ul > li {display: inline-block; width: 30%;}
.pricing-tables ul li:nth-child(2) {margin: 0 3%}
.pricing-tables ul li ul li:nth-child(2) {margin: 0;}
.pricing-tables ul li .table {border:1px solid #e3e3e3; border-radius: 0 0 50px 0; padding: 1.5em; position: relative;}
.pricing-tables ul li .table .plan-price {display: flex;}
.pricing-tables ul li .table .plan-price .price-value {font-family: 'Dosis', sans-serif; font-size: 3.2em; line-height: 0.5em; color: #1d1d1d; font-weight: 700; flex-grow: 0;}
.pricing-tables ul li .table .plan-price .price-value sup {font-size: 0.5em;}
.pricing-tables ul li .table .plan-price .price-savings {font-family: 'Dosis', sans-serif; font-size: 1.5em; margin-left: 0.5em; line-height: 1;}
.pricing-tables ul li .table .plan-price .price-savings p {color: #919191;  text-decoration: line-through; line-height: 0.5em; margin: 0;}
#yearly .pricing-tables ul li .table .plan-price .price-savings p {display: inline-block; position: relative; text-decoration: none;}
#yearly .pricing-tables ul li .table .plan-price .price-savings p:after {content: ''; height: 2px; position: absolute; left: 0; background: red; top: 50%; width: 100%;}
#yearly .pricing-tables ul li .table .plan-price .price-savings span {display: block;}
.pricing-tables ul li .table ul {margin: 2em 0;}
.pricing-tables ul li .table ul li {display: block; padding-bottom: 0.5em; border-bottom: 1px solid #e3e3e3; color: #1d1d1d; font-weight: 700; margin-top: 0.5em;}
.pricing-tables ul li .table ul li.disabled, .pricing-tables ul li .table ul li.disabled i {color: #919191; text-decoration: line-through;}
.pricing-tables ul li .table ul li:last-child {border-bottom: 0;}
.pricing-tables ul li .table .btn-lg { text-transform: uppercase; font-weight: 500;}
.pricing-tables ul li .table > i {position: absolute; top: 0.5em;  right: 0.5em;  font-size: 5em;  color: #eee;}

.plan-studio {color: #2ecc71;}
.plan-studio p.name {color: #2ecc71; font-family: 'Dosis', sans-serif; font-size: 3em; margin: 0;}
.plan-studio ul li i {color: #2ecc71; margin-right: 0.5em;}

.plan-corporate {color: #00aaf3;}
.plan-corporate p.name {color: #00aaf3; font-family: 'Dosis', sans-serif; font-size: 3em; margin: 0;}
.plan-corporate ul li i {color: #00aaf3; margin-right: 0.5em;}

.plan-premium {color: #efbc0d;}
.plan-premium p.name {color: #efbc0d; font-family: 'Dosis', sans-serif; font-size: 3em; margin: 0;}
.plan-premium ul li i {color: #efbc0d; margin-right: 0.5em;}

.faqs {background: #f5f5f5; padding: 5em;}
.faqs h3 {text-align: center; font-size: 1.8em; margin-top: 0;   margin-bottom: 2em;}
.faqs ul li {display: inline-block; width: 30%; vertical-align: top;}
.faqs ul li:nth-child(2) {margin: 0 3%; }
.faqs ul li span {display: block; color: #1d1d1d; font-weight: 700; }
.faqs ul li p {font-size: 0.8em;}
.faqs ul li a {display: block; color:#00aaf3; text-transform: uppercase; font-size: 0.8em; margin-top: 1em; }


/*REVIEWS PAGE*/
.reviews ul {    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-around;}
.reviews ul li {width: 32.33%; float: left; margin-right: 1.5%; margin-bottom: 1.5%; text-align: center; border:1px solid #e3e3e3; border-radius: 5px; background: #f5f5f5;}
.reviews ul li:nth-child(3n) {float: right; margin-right: 0;}
.reviews ul li:hover {box-shadow: 0 0 0 2px rgb(0, 173, 243); }
.reviews ul li .review .logo-wrap {border-bottom: 1px solid #e3e3e3; background: #fff;}
.reviews ul li .review .review-content { padding: 1.5em;}
.reviews ul li .review .review-content span {font-family: 'Dosis', sans-serif; font-weight: 700; display: block; margin: 1em auto; font-size: 1.3em;}
.reviews ul li .review .review-content a {border-radius: 50px; border:2px solid #2ecc71;  font-family: 'Dosis', sans-serif; font-weight: 700; font-size: 1.2em; margin: 2em auto; color: #2ecc71; padding: 0.5em 2em;}
.reviews ul li .review:hover .review-content a {background:#00aaf3; border:2px solid #00aaf3; color: #fff; }


/*PARTNERS PAGE*/
.partners .shell{border:1px solid #dedede; }
.partners .partner-logo img {float: left; margin-right: 1em}
.partners .partner-logo h2 {font-weight: 400; float: left;}
.partners p {margin: 2em auto;}
.xero-top {padding: 3em;}
.xero-screen {background: url(imgs/xero-bg.jpg) center; background-size: cover; padding: 2em; display: -webkit-box;display: -ms-flexbox;display: flex;}
.xero-screen .description {margin-left: 2em; -ms-flex-negative: 5;    flex-shrink: 5;}
.xero-screen .description p {color: #fff;}
.xero-screen .description p span {display: block; font-weight: 700; color: #efbc0d; margin-bottom: 0.5em;}
.partner-image img{ width: 100%; height: auto;   }

/*CONTACT PAGE*/
.contact h2 {font-weight: 300; line-height: 1em; margin-bottom: 0.5em;}
.contact .contact-top p {text-align: center; font-size: 1.2em; }
.contact .shell {padding: 0 6em;}
.contact-details {padding: 2em auto; margin: 4em auto 6em auto; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede;}
.contact-details li {display: inline-block; width: 18%; margin-right: 2.5%; float: left; text-align: center;}
.contact-details li:last-child {margin-right: 0; float: right;}
.contact-details li i {display: block; width: 2em; height: 2em; font-size: 2em; background: #f5f5f5; line-height: 2em; border-radius: 5px; margin: 1em auto 0.5em auto;}
.contact-details li span {font-weight: 300; font-size: 1.2em;}
.contact-details li p {font-weight: 700;}
.contact-details li p a {color: #00adf3;}
.contact-details li:hover i {transition: 0.6s;  transform-style: preserve-3d;   position: relative; transform: rotateY(180deg);}

.contact-form {text-align: center;}
.contact-form ul li {display: inline-block; width: 32%; float: left;}
.contact-form ul li input {width: 100%; padding: 1em; border-radius: 5px; border:1px solid #dedede; background: #f5f5f5; font-weight: 700;}
.contact-form ul li textarea {width: 100%; padding: 1em; border-radius: 5px; border:1px solid #dedede; background: #f5f5f5; font-family: 'Open Sans', sans-serif; min-height: 120px; }
.contact-form ul li:nth-child(2) { margin: 0 2%;}
.contact-form ul li:nth-child(4) {width: 100%; margin: 2% 0;}
.contact-form a {margin: 0 auto;}


/*FREE TRAIL PAGE*/
.free-trail {background: #f5f5f5;}
.free-trail .shell {padding: 0 15em;}
.free-trail .top-section {background: #efbc0d; text-align: center; padding: 2em; font-family: 'Dosis', sans-serif; text-shadow: 0 1px rgba(255, 255, 255, 0.51);}
.free-trail .top-section h3 { font-weight: 700; font-size: 2em; margin: 0 auto; margin-bottom: 0.8em;}
.free-trail .top-section span {font-weight: 700; font-size: 1.2em;}
.free-trail .top-section input {padding: 0.5em; border-radius: 5px; margin: 0 0.5em; border: 1px solid rgba(44, 62, 80, 0.43);  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.17); font-size: 1.2em;}
.free-trail .top-section input:focus {border: 1px solid rgb(44, 62, 80);}

.free-trail .bottom-section {background: #fff; padding: 2em;  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}
.free-trail .bottom-section h3 { font-weight: 700; font-size: 2em; margin: 0 auto;  text-align: center; }
.free-trail .bottom-section h3 span {font-size: 0.5em; color: #999; margin-left: 0.5em;}
.free-trail .bottom-section ul li {width: 32%; float: left; margin-bottom: 1em; text-align: left;}
.free-trail .bottom-section ul li:nth-child(2), .free-trail .bottom-section ul li:nth-child(5), .free-trail .bottom-section ul li:nth-child(8) {margin: 0 2%;}
.free-trail .bottom-section ul li ul li:first-child {width: 30%;}
.free-trail .bottom-section ul li ul li:last-child {width: 65%; float: right;}
.free-trail .bottom-section ul li input, .free-trail .bottom-section ul li select {-webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; font-size: 1.05em; padding: 0.8em; border-radius: 5px; border:1px solid #dedede; background: #fff; font-weight: 700; box-shadow: 0 2px 2px #efefef, inset 0 1px 2px #ededed;}
.free-trail .bottom-section ul li select {font-weight: 700; position: relative; background: url(imgs/arrow-down.png) no-repeat 95% 0; background-position-y: center;}

.free-trail .bottom-section ul li input:focus, .free-trail .bottom-section ul li select:focus {border: 1px solid #2c3e50; background-color: #f9f9f9; outline: none;} 
.free-trail .bottom-section {text-align: center;}
.free-trail .bottom-section .yellow-btn { margin: 1em auto; display: inline-block;}

.free-trail .trail-features {margin-top: 6em;}
.free-trail .trail-features ul li {display: inline-block; width: 31%; float: left; text-align: center;}
.free-trail .trail-features ul li:nth-child(2) {margin: 0 3.5%;}
.free-trail .trail-features ul li i {font-size: 2.5em; margin-right: 0.5em;}
.free-trail .trail-features ul li i.fa-sitemap { color: #00adf3;}
.free-trail .trail-features ul li i.fa-plug {color: #2ecc71;}
.free-trail .trail-features ul li i.fa-clipboard {color: #efbe0d;}
.free-trail .trail-features ul li span { font-family: 'Dosis', sans-serif; text-transform: uppercase; color: #1d1d1d; font-size: 1.4em; font-weight: 700;}

.validate-domain .top-section fieldset, .free-trail .bottom-section fieldset {border: none;}
.validate-domain .top-section input {width: 18px; height: 18px; box-shadow: none; border: none;}
.validate-domain .bottom-section ul li label {font-size: 16px; font-weight: 700;}
.validate-domain .bottom-section ul li span {font-size: 14px; }
.validate-domain .bottom-section ul li div {margin-top: 12px; position: relative;}
.validate-domain .bottom-section ul li div span.http {position: absolute; top: 10px; left: 29%;}
.validate-domain .bottom-section ul li div span.subdomain {position: absolute; top: 5px; left: 66%;}
.validate-domain .bottom-section ul li {display: block; float: none; width: auto; text-align: center;}
.validate-domain .bottom-section ul li input {width: 30%;}
.validate-domain .bottom-section ul li:nth-child(2) {margin: 0;}


/*FAQ PAGE*/
.faq  .faq-section {margin-bottom: 5em;}
.faq  .faq-section h2 {text-align: left; font-size: 1.8em; color: #2c3e50;}
.faq  .faq-section h2 i {font-size: 1em; width: 2.2em; height: 2.2em; line-height: 2.2em; text-align: center; border-radius: 50px; background: #00aaf3; color: #fff; margin-right: 0.5em;}
.faq  .faq-section .ui-accordion {border: 1px solid #dedede;}
.faq  .faq-section .ui-accordion-header { margin: 0; padding: 1.5em 0em 1.5em 3.5em; background-color: #fff; border: none; cursor: pointer; border-bottom: 1px solid #dedede; }
.faq  .faq-section .ui-accordion-header:focus { outline: none; }
.faq  .faq-section .ui-accordion-content { padding: 1em; padding-left: 2.5em; background: #f5f5f5; transition: all;}
.faq  .faq-section h3.ui-accordion-header { font-weight: 600; font-family: 'Open Sans', sans-serif; font-size: 1em; }
.faq  .faq-section .ui-accordion-header { position: relative; }
.faq  .faq-section .ui-accordion-header.ui-state-active::after { font-family: 'FontAwesome'; content: '\f068'; color: #2ecc71; font-size: 1.3em; position: absolute; left: 1em; line-height: 1.2em; }
.faq  .faq-section .ui-accordion-header::after { font-family: 'FontAwesome'; content: '\f0fe'; color: #2ecc71; font-size: 1.3em; position: absolute; left: 1em; line-height: 1.2em; }
.faq  .faq-section .ui-accordion-header.ui-state-active { color: #2ecc71; }


/*BLOG PAGE*/
.blog {background: #fff; min-height: 100%; position: relative; padding: 0 0 0 0;}
.blog .shell {display: flex; position: relative; z-index: 8;}
.blog-content {padding: 5em; position: relative; background: #fff; border-right: 1px solid #e5e5e5;}
.blog-content .article {padding-bottom: 2.5em; margin-bottom: 4em; border-bottom: 1px solid #dedede;}
.blog-content .article img {width: 100%; height: auto;}
.blog-content .article .article-title {color: #2c3e50; font-weight: 700; font-size: 1.5em; margin-top: 1.5em;}
.blog-content .article .article-title a {color: #2c3e50;  font-size: 1.1em;}
.blog-content .article .article-meta ul li {display: inline-block; font-size: 0.9em; color: #7f8b91; border-right: 1px solid #dedede; padding-right: 1em; margin-right: 1em;}
.blog-content .article .article-meta ul li a{color: #7f8b91;}
.blog-content .article .article-meta ul li.author:before { font-family: 'FontAwesome'; content: '\f007'; margin-right: 0.5em; color: #00adf3;}
.blog-content .article .article-meta ul li.date:before { font-family: 'FontAwesome'; content: '\f133'; margin-right: 0.5em; color: #00adf3;}
.blog-content .article .article-meta ul li.category:before { font-family: 'FontAwesome'; content: '\f02b'; margin-right: 0.5em; color: #00adf3;}
.blog-content .article .article-meta ul li.comments:before { font-family: 'FontAwesome'; content: '\f086'; margin-right: 0.5em; color: #00adf3;}
.blog-content .article .article-meta ul li.comments span {font-size: 0.8em;}
.blog-content .article .btn-sm {display: inline-block; margin: 1.5em auto; font-weight: 500;}
.blog-content .pagination ul li {display: inline-block; width: 2em; height: 2em; border:1px solid #dedede; line-height: 2em; text-align: center; border-radius: 5px; background: #f5f5f5; margin-right: 5px;}
.blog-content .pagination ul li a {display: block; color: #2c3e50;}
.blog-content .pagination ul li.text {width: auto; padding: 0 12px; }
.blog-content .pagination ul li:hover {background: #fff; transition: all 0.2s ease-in;}
.blog-content .pagination ul li:hover a {color: #00adf3;}
.blog-content .pagination ul li.current {background: #fff;}
.blog-content .pagination ul li.goto-last:after { font-family: 'FontAwesome'; content: '\f054'; color: #2c3e50; text-align: center;}

.sidebar {width: 60%; min-width: 250px; position: relative; padding-top: 5em; margin-left: 2em;}
.sidebar .search input {background: #fff; border:1px solid #dedede; border-radius: 50px; font-size: 1.1em; padding: 0.5em 1em; width: 100%;}
.sidebar .search {position: relative;}
.sidebar .search:after { font-family: 'FontAwesome'; content: '\f002'; color: #2ecc71; font-size: 1.2em; text-align: center; position: absolute; right: 1em; top: 0.2em;}

.sidebar .widget {background: #fff; border:1px solid #dedede; margin: 1.5em auto;}
.sidebar .widget .widget-title {font-size: 1em; color: #2c3e50; font-weight: 700; display: block; padding: 0.5em; border-bottom: 1px solid #dedede;}
.sidebar .widget .widget-title i {color: #00adf3; margin-right: 0.5em;}
.sidebar .widget ul {margin: 0 auto;}
.sidebar .widget ul li {display: block; border-bottom: 1px solid #dedede; padding: 0.5em;}
.sidebar .widget ul li.current {background: #2ecc71; color: #fff;}
.sidebar .widget ul li:last-child {border-bottom: 0;}

.sidebar .widget.categories ul li a {font-weight: 700; color: #2c3e50;}
.sidebar .widget.categories ul li.current a  {color: #fff; display: block;}
.sidebar .widget.categories ul li.current:hover {background: #2ecc71; }
.sidebar .widget.categories ul li:hover {background: #f5f5f5;}

.sidebar .widget.most-popular ul li {font-size: 0.9em;}
.sidebar .widget.most-popular ul li  a span {font-weight: 700; color: #2c3e50; }
.sidebar .widget.most-popular ul li:hover a span {color: #00adf3;}
.sidebar .widget.most-popular ul li p {font-size: 0.85em; margin: 0.5em auto;}
.sidebar .widget.most-popular ul li p.article-comments {margin: 1em auto;}
.sidebar .widget.most-popular ul li p.article-comments:before { font-family: 'FontAwesome'; content: '\f086'; margin-right: 0.5em; color: #00adf3;}

.right-bg { position: absolute; top: 0; bottom: 0; width: 50%;  height: 100%;  right: 0;  background: #edf0f2; z-index: 1;}

/*BLOG ARTICLE PAGE*/
.socail-buttons {margin: 2em 0;}
.blog-content .article h2 {font-size: 1.5em; color: #2c3e50; font-weight: 700; text-align: left;}


/*LOGIN PAGE*/
.login {background: url(imgs/login-bg.jpg) center; background-size: cover; padding: 5em; padding-top: 7em;}
.login .shell {text-align: center; padding: 0 15em;}
.login .shell span {font-family: 'Dosis', sans-serif; font-weight: 700; font-size: 1.8em; display: block; color: #efbc0d;}
.login .shell h1 {font-size: 3em; color: #fff; line-height: 0; font-weight: 300;}
.login .login-form {margin: 5em auto;}
.login .login-form .top {background: #fff;}
.login .login-form .top p {text-align: center; font-family: 'Dosis', sans-serif; font-weight: 700; font-size: 1.8em; color: #2c3e50; padding: 0.5em 0; margin: 0;}
.login .login-form .bottom {background: #f5f5f5;  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 2em;}

.login .login-form .bottom ul li {width: 32%; float: left; margin-bottom: 1em; text-align: left;}
.login .login-form .bottom ul li:nth-child(2), .login .login-form .bottom ul li:nth-child(5), .free-trail .bottom-section ul li:nth-child(8) {margin: 0 2%;}
.login .login-form .bottom ul li ul li:first-child {width: 30%;}
.login .login-form .bottom ul li ul li:last-child {width: 65%; float: right;}
.login .login-form .bottom ul li input, .login .login-form .bottom ul li select {width: 100%; font-size: 1.05em; padding: 0.8em; border-radius: 5px; border:1px solid #dedede; background: #fff; font-weight: 700; box-shadow: 0 2px 2px #efefef, inset 0 1px 2px #ededed;}
.login .login-form .bottom ul li select {font-weight: 700;}
.login .login-form .bottom ul li input:focus, .login .login-form .bottom ul li select:focus {border: 1px solid #2c3e50; background: #fff; outline: none;} 
.login .login-form .bottom {text-align: center;}
.login .login-form .bottom .yellow-btn { margin: 1em auto; display: inline-block;}

.login .login-form .bottom ul li.copper-domain {position: relative;}
.login .login-form .bottom ul li.copper-domain:after {content: '|.copperhub.com'; position: absolute; right: 1.5em; top: 2.5em; font-size: 15px; font-weight: 400; color: #999;}
.login .login-form .bottom ul li.copper-domain input {padding-right: 135px;}




/*GETTING STARTED*/
.get-started {background: url(imgs/login-bg.jpg) center; background-size: cover; padding: 5em; padding-top: 6em; position: relative;}
.tour .tour-nav {margin-bottom: 2em;}
.tour .tour-nav ul {text-align: center; padding-bottom: 1em; border-bottom: 1px solid rgba(255, 255, 255, 0.25);}
.tour .tour-nav ul li {display: inline-block; }
.tour .tour-nav ul li.current_page_item {background: #efbc0d; border-radius: 50px;}
.tour .tour-nav ul li.current_page_item:hover {background: #ffd132; }
.tour .tour-nav ul li.current_page_item a {color: #2c3e50; font-weight: 700;}
.tour .tour-nav ul li a {color: #fff; display: block; padding: 0.3em 1em; font-size: 0.9em;}
.tour .tour-nav ul li:hover {background: #2c3e50; border-radius: 50px;}

.tour .shell {text-align: center;}
.tour .shell span {font-family: 'Dosis', sans-serif; font-weight: 700; font-size: 1.8em; display: block; color: #efbc0d;}
.tour .shell h1 {font-size: 3em; color: #fff; line-height: 0; font-weight: 300; margin-bottom: 25px;}
.get-started .shell h1 {margin-bottom: 50px;}

.get-started-screen {background-size: cover; width: 75%; margin: auto; position: relative; box-shadow: 0 0 30px rgba(0, 0, 0, 0.47);}
.step1-active{background: url(imgs/tour/step1.jpg) center;  background-size: cover; transition: all 0.8s ease-in;}
.step2-active {background: url(imgs/tour/step2.jpg) center; background-size: cover; transition: all 0.8s ease-in;}
.step3-active {background: url(imgs/tour/step3.jpg) center; background-size: cover; transition: all 0.8s ease-in;}
.step4-active {background: url(imgs/tour/step4.jpg) center; background-size: cover; transition: all 0.8s ease-in;}
.step5-active {background: url(imgs/tour/step5.jpg) center; background-size: cover; transition: all 0.8s ease-in;}
.step6-active {background: url(imgs/tour/step6.jpg) center; background-size: cover; transition: all 0.8s ease-in;}
.step7-active {background: url(imgs/tour/step7.jpg) center; background-size: cover; transition: all 0.8s ease-in;}
.get-started-screen .sign-in { top: -1.5%; left: 3%;}
.get-started-screen .mainmenu { top: 5%; right: 77%;}
.get-started-screen .add-ppt { top: 12%; right: 55%;}
.get-started-screen .search-tour { top: 4%; right: 5%;}
.get-started-screen .profile-stopwatch { top: 11%; right: 20%;}
.get-started-screen .settings-appearance {top: 30%; right: 50%;}
.get-started-screen .item {position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.get-started-screen .item i {width: 2.2em; height: 2.2em; text-align: center; line-height: 2.2em; color: #fff; font-size: 1.3em; background: #2ecc71; border-radius: 50px;}

.get-started-screen .item i:after {content: ''; width: 2.2em; height: 2.2em; text-align: center; background: #2ecc71;  position: absolute; top: 0; left: 0; border-radius: 50px; margin: 0 auto; animation: ripple linear 0.8s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: ripple linear 0.8s; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: 50% 50%; -moz-animation: ripple linear 0.8s; -moz-animation-iteration-count: infinite; -moz-transform-origin: 50% 50%; -o-animation: ripple linear 0.8s; -o-animation-iteration-count: infinite; -o-transform-origin: 50% 50%; -ms-animation: ripple linear 0.8s; -ms-animation-iteration-count: infinite; -ms-transform-origin: 50% 50%;}@keyframes ripple{0%{opacity:1; transform: scaleX(1.00) scaleY(1.00) ;}100%{opacity:0; transform: scaleX(2.00) scaleY(2.00) ;}}@-moz-keyframes ripple{0%{opacity:1; -moz-transform: scaleX(1.00) scaleY(1.00) ;}100%{opacity:0; -moz-transform: scaleX(2.00) scaleY(2.00) ;}}@-webkit-keyframes ripple{0%{opacity:1; -webkit-transform: scaleX(1.00) scaleY(1.00) ;}100%{opacity:0; -webkit-transform: scaleX(2.00) scaleY(2.00) ;}}@-o-keyframes ripple{0%{opacity:1; -o-transform: scaleX(1.00) scaleY(1.00) ;}100%{opacity:0; -o-transform: scaleX(2.00) scaleY(2.00) ;}}@-ms-keyframes ripple{0%{opacity:1; -ms-transform: scaleX(1.00) scaleY(1.00) ;}100%{opacity:0; -ms-transform: scaleX(2.00) scaleY(2.00) ;}}
.get-started-screen .item span {font-size: 0.85em; color: #fff; background: #2ecc71; padding: 0.2em 1em; white-space: nowrap; margin: 0; margin-left: -5px; left: 2.5em; border-radius: 0 50px 50px 0;}
.get-started-screen .item:hover i, .get-started-screen .item:hover span, .get-started-screen .item:hover i:after  {background: #2c3e50;}

.tour .shell .tour-steps {transition: all 0.8s ease-in; position: absolute; background: #efbc0d; text-align: center; width: 250px; padding: 15px; z-index: 99; border-radius:0px;    box-shadow: 0 5px 30px rgba(45, 62, 80, 0.64);}
.tour .shell .tour-steps .step-name {font-family: 'Dosis', sans-serif; font-weight: 700; font-size: 24px; margin: 0 auto; }
.tour .shell .tour-steps .step-desc {font-size: 14px; margin-top: 0;}
.tour .shell .tour-steps .next-step {display: inline-block; font-size: 16px; color: #333; cursor: pointer; background: #ffcc1e; padding: 5px 15px; border-radius: 50px; font-family: 'Dosis', sans-serif; font-weight: 700;}
.tour .shell .tour-steps .next-step i {margin-left: 5px;}
.tour .shell .tour-steps ul {display: inline-block; width:  100%;}
.tour .shell .tour-steps ul li {display: inline-block; width: 8px; height: 8px; background: #caa117; margin: 0 1px; border-radius: 50%;}
.tour .shell .tour-steps ul li.current {background: #fff;}
#step1 {right: -260px; top:0px; transition: all 3.5s ease-in;}
#step2, #step3, #step4, #step5, #step6, #step7 {opacity: 0; visibility: hidden; top: 0px; right: -260px; transition: all 0.8s ease-in; }


.steps-overlay {position: absolute; width: 100%; height: 100%; left: 0; right: 0; top: 0;
background: rgba(255,255,255,0);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(31,35,39,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(31,35,39,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(31,35,39,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(31,35,39,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(31,35,39,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%, rgba(31,35,39,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#1f2327', GradientType=1 );
}

.tooltip { background: #2c3e50; width: 300px; top: 5em; color: #fff; padding: 0.5em; display: block; margin-bottom: 5px; font-size: 0.9em; opacity: 0;  position: absolute;  }
.tooltip p {padding: 0.5em;}
.tooltip:after { border-left: solid transparent 10px; border-right: solid transparent 10px; border-bottom: solid #2c3e50 10px; top: -10px; content: " "; height: 0; left: 50%; margin-left: -13px; position: absolute; width: 0; }

.item:hover {cursor: pointer;}
.item:hover i { color: #fff; }
.item .tooltip { display: none; }
.item:hover .tooltip{display: block; z-index: 5; opacity: 1; animation: tooltip-animation linear 0.3s; animation-iteration-count: 1; transform-origin: 50% 50%; -webkit-animation: tooltip-animation linear 0.3s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -moz-animation: tooltip-animation linear 0.3s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 50%; -o-animation: tooltip-animation linear 0.3s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 50%; -ms-animation: tooltip-animation linear 0.3s; -ms-animation-iteration-count: 1; -ms-transform-origin: 50% 50%;}@keyframes tooltip-animation{0%{opacity:0; transform: translate(0px,10px) ;}100%{opacity:1; transform: translate(0px,0px) ;}}@-moz-keyframes tooltip-animation{0%{opacity:0; -moz-transform: translate(0px,10px) ;}100%{opacity:1; -moz-transform: translate(0px,0px) ;}}@-webkit-keyframes tooltip-animation{0%{opacity:0; -webkit-transform: translate(0px,10px) ;}100%{opacity:1; -webkit-transform: translate(0px,0px) ;}}@-o-keyframes tooltip-animation{0%{opacity:0; -o-transform: translate(0px,10px) ;}100%{opacity:1; -o-transform: translate(0px,0px) ;}}@-ms-keyframes tooltip-animation{0%{opacity:0; -ms-transform: translate(0px,10px) ;}100%{opacity:1; -ms-transform: translate(0px,0px) ;}}


/*TOUR PAGE*/
.tour-page {margin-bottom: 8em;}
.tour-page .tour-nav {margin-top: 1em;}
.tour-page .tour-nav a:hover {text-decoration: none;}
.tour-page .page-title h1 {line-height: 1em;}
.tour-page .page-sub-title {background: #f5f5f5; font-size: 1.1em; text-align: center; padding: 1em 0; color: #2c3e50;}

.tour-page .tour-page-item {width: 100%; padding: 5em 0; text-align:left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.tour-page .tour-page-item h3 {font-size: 3em; font-family: 'Dosis', sans-serif; font-weight: 700; text-align: left; line-height: 1.3em; border-left: 10px solid; padding-left: 1em;}
.tour-page .tour-page-item h3 span {font-weight: 300; font-size: 1em; color: #2c3e50;}
.tour-page .tour-page-item .item-text {width: 35%; font-size: 0.9em; color: #5b6065;}
.tour-page .tour-page-item .item-image {width: 60%; }
.tour-page .tour-page-item .item-image  img {width: 100%;}

.tour-page .tour-page-item:nth-child(1n) h3 {color: #00adf3;}
.tour-page .tour-page-item:nth-child(2n) h3 {color: #2ecc71;}
.tour-page .tour-page-item:nth-child(3n) h3 {color: #f0c10e;}

.tour-page .tour-page-item:nth-child(2n) { -webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}


/*BOTTOM CTA*/
.cta-bottom {background: url(imgs/cta-bottom-bg.jpg); background-size: cover; padding: 2.5em 0;}
.cta-bottom span {float: left; display: block; font-family: 'Dosis', sans-serif; font-weight: 700; font-size: 1.2em; color: #fff; font-size: 1.5em; }
.cta-bottom p {color: #edb50b; display: block; margin: 0;}
.cta-bottom .yellow-btn {white-space: nowrap;}
.cta-bottom .btn-wrap {float: right;}

/*FOOTER*/
.footer {background: #2c3e50; padding-top: 4em;}
.footer .about {width: 25%; float: left; margin-right: 8em;}
.footer .about svg {width: 120px; height: 25px;}
.footer .about p {font-size: 0.8em; color: #9fa4aa; margin: 1em auto;}
.footer .about ul li {display: inline-block;}
.footer .about ul li a i {font-size: 2em; color: #3498db; margin: 0 0.2em;}
.footer .about ul li:hover a i {color:#17bcb2; transition: all 0.2s ease-in; }

.footer .footer-links {float: left; margin-right: 6em; margin-top: 0;}
.footer .footer-links li a {color:#9fa4aa; font-size: 0.9em; display: block; }
.footer .footer-links li:hover a {color: #fff; transition: all 0.2s ease-in;}
.footer .footer-links li:first-child {font-family: 'Dosis', sans-serif; font-size: 1.2em; font-weight: 700; color: #fff; position: relative; padding-bottom: 0.5em; margin-bottom: 1em; border-bottom: 1px solid #3498db;}
.footer .footer-links li:first-child a {color: #fff; font-size: 1em;}
.footer .footer-links li:first-child:after {content: ''; width: 0.5em; height: 0.5em; border-radius: 50%; background: #3498db; position: absolute; left: 0; bottom: -0.3em;}

.footer .contacts {float: right;}
.footer .contacts ul {margin-top: 0;}
.footer .contacts ul li, .footer .contacts ul li a {display: block; color: #3498db;}
.footer .contacts ul li:hover a {color:#17bcb2; transition: all 0.2s ease-in; }
.footer .contacts ul li span {color: #fff; font-size: 0.7em;}
.footer .contacts ul li.phone a {font-family: 'Dosis', sans-serif; font-size: 2em; font-weight: 700; color: #fff;}
.footer .contacts ul li.phone:hover a {color:#17bcb2; transition: all 0.2s ease-in; }

.footer .copyright p {text-align: center; color: #fff; font-size: 0.8em; padding: 0.5em 0; border-top: 1px solid #425262;}
.desktop {display: block;}
.mobile {display: none;}
.cd-top { position: fixed;  right: 1em; bottom: 1em; z-index: 9; background: #2ecc71;  width: 38px;  height: 38px;  line-height: 35px;  border-radius: 5px;  text-align: center;  color: #fff;}
.cd-top i {line-height: 2.2em;}
 #nav-menu { display: none; }

@media only screen and (max-width: 1600px) { 
    body { font-size: 14px; }
    h2 {font-size: 2.2em;}
    .logo {width: 110px; height: auto;}
    .section { padding: 4em 0 6em 0;}
    .hero .hero-sub-heading {margin: 0.5em auto;}
    .video-play {margin-top: 1em;}
    .hero .trial-sign {margin-top: 0.2em;}
    .features, .software {height: 600px;}
    .xero-screen .description {-ms-flex-negative: 4; flex-shrink: 4;}
    .tour .tour-nav {margin-bottom: 1em;}
    .blog {padding: 0;}
    .software-overview p.collaboration-sign, .software-overview p.communication-sign, .software-overview p.knowledge-sign {font-size: 2em;}
    .free-trail .shell {padding: 0 10em;}
    .tour .shell .tour-steps {transition: all 0.8s ease-in; position: absolute; background: #efbc0d; width: 200px; padding: 15px; z-index: 99; border-radius:0px;   text-align: center;  box-shadow: 0 5px 30px rgba(45, 62, 80, 0.64);}
    .tour .shell .tour-steps .step-name {font-family: 'Dosis', sans-serif; font-weight: 700; font-size: 21px; margin: 0 auto; }
    .tour .shell .tour-steps .step-desc {font-size: 14px; margin-top: 0;}
    .tour .shell .tour-steps .next-step {display: inline-block; font-size: 14px; color: #333; cursor: pointer; background: #ffcc1e; padding: 5px 15px; border-radius: 50px; font-family: 'Dosis', sans-serif; font-weight: 700;}
    .tour .shell .tour-steps ul {display: inline-block; float: none;}
    .tour .shell .tour-steps ul li {display: inline-block; width: 8px; height: 8px; background: #caa117; margin: 0 1px; border-radius: 50%;}
    .tour .shell .tour-steps ul li.current {background: #fff;}
    #step1 {right: -210px; top:0px; transition: all 3.5s ease-in;}
    #step2, #step3, #step4, #step5, #step6, #step7 {opacity: 0; visibility: hidden; top: 0px; right: -210px; transition: all 0.8s ease-in; }
}

@media only screen and (max-width: 1366px) { 
    body { font-size: 13px; }
    .free-trail .shell {padding: 0 8em;}
    .xero-screen .description { -ms-flex-negative: 3; flex-shrink: 3;}
    .contact .shell { padding: 0 2em;}
    .get-started-screen {width: 90%;}
}

@media only screen and (max-width: 1280px) { 
    body { font-size: 13px; }
    .logo {width: 100px; height: auto;}
    .features, .software {height: 500px;}
    .free-trail .shell {padding: 0 0em;}
    .pricing-tables ul li .table > i {font-size: 4em; }
    .contact .shell { padding: 0 0em;}
    .contact-details li p a {word-break: break-word;}
}

@media only screen and (max-width: 1024px) { 
    
    .shell {width: 90%;}
    body { font-size: 12px; }
    .pricing-tables ul li .table > i {font-size: 3em; }
    .logo {width: 100px;}
    .header {top: 0;}
    .header .clearfix {display: flex; -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; -webkit-box-align: center;-ms-flex-align: center;align-items: center;}
    .xero-screen .description { -ms-flex-negative: 1.5; flex-shrink: 1.5;}
    .sign-btns, .logo {position: static;}
    .logo {-webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1;}
    .sign-btns{-webkit-box-ordinal-group: 4;-ms-flex-order: 3;order: 3; margin-right: 1em;}
    .main-nav{-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2; margin: 0 4em;}
    .get-started-screen { width: 90%;}
    .get-started {padding: 6em 0;}
    .get-started .shell {width: 100%;}
    .tour-page .page-title .shell {width: 100%;}
    .hero .shell {padding-top: 8em;}
    .play-btn {width: 4em; height: 4em; line-height: 4em;}
    .play-btn:after {top: 1em;  left: 1.5em;}
    .play-btn-sign {font-size: 1.5em;}
    .video-play img {width: 25px; top: 1em;}
    .video-play {margin-top: 0;}
    .hero h2 {font-size: 3em;}
    .hero .hero-sub-heading {line-height: 1em;}
    .start-now-form {margin-top: 1em;}
    .features {height: 400px;}
    .software {height: auto;}
    #features-home li i {font-size: 2em;}
    #features-home li .yellow-btn {margin: 1em 0;}
    .clients ul li {width: 15%;}
    .login .shell {padding: 0;}
    
    .steps-overlay  {display: none;}
    .tour .shell .tour-steps {opacity: 1; visibility: visible; position: relative; width: 100%;}
    #step1 {display: none; top: 0; left:0; transition: all 0.8s ease-in;}
    #step2 {display: none; opacity: 0; visibility: hidden; top: 0px; left: 0px; transition: all 0.8s ease-in; }
    #step3 {display: none; opacity: 0; visibility: hidden; top: 0px; left: 0%; transition: all 0.8s ease-in; }
    #step4 {display: none; opacity: 0; visibility: hidden; top: 0px; left: 0%; transition: all 0.8s ease-in; }
    #step5 {display: none; opacity: 0; visibility: hidden; top: 0px; left: 0%; transition: all 0.8s ease-in; }
    #step6 {display: none; opacity: 0; visibility: hidden; top: 0px; left: 0%; transition: all 0.8s ease-in; }
    .get-started .shell span, .get-started .shell h1 {display: none;}
    .get-started  .tour-nav ul { border-bottom: 0; }
    .get-started .tour-nav ul li a {font-size: 1.3em; border-bottom: 1px solid rgba(255, 255, 255, 0.26);}
    .get-started .tour-nav ul li:first-child {margin-bottom: 20px;}
    .get-started .tour-nav ul li:first-child a {border-bottom: 0;}
    .tour-page .page-title h1 {margin-bottom: 15px;}

}

@media only screen and (max-width: 768px) { 
    .desktop {display: none;}
    .mobile {display: block;}
    .shell {width: 90%;}
    body {font-size: 14px;}
    .header {height: 55px;}
    .header .clearfix {display: block; text-align: center;}
    .logo {position: absolute; left: 0; right: 0; z-index: 9; margin: 0 auto;}

    #nav-menu { display: block; }
    #nav-menu { width: 32px; height: 32px; position: absolute; left: 1em; top: 16px; z-index: 9; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; }
    #nav-menu span { display: block; position: absolute; height: 3px; width: 90%; background: #fff; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
    #nav-menu span:nth-child(1) { top: 0px; }
    #nav-menu span:nth-child(2) { top: 0.7em; }
    #nav-menu span:nth-child(3) { top: 1.3em; }
    #nav-menu span:nth-child(4) { top: 36px; }
    .open #nav-menu span:nth-child(1) { top: 18px; width: 0%; left: 50%; }
    .open #nav-menu span:nth-child(2) { top: 1em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
    .open #nav-menu span:nth-child(3) { top: 1em; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
    .open #nav-menu span:nth-child(4) { top: 18px; width: 0%; left: 50%; }
    .main-nav { width: 100%; background: #3c3c3c; position: absolute; top: 60px; margin: 0 auto; font-size: 1.3em; color: #fff; transform: translate3d(-110%, 0, 0); -webkit-transition: transform 0.5s ease-in-out; -webkit-transform: translate3d(-110%, 0, 0); transition: transform 0.5s ease-in-out; -ms-transform: translate3d(-110%, 0, 0); -ms-transition: transform 0.5s ease-in-out; }
    body.open { overflow: hidden; }
    body.open .main-nav { transform: translate3d(-0%, 0, 0); -webkit-transition: transform 0.5s ease-in-out; -webkit-transform: translate3d(-0%, 0, 0); transition: transform 0.5s ease-in-out; -ms-transform: translate3d(-0%, 0, 0); -ms-transition: transform 0.5s ease-in-out; }
    .main-nav ul li { float: none; display: block; height: auto; line-height: 2.5em; border-right: none; border-bottom: 1px solid #616060; }
    .main-nav ul li a { padding: 0 1em; color: #fff; }
    .main-nav ul li:first-child { border-left: none; }
    .main-nav ul li.current-menu-item {background: #d04527;}
    .main-nav ul li.current-menu-item a {color: #fff;}
    .main-nav ul li a.drop-open-btn { position: absolute; top: 0; right: 0; }
    .main-nav ul li > ul { width: 100%; position: relative; max-height: 0; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; }
    .main-nav ul li.drop-open > ul { max-height: 400px; background: #4e4e4e; }
    .main-nav ul li.drop-open > ul li { border-bottom: 1px solid #676869; }
    .main-nav ul li .drop-open-btn:before { font-family: 'icons'; content: '\e901'; position: absolute; font-size: 1.2em; right: 1em; color: #fff; }
    .main-nav ul li.drop-open .drop-open-btn:before { content: '\e902'; }
    .main-nav {margin: 0 auto; width: 100%; background: #2c3e50; }
    .main-nav ul {text-align: left; padding-top: 3em;}
    .main-nav .sign-btns ul li {border-bottom: 0;}
    .main-nav .sign-btns ul li:first-child {margin-bottom: 1em;}
    .header, .main-nav {top: 0;}
    .hero .shell {padding-top: 7em;}
    .hero h2 {font-size: 3em;}
    .video-wrap {text-align: center; width: 90%;}
    .video-wrap iframe {width: 100%; }
    .sign-btns ul {padding-top: 1em;}
    .sign-btns .get-free-subscription, .sign-btns .login-btn {padding: 0; text-align: center; width: 100%;}
    .hero .hero-sub-heading {line-height: 1.5em; margin: 1em 0;}
    .hero .start-now-btn {width: 100%; display: block; border-radius: 25px; margin-top: 0.5em;}
    .start-now-form {box-shadow: none;}
    .input-wrap {width: 100%; border-radius: 50px; box-shadow: 0 0 50px rgba(230, 207, 77, 0.8);}
    .start-now-form form {display: block;}
    .general ul li {width: 48%; margin: 1em 0;}
    .general ul li i {float: none; margin-right: 0;}
    .general ul li div {text-align: center; margin-top: 1em;}
    .general ul li p {text-align: center;}
    .features-home {width: 100%;}
    .features, .software {height: auto;}
    .features-home .bx-pager {left: 0;right: 0;margin: auto; text-align: center; bottom: -80px;}
    .features {background: url(imgs/video-cover.jpg); background-size: cover;}
    .features video {display: none;}
    #features-home li {text-align: center;}
    #features-home li i {margin: 0 auto;}
    .software-shot {float: none; width: 100%;}
    .software-overview {width: 100%; float: none; margin-top: 1em; font-size: 1.8em; text-align: center;}
    .software-overview p {font-size: 0.6em;}
    .software-overview .btn-lg {font-size: 0.8em;}
    .clients ul li {width: 24%;}
    .software-overview p.collaboration-sign, .software-overview p.communication-sign, .software-overview p.knowledge-sign {font-size: 1.6em;}
    .footer .about{width: 100%; float: none; margin-right: 0; text-align: center; margin-bottom: 3em;}
    .footer .footer-links { float: none; font-size: 1.3em; margin-bottom: 2em; margin-right: 0em; text-align: center; }
    .footer .footer-links li {    border-bottom: 1px solid rgba(249, 249, 249, 0.10);    padding: 0.2em 0;}
    .footer .contacts{float: none; font-size: 1.3em; text-align: center;}
    .free-trail .top-section {padding: 1em;}
    .free-trail .top-section span.htp {display: none;}
    .free-trail .top-section .domain {position: relative;}
    .free-trail .top-section .domain span {position: absolute; top: 0.2em; right: 0.5em; color: #999;}
    .free-trail .top-section input {width: 100%; padding-right: 95px;}
    .free-trail .bottom-section ul li {width: 100%;}
    .free-trail .bottom-section ul li:nth-child(2), .free-trail .bottom-section ul li:nth-child(5), .free-trail .bottom-section ul li:nth-child(8) {margin: 0; margin-bottom: 1em;}
    .free-trail .bottom-section .yellow-btn {width: 100%;}
    .free-trail .trail-features ul li {width: 100%;}
    .free-trail .trail-features ul li:nth-child(2) {margin: 1em 0;}
    .pricing-tables > ul > li {width: 100%;}
    .pricing-tables > ul > li:nth-child(2) {  margin: 2em 0;}
    .faqs ul li {width: 100%;}
    .faqs ul li:nth-child(2) {margin: 2em 0;}
    .reviews ul li {width: 100%; margin: 0.5em 0;}
    .cta-bottom .shell {display: block; text-align: center;}
    .cta-bottom .btn-wrap {display: block; margin: 2em 0;}
    .xero-screen {display: block;}
    .partner-logo {text-align: center;}
    .partners .partner-logo img {margin: 0; float: none;}
    .contact-details {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
    .contact-details li {width: 48%; margin-right:0;}
    .contact-form ul li:nth-child(2) {margin: 0;}
    .contact-form ul li {float: none; width: 100%; margin: 1em 0;}
    .contact-form a {width: 100%; display: block; margin-top: 1em;}
    .get-started-screen {display: block;}
    .get-started-screen .item {width: 100%; position: relative; margin: 1em 0;}
    .get-started-screen .item span {width: 100%; font-size: 1.2em;}
    .get-started-screen .item i{width: 3.5em; height: 3em; text-align: center; line-height: 3em; color: #fff; font-size: 1.5em; background: #2ecc71; border-radius: 50px;}
    .get-started-screen .item i:before {position: relative; z-index: 2;}
    .get-started-screen .item i:after {content: ''; width: 3em; height: 3em; text-align: center; background: #2ecc71; position: absolute; top: 0; left: 0; border-radius: 50px; margin: 0 auto; animation: grow linear 2s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: grow linear 2s; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: 50% 50%; -moz-animation: grow linear 2s; -moz-animation-iteration-count: infinite; -moz-transform-origin: 50% 50%; -o-animation: grow linear 2s; -o-animation-iteration-count: infinite; -o-transform-origin: 50% 50%; -ms-animation: grow linear 2s; -ms-animation-iteration-count: infinite; -ms-transform-origin: 50% 50%;}@keyframes grow{0%{transform: scaleX(1.00) scaleY(1.00) ;}50%{transform: scaleX(1.10) scaleY(1.10) ;}100%{transform: scaleX(1.00) scaleY(1.00) ;}}@-moz-keyframes grow{0%{-moz-transform: scaleX(1.00) scaleY(1.00) ;}50%{-moz-transform: scaleX(1.10) scaleY(1.10) ;}100%{-moz-transform: scaleX(1.00) scaleY(1.00) ;}}@-webkit-keyframes grow{0%{-webkit-transform: scaleX(1.00) scaleY(1.00) ;}50%{-webkit-transform: scaleX(1.10) scaleY(1.10) ;}100%{-webkit-transform: scaleX(1.00) scaleY(1.00) ;}}@-o-keyframes grow{0%{-o-transform: scaleX(1.00) scaleY(1.00) ;}50%{-o-transform: scaleX(1.10) scaleY(1.10) ;}100%{-o-transform: scaleX(1.00) scaleY(1.00) ;}}@-ms-keyframes grow{0%{-ms-transform: scaleX(1.00) scaleY(1.00) ;}50%{-ms-transform: scaleX(1.10) scaleY(1.10) ;}100%{-ms-transform: scaleX(1.00) scaleY(1.00) ;}}
    .get-started-screen .sign-in, .get-started-screen .mainmenu, .get-started-screen .add-ppt, .get-started-screen .search-tour, .get-started-screen .profile-stopwatch,.get-started-screen .settings-appearance {top: auto; right: auto; left: auto;}
    .get-started-screen {background: none;}
    .tooltip:after {border-top: solid #fff 10px; border-bottom: 0;  top: auto;  bottom: -10px;}
    .tooltip {width: 100%; background: #fff; color: #2c3e50;}
    .tour .tour-nav {padding: 0 1em;}
    .tour .tour-nav li {width: 100%;}
    .tour-page .tour-page-item, .tour-page .tour-page-item:nth-child(2n) {-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse; padding: 3em 0; border-bottom: 1px solid #e6e6e6;}
    .tour-page .tour-page-item .item-text, .tour-page .tour-page-item .item-image {width: 100%;}
    .faq  .faq-section h2 i {float: left;}
    .blog-content {padding: 0; border: 0; padding-top: 2em;}
    .sidebar, .right-bg {display: none;}
    .pagination {margin-bottom: 2em;}
    .blog-content .article .article-meta ul li {margin-bottom: 1em;}
    .login .shell{padding: 0;}
    .login {padding: 0; padding-top: 5em;}
    .login .login-form .bottom ul li.copper-domain {width: 100%;}
    .login .login-form .bottom ul li.copper-domain input {padding-right: 95px;}
    .login .login-form .bottom ul li {width: 100%;}
    .login .login-form .bottom ul li:nth-child(2) {margin: 0; margin-bottom: 1em;}
    .login .login-form .bottom .yellow-btn {width: 100%;}
    .validate-domain .bottom-section ul li div {margin-top: 12px; position: relative;}
	.validate-domain .bottom-section ul li div span.http {position: static; display: block; }
	.validate-domain .bottom-section ul li div span.subdomain {position: static; display: block; }
	.validate-domain .bottom-section ul li {display: block; float: none; width: auto; text-align: center;}
	.validate-domain .bottom-section ul li input {width: 100%;}
	.free-trail .top-section input {width: auto;}

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

    body {font-size: 12px;}
    h2 {font-size: 2em;}
    #features-home li p {font-size: 0.8em;}
    #testimonials li > p {font-size: 0.8em;}
    .main-nav ul li { float: none; display: block; height: auto; line-height: 2em;}
}