@import url("reset.css");


/* =============================================================================
   Structure Styles
   ========================================================================== */

body {
    margin: 0; 
    font-size: 1em; 
    line-height: 1.4; 
    font-family: 'Open Sans', sans-serif; 
    background-image:url('../img/bg-border.jpg'), url('../img/bg-border.jpg');
    background-position:left, right, 0px 0px; 
    background-attachment:fixed;
    background-repeat:repeat-y, repeat-y, no-repeat; 
    padding:10px 30px 10px 30px; 
}

section > h2 {
    margin-top: 20px;
}

#wrapper {
    width: 970px;
    margin: auto;
}
.m10 {
    margin-top: 10px;
}
.m30 {
    margin-top: 30px;
}
.m60 {
    margin-top: 60px;
}
.m90 {
    margin-top: 90px;
}

.div-content {
    float: left;
    width: 100%;
	clear:both
}
.div-content1 {
    float: left;
    width: 33%;
	}
	
	.div-content2 {
    float: left;
    width: 33%;
	}
		.div-content3 {
    float: left;
    width: 33%;
	}

.div-content h4 {
    margin-top: 25px;
}

.div-content .page-desc {
    text-align: justify;
}

.p-arrow {
    float: left;
    width: 100%;
    padding-top: 80px;
}
.a-arrow {
    opacity: 0.3;
    z-index: -99;
    height: 65px;
    font-size: 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    width: 100px;
    margin: auto;
    letter-spacing: 2px;
    font-weight: bold;
    color: #8C1B1E !important;
    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}
.a-arrow:hover {
    opacity: 1;
    text-decoration: none;
}
.a-arrow:hover img {
    margin-top: 5px;
}
.a-arrow img {
    transition: margin-top 0.3s ease-in-out;
    -moz-transition: margin-top 0.3s ease-in-out;
    -webkit-transition: margin-top 0.3s ease-in-out;
    -o-transition: margin-top 0.3s ease-in-out;
}
.div-content-row {
    float: left;
    width: 100%;
}

.switcher{
    position:fixed;
    left: -60px;
    top: 190px;

    transition: left 0.3s ease-in-out;
    -moz-transition: left 0.3s ease-in-out;
    -webkit-transition: left 0.3s ease-in-out;
    -o-transition: left 0.3s ease-in-out;
}

.switcher ul{
    float:left;
    width:50px;
    padding:5px;
    background-color:#1d1d1d;
}

.switcher ul li{
    margin-bottom:3px;
}

.switcher ul li a{
    display:block;
    width:100%;
    height:25px;
    float:left;
    opacity:0.7;
    margin-bottom:5px;
    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}

.switcher ul li a:hover{
    opacity:1;
}

.switcher ul li .red{background-color:#8C1B1E;}
.switcher ul li .blue{background-color:#0083CE;}
.switcher ul li .green{background-color:#3B9B00;}
.switcher ul li .violet{background-color:#B2008A;}



.switcher div{
    float:right;
    padding:3px;
    background-color:#1d1d1d;
    cursor:pointer;
}

.switcher div img{
    width:25px;
}


/* =============================================================================
   Structure Styles
   ========================================================================== */





/* =============================================================================
   Header Styles
   ========================================================================== */

header {
    position: fixed;
    background-color: White;
    padding: 10px 0px 0px 0px;
    margin-top: -10px;
    width: 970px;
    z-index: 9999;
    border-bottom: 1px solid #e1e1e1;
}
header .div-logo {
    float: left;
    height: 90px;
}
header .div-logo h5 {
    font-weight: 100;
    font-style: italic;
    font-size: 11px;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    line-height: 1;
    margin: 0;
}
header .div-logo h5 a {
    color: #1d1d1d;
    text-decoration: none;
}
header .div-logo h5 a:hover {
    text-decoration: underline;
    color: #8C1B1E;
}

header .div-mainmenu {
    float: right;
}
header .div-mainmenu ul {
    float: right;
    list-style-type: none;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    margin: 0;
    padding: 0;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
    margin-top: 30px;
}
header .div-mainmenu ul li {
    float: left;
    margin-right: 20px;
    height: 60px;
}
header .div-mainmenu ul li a {
    color: #8C1B1E;
    font-style: italic;
    text-decoration: none;
    padding: 0 10px 0 10px;
    height: 100%;
    display: block;
}
header .div-mainmenu ul li a:hover {
    border-bottom: 1px solid #8C1B1E;
}
header .div-mainmenu ul li a.current {
    border-bottom: 1px solid #8C1B1E;
    font-weight: bold;
}


#nav ul {
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 150px;
    top: 69px;
    left: 821px;
    z-index: 1;
    background: white;
    border: 1px solid #e1e1e1;
    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}



#nav ul li {
    width: 100%;
    float: left;
    height: 25px;
    padding-top: 5px;
    border-bottom: 1px solid #E1E1E1;
}
#nav ul li:hover a {
    border-bottom: 0;
}
#nav ul li a {
    text-decoration: none;
}
#nav ul li a:hover {
    text-decoration: none !important;
    font-weight: 600;
}



