body {padding-top: 60px; font-family: 'Open Sans', Arial, Verdana; font-size: 12px; line-height: 150%; background: #fafafa; color: #666666;}
a {text-decoration: none; color: #666666;}
a:hover {text-decoration: underline;}
.left {float: left;} .right {float: right;}

/* Layout */
.wrap {width: 950px; margin: 0 auto;}
.box {padding: 30px; margin: 0 10px 10px 0; float: left; background: #fff; border: 1px solid #e1e1e1; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.box-full {width: 100%;}
.box-one-third {width: 310px;}
.box-last {margin-right: 0;}
.box h2 {margin-bottom: 30px; font-size: 24px; font-weight: bold; color: #363636; text-transform: uppercase;}


/* Photo */
.custom-box-photo {height: 530px; position: relative; background: url(images/mighty-alex.jpg) no-repeat center center #c8cbd0; background-size: cover; border: none;
	transition: background-size 1s ease-out;
	-moz-transition: background-size 1s ease-out;
	-ms-transition: background-size 1s ease-out;
	-o-transition: background-size 1s ease-out;
	-webkit-transition: background-size 1s ease-out;
}
.custom-box-photo:hover {
	/*
	background-size: 120%;
	transition: background-size 1s ease-in;
	-moz-transition: background-size 1s ease-in;
	-ms-transition: background-size 1s ease-in;
	-o-transition: background-size 1s ease-in;
	-webkit-transition: background-size 1s ease-in;
	*/
}

.custom-box-photo:hover #slogan {
	opacity: 1;
	transition: opacity 1s ease-in;
	-moz-transition: opacity 1s ease-in;
	-ms-transition: opacity 1s ease-in;
	-o-transition: opacity 1s ease-in;
	-webkit-transition: opacity 1s ease-in;
}

#logo {width: 40px; height: 40px; line-height: 40px; text-align: center; background: #d82428; float: left; color: #fff;}
#logo:hover {}
#logo h1 img {}

#slogan {position: absolute; bottom: 30px; left: 20px; font-family: serif; font-style: italic; font-size: 20px; text-align: center; color: #fff; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); opacity: 0;
	transition: opacity 1s ease-in;
	-moz-transition: opacity 1s ease-in;
	-ms-transition: opacity 1s ease-in;
	-o-transition: opacity 1s ease-in;
	-webkit-transition: opacity 1s ease-in;
}

/* Experience */
.custom-box-experience {height: 530px;}
.custom-box-experience ul li {margin-bottom: 18px;}
.custom-box-experience ul li .position {display: inline-block; background: #414449; color: #fff; font-weight: bold; font-size: 14px; padding: 5px 10px;}
.custom-box-experience ul li .duration {display: inline-block; background: #d82428; color: #fff; font-weight: bold; font-size: 14px; padding: 5px 10px;}
.custom-box-experience ul li .description {display: inline-block; margin-top: 5px;}


/* Skills */
.custom-box-skills {height: 439px;}
.custom-box-skills ul li {font-size: 14px; text-transform: uppercase; font-weight: bold; line-height: 22px; margin-bottom: 19px; color: #363636;}
.custom-box-skills ul li:last-child {margin-bottom: 0;}
.custom-box-skills ul li img {height: 24px; vertical-align: middle; margin-right: 10px;}


/* Email */
.custom-box-email {height: 80px; background: #414449; font-size: 14px; font-weight: bold; text-align: center; border: none;}
.custom-box-email a {color: #fff;}


/* Testimonials */
.custom-box-testimonials {position: relative; overflow: hidden; height: 203px; padding: 0;}
.testimonial-box {padding: 30px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.testimonial-box img {float: left; margin: 0 30px 60px 0; border-radius: 50%;}
.testimonial-box b {font-weight: bold; font-size: 14px; color: #363636;}
.testimonial-box i {font-size: 11px;}
.testimonial-box .stars {width: 80px; padding: 8px 0; margin: 5px 0 10px 0; display: inline-block; background: url(images/star.png) repeat-x;}


/* Porftolio */
.custom-box-portfolio {}
.portfolio-box {margin-bottom: 30px;}
.portfolio-box:last-child {margin-bottom: 0;}
.portfolio-box img {border: 1px solid #E1E1E1;}
.project-info-box {display: table; width: 100%; margin-top: 10px;}
.project-info-box div {display: table-cell; text-align: left; width: 25%;}
.project-info-box div:last-child {text-align: right;}
.project-info-box a.btn_view_live {color: #fff; font-weight: bold; text-transform: uppercase; background: #363636; padding: 5px 20px;}

/* Footer */
.custom-box-footer {color: #363636; margin-bottom: 60px;}
.social_links li {float: left; margin-left: 5px;}
.social_links li a {width: 40px; height: 40px; display: inline-block; background: #414449;}
.social_links li a:hover {background: #d82428;}

.copyright {font-weight: bold; margin-top: 3px; display: inline-block;}
.end-note {font-size: 10px;}


/*  Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {

	body {padding-top: 0;}
	.wrap {width: 768px;}
	.box {margin: 0; border: none; border-bottom: 1px solid #e1e1e1;}
	.box-one-third {width: 256px;}
	.custom-box-experience ul li .position, .custom-box-experience ul li .duration {font-size: 12px; padding: 5px;}
	.custom-box-photo {background-size: cover;}
	.custom-box-testimonials {height: 170px;}
	.custom-box-skills {height: 451px;}
	.portfolio-box img {width: 100%;}
	.custom-box-footer {margin-bottom: 0;}
	.end-note {padding-top: 10px;}

}
/*  Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {

	body {padding-top: 0;}
	.wrap {width: 320px;}
	.box {margin: 0; border: none; border-bottom: 1px solid #e1e1e1;}
	.box-one-third {width: 320px;}
	.custom-box-testimonials {height: 300px;}
	.testimonial-box img {margin: 0 30px 170px 0;}
	.portfolio-box img {width: 100%;}
	.project-info-box a.btn_view_live {white-space: nowrap;}
	.custom-box-footer {margin-bottom: 0;}
	.custom-box-footer .left {float: none; margin-left: 5px; margin-bottom: 10px;}
	.project-info-box div {display: block; margin-bottom: 10px; width: 100%;}
	.project-info-box div:last-child {text-align: left;}
	.custom-box-footer .right {float: none;}
	.end-note {padding-top: 10px;}

}
/*  Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	body {padding-top: 0;}
	.wrap {width: 480px;}
	.box {margin: 0; border: none; border-bottom: 1px solid #e1e1e1;}
	.box-one-third {width: 480px;}
	.portfolio-box img {width: 100%;}
	.project-info-box a.btn_view_live {white-space: nowrap;}
	.custom-box-footer {margin-bottom: 0;}
	.end-note {padding-top: 10px;}

}