/* RESET
______________________________________ */
/* http://meyerweb.com/eric/tools/css/reset/ */
div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video { margin:0; padding:0; border:0; outline:0; vertical-align:baseline; }
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
table{ border-collapse:collapse; border-spacing:0; }


/* HOMEPAGE 
______________________________________ */
.prev1, .next1 { position: absolute; top: 41%; display: block; width: 40px; height: 40px; border-radius: 30px; background: white; text-align: center; padding-top: 20px; color: #4D4D4D; font-size: 1.2em; z-index: 7; }
.prev1 { left: -45px; box-shadow: -8px 0 8px -7px rgba(87,87,87,0.3); padding-right: 20px; }
.next1 { right: -45px; box-shadow: 8px 0 8px -7px rgba(87,87,87,0.3); padding-left: 20px; }
.prev1:hover, .next1:hover { -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; }
.prev1:hover { left: -50px; }
.next1:hover { right: -50px; }

.prev2, .next2 { display: block; width: 30px; height: 30px; line-height: 30px; background: #B8B8B8; text-align: center; color: white;  position: relative; z-index: 7; float: right; margin: 0; margin-left: 1px; }
.prev2 i, .next2 i { line-height: 30px; width: 30px; text-align: center; font-size: 1.2em; }
.prev2:hover, .next2:hover { background: #A6A6A6; -webkit-transition: background .2s ease; -moz-transition: background .2s ease; -ms-transition: background .2s ease; -o-transition: background .2s ease; transition: background .2s ease; }

#features { clear: both; margin: 0 0 40px 0; }
#features hr { position: relative; top: 50px; z-index: 7; }
.feature { position: relative; text-align: center; width: 16.66%; display: block; float: left; z-index: 8; -webkit-font-smoothing: antialiased; }
.circle { display: block; width: 60px; height: 40px; border-radius: 30px; background: #D8D8D8; text-align: center; padding: 20px 0 0 0; margin: 0 auto; position: relative; font-weight: 600; color: #252525; }
.feature .circle i { font-size: 1.45em; }
.feature:hover .circle i { color: white; }
.feature:hover .circle { background: #0090EC; -webkit-transition: background 1s ease-out; -moz-transition: background 1s ease-out; transition: background 1s ease-out; }
.feature .circle:after { position: absolute; display: block; width: 80px; height: 80px; border-radius: 40px; content: ''; background: #0090EC; top: -10px; left: -10px; padding: 0; z-index: -1; box-shadow: 0 0 0 2px rgba(255,255,255,0.1); opacity: 0; }
.feature:hover .circle:after { -webkit-animation: sonarEffect .8s ease-out 75ms; -moz-animation: sonarEffect .8s ease-out 75ms; animation: sonarEffect .8s ease-out 75ms; }
@-webkit-keyframes sonarEffect {
	0% { opacity: 0.3; }
	40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #D8D8D8, 0 0 0 10px rgba(255,255,255,0.5); }
	100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #D8D8D8, 0 0 0 10px rgba(255,255,255,0.5); opacity: 0; }
}
@-moz-keyframes sonarEffect {
	0% { opacity: 0.3; }
	40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #D8D8D8, 0 0 0 10px rgba(255,255,255,0.5); }
	100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #D8D8D8, 0 0 0 10px rgba(255,255,255,0.5); opacity: 0; }
}
@keyframes sonarEffect {
	0% { opacity: 0.3; }
	40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #D8D8D8, 0 0 0 10px rgba(255,255,255,0.5); }
	100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #D8D8D8, 0 0 0 10px rgba(255,255,255,0.5); opacity: 0; }
}
#features h3 { margin: 20px 0 2px 0; }
#features p { font-weight: 400; color: #aaa; }

#slogan { text-align: center; background: #f5f5f5; border-top: 1px dotted #c7c7c7; border-bottom: 1px dotted #c7c7c7; padding: 30px 40px 20px; margin: 40px 0 45px 0; }
#slogan h2 { margin-bottom: 12px; }
#slogan p { padding: 0 0 10px 0; font-size: 1.2em; font-weight: 300; line-height: 1.5; }
#slogan p a.small { font-size: 0.85em; }

#latest-projects { clear: both; margin: 0 0 40px 0; position: relative; z-index: 9; }
h2 .small a { font-size: 0.75em; }
.carousel4 { position: relative; overflow: hidden; height: 300px; z-index: 9; }
.carousel4 ul { width: 3000px; position: absolute; list-style: none; margin: 15px 0 0 0; padding: 0; }
.carousel4 li { display: block; width: 264px; height: 300px; margin-right: 35px; float: left; }
.carousel4 li img { width: 100%; height: auto; max-height: 170px; margin: 0; }
.carousel4 li a.popup { display: block; position: relative; }
.carousel4 li a.popup:hover { background: #2dab8b; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; }
.carousel4 li a.popup:hover img { opacity: 0.9; }
.carousel4 li a.popup:after { content: "+"; position: absolute; display: block; opacity: 0; font-size: 2.5em; font-weight: 700; color: #A5A5A5; width: 40px; height: 40px; line-height: 40px; background: #fff; text-align: center; background: rgba(255,255,255,0.9); left: 42%; top: 0%; border-radius: 20px; cursor: pointer; }
.carousel4 li a.popup:hover:after { opacity: 1; top: 40%; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease;  }
.carousel4 h3 { margin: 18px 0 8px 0; }
.carousel4 p { font-weight: 400; color: #aaa; }
#latest-projects .prev1, #latest-projects .next1 { top: 31%; }

#recent-news { clear: both; margin: 20px auto 20px auto; width: 100%; float: left; }
.carousel-vert4 { position: relative; overflow: hidden; height: 200px; z-index: 9; margin: 20px 0 3px 0; }
.carousel-vert4 ul { list-style: none; width: 100%; height: 2200px; position: absolute; padding: 0;  }
.carousel-vert4 ul li { display: block; width: 100%; height: 49px; background: #E7E7E7; margin-bottom: 1px; overflow: hidden;
-webkit-transition: background .2s ease; -moz-transition: background .2s ease; -ms-transition: background .2s ease; -o-transition: background .2s ease; transition: background .2s ease; }
.carousel-vert4 ul li:nth-child(even) { background: #f5f5f5; }
.carousel-vert4 ul li img { width: 75px; max-height: 49px; float: left; opacity: 0.9; margin: 0 20px 0 0; 
-webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease;}
.carousel-vert4 ul li figure i { width: 49px; height: 34px; float: left; opacity: 0.9; margin: 0 20px 0 0; display: block; background: #9E9E9E; text-align: center; color: white; font-size: 1.4em; padding-top: 15px; }
.carousel-vert4 ul li .date { width: 50px; height: 49px; background: #B8B8B8; color: white; text-align: center; float: left; 
-webkit-transition: background .2s ease; -moz-transition: background .2s ease; -ms-transition: background .2s ease; -o-transition: background .2s ease; transition: background .2s ease;}
.carousel-vert4 ul li .date .day { font-size: 1.4em; font-weight: 700; display: block; line-height: 1; padding-top:  7px; }
.carousel-vert4 ul li .date .month { font-size: 1.0em; font-weight: 300; text-transform: uppercase; }
.carousel-vert4 ul li h3 { font-size: 1em; }
.carousel-vert4 ul li h3 a { display: block; line-height: 49px; max-width: 90%; color: #252525; position: relative; }
.carousel-vert4 ul li h3 a:after { content: '\f054'; font-family: FontAwesome; font-weight: normal; font-size: 1.4em; color: #0090EC; position: absolute; right: -8%; top: 2px; }
.carousel-vert4 ul li:hover { background: #6EC0F6; }
.carousel-vert4 ul li:hover .date { background: #A6A6A6;  }
.carousel-vert4 ul li:hover img,  .carousel-vert4 ul li:hover figure i { margin-right: 30px; opacity: 1; }
#recent-news .read-more { float: left; display: inline-block; padding: 10px 0 0 0; }

#testimonials { margin: 0 0 40px 0; width: 35%; float: right; }
.quote blockquote { background: #f5f5f5; padding: 24px 25px; margin: 15px 0 0 0; font-weight: 400; color: #a7a7a7; height: 150px; }
#quotes { max-width: 100%; }
.quote { font-weight: 300; height: 250px; width: 100% !important; }
.quote footer {  position: relative; top: 35px; left: 5px; }
.quote img { width: 65px; height: auto; position: absolute; bottom: 0; }
.quote .author {  position: absolute; bottom: 0; left: 65px; background: #2DAB8B; color: white; padding: 2px 21px 3px; min-width: 235px; font-size: 1.0em; }
#quotes-nav { position: relative; bottom: 65px; z-index: 9; }

#clients { clear: both; margin: 0 0 -40px 0; }
.carousel7 { position: relative; overflow: hidden; height: 150px; z-index: 9; }
.carousel7 ul { width: 2200px; position: absolute; list-style: none; padding: 30px 0 0 0; }
.carousel7 ul li { display: block; width: 180px; padding: 0 8px; float: left; text-align: center; }
.carousel7 ul li img { max-width: 160px; max-height: 150px; vertical-align: middle; }

/* RESPONSIVE MAGIC
______________________________________ */
@media screen and (max-width: 1280px) {
	#wrapperbox { max-width: 1120px; }

	.quote .author { min-width: 200px; width: 200px; }
	
	.carousel4 li { width: 240px; }
	.carousel7 ul li { width: 160px; }
}

@media screen and (max-width: 1190px) {
	#wrapperbox { width: 849px; }
	
	nav#mainmenu { width: 101.3%;  }
	nav#mainmenu ul li a { padding: 15px 30px 0 30px; }
	
	#slider { height: 350px; }
	#slides { height: 335px; }
	.slide-text p.extrabig { font-size: 1.8em; }
	
	.quote img { width: 50px; }
	.quote .author { left: 50px; min-width: 181px; width: 181px; }
	
	.carousel7 ul li { width: 140px; }
}

@media screen and (max-width: 880px) {
	#wrapperbox { width: 640px; }
	#content { float: none; width: 100%; margin-right: 0; }
	#sidebar { float: left; width: 100%; margin-top: 40px; }
	
	nav#mainmenu { width: 101.6%; }
	nav#mainmenu ul li a { padding: 15px 17px 0 17px; }
	nav#mainmenu ul li ul.sub-menu li a { padding: 10px 35px; }

	#slider { height: 256px; }
	#slides { height: 245px; }
	.slide-text p { font-size: 90%; }
	.slide-text p.extrabig { font-size: 1.4em; }

	#slogan { margin-top: -25px; }
	#features hr { display: none; }
	.feature { width: 33.3%; margin-bottom: 20px; }
	.feature:nth-of-type(4) { clear: both; }

	.carousel4 li { width: 170px; }
	.carousel4 li a.popup:hover:after { top: 35%; }

	#recent-news { width: 100%; float: none; padding: 0px; margin-top: 20px; margin-bottom: 20px; }
	#testimonials { width: 100%; padding: 0; margin: 20px 0 20px 0; }
	#testimonials blockquote { height: 130px; }
	#quotes-nav { bottom: 52px; }
	
	.carousel7 ul li { width: 130px; }

	.p100,.p97,.p90,.p80,.p75,.p70,.p66,.p60,.p50,.p40,.p33,.p30,.p25,.p20,.p15,.p10 { float: none !important; width: 100% !important; padding-right: 0; }
	#content p.input-block.p50.right { padding-right: 0; margin-left: 0; }

	#content .entry-content, #content .entry-summary { float: none; width: 100%; }
	#content .entry-byline { float: none; width: 100%; }
	#content .entry-byline ul li { display: inline-block; text-align: left; }
	#content .entry-byline ul strong i { padding: 3px 10px 0 0; float: left; }
	#content .post-thumb .cycle { min-height: 230px; }
	#content .post-image, #content .post-thumb { margin: 0 0 10px 0; }

	.team-member { width: 45%; float: left; padding: 0 3% 40px 0; } 
	.team-member:nth-child(even) { padding-right: 0; float: right; }

	.footerbox { width: 45%; }
	.footerbox:nth-child(even) { margin-right: 0; padding-right: 0; float: right; }
	.footerbox:nth-child(3) { clear: both; }
	#footer ul.footermenu { float: left; }
	#footer ul.footermenu li { padding: 0 30px 8px 0; }
}


@media screen and (max-width: 740px) {
	#wrapperbox { width: 480px; margin: 0 auto; }
	#logo { width: 100%; margin: 0; }
	#address-block { width: 100%; text-align: left; margin: 0; }
	#social-block { width: 100%; float: left; text-align: left; margin: 15px 0 25px 0; }

	nav#mainmenu { width: 102.2%; margin-bottom: 30px; }
	nav#mainmenu > ul { display: none; }
	nav#mainmenu .select-menu, nav#mainmenu .sexyselect { display: block; }

	#slider { height: 370px; background: none; }
	#slides { height: 370px; }
	.slide-image { height: 178px; }
	.slide-text { width: 100%; left: 0; top: 182px !important; opacity: 1 !important; }
	.slide-text p { display: block; }
	#circle-pager { display: none; }

	.carousel4 li { width: 195px; }

	#content h1 { float: none; }
	#breadcrumbs { float: none; }

	.gallery { width: 100%; }		
	.gallery-item.col-4 { float: none; width: 100%; padding: 0; }
}

@media screen and (max-width: 360px) {
	
	#wrapperbox { width: 320px; }
	.wrapper { padding: 0 10px; }
	
	#logo img { margin-bottom: 10px; }
	#address-block a { display: block; padding-left: 0; }
	
	nav#mainmenu { width: 100%; margin-left: 0; }
	nav#mainmenu:before { visibility: hidden; }
	nav#mainmenu:after { visibility: hidden;  }
	nav#mainmenu > ul { display: none; }
	nav#mainmenu .select-menu, nav#mainmenu .sexyselect { display: block; }
	nav#mainmenu .sexyselect { margin-left: 10px; }

	#slider { height: 340px; margin-bottom: 25px; }
	#slides { height: 340px; }
	.slide-image { height: 127px; }
	.slide-text { top: 130px !important; }
	#slider .prev1 { display: none; }
	#slider .next1 { display: none; }
	
	#features { margin-bottom: 0px; }
	.feature { width: 46.7%; }
	.feature:nth-of-type(4) { clear: none; }
	.feature:nth-of-type(2n+1) { clear: both; }
	
	#latest-projects { margin-bottom: 20px; }
	#latest-projects .prev1 { padding: 0; width: 20px; z-index: 22; top: 30%; left: 268px; box-shadow: none; background: none; }
	#latest-projects .next1 { padding: 0; width: 20px; z-index: 22; top: 45%; left: 268px; box-shadow: none; background: none; }
	.carousel4 li { width: 265px; }
	
	#slogan { padding: 30px 10px 20px; margin: 0 0 40px 0; }
	
	.quote footer { top: 67px; left: 0px; }
	.quote .author { width: 208px; min-width: 208px; }
	
	#commentform .form-author, #commentform .form-email, #commentform .form-url  { width: 100%; padding-right: 0; }
	
	.footerbox { width: 100%; float: none; }
}