#nav .li-drop:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

/* =============================================================================
   Header Styles
   ========================================================================== */




/* =============================================================================
   Home Styles
   ========================================================================== */
#home {
    padding-top: 60px;
}

.welcome {
    padding-top: 45px;
}


#home .welcome-text {
    width: 970px;
    margin: auto;
    text-align: center;
    padding-top: 45px;
}
#home .welcome-text .row-1 {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 220px;
    letter-spacing: -15px;
    line-height: 1;
    border-bottom: 7px solid #8C1B1E;
}
#home .welcome-text .row-2 {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 78px;
    letter-spacing: -5px;
    line-height: 1;
    text-align: left;
}
#home .welcome-text .row-2 span {
    color: #8C1B1E;
}
#home .welcome-text .row-3 {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 25px;
    letter-spacing: 0px;
    line-height: 1;
    text-align: center;
}
#home .welcome-text .row-3 span {
    color: #8C1B1E;
}
#home .welcome-text .row-5 {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 25px;
    letter-spacing: 0px;
    line-height: 1;
    text-align: center;
    margin-top: 20px;
}
#home .welcome-text .row-6 {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1;
    text-align: center;
    margin-top: -10px;
}
#home .welcome-text .row-6 a {
    color: #8C1B1E;
    font-size: 60px;
    text-decoration: none;
}
#home .welcome-text .row-6 a span {
    font-size: 30px;
}
/* =============================================================================
   Home Styles
   ========================================================================== */




/* =============================================================================
   About Styles
   ========================================================================== */
#about.div-content {
    margin-top: 500px;
}
#about h5 {
    margin-top: -5px;
}
.div-content-row .div-profile {
    width: 18%;
    float: left;
    padding-top: 15px;
}
.div-content-row .div-profile img {
    float: left;
    border: 2px solid White;
    -webkit-box-shadow: 0px 0px 1px #333333;
    -moz-box-shadow: 0px 0px 1px #333333;
    box-shadow: 0px 0px 1px #333333;
    margin-left: 1px;
}
.div-content-row .div-sublinks {
    float: left;
    padding-left: 31px;
    /*background-image: url('../img/social-arrows.png'), url('../img/social-arrows2.png');*/
    background-repeat: no-repeat, no-repeat;
    background-position: 0px 0px, 175px 26px;
    width: 170px;
}
.div-content-row .div-sublinks p {
    font-weight: 900;
    text-transform: uppercase;
}
.div-content-row .div-sublinks p.big {
    font-size: 12px;
}
.div-content-row .div-sublinks p.small {
    font-size: 8px;
    font-weight: bold;
}
.div-content-row .div-sublinks ul {
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 5px 0 0 0;
    width: 165px;
}
.div-content-row .div-sublinks ul li {
    float: left;
    margin-right: 2px;
}
.div-content-row .div-sublinks ul li .btn {
    display: block;
    height: 32px;
    width: 32px;
    background-image: url('../img/social-sprite.png');
    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}
