/*----------------------------------------------------------------------------------- */
/*  Fonts */
/*----------------------------------------------------------------------------------- */
/** Generated by FG **/
@font-face {
	font-family: 'Conv_AGENCYR';
	src: url('../fonts/AGENCYR.eot');
	src: local('☺'), url('../fonts/AGENCYR.woff') format('woff'), url('../fonts/AGENCYR.ttf') format('truetype'), url('../fonts/AGENCYR.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
/*font-family: 'Teko', sans-serif; font-weight:300;
font-family: 'Six Caps', sans-serif;
font-family: 'Pathway Gothic One', sans-serif;*/

/*----------------------------------------------------------------------------------- */
/*  Document Setup */
/*----------------------------------------------------------------------------------- */
* { outline: none !important; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;  }
html, body, .container, .header {height: 100%;}
body { font-family: 'Muli', sans-serif; color: #333; background-color: #fff; font-size: 15px; font-weight:300; line-height:1.5; margin: 0; padding: 0; }

.overflow_hidden{ overflow:hidden;}
.overflow_auto{ overflow:auto;}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight:normal; font-family: 'Conv_AGENCYR'; line-height:normal; margin:0 0 10px 0; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small { font-size: 55%; }
h1, .h1 { font-size: 60px; letter-spacing: -0.03em; }
h2, .h2 { font-size: 63px; }
h3, .h3 { font-size: 30px; }
h4, .h4 { font-size: 20px; }
h5, .h5 { font-size: 15px; font-weight: 400; }
h6, .h6 { font-size: 13px; font-weight: 600; }
p { margin-top:0; margin-bottom: 15px; }
.lead { font-weight: 300; }
strong { font-weight: 700; }
a { color: #333; text-decoration:none; transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
a:hover { color: #f66; text-decoration: none; }
blockquote { border-color: #dddddd; }
hr { border-color: #d0d0d0; }


/* ===========================
CONTAINER
==============================*/
.container:not(.notrans) button.trigger { color:#fff; -webkit-transition: opacity 0.3s 0.5s; transition: opacity 0.3s 0.5s; }
.container.modify:not(.notrans) button.trigger { opacity: 0; pointer-events: none; -webkit-transition-delay: 0s; transition-delay: 0s; }


/* ===========================
HEADER
==============================*/
header {	position: relative; margin: 0 auto; min-height: 360px; width: 100%; text-align: center; }
header h1, header h2, header address { margin: 0 auto; text-align: center; line-height: 100%; font-family: 'Conv_AGENCYR'; font-weight: normal; font-style:normal; }
header h1 .firstname { font-size: 117px; }
header h1 .middlename { font-size: 110px; margin-top: 37px; }
header h1 .lastname { font-size: 63px; margin-top: 17px; letter-spacing: -1px; }
header h2, header address { font-family: 'Muli', sans-serif; font-size: 15px; font-weight: 300; line-height: 120%; }
header .title { z-index: 1000; margin: 0 auto; width: 227px; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
header .title span.hybrid { font-size: 14px; margin-left: 3px; }
header .title span.fe { margin-left: -2px; }
header address { font-size: 15px; }
header .phonenumber{ font-size:9px; letter-spacing:2.7px; margin-right:-2px; }
header .phonenumber a{ color:#fff;}
.intro-effect-fade.modify header .phonenumber a{ color:#333;}
header .social { margin-top: -8px; margin-left:-1px; font-size: 33px; color:#fff; }
header .social a{ margin:0 5px;}

.starline { width:100%; height:20px; margin:0 auto; text-align:center; border:none; /*background:url(../img/ic-star-small@2x.png) repeat-x center top;*/ background-size:13px; background-position:center;}
.starline svg{ width:225px; height:13px; display:inline-block; text-align:center; }
.intro-effect-fade .starline svg path{ fill:#fff;  transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.intro-effect-fade.modify .starline svg path{ fill:#333;}


/* ===========================
TRIGGER BUTTON
==============================*/
button.trigger { position: fixed; bottom: -20px; z-index: 5000; display: block; padding: 0; width: 100%; height: 100px; border: none; background: transparent; color: transparent; font-size: 1.5em; cursor: pointer; font-weight:300; color:#ccc; transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
button.trigger .fa { color:#ccc;}
button.trigger .triggertext,
button.trigger .triggertext a { text-align:center; font-size:10px; color:#666; letter-spacing:1px; transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
button.trigger:hover,
button.trigger:hover a,
button.trigger:hover .fa,
button.trigger:hover .triggertext { color:#fff;}

button.trigger a:hover{ color: #f66;}

button.trigger:after { content: ""; position: absolute; bottom: 50px; left: 50%; margin-left: 0px; height: 40px; display: block; border-left:dashed 1px #ccc; }
button.trigger::before { position: absolute; bottom: 100%; left: -100%; padding: 0.8em; width: 300%; color: #fff; content: attr(data-info); font-size: 0.35em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

button.trigger:focus { outline: none; }

button.trigger span { position: relative; display: block; overflow: hidden; width: 100%; height: 100%; }

button.trigger span::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; content: "\e097"; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'icomoon'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }



/* ===========================
FADE EFFECT
==============================*/
.intro-effect-fade{ background:#333; 
transition: all .5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.intro-effect-fade.modify{ background:#fff;}

.intro-effect-fade header{
transition: all .5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.intro-effect-fade.modify header{ height:480px;}

.intro-effect-fade:not(.notrans) .title,
.intro-effect-fade:not(.notrans) .social a,
.intro-effect-fade:not(.notrans) .content > div {
	color: #fff;
	-webkit-transition-property: -webkit-transform, color;
	transition-property: transform, color;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.intro-effect-fade:not(.notrans) .content > div {
	-webkit-transition-property: -webkit-transform, opacity;
	transition-property: transform, opacity;
}

.intro-effect-fade.modify:not(.notrans) .title,
.intro-effect-fade.modify:not(.notrans) .social a,
.intro-effect-fade.modify:not(.notrans) .content > div {
	color: #333;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
}

.intro-effect-fade .title {
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
	transform: translateX(-50%) translateY(-50%) scale(1);
}

.intro-effect-fade.modify .title {
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
	transform: translateX(-50%) translateY(-50%) scale(1);
}

	
@media (max-height: 400px) {
	.intro-effect-fade header{ min-height:360px;}
	.intro-effect-fade.modify header{ height:360px;}
	
	.intro-effect-fade .title {
		-webkit-transform: translateX(-50%) translateY(-55%) scale(0.7);
		transform: translateX(-50%) translateY(-55%) scale(0.7);
	}
	
	.intro-effect-fade.modify .title {
		-webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
		transform: translateX(-50%) translateY(-50%) scale(0.7);
	}
	
}

.intro-effect-fade .content > div {
	-webkit-transform: translateY(300px);
	transform: translateY(300px);
	opacity: 0;
}

.intro-effect-fade.modify .content > div {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

/* Delays */
.intro-effect-fade.modify:not(.notrans) .title {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}


/* Media Queries */
@media screen and (max-width: 47em) {
}

@media screen and (max-width: 27em) {
	button.trigger::before {
		display: none;
	}
}


/* ===========================
CONTENT
==============================*/
.content{ max-width:960px; margin:30px auto; padding:0;}
.content .heading{ display:inline-block; text-align:center; margin:0 auto 30px; background:url(../img/star.svg) repeat-x center bottom; background-size:13px; }
.content .heading h2{ background:#fff;}
.content .section{ text-align:center; margin:0 auto 150px; padding:15px;}
.content .section .heading h2{ background:none;}

/* ===========================
   SUMMARY
==============================*/
.section.summary{ width:660px; }


/* ===========================
   SKILLS
==============================*/
.section.skills{ width:100%; padding:0; }
.section.skills ul{ background:#fff;}



/* ===========================
   PORTFOLIO
==============================*/
.section.portfolio{ max-width:780px; padding:0; margin:30px auto 70px;}
.section.portfolio .heading{ padding:0 3px;}


.galleryportfolio{ margin:0 0; }
.galleryportfolio figure{ position:relative; display:inline-block; min-width:250px; min-height:340px; padding:10px; margin:0 auto; border:dashed 1px #333; -webkit-transform: scale(0.8); transform: scale(0.8); transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.galleryportfolio figure:hover{ border:solid 1px #333; }
.galleryportfolio .slick-center figure{ opacity:1; background-color:#333; border-style:solid; -webkit-transform: scale(1); transform: scale(1);}
.galleryportfolio figcaption{ opacity:0; position:absolute; top:0; left:0; width: 100%; height:100%;color:#fff; background-color: rgba(0, 0, 0, 0.5); transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;  }
.galleryportfolio figure:hover figcaption{ opacity:1;}
.galleryportfolio figcaption .portfolio-info{ position:absolute; top:50%; left:0; width:100%; color:#fff; padding:15px;  transform: translate(0px, -50%); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.galleryportfolio figcaption .portfolio-info a{ display:block; color:#fff; font-size:24px; line-height:50px; border:solid 1px #fff; width:50px; height:50px; margin:0 auto; -webkit-border-radius: 50px; border-radius: 50px;}
.galleryportfolio figcaption .portfolio-info a:hover{ background-color:#f66; }
.galleryportfolio img {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.galleryportfolio figure:hover img/*,
.galleryportfolio .slick-center img*/ {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}



/* Arrows */
.slick-prev,
.slick-next{display: inline-block; position:relative; top:-40px; width: 50px; height: 50px; padding: 0; margin:10px; font-size:32px; cursor: pointer; border: none; outline: none; background: transparent;}
.slick-prev:hover,
.slick-next:hover{ color:#f66;}
.ic-star.arrow{ position:absolute; bottom:17px; left:50%; margin-left:-20px;}

.pagenumber,
.pagenumbertotal,
.of{ display: inline-block; position:relative; top:-45px; font-size:13px;}


/* ===========================
   LINKS
==============================*/
.section.links .heading{ padding:0;}
.section.links ul{ margin:0; padding:0; list-style:none;}
.section.links ul li .brand{ font-weight:400; }



/* ===========================
   SCHOOL
==============================*/
.section.school .heading{ padding:0 5px;}
.section.school ul{ margin:0; padding:0; list-style:none;}
.section.school ul li .brand{ font-weight:400; }



/* ===========================
   TESTIMONIALS
==============================*/
.section.testimonials{ width:70%;}
.section.testimonials blockquote{ margin:0 0 20px 0; font-size:20px; line-height:130%; }
/* Arrows */
.section.testimonials .slick-prev,
.section.testimonials .slick-next{ top:0; width:30px;}


/* ===========================
   CONTACT
==============================*/
.section.contact { width:100%; text-align:center;}
.section.contact a{ color:#f66;}
.section.contact a:hover{ color:#333;}


/* ===========================
   TIMELINE
==============================*/
.timeline .heading{ padding:0 5px;}

.timeline { list-style: none; position: relative; margin: 0 auto 150px; overflow: hidden; text-align:center; }
.timeline:after { z-index:-1; content: ""; position: absolute; top: 140px; left: 50%; margin-left: -1px; height: 100%; width: 1px; display: block; border-left:dashed 1px #333; }
.timeline .timeline-row { margin-bottom:20px; padding-left: 50%; position: relative; z-index: 10; }
.timeline .timeline-row .timeline-time { position: absolute; right: 50%; top: 15px; text-align: right; margin-right: 55px; font-size: 30px; line-height: 1.2; font-family: 'Conv_AGENCYR'; color:#333; text-transform:uppercase; background:#fff; }
.timeline .timeline-row .timeline-icon { position: absolute; top: 10px; left: 50%; margin-left: -20px; width: 40px; height: 40px; text-align: center; overflow: hidden; color: #333; font-size: 24px; z-index: 100; }

.ic-star{position:relative; display:block; width:40px; height:40px; background:url(../img/star.svg) center no-repeat; background-size:50px;}
.ic-star:after { content: ""; position: absolute; top: -1px; left: 50%; margin-left: -1px; background-color: #fff; height: 34px; width: 1px; display: block; z-index:-1; }


.timeline .timeline-row .timeline-content { margin-left: 40px; position: relative; color: #333; }
/*.timeline .timeline-row .timeline-content:after { content: ""; position: absolute; top: 48px; left: -41px; height: 1px; width: 40px; background-color: #333; z-index: -1; }*/
.timeline .timeline-row .timeline-content .panel-body { padding: 15px; position: relative; z-index: 10; }
.timeline .timeline-row .timeline-content h3 { text-transform:uppercase; background:#fff; }
.timeline .timeline-row .timeline-content h4 { font-family: 'Muli', sans-serif; margin:0; }
.timeline .timeline-row:nth-child(even) { padding-left: 0; padding-right: 50%; text-align: right; }
.timeline .timeline-row:nth-child(odd) {text-align: left; }
.timeline .timeline-row:nth-child(even) .timeline-time { right: auto; left: 50%; text-align: left; margin-right: 0; margin-left: 55px; }
.timeline .timeline-row:nth-child(even) .timeline-content { margin-right: 40px; margin-left: 0; }
.timeline .timeline-row:nth-child(even) .timeline-content:after { left: auto; right: -41px; }
.timeline.animated .timeline-row .timeline-content { opacity: 0; top: 30px; left: 20px; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; transition: all 0.8s; }
.timeline.animated .timeline-row:nth-child(even) .timeline-content { left: -20px; }
.timeline.animated .timeline-row.active .timeline-content { opacity: 1; left: 0; top:0; }
.timeline.animated .timeline-row.active:nth-child(even) .timeline-content { left: 0; top:0; }


.timeline.full { }
.timeline.full .timeline-row { padding: 0; }
.timeline.full .timeline-row .timeline-time { position: absolute; right: 50%; top: 15px; text-align: right; margin-right: 55px; font-size: 30px; line-height: 1.2; font-family: 'Conv_AGENCYR'; color:#333; text-transform:uppercase; background:#fff; }
.timeline.full .timeline-row .timeline-content { margin-left: 40px;}
.timeline.full .timeline-row .timeline-content .panel-body { padding: 15px; display:inline-block; float:left; width:50%; -webkit-transition: all 0.8; -moz-transition: all 0.8s; transition: all 0.8s; }
.timeline.full .timeline-row .timeline-content .panel-body.left { text-align:right; padding-right:50px;}
.timeline.full .timeline-row .timeline-content .panel-body.right { text-align:left; padding-left:50px;}
.timeline.full .timeline-row .timeline-content .panel-body ul{ margin:0; padding:0; list-style:none;}



@media (max-width: 900px) {
.section.portfolio{ width:730px;}
}


@media (max-width: 768px) {
.section.summary{ width:90%; }
.section.portfolio{ width:100%;}


.timeline{ text-align:center;}
.timeline .timeline-row { padding-left: 0; margin-bottom: 16px; }
.timeline .timeline-row .timeline-time { position: relative; right: auto; top: 0; text-align: center; margin: 0 0 10px 0; }
.timeline .timeline-row .timeline-icon { top: 42px; left: 50%; margin-left: -20px; }
.timeline .timeline-row .timeline-content { margin-left: 0; position: relative; }
.timeline.animated .timeline-row.active:nth-child(odd) .timeline-content,
.timeline.animated .timeline-row.active:nth-child(even) .timeline-content { top:30px; }
.timeline .timeline-row .timeline-content:after { right: auto !important; left: -20px !important; top: 32px; }
.timeline .timeline-row:nth-child(even) { padding-right: 0; text-align:center; }
.timeline .timeline-row:nth-child(odd) {padding-left: 0;text-align: center; }
.timeline .timeline-row:nth-child(even) .timeline-time { position: relative; right: auto; left: auto; top: 0; text-align: center; margin: 0 0 6px 0; }
.timeline .timeline-row:nth-child(even) .timeline-content { margin-right: 0; margin-left: 0; }
.timeline.animated .timeline-row:nth-child(even) .timeline-content { left: 0; }
.timeline.animated .timeline-row.active:nth-child(even) .timeline-content { left: 0; }
.timeline .timeline-row .timeline-content h2,
.timeline .timeline-row .timeline-content p { background-color:#fff; }
.timeline .timeline-row .timeline-content{ margin-bottom:60px; }


.timeline.full.animated .timeline-row.active:nth-child(2n+1) .timeline-content, 
.timeline.full.animated .timeline-row.active:nth-child(2n) .timeline-content{ top:-60px;}
.timeline.full .timeline-row .timeline-icon{ top:-50px;}
.timeline.full .timeline-row .timeline-content .panel-body.left {padding-right:30px;}
.timeline.full .timeline-row .timeline-content .panel-body.right { padding-left:30px;}
}

@media (max-width: 720px) {
.galleryportfolio img {
-webkit-transform: scale(0.8);
transform: scale(0.8);}

.slick-center img{-webkit-transform: scale(1);
transform: scale(1);}


}
@media (max-width: 690px) {
.section.portfolio{ width:252px;}
}


@media (max-width: 640px) {
.section.links ul{ margin:0;}	
.section.links .heading span span{ display:none;}

.content .timeline {text-align:center;}

.section.testimonials{ width:90%;}

}

@media (max-width: 600px) {
	
.galleryportfolio img {
-webkit-transform: scale(1);
transform: scale(1);}

.slick-center img{-webkit-transform: scale(1);
transform: scale(1);}
	
.timeline.full .timeline-row .timeline-content .panel-body.left,
.timeline.full .timeline-row .timeline-content .panel-body.right { width:100%; text-align:center; padding-left:0; padding-right:0;}
.timeline.full.animated .timeline-row.active:nth-child(2n+1) .timeline-content, 
.timeline.full.animated .timeline-row.active:nth-child(2n) .timeline-content{ top:0;}
}

@media (max-width: 480px) {
.content{ width:100%;}
.section.portfolio{ width:300px;}	
.content .timeline { padding:0;}

.section.testimonials{ width:100%;}
}
@media (max-width: 440px) {
.section.links .heading span{ display:none;}
}



.thanks{ display:block; clear:both; margin-top:30px; font-size:1.5em; text-align:center; color:#666; letter-spacing:1px; transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.thanks a{ display:block; font-size:10px;} 

/*.slabtexted .slabtext{display:-moz-inline-box;display:inline-block;white-space:nowrap}.slabtextinactive .slabtext{display:inline;white-space:normal;font-size:1em !important;letter-spacing:inherit !important;word-spacing:inherit !important;*letter-spacing:0 !important;*word-spacing:0 !important;}.slabtextdone .slabtext{display:block;line-height:0.9;}
*/