/* ------------------------------------------------------------- */
/* -------------------------Czipri Gábor------------------------- */
/* ------------------------------------------------------------- */

/* General Styles ---------------------------------------------- */

body {
	
    background: url('../img/bg.png');
	
    background-position: top center;
	
    background-attachment: fixed;
	
    background-color: #fff;
	
    color: #000;
	
    font-family: 'Open Sans', sans-serif;
	
    font-size: 13px;
	
	overflow-x: hidden;
	

}



header {
	
	margin-top: 50px;
	

}



a {
	
    color: #000;
	
    text-decoration: none;
	
    outline: none;
	
    outline-offset: 0;
	
    padding-bottom: 3px;
	
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	
    -webkit-transition: all .3s ease;
	
    -moz-transition: all .3s ease;
	
    transition: all .3s ease;
	

}



a:hover, 
a:active, 
a:focus {
	
    color: #000;
	
    text-decoration: none;
	
    outline: none;
	
    outline-offset: 0;
	
    border-bottom: 1px solid #000;
	

}




h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	
    font-family: 'Segoe UI', 'Open Sans', sans-serif;
	    

}



.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	
    padding-right: 15px;
	
    padding-left: 15px;
	

}



.title {
	
    font-size: larger;
	
    font-weight: bold;
	
    text-transform: uppercase;
	
    padding-left: 0px;
	

}



.title:hover {
	
    padding-left: 0px !important;
	

}



.title .glyphicon {
	
    background-color: rgba(0, 0, 0, 0.75);
	
    color: #fff;
	
    left: -110px;
	
    padding: 10px;
	
    -webkit-border-radius: 20px;
	
    -moz-border-radius: 20px;
	
    border-radius: 20px;
	
    font-size: smaller;
	

}



hr {
	
    margin-top: 10px;
	
    margin-bottom: 15px;
	
    border: 0;
	
    border-top: 3px solid rgba(0, 0, 0, 0.1);
	

}



hr.empty {
	
    padding: 7px 0;
	
    border: 0;
	

}



strong {
	
    font-size: larger;
	
    font-weight: normal;
	

}




.progress {
	
    background-color: rgba(0, 0, 0, 0.05);
	
    height: 7px;
	
    margin-left: 9px;
	
    -webkit-border-radius: 3px;
	
    -moz-border-radius: 3px;
	
    border-radius: 3px;
	

}



.progress-bar {
	
    width: 0;
	
    -webkit-border-radius: 3px;
	
    -moz-border-radius: 3px;
	
    border-radius: 3px;
	
    -webkit-box-shadow: none;
	
    -moz-box-shadow: none;
	
    box-shadow: none;
	
    -webkit-transition: width 3s ease;
	
    -moz-transition: width 3s ease;
	
    transition: width 3s ease;
	

}



.progress-bar-middle {
	
    background-color: #ffa700;
	

}



.progress-bar-success {
	
    background-color: #14d100;
	

}



.annotation {
	
    float: right;
	
    opacity: .75;
	
    font-style: italic;
	

}



.chart {
	
    position: relative;
	
    display: inline-block;
	
    width: 110px;
	
    height: 110px;
	
    margin-top: 25px;
	
    margin-bottom: 50px;
	
    margin-right: 5%;
	
    text-align: center;
	

}



.chart canvas {
	
    position: absolute;
	
    top: 35px;
	
    left: 0;
	

}



.percent {
	
    display: inline-block;
	
    line-height: 140px;
	
    z-index: 2;
	
    opacity: .75;
	
    font-style: italic;
	

}



.percent:after {
	
    content: '%';
	
    margin-left: 0.1em;
	

}



.skill {
	
    display: block;
	

}



ul {
	
    padding: 10px 0 0 13px;
	
    margin: 0;
	
    border-left: 3px solid rgba(0, 0, 0, 0.05);
	

}




ul li {
	
    list-style-image: url('../img/list-style.png');
	
    padding: 10px 0 10px 27px;
	
    -webkit-transition: all .3s ease;
	
    -moz-transition: all .3s ease;
	
    transition: all .3s ease;
	

}