.div-content-row .div-sublinks ul li .btn:hover {
    opacity: 0.7;
}
.div-content-row .div-sublinks ul li .fb {
    background-position: 0px;
}
.div-content-row .div-sublinks ul li .twt {
    background-position: -33px;
}
.div-content-row .div-sublinks ul li .lkdin {
    background-position: -66px;
}
.div-content-row .div-sublinks ul li .drbble {
    background-position: -99px;
}
.div-content-row .div-sublinks ul li .cv {
    background-position: -133px;
}

.div-content-row .div-profile-text {
    width: 82%;
    float: left;
    padding-top: 15px;
    line-height: 1.5;
}
.div-content-row .div-profile-text p {
    padding-left: 15px;
    border-left: 1px solid #8C1B1E;
    text-align: justify;
}

#about .div-content-row .div-work {
    float: left;
    width: 40%;
    margin-right: 20px;
}
#about .div-content-row .div-work h2 {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 14px;
    color: #8C1B1E;
}
#about .div-content-row .div-work ul {
}
#about .div-content-row .div-work ul li {
    margin-bottom: 15px;
    float: left;
    width: 100%;
}
#about .div-content-row .div-work ul li .job {
    font-weight: 900;
    display: block;
    float: left;
    width: 50%;
}
#about .div-content-row .div-work ul li .time {
    font-weight: 400;
    display: block;
    float: right;
    padding: 1px 5px 1px 5px;
    background-color: #8C1B1E;
    color: White;
    font-size: 11px;
}
#about .div-content-row .div-work ul li .desc {
    font-weight: 400;
    margin-top: -5px;
    padding: 0px 0px 8px 0px;
    font-style: italic;
    display: block;
    float: left;
    width: 100%;
}
#about .div-content-row .div-work ul li p {
    padding-left: 10px;
    border-left: 1px solid #8C1B1E;
    float: left;
    text-align: justify;
}

#about .div-content-row .div-skills {
    float: left;
    width: 28%;
    margin-right: 20px;
}
#about .div-content-row .div-skills h2 {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 14px;
    color: #8C1B1E;
}
#about .div-content-row .div-skills .ul-title {
    font-weight: 900;
    float: left;
    width: 100%;
}
#about .div-content-row .div-skills ul {
    float: left;
    width: 100%;
    padding-bottom: 10px;
}
#about .div-content-row .div-skills ul li {
    width: 100%;
    height: 20px;
    float: left;
    background-color: #e8e8e8;
    margin: 2px 0px 2px 0px;
}
#about .div-content-row .div-skills ul li span {
    text-indent: 1em;
    display: block;
    width: 50%;
    height: 100%;
    line-height: 2;
    background-color: #8C1B1E;
    color: White;
    text-transform: uppercase;
    font-size: 11px;
}

#about .div-content-row .div-education {
    float: left;
    width: 27%;
}
#about .div-content-row .div-education h2 {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 14px;
    color: #8C1B1E;
}
#about .div-content-row .div-education ul {
}
#about .div-content-row .div-education ul li {
    margin-bottom: 15px;
    float: left;
    width: 100%;
}
#about .div-content-row .div-education ul li .job {
    font-weight: 900;
    display: block;
    float: left;
    width: 50%;
}
#about .div-content-row .div-education ul li .time {
    font-weight: 400;
    display: block;
    float: right;
    padding: 1px 5px 1px 5px;
    background-color: #8C1B1E;
    color: White;
    font-size: 11px;
}
#about .div-content-row .div-education ul li .desc {
    font-weight: 400;
    margin-top: -1px;
    padding: 0px 0px 8px 0px;
    font-style: italic;
    display: block;
    float: left;
    width: 100%;
}
#about .div-content-row .div-education ul li p {
    padding-left: 10px;
    border-left: 1px solid #8C1B1E;
    float: left;
    text-align: justify;
}
/* =============================================================================
   About Styles
   ========================================================================== */



/* =============================================================================
   Services Styles
   ========================================================================== */

.serv-list {
    line-height: 2.3;
}

