/*
        General
*/

html, body {
    font-family: 'Nunito', sans-serif;

    width: 100%;
    min-width: 960px;

    background-color: #f1f1f1;
}

#page {
    padding-top: 55px;
}

.animation-hover * {
    /* First we need to help some browsers along for this to work.
    Just because a vendor prefix is there, doesn't mean it will
    work in a browser made by that vendor either, it's just for
    future-proofing purposes I guess. */
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    /* ...and now for the proper property */
    transition:.3s;
}

.hide {
    display: none;
}

.show {
    display: block !important;
}

.align-left {
    float: left;
}

.align-right {
    float: right;
    margin: 0 0 0 25px;
}

.rule {
    margin: 0 auto;
    width: 940px;

    position: relative;
}

*:focus {
    outline: 0;
}

/*

        AUTOCOMPLETE
*/

.ui-menu {
    font-family: "Nunito", sans-serif !important;
    font-size: 12px !important;
    color: #959595 !important;

    background-color: #f1f1f1 !important;
}

.ui-menu .ui-menu-item {

}

.ui-menu .ui-menu-item:hover {
    background-color: #dedede;
}

/*
        header
*/

#header {
    width: 100%;
    height: 55px;

    background-color: #2d2e2e;

    position: fixed;
    top: 0;
    z-index: 4;
}

#header #menu {
    float: left;
}

#header #menu ul {
    padding: 0;
    margin: 0;
    float: left;
}

#header #menu ul li {
    padding: 0;
    margin: 0;
    float: left;

    list-style: none;
}

#header #menu ul li a {
    text-decoration: none;
    font-size: 13px;
    color: #FFF;
    font-weight: lighter;
    display: block;
    padding: 18.5px 10px;
}

#header #menu .logo {
    padding: 16.5px;
}

#header #menu .logo:hover {
    background-color: #666;
}
#header #menu .logo a{
    /*margin: 10px 15px 0 0;*/
    padding: 18px 50px;
    background-image: url('../img/header/logo.png');
    background-size: 103px 33px;
    background-repeat: no-repeat;
    background-position: center;
}

#header #menu .logo:hover a{
    background-image: url('../img/header/logo-hover.png');
}

#header #user-options {
    float: right;
}

#header #user-options ul {
    padding: 0;
    margin: 0;
    float: right;
}

#header #user-options ul a {
    text-decoration: none;
    font-size: 11px;
    color: #FFF;

    display: block;
    padding: 18.5px 10px;
    float: right;
}

#header #user-options .create {
    background-image: url('../img/header/create.png');
    background-color: #DC1866;
    background-repeat: no-repeat;
    background-position: 42% 50%;
    border-radius: 30px;

    padding: 7px 25px 7px 39px;
    margin: 11px 0 0 0;

    color: #fff6c6;
    font-size: 14px;
    font-weight: bold;
}

#header #user-options .create:hover {
    background-image: url('../img/header/create_hover.png');
    background-position: 42% 50%;
    /*background-color: #ee0063;*/
}

#header #user-options .profile {
    background-image: url("../img/header/icon_user.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 18px auto;

    width: 54px;
    height: 55px;
    padding: 0;
}

#header #user-options .parent_item {
    float: right;
}

#header #user-options .profile:hover {
    /*background-color: #000;
    background-image: url("../img/workspace/profile_hover.png");*/
}

#header #user-options .login {
    padding: 18.5px 20px;
    margin-left: 10px;

    color: #FFF;
    font-size: 13px;
    font-weight: lighter;
}

#header #user-options .login:hover {
    /*color: #ff6eaa;*/
}

#header #user-options .feedback {
    background-image: url('../img/header/feedback.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px auto;

    border-left: 1px solid #3f3f3f;

    padding: 20.5px 23px 19px 23px;
}

#header #user-options .feedback:hover {
    /*background-image: url('../img/workspace/feedback_hover.png');*/
}

#header #user-options .help {
    background-image: url('../img/header/help.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 20px;

    border-left: 1px solid #3f3f3f;

    padding: 20.5px 23px 19px 23px;
}

#header #user-options .help:hover {
    /*background-image: url('../img/workspace/help_hover.png');*/
}

#header #user-options .help:hover, #header #user-options .feedback:hover, #header #user-options .login:hover {
    background-color: #666;
}

/*
        drop down menu
*/

#menu .navigation li, #user-options li {
    padding: 0;
    margin: 0;
    float: left;
    display: block;
    position: relative;
    list-style: none;
}

.navigation .parent_item:hover a, #header #menu ul li a:hover,
#user-options .parent_item:hover a, #user-options ul li a:hover {
    background-color: #666;
}

.navigation li:hover, #user-options li:hover {
    color: #ffffff;
}
.navigation li .children, #user-options .parent_item .children {
    display: none;
    list-style: none;

    padding: 2px;
    margin: 0;
    position: absolute;
    left:0;
    min-width: 200px;
    top:55px;

    background-color: #000;
    line-height: 34px;
}
.navigation li:hover .children, #user-options li:hover .children {
    display: block;
    z-index: 2;
}
.navigation li .children li, #user-options .children li {
    padding: 0;
    margin: 0;
    width: 100%;
}
.navigation li .children li:first-child a, #user-options .children li:first-child a {
    padding: 2px 0 2px 20px !important;
}
.navigation li .children li a, #user-options .children li a {
    text-decoration: none;
    color: #fff;
    font-size: 14px !important;
    display: block;
    padding: 2px 0 2px 20px !important;
    white-space: nowrap;
    border-bottom: 1px solid #2d2e2e;
    float: none !important;
    background-color: #000 !important;
}
.navigation li .children li a:hover, #user-options .children li a:hover {
    background-color: #666 !important;
    color: #fff !important;
}

/*
        container
*/

#container #title {
    background-color: #eaeaea;
    /*border-bottom: 1px solid #d7d7d7;*/

    padding: 20px 0
}

#container #title h1 {
    float: left;

    margin: 0;

    color: #d6256e;
    font-size: 30px;
    font-weight: lighter;
}

#container #title p {
    float: right;

    margin: 13px 20px 0 0;

    color: #898989;
    font-size: 12px;
}

#container #title p span {
    font-size: 18px;
}

#container #title p .pink {
    color: #dd386e;
    font-weight: bold;
}

#container #title p .black {
    color: #000;
    font-weight: bold;
}

#container #title h1 span {
    font-weight: normal;
}

#container .files .editable {
    /*border-bottom: 1px solid #ddd;*/
}

#container .files .editable .title h1,
#container .files .downloaded .title h1 {
    color: #b7b7b7;
    font-size: 24px;
    font-weight: lighter;
}

#container .historicTitle {
    background-color: #eaeaea;
    /*border-bottom: 1px solid #d7d7d7;*/

    padding: 20px 0;
    margin-bottom: 25px;
    margin-top: 25px;
}

#container .historicTitle h1 {
    float: left;

    margin: 0;

    color: #d6256e;
    font-size: 30px;
    font-weight: lighter;
}

#container .loginRegisterBox {
    width: 644px;
    margin: 0 auto;
}

#container .loginRegisterBox h1, #container .profile h1 {
    text-align: center;
    font-weight: lighter;
    font-size: 24px;
    color: #b7b7b7;

    margin: 0;
    padding: 25px 0;
    border-bottom: 1px solid #e2e2e2;
}

#container .loginRegisterBox h1.registertitle {
    display: none;
}

#container .loginRegisterBox h1.logintitle {
    display: none;
}

#container .loginRegisterBox .signInSignUp {
    margin-top: 10px;
}

#container .loginRegisterBox .signInSignUp .center {
    padding: 80px 0;

    text-align: center;
    color: #959595;
}

#container .loginRegisterBox .errorText, #container .profile .errorText  {
    background-color: #FF0000;
    color: #FFF;
    font-size: 11px;
    text-align: center;

    padding: 3px 10px 3px 10px !important;
    margin: 0;
    width: 97.8% !important;
}

#container .loginRegisterBox .divImg img{
    width: 250px;
    margin: 40px;
}

#container .successText {
    background-color: #06b46c;
    color: #FFF;
    font-size: 11px;
    text-align: center;

    padding: 3px 10px 3px 10px !important;
    margin: 0;
    width: 99% !important;
}

#container .loginRegisterBox .signInSignUp .choiceSignUp ul, #container .loginRegisterBox .signInSignUp .choiceSignIn ul,
#container .loginRegisterBox .signInSignUp .disable ul, #container .loginRegisterBox .signInSignUp .hover ul {
    margin: 0;
    padding: 16px 0 5px 0;

    cursor: pointer;

    font-size: 20px;
}

#container .loginRegisterBox .signInSignUp .choiceSignUp a, #container .loginRegisterBox .signInSignUp .choiceSignIn a,
#container .loginRegisterBox .signInSignUp .disable a, #container .loginRegisterBox .signInSignUp .hover a {
    display: block;

    width: 100px;
    margin: 0 auto;
    padding: 5px 20px;

    border: 1px solid #D6256E;
    border-radius: 35px;

    text-decoration: none;
}

#container .loginRegisterBox .signInSignUp .choiceSignUp.hover a {
    background-color: #29aa75;
    color: #fff;
}

#container .loginRegisterBox .signInSignUp .choiceSignIn.hover a {
    background-color: #d6256e;
    color: #fff;
}

#container .loginRegisterBox .signInSignUp .choiceSignUp a {
    color: #29aa75;
    border-color: #29aa75;
}

#container .loginRegisterBox .signInSignUp .choiceSignUp.disable, .choiceSignUp.disable a, .choiceSignIn.disable a {
    color: #d7d7d7;
}

#container .loginRegisterBox .signInSignUp .choiceSignUp .signUpImage {
    background-image: url("../img/loginRegister/signUp.png");
    background-repeat: no-repeat;

    width: 90px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
}

#container .loginRegisterBox .signInSignUp .choiceSignUp.disable .signUpImage {
    background-image: url("../img/loginRegister/signUp_disable.png");
}

#container .loginRegisterBox .signInSignUp .choiceSignUp.hover .signUpImage {
    background-image: url("../img/loginRegister/signUp_hover.png");
}

#container .loginRegisterBox .signInSignUp .choiceSignIn a {
    color: #d6256e;
}

#container .loginRegisterBox .signInSignUp .choiceSignIn .loginImage {
    background-image: url("../img/loginRegister/login.png");
    background-repeat: no-repeat;

    width: 90px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
}

#container .loginRegisterBox .signInSignUp .choiceSignIn.disable .loginImage {
    background-image: url("../img/loginRegister/login_disable.png");
}

#container .loginRegisterBox .signInSignUp .choiceSignIn.hover .loginImage {
    background-image: url("../img/loginRegister/login_hover.png");
}

