:root {
  --main-txt-color: #222;
  --home-txt-color: #cdf6cd;

  --menu-bg-color: rgba(34,34,34,.9);
  --menu-bg-coprente-color: rgba(34,34,34,1);
  --menu-txt-color: rgba(205,246,205,.6);
  --menu-txt-hover-color: rgba(205,246,205,1);

  
  --home-btn-color: #cdf6cd;
  
  --portfolio-btn-bg-color: rgba(34,34,34,.9);
  --portfolio-btn-txt-color: rgba(205,246,205,1);
  --portfolio-timeline-bullet-color: rgba(205,246,205,1);
  --portfolio-link-under-color: #cdf6cd;
  --portfolio-link-bg-color: #cdf6cd;

  --skillbar-bg-color: #222;
  --skillbar-text-color: #cdf6cd;
  --skillbar-bar-color: #cdf6cd;

  --main-padding: 15px;
}

/*
#div1esempio {
  background-color: var(--menu-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
*/



*{outline:none !important;}
body {padding-top: 0px; font-family: 'Roboto', sans-serif;  color:var(--main-txt-color);font-weight: 300; background: #fff; font-size: 16px;}
body.home {background: #000 url(../img/background.jpg) center center no-repeat;background-size: cover;font-weight: 400;}


@font-face{font-family:FontAwesome;
    src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0);
    src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0) format('embedded-opentype'),
    url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0) format('woff'),
    url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0) format('truetype'),
    url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular) format('svg');
    font-weight:400;
    font-style:normal
}

.site-sidebar {background-color: var(--menu-bg-color); padding: 0;}
.site-sidebar .layer {padding-top: 40px;height: 100%}