#services.div-content {
    margin-top: 200px;
}
#services .div-content-row .div-workdesc {
    float: left;
    width: 27%;
    height: 190px;
}
#services .div-content-row .div-workdesc h5 {
    padding-top: 15px;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: 1px solid #8C1B1E;
    padding-bottom: 5px;
}
#services .div-content-row .div-workdesc h5 span {
    background-color: #8C1B1E;
    color: White;
    padding: 0 2px 0 2px;
}
#services .div-content-row .div-workdesc p {
    text-align: justify;
    padding-bottom: 10px;
}
#services .div-content-row .div-workdesc ul {
    list-style-type: square;
    list-style-position: inside;
    padding-top: 5px;
    color: #8C1B1E;
}
#services .div-content-row .div-workdesc ul li span {
    color: #1D1D1D;
}
#services .div-content-row .mini-row {
    width: 960px;
    height: 1px;
    background-color: #8C1B1E;
    float: left;
    margin-top: 205px;
    position: absolute;
    z-index: 99;
}

#services .div-content-row .div-workballs {
    float: right;
    width: 560px;
    margin-left: 40px;
}
#services .div-content-row .div-workballs ul {
    float: left;
}
#services .div-content-row .div-workballs ul li {
    float: left;
    color: White;
    text-transform: uppercase;
    font-weight: 900;
    padding-top: 40px;
    text-align: center;
    width: 100px;
    height: 60px;
    cursor: pointer;
    background-color: #1d1d1d;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    transition: background-color 0.3s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out;
    -webkit-transition: background-color 0.3s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out;
}

#services .div-content-row .div-workballs ul li.hovereffect {
    background-color: #8C1B1E;
}

#services .div-content-row .div-workballs ul li.arrow {
    margin-top: 40px;
    margin-right: 5px;
    width: 10px;
    height: 12px;
    padding: 0;
    background-color: Transparent;
    background-image: url('../img/services-arrows.png');
    background-position: -14px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.ul-services {
    width: 100%;
    position: relative;
    float: left;
}
.ul-services li {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: 56px;
}
.ul-services li:first-child {
    margin-left: 0px;
}
.ul-services li a {
    display: block;
    overflow: hidden;
    background: #fff;
    text-align: center;
    height: 100%;
    width: 100%;
    position: relative;
    transition: background-color 0.3s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out;
    -webkit-transition: background-color 0.3s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out;
}
.ul-services li a:hover {
    background-color: #8C1B1E;
}
.ul-services li a h2 {
    color: #1D1D1D;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    position: absolute;
    width: 100%;
    top: 140px;
    left: 0px;
    text-align: center;
}
.ul-services li a h3 {
    font-size: 12px;
    color: #1D1D1D;
    position: absolute;
    top: 170px;
    left: 0px;
    width: 90%;
    padding: 10px;
    text-align: justify;
    font-weight: normal;
}
.ul-services-img {
    width: 100px;
    height: 100px;
    position: absolute;
    background-position: top left;
    background-repeat: no-repeat;
    background-color: transparent;
    left: 50px;
    top: 30px;
}
.ul-services-img-web {
    background-image: url(../img/web.png);
}
.ul-services-img-mobile {
    background-image: url(../img/mobile.png);
}
.ul-services-img-consulenza {
    background-image: url(../img/consulenza.png);
}

.ul-services-img-map {
    background-image: url(../img/map.png);
}

.ul-services-img-lavori {
    background-image: url(../img/lavori.png);
}

.ul-services-img-design {
    background-image: url(../img/design.png);
}
.ul-services-img-digital {
    background-image: url(../img/digital.png);
}
/* =============================================================================
   Services Styles
   ========================================================================== */



/* =============================================================================
   Portfolio Styles
   ========================================================================== */
#portfolio {
}
#portfolio.div-content {
    margin-top: 500px;
}
#portfolio h4 {
    font-size: 12px;
    letter-spacing: 1px;
    padding-right: 20px;
    float: left;
    margin: 0;
    margin-top: 30px;
}

#portfolio .filter {
    float: left;
    margin-top: 30px;
}
#portfolio .filter li {
    float: left;
    margin-right: 10px;
}
#portfolio .filter a {
    text-decoration: none;
    color: #d1d1d1;
    font-style: italic;
    transition: color 0.3s ease-in-out;
    -moz-transition: color 0.3s ease-in-out;
    -webkit-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
}
#portfolio .filter a:hover {
    text-decoration: underline;
    color: #8C1B1E;
}
#portfolio .filter li.current a {
    text-decoration: underline;
    color: #8C1B1E;
}