#container .loginRegisterBox .signInSignUp .register {
    width: 319px;

    border-right: 1px solid #FFF;
}

#container .loginRegisterBox .signInSignUp .login {
    width: 320px;
}

#container .loginRegisterBox .signInSignUp .choiceSignUp .register, .formSignUp a {
    color: #29aa75;
    text-decoration: none;
}

#container .loginRegisterBox .signInSignUp .choiceSignIn .login a {
    color: #d6256e;
}

#container .loginRegisterBox .signInSignUp .formSignUp {
    background-color: #eaeaea;
    color: #959595;
    padding: 10px 0 0 0;
    display: none;

    border-left: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    height: 390px;
}

#container .loginRegisterBox .signInSignUp .formSignUp .signupbutton {
    text-align: center;
    margin: 20px auto 34px auto;
}

#container .loginRegisterBox .signInSignUp .formSignUp input.button {
    border: 1px solid #29aa75;
    border-radius: 35px;

    padding: 10px 20px;
    margin-bottom: 10px;

    font-size: 20px;
    font-family: 'Nunito', sans-serif;

    color: #29aa75;
}

#container .loginRegisterBox .signInSignUp .formSignUp input.button:hover {
    background-color: #30c588;
    color: #FFF;
}

#container .loginRegisterBox .signInSignUp .formSignUp ul {
    margin: 0 auto;
    padding: 0;

    width: 245px;
}

#container .loginRegisterBox .signInSignUp .formSignUp .input {
    border: none;
    border-radius: 20px;

    -webkit-box-shadow: inset 1px 3px 2px 1px #DDD;
    -moz-box-shadow: inset 1px 3px 2px 1px #DDD;
    box-shadow: inset 1px 3px 2px 1px #DDD;

    width: 233px;
    padding: 10px 0 10px 10px;

    font-size: 14px;
    color: #686868;
}

#container .loginRegisterBox .signInSignUp .formSignUp  select {
    min-width: 245px;
}

#container .loginRegisterBox .signInSignUp .formSignUp .register_role {
    padding-top: 10px;
}

#container .loginRegisterBox .signInSignUp .formSignUp .e-mail {
    padding: 10px 0 10px 0;
}

#container .loginRegisterBox .signInSignUp .formSignUp .conditionTermText {
    font-size: 12px;

    padding: 20px 0;

    border-bottom: 1px solid #d5d5d5;
}

#container .loginRegisterBox .signInSignUp .formSignIn {
    background-color: #eaeaea;
    color: #959595;

    display: none;

    border-right: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    height: 400px;
}

#container .loginRegisterBox .signInSignUp .formSignIn ul {
    margin: 0;
    padding: 0;
}

#container .loginRegisterBox .signInSignUp .formSignIn .loginbutton {
    text-align: center;
    margin: 25px auto 62px auto;

}

#container .loginRegisterBox .signInSignUp .formSignIn input.button {
    border: 1px solid #D6256E;
    border-radius: 35px;

    padding: 10px 30px;
    margin-bottom: 10px;

    font-size: 20px;
    font-family: 'Nunito', sans-serif;
    color: #D6256E;
}

#container .loginRegisterBox .signInSignUp .formSignIn input.button:hover {
    background-color: #f32c7e;
    color: #FFF;
}

#container .loginRegisterBox .signInSignUp .formSignIn ul {
    margin: 0 auto;
    padding: 0;

    width: 245px;
}

#container .loginRegisterBox .signInSignUp .formSignIn .input {
    border: none;
    border-radius: 20px;

    -webkit-box-shadow: inset 1px 3px 2px 1px #DDD;
    -moz-box-shadow: inset 1px 3px 2px 1px #DDD;
    box-shadow: inset 1px 3px 2px 1px #DDD;

    width: 233px;
    padding: 10px 0 10px 10px;

    font-size: 14px;
    color: #686868;
}

#container .loginRegisterBox .signInSignUp .formSignIn .e-mail {
    padding: 90px 0 10px 0;
}

#container .loginRegisterBox .signInSignUp .formSignIn .forgotpasstext {
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #959595;

    margin: 15px 38px;

    display: block;
}

#container .loginRegisterBox .signInSignUp .formSignIn .rememberme {
    font-size: 12px;
}

#container .loginRegisterBox .signInSignUp .formSignIn .rememberme input {
    float: left;
    margin: 1px 5px 0 0;
}

#container #content {
    padding: 20px 0;
}

#container #content .item {
    margin: 5px 0 0 0;
}

#container #content .item ul {
    padding: 10px 10px;

    display: none;

    font-size: 16px;
    color: #555555;
    text-decoration: none;
}

#container #content .item ul.show {
    display: block;
}

#container #content .item ul p {
    margin:0;
    padding: 0;

    font-weight: lighter;
}

#container #content .item a {
    background-image: url("../img/content/arrow-down.png");
    background-repeat: no-repeat;
    background-position: 98.5% 55%;
    background-color: #e8e8e8;
    border: 1px solid #d7d7d7;
    border-radius: 3px;

    display: block;
    padding: 10px 15px;

    font-size: 16px;
    color: #d6256e;
    text-decoration: none;
}

#container #content .item a:hover, #container #content .item a.hover {
    background-image: url("../img/content/arrow-up.png");
    background-color: #d6256e;
    border: 1px solid #d6256e;

    color: #ffffff;
}

/*

        HOW IT WORKS

*/

.howitworks #container .howitworks {
    position: relative;
}

.howitworks #container .howitworks h1 {
    float: none !important;
}

.howitworks #container .howitworks .steps .step {
    margin: 100px 0;
    height: 377px;
}

.howitworks #container .howitworks .steps .step.select {
    margin: 20px 0;
}


/*

        HOME

*/
.home #container .create {
    background-image: url("../img/home/create-background.png");
    background-repeat: no-repeat;
    background-color: #b31a59;
    width: 100%;
    height: 480px;
}
.home #container .create h1 {
    color: #FFF;
    font-weight: lighter;
    font-size: 48px;
    padding: 25px 0;
    margin: 0;
}
.home #container .create .about {
    float: left;
}
.home #container .create .features {
    float: left;
    width: 400px;
    margin: 0 0 0 35px;
}
.home #container .create .features ul {
    margin: 0;
    padding: 0;
}
.home #container .create .features ul li {
    list-style: none;
    color:#FFF;
    font-size:16px;
    padding:12px 0 12px 40px;
    border-top:1px solid #d14c83;
    background-repeat: no-repeat;
    background-position: 2% 50%;
}
.home #container .create .features ul li.ilustrations {
    background-image: url('../img/home/icon_mini_ilustrations.png');
}
.home #container .create .features ul li.examples {
    background-image: url('../img/home/icon_mini_examples.png');
}
.home #container .create .features ul li.visual {
    background-image: url('../img/home/icon_mini_visual.png');
}
.home #container .create .features ul li.resume {
    background-image: url('../img/home/icon_mini_resume.png');
}
.home #container .create .button {
    padding: 15px 0;
    margin: 30px auto 0 auto;
    width: 394px;

    box-shadow: 3px 3px 5px #a21750;
    -moz-box-shadow: 3px 3px 5px #a21750;
    -webkit-box-shadow: 3px 3px 5px #a21750;

    text-decoration: none;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #ff136a;

    background-color: #fff5c0;
    border-radius: 30px;

    display: block;
}
.home #container .create p {
    color:#ff99bf;
    font-size:13px;
    text-align: center;
    margin:5px 0 0 0;
    padding:0;
}
.home #container .create p a {
    color:#ff99bf;
}

.home #container .howitworks {
    position: relative;
    margin: 0;
    padding: 50px 0;
    background-color: #f0f0f0;
}
.home #container .benefits {
    display: block;
    width: 100%;
}
.home #container .benefits ul {
    padding:70px 20px 10px 20px;
    margin:0;
    height:150px;
    background-position: 50% 5%;
    background-repeat: no-repeat;
    float: left;
    text-align: center;
    width:20%;
    border-right:1px solid #e6e6e6;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color:#707070;
    font-size:14px;
    line-height: 17px;
}
.home #container .benefits ul a {
    color:#ee0063;
}
.home #container .benefits ul.visual {
    background-image: url('../img/home/icon_visual.png');
}
.home #container .benefits ul.time {
    background-image: url('../img/home/icon_time.png');
}
.home #container .benefits ul.content {
    background-image: url('../img/home/icon_content.png');
}
.home #container .benefits ul.editable {
    background-image: url('../img/home/icon_editable.png');
}
.home #container .benefits ul.doit {
    background-image: url('../img/home/icon_doit.png');
    border:0;
}

.home #container .howitworks {
    position: relative;
    margin: 0;
    padding: 50px 0;
    background-color: #f0f0f0;
}
.home #container .howitworks .header h1 {
    color: #555555;
    font-size: 23px;
    margin: 0 0 40px 0;
    float: left;
}
.home #container .howitworks .header a {
    font-weight: bold;
    color: #d6568b;
    text-decoration: none;
    font-size: 14px;
    border: 1px solid #e6c0d0;
    border-radius: 3px;
    padding: 12px 19px;
    float: right;
    margin: 0 180px 0 0;
}
.home #container .howitworks .slider {
    float: left;
}
.home #container .howitworks .options {
    position: relative;
    float: right;
    width: 299px;
    height: 455px;
    font-size: 21px;
    padding: 0 25px;
    box-sizing: border-box;
}
.home #container .howitworks .options h1 {
    font-size: 48px;
    line-height: 47px;
    color: #d6256e;
    padding: 0;
    margin: 0;
    padding-top: 53px;
}
.home #container .howitworks .options .button {
    text-decoration: none;
    background-color: #5ca8a2;
    font-size: 18px;
    color: #fff6c9;
    border-radius: 30px;
    padding: 17px 35px;
    margin: 30px 0px 0 0;
    width: 200px;
    text-align: center;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    -moz-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    float: left;
}
.home #container .howitworks .options .button.pink {
    background-color:#d6256e;
}
.home #container .howitworks .options a.option {
    color: #7d7d7d;
    font-size: 12px;
    text-decoration: none;
    padding: 16px 12px;
    display: block;
    border-top: 1px solid #ccc;
}
.home #container .howitworks .options a.more {
    color:#ee0063;
    display: block;
    font-size:12px;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 12px;
}

.home #container .whatyouget {
    position: relative;
    margin: 0;
    padding: 50px 0;
    background-color: #fff;
}
.home #container .whatyouget h1 {
    color:#555555;
    font-size:23px;
    margin: 0 0 40px 0;
}

