html, body {
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: 300;
    min-width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
}
body {
    max-width: 1024px!important;
}
a {
    cursor: pointer;
    text-decoration: none;
}
ul {
    padding-left: 18px;
}
ul li {
    list-style_: none;
    margin-bottom: 8px;
}
/* input[type=text],
textarea {
    border: 0;
    border-bottom: 2px solid #fd7f00;
} */
#header {
    background: #fe8c00;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f83600, #fe8c00);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    width: 100%;
    height: 100%;
    min-height: 720px;
}
#header #header_wrapper {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#header h1#sira {
    color: #fff;
    font-family: Roboto;
    font-weight: 900;
    font-size: 240px;
    text-align: center;
    letter-spacing: 4px;
    margin: 0;
}
#header h2#sira_2 {
    color: #fff;
    font-family: Roboto;
    font-weight: 300;
    font-size: 24px;
    text-align: center;
    letter-spacing: 4px;
    margin: 0;
}

#header #main-subtitle {
    overflow: auto;
    width: 1024px;
    min-width: 140px;
    margin: 0 auto;
    text-align: center;
    padding: 0 0 40px 0;
}

#header #presents {
    color: #fff;
    font-family: Roboto;
    font-weight: 300;
    font-size: 18px;
    text-align: center;
    letter-spacing: 4px;
    margin: 0;
}

#header #main-subtitle h1#cic {
    display: inline-block;
    color: #fff;
    font-family: Arial;
    font-weight: 800;
    font-size: 60px;
    text-align: center;
    letter-spacing: 4px;
    margin: 0;
}

#header #main-subtitle img {
    display: inline-block;
    width: 230px;
}

#content {
    min-height: 1024px;
    max-width: 1024px!important;
    width: 1024px;
    margin: 0 auto;
}
#content .page {
    padding: 40px;
    height: calc(100%);
    min-height: 720px;
}
#content .page_wrapper {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#content .page h2 {
    font-size: 48px;
    font-weight: 100;
}
#content .fleft {
    float: left;
}
#content .fright {
    float: right;
}
#content .fright {
    margin-top: -60px;
}

.m20 {
    margin: 20px;
}
img.fright.m20 {
    margin: 0 0 0 20px;
}
img.decorated3deg {
    border: 1px solid #eee;
    padding: 8px;
    background: #efefef;
    transform: rotate(3deg);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
img.decorated3degu {
    border: 1px solid #eee;
    padding: 8px;
    background: #efefef;
    transform: rotate(-3deg);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

/**
* What
*/

#what img.fleft {
    margin-top: -80px;
}

/**
* END OF What
*/

/**
 * Smart Scale
 */

#smart-scale-1 {
    height: auto!important;
}

#smart-scale-1 .page_wrapper {
    left: auto!important;
    top: auto!important;
    transform: none!important;
}

#smart-scale-1 h2 {
    padding: 80px 0;
}

#smart-scale-1 img#premio {
    width: 240px;
    position: absolute;
    top: 40px;
    left: 0px;
    transform: rotate(-15deg);
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
}

#smart-scale-1 div.fleft {
    margin-top: 80px;
}

#smart-scale-1 .cchevron_container {
    margin-top: 120px;
}

/**
* App2
*/

#app2 img.fleft {
    margin: -80px 60px 0 0;
}

/**
* END OF App2
*/

/**
* Partners
*/

div#cpartners {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

div.partner {
    flex-basis: 30%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    min-height: 150px;
}

/**
* END OF Partners
*/

/**
* Contact
*/

form {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
form div.message {
    float: right;
}

#contact {
    background: #ADA996;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #666;
    width: 100%;
    height: calc(100%);
    min-height: 720px;
    padding: 40px;
}
#contact h2 {
    font-size: 48px;
    font-weight: 100;
    color: #666;
}
#contact a {
    color: #fff;
}
#contact h1#sira {
    color: #fff;
    font-family: Roboto;
    font-weight: 900;
    font-size: 240px;
    text-align: center;
    letter-spacing: 4px;
    margin: 0;
}
#contact h2#sira_2 {
    color: #fff;
    font-family: Roboto;
    font-weight: 300;
    font-size: 24px;
    text-align: center;
    letter-spacing: 4px;
    margin: 0;
}

#contact .page_wrapper {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 1024px;
}

/**
 * END OF Contact
 */

/**
 * Footer
 */

#footer {
    background: #0F2027;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    width: 100%;
    height: 100%;
    min-height: 1024px;
    margin-top: -60px;
}
#footer a {
    color: #fff;
}
#footer h1#sira {
    color: #fff;
    font-family: Roboto;
    font-weight: 900;
    font-size: 240px;
    text-align: center;
    letter-spacing: 4px;
    margin: 0;
}
#footer h2#sira_2 {
    color: #fff;
    font-family: Roboto;
    font-weight: 300;
    font-size: 24px;
    text-align: center;
    letter-spacing: 4px;
    margin: 0;
}

#footer .page_wrapper {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#footer #clists {
    flex-direction: row;
    display: flex;
    justify-content: center;
    margin: 60px auto 0;
}

#footer .clist {
    float: left;
    font-size: 18px;
    min-height: 100px;
    width: 300px;
    padding: 0 20px;
    border-right: 1px solid #fff;
}

#footer .clist:last-child {
    border-right: 0 none;
}

