@import url("font-awesome.min.css");

@font-face{
  	font-family: NinoMtavr;
  	src: url("../fonts/NinoMtavr.otf");
}

@font-face{
	font-family: RioniVeraTabula;
  	src: url("../fonts/rioniVera.woff");
}

html, body{
	margin:0;
	padding:0;
	font-size:16px;
	font-family: RioniVeraTabula;
}

body{
	background:url("../images/intro.svg") no-repeat #4258a6;
	background-attachment:fixed;
    position:relative;
    min-height:100%;
}

*, *:before, *:after{
	-moz-box-sizing:border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}

a, a:active, a:focus{
	outline:none;
	text-decoration:none;
}

#sidebar{
    padding:2.5em 2.5em 0.5em 2.5em;
    background:#333333;
    height:100vh;
    overflow:hidden;
    position:fixed;
    text-align:right;
    top:0;
    left:0;
    width:310px;
    z-index:10000;
}

.logo{
	width:80%;
	margin:0 auto;
	display:block;
}

.logo img{
	max-width:100%;
}

#sidebar nav{
	margin-top:calc((100vh - 206px) / 2 - 40px - 80px);
}

#sidebar nav a{
    color:rgba(255, 255, 255, 0.35);
    display:block;
    font-size:16px;
    font-weight:bold;
    letter-spacing:0.25em;
    line-height:1.75;
    padding:1.35em 0 1em;  
    font-family:NinoMtavr;
    border-bottom:3px solid #5468AE;
    transform:translateY(50px);
    opacity:0;
}

#sidebar nav a.active{
    color:#fff !important;
}

#sidebar nav a.load{
    transform:translateY(0px);
    opacity:1;
    transition:0.4s;
    transition-timing-function:ease-out;
}

#sidebar nav a:first-child.load{
    transform:translateY(0px);
    opacity:1;
    transition-delay:0.3s;
}

#sidebar nav .nav_1 a.load{
    transition-delay:0.6s;
}

#sidebar nav > a:nth-child(3n).load{
    transition-delay:0.9s;
}

.nav_2{
	display:none;
	padding:1.3em 0 0 0;
}

#sidebar .nav_2 a{
    padding:0.2em 0;
    font-size:0.9em;
    border:0;
    display:block;
    letter-spacing:normal;
}

#wrapper{
	margin-left:310px;
	padding:8em 0 160px;
}

.calc_button{
    border-top-left-radius:7px;
    border-bottom-left-radius:7px;
    position:fixed;
    -ms-box-shadow:0 0 3px #4258A6;
    -moz-box-shadow:0 0 3px #4258A6;
    -webkit-box-shadow:0 0 3px #4258A6;
    box-shadow:0 0 3px #4258A6;
    border-right:0;
    top:4em;
    right:-4.8em;
    background:#F07241;
    z-index:1000;
    -ms-transition:0.5s;
    -moz-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
    font-size:2em;
    border:0;
    padding:0.5em;
    color:#fff;
}

.calc_button span{
    display:inline-block;
    vertical-align:middle;
    font-size:0.7em;
    padding:0 0.2em 0.3em 0.3em;
}

.calc_button:hover{
    right:0;
    -ms-transition:0.5s;
    -moz-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
}

.fa-bars, .fa-times{
    display:none;
}

.default_title{
    font-size:2em;
    display:inline-block;
    margin:1em 0 0 0;
    padding:0.5em 1em 0.2em;
    border-top:1px solid rgba(255,255,255, 0.2);
    border-bottom:1px solid rgba(255,255,255, 0.2);
    color:#ffffff;
    font-weight:bold;
    font-family: NinoMtavr;
    line-height:1.5;   
}

footer{
    background:#444444;
    position:absolute;
    bottom:0;
    left:0;
    width:calc(100% - 310px);
    height:160px;
    margin:0 0 0 310px;
    padding:60px 4em 2em 65px;
}

footer .copyright{
    float:left;
    font-size:0.9em;
    color:#fff;
    font-family: RioniVeraTabula;
}