.home #container .checkplans {
    position: relative;
    margin: 0;
    padding: 20px 0 100px 0;
    background-color: #fff;
}
.home #container .checkplans .rule {
    width:430px;
}
.home #container .checkplans h1 {
    color:#747474;
    font-size:16px;
}
.home #container .checkplans .listplans {
    background-repeat: no-repeat;
    background-position: top left;
    background-image:url('../img/home/icon_plans.png');
    padding: 4px 0 0 60px;
}
.home #container .checkplans .listplans .button {
    text-decoration: none;
    background-color: #5ca8a2;
    font-size: 18px;
    color: #fff;
    border-radius: 30px;
    padding: 19px 30px;
    margin: 0 6px;
    width: 180px;
    text-align: center;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    -moz-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    float: left;
}
.home #container .checkplans .listplans p {
    color: #ff99bf;
    font-size: 13px;
    display: block;
    margin: 11px 0 0 78px;
    padding: 0;
    width: 100%;
    float: left;
}
.home #container .checkplans .listplans p a {
    color: #ff99bf;
}
.home #container .checkplans .listplans .button.pink {
    background-color:#d6256e;
}

/*
.home #container .create {
        height: 320px;
        padding: 30px 0 20px 0;

        position: relative;
}

.home #container .create-animation {
        position: absolute;
        top: 90px;
        width: 100%;
        height: 0;

        z-index: 3;
}

.home #container .create-animation .elements {
        position: relative;
}

.home #container .create-animation .elements .man {
        left: 79px;
        top: 12px;
}

.home #container .create-animation .elements .man-shadow {
        top: 27px;
        left: 9px;

        height: 271px;
}

.home #container .create-animation .elements .circle {
        left: 104px;
}

.home #container .create-animation .elements .circle2 {
        left: 222px;
        top: 4px;
}

.home #container .create-animation .elements .line {
        left: 160px;
        top: 34px;
}

.home #container .create-animation .elements .brain {
        left: 244px;
        top: 34px;
}

.home #container .create-animation .elements .chart {
        left: 240px;
        top: 180px;
}

.home #container .create-animation .elements img {
        position: absolute;
}

.home #container .create .rule {
        position: relative;
        z-index: 2;
}

.home #container .create .background {
        background-image: url("../img/home/create-background.png");
        background-repeat: no-repeat;
        background-color: #b31a59;

        position: fixed;
        top: 55px;

        width: 100%;
        height: 370px;

        z-index: 1;
}

.home #container .create .chart {
        float: left;

        margin-left: 20px;
}


.home #container .create .startcreating {
        float: right;

        padding-left: 70px;

        background-image: url("../img/home/banner_divider.png");
        background-repeat: no-repeat;
}

.home #container .create .startcreating h1 {
        width: 415px;
        margin: 0;

        color: #fff;
        font-size: 46px;
        font-weight: lighter;
        line-height: normal;
        text-align: center;
}

.home #container .create .startcreating a {
        background-image: url("../img/home/startcreate.png");
        background-repeat: no-repeat;
        background-position: 27% 52%;

        padding: 16px 0 15px 0;
        margin: 35px auto 0 auto;
        width: 394px;

        box-shadow: 3px 3px 5px #a21750;
        -moz-box-shadow: 3px 3px 5px #a21750;
        -webkit-box-shadow: 3px 3px 5px #a21750;

        text-decoration: none;
        text-align: center;
        font-size: 27px;
        font-weight: bold;
        color: #ff136a;

        background-color: #fff5c0;
        border-radius: 5px;

        display: block;
}

.home #container .create .startcreating a:hover {
        background-image: url("../img/home/startcreate_hover.png");
        background-color: #fbeea4;
}

.home #container .create .startcreating p {
        margin: 10px 0 0 0;

        color: #ff99bf;
        text-align: center;
        font-size: 18px;
}

.home #container .howitworks {
        height: 540px;
        padding-top: 30px;

        background-color: #fff;
        position: relative;

        z-index: 2;
        position: relative;
}

.home #container .howitworks .next, .home #container .howitworks .previous {
        width: 54px;
        height: 54px;
        top: 220px;

        position: absolute;

        background-repeat: no-repeat;

        text-decoration: none;
}

.home #container .howitworks .next {
        background-image: url("../img/home/right.png");
        right: -26px;
}

.home #container .howitworks .next:hover {
        background-image: url("../img/home/right_hover.png");
}

.home #container .howitworks .next.disable {
        background-image: url("../img/home/right_disable.png");
        cursor: default;
}

.home #container .howitworks .previous {
        background-image: url("../img/home/left.png");
        left: -54px;
}

.home #container .howitworks .previous:hover {
        background-image: url("../img/home/left_hover.png");
}

.home #container .howitworks .previous.disable {
        background-image: url("../img/home/left_disable.png");
        cursor: default;
}

.home #container .howitworks .header {
        height: 41px;
        margin: 20px 0;
}

.home #container .howitworks .header h1,
.howitworks #container .howitworks .header h1 {
        float: left;

        font-size: 30px;
        font-weight: lighter;
        color: #a0a0a0;

        margin: 0;
}

.home #container .howitworks .header h1 span,
.howitworks #container .howitworks .header h1 span {
        font-weight: bold;
}

.home #container .howitworks .header .choices {
        float: right;

        padding: 5px 5px 5px 0;

        background-color: #ebebeb;
        border-radius: 20px;
}

.home #container .howitworks .header .choices a {
        margin-left: 5px;
        width: 33px;
        height: 33px;

        display: block;
        float: left;

        text-decoration: none;
}

.home #container .howitworks .header .choices .select {
        background-image: url("../img/home/videohand.png");
        background-repeat: no-repeat;
}

.home #container .howitworks .header .choices .select:hover {
        background-image: url("../img/home/videohand_hover.png");
}

.home #container .howitworks .header .choices .edit {
        background-image: url("../img/home/videoedit.png");
        background-repeat: no-repeat;
}

.home #container .howitworks .header .choices .edit:hover {
        background-image: url("../img/home/videoedit_hover.png");
}

.home #container .howitworks .header .choices .download {
        background-image: url("../img/home/videodownload.png");
        background-repeat: no-repeat;
}

.home #container .howitworks .header .choices .download:hover {
        background-image: url("../img/home/videodownload_hover.png");
}

.home #container .howitworks .steps {
        overflow: hidden;

        position: relative;

        height: 377px;
}

.home #container .howitworks .steps .slider {
        position: absolute;
}

.home #container .howitworks .steps .step,
.howitworks #container .howitworks .steps .step {
        width: 940px;
}

.home #container .howitworks .steps .step .image,
.howitworks #container .howitworks .steps .step .image {
        float: left;
}

.home #container .howitworks .steps .step .image.select,
.howitworks #container .howitworks .steps .step .image.select {
        margin-left: 10px;
}

.home #container .howitworks .steps .step .image.download,
.howitworks #container .howitworks .steps .step .image.download {
        margin-left: 30px;
}

.home #container .howitworks .steps .step .text,
.howitworks #container .howitworks .steps .step .text {
        float: right;

        border: 1px solid #e1e1e1;

        padding: 0 35px;
        width: 337px;
        height: 372px;
}

.home #container .howitworks .steps .step .text h1,
.howitworks #container .howitworks .steps .step .text h1 {
        font-size: 34px;
        font-weight: normal;
        color: #d5246d;
}

.home #container .howitworks .steps .step .text ul,
.howitworks #container .howitworks .steps .step .text ul {
        padding: 0 0 0 0px;

        font-size: 18px;
        font-weight: lighter;
        color: #636363;
}

.home #container .howitworks .steps .step .text ul li,
.howitworks #container .howitworks .steps .step .text ul li {
        list-style-image: url("../img/home/list_icon.png");

        width: 320px;
        margin: 15px 0 0 20px;
}

.home #container .howitworks .steps .step .text ul li span,
.howitworks #container .howitworks .steps .step .text ul li span {
        font-weight: bold;
}

.home #container .howitworks .steps .playcontrol .background {
        background-color: #fff;
        opacity: 0.8;

        height: 375px;
}

.home #container .howitworks .steps .playcontrol .button {
        background-image: url("../img/home/play.png");
        background-repeat: no-repeat;

        display: block;
        position: absolute;

        top: 145px;
        left: 405px;

        width: 136px;
        height: 136px;

        text-decoration: none;
}

.home #container .templates {
        position: relative;

        margin: 0;
        padding: 70px 0;
        height: 320px;

        background-color: #f0f0f0;

        z-index: 2;
}

.home #container .templates h1 {
        margin: 0;

        font-weight: lighter;
        font-size: 30px;
        color: #a0a0a0;
}

.home #container .templates h1 span {
        font-weight: bold;
}

.home #container .templates .items {
        margin-top: 40px;
}

.home #container .templates .items .item {
        margin-left: 33px;

        display: block;
        float: left;
}

.home #container .templates .items .item.first {
        margin-left: 0;
}

.home #container .templates .items .item img {
        box-shadow: 0px 0px 3px #444;
        -webkit-box-shadow: 0px 0px 3px #444;
        -moz-box-shadow: 0px 0px 3px #444;
}

.home #container .templates .options {
        float: right;

        margin-top: 45px;

        position: relative;

        background-repeat: no-repeat;
        background-position: 28% 65%;
}

.home #container .templates .options.showarrow {
        background-image: url("../img/home/arrow.png");
}

.home #container .templates .options p {
        float: right;

        margin-right: 10px;

        color: #b2b2b2;
        font-size: 14px;
}

.home #container .templates .options a, .home #container .information a {
        text-decoration: none;
        text-align: center;
        font-size: 14px;
        color: #d6568b;

        border: 1px solid #d6568b;
        border-radius: 3px;

        padding: 13px 0 12px 0;
        margin: 0 0 40px 10px;
        width: 190px;

        display: block;

        float: right;
}

.home #container .templates .options a:hover, .home #container .information a:hover {
        background-color: #D6568B;
        color: #fff;
}

.home #container .information {
        position: relative;

        background-color: #e1e1e1;

        padding-top: 70px;
        height: 400px;

        z-index: 2;
}

.home #container .information .video {
        float: left;

        margin-top: 9px;
        height: 281px;

        border: 1px solid #c7c7c7;
}

.home #container .information .informations {
        float: right;

        width: 407px;
}

.home #container .information .informations .text h1 {
        margin: 0;

        color: #d6256e;
        font-size: 28px;
        font-weight: bold;
}

.home #container .information .informations .text p {
        margin: 10px 0 0 0;

        color: #707070;
        font-size: 16px;
        width: 390px;
}

.home #container .information .informations .text img {
        margin: 45px 0 30px 0;
}

.home #container .information .informations .text .contactus {
        width: 148px;
}

.home #container .information .informations .text .why {
        width: 235px;
        margin-left: 0;
}
*/

