@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
    height: 100%;
    margin: 0;
    font-family: 'proxima_nova_reg', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    margin: 0;
    letter-spacing: -0.05em;
    text-rendering: optimizelegibility;
}

p, dl, hr, ol, ul, pre, table, address, fieldset {
    margin-bottom: 20px;
}

.diagonal-bg {
    clip-path: polygon(2% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.bg {
    height: 100%;
    width: 100%;
    background: linear-gradient(160deg, #4da8da, #1c75b8);
}

.bg-img {
    background: url('/img/Evergreen-Background_6-1417729740_1.jpg') no-repeat scroll 50% 0 #e6e5ef;
}

#masthead #play-now {
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    position: absolute;
    top: 10px;
    right: 18px;
    width: 210px;
    text-align: center;
    text-transform: uppercase;
}

a.cp-button-play:link, a.cp-button-play:visited {
    color: #6E4E00;
}

a.cp-button-secondary {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefeff', endColorstr='#eef2f4');
    display: -moz-inline-box;
    display: inline-block;
    *display: inline;
    zoom: 1;
    border-radius: 6px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VlZjJmNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fefeff), to(#eef2f4));
    background-image: linear-gradient(#fefeff, #eef2f4);
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    height: 45px;
    line-height: 45px;
    padding: 0 30px;
    color: #22a4f3;
    font-size: 16px;
    text-decoration: none !important;
    border: 1px solid #d5dde1;
    border-width: 1px 1px 3px;
}

a.cp-button-secondary:hover {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f9fb', endColorstr='#fdfdfe');
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZjlmYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZkZmRmZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f9fb), to(#fdfdfe));
    background-image: linear-gradient(#f8f9fb, #fdfdfe);
    color: #22a4f3;
}

a.cp-button-play-feature {
    display: -moz-inline-box;
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 6px;
    background: url(https://play.cpps.app/sites/default/themes/club_penguin/img/common/button-shine-play.png) no-repeat center 0, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZTk5MSIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjZmZkYzRmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZjYzAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background: url(https://play.cpps.app/sites/default/themes/club_penguin/img/common/button-shine-play.png) no-repeat center 0, -webkit-gradient(linear, left top, left bottom, from(#ffe991), color-stop(10%, #ffdc4f), to(#ffcc00));
    background: url(https://play.cpps.app/sites/default/themes/club_penguin/img/common/button-shine-play.png) no-repeat center 0, linear-gradient(-180deg, #ffe991 0%, #ffdc4f 10%, #ffcc00 100%);
    box-shadow: #B89300 0 4px 0, rgba(0, 0, 0, 0.2) 0 6px 0;
    height: 48px;
    line-height: 48px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 24px;
    color: #6E4E00;
    text-decoration: none !important;
    border: 2px solid #FFE991;
}

a.cp-button-play-feature:hover {
    background: url(https://play.cpps.app/sites/default/themes/club_penguin/img/common/button-shine-play.png) no-repeat center -100px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZTk5MSIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjZmZkYzRmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZjYzAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background: url(https://play.cpps.app/sites/default/themes/club_penguin/img/common/button-shine-play.png) no-repeat center -100px, -webkit-gradient(linear, left bottom, left top, from(#ffe991), color-stop(10%, #ffdc4f), to(#ffcc00));
    background: url(https://play.cpps.app/sites/default/themes/club_penguin/img/common/button-shine-play.png) no-repeat center -100px, linear-gradient(0deg, #ffe991 0%, #ffdc4f 10%, #ffcc00 100%);
    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 0;
    margin-top: 4px;
}

a.cp-button-play {
    display: -moz-inline-box;
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 10px;
    background: url(https://play.cpps.app/sites/default/themes/club_penguin/img/common/button-shine-play.png) no-repeat center 0, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZTQ3NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: url(https://play.cpps.app/sites/default/themes/club_penguin/img/common/button-shine-play.png) no-repeat center 0, -webkit-gradient(linear, left top, left bottom, from(#ffe477), to(#ffcc00));
    background: url(https://play.cpps.app/sites/default/themes/club_penguin/img/common/button-shine-play.png) no-repeat center 0, linear-gradient(-180deg, #ffe477 0%, #ffcc00 100%);
    box-shadow: #FFF7D7 0 2px 0 0 inset, rgba(0, 0, 0, 0.15) 0 3px 0;
    height: 55px;
    line-height: 55px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 24px;
    color: #6E4E00;
    text-decoration: none !important;
    text-shadow: #fff 0 1px 0;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
    border: 1px solid #FF9D00;
}

a.cp-button-play:link, a.cp-button-play:visited {
    color: #6E4E00;
}

a.cp-button-play:hover {
    background: url(https://play.cpps.app/sites/default/themes/club_penguin/img/common/button-shine-play.png) no-repeat center -100px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZTQ3NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: url(https://play.cpps.app/sites/default/themes/club_penguin/img/common/button-shine-play.png) no-repeat center -100px, -webkit-gradient(linear, left bottom, left top, from(#ffe477), to(#ffcc00));
    background: url(https://play.cpps.app/sites/default/themes/club_penguin/img/common/button-shine-play.png) no-repeat center -100px, linear-gradient(0deg, #ffe477 0%, #ffcc00 100%);
}

a.cp-button-yellow {
    display: -moz-inline-box;
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 10px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZTQ3NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, left top, left bottom, from(#ffe477), to(#ffcc00));
    background: linear-gradient(-180deg, #ffe477 0%, #ffcc00 100%);
    box-shadow: #FFF7D7 0 2px 0 0 inset, rgba(0, 0, 0, 0.15) 0 3px 0;
    height: 55px;
    line-height: 55px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 24px;
    color: #6E4E00;
    text-decoration: none !important;
    text-shadow: #fff 0 1px 0;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
    border: 1px solid #604E3F;
}

a.cp-button-yellow:link, a.cp-button-yellow:visited {
    color: #6E4E00;
}

a.cp-button-yellow:hover {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZTQ3NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, left bottom, left top, from(#ffe477), to(#ffcc00));
    background: linear-gradient(0deg, #ffe477 0%, #ffcc00 100%);
}

a.cp-button-blue {
    display: -moz-inline-box;
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 10px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyYTRmMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNDA5MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, left top, left bottom, from(#22a4f3), to(#004093));
    background: linear-gradient(-180deg, #22a4f3 0%, #004093 100%);
    box-shadow: 0 3px 0 0 rgba(0, 82, 175, 0.4), inset 0 2px 0 0 rgba(255, 255, 255, 0.4);
    height: 55px;
    line-height: 55px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 24px;
    color: #fff;
    text-decoration: none !important;
    border: 1px solid #003F72;
}

a.cp-button-blue:link, a.cp-button-blue:visited {
    color: #fff;
}

a.cp-button-blue:hover {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNDA5MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyYTRmMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, left top, left bottom, from(#004093), to(#22a4f3));
    background: linear-gradient(-180deg, #004093 0%, #22a4f3 100%);
}

a.cp-button-dark-blue {
    display: -moz-inline-box;
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    border-radius: 8px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNmFiZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNDA5MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, left top, left bottom, from(#006abd), to(#004093));
    background: linear-gradient(-180deg, #006abd 0%, #004093 100%);
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.2), inset 0 1px 1px 0 rgba(126, 225, 255, 0.4);
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 16px;
    color: #fff;
    text-decoration: none !important;
    border: 1px solid #003F72;
}

a.cp-button-dark-blue:link, a.cp-button-dark-blue:visited {
    color: #fff;
}

a.cp-button-dark-blue:hover {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNDA5MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNmFiZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, left top, left bottom, from(#004093), to(#006abd));
    background: linear-gradient(-180deg, #004093 0%, #006abd 100%);
}

a.cp-button-green {
    display: -moz-inline-box;
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 10px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZlZDIwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVkYjEwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, left top, left bottom, from(#6ed200), to(#5db100));
    background: linear-gradient(-180deg, #6ed200 0%, #5db100 100%);
    box-shadow: 0 3px 0 0 rgba(0, 62, 113, 0.3), inset 0 1px 1px 0 #CCFF7D;
    height: 55px;
    line-height: 55px;
    padding: 0 10px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 24px;
    color: #fff;
    text-align: center;
    text-decoration: none !important;
    border: 1px solid;
    border-color: #003F72;
    border-color: rgba(0, 63, 114, 0.8);
    transition: all 200ms ease;
}

a.cp-button-green:link, a.cp-button-green:visited {
    color: #fff;
}

a.cp-button-green:hover {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVkYjEwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZlZDIwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, left top, left bottom, from(#5db100), to(#6ed200));
    background: linear-gradient(-180deg, #5db100 0%, #6ed200 100%);
}

a.cp-button-flat {
    display: -moz-inline-box;
    display: inline-block;
    *display: inline;
    zoom: 1;
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    border-radius: 4px;
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    border: 1px solid;
    border-color: #003F72;
    border-color: rgba(0, 63, 114, 0.8);
    transition: all 200ms ease;
}

a.cp-button-flat:hover {
    background-color: #003F72;
    background-color: rgba(0, 63, 114, 0.8);
}

.cpmenu {
    display: block;
    padding: 5px 0 2px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    transition: all ease 300ms;
}

.cpmenu:hover {
    color: #FFCC00;
    border-bottom: 3px solid #FFCC00;
    text-decoration: none;
}

:root {
    --hero-height: 60vh;
}

#hero {
    height: 60vh;
    height: var(--hero-height);
}

.bg-hero1 {
    background-image: url('/img/download-ETEbanner-min.png');
}

.bg-hero2 {
    background-image: url('/img/CP-Banner.png');
}

#hero button {
    color: white;
    font-size: 1.5rem;
}

.feature img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Фон всего попапа */
.popup-content {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 50;
}

/* При активном состоянии показываем flex */
.popup-content.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* Скрываем дефолтные правила для page-класса (не используется здесь) */
body.page-club-penguin-rules .page {
    width: auto;
}

body.page-club-penguin-rules .modal-inner-close {
    display: none;
}

body.page-club-penguin-rules #section-content #zone-content-wrapper {
    box-shadow: none;
    background: transparent;
    padding: 0;
}

body.page-club-penguin-rules #section-content #zone-content-wrapper #zone-content {
    background: transparent;
}

/* Обёртка правил */
#club-penguin-rules-wrapper {
    display: block;
    width: 300px;
    height: 428px;
    margin: 0 auto;
    overflow: hidden;
    color: #fff;
    border-radius: 20px;
    border: 3px solid #0052af;
    background: #fff url(https://play.cpps.app/sites/default/modules/custom/penguin/img/rules-background.png) 0 0 no-repeat;
    box-sizing: border-box;
    position: relative;
}

@media screen and (min-width: 768px) {
    #club-penguin-rules-wrapper {
        width: 500px;
    }
}

/* Шапка правил */
#club-penguin-rules-wrapper #rules-header h1 {
    padding-left: 20px;
    padding-top: 10px;
    text-align: left;
    font-size: 18px;
    color: #0052af;
    background-color: #ddd;
}

/* Правила */
#club-penguin-rules-wrapper #rule-one,
#club-penguin-rules-wrapper #rule-two,
#club-penguin-rules-wrapper #rule-three,
#club-penguin-rules-wrapper #rule-four {
    position: relative;
    margin-top: 20px;
    margin-left: 20px;
    padding: 7px;
    color: #0052af;
}

#club-penguin-rules-wrapper #rule-one {
    background: url(https://play.cpps.app/sites/default/modules/custom/penguin/img/rules-smiley.png) 0 0 no-repeat;
}

#club-penguin-rules-wrapper #rule-two {
    background: url(https://play.cpps.app/sites/default/modules/custom/penguin/img/rules-chatbox.png) 0 0 no-repeat;
    background-size: 50px auto;
}

#club-penguin-rules-wrapper #rule-three {
    background: url(https://play.cpps.app/sites/default/modules/custom/penguin/img/rules-tube.png) 0 0 no-repeat;
}

#club-penguin-rules-wrapper #rule-four {
    background: url(https://play.cpps.app/sites/default/modules/custom/penguin/img/rules-controller.png) 0 0 no-repeat;
}

/* Заголовок правила */
#club-penguin-rules-wrapper #rule-one h3,
#club-penguin-rules-wrapper #rule-two h3,
#club-penguin-rules-wrapper #rule-three h3,
#club-penguin-rules-wrapper #rule-four h3 {
    margin-left: 65px;
    font-size: 14px;
    font-weight: bold;
    color: #0052af;
}

@media screen and (min-width: 768px) {
    #club-penguin-rules-wrapper #rule-one h3,
    #club-penguin-rules-wrapper #rule-two h3,
    #club-penguin-rules-wrapper #rule-three h3,
    #club-penguin-rules-wrapper #rule-four h3 {
        font-size: 16px;
    }
}

/* Описание правила */
#club-penguin-rules-wrapper #rule-one h4,
#club-penguin-rules-wrapper #rule-two h4,
#club-penguin-rules-wrapper #rule-three h4,
#club-penguin-rules-wrapper #rule-four h4 {
    margin-left: 65px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.2em;
}

@media screen and (min-width: 768px) {
    #club-penguin-rules-wrapper #rule-one h4,
    #club-penguin-rules-wrapper #rule-two h4,
    #club-penguin-rules-wrapper #rule-three h4,
    #club-penguin-rules-wrapper #rule-four h4 {
        font-size: 14px;
    }
}

/* Футер правил */
#club-penguin-rules-wrapper #rules-footer {
    position: relative;
    margin-top: 20px;
    font-size: 10px;
    text-align: center;
    color: #0052af;
}

#club-penguin-rules-wrapper #rules-footer h5 {
    padding: 0 10px;
    line-height: 1.2em;
}

@media screen and (min-width: 768px) {
    #club-penguin-rules-wrapper #rules-footer h5 {
        font-size: 14px;
    }
}


.close, .back {
    position: absolute;
    top: 0;
    z-index: 99;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: url(https://play.cpps.app/sites/default/modules/custom/penguin/img/btn-x.png) center center no-repeat;
    background-size: 30px auto;
}

@media screen and (min-width: 768px) {
    .close, .back {
        width: 40px;
        height: 40px;
        background-size: 35px auto;
    }
}

.close {
    right: 0;
}

.close, .back {
    background-image: url(https://play.cpps.app/sites/default/modules/custom/penguin/img/btn-x.png);
    background-color: transparent;
    background-color: initial;
}

#page-title {
    margin: 0 10px;
    color: #0051AF;
    font-size: 30px;
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
}

#parent-tools .cancel-login, #parent-tools .parent-login, #parent-tools .add-penguin-form {
    border-radius: 8px;
    width: 620px;
    min-height: 300px;
    padding: 0;
    background: #22a4f3 url(https://play.cpps.app/sites/default/themes/club_penguin/img/components/parents/Shape.png) 0 bottom no-repeat;
    background-size: 100%;
}

#parent-tools .cancel-login h2, #parent-tools .parent-login h2, #parent-tools .add-penguin-form h2 {
    border-radius: 8px 8px 0 0;
    margin: 0;
    padding: 20px 20px;
    color: #fff;
    font-size: 18px;
    background: #117ad0;
}

#parent-tools .cancel-login form, #parent-tools .parent-login form, #parent-tools .add-penguin-form form {
    margin-left: 60px;
    margin-top: 40px;
    padding-bottom: 15px;
}

#parent-tools .cancel-login form .prompt, #parent-tools .parent-login form .prompt, #parent-tools .add-penguin-form form .prompt {
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    display: inline-block;
    width: 340px;
    margin-right: 10px;
    text-align: left;
    color: #fff;
}

#parent-tools .cancel-login form .form-item, #parent-tools .parent-login form .form-item, #parent-tools .add-penguin-form form .form-item {
    padding: 5px 0;
}

#parent-tools .form-item {
    width: auto;
    margin: 5px 0;
    position: relative;
}

#parent-tools .cancel-login form .form-submit, #parent-tools .parent-login form .form-submit, #parent-tools .add-penguin-form form .form-submit {
    behavior: url(https://play.cpps.app/sites/default/themes/club_penguin/css/pie/PIE.htc);
    position: relative \9;
    background: #0169c3 url(https://play.cpps.app/sites/default/themes/club_penguin/img/common/button-gradient-dk.png) left top repeat-x;
    border-radius: 6px;
    border-top: 1px solid #104b99;
    border-left: 1px solid #104b99;
    border-right: 1px solid #104b99;
    border-bottom: 2px solid #104b99;
    padding: 5px 11px 3px;
    line-height: 1em;
    color: #fff;
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    display: -moz-inline-box;
    display: inline-block;
    zoom: 1;
    text-decoration: none;
    width: 335px;
    height: 45px;
    margin: 10px 0 10px 55px;
    font-size: 18px;
}

#parent-tools .cancel-login .form-item input, #parent-tools .cancel-login .form-item input.error, #parent-tools .parent-login .form-item input, #parent-tools .parent-login .form-item input.error {
    height: 40px;
}

#parent-tools .form-item input {
    border-color: #1078CF;
    vertical-align: top;
    margin-top: 12px;
    margin-left: 50px;
}

textarea, input[type="text"], input[type="password"] {
    font-family: 'proxima_nova_regular', Helvetica, Arial, sans-serif;
    font-weight: normal;
    border-radius: 8px;
    padding: 3px 8px;
    color: #999;
    font-size: 16px;
    outline: 0;
    -webkit-appearance: none;
    border: 2px solid #eeeeee;
    background-color: #fff;
}

#parent-tools .cancel-login form label, #parent-tools .parent-login form label, #parent-tools .add-penguin-form form label {
    left: 165px;
}

#parent-tools .form-item label {
    font-family: 'proxima_nova_bold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    position: absolute;
    left: 30px;
    z-index: 10;
    margin-left: -100px;
    margin-top: 43px;
    font-size: 14px;
    color: #BFCFD8;
    text-transform: uppercase;
}

#parent-tools {
    padding: 0 10px;
}