ul li:hover {
	
    list-style-image: url('../img/list-style-on.png');
	
    padding-left: 40px !important;
	

}



.static:hover {
	
    padding-left: 27px !important;
	

}



ul li p {
	
    padding-left: 8px;
	

}



ul .note {
	
    display: inline-block;
	
    margin: 8px;
	
    opacity: .75;
	
    text-transform: uppercase;
	

}



ul .description {
	
    opacity: .75;
	

}



.title {
	
    list-style-image: url('../img/ls.png') !important;
	

}



.title:hover {
	
    padding-left: 0px !important;
	

}



/* Top icons ------------------------------------------------- */

.top-icons {
	
	position: fixed;
	
    top: 50px;
	
    left: 47px;
	
	width: 100%;
	

}



.top-menu {
	
    background-color: rgba(0, 0, 0, 0.25);
	
    color: #fff;
	
    padding: 10px;
	
    font-size: 12px;
	
    -webkit-border-radius: 3px;
	
    -moz-border-radius: 3px;
	
    border-radius: 3px;
	
    border-bottom: 0;
	
    cursor: pointer;
	
    -webkit-transition: all .3s ease;
	
    -moz-transition: all .3s ease;
	
    transition: all .3s ease;
	

}



.top-menu:hover {
	
    background-color: #00ce08;
	
    color: #fff;
	
    border-bottom: 0;
	

}



.top-download-resume {
	
    background-color: rgba(0, 0, 0, 0.25);
	
    color: #fff;
	
    padding: 10px;
	
    font-size: 12px;
	
    -webkit-border-radius: 3px;
	
    -moz-border-radius: 3px;
	
    border-radius: 3px;
	
    border-bottom: 0;
	
    -webkit-transition: all .3s ease;
	
    -moz-transition: all .3s ease;
	
    transition: all .3s ease;
	

}



.top-download-resume:hover {
	
    background-color: #0093ff;
	
    color: #fff;
	
    border-bottom: 0;
	

}



.top-contact {
	
    background-color: rgba(0, 0, 0, 0.25);
	
    color: #fff;
	
    padding: 10px;
	
    font-size: 12px;
	
    -webkit-border-radius: 3px;
	
    -moz-border-radius: 3px;
	
    border-radius: 3px;
	
    border-bottom: 0;
	
    cursor: pointer;
	
    -webkit-transition: all .3s ease;
	
    -moz-transition: all .3s ease;
	
    transition: all .3s ease;
	

}



.top-contact:hover {
	
    background-color: #ff003b;
	
    color: #fff;
	
    border-bottom: 0;
	

}



/* Nav ------------------------------------------------- */

nav {
	
    position: fixed;
	
    top: 33%;
	
    left: 50px;
	
    z-index: 999;
	

}



nav ul {
	
    padding: 10px 0 0 10px;
	
    margin: 0px;
	
    border-left: 4px solid rgba(0, 0, 0, 0.05);
	

}



nav ul li:first-child {
	
    margin-top: -25px;
	

}



nav ul li {
	
    list-style-image: url('../img/list-style-nav.png');
	
    padding: 5px 15px;
	
    font-size: 13px;
	
    text-transform: uppercase;
	
    cursor: pointer;
	
    -webkit-transition: all .3s ease;
	
    -moz-transition: all .3s ease;
	
    transition: all .3s ease;
	

}



nav ul li:hover {
	
    list-style-image: url('../img/list-style-nav-on.png');
	
    padding-left: 25px !important;
	
    color: #000;
	

}



nav ul li:hover a {
	
    color: #000;
	

}



nav ul li.active {
	
    list-style-image: url('../img/list-style-nav-on.png');
	
    color: #000;
	

}



nav a {
	
    border-bottom: 0;
	

}



nav a:hover, 
nav a:active, 
nav a:focus {
	
    border-bottom: 0;
	

}