/*

        UNIVERSITY

*/
.university #container .create {
    background-image: url("../img/home/create-background-university.png");
    background-repeat: no-repeat;
    width: 100%;
    height: 480px;
}
.university #container .create h1 {
    color: #FFF;
    font-weight: lighter;
    font-size: 44px;
    padding: 25px 0;
    margin: 0;
}
.university #container .create .about {
    float: left;
}
.university #container .create .features {
    float: left;
    width: 400px;
    margin: 0 0 0 35px;
}
.university #container .create .features ul {
    margin: 0;
    padding: 0;
}
.university #container .create .features ul li {
    list-style: none;
    color:#FFF;
    font-size:16px;
    padding:12px 0 12px 40px;
    border-top:1px solid #2c93ac;
    background-repeat: no-repeat;
    background-position: 2% 50%;
}
.university #container .create .features ul li.ilustrations {
    background-image: url('../img/home/icon_mini_ilustrations_university.png');
}
.university #container .create .features ul li.examples {
    background-image: url('../img/home/icon_mini_examples_university.png');
}
.university #container .create .features ul li.visual {
    background-image: url('../img/home/icon_mini_visual_university.png');
}
.university #container .create .features ul li.resume {
    background-image: url('../img/home/icon_mini_resume_university.png');
}
.university #container .create .button {
    padding: 15px 0;
    margin: 30px auto 0 auto;
    width: 394px;

    box-shadow: 3px 3px 5px #0d667c;
    -moz-box-shadow: 3px 3px 5px #0d667c;
    -webkit-box-shadow: 3px 3px 5px #0d667c;

    text-decoration: none;
    text-align: center;
    font-size: 19px;
    font-weight: bold;
    color: #ff136a;

    background-color: #fff5c0;
    border-radius: 5px;

    display: block;
}
.university #container .create p {
    color:#55c8e5;
    font-size:13px;
    text-align: center;
    margin:5px 0 0 0;
    padding:0;
}
.university #container .create p a {
    color:#55c8e5;
}

.university #container .howitworks .options {
    position: relative;
    float: right;
    width: 299px;
    height: 455px;
    font-size: 21px;
    padding: 0 25px;
    box-sizing: border-box;
}
.university #container .howitworks .options h1 {
    font-size: 48px;
    line-height: 47px;
    color: #d6256e;
    padding: 0;
    margin: 0;
    padding-top: 53px;
}
.university #container .howitworks .options .button {
    text-decoration: none;
    background-color: #5ca8a2;
    font-size: 18px;
    color: #fff6c9;
    border-radius: 6px;
    padding: 17px 35px;
    margin: 30px 0px 0 0;
    width: 200px;
    text-align: center;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    -moz-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    float: left;
}
.university #container .howitworks .options .button.pink {
    background-color:#d6256e;
}

.university #container .howitworks {
    position: relative;
    margin: 0;
    padding: 50px 0;
    background-color: #f0f0f0;
}
.university #container .benefits {
    display: block;
    width: 100%;
}
.university #container .benefits ul {
    padding:70px 20px 10px 20px;
    margin:0;
    height:150px;
    background-position: 50% 5%;
    background-repeat: no-repeat;
    float: left;
    text-align: center;
    width:20%;
    border-right:1px solid #e6e6e6;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color:#707070;
    font-size:14px;
    line-height: 17px;
}
.university #container .benefits ul a {
    color:#ee0063;
}
.university #container .benefits ul.visual {
    background-image: url('../img/home/icon_visual.png');
}
.university #container .benefits ul.time {
    background-image: url('../img/home/icon_time.png');
}
.university #container .benefits ul.content {
    background-image: url('../img/home/icon_content.png');
}
.university #container .benefits ul.editable {
    background-image: url('../img/home/icon_editable.png');
}
.university #container .benefits ul.doit {
    background-image: url('../img/home/icon_doit.png');
    border:0;
}

.university #container .howitworks {
    position: relative;
    margin: 0;
    padding: 50px 0;
    background-color: #f0f0f0;
}
.university #container .howitworks .header h1 {
    color: #555555;
    font-size: 23px;
    margin: 0 0 40px 0;
    float: left;
}
.university #container .howitworks .header a {
    font-weight: bold;
    color: #d6568b;
    text-decoration: none;
    font-size: 14px;
    border: 1px solid #e6c0d0;
    border-radius: 3px;
    padding: 12px 19px;
    float: right;
    margin: 0 180px 0 0;
}
.university #container .howitworks .slider {
    float: left;
}
.university #container .howitworks .options {
    position: relative;
    float: right;
    width: 299px;
    height: 455px;
}
.university #container .howitworks .options a.option {
    color: #7d7d7d;
    font-size: 12px;
    text-decoration: none;
    padding: 16px 12px;
    display: block;
    border-top: 1px solid #ccc;
}
.university #container .howitworks .options a.more {
    color:#ee0063;
    display: block;
    font-size:12px;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 12px;
}

.university #container .whatyouget {
    position: relative;
    margin: 0;
    padding: 50px 0;
    background-color: #fff;
}
.university #container .whatyouget h1 {
    color:#555555;
    font-size:23px;
    margin: 0 0 40px 0;
}

.university #container .checkplans {
    position: relative;
    margin: 0;
    padding: 10px 0 50px 0;
    background-color: #f0f0f0;
}
.university #container .checkplans .header {
    background-repeat: no-repeat;
    background-position: top left;
    background-image:url('../img/university/icon_arrow.png');
    padding: 46px 0 0 60px;
    margin: 0 0 40px 0;
}
.university #container .checkplans .header h1 {
    color: #000;
    font-size: 24px;
    margin: 0;
    line-height: 26px;
}
.university #container .checkplans .header h2 {
    color: #626262;
    font-size: 18px;
    margin: 0;
    font-weight: normal;
    line-height: 20px;
}
.university #container .checkplans .listplans {
}
.university #container .checkplans .listplans .button {
    text-decoration: none;
    background-color: #5ca8a2;
    font-size: 18px;
    color: #fff6c9;
    border-radius: 6px;
    padding: 13px 30px;
    margin: 0 6px;
    width: 160px;
    text-align: center;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    -moz-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    float: left;
}
.university #container .checkplans .listplans .button.pink {
    background-color:#d6256e;
}
.university #container .plans .plan.highlight {
    width:450px;
}
.university #container .plans .plan .button {
    width:305px;
}
.university #container .plans .plan .price h4 {
    font-size: 18px;
    text-align: left;
    margin: 0;
}
.university #container .plans .plan .price p {
    font-size: 14px;
    color: #636363;
    text-align: left;
    margin: 0 0 10px 0;
    padding: 0;
}
.university #container .plans .plan.highlight .content {
    padding: 20px 0 0 0;
}
.university #container .plans .plan.highlight .content li.item {
    padding: 12px 45px 12px 50px;
    background-image: url('../img/university/icon_check.png');
    background-position: 33px 13px;
    font-weight: bold;
    margin: 0 !important;
}
.university #container .plans .plan.highlight .content li.item.featured {
    background-color:#fde6e6;
}

.university #header {
    background-color:#000;
}
.university #header #menu .logo {
    margin: 10px 50px 0 0;
}
.university #header #user-options .button {
    background-color: #d6256e;
    border-radius: 3px;
    padding: 7px 25px 7px 25px;
    margin: 11px 0 0 0;
    color: #fff6c6;
    font-size: 11px;
    font-weight: bold;
}
.university #header #user-options .simplebutton {
    border: 1px solid #363636;
    border-radius: 3px;
    padding: 6px 25px 6px 25px;
    margin: 11px 0 0 10px;
    color: #d7d7d7;
    font-size: 11px;
    font-weight: bold;
}
.university .plans .plan {
    width:355px;
}
.university .plans .plan.left .price {
    float: left;
    width: 50%;
    padding: 20px 0;
}
.university .plans .plan.left .price.second {
    float: left;
    width: 49%;
    background-color:#eee9cc;
}
.university .plans .plan .price .values {
    width:97px;
}
.university .plans .plan .price.second .values {
    width:129px;
}
.university .plans .plan .price .values p {
    font-size:12px !important;
    color:#b9b07e !important;
    margin:2px 0 0 0 !important;
    padding:0 !important;
    text-align: center !important;
}
.university .plans .plan.left .observations {
    position: absolute;
    bottom: -24px;
    font-size: 11px;
    left: 20px;
}

/*

        MY ACCOUNT

*/

#container .profile .editprofile {
    position: relative;

    overflow: auto;

    margin-top: 35px;
    padding-bottom: 50px;
}

#container .profile .editprofile img {
    display: block;

    position: absolute;

    left: 425px;
}

#container .profile .editprofile .form {
    background-color: #eaeaea;

    padding-top: 70px;
    margin: 50px auto 0 auto;

    width: 642px;
    height: 590px;

    border: 1px solid #d6d6d6;
    display: block;
}

#container .profile .editprofile .form .email .name{
    display: block;
    text-align:center;
    width: 264px;
    margin: 0 auto 20px auto;
    padding: 0 0 25px 0;

    border-bottom: 1px solid #d6d6d6;
}

#container .profile .editprofile .form .save {
    background-color: #d6256e;

    border: none;
    border-radius: 3px;

    display: block;

    margin: 35px auto 0 auto;
    width: 135px;
    height: 47px;

    font-size: 20px;
    color: #fff;
}

#container .profile .editprofile .form .save:hover {
    background-color: #ee0063;
}

#container .profile .editprofile form label {
    display: block;

    width: 264px;
    margin: 10px auto 0 auto;

    font-size: 11px;
    color: #acacac;
}

#container .profile .editprofile form label input {
    width: 242px;
    height: 38px;
    padding: 0 10px;

    border: 1px solid #d6d6d6;
    border-radius: 3px;

    font-size: 14px;
    color: #acacac;
}

#container .profile .editprofile select {
    width: 264px;
    height: 38px;
    padding: 0 10px;

    border: 1px solid #d6d6d6;
    border-radius: 3px;

    font-size: 14px;
    color: #acacac;
}

/*
    TOGGLE BUTTON
*/

.visibility {
    font-size: 12px;
    color: #555;
    text-align: center;
    padding: 5px;

    position: relative;
    top: 80px;

    transition: .3s;
}
#container #content .files .file:hover .visibility {
    top: 0;
}


.visibility span {
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
    cursor: default;
    font-size: 10.5px;
    font-weight: lighter;
}

/* ============================================================
  COMMON SWITCH
============================================================ */
.cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
.cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ============================================================
  SWITCH 1 - ROUND
============================================================ */
input.cmn-toggle-round + label {
    padding: 2px;
    width: 40px;
    height: 20px;
    background-color: #dddddd;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
}
input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
}
input.cmn-toggle-round + label:before {
    right: 1px;
    background-color: #f1f1f1;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    -webkit-transition: background 0.2s;
    -moz-transition: background 0.2s;
    -o-transition: background 0.2s;
    transition: background 0.2s;
}
input.cmn-toggle-round + label:after {
    width: 22px;
    background-color: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    -webkit-transition: margin 0.2s;
    -moz-transition: margin 0.2s;
    -o-transition: margin 0.2s;
    transition: margin 0.2s;
}
input.cmn-toggle-round:checked + label:before {
    background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
    margin-left: 20px;
}