#portfolio .portfolio {
    width: 100%;
    float: left;
    margin-top: 20px;
}
#portfolio .portfolio li {
    float: left;
    margin: 5px;
    width: 232px;
    height: 132px;
}
#portfolio .portfolio .li-img {
    width: 100%;
    height: 100%;
}

#portfolio .lb-album li > a, #portfolio .lb-album li > a img {
    display: block;
}
#portfolio .lb-album li > a {
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}
#portfolio .lb-album li > a span {
    position: absolute;
    width: 232px;
    height: 80px;
    top: 0px;
    text-decoration: none;
    left: 0px;
    text-align: center;
    line-height: 1;
    padding-top: 52px;
    color: white;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    opacity: 0;
    background-image: url('../img/portfolio-hover-effect.png');
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    -ms-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
#portfolio .lb-album li > a span small {
    text-transform: capitalize;
    font-style: italic;
    font-weight: 400;
}
#portfolio .lb-album li > a:hover span {
    opacity: 1;
    filter: alpha(opacity=99); /* internet explorer */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
#portfolio .lb-overlay {
    width: 0px;
    height: 0px;
    position: fixed;
    overflow: hidden;
    left: 0px;
    top: 0px;
    padding: 0px;
    z-index: 999999;
    text-align: center; /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjk1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC45NSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.95) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.95)), color-stop(100%,rgba(255,255,255,0.95))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.95) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.95) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.95) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.95) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2ffffff', endColorstr='#f2ffffff',GradientType=0 ); /* IE6-8 */
}

#portfolio .lb-overlay-wrapper {
    width: 970px !important;
    margin: auto !important;
}
#portfolio .lb-overlay-wrapper div {
    width: 362px;
    float: left;
}
#portfolio .lb-overlay > div {
    position: relative;
    width: 550px;
    margin: 10px auto 0px auto;
    -webkit-transition: opacity 0.1s linear 1.3s;
    -moz-transition: opacity 0.1s linear 1.3s;
    -o-transition: opacity 0.1s linear 1.3s;
    -ms-transition: opacity 0.1s linear 0.5s;
    transition: opacity 0.1s linear 0.5s;
}
#portfolio .lb-overlay div h3, #portfolio .lb-overlay div p {
    padding: 0px 20px;
    width: 330px;
    margin-top: 30px;
}
#portfolio .lb-overlay div h3 {
    font-size: 28px;
    width: 330px;
    font-weight: 900;
    float: left;
    text-align: left;
    color: #8C1B1E;
    text-transform: capitalize;
    line-height: 18px;
    margin-top: 0;
}
#portfolio .lb-overlay div h3 small {
    font-size: 14px;
    font-weight: 200;
    font-style: italic;
}
#portfolio .lb-overlay div h3 span, #portfolio .lb-overlay div p {
    margin-left: 20px;
    border-left: 1px solid #8C1B1E;
    text-align: justify;
    float: left;
    width: 319px;
    padding-left: 10px;
    font-size: 12px;
}
#portfolio .lb-overlay div h3 span {
    display: block;
    line-height: 6px;
}
#portfolio .lb-overlay div p {
    margin-left: 20px;
    border-left: 1px solid #8C1B1E;
    text-align: justify;
    float: left;
}
#portfolio .lb-overlay a.lb-close {
    background-color: #1D1D1D;
    z-index: 1001;
    color: white;
    position: absolute;
    top: 0;
    right: 5px;
    font-size: 15px;
    line-height: 26px;
    text-align: center;
    overflow: hidden;
    margin-left: -25px;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 8px 0 8px;
}
#portfolio .lb-overlay img {
    max-height: 100%;
    position: relative;
    -webkit-box-shadow: 0px 0px 1px #333;
    -moz-box-shadow: 0px 0px 1px #333333;
    box-shadow: 0px 0px 1px #333;
    border: 1px solid White;
}