nav li a {
	
    border-bottom: 0;
	
    color: rgba(0, 0, 0, 0.5);
	

}



nav .active a {
	
    color: #000;
	
    font-weight: bold;
	

}



#mini-nav {
	
    background-color: #fff;
	
    position: fixed;
	
    width: 100%;
	
    top: 0;
	
    left: 0;
	
    text-align: center;
	
    font-weight: bold;
	

}



#mini-nav ul {
	
    width: 100%;
	
    border: 0;
	
    padding: 7px 0 10px 0;
	
    

}



#mini-nav ul li {
	
    list-style-image: none;
	
    padding: 0 !important;
	

}



#mini-nav ul li:first-child {
	
    margin-top: 0;
	

}



#mini-nav .dropdown-menu {
	
    margin: 0;
	
    font-size: 14px;
	
    list-style: none;
	
    background-color: #fff;
	
    border: 0;
	
    border-radius: 0;
	
    -webkit-box-shadow: none;
	
    box-shadow: none;
	

}



.dropdown-menu > .active > a, 
.dropdown-menu > .active > a:hover, 
.dropdown-menu > .active > a:focus {
	
    background-color: #000;
	

}



/* Header ------------------------------------------------- */

.face {
	
    height: 200px;
	
    width: 200px;
	
    border-radius: 50%;
	

}



.header-name {
	
    background-color: #000;
	
    padding: 5px 17px;
	
    display: inline-block;
	
    color: #fff;
	
    font-size: 18px;
	
    font-weight: 700;
	
    text-transform: uppercase;
	
    -webkit-border-radius: 3px;
	
    -moz-border-radius: 3px;
	
    border-radius: 3px;
	
    border-left: 3px solid #f00;
	
    border-right: 3px solid #0045ff;
	

}



.header-title {
	
    font-size: 16px;
	

}



.header-subtitle {
	
    padding-top: 25px;
	
    font-style: italic;
	
    margin-bottom: 100px;
	

}



/* Profile ------------------------------------------------- */

.profile .title .glyphicon{
	
    background-color: #9300ff;
	

}



/* Work experience ------------------------------------------------- */

.work-experience .title .glyphicon{
	
    background-color: #00a7ff;
	

}



/* Education ------------------------------------------------- */

.education .title .glyphicon{
	
    background-color: #07b500;
	

}



/* Professional skills ------------------------------------------------- */

.professional-skills .title .glyphicon{
	
    background-color: #ffa700;
	

}



/* Personal skills ------------------------------------------------- */

.personal-skills .title .glyphicon{
	
    background-color: #00aca5;
	

}



/* Interests ------------------------------------------------- */

.interests .title .glyphicon{
	
    background-color: #f00;
	

}



/* Portfolio ------------------------------------------------ */

.portfolio .title .glyphicon{
	
    background-color: #0089ff;
	

}



.portfolio img {
	
    width: 100px;
	
    margin-right: 5px;
	
    margin-bottom: 5px;
	
    -webkit-border-radius: 3px;
	
    -moz-border-radius: 3px;
	
    border-radius: 3px;
	
    cursor: pointer;
	
    -webkit-transition: all .3s ease;
	
    -moz-transition: all .3s ease;
	
    transition: all .3s ease;
	

}



.portfolio img:hover {
	
    opacity: .75;
	

}



.portfolio img:first-child {
	
    margin-left: 8px;
	

}



.dismiss {
	
    position: relative;
	
    background-color: rgba(0, 0, 0, 0.25);
	
    top: -4px;
	
    left: 100%;
	
    color: #fff;
	
    padding: 5px 7px;
	
    -webkit-border-radius: 3px;
	
    -moz-border-radius: 3px;
	
    border-radius: 3px;
	
    border-bottom: 0 !important;
	
    z-index: -1;
	
    -webkit-transition: all 0.3s ease;
	
    -moz-transition: all 0.3s ease;
	
    transition: all 0.3s ease;
	

}



.dismiss:hover {
	
    background-color: #fff;
	

}



