/* reset by rafaux */
* { margin: 0px; padding: 0px; border: 0px; font-weight: normal; font-size: 100%; list-style: none; line-height: 1; outline: 0px; background: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; }

/* var */
:root { --purple: #9E005D; --gray: #757575; --yellow: #F76B1C; --blue: #2193B0; --purple: #9E005D; --pink: #FF4B2B; }

/* global class */
.block { position: relative; float: left; width: 100%; height: auto; }

/* base */
a { text-decoration: none; transition: all .5s ease; }
body { min-height: 100vh; padding: 20px; background-color: #fff; color: var(--gray); font: normal 14px 'Poppins', sans-serif; overflow: hidden; }
body::before { position: fixed; top: 20px; left: 20px; width: calc(100vmax - 40px); height: calc(100vh - 40px); border-radius: 40px; box-shadow: 0px 30px 60px rgba(0,0,0,.3); background-color: #F2F2F2; content: ''; }
input, textarea, select, button { font: normal 14px 'Poppins', sans-serif; appearance: none; -webkit-appearance: none; border-radius: 0px; cursor: pointer; }
input[type=submit], button { transition: all .5s ease; }


/* yellow */
body.yellow { background: transparent linear-gradient(135deg, #49453250 0%, #96751C50 36%, #CE9B0D50 66%, #F1920350 88%, #FFB30050 100%) 0% 0% no-repeat; }
body.yellow #brand { background: transparent linear-gradient(73deg, #FAD75F 0%, #F76D1D 100%) 0% 0% no-repeat; }
body.yellow #brand nav strong, body.yellow #logged span i, body.yellow .create .area footer label.lsubmit button i { background-color: var(--yellow); }
body.yellow .preview, body.yellow .create section article { background-color: #EAE2D8; }
body.yellow #sidebar nav li a:hover, body.yellow #sidebar nav li a:hover i, body.yellow #sidebar nav li.on a { color: var(--yellow); }
body.yellow #sidebar nav li.on a i, body.yellow #sidebar nav li.on a i { background-color: #F76D1D50; color: var(--yellow); }
body.yellow nav#breadcrumb li, body.yellow nav#breadcrumb li a, body.yellow .create .area footer label.lsubmit button { color: var(--yellow); }

/* blue */
body.blue { background: transparent linear-gradient(135deg, #32404950 0%, #1C599650 36%, #0D6ECE50 66%, #0372F150 88%, #0080FF50 100%) 0% 0% no-repeat; }
body.blue #brand { background: transparent linear-gradient(265deg, #6DD5ED 0%, #2193B0 100%) 0% 0% no-repeat; }
body.blue #brand nav strong, body.blue #logged span i, body.blue .create .area footer label.lsubmit button i { background-color: var(--blue); }
body.blue .preview, body.blue .create section article { background-color: #D8E4EA; }
body.blue #sidebar nav li a:hover, body.blue #sidebar nav li a:hover i, body.blue #sidebar nav li.on a { color: var(--blue); }
body.blue #sidebar nav li.on a i, body.blue #sidebar nav li.on a i { background-color: #2193B050; color: var(--blue); }
body.blue nav#breadcrumb li, body.blue nav#breadcrumb li a, body.blue .create .area footer label.lsubmit button { color: var(--blue); }

/* purple */
body.purple { background: transparent linear-gradient(134deg, #49324050 0%, #961C6550 36%, #CE0D8150 66%, #F1039250 88%, #FF009950 100%) 0% 0% no-repeat; }
body.purple #brand { background: transparent linear-gradient(128deg, #C40081 0%, #620041 100%) 0% 0% no-repeat; }
body.purple #brand nav strong, body.purple #logged span i, body.purple .create .area footer label.lsubmit button i { background-color: var(--purple); }
body.purple .preview, body.purple .create section article { background-color: #E9D8EA; }
body.purple #sidebar nav li a:hover, body.purple #sidebar nav li a:hover i, body.purple #sidebar nav li.on a { color: var(--purple); }
body.purple #sidebar nav li.on a i, body.purple #sidebar nav li.on a i { background-color: #9E005D50; color: var(--purple); }
body.purple nav#breadcrumb li, body.purple nav#breadcrumb li a, body.purple .create .area footer label.lsubmit button { color: var(--purple); }

/* pink */
body.pink { background: transparent linear-gradient(135deg, #49373250 0%, #96491C50 36%, #CE5A0D50 66%, #F1620350 88%, #FF770050 100%) 0% 0% no-repeat; }
body.pink #brand { background: transparent linear-gradient(330deg, #FF4B2B 0%, #FF416C 100%) 0% 0% no-repeat; }
body.pink #brand nav strong, body.pink #logged span i, body.pink .create .area footer label.lsubmit button i { background-color: var(--pink); }
body.pink .preview, body.pink .create section article { background-color: #EADED8; }
body.pink #sidebar nav li a:hover, body.pink #sidebar nav li a:hover i, body.pink #sidebar nav li.on a { color: var(--pink); }
body.pink #sidebar nav li.on a i, body.pink #sidebar nav li.on a i { background-color: #FF4B2B50; color: var(--pink); }
body.pink nav#breadcrumb li, body.pink nav#breadcrumb li a, body.pink .create .area footer label.lsubmit button { color: var(--pink); }

/* wrapper */
#wrapper { position: relative; z-index: 2; display: inline-block; width: 100%; height: auto; }

/* logged */
#logged { position: fixed; z-index: 3; top: 42px; right: 40px; width: auto; height: auto; text-align: right; }
#logged span { display: inline-block; width: auto; margin-left: 10px; vertical-align: middle; }
#logged span i { display: inline-block; width: 50px; height: 50px; border: 3px solid #fff; border-radius: 100%; box-shadow: 0px 3px 6px rgba(0,0,0,.1); text-align: center; line-height: 44px; color: #fff; font-size: 18px; }
#logged span figure { display: inline-block; width: auto; margin-left: 20px; vertical-align: middle; }
#logged span figcaption { display: inline-block; width: auto; vertical-align: middle; }
#logged span figcaption strong { display: block; margin-bottom: 4px; font-weight: 600; font-size: 16px; color: var(--gray); }
#logged span figcaption em { display: block; font-weight: 300; font-size: 14px; font-style: normal; color: var(--gray); }

/* sidebar */
#sidebar { position: fixed; top: 20px; left: 20px; width: 80px; height: calc(100vh - 40px); border-top-left-radius: 40px; border-bottom-left-radius: 40px; text-align: center; }
#sidebar span.logo img { display: none; width: 65px; margin: 40px auto 52px auto; }
#sidebar span.logo img.logo-yellow { display: block; }
#sidebar nav li a { display: block; margin-bottom: 20px; font-size: 12px; text-align: center; color: #9E9C9B; font-weight: 600; }
#sidebar nav li a i { display: block; width: 50px; height: 50px; margin: 0px auto 5px auto; background-color: #DFDFDF; color: var(--gray); font-size: 20px; border-radius: 100%; text-align: center; line-height: 50px; transition: all .5s ease; }
#sidebar nav li a i.fa-play { padding-left: 4px; transform: rotate(65deg); }

/* brand */
#brand { position: fixed; z-index: 2; top: 20px; left: 100px; width: 100px; height: calc(100vh - 40px); box-shadow: 5px 0px 15px #00000066; padding-top: 25px; }
#brand span.areaBrand { display: block; padding: 24px 0px 84px 5px; color: #fff; font-size: 18px; }
#brand nav strong { display: block; width: 70px; height: 70px; margin: 0px auto; border: 1px solid #fff; font-weight: 600; color: #fff; border-radius: 100%; font-size: 10px; text-align: center; transition: all .2s ease; }
#brand nav strong i { display: block; margin: 12px 0px 4px 0px; font-size: 18px; }
#brand nav li a { display: block; margin-top: 30px; text-align: center; color: #fff; font-weight: 600; font-size: 12px; opacity: .5; }
#brand nav li a i { display: block; margin-bottom: 7px; font-size: 22px; }
#brand nav li a:hover { opacity: 1; }
#brand nav {padding-top: 85px;}
.gobrand {font-size: 17px;    font-weight: bold;    padding-left: 10px;    color: white;}

/* create */
.create { float: left; width: calc(100% - 160px); height: calc(100vh - 140px); margin-left: 160px; overflow-y: auto; }

    /* create -> area */
    .area { position: relative; z-index: 2; float: left; width: 50%; height: auto; padding: 40px; overflow-y: auto; }

        /* create -> area -> breadcrumb */
        nav#breadcrumb { display: inline-block; width: 100%; height: auto; margin-bottom: 40px; padding-top: 40px; padding-left: 40px; margin-left: 160px; }
        nav#breadcrumb li { display: inline-block; width: auto; height: auto; font-weight: bold; }
        nav#breadcrumb li a::after { display: inline-block; margin: 0px 10px; font-weight: 400; font-family: 'Font Awesome 5 Pro'; vertical-align: middle; content: '\f105'; }
        nav#breadcrumb li:first-of-type a::before { display: inline-block; margin-right: 10px; font-weight: 400; font-size: 18px; font-family: 'Font Awesome 5 Pro'; vertical-align: middle; content: '\f137'; }
 
        /* create -> area -> breadcrumb */
        .create .area header { display: block; margin-bottom: 10px; }
        .create .area header strong { display: block; margin-bottom: 7px; font-size: 24px; font-weight: 600; }
        .create .area header::after { display: block; margin-top: 40px; color: var(--purple); content: ''; }

        /* create -> area -> modelo */
        .create .area section { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; margin-bottom: 40px; }
        .create .area section article { display: block; padding: 20px; border-radius: 20px; text-align: center; box-shadow: 0px 3px 6px rgba(0,0,0,.2); }
        .create .area section article img { display: block; width: 100px; height: auto; margin: 0px auto; }
        .create .area section article h5 { display: block; font-weight: bold; font-size: 12px; }

        /* create -> area -> form */
        .create .area footer { display: inline-block; width: calc(100% + 10px); height: auto; margin-left: -5px; }
        .create .area footer label { display: inline-block; width: 100%; height: auto; margin-bottom: 10px; padding: 0px 5px; }
        .create .area footer label strong { display: block; margin-bottom: 4px; padding-left: 10px; font-size: 11px; }
        .create .area footer label input { display: inline-block; width: 100%; height: 40px; padding: 0px 10px; background-color: #fff; border-radius: 50px; box-shadow: 0px 5px 10px rgba(0,0,0,.1); margin-bottom: 10px; }
        .create .area footer label select { display: inline-block; width: 100%; height: 40px; padding: 0px 10px; background-color: #fff; border-radius: 50px; box-shadow: 0px 5px 10px rgba(0,0,0,.1); }
        .create .area footer label.lb3 { width: 33%; margin-right: -3px; }
        .create .area footer label.lb2 { width: 50%; margin-right: -3px; }
        .create .area footer label.lsubmit { width: 100%; margin-top: 40px; text-align: center; }
        .create .area footer label.lsubmit button { font-weight: bold; font-size: 14px; transition: all .5s ease; }
        .create .area footer label.lsubmit button i { display: block; width: 80px; height: 80px; margin-bottom: 5px; border: 4px solid #fff; box-shadow: 0px 5px 10px rgba(0,0,0,.2); color: #fff; font-size: 36px; line-height: 74px; border-radius: 100%;  transition: all .5s ease; }

        .btpreview { display: inline-block; width: 100%; height: auto; margin-bottom: 10px; padding: 0px 5px; }
        .btpreview { width: 100%; margin-top: 40px; text-align: center; }
        .btpreview button { font-weight: bold; font-size: 14px; transition: all .5s ease; }
        .btpreview button i { display: block; width: 80px; height: 80px; margin-bottom: 5px; border: 4px solid #fff; box-shadow: 0px 5px 10px rgba(0,0,0,.2); color: #fff; font-size: 36px; line-height: 74px; border-radius: 100%;  transition: all .5s ease; }



    /* create -> preview */
    .preview { position: fixed; top: 20px; right: 20px; width: calc(50% - 100px); height: auto; min-height: calc(100vh - 40px); padding: 97px 40px 40px 40px; box-shadow: 5px 0px 15px rgba(0,0,0,.5); border-top-right-radius: 40px; border-bottom-right-radius: 40px; }
    .preview header strong { display: block; margin-bottom: 7px; font-size: 24px; font-weight: 600; }
    .preview section img { display: block; width: auto; max-width: 100%; height: auto; margin-top: 20px; box-shadow: 0px 10px 30px rgba(0,0,0,.2); }

    /*Thumb */
     /* create -> area -> modelo */
     .thumb { display: block; float: left; width: auto; height: auto; padding: 40px; overflow-y: auto; }
     .thumb section { display: grid; grid-template-columns: 1fr 1fr ; grid-gap: 20px; margin-bottom: 40px; }
     .thumb article { display: block; padding: 20px; border-radius: 20px; text-align: center; box-shadow: 0px 3px 6px rgba(0,0,0,.2); }
     .thumb section article img { display: block; width: 150px; height: auto; margin: 0px auto; }
     .thumb section article h5 { display: block; font-weight: bold; font-size: 12px; padding-top: 10px; }

/*
SubMenu
 */
.submenu .strong { display: block; width: 70px; height: 70px; margin: 0px auto; border: 1px solid #fff; font-weight: 600; color: #fff; border-radius: 100%; font-size: 10px; text-align: center; transition: all .2s ease; }
.submenu .strong i { display: block; margin: 12px 0px 4px 0px; font-size: 18px; }
/* responsive */
@media (max-width: 960px){

    /* global */
    body::before { width: calc(100% - 40px); }

    /* #wrapper */
    #wrapper { border-bottom-right-radius: 40px; overflow: hidden; }

    /* logged */
    #logged { position: relative; float: right; top: auto; right: auto; margin-bottom: 20px; }

    /* area */
    .area { width: 100%; }

    /* preview */
    .preview { position: relative; top: auto; right: auto; float: left; width: 100%; min-height: auto; padding: 40px; box-shadow: none; border-radius: 0px; }

}

@media (max-width: 650px){

    /* logged */
    #logged span figcaption { display: none; }

    /* area */
    .area { padding: 20px; }

    /* create */
    .create .area footer label { width: 100% !important; }

    /* preview */
    .preview { padding: 20px; }

}