/* reset 
---------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5,
h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; }

body, html {
  height: 100%; }

img, fieldset, a img {
  border: none; }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  -webkit-appearance: none; }

textarea {
  overflow: auto; }

input, button {
  margin: 0;
  padding: 0;
  border: 0; }

input[type="submit"], button {
  cursor: pointer; }

div, input, textarea, select, button,
h1, h2, h3, h4, h5, h6, a, span, a:focus {
  outline: none; }

ul, ol {
  list-style-type: none; }

table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%; }

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit; }


/*fonts
---------------------------------------*/
@font-face {
  font-family: ACaslonPro-Regular;
  src: url("../fonts/ACaslonPro-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/ACaslonPro-Regular.woff2") format("woff2"), url("../fonts/ACaslonPro-Regular.woff") format("woff"), url("../fonts/ACaslonPro-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; 
}
@font-face {
  font-family: AvenirBlack;
  src: url("../fonts/avenir-black.woff2") format("woff2"), url("../fonts/avenir-black.woff") format("woff");
  font-weight: normal;
  font-style: normal; 
}
@font-face {
  font-family: AvenirMedium;
  src: url("../fonts/avenir-medium.woff2") format("woff2"), url("../fonts/avenir-medium.woff") format("woff");
  font-weight: normal;
  font-style: normal; 
}
@font-face {
  font-family: AvenirHeavy;
  src: url("../fonts/avenir-heavy.woff2") format("woff2"), url("../fonts/avenir-heavy.woff") format("woff");
  font-weight: normal;
  font-style: normal; 
}
/* sliding CSS
---------------------------------------*/
.slides{
  width: 100%;
  overflow: hidden;
  max-width: 950px;
  margin: 0 auto;
  
}
.slides__wrap{
  width: 200%;
  position: relative;
  transition: transform ease-in-out 400ms;
  /*transform: translate(-50%,0);*/
  float: left;
}
.slides.change_url_structure .slides__wrap{
  transform: translate(0%,0)
}

.slides.pick_plan .slides__wrap{
  transform: translate(-50%,0)
}

.content{
  float: left;
  width: 50%;
  margin-right: 10%;
  padding: 0 20px;
}

/* Actual CSS
---------------------------------------*/
body{
  background: #FFF;
  font-family: AvenirMedium,sans-serif;
}
.header{
  max-width: 1260px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 24px 30px;
    margin-bottom: 40px;
}
.header__logo{
  text-align: left;
}
.header__right{
  margin-left: auto;
  flex-grow: 1;
  text-align: right;
}
.header__user{
  display: inline-block;
  font-size: 12px;
  color: #9b9b9b;
  text-decoration: none;
  font-family: AvenirBlack,sans-serif;
  margin-right: 15px;
  letter-spacing: 0.5px;
}
.header__user:hover{
  color: #777;
}
.header__signin{
  display: inline-block;
}
.button{
  height: 50px;
  line-height: 50px;
  border-radius: 115px;
  border: 1px solid #C6C3C3;
  min-width: 125px;
  text-align: center;
  color: #000;
  text-decoration: none;
  font-family: AvenirBlack,sans-serif;
  font-size: 11px;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  transition: color .4s linear
}
.button:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-110%) skew(-45deg);
  transition: transform .4s;
  background: #26C8D4;
  z-index: 1;
  overflow: hidden;
}
.button:hover{
  color: #fff;
  border-color: #00c8d6;
}
.button:hover:before{
  transform: translateX(0) skew(0);
}
.content{
  max-width: 950px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 50px;
}
.h2{
  font-family: "ACaslonPro-Regular",serif;
  font-weight: normal;
  font-size: 40px;
  line-height: 1.3;
  margin-bottom: 30px;
}
.button-blue{
  background: #12c8d5;
  font-family: AvenirBlack,sans-serif;
  text-align: center;
  max-width: 320px;
  display: block;
  margin: 0 auto;
  font-size: 13px;
  color: #fff;
  height: 48px;
  line-height: 48px;
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
}
.button-blue:hover{
  background: #18cfda;
}
.button-blue:after{
  content: ' ';
  background-image: url("data:image/svg+xml,%3Csvg width='12px' height='9px' viewBox='0 0 12 9' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 45.2 %2843514%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EPrevious%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Sign-Up-1.2-' transform='translate%28-796.000000, -422.000000%29' stroke='%23FFFFFF' fill='%23FFFFFF'%3E%3Cg id='SAVE' transform='translate%28559.000000, 403.000000%29'%3E%3Cpath d='M238.842898,23.8248986 L242.116656,26.8561496 C242.253122,26.9947295 242.253122,27.2193746 242.116656,27.3572251 C241.98019,27.4972636 241.759415,27.4972636 241.622949,27.3572251 L237.710443,23.7359158 C237.70044,23.7278927 237.686151,23.7315396 237.676863,23.7213284 C237.606129,23.649121 237.575406,23.5550326 237.57755,23.4616736 C237.575406,23.3675852 237.606129,23.2742262 237.676863,23.2020188 C237.686151,23.1918077 237.701155,23.1954545 237.711158,23.1867021 L241.622949,19.5653928 C241.759415,19.426813 241.98019,19.426813 242.116656,19.5653928 C242.253122,19.704702 242.253122,19.9293472 242.116656,20.067927 L238.842898,23.0977193 L247.220204,23.0977193 C247.416686,23.0977193 247.577445,23.2610976 247.577445,23.4616736 C247.577445,23.6622497 247.416686,23.8248986 247.220204,23.8248986 L238.842898,23.8248986 Z' id='Previous' transform='translate%28242.577445, 23.461856%29 scale%28-1, 1%29 translate%28-242.577445, -23.461856%29 '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  width: 12px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  display: inline-block;
  margin-left: 20px;
  top: 1px;
}
.button-blue.loading:after{
  background-image: url("/wp-admin/images/wpspin_light-2x.gif");
  height: 20px;
  width: 20px;
  top: 4px;
}
.permalink_error {
    margin-top: 2em;
}
.subtitle{
  text-transform: uppercase;
  color: #25c8d4;
  line-height: 1.7;
  font-family: AvenirBlack,sans-serif;
  font-size: 18px;
  margin-bottom: 60px;
  letter-spacing: 1px
}
.subtle{
  font-size: 14px;
  color: #999999;
  letter-spacing: 2.5px;
  line-height: 19px;
}
.h2 + .subtle{
  margin-top: -25px;
  font-family: AvenirHeavy,sans-serif;
}
.note{
  margin-top: 38px;
  font-size: 16px;
  color: #9b9b9b;
}
.note:before{
  width: 17px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='17px' height='20px' viewBox='0 0 17 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 45.2 %2843514%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Elock-screen-rotation%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Sign-Up-1.2-' transform='translate%28-449.000000, -488.000000%29' fill-rule='nonzero' fill='%239B9B9B'%3E%3Cg id='lock-screen-rotation' transform='translate%28449.000000, 488.000000%29'%3E%3Cg id='XMLID_118_' transform='translate%280.000000, 7.083333%29'%3E%3Cpath d='M15.3,12.75 L1.13333333,12.75 C0.708333333,12.75 0.425,12.4666667 0.425,12.0416667 L0.425,0.708333333 C0.425,0.283333333 0.708333333,0 1.13333333,0 L15.3,0 C15.725,0 16.0083333,0.283333333 16.0083333,0.708333333 L16.0083333,12.0416667 C16.0083333,12.4666667 15.5833333,12.75 15.3,12.75 Z M1.84166667,11.3333333 L14.5916667,11.3333333 L14.5916667,1.41666667 L1.84166667,1.41666667 L1.84166667,11.3333333 Z' id='XMLID_436_'%3E%3C/path%3E%3C/g%3E%3Cg id='XMLID_119_' transform='translate%287.083333, 11.333333%29'%3E%3Cpath d='M1.13333333,4.25 C0.708333333,4.25 0.425,3.96666667 0.425,3.54166667 L0.425,1.41666667 C0.425,0.991666667 0.708333333,0.708333333 1.13333333,0.708333333 C1.55833333,0.708333333 1.84166667,0.991666667 1.84166667,1.41666667 L1.84166667,3.54166667 C1.84166667,3.96666667 1.41666667,4.25 1.13333333,4.25 Z' id='XMLID_435_'%3E%3C/path%3E%3C/g%3E%3Cg id='XMLID_16_' transform='translate%285.666667, 11.333333%29'%3E%3Ccircle id='XMLID_432_' cx='2.55' cy='1.41666667' r='1.41666667'%3E%3C/circle%3E%3C/g%3E%3Cg id='XMLID_17_' transform='translate%281.416667, 0.000000%29'%3E%3Cpath d='M12.4666667,8.5 L1.13333333,8.5 C0.708333333,8.5 0.425,8.21666667 0.425,7.79166667 L0.425,6.375 C0.425,2.83333333 3.25833333,0 6.8,0 C10.3416667,0 13.175,2.83333333 13.175,6.375 L13.175,7.79166667 C13.175,8.21666667 12.75,8.5 12.4666667,8.5 Z M1.84166667,7.08333333 L11.7583333,7.08333333 L11.7583333,6.375 C11.7583333,3.68333333 9.49166667,1.41666667 6.8,1.41666667 C4.10833333,1.41666667 1.84166667,3.68333333 1.84166667,6.375 L1.84166667,7.08333333 Z' id='XMLID_429_'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  content: "";
  margin-right: 27px;
  position: relative;
  top: -2px;
}
/*content part - 1 - change url
---------------------------------------*/

/*content part - 2 plans
---------------------------------------*/
.plans{
  max-width: 950px;
  display: flex;
  margin-top: 60px;
}
.plan{
  box-shadow: 0 1px 35px rgba(210,210,210,0.5);
  border-radius: 4px;
  align-self: flex-end;
  background: #fff;
  padding-bottom: 70px;
  padding-top: 70px;
  padding-left: 10%;
  padding-right: 10%;
}
.plan_main{
  border: 2px solid #11C8D6;
  position: relative;
  z-index: 10;
  padding-top: 110px;
}
.plan__title{
  font-size: 38px;
  color: #787575;
  letter-spacing: -0.3px;
  font-weight: normal;
  font-family: "ACaslonPro-Regular",serif;
  margin-bottom: 8px;
}
.plan_main .plan__title{
  color: #25c8d4;
}
.plan__price{
  font-size: 17px;
  color: #999999;
  margin-bottom: 8px;
  letter-spacing: .5px;
}
.plan__descr{
  color: #f8ae41;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.plan_main .plan__descr{
  color: #25c8d4;
}

.plan__buy{
  display: block;
  max-width: 228px;
  margin: 0 auto;
  border-radius: 115px;
  height: 57px;
  line-height: 57px;
  color: #fff;
  text-decoration: none;
  font-family: AvenirBlack,sans-serif;
  background: #f8a400;
  border: none;
  font-size: 14px;
  letter-spacing: .5px;
  position: relative;
  display: inline-block;
  border: 1px solid #f8a400;
}
.plan__buy:hover{
  color: #000;
  border:1px solid #c6c3c3;
}
.button span{
  position: relative;
  z-index: 1;
}

.plan__buy:before{
  background: #fff;
}
.plan_main .plan__buy{
  background: #12c8d5;
  border: 1px solid #12c8d5 ;
}
.plan_main .plan__buy:hover{
  border:1px solid  #c6c3c3;
}
.plan__image{
  margin: 27px auto;
}
.plan__points{
  max-width: 228px;
  margin: 0 auto;
  text-align: left;
}
.plan__points li{
  padding-left: 30px;
  font-size: 13px;
  color: #787575;
  margin-bottom: 20px;
  position: relative;
}
.plan__points li.is-disabled{
  color: #c6c3c3;
}
.plan__points li:before{
  position: absolute;
  left: 0;
  content: '';
  height: 17px;
  width: 17px;
  border-radius: 50%;
  background: #fac878;
  top: -2px;
  background-image: url("data:image/svg+xml,%3Csvg width='10px' height='8px' viewBox='0 0 10 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 45.2 %2843514%29 - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Eshape%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Sign-Up-1.3' transform='translate%28-833.000000, -1345.000000%29' stroke-width='2' stroke='%23FFFFFF'%3E%3Cg id='Panel-1---Hero' transform='translate%28241.000000, 227.000000%29'%3E%3Cg id='growth' transform='translate%28471.000000, 46.000000%29'%3E%3Cg id='7' transform='translate%2867.000000, 1066.000000%29'%3E%3Cg id='Check' transform='translate%2850.000000, 2.000000%29'%3E%3Cg id='done' transform='translate%285.000000, 4.000000%29'%3E%3Cpolyline id='shape' points='0.48 3.98042519 2.839808 6.4 7.52 1.6'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.plan_main .plan__points li:before{
  background-color: #12c8d5;
}
.plan__points li.is-new:after{
  content: "NEW";
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .7px;
  background: #12c8d5;
  color: #fff;
  height: 17px;
  line-height: 20px;
  width: 37px;
  text-align: center;
  position: absolute;
  display: inline-block;
  border-radius: 100px;
  left: -47px;
  top: -2px;
}
.plan__points a{
  text-decoration: underline;
  color: #25c8d4;
  margin-left: 10px;
}