.portfolio .site-sidebar,
.competenze .site-sidebar,
.contatti .site-sidebar
{background: #000 url(../img/background.jpg) center center no-repeat;background-size: cover;}

.portfolio .site-sidebar .layer,
.competenze .site-sidebar .layer,
.contatti .site-sidebar .layer
{background-color: var(--menu-bg-color);}


.site-sidebar {top: 0;bottom: 0;left: 0;position: fixed;z-index: 2;font-size: 14px;color: #CDF6CD;text-align: left;/*background: #222;*/}
.site-sidebar{overflow:hidden}
.site-sidebar .block .block-title {font-size: 11px;font-weight: 300;color: var(--menu-txt-color);margin-bottom: 15px;}
.site-sidebar .block-social {font-size: 22px;}
.site-sidebar .avatar {width: 152px;height: 152px;border-radius: 50%;display: inherit;margin: 0 auto 20px auto; }
.site-sidebar .link-avatar {display: inherit;}
.block-title a, .social-icons.social-icons a {color: var(--menu-txt-color);}
.block-title a:hover,.social-icons.social-icons a:hover{color:var(--menu-txt-hover-color);}

h1 {font-size: 1.25rem;font-weight: 500;}
h2 {font-size: 1rem;font-weight: 100;}
a h1, a h2{color: var(--home-txt-color); opacity: 1}
strong {font-weight: 500;}

.main-navigation, .person .person-content .person-title, .site-sidebar .block .block-title, h1, h2 {text-transform: uppercase;}

a {text-decoration: none;}
a:hover{text-decoration:none}

.fa {font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

.main-navigation {margin: 45px -40px;line-height: 30px;position: relative;}
.main-navigation ul, .main-navigation ul>li {margin: 0;padding: 0;}
.main-navigation ul>li {display: block;}
.main-navigation ul li {position: relative;padding: 0 40px;}
.main-navigation a {color: var(--menu-txt-color);display: block;}
.main-navigation ul li a:hover,.main-navigation ul li.current a{color: #cdf6cd;color: var(--menu-txt-hover-color);}
.main-navigation a:focus,.main-navigation a:hover{color: #cdf6cd;color: var(--menu-txt-hover-color);}


.main-navigation .navigation-extend-bar {font-size: 18px;border: 1px solid rgba(255,255,255,.2);border-width: 1px 0;padding: 0 40px;display: none;}
.main-navigation .navigation-extend-bar .navigation-extend-button {width: 50%;}
.main-navigation .navigation-extend-bar a {display: inline-block;}
.main-navigation .navigation-extend-bar .social-icons, .pull-left {float: left;}
/*.dl-vertical dd, .dl-vertical dt, .main-navigation .navigation-extend-bar .social-icons, .pull-left {float: left;}*/



@media screen and (min-width:992px){
    .main-navigation ul li.current:after{content:" ";display:block;position:absolute;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:8px solid #fff;bottom:6px;left:auto;right:0}
    .main-navigation .current a:after,.main-navigation a:hover:after{content:" \f105 ";padding-left:3px;font-family:FontAwesome}
}

@media screen and (max-width: 991px) {
    .portfolio .site-sidebar .layer,.competenze .site-sidebar .layer,.contatti .site-sidebar .layer{background-color: var(--menu-bg-coprente-color);}

    .site-sidebar {top: auto;bottom: auto;left: auto;right: auto;position: relative;width: auto;/*padding-top: 40px;*/padding-bottom: 0;}
    .site-sidebar .site-sidebar-inner {overflow: initial;height: auto;padding: 0 40px;}
    .home .site-sidebar .avatar {display: none;}


    .block-blog, .block-social {display: none;}

    .main-navigation {font-size: 14px;text-transform: uppercase;line-height: 50px;text-align: right;margin: 20px -40px 0;}
    .main-navigation ul li {padding: 0 40px;}   

    .main-navigation .navigation-extend-bar {display: block;}
    .main-navigation .navigation-extendable {height: 0;-webkit-transition: height .5s;transition: height .5s;}
    .main-navigation.extended .navigation-extendable{height:220px/*height:300px*/}
}


.home .container-fluid, .home .row { height: 100vh; overflow: scroll;}
.home.site-main {height: 100%;display: table;background: transparent;}
/*.home .site-sidebar {background-color: var(--menu-bg-color);}*/
.home .home-section {display: table-cell;height: 100%;vertical-align: middle;}
.home .home-section p {font-size: 2rem;font-weight: 300;color: #cdf6cd;/*text-shadow: 1px 1px 2px rgba(0,0,0,.6);*/text-shadow: 2px 2px 7px rgba(0,0,0,.9);}
.home .home-section p span {font-size: 3rem;font-weight: 500;}
.home .home-section .home-buttons .button {background: rgba(0,0,0,.3);color:var(--home-btn-color); -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;text-transform: uppercase;font-weight: 300;text-decoration: none;opacity: .8;/*box-shadow: 1px 1px 2px rgba(0,0,0,.47);*/box-shadow: 0px 0px 5px rgba(0,0,0,.9);text-shadow: 2px 2px 7px rgba(0,0,0,.9); margin-bottom: 1em;}
.home-section .home-buttons .button:active,.home-section .home-buttons .button:focus,.home-section .home-buttons .button:hover{opacity:1}
.home-section .home-buttons {margin-top: 2em;font-size: 1.5em;-webkit-animation-name: fadein;animation-name: fadein;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: 1;animation-iteration-count: 1;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}

.button.button-outline {border-width: 1px;border-style: solid;}
.button {padding: .4em .8em;line-height: 1;margin-right: 1em;}
.button, .icon, .tech-icon {display: inline-block;}
.button.button-icon {padding: 0;margin-right: .2em;}

@media screen and (max-width: 991px) {
    .home .home-section p {font-size: 1.8rem;}
    .home .home-section p span {font-size: 2.4rem;}
    .home-section .home-buttons {font-size: 20px;}

    .home.site-main {height: calc(100% - 163px);}
}
@media screen and (max-width: 767px) {
    .home .home-section p {font-size: 1.5rem;}
    .home .home-section p span {font-size: 2rem;}
    .home-section .home-buttons {font-size: 18px;}
}


.site-main {background: #cccccc;}
.site-main {margin-left: 25%;}

@media screen and (max-width: 1199px) {
    .site-main {margin-left: 33.333333%;}
}

@media screen and (max-width: 991px) {
    .site-main {margin-left: 0;}
}



/* pagine interne */
.main-section {padding: 50px;}
.main-section p a {color:var(--main-txt-color);box-shadow: inset 0 0 0 0 #fff, inset 0 -2px 0 0 var(--portfolio-link-under-color); }
.main-section p a:hover {color:var(--main-txt-color);background-color: var(--portfolio-link-bg-color);}
.main-title {line-height: 1;margin-bottom: 15px; font-size: 36px;}


.timeline{font-size:16px;margin-left:-50px}

@media screen and (max-width:1000px){
    .timeline{margin-left:0}
}
.timeline>ul,.timeline>ul>li{margin:0;padding:0}
.timeline>ul>li{display:block}

@media screen and (max-width:567px){
    .timeline_element{border-top:1px solid #ddd;padding-top:15px!important;margin-top:15px!important}
.timeline_element-date{/*color:#999*/}
}

@media screen and (min-width:568px){
    .timeline_element-date{position:absolute;top:0;bottom:0;left:0;width:130px;padding:30px 15px;/*color:#999;*/text-align:right;font-style:italic;line-height:30px;border-right:1px solid #ddd}
    .timeline_element-date:after{content:" ";position:absolute;top:42.5px;right:-2.5px;display:block;width:5px;height:5px;background-color:var(--portfolio-timeline-bullet-color)}
    .timeline_element:first-child .timeline_element-date{padding-top:0;line-height:1.5;margin-top:10px}
    .timeline_element:first-child .timeline_element-date .timeline_element-date-text{margin-top:-10px;display:block}
    .timeline_element:first-child .timeline_element-date:after{top:0}
}
.timeline_element-contents{padding:30px 0 0 0;margin-left:160px}

@media screen and (max-width:567px){
    .timeline_element-contents{margin-left:0;padding:15px 0 0}
    .timeline.talks-timeline .timeline_element{border-top:1px solid #ddd}
}

@media screen and (min-width:568px){
    .timeline_element+.timeline_element .timeline_element-contents{border-top:1px solid #ddd}
    .timeline.portfolio-timeline .timeline_element:first-child .timeline_element-contents,.timeline_element:first-child .timeline_element-contents{padding-top:0}
    .timeline.portfolio-timeline .timeline_element:first-child .timeline_element-date{padding-top:0;line-height:1.5;margin-top:10px}
    .timeline.portfolio-timeline .timeline_element:first-child .timeline_element-date .timeline_element-date-text{margin-top:-10px;display:block}
    .timeline.portfolio-timeline .timeline_element:first-child .timeline_element-date:after{top:0}
}
.timeline.talks-timeline .timeline_element-date{width:150px}
.timeline.talks-timeline .timeline_element-contents{margin-left:180px}

@media screen and (max-width:567px){
    .timeline.talks-timeline .timeline_element-date{display:block;width:auto;position:static;padding:0;border:none}
    .timeline.talks-timeline .timeline_element-date:after{display:none}
    .timeline.talks-timeline .timeline_element-contents{margin-left:0;border:none;padding-top:.5em!important;padding-bottom:1em}
    }@-webkit-keyframes fadein{0%,50%{opacity:0}to{opacity:1}
    }@keyframes fadein{0%,50%{opacity:0}to{opacity:1}
    }@-webkit-keyframes slidein{from{margin-left:-30%}to{margin-left:0}
    }@keyframes slidein{from{margin-left:-30%}to{margin-left:0}
}

.portfolio-timeline .project-link{color:inherit}
.portfolio-timeline .project-link:hover{color:#BB1E1E}
.portfolio-timeline .project-text{width:50%;float:left; padding-bottom:30px;}

.portfolio-timeline .timeline_element.timeline_element--now .project-text{width:auto;float:none}
.portfolio-timeline .project-image{width:50%;padding-left:30px;text-align:center;float:left}

@media screen and (max-width:1000px){
    .portfolio-timeline .project-image{width:auto;float:none;margin-top:30px;padding-left:0}
}
.portfolio-timeline .project-image img{max-width:100%;max-height:568px}
.portfolio-timeline .project-description:not(:first-child){margin-top:15px}
.portfolio-timeline .project-description:not(:last-child){margin-bottom:15px}
.portfolio-timeline .project-description a {color:var(--main-txt-color);box-shadow: inset 0 0 0 0 #fff, inset 0 -2px 0 0 var(--portfolio-link-under-color); }
.portfolio-timeline .project-description a:hover {color:var(--main-txt-color);background-color: var(--portfolio-link-bg-color);}
.portfolio-timeline .project-technologies{margin-top:20px}


.timeline_element {position: relative;}

.tech-tags>li{display:block}
.tech-tags li{display:inline-block}
.tech-tags span{display:inline-block;color:var(--portfolio-btn-txt-color);padding:4px 10px;font-size:13px;text-transform:uppercase;}
.tech-tags span,.tech-tags span:hover,.tech-tags span:active{background-color:var(--portfolio-btn-bg-color);}

.technologies-title {font-size: 12px;text-transform: uppercase;padding-bottom: .5em;}
.tech-icons, .tech-icons>li, .tech-tags, .tech-tags>li {margin: 0;padding: 0;}
.main-navigation ul, .tech-icons, .tech-tags, .timeline>ul {list-style: none;}

.cv-header-meta, .cv-section, .cv-timeline-row, .home-section .home-buttons, .post .post-meta, .row, .tech-icons li, .tech-tags li, .timeline_element, .timeline_element-contents {overflow: hidden;}

.skillbar {background: #eee;}
.skillbar .title{background-color:var(--skillbar-bg-color);color: var(--skillbar-text-color);width: 100px;}
.skillbar .filled{background-color:var(--skillbar-bar-color);}

.skillbar,.skillbar .title{height: 28px;} 
.skillbar .percent, .skillbar .title {font-size: 14px;font-weight: 400;padding: 4px;}

@media screen and (max-width:599px){
    .skillbar .percent {display: none;}
    .skillbar,.skillbar .title{height: 22px;} 
    .skillbar .percent, .skillbar .title {font-size: 13px;font-weight: 500;padding: 1px;}
    .skillbar .title{text-align: left;padding-left: 5px} 

    .skillbar .title{background-color:transparent;/*var(--skillbar-text-color);*/color: var(--skillbar-bg-color);width: 100px;}
    .skillbar .filled{background-color:var(--skillbar-bar-color);}

    .skillbar .filled {width: 0;}
    .skillbar .title {width: 0;}
}


.dl-vertical dd,.dl-vertical dt,.main-navigation .navigation-extend-bar .social-icons,.pull-left{float:left}
.dl-vertical,.site-sidebar{overflow:hidden}
.dl-vertical dt{display:block;clear:both;width:150px;font-weight: 300;}
.dl-vertical dd{display:block;margin:0}
.dl-vertical.dl-long dt{width:350px}

.vcard a {color:var(--main-txt-color);box-shadow: inset 0 0 0 0 #fff, inset 0 -2px 0 0 var(--portfolio-link-under-color); }
.vcard a:hover {color:var(--main-txt-color);background-color: var(--portfolio-link-bg-color);}