#portfolio .lb-overlay:target {
    width: auto;
    height: auto;
    bottom: 0px;
    right: 0px;
    padding: 80px 100px 120px 100px;
}
#portfolio .lb-overlay:target img {
    float: left;
}

#portfolio .lb-overlay:target iframe {
    float: left;
}

#portfolio .lb-overlay:target a.lb-close, #portfolio .lb-overlay:target > div {
    opacity: 1;
    filter: alpha(opacity=99);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
}
#portfolio .lb-overlay .overlay-link {
    float: right;
    padding: 5px;
    margin-right: 15px;
    margin-top: 25px;
}
#portfolio .lb-overlay .overlay-link:hover span {
    color: #8C1B1E;
}
#portfolio .lb-overlay .overlay-link:hover .arrow {
    background-position: 0px;
}


#portfolio .lb-overlay .overlay-link span {
    float: left;
    text-decoration: none;
    color: #1d1d1d;
    font-weight: 600;
    font-style: italic;
    transition: color 0.3s ease-in-out;
    -moz-transition: color 0.3s ease-in-out;
    -webkit-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
}
#portfolio .lb-overlay .overlay-link .arrow {
    float: left;
    width: 10px;
    height: 12px;
    padding: 0;
    background-color: transparent;
    background-image: url('../img/services-arrows.png');
    background-position: -14px;
    transition: background-position 0.3s ease-in-out;
    -moz-transition: background-position 0.3s ease-in-out;
    -webkit-transition: background-position 0.3s ease-in-out;
    -o-transition: background-position 0.3s ease-in-out;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-top: 4px;
}
#portfolio x:-o-prefocus, .lb-overlay img {
    height: 100%;
}

#portfolio .ul-clients {
    float: left;
    width: 100%;
}
#portfolio .ul-clients li {
    float: left;
    opacity: 0.2;
    margin: 5px;
    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}
#portfolio .ul-clients li:hover {
    opacity: 1;
}
#portfolio .ul-clients li a img {
}

/* =============================================================================
   Portfolio Styles
   ========================================================================== */






/* =============================================================================
   Contact Styles
   ========================================================================== */

#contact.div-content {
    margin-top: 200px;
}


#map_canvas {
    height: 385px;
    width: 100%;
}


#contact .contact-info {
    float: left;
    width: 285px;
}
#contact .contact-info p {
    margin: 0;
}
#contact .contact-info h4 {
    margin-bottom: 10px;
}




#contact .contact-form {
    float: right;
    width: 580px;
}
#contact p {
    text-align: justify;
    margin: 10px 0px 10px 0px;
    line-height: 1.5;
}
#contact .contact-form h4 {
    margin-bottom: 10px;
}
#contact .contact-form label {
    display: block;
    margin: 10px 0px 0px 0px;
}
#contact .contact-form li:first-child label {
    margin: 0;
}
#contact .contact-form input[type="text"], input[type="email"], input[type="password"] {
    width: 300px;
}
#contact .contact-form input[name="subject"] {
    width: 96%;
}

#contact .contact-form textarea {
    width: 96%;
    height: 100px;
    margin-top: 10px;
}

#contact .contact-form input[type="submit"] {
    border: 0;
    float: right;
    background-color: #1D1D1D;
    padding: 5px 20px 5px 20px;
    color: white;
    margin-top: 20px;
}


#contact .contact-form input[type="submit"]:hover {
    transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    -webkit-transition: background 0.3s ease-in-out;
    -o-transition: background 0.3s ease-in-out;
    background: #353535;
}

.contact-social {
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 5px 0 0 0;
}
.contact-social li {
    float: left;
    margin-right: 2px;
}
.contact-social li .btn {
    display: block;
    height: 32px;
    width: 32px;
    background-image: url('../img/social-sprite.png');
    transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}
.contact-social li .btn:hover {
    opacity: 0.7;
}
.contact-social li .fb {
    background-position: 0px;
}
.contact-social li .twt {
    background-position: -33px;
}
.contact-social li .lkdin {
    background-position: -66px;
}
.contact-social li .drbble {
    background-position: -99px;
}
.contact-social li .cv {
    background-position: -133px;
}

/* =============================================================================
   Contact Styles
   ========================================================================== */