/*

        MY ACCOUNT 2.0

*/

/* MAIN DIV */

#container .profile {
    font-family: "Nunito", sans-serif;
    width: 100%;
    margin: 25px 0 0 0;
}

/* SAVE BUTTON */

#container .profile .save {
    background-color: #FFF;
    border: 1px solid #DC1866;
    border-radius: 30px;
    color: #DC1866;
    padding: 5px 20px 5px 20px;
    margin: 11px 0 0 0;
    font-size: 14px;
    font-weight: bold;
}

#container .profile .save:hover {
    background-color: #DC1866;
    color: #fff;
}

/* IMAGE */

#container .profile .picture {
    display: inline-block;
    float: left;
    width: 20%;
    height: 250px;
    text-align: center;
}

#container .profile .picture img {

}

/*#container .profile .picture .linkedinBtn a img {
    background-image: url("../img/profile/linkedin.png");
}

#container .profile .picture .linkedinBtn a img:hover {
    background-image: url("../img/profile/linkedin_hover.png");
}*/

/* INFO */

#container .profile .info {
    display: inline-block;
    width: 60%;
    height: 372px;
    margin-left: 30px;
}

#container .profile .info hr {
    margin: 1em 0px 5px 35px;
    width: 125px;
    background-color: #DC1866;
    height: 3px;
    border: none;
    border-radius: 30px;
}

#container .profile .info input,
#container .profile .info select {
    width: 300px;
    font-size: 16px;
    margin: 15px 0 0 25px;
    padding: 5px;
}

#container .profile .info a {
    font-size: 14px;
    color: #333333;
    display: inline-block;
    margin: 10px 0 0 30px;
    outline: none;
    padding: 2px 15px;

    transition: 0.3s;
}

#container .profile .info:hover a {
    background-color: #ECECEC;
}

#container .profile .info a:hover {
    /*background-color: #e9aac1;*/
    background-color: #DCDCDC;
    color: #c3004b;
}

#container .profile .info #name {
    font-size: 32px;
    font-weight: bold;
    margin-top: 15px;
}

#container .profile .info #email {
    font-size: 16px;
    text-decoration: none;
}

.nameInput {
    font-size: 32px !important;
    width: 450px !important;
    padding: 15px !important;
    color: #333;
}
.otherInput {
    margin-top: 5px !important;
}

/* STATUS */
#container .profile .status {
    background-image: url("../img/profile/flag_user.png");
    float: right;
    width: 80px;
    height: 148px;
    text-align: center;
    width: 80px;
    height: 148px;
    text-align: center;
    position: relative;
    top: -25px;
    margin-right: 35px;
}

#container .profile .status span.user {
    font-size: 16px;
    position: relative;
    top: 15px;
    width: 40px;
    max-width: 40px;
    min-width: 40px;
}

#container .profile .status .date {
    position: relative;
    top: 35px;
    padding: 10px;
    color: #FFF;
    background-color: #DC1866;
    border-radius: 30px;
    font-size: 14px;
    margin-left: -7px;

    text-decoration: none;
}

/* PASSWORD */

#container .profile .password {
    /*display: inline-block;
    margin-top: 100px;
    */
    float: right;
    width: 15%;
    text-align: center;
    position: relative;
    top: -200px;
}

#container .profile .password input {
    width: 135px;
}

#container .profile .password .response {
    font-size: 10px;
    color: #333;
    display: none;
    margin-bottom: 0;
}

/* CREATIONS */

#container .creations {
    display: inline-block;
    width: 90%;
    margin: 0 5% 5% 5%;
}

#container .creations .file {
    float: left;
    width: 30%;
    height: 398px;
    margin: 2% 1.65%;
    text-align: center;
    background-color: #EDEDED;

    -moz-box-shadow: 2px 2px 1px rgba(152, 149, 152, 0.8);
    -webkit-box-shadow: 2px 2px 1px rgba(152, 149, 152, 0.8);
    box-shadow: 2px 2px 1px rgba(152, 149, 152, 0.8);

    transition: 0.3s;
}

#container .creations .file:hover {
    /*background-color: #EAEAEA;*/
}

#container .creations .file:hover .description a {
    /*background-color: #dadada;*/
    background-color: #DDD;
}

#container .creations .file hr {
    margin: 11px 0 0 0;
    width: 100%;
    background-color: #DC1866;
    height: 2px;
    border: none;
    border-radius: 30px;
}

#container .creations .file.first {
    /*margin-left: 0;*/
}

#container .creations .file .image {
    /*background-color: #EAEAEA;*/
}

#container .creations .file .image img {
    max-height: 210px;
    max-width: 280px;
}

#container .creations .file .description {
    text-align: left;
    width: 100%;
    min-height: 100px;
    display: inline-block;

    background-color: #ECECEC;
}

#container .creations .file .description a {
    color: #333;
    outline: none;
    margin-left: 15px;
    width: 250px;

    transition: 0.3s;
}

#container .creations .file .description a:hover {
    color: #c3004b;
}

#container .creations .file .description input,
#container .creations .file .description textarea {
    margin-top: 12px;
    /*width: 100%;*/
    width: 225px;
    font-size: 16px;
    padding: 5px;
    color: #333;
}

#container .creations .file .description #cName {
    font-size: 22px;
    margin-top: 10px;
    display: inline-block;

    /*verificar*/
    height: 30px;
    overflow: auto;
}

#container .creations .file .description #cDescription,
#container .creations .file .description #cTags {
    font-size: 12px;
    margin-top: 10px;
    display: inline-block;
}

#container .creations .file .description #cDescription {
    height: 70px;
    overflow: auto;
}

#container .creations .file .description #cTags {
    height: 35px;
    margin-bottom: 5px;
    overflow: auto;
}

.creationNameInput {
    font-size: 22px !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border-radius: 30px !important;
    border: 1px solid #DC1866 !important;
    background-color: #FFF;
    font-weight: normal !important;
}
/*
        container -> templates
*/

#container .templatetitle h1 {
    color: #d6256e !important;
}

.templates #container #content .options .categories select,
.showcase #container #content .options .categories select {
    font-family: "Nunito", sans-serif;
    font-size: 12px;
    color: #959595;

    border: 1px solid #c7c7c7;
    border-radius: 30px;

    width: 244px;
    /*height: 37px;*/
    line-height: 31px;
    padding: 8px 5px 9px 10px;

    background-color: #FFF;
    box-shadow: inset 0px 2px 1px 0px #DDD;
    -moz-box-shadow: inset 0px 2px 1px 0px #DDD;
    -webkit-box-shadow: inset 0px 2px 1px 0px #DDD;
}

.templates #container #content .options,
.showcase #container #content .options {
    padding-bottom: 20px;

    border-bottom: 1px solid #e6e6e6;
}

#container #content .options .search,
#showcase #content .options .search {
    width: 244px;

    border: 1px solid #c7c7c7;
    border-radius: 30px;

    margin-left: 10px;

    background-color: #FFF;
    box-shadow: inset 0px 2px 1px 0px #DDD;
    -moz-box-shadow: inset 0px 2px 1px 0px #DDD;
    -webkit-box-shadow: inset 0px 2px 1px 0px #DDD;
}

.templates #container #content .options .search input,
.showcase #container #content .options .search input {
    font-family: "Nunito", sans-serif;
    font-size: 12px;
    color: #959595;

    border: none;

    width: 205px;
    height: 25px;

    margin-left: 10px;
    margin-top: 5px;

    box-shadow: none;
}

.templates #container #content .options .search label,
.showcase #container #content .options .search label {
    float: left;
}

.templates #container #content .options .search a,
.showcase #container #content .options .search a {
    background-image: url("../img/workspace/search.png");
    background-repeat: no-repeat;

    display: block;

    text-decoration: none;

    float: left;
    margin: 9px 5px 4px 5px;

    width: 17px;
}

.templates #container #content .options .search a:hover,
.showcase #container #content .options .search a:hover {
    background-image: url("../img/workspace/search_hover.png");
}

.templates #container #content .options .showcase,
.showcase #container #content .options .showcase,
#container #content .options .templatelink {
    padding: 11px 0 10px 0;
}

.templates #container .options .showcase a,
#container #content .options .templatelink,
.templates #container .options .showcase a,
#container #content .options .templatelink a {
    background-image: url("../img/workspace/arrow_right.png");
    background-repeat: no-repeat;
    background-position: 100% 60%;

    text-decoration: none;
    font-size: 12px;
    color: #111;

    display: block;
}

.templates #container #content .options .showcase a,
.showcase #container #content .options .showcase a {
    width: 219px;
}

.templates #container #content .options .templatelink a,
.showcase #container #content .options .templatelink a {
    width: 163px;
}

.templates #container #content .options .showcase a:hover,
.showcase #container #content .options .showcase a:hover,
#container #content .options .templatelink a:hover {
    color: #d6256e;
}

#container .templates {
    width: 100%;
    margin-top: 30px;
}

#container .templates .template {
    position:relative;
    float: left;

    padding-left: 29px;
    margin-bottom: 45px;

    width: 213px;
    height: 157px;
}

#container .templates .template .image {
    webkit-box-shadow: 0px 0px 5px 0px rgba(152, 149, 152, 0.8);
    moz-box-shadow:    0px 0px 5px 0px rgba(152, 149, 152, 0.8);
    box-shadow:         0px 0px 5px 0px rgba(152, 149, 152, 0.8);
    width: 210px;
    height: 158px;
    background-color: #f1f1f1;
    position: relative;
}

#container .templates .template .image img {
    width:auto !important;
    height:auto !important;
    max-width: 210px;
    max-height: 158px;
    position: absolute;
    left: 50%;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
    -o-transform:translateX(-50%) translateY(-50%);
    -ms-transform:translateX(-50%) translateY(-50%);
    -moz-transform:translateX(-50%) translateY(-50%);
    -webkit-transform:translateX(-50%) translateY(-50%);
}

#container .templates .template.first {
    padding-left: 0;
}

#container .templates .template .image, #content .templates .template .hover {
    position: absolute;
}

#container .templates .template .create, #content .templates .template .preview {
    width: 210px;
    height: 80px;

    float: left;
}

#container .templates .template .hover {
    display: none;
}

#container .templates .template .create {
    background-color: #FFF;
}

#container .templates .template .create a, #content .templates .template .preview a {
    display: block;

    border-radius: 3px;

    padding: 11px 0;
    width: 138px;

    text-align: center;
    text-decoration: none;

    margin: 17px auto;
}