.modal {
	
	text-align: center;
	

}



.modal img {
	
    -webkit-border-radius: 3px;
	
    -moz-border-radius: 3px;
	
    border-radius: 3px;
	

}



/* Contact Form ------------------------------------------------ */

.contact .title .glyphicon{
	
    background-color: #00c60f;
	

}



.contact ul li:hover {
	
    padding-left: 27px;
	

}



form {
	
    margin-left: 9px;
	

}



.contact-on {
	
    position: fixed;
	
    bottom: 50px;
	
    background: #202020;
	
    height: auto;
	
    width: 100%;
	
    padding-top: 35px;
	
    padding-bottom: 25px;
	
    z-index: 999;
	
    display: none;
	

}



.form-control {
	
    display: block;
	
    width: 100%;
	
    height: 35px;
	
    padding: 6px 15px;
	
    font-size: 12px;
	
    color: #000;
	
    background-color: rgba(255, 255, 255, 0.75);
	
    background-image: none;
	
    border: 0;
	
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	
    -webkit-border-radius: 3px;
	
    -moz-border-radius: 3px;
	
    border-radius: 3px;
	
    -webkit-box-shadow: none;
	
    -moz-box-shadow: none;
	
    box-shadow: none;
	

}



.form-control:focus {
	
    border: 0;
	
    background-color: #fff;
	
    color: #000;
	

}



textarea.form-control {
	
    height: 85px;
	
    resize: none;
	

}



.input-group-addon {
	
    color: #000;
	
    background-color: rgba(0, 0, 0, 0.05);
	
    border: 0;
	
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	
    -webkit-border-radius: 3px;
	
    -moz-border-radius: 3px;
	
    border-radius: 3px;
	

}



form .glyphicon {
	
    opacity: .25;
	

}



.btn-success {
	
    font-size: 12px;
	
    color: #000;
	
    background-color: rgba(255, 255, 255, 0.5);
	
    border-color: rgba(0, 0, 0, 0.1);
	
    -webkit-border-radius: 3px;
	
    -moz-border-radius: 3px;
	
    border-radius: 3px;
	
    -webkit-transition: all .3s ease;
	
    -moz-transition: all .3s ease;
	
    transition: all .3s ease;
	

}



.btn .glyphicon {
	
    margin-right: 7px;
	
    opacity: 1;
	

}



.btn-success:hover, 
.btn-success:focus, 
.btn-success:active, 
.btn-success.active {
	
    color: #fff;
	
    background-color: #15b900;
	
    border-color: rgba(0, 0, 0, 0.1);
	

}



/* Up ------------------------------------------------ */

.contact .title.up .glyphicon{
	
    background-color: #ffad00;
	

}



.up {
	
	margin-bottom: 100px;
	
    cursor: pointer;
	

}



/* Settings ------------------------------------------------ */

.settings {
	
    background-color: rgba(0, 0, 0, 0.75);
	
    position: fixed;
	
	top: 41px;
	
    left: -200px;
	
    width: 200px;
	
    height: 120px;
	
    color: #fff;
	
    z-index: 1000;
	
    -webkit-transition: all .3s ease;
	
    -moz-transition: all .3s ease;
	
    transition: all .3s ease;
	

}



.settings:hover {
	
    left: 0;
	

}



.settings .glyphicon {
	
    background-color: rgba(0, 0, 0, 0.75);
	
    position: relative;
	
    top: 0;
	
    left: 100%;
	
    padding: 12px;
	
    border-radius: 0 3px 3px 0;
	

}



.settings .btn {
	
    display: block;
	
    border: 0;
	
    color: #fff;
	
    border-radius: 0;
	
    margin: 0 20px;
	
    font-size: 13px;
	

}



.settings .btn:hover {
	
    background-color: #fff;
	
    color: #000;
	

}



.settings .btn.active {
	
    background-color: #0066ff;
	
    color: #fff;
	
    -webkit-box-shadow: none;
	
    -moz-box-shadow: none;
	
    box-shadow: none;
	

}