.button{
    background:#4258A6;
    color:#ffffff;
    border:solid 1px rgba(255, 255, 255, 0.15);
    border-radius:3em;
    display:inline-block;
    font-size:1em;
    font-weight:bold;
    font-family: RioniVeraTabula;
    letter-spacing:0.25em;
    height:calc(4.75em + 2px);
    line-height:4.75em;
    outline:0;
    padding:0 3.75em;
    text-align:center;
    text-transform: uppercase;
    white-space:nowrap;
    margin:2em 0 0 0;
    position:relative;
}

.button:hover{
    border:solid 1px rgba(255, 255, 255, 0.35);
}

.button:after{
    content:'';
    opacity:0;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:#fff;
    border-radius:3em;
    transform:scale(0.25);
    transition:0.15s;
    transition-timing-function:ease;
}

.button:hover:after{
    opacity:0.05;
    transform:none;
    transition:0.15s;
    transition-timing-function:ease;
}

.button:active:after{
    opacity:0.1;
    transform:none;
}

form{
    width:70%;
}

input[type="text"], textarea{
    height:2.75em;
    font-family: RioniVeraTabula;
    background:rgba(255, 255, 255, 0.05);
    border-radius:0.25em;
    border:solid 1px rgba(255, 255, 255, 0.15);
    outline:0;
    padding:0 1em;
    width:100%;
    font-size:1.1em;
    color:#fff;
}

input[type="text"]:focus{
    border:solid 1px rgba(255, 255, 255, 1);
}

::-webkit-input-placeholder {
    color:rgba(255, 255, 255, 0.5);
}

::-moz-placeholder {
    color:rgba(255, 255, 255, 0.5);
}

:-ms-input-placeholder {
    color:rgba(255, 255, 255, 0.5);
}

:-moz-placeholder {
    color:rgba(255, 255, 255, 0.5);
}

input[type="button"]{
    font-size:0.9em;
    cursor:pointer;
    margin:3.5em 0;
}

label{
    color:#ffffff;
    display:block;
    margin:2em 0 0.8em 0.5em;
    font-size:1.2em;
    line-height:1.5em;
}

#scrollup{
    background:url("../images/top.svg") no-repeat;
    border:0;
    opacity:0.7;
    bottom:5em;
    right:2em;
    width:4em;
    height:4em;
    position:fixed;
    z-index:100;
}

.clearfix:after{
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}

.clearfix{
    display: inline-block;
}

/* start commented backslash hack \*/
* html .clearfix{ height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

@media screen and (max-width:1024px){
    #wrapper, footer{
        margin-left:0;
        width:100%;
    }

    .fa-bars{
        display:block;
        font-size:2em;
        cursor:pointer;
        color:#fff;
        position:absolute;
        right:0.8em;
        top:1em;
        transition:0.5s;
    }

    .fa-times{
        display:block;
        font-size:2em;
        cursor:pointer;
        color:rgba(255,255,255,0.9);
        position:absolute;
        right:0.8em;
        top:1em;
    }

    .logo{
        display:none;
    }

    #sidebar{
        display:none;
        padding:4em 2em;
        left:auto;
        right:0;
        margin:0;
        width:50%;
        height:100vh;
        min-width:320px;
        text-align:left;
    }

    #sidebar nav{
        margin:0;
    }

    #sidebar nav a{
        opacity:1;
        transform:none;
        padding:1.35em 0 1em 1em;
    }

    .calc_button{
        display:none;
    }

    .nav_2{
        display:block;
    }

    #sidebar .nav_2 a{
        width:80%;
        margin:0 0 0 10%;
        padding:0.8em 0;
    }
}



@media screen and (max-width:640px){
    body{
        font-size:13px !important;
    }

    footer{
        height:50px;
        padding:7px 0 10px 0;
    }

    footer .copyright{
        float:none;
        text-align:center;
    }

    #wrapper{
        padding-bottom:50px !important;
    }
}