#container .templates .template .create a {
    background-image: url("../img/templates/create_pink.png");
    background-repeat: no-repeat;
    background-position: 15% 50%;

    border: 1px solid #DC1866;
    color: #DC1866;

    padding-left: 15px;
    width: 121px;

    border-radius: 30px;
}

#container .templates .template .create a:hover {
    background-image: url("../img/templates/create.png");
    background-color: #DC1866;
    color: #FFF;
}

#container .templates .template .preview a {
    color: #FFF;
    border: 1px solid #FFF;

    border-radius: 30px;
}

#container .templates .template .preview a:hover {
    background-color: #FFF;
    color: #555;
}

#container .templates .template .preview {
    background-color: #999;
}

#container .templates .template .colors {
    float: left;

    width: 213px;
}

#container .templates .template .colors .color {
    width: 25%;
    height: 7px;

    padding: 0px 0 0 0;
    margin-top: 4px;

    float: left;
}

#container .templates .template .colors .color.green {
    background-color: #2fbfa6;
}

#container .templates .template .colors .color.red {
    background-color: #ee4023;
}

#container .templates .template .colors .color.white {
    background-color: #f2e8da;
}

#container .templates .template .colors .color.blue {
    background-color: #7ecce4;
}

#container #content .pages {
    text-align: center;
}

#container #content .pages .page {
    text-decoration: none;
    color: #d6256e;

    background-color: #e3e3e3;

    padding: 1px 7px;
}

#container #content .pages .page:hover, #container #content .pages .page.selected {
    color: #f4d4de;

    background-color: #d6256e;
}

/*

        LIST LOGED IN

*/

#container #content .listoptions {
    padding: 5px 0 40px 0;
}

#container #content .listoptions a {
    text-decoration: none;
    font-size: 12px;
    color: #dd386e;

    padding: 0 10px;
    line-height: 10px;

    border-left: 1px solid #c0c0c0;

    float: left;
}

#container #content .listoptions a:hover {
    color: #ee0063;
}

#container #content .listoptions .first {
    padding-left: 0;

    border-left: none;
}

#container #content .files .newfile {
    width: 211px;
    height: 156px;
    margin: 70px 0 0 2px;
}

#container #content .files .newfile .nofiles {
    color: #9f9f9f;
    font-size: 12px;
    text-align: center;

    position: absolute;
    display: none;

    width: 211px;
    top: 160px;
}

#container #content .files .newfile img {
    position: absolute;
    box-shadow: 2px 2px 2px -2px #808080;
}

#container #content .files .newfile .hover {
    position: relative;

    background-color: #FFF;

    display: none;

    /*    height: 128px;
        padding-top: 28px;*/

    height: 100%;
}

#container #content .files .newfile .hover.blocked {
    background-color: #FFF;
}

#container #content .files .newfile .hover .fromtemplate,
#container #content .files .newfile .hover .blank {
    margin: 0 auto;
    /*width: 134px;*/
    width: 100%;
    height: 50%;
    text-align: center;
    color: #dedede;
    font-size: 14px;
}

#container #content .files .newfile .hover .blank {
    background-color: #999;
}

#container #content .files .newfile .hover .fromtemplate a:hover,
#container #content .files .newfile .hover .blank a:hover {
    background-color: #DC1866;
    color: #FFF;
}

#container #content .files .newfile .hover .fromtemplate {
    /*padding-bottom: 16px;*/
    height: 50%;
}

#container #content .files .newfile .hover a {
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    color: #DC1866;

    display: inline-block;

    border: 1px solid #DC1866;
    border-radius: 30px;

    width: 132px;
    padding: 11px 0;

    margin-top: 16px;

    outline: none;
}

#container #content .files .newfile .hover .blank a {
    color: #FFF;
    border: 1px solid #FFF;
}

#container #content .files .newfile .hover .blank a:hover {
    background-color: #FFF;
    color: #555;
}

#container #content .files .file {
    float: left;
    position: relative;

    width: 213px;
    height: 230px;

    margin-left: 29px;
    margin-top: 30px;
}

#container #content .files .file.first {
    margin-left: 0;
}

#container #content .files .file .image {
    /*-webkit-box-shadow: 0px 0px 5px 0px rgba(152, 149, 152, 0.8);
    -moz-box-shadow:    0px 0px 5px 0px rgba(152, 149, 152, 0.8);
    box-shadow:         0px 0px 5px 0px rgba(152, 149, 152, 0.8);*/

    box-shadow: 2px 2px 2px -2px #808080;
    -moz-box-shadow: 2px 2px 2px -2px #808080;
    -webkit-box-shadow: 2px 2px 2px -2px #808080;

    float: left;

    width: 210px;
    height: 158px;
    /*background-color: #d6256e;*/
    position: relative;
}
#container #content .files .file .image img {
    width:auto !important;
    height:auto !important;
    max-width: 210px;
    max-height: 158px;
    position: absolute;
    left: 50%;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
    -o-transform:translateX(-50%) translateY(-50%);
    -ms-transform:translateX(-50%) translateY(-50%);
    -moz-transform:translateX(-50%) translateY(-50%);
    -webkit-transform:translateX(-50%) translateY(-50%);
}

#container #content .files .file .hover {
    position: absolute;
    z-index: 2;

    display: none;

    width: 210px;
}

#container #content .files .file .hover .blocktext {
    display: none;
}

#container #content .files .file .hover.blocked {
    background-color: #000;
    height: 158px;

    background-image: url("../img/listlogedin/blocked.png");
    background-repeat: no-repeat;
    background-position: 50% 40%;
}

#container #content .files .file .hover.blocked .blocktext {
    display: block;
}

#container #content .files .file .hover.blocked .blocktext p {
    color: #dedede;
    text-align: center;
    font-size: 12px;

    margin: 85px auto 0 auto;
    width: 155px;
}

#container #content .files .file .hover .edit,
#container #content .files .file .hover .delete,
#container #content .files .file .hover .restore {
    text-align: center;
}


#container #content .files .file .hover .edit {
    background-color: #FFF;

    padding-top: 36px;
    height: 75px;
}

#container #content .files .file .hover .restore {
    background-color: #FFF;
    padding: 50px 0px 65px 0px;
}

#container #content .files .file .hover.blocked .restore {
    display: none;
}

#container #content .files .file .hover.blocked .edit {
    display: none;
}

#container #content .files .file .hover .delete {
    background-color: #999;

    padding-top: 10px;
    height: 37px;
}

#container #content .files .file .hover.blocked .delete {
    display: none;
}

#container #content .files .file .hover .edit a,
#container #content .files .file .hover .delete a,
#container #content .files .file .hover .restore a {
    background-repeat: no-repeat;

    text-decoration: none;

    display: block;
    margin: 0 auto;

    border-radius: 3px;
}

#container #content .files .file .hover .edit a {
    background-image: url("../img/listlogedin/edit_pink.png");
    background-position: 27% 45%;

    border: 1px solid #DC1866;
    border-radius: 30px;

    padding: 10px 0 11px 20px;
    width: 112px;

    font-size: 14px;
    font-weight: bold;
    color: #DC1866;
}

#container #content .files .file .hover .edit a:hover {
    background-image: url("../img/listlogedin/edit.png");
    background-color: #DC1866;
    color: #FFF;
}

#container #content .files .file .hover .delete a {
    background-image: url("../img/listlogedin/delete.png");
    background-position: 28% 35%;

    border-radius: 15px;

    padding: 5px 0 4px 15px;
    width: 117px;

    font-size: 11px;

    color: #FFF;
    border: 1px solid #FFF;
}

#container #content .files .file .hover .delete a:hover {
    background-color: #FFF;
    color: #555;
}

#container #content .files .file .hover .restore a {
    background-image: url("../img/listlogedin/blocked_pink.png");
    background-position: 17% 45%;
    background-size: 16px 20px;

    border: 1px solid #DC1866;
    border-radius: 30px;

    padding: 10px 0 11px 20px;
    width: 120px;

    font-size: 14px;
    font-weight: bold;
    color: #DC1866;
}

#container #content .files .file .hover .restore a:hover {
    background-image: url("../img/listlogedin/blocked_white.png");
    background-color: #DC1866;
    color: #FFF;
}

#container #content .files .file .mark {
    position: absolute;

    /*border: 2px solid #d6256e;*/

    width: 206px;
    height: 154px;
}

#container #content .files .file .mark ul {
    margin: 131px 0 0 0;
    padding: 5px 8px 5px 6px;
    background-color: #d6256e;
    font-size: 11px;
    color: #fff;
    float: left;
}

#container #content .files .file .filename {
    margin: 5px 0 0 0;

    text-align: center;

    float: left;
}

#container #content .files .file .filename a {
    float: left;
    position: relative;

    text-decoration: none;
    color: #c5c5c5;
    font-size: 13px;

    width: 171px;
    height: 20px;
    padding: 0 0 0 30px;

    overflow: hidden;
}

#container #content .files .file .filename a:hover {
    background-image: url("../img/listlogedin/editname.png");
    background-repeat: no-repeat;
    background-position: 4% 0;

    overflow: hidden;
}

#container #content .files .file .filename input {
    position: relative;
    width: 211px;

    display: none;

    float: left;

    border: none;
    background-color: #f1f1f1;

    font-size: 13px;
    font-family: "Nunito" sans-serif;
    color: #c2c2c2;
    text-align: center;
}

#container #content .files .file .filename input:focus {
    background-color: #fff;
}

.listlogedin #container h1.downloaded {
    text-align: left;
    font-weight: lighter;
    font-size: 24px;
    color: #b7b7b7;

    margin: 0 0 30px 0;
    padding: 25px 0;
    border-bottom: 1px solid #e2e2e2;
    margin-top: 20px;
}