/* =============================================================================
   Footer Styles
   ========================================================================== */

footer {
    float: left;
    padding: 5px 10px 5px 10px;
    width: 98%;
    margin-top: 160px;
    color: #818181;
    border-top: 1px solid #E1E1E1;
    padding-top: 20px;
    padding-bottom: 20px;
}
footer .footer-info {
    width: 50%;
    float: left;
}


footer .footer-info a {
    color: #818181;
    transition: color 0.3s ease-in-out;
    -moz-transition: color 0.3s ease-in-out;
    -webkit-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
}
footer .footer-info a:hover {
    color: #8C1B1E;
    text-decoration: none;
}



footer .footer-menu {
    float: right;
}
footer .footer-menu li {
    float: left;
    list-style-type: none;
    margin-left: 10px;
}
footer .footer-menu li a {
    color: #818181;
    text-transform: capitalize;
    transition: color 0.3s ease-in-out;
    -moz-transition: color 0.3s ease-in-out;
    -webkit-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
}
footer .footer-menu li a:hover {
    color: #8C1B1E;
    text-decoration: none;
}

/* =============================================================================
   Footer Styles
   ========================================================================== */


@media only screen and (max-width: 1024px) {
    #wrapper {
        width: 930px;
    }
    header {
        width: 930px;
    }
}