#madeby {
    position: relative;
    top: 25px;
    text-align: center;
    font-size: 14px;
    margin-top: 40px;
}

/** 
 * Material Design 
 */

/* form starting stylings ------------------------------- */
.group { 
    position:relative; 
    margin-bottom:45px; 
}
input,
textarea {
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;
    width:300px;
    background: rgba(255, 255, 255, 0);
    border:none;
    border-bottom: 1px solid #fb6c00;
}
input:focus,
textarea:focus { 
    outline:none; 
}

/* LABEL ======================================= */
label {
    color: #777;
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label,
textarea:focus ~ label, textarea:valid ~ label {
    top:-20px;
    font-size:14px;
    color:#291405;
}

/* BOTTOM BARS ================================= */
.bar { 
    position:relative; display:block; width:300px; 
}
.bar:before, .bar:after {
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    background:#fb6c00; 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
.bar:before {
    left:50%;
}
.bar:after {
    right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after,
textarea:focus ~ .bar:before, textarea:focus ~ .bar:after {
    width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
}

/* active state */
input:focus ~ .highlight,
textarea:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from {
        background:#fb6c00;
    }
    to {
        width:0; background:transparent;
    }
}
@-moz-keyframes inputHighlighter {
    from {
        background:#fb6c00;
    }
    to {
        width:0; background:transparent;
    }
}
@keyframes inputHighlighter {
    from {
        background:#fb6c00;
    }
    to {
        width:0; background:transparent;
    }
}

/**
 * BUTTONS
 */

.btn {
    position: relative;

    display: block;
    margin: 30px auto;
    padding: 0;

    overflow: hidden;

    border-width: 0;
    outline: none;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    
    background-color: #2ecc71;
    color: #ecf0f1;
    
    transition: background-color .3s;
}

.btn:hover, .btn:focus {
    background-color: #27ae60;
}

.btn > * {
    position: relative;
}

.btn span {
    display: block;
    padding: 12px 24px;
}

.btn:before {
    content: "";
    
    position: absolute;
    top: 50%;
    left: 50%;
    
    display: block;
    width: 0;
    padding-top: 0;
    
    border-radius: 100%;
    
    background-color: rgba(236, 240, 241, .3);
    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.btn:active:before {
    width: 120%;
    padding-top: 120%;
    
    transition: width .2s ease-out, padding-top .2s ease-out;
}

/* Styles, not important */
*, *:before, *:after {
    box-sizing: border-box;
}

.btn.orange {
    background-color: #e67e22;
}
  
.btn.orange:hover, .btn.orange:focus {
    background-color: #d35400;
}  

/**
 * END OF Material Design
 */

/**
 * Animated form
 */

.is-sent {  
    animation: launch 1.5s ease-in-out;
    /* visibility: hidden;  */
}

@keyframes launch {
	0% {
    opacity: 1;
    transform: translateX(0) scale(1);
	}
	10%, 15% {
    transform: translateX(0) scale(0.5);
	}
	30%, 35% {
		transform: translateX(-20) scale(0.5);
	}
	40%, 70% {
    transform: translateX(100vw) scale(0.5);
	}
	70% {
    opacity: 1
	}
	71% {
    opacity: 0;
    transform: translateX(100vw) scale(0.5);
	}
	72% {
    opacity: 0;
    transform: translateX(0px) scale(0.5);
	}
	100% {
    opacity: 1;
    transform: translateX(0px) scale(1);
	}
}

/**
 * END OF Animated form
 */

@media only screen and (max-device-width: 810px) {
    #content {
        width: auto!important;
    }
    img.fright.m20.decorated3deg {
        float: none!important;
    }
    .page_wrapper .fright {
        float: none!important;
    }
    .page_wrapper .fleft {
        float: none!important;
    }
}

@media only screen and (max-device-width: 480px) {
    #header h1#sira,
    #footer h1#sira {
        font-size: 120px;
    }
    #header h2#sira_2 {
        font-size: 24px;
    }
    img {
        max-width: 280px;
    }
    #content {
        max-width: none;
        width: 100%;
    }
    #content .page {
        min-height: calc(100% - 80px);
        height: auto;
    }
    #content .page_wrapper {
        position: static;
        left: 0;
        top: 0;
        transform: none;
    }
    #content .fright {
        margin-top: 0px;
    }

    #what img.fleft {
        margin-top: -40px;
    }

    #app2 img.fleft {
        margin: 0px 60px 0 0;
    }
    
    #contact {
        min-height: calc(100% - 80px);
        height: auto;
    }
    #contact .page_wrapper {
        position: static;
        left: 0;
        top: 0;
        transform: none;
    }
    
    form {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    form div.message {
        float: right;
    }
    #footer {
        min-height: 100%;
        height: auto;
        padding-top: 80px;
    }
    #footer .page_wrapper {
        position: static;
        left: 0;
        top: 0;
        transform: none;
    }
    #footer #clists {
        flex-direction: column;
        display: flex;
        justify-content: center;
        margin: 60px auto 0;
    }
    #footer .clist {
        float: none;
        font-size: 18px;
        min-height: 100px;
        padding: 0 20px;
        border-right: 0 none;
        border-bottom_: 1px solid #fff;
    }
    .cchevron_container {
        display: none;
    }
    #madeby {
        position: static;
        top: 25px;
        text-align: center;
        font-size: 14px;
        margin-top: 40px;
        padding-bottom: 10px;
    }
}