/* Pricing page */
.plans {
    display: block;
    width:100%;
    margin:10px 0 30px 0;
    padding:20px 0 40px 0;
}
.plans .plan {
    position: relative;
    float: left;
    width: 308px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(105,105,105,0.4);
    -moz-box-shadow: 0px 0px 5px 0px rgba(105,105,105,0.4);
    box-shadow: 0px 0px 5px 0px rgba(105,105,105,0.4);
    border-radius: 8px;
}
.plans .plan.left {
    margin:0 5px 0 0;
}
.plans .plan.right {
    margin:0 0 0 5px;
}
.plans .plan.highlight {
    z-index: 1;
    margin: -14px 0 0 0;
    border: 3px solid #d6256e;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(105,105,105,0.8);
    -moz-box-shadow: 0px 0px 5px 0px rgba(105,105,105,0.8);
    box-shadow: 0px 0px 5px 0px rgba(105,105,105,0.8);
}
.plans .plan .title {
    background-color:#666;
    text-align:center;
    padding:0;
    margin:0;
}
.plans .plan.highlight .title {
    background-color: #d6256e;
}
.plans .plan.left .title {
    border-radius: 8px 8px 0 0;
}
.plans .plan.right .title {
    border-radius: 8px 8px 0 0;
}
.plans .plan .title h2 {
    color:#FFF;
    font-size:18px;
    text-align:center;
    margin:0;
    padding:11px 0;
    font-weight: normal;
}
.plans .plan.highlight .title h2 {
    font-size:22px;
    padding:14px 0;
}
.plans .plan .content {
    padding: 20px 35px;
    margin: 0;
    background-image: url('../img/pricing/simple_background.png');
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    min-height: 440px;
}
.plans .plan .content li.image {
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0 !important;
}
.plans .plan .content li.item {
    padding: 0 0 0 18px;
    margin: 10px 0 !important;
    background-image: url('../img/pricing/simple_check.png');
    background-position: 0 6px;
    background-repeat: no-repeat;
    list-style: none;
    font-size:14px;
    color:#464646;
}
.plans .plan .content li.default {
    margin: 10px 0 !important;
    list-style: none;
    font-size: 14px;
}
.plans .plan .price {
    padding: 20px 35px 35px 35px;
    margin: 0;
    background-color: #f8f3d8;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color:#22b6aa;
    font-size:18px;
    text-align:center;
    border-radius: 8px;
    min-height: 88px;
}
.plans .plan.left .price {
    border-radius: 0 0 0 8px;
}
.plans .plan.right .price {
    border-radius: 0 0 8px 8px;
}
.plans .plan.highlight .price {
    color:#d6256e;
}
.plans .plan .price .values {
    margin: 0 auto;
    display: block;
    list-style: none;
    width: 177px;
}
.plans .plan .price .values .currency {
    font-size: 11px;
    float: left;
    text-align: left;
    line-height: 12px;
    margin: 14px 3px 0 0;
}
.plans .plan.highlight .price .values .currency {
    margin: 5px 0 0 0;
}
.plans .plan .price .values .big {
    float: left;
    line-height: 33px;
    margin:0 5px 0 0;
    font-size:36px;
}
.plans .plan.highlight .price .values .big {
    font-size: 45px;
}
.plans .plan .price .values .small {
    font-size: 11px;
    float: left;
    text-align: left;
    line-height: 12px;
    margin: 10px 0 0 0;
}
.plans .plan.highlight .price .values .small {
    margin: 5px 0 0 0;
}
.plans .plan .price .nocolor {
    color:#a8a8a8;
}
.plans .plan .button {
    text-decoration: none;
    background-color: #5ca8a2;
    font-size:16px;
    color: #fff6c9;
    border-radius: 6px;
    position: absolute;
    bottom: 0;
    padding: 13px 30px;
    width: 140px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    -o-transform: translateX(-50%) translateY(50%);
    -moz-transform: translateX(-50%) translateY(50%);
    -webkit-transform: translateX(-50%) translateY(50%);
    -webkit-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    -moz-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
}
.plans .plan.highlight .button {
    background-color:#d6256e;
    font-size:21px;
    font-weight:bold;
    padding: 9px 30px;
}

.university_warning {
    color: #7d7d7d;
    font-size: 18px;
    width: 100%;
    text-align: center;
    border: 1px solid #7d7d7d;
    border-radius: 6px;
    display: block;
    text-decoration: none;
    padding: 24px 0;
    background-image: url('../img/pricing/icon_ondemand_2.png');
    background-repeat: no-repeat;
    background-position: 68px 13px;
}

/* BANNER TESTIMONIALS */

.banner-left {
    background: #C3C3C3;
    padding: 20px;
    font-size: 20px;
    font-family: Arial;
    text-align: center;
    position: relative;
    width: 220px;
    height: 60px;
    display: inline-block;
    font-family: Nunito;
    color: #656565;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.banner-left:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 22px solid white;
    position: absolute;
    right: 0;
    top: 38px;
    display: inline-block;
}

.banner-right {
    width: 679.5px;
    height: 100px;
    background-color: #FFF;
    float: right;
    display: inline-block;
    font-family: Nunito;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.banner-right img {
    float: left;
    margin: 6px 0 0 20px;
    width: 100px;
}

.banner-right h1 {
    margin: 0;
    margin-top: 10px;
    font-size: 23px !important;
    font-style: italic;
}

.banner-right .author {
    font-size: 12px;
    color: #888;
}

.banner-right .authorInfo {
    font-size: 13px;
}

.container-testimonials {
    /*border: 1px solid #000;*/
    width: 100%;
    height: 380px;
    margin: 60px 0px 0px 0px;
    font-family: Nunito;
    color: #222;
}

.container-testimonials .testimonial{
    width: 30%;
    margin-left: 2%;
    /*border: 1px solid #000;*/
    display: inline-block;
    text-align: center;
    height: 100%;
    vertical-align: middle;
}

.container-testimonials .testimonial a {
    text-decoration: none;
    color: inherit;
    outline: 0;
}

.container-testimonials .testimonial a .testimonial-top {
    width: 100%;
    height: 52%;
    border: 2px solid #FFF;
}

.container-testimonials .testimonial a .testimonial-top .quote {
    display: block;
    background-image: url('../img/pricing/quote.png');
    background-repeat: no-repeat;
    width: 24px;
    height: 18px;
    margin: 25px 0 0 47%;
}

.container-testimonials .testimonial a .testimonial-top h1 {
    display: inline-block;
    font-size: 19px;
    font-weight: lighter;
    color: #666;
    max-width: 260px;
    margin: 20px 0 2px 0;
    line-height: 24px;
    height: 90px;
    font-style: italic;
}

.container-testimonials .testimonial a .testimonial-top img {
    width: 100px;
}

.container-testimonials .testimonial a .author {
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin-top: 70px;
}

.container-testimonials .testimonial a .authorInfo {
    display: inline-block;
    font-size: 15px;
    font-weight: lighter;
    padding: 3px 10px;
    margin-top: 2px;
    border-top: 2px solid #DC1866;
    border-radius: 1px;
    max-width: 260px;
}

/* END BANNER TESTIMONIALS */

.features {
    position: relative;
    width: 100%;
    margin:10px 0 50px 0;
}
.features .listheader {
    overflow: hidden;
    position: relative;
    float: right;
    margin: 0 -1px 0 0;
    padding: 0;
    border-radius: 6px 6px 0 0;
    display: table;
}
.features .listheader li {
    float: right;
    list-style: none;
    width:220px;
    padding:9px 0 14px 0;
    color:#FFF;
    font-size:16px;
    text-align: center;
    text-transform: uppercase;
}
.features .listheader li.small {
    width:128px;
    font-weight: bold;
}
.features .listheader li.color1 {
    background-color:#636363;
}
.features .listheader li.color2 {
    background-color:#d6256e;
}
.features .listheader li.color3 {
    background-color:#636363;
}
.features .listheader li.color4 {
    background-color:#000;
}
.features .listheader li.choosepayment {
    cursor: pointer;
}
.features .dropshadow {
    -webkit-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    -moz-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
}
.features .listtopline {
    float: left;
    width:100%;
    margin:-5px 0 0 0;
    padding:0;
    display: table;
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    border-radius:6px 6px 0 0;
    overflow: hidden;
    position: relative;
}
.features .listline {
    float: left;
    width:100%;
    margin:0;
    padding:0;
    display: table;
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
}
.features .listbottomline {
    float: left;
    width:100%;
    margin:0;
    padding:0;
    display: table;
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    border-radius:0 0 6px 6px;
    position: relative;
}
.features .listline li, .features .listtopline li, .features .listbottomline li {
    display: table-cell;
    list-style: none;
    width: 125px;
    max-width: 125px;
    min-width: 125px;
    font-size: 14px;
    text-align: center;
    background-color: #FFF;
    border-bottom: 1px solid #e1e1e1;
    position: relative;
    vertical-align: middle;
}
.features .listline li.grey, .features .listtopline li.grey, .features .listbottomline li.grey {
    background-color: #f5f5f5;
}
.features .listline li.columnname, .features .listtopline li.columnname, .features .listbottomline li.columnname {
    width: 160px;
    max-width: 160px;
    min-width: 160px;
    font-size: 14px;
    color: #d26f98;
    text-align: left;
}
.features .listbottomline li.leftroundcorner {
    border-radius:0 0 0 6px;
}
.features .listbottomline li.rightroundcorner {
    border-radius:0 0 6px 0;
}
.features .listline li span, .features .listtopline li span {
    padding:20px;
    display: block;
}
.features .listbottomline li a {
    color:#ee0063;
}
.features .listbottomline li span {
    padding:20px 20px 60px 20px;
    display: block;
}
.features .listbottomline li .button {
    text-decoration: none;
    background-color: #5ca8a2;
    font-size:16px;
    color: #fff6c9;
    border-radius: 6px;
    position: absolute;
    bottom: 0;
    padding: 8px 20px;
    width: 80px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    -o-transform: translateX(-50%) translateY(50%);
    -moz-transform: translateX(-50%) translateY(50%);
    -webkit-transform: translateX(-50%) translateY(50%);
    -webkit-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    -moz-box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
    box-shadow: 1px 1px 3px 0px rgba(105,105,105,0.55);
}
.features .listbottomline li .button.pink {
    background-color:#d6256e;
}

.featurestitle {
    color:#d6256e;
    margin:50px 0 20px 0;
    font-weight: lighter;
}

/*
        PAYMENT
*/
.paymentinformation {
    float:right;
    width:45%;
    padding:0 0 50px 0;
}
.paymentinformation h2 {
    color:#d6256e;
    font-weight: lighter;
    font-size: 30px;
}
.paymentinformation ul {
    padding: 0 0px;
    margin: 0;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.paymentinformation ul li {
    padding: 0 0 0 18px;
    margin: 10px 0 !important;
    background-image: url('../img/pricing/simple_check.png');
    background-position: 0 6px;
    background-repeat: no-repeat;
    list-style: none;
    font-size: 14px;
    color: #464646;
}

.payment .paymentinfo {
    display: block;
    font-size: 10px;
    color: #8A8A8A;
    width: 47%;
    margin: 10px 15px;
    float: right;
}
.payment .paymentform {
    float: right;
    display: block;
    width: 50%;
    color:#333;
    font-size:18px;
    background-color: #f9f9f9;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    padding: 30px 30px;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-top: 50px;
}

.payment .paymentform .paymentformhidden {
    display: hidden;
}

.payment .paymentform h2.title {
    text-align: center;
    color: #dc1866;
    font-weight: bold;
    text-transform: uppercase;
    margin:0;
    padding:0;
    margin-bottom: 25px;
    font-size: 26px;
}
.payment .paymentform h2 {
    color: #9F9F9F;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: normal;
    margin:0;
    padding:0;
    margin-bottom: 20px;
}
.payment .paymentform h3 {
    color: #d6256e;
    font-size: 1.5em;
    margin: 0.83em 0;
    line-height:27px;
}
.payment .paymentform .paymentinput {
    width: 100%;
    display: block;
    border-radius: 6px;
    padding: 8px 11px;
    margin:10px 0 0 0;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: #7d7d7d;
    font-size: 16px;
    border: 1px solid #eca0bf;
}
.payment .paymentform .paymenttextarea {
    width: 100%;
    display: block;
    border-radius: 6px;
    padding: 8px 11px;
    margin:10px 0 0 0;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: #7d7d7d;
    font-size: 16px;
    border: 1px solid #eca0bf;
}
.payment .paymentform .paymentinput:focus {
    border: 2px solid #eca0bf;
    padding:7px 11px;
}
.payment .paymentform .paymenttextarea:focus {
    border: 2px solid #eca0bf;
    padding:7px 11px;
}
.payment .paymentform .paymentselect:focus {
    border: 2px solid #eca0bf;
    padding:7px 11px;
}
.payment .paymentform .paymentselect {
    width: 100%;
    display: block;
    border-radius: 6px;
    padding: 8px 11px;
    margin:10px 0 0 0;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: #7d7d7d;
    font-size: 16px;
    border: 1px solid #eca0bf;
}
.payment .paymentform .paymentbutton {
    background-color: #d92b72;
    border-radius: 8px;
    padding: 14px 36px;
    margin: 20px auto 0 auto;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border: 0;
    display: block;
}
.payment .paymentform .paymentbutton:disabled {
    background-color: #686a6c;
}
.choosepaymentbtn,
.payment .paymentform .choosepaymentbtn {
    width: 45%;
    margin: 0 2% 30px;
    background-color: #AAA;
    border-radius: 8px;
    padding: 14px 36px;
    color: #555;
    font-size: 18px;
    font-weight: bold;
    border: 0;
    display: inline-block;
}

.selectedpaymentbtn,
.choosepaymentbtn:hover,
.payment .paymentform .choosepaymentbtn:hover,
.payment .paymentform .selectedpaymentbtn {
    width: 45%;
    margin: 0 2% 30px;
    background-color: #d92b72;
    border-radius: 8px;
    padding: 14px 36px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border: 0;
    display: inline-block;
}

.selectedpaymentbtn,
.choosepaymentbtn,
.choosepaymentbtn:hover {
    width: 20%;
    margin-bottom: 0;
}

.payment .paymentform input.error, .payment .paymentform textarea.error, .payment .paymentform select.error {
    border:2px solid #D50E43;
    padding:7px 11px;
}
.payment .paymentform p {
    color:#636363;
    font-size:12px;
    line-height: 16px;
    font-weight: normal;
}
.payment .paymentform p a {
    color: #d92b72;
}

.payment .paymentform img {
    position: absolute;
    top: 120px;
    left: 40%;
}

.payment .paymentform .promo {
    position: relative;
    display: inline-block;
    margin: 0 0 0 -25px;
    top: 0;
    left: 0;
}

.payment .paymentform span.paymentinfo {
    position: absolute;
    top: 295px;
    left: 73%;
    font-size: 10px;
}

.billing {
    color:#333;
    font-size:18px;
}
.billing > .input {
    color:#000;
    font-weight: bold;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #CCC;
    margin: 3% 3% 3% 0;
    display: inline;
    width: 100%;
    box-sizing: border-box;
}
.billing > .hs {
    width: 45%;
}
.billing > .hsp {
    width: 50%;
    margin:0;
}
.billing > .cvv-image {
    position: inherit !important;
    top: auto !important;
    left: auto !important;
    margin:22px 0 0 0;
}
#field_errors {
    background-color: #FFE2E2;
    padding: 10px 20px;
    color: #CE1E1E;
    margin: 10px 0;
    display: none;
}

/* PUBLIC CREATION VIEW */

#container .showImage {
    padding: 35px 0px 20px 0px;
    text-align: center;

    display: block;
}