/* =============================================================================
   Media Queries
   ========================================================================== 

@media only screen and (max-width: 1024px) {
    header {
        width: 930px;
    }
    #wrapper {
        width: 930px;
    }
    .ul-services li {
        width: 190px;
        height: 290px;
    }
    #portfolio .portfolio li {
        width: 222px;
        height: 122px;
    }
    #portfolio .lb-album li > a span {
        width: 222px;
        height: 70px;
    }
    #portfolio .ul-clients li {
        width: 222px;
    }
    #services .div-content-row .mini-row{width:93%;}

    #nav ul {left:790px;}
    #portfolio .lb-overlay:target img{width:50%;}

}


@media only screen and (max-width: 980px) {
    header {
        width:94%;
    }
    #wrapper {
        width: 100%;
    }
    #about .div-content-row .div-profile {
        width: 40%;
    }
  
    .ul-services li {
        width: 178px;
        height: 280px;
    }
    .ul-services-img {
        left: 39px;
    }
    #portfolio .portfolio li {
        width: 211px;
        height: 111px;
    }
    #portfolio .lb-album li > a span {
        width: 211px;
        height: 66px;
        padding-top:45px;
    }
    #portfolio .ul-clients li{width:211px;}
    
    #nav ul {left:747px;}
        #portfolio .lb-overlay:target img{width:45%;}
}



@media only screen and (max-width: 768px) {
#wrapper{width:100%;}
header{width:92%;}
header .div-mainmenu{float:left; margin-left:112px;}
header .div-mainmenu ul li{height:25px;}
header .div-logo{width:100%; text-align:center;}
header .div-logo h5{margin-top:5px;}
#about .div-content-row .div-profile img{width:60px;}
.ul-services li{margin-left:10px;width: 160px;height: 260px;}
.ul-services li a h2{font-size:13px;}
#services .div-content-row .div-workballs{width:465px; margin-left:20px;}
#services .div-content-row .div-workballs ul li{width:80px; height:47px; font-size:11px; padding-top:35px;}
#portfolio .ul-clients li {width:150px;}
#portfolio .ul-clients li img{width:150px;}
#contact .contact-info{width:230px;}
#contact .contact-form{width:400px;}
#about .div-content-row .div-education{width:26%;}
#nav ul {
left: 0px;
top: 115px;
width: 100%;
}
    #portfolio .lb-overlay:target img{width:24%;}
.ul-services-img {
left: 30px;
}

}

@media only screen and (max-width: 460px) {


header .div-mainmenu #nav {
    margin-top: 0 !important;
}

body{padding:0px 12px 0px 12px;}
header{width:95%;}
header .div-mainmenu{margin-left:10px;}
header .div-mainmenu ul li{margin-right:8px;}

#home .welcome-text{width:100%;}

#home .welcome-text .row-1{font-size:150px;}
#home .welcome-text .row-2{font-size:53px;}
#home .welcome-text .row-3{font-size:21px;}
#home .welcome-text .row-6{margin-top:-5px;}
#home .welcome-text .row-6 a{font-size:41px;}



#about .div-content-row .div-profile{width:100%;}
#about .div-content-row .div-profile-text{width:100%;}
#about .div-content-row .div-profile img{width:146px;}

#about .div-content-row .div-work, 
#about .div-content-row .div-skills,
#about .div-content-row .div-education,
#services .div-content-row .div-workdesc,
#services .div-content-row .div-workballs,
#contact .contact-info
{width:100%; margin-top:25px;}
#services .div-content-row .div-workballs ul li{margin-top:5px;}

#services .div-content-row .mini-row{display:none;}
.ul-services li{margin-left:0px; width:50%; margin-top:10px;}

#portfolio .filter{margin-top:0px;}
#portfolio .portfolio li{width:47%;}
#portfolio .lb-album li > a span{width:100%;}

#contact .contact-form {
width: 99%;
float: left;
margin-top:25px;
}
footer .footer-menu{width:50%;}
#nav ul {
left: 0px;
top: 115px;
width: 100%;
}
#portfolio .lb-overlay:target{padding:10px;}

#portfolio .lb-overlay:target img{width: 34%;
margin-left: 20px;
margin-bottom: 10px;}
#portfolio .lb-overlay:target iframe{width: 34%;
margin-left: 20px;
margin-bottom: 10px;}


#portfolio .lb-overlay-wrapper div{float:none;}
#portfolio .lb-overlay div h3{font-size:21px;}
.ul-services-img {
left: 55px;
}


}

@media only screen and (max-width: 320px) {


header .div-mainmenu #nav {
    margin-top: 0 !important;
}

header{width:93%;}
header .div-mainmenu{margin-left:0px;}
header .div-mainmenu ul li{font-size:10px; margin-right:-9px;}

#home .welcome-text .row-1{font-size:140px;}
#home .welcome-text .row-2{font-size:32px; letter-spacing:-2px;}
#home .welcome-text .row-3{font-size:21px; margin-top:10px;}
#home .welcome-text .row-6{margin-top:-5px;}
#home .welcome-text .row-6 a{font-size:26px;}
#about .div-content-row .div-profile img{width:56px;}


#services .div-content-row .div-workballs ul{width:195px;}
.ul-services li{width:100%;}
.ul-services-img{left:83px;}
#portfolio .filter {margin-top: 10px;}
#portfolio .portfolio{width:93%; margin-left:17px;}
#portfolio .portfolio li {width: 212px;}

#portfolio .ul-clients {width: 83%;margin-left: 45px;}

#contact .contact-form input[type="text"], input[type="email"], input[type="password"] {width:240px;}

#portfolio .lb-overlay-wrapper{width:100% !important;}

#portfolio .lb-overlay div p{width:230px;}
#portfolio .lb-overlay div h3{width:230px;}
#portfolio .lb-overlay .overlay-link{float:left; margin-left:20px;}


#about .div-content-row .div-sublinks{width:168px;}


}



*/









/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir {
    display: block;
    border: 0;
    text-indent: -999em;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
}
.ir br {
    display: none;
}
.hidden {
    display: none !important;
    visibility: hidden;
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
.invisible {
    visibility: hidden;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}

/* =============================================================================
   Print Styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        filter: none !important;
        -ms-filter: none !important;
    }
    /* Black prints faster: h5bp.com/s */
    a, a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
        content: "";
    }
    /* Don't show links for images, or javascript/internal links */
    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    thead {
        display: table-header-group;
    }
    /* h5bp.com/t */
    tr, img {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
    }
    p, h2, h3 {
        orphans: 3;
    }
    h2, h3 {
        page-break-after: avoid;
    }
}




/*MADO*/
.spacer { height: 20px;}


.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

.fancybox-margin {
    z-index: 1000;
}

#project h4 {
    margin-top: 50px;
    margin-bottom: 25px;
}

#project h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #818181;
    font-size: 16px;
	}