#container .showImage img {
    border: 2px solid #333;
}

#container .showInfo {
    min-height: 300px;
    font-family: 'Nunito';
    display: block;
}

#container .showInfo hr {
    margin: 8px 0px 5px 20px;
    width: 100px;
    background-color: #DC1866;
    height: 3px;
    border: none;
    border-radius: 30px;
}

#container .showInfo #name {
    font-size: 26px;
    margin-top: 0;
}

#container .showInfo #description {
    font-size: 16px;
    font-weight: lighter;
    margin-top: 5px;
}

#container .showInfo #tags {
    font-size: 14px;
    font-weight: lighter;
}

#container .showInfo a {
    font-size: 14px;
    color: #333333;
    display: inline-block;
    margin: 15px 0 0 5px;
    outline: none;
    padding: 2px 15px;

    text-decoration: none;

    transition: 0.3s;

    cursor: default;
}

#container .showInfo a {
    /*background-color: #ECECEC;*/
}

#container .showInfo img {
    margin-top: 15px;
    border-radius: 50%;
    margin: 20px 0 20px 20px;
    width: 50px;
}

#container .showInfo #uName {
    padding: 0;
    cursor: pointer;
}

#container .showInfo #uName span {
    position: relative;
    top: 35px;
    margin-left: 5px;
    font-size: 16px;
}

/*
#container .showInfo a:hover {
    background-color: #DCDCDC;
    color: #c3004b;
}
*/

.socialMedia {



}
/*
        DashBoard
*/

.dashboardTotalValue {
    font-size: 14px;
    font-weight: lighter;
}
.dashboardTotalRefresh {
    display: block;
    width: 36px;
    height: 37px;
    float: right;
    background: none;
    background-image: url('../img/workspace/rotate.png');
    background-repeat: no-repeat;
    background-position: center;
    text-decoration: none;
    border: none;
}

/*
        footer
*/

#footer {
    padding: 31px 0px;
    width: 100%;
    min-width: 960px;

    background-color: #555555;
}


#footer .logo  {
    width: 230px;
    float: left;
}

#footer .options {
    width: 710px;
    float: right;
}

#footer .options ul li {
    padding: 0;
    margin: 0;
    float: left;

    list-style: none;
}

#footer .options .login {
    float: left;

    display: block;
}

#footer .options .login ul {
    padding: 0;
    margin: 0;
}

#footer .options .login ul li a {
    text-decoration: none;
    font-size: 12px;
    color: #555;
    background-color: #AAA;

    border-radius: 30px;

    display: block;

    margin: 5px 10px 0 0;
    padding: 8px 18px;
}

#footer .options .login ul li a:hover {
    background-color: #383838;
    color: #FFF;
}

#footer .options .user-options .social {
    margin: 5px 0 0 0;
    float: right;

    display: block;
    overflow: hidden;
}

#footer .options .general-options {
    float: left;
    width: 100%;
    margin: 30px 0 0 0;
}

#footer .options .general-options ul {
    margin: 0;
    padding: 0;
}

#footer .options .general-options ul li a {
    text-decoration: none;
    font-size: 12px;
    color: #acacac;

    display: block;

    margin: 5px 5px 0 0;
    padding: 5px 14px;
}

#footer .options .general-options ul li a:hover {
    color: #fff;
}

#footer .options .general-options .first {
    padding: 5px 10px 0 0;
}


/* payment success | return success */

.paymentsuccess {
    text-align: center;
}

.paymentsuccess h2 {
    font-weight: lighter;
    margin-top: 50px;
    color: #DC1866;
    font-size: 22px;
}

.paymentsuccess p {
    font-weight: lighter;
    width: 350px;
    color: #333;
    margin-left: 32%;
    margin-top: 0;
}

.paymentsuccess h3.light a,
.paymentsuccess p a {
    text-decoration: underline;
    color: #333;
}

.paymentsuccess h3 {
    font-weight: bold;
    color: #222;
    margin-bottom: 0px;
}
.paymentsuccess h3.light {
    margin: 5px 0 25px 0;
    font-weight: lighter;
}

.paymentsuccess img {
    margin: 10px 0 35px 0;
}

.paymentsuccess .button {
    margin: 15px 0 30px 0;
    background-color: #e93d83;
    color: #fff;
    border-radius: 8px;
    padding: 14px 36px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border: 0;
    display: inline-block;
}

.paymentsuccess .button:hover {
    background-color: #dc1866;
    border-radius: 8px;
    padding: 14px 36px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border: 0;
    display: inline-block;
}

/* ## EXTERNAL PAGES ## */

/* LOADING */

.container-loading {
    text-align: center;
    width: 60%;
    height: 40%;
    margin-left: 20%;
    margin-top: 10%;
}

.container-loading h2,
.container-loading h4 {
    color: #3f3f3f;
    font-weight: lighter;
    margin: 30px 0 0 0;
}

/* PAYMENT */

.features .listheader.external li {
    width: 292px;
}

.plans.external {
    display: inline-block;
    margin-left: 8%;
}

.plans.external .plan {
    width: 390px;
}

/* BENEFITS */

.container-benefits {
    margin: 0 20px 20px;
}

.container-benefits .slider {
    display: inline-block;
    float: left;
    margin: 15px;
}

.container-benefits .info {
    display: inline-block;
    float: right;
    text-align: left;
    width: 29.5%;
    margin: 15px;
}

.container-benefits .info img {
    width: 200px;
}

.container-benefits .info h2 {
    color: #DC1866;
}

.container-benefits .info .options {
    font-size: 12px;
}

.container-benefits .options ul.external {
    margin-top: 0;
    padding-left: 2em;
    list-style-type: none;
}

.container-benefits .options ul.external li {
    margin-top: 7px;
}

.container-benefits .options ul.external li:before {
    position: absolute;
    margin-left: -1.3em;
    font-weight: bold;
    content: "\2713";
    color: #ff6699;
}

/* CREATIONS & TEMPLATES */

.accordion-toggle {
    cursor: pointer;
    border-bottom: 2px solid #e0e0e0;
}
.accordion-content {
    display: none;
}
.accordion-content.default {
    display: block;
}
.selected-content {
    padding-left: 30px;
}

/* RESELLER FORM */

.resseler-user-info {
    width: 50%;
    float: left;
    margin-top: 50px;
}

.resseler-user-form {
    width: 80%;
    color: #333;
    font-size: 18px;
    background-color: #f9f9f9;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    padding: 30px 30px;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.reseller-input {
    color: #000;
    font-weight: bold;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #CCC;
    margin: 3% 3% 3% 0;
    display: inline;
    width: 100%;
    box-sizing: border-box;
}

.reseller-error {
    width: 100%;
    display: none;
    color: #F00;
    margin-bottom: 20px;
    font-weight: bold;
}