/*



Theme Name: Julieco



Author: Julieco



Description: Julieco is wordpress theme.



*/



/************************************************************



RESET



************************************************************/







@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');



/*



font-family: 'Open Sans', sans-serif;



*/











html, body, div, span, applet, object, iframe,



h1, h2, h3, h4, h5, h6, p, blockquote, pre,



a, abbr, acronym, address, big, cite, code,



del, dfn, em, font, ins, kbd, q, s, samp,



small, strike, strong, sub, sup, tt, var,



dl, dt, dd, ol, ul, li,



fieldset, form, label, legend,



table, caption, tbody, tfoot, thead, tr, th, td, th {



	border: 0;



	font-family: inherit;



	font-size: 100%;



	font-style: inherit;



	font-weight: inherit;



	margin: 0;



	outline: 0;



	padding: 0;



	vertical-align: baseline;



	word-wrap: break-word;



}







html {



	-webkit-text-size-adjust: 100%;



	-ms-text-size-adjust: 100%;



}







*,



*:before,



*:after {



	-webkit-box-sizing: border-box;



	-moz-box-sizing: border-box;



	box-sizing: border-box;



}







body { background: #ffffff; }



html, body { height: 100%; }



article, aside, details, figcaption, figure, footer,



header, main, nav, section { display: block; }







table { border-collapse: separate; border-spacing: 0; }



caption, th, td, th { font-weight: normal; text-align: left; }







blockquote:before, blockquote:after, q:before, q:after { content: ""; }



blockquote, q { quotes: "" ""; }



a:focus { outline: none; }



a:hover, a:active { outline: 0; }



a img { border: 0; }



* html { font-size: 100%; }



html { font-size: 18px; }



body,



button,



input,



select,



textarea { color: #333; font-family: 'coconregular'; font-size: 18px; }



p { padding-bottom: 20px; line-height: 35px; font-weight: 400; font-size: 18px; }



img { max-width: 100%; height: auto; }







/* Text meant only for screen readers */



.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; }







.screen-reader-text:hover,



.screen-reader-text:active,



.screen-reader-text:focus { background-color: #fff;  border: 1px solid #000; -webkit-box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 10px; -moz-box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 10px;	box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 10px;	clip: auto !important;	display: inline-block;	font-weight: 600;	left: 24px;	line-height: 24px;	padding: 24px;	position: absolute !important;	top: 24px;	z-index: 100000; }







/* Clearing */



.clear:before, .clear:after { content: ''; display: table; }



.clear:after { clear: both; }



.entry-content:before,



.entry-content:after { content: ''; display: table; }



.clear { height: 0px; overflow: hidden; clear: both; }



.btn1 { padding: 15px 33px; display: inline-block; font-size: 14px; text-transform: uppercase; text-decoration: none; color: #fff; line-height: 30px; font-family: 'coconregular'; font-weight: 700; border-radius: 30px; -webkit-border-radius: 30px; background: #f5a623; }



.btn1:hover { color: #fff; background: #1caba0; }







.btn2 { padding: 0 44px; line-height: 30px; display: inline-block; border: #FFF solid 2px; border-radius: 17px; -webkit-border-radius: 17px; font-size: 14px; font-weight: 700 !important; }



.btn2:hover { color: #1caba0 !important; background: #fff; }







.btn3 { padding: 13px 50px; line-height: 30px; display: inline-block; color: #1caba0; text-decoration: none; border: #1caba0 solid 4px; border-radius: 40px; -webkit-border-radius: 40px; font-size: 14px; font-weight: 700 !important; }



.btn3:hover { color: #fff !important; background: #1caba0; }







/* wrapper */



#wrapper { width: 100%; position: relative; height: 100%; }



.centering { padding: 0 15px; margin: 0 auto; position: relative; max-width: 1130px; }



	



	/* header */



	#header-bar { position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%; height: 96px; background: #000; }



	#header-bar a.logo { position: absolute; left: 58px; top: 23px; }



	#header-bar a.mobilemenu { display: none; }



		



		/* menu-bar */	



		.menu-bar { float: right; }



		.menu-bar .menuleft { padding: 36px 28px 0 0; float: left; }



		.menu-bar ul { list-style: none; }



		.menu-bar li { padding-right: 28px; float: left; position: relative; }



		.menu-bar li a { color: #F84A01; font-size: 24px; text-decoration: none; }



		.menu-bar li a:hover, .menu-bar li.current-menu-item a, .single-post .menu-bar li.menu-item-960 a { color: #007CBA; }



		.menu-bar li ul { padding-top: 30px; display: none; position: absolute; left: -15px; top: 25px; width: 240px; background: #000; }



		.menu-bar li li { padding: 10px 15px; float: none; border-bottom: #FFF solid 1px; }



		.menu-bar li:hover ul { display: block; }



		.menu-bar .info { padding-top: 36px; float: left; }



		.menu-bar .info a { margin-right: 20px; text-decoration: none; float: left; font-size: 24px; color: #007CBA; }
		.menu-bar .info a.bbblogo { float: left; max-width: 110px; border-radius: 10px; border: #fff solid 2px; margin-top: -27px; }
		.menu-bar .info a.bbblogo img { display: block; }
		.menu-bar .info a:hover { color: #F84A01; }



				



	/* banner-bar */



	#banner-bar { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; }

	.home #banner-bar { background-position: right; }

	#banner-bar .text { padding: 30px 20px; text-align: center; position: absolute; left: 100px; bottom: 100px; width: 850px; -webkit-box-shadow: 0 0 100px 50px rgba(0,0,0,0.5); box-shadow: 0 0 100px 50px rgba(0,0,0,0.5); background: rgba(0,0,0,0.45); }



	#banner-bar .text h1 { color: #F84A01; font-size: 91px; text-shadow: 3px 2px 2px #000000; }



	#banner-bar .text ul { list-style: none; overflow: hidden; }



	#banner-bar .text li { padding: 0 8px; color: #FFF; font-size: 36px; display: inline-block; text-shadow: 3px 2px 4px #000000; }



	#banner-bar .text li a { color: #FFF; text-decoration: none; }



	#banner-bar .text li a:hover { color: #F84A01; }



	#banner-bar { }

	#banner-bar { }



	



	/* content-part */



	#content-part { position: relative; }



		



		/* contact-bar */



		.contact-bar { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; }



		.contact-bar .contactbox { padding: 60px 53px 10px 65px; margin-top: 40px; height: 550px; max-height: calc(100% - 100px); position: absolute; left: 50%; top: 50%; width: 965px; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); background: rgba(255,255,255,0.7); }



		.contact-bar h1 { padding-top: 20px; color: #0064A2; font-size: 101px; float: left; line-height: 101px; }



		.contact-bar .leftext { padding-bottom: 15px; overflow: hidden; }



		.contact-bar .address { float: right; width: 414px; }



		.contact-bar .address p { color: #000; font-size: 21px; line-height: 32px; font-family: 'Open Sans', sans-serif; font-weight: 600; }



		.contact-bar .address a { color: #000; text-decoration: none; }



		.contact-bar .contact { overflow: hidden; min-height: 500px; }



		.contact-bar .contact .wpcf7-form-control-wrap { float: left; width: 49%; margin-bottom: 18px; }



		.contact-bar .contact .wpcf7-form-control-wrap:nth-child(even) { float: right; }



		.contact-bar .contact input.wpcf7-text, .contact-bar .contact textarea { padding: 0 14px; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 17px; color: #666666; width: 100%; height: 36px; border: 0px; background: #FFF; }



		.contact-bar .contact textarea { padding: 14px; resize: none; display: block; height: 125px; }



		.contact-bar .contact span.your-message { width: 100%; }



		.contact-bar .contact input[type="submit"] { clear: both; margin: 0 auto; width: 140px; height: 42px; border: 0px; cursor: pointer; color: #FFF; border: 0px; font-size: 17px; font-family: 'Open Sans', sans-serif; font-weight: 600; margin: 0 auto; display: block; background: #007CBA; }

		.contact-bar .contact input[type="submit"]:hover { background: #F84A01; }



		.contact-bar .contact div.wpcf7 .ajax-loader { position: absolute; right: 0px; bottom: 0px; }



		.contact-bar .contact div.wpcf7-response-output { margin: 0px; padding: 0px; border: 0px; text-align: center; color: #F00; }

		

		.contact-bar .contact div.wpcf7-mail-sent-ok { color: #063; }



		.contact-bar .contact span.wpcf7-not-valid-tip { display: none !important; }



		.contact-bar .contact .wpcf7-not-valid { border: #F00 solid 1px !important; }

		.contact-bar .scrollable.default-skin .scroll-bar.vertical { margin-right: -40px; }

		



		/* fanmail-bar */



		.fanmail-bar { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: left top; }



		.fanmail-bar .content { padding: 155px 24px 40px 44px; position: absolute; right: 60px; top: 0px; width: 886px; height: 100%; background: rgba(255,255,255,0.8); }



		.fanmail-bar h1 { padding: 20px 0 50px 0; color: #2B56C1; font-size: 101px; line-height: 101px; text-align: center; }



		.fanmail-bar ul { padding-right: 55px; list-style: none; overflow: hidden; }



		.fanmail-bar li { padding-bottom: 30px; overflow: hidden; }



		.fanmail-bar p { padding: 0px; font-family: 'Open Sans', sans-serif; color: #000; font-weight: 600; font-size: 18px; line-height: 27px; letter-spacing: 0.065em; }



		.fanmail-bar span { float: right; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 0.025em; color: #000; }



		.fanmail-bar { }



		.fanmail-bar { }



		.fanmail-bar.websites { }



		.fanmail-bar.websites .content { padding: 145px 24px 40px 40px; right: 185px; width: 746px; background: rgba(0,100,162,0.8); }



		.fanmail-bar.websites h1 { padding-bottom: 9px; color: #e0b300; text-align: center; }



		.fanmail-bar.websites .overview { width: 100%; }



		.fanmail-bar.websites p { text-align: center; color: #FFF; font-size: 25px; font-family: 'coconregular'; font-weight: 400; letter-spacing: normal; }



		.fanmail-bar.websites .leftside { padding: 50px 0px 0px 24px; float: left; width: 50%; }



		.fanmail-bar.websites .rightside { padding: 50px 0px 0px 0px; float: right; width: 44%; }



		.fanmail-bar.websites h4 { padding-bottom: 3px; color: #FFF; font-size: 18px; font-family: 'Open Sans', sans-serif; font-weight: 600; letter-spacing: 0.08em; }



		.fanmail-bar.websites ul { padding: 0px 20px 29px 0px; }



		.fanmail-bar.websites li { padding: 0px 0px 0px 30px; font-size: 18px; font-family: 'Open Sans', sans-serif; font-weight: 600; position: relative; letter-spacing: 0.07em; line-height: 26px; }



		.fanmail-bar.websites li a { color: #FFF; text-decoration: none; }

		.fanmail-bar.websites li a:hover { color: #e0b300; }



		.fanmail-bar.websites li:before { content: ""; position: absolute; left: 0px; top: 10px; width: 5px; height: 5px; border-radius: 50%; -webkit-border-radius: 50%; background: #FFF; }



		.fanmail-bar.websites { }



		.fanmail-bar.aboutpage { }



		.fanmail-bar.aboutpage .content { padding: 20px 24px 20px 20px; margin-top: 40px; height: calc(100vh - 220px); width: 980px; right: auto; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); background: #000; }



		.fanmail-bar.aboutpage h1 { padding: 0px 0px 30px 0px; text-align: left; color: #577da2; }



		.fanmail-bar.aboutpage .scrollable .viewport .overview { padding-right: 30px; }



		.fanmail-bar.aboutpage p { padding-bottom: 20px; color: #FFF; }

		.fanmail-bar.aboutpage ul { padding-left: 20px; margin-left: 3px; list-style: disc; color: #FFF; overflow: visible; }

		.fanmail-bar.aboutpage li { padding-left: 10px; color: #FFF; font-family: 'Open Sans', sans-serif; overflow: visible; font-weight: 600; font-size: 18px; line-height: 27px; letter-spacing: 0.065em; }

		.fanmail-bar.aboutpage a { color: #ff4d0b; }

		.fanmail-bar.aboutpage h2 { padding-bottom: 10px; color: #FFF; font-size: 24px; }

		.fanmail-bar.aboutpage { }



		.fanmail-bar.aboutpage h3 { font-size: 25px; color: #FFF; font-weight: 400; }



		.container { width: 100%; height: 100%; }



		



		/* portfolio-bar */



		.portfolio-bar { padding: 0px; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; }



		.portfolio-bar .content { padding: 30px 70px 20px 50px; position: absolute; left: 50%; top: 132px; transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 1800px; height: calc(100% - 197px); background: #fff; }



		.portfolio-bar h1 { padding: 15px 0 35px 0; color: #0063a5; font-size: 63px; line-height: 63px; }



		.portfolio-bar .leftlist { float: left; width: 20%; height: 100%; }

		.portfolio-bar .leftlist ul.listing { padding-left: 20px; display: none; }

		.portfolio-bar .leftlist h3 { font-size: 22px; cursor: pointer; }

		.portfolio-bar .leftlist ul.acc1 { display: block; }



		.portfolio-bar ul { list-style: none; }



		.portfolio-bar li { line-height: 24px; cursor: pointer; color: #999999; font-size: 14px; font-family: 'Open Sans', sans-serif; font-weight: 600; }

		.portfolio-bar li:hover { color: #0063a5; }

		.portfolio-bar .leftlist h3 { padding-right: 25px; }

		



		.portfolio-bar .rightlogos { float: right; width: 78%; height: 100%; overflow: hidden; border: #c0c0c0 solid 2px; position: relative; }



		.portfolio-bar .rightlogos .listingport ul { list-style: none; overflow: hidden; }

		.portfolio-bar .rightlogos .listingport { display: none; }

		.portfolio-bar .rightlogos .listingport#list1 { display: block; }

		.portfolio-bar #mobselect { display: none; }



		.portfolio-bar .rightlogos li { width: 100%; height: 100%; display: none; }



		.portfolio-bar .rightlogos li img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); max-width: 80%; height: auto; }



		.portfolio-bar .rightlogos li h4 { display: none; }



		.portfolio-bar .rightlogos li:first-child { display: block; }



		.portfolio-bar .rightlogos a.prev, .portfolio-bar .rightlogos a.next { position: absolute; left: 28px; top: 50%; margin-top: -18px; width: 36px; height: 36px; display: block; font-size: 0px; background: url('images/prev.png') no-repeat; }



		.portfolio-bar .rightlogos a.next { left: auto; right: 28px; background: url('images/next.png') no-repeat; }



		.portfolio-bar h1.mobheading { display: none; }



		



		.scrollable.default-skin .scroll-bar.vertical { width: 18px; border: #d9d9d9 solid 2px; border-radius: 40px; -webkit-border-radius: 40px; background: #FFF; }



		.scrollable.default-skin .scroll-bar .thumb { opacity: 0.3; border-radius: 40px !important; -webkit-border-radius: 40px !important; }



		#vertical-scrollbar-demo { height: 300px; width: 100%; }







        /*Horizontal scrollbar - set width and height of a div you want to add a scrollbar to*/



        #horizontal-scrollbar-demo {



            width: 400px;



            height: 200px;



        }







        /*Horizontal scrollbar - set width of overview or make it expand horizontal like below*/



        #horizontal-scrollbar-demo .overview {



            /*width: 1836px;*/



            /* or */



            white-space: nowrap;



        }







        #horizontal-scrollbar-demo img {



            height: 180px;



            width: 180px;



        }







        /*Vertical and horizontal scrollbar - set width and height of a div you want to add a scrollbar to*/



        #vertical-horizontal-scrollbar-demo {



            width: 400px;



            height: 200px;



        }







        #vertical-horizontal-scrollbar-demo .overview {



            width: 600px;



        }







        /* Vertical and horizontal scrollbar - one extra step required - add width of overview - overall width of scrolled content*/



        #min-thumb-size-demo .overview {



            width: 600px;



        }







        /*Vertical and horizontal scrollbar - set width and height of a div you want to add a scrollbar to*/



        #min-thumb-size-demo {



            width: 400px;



            height: 200px;



        }







        /* Vertical and horizontal scrollbar - one extra step required - add width of overview - overall width of scrolled content*/



        #min-thumb-size-demo .overview {



            width: 600px;



        }







        #min-thumb-size-demo .vertical .thumb {



            min-height: 150px;



        }







        #min-thumb-size-demo .horizontal .thumb {



            min-width: 300px;



        }







        #fixed-thumb-size-demo {



            width: 400px;



            height: 200px;



        }







        /* Vertical and horizontal scrollbar - one extra step required - add width of overview - overall width of scrolled content*/



        #fixed-thumb-size-demo .overview {



            width: 600px;



        }







        /*No scrollbar needed*/



        #no-scrollbar-needed {



            max-height: 100px;



            max-width: 400px;



        }



		



		/* ads-bar */



		.ads-bar { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; }



		.ads-bar .content { padding: 35px 20px 42px 20px; margin-top: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); width: 665px; background: rgba(0,0,0,0.8); text-align: center; }



		.ads-bar h1 { padding: 0px 0 50px 0; color: #fff; font-size: 150px; line-height: 150px; }



		.ads-bar p { padding-bottom: 30px; color: #FFF; font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: -0.01em; }

		.ads-bar p a { color: #FFF; }

		.ads-bar p a:hover { text-decoration: none; }

		/*.ads-bar a.portfoliolink { padding-left: 64px; display:inline-block; line-height: 40px; font-size: 25px; color: #FFF; text-decoration: none; background-repeat: no-repeat; background-position: left; }*/



		.ads-bar a.portfoliolink { padding-left: 66px; color: #FFF; line-height: 41px; display: inline-block; font-size: 25px; text-decoration: none; background: url('images/portfolio-icon.png') left no-repeat; }



		.ads-bar.graphicdesign .content { padding: 25px 40px 42px 85px; width: 100%; max-width: 1214px; background: rgba(61,38,22,0.8); }



		.ads-bar.graphicdesign h1 { padding-bottom: 15px; text-shadow: 4px 3px 2px #000000; text-align: left; }



		.ads-bar.graphicdesign p { padding: 0px 0px 30px 0px; }



 		.ads-bar.graphicdesign { }



		.ads-bar.writing { }



		.ads-bar.writing .content { padding: 20px 0px 10px 0px; width: 100%; background: rgba(0,100,165,0.8); text-align: left; }



		.ads-bar.writing .midcontent { padding: 0 20px; overflow: hidden; max-width: 1310px; margin: 0 auto; }



		.ads-bar.writing .text { padding-top: 35px; float: right; width: 595px; }



		.ads-bar.writing .heading { width: 540px; float: left; }



		.ads-bar.writing h1 { padding-bottom: 10px; color: #f5d636; text-shadow: 4px 3px 2px #000000; }



		.ads-bar.writing { }



		.ads-bar.webdev { }



		.ads-bar.webdev .content { padding: 0px; width: 1550px; background: none; }



		.ads-bar.webdev h1 { padding-bottom: 40px; text-shadow: 4px 3px 2px #000000; }



		.ads-bar.webdev .text { padding: 30px 30px 20px 70px; height: 400px; overflow: hidden; background: rgba(255,255,255,0.8); }



		.ads-bar.webdev .text .scrollable .viewport .overview { width: 100%; }



		.ads-bar.webdev .block { float: left; width: 25%; }



		.ads-bar.webdev .text p { text-align: center; color: #000; }



		.ads-bar.webdev .contentbg { width: 100%; text-align: left; }



		.ads-bar.webdev h4 { font-size: 18px; font-weight: 600; text-transform: uppercase; color: #000; }



		.ads-bar.webdev ul { padding-bottom: 25px; list-style: none; }



		.ads-bar.webdev li { padding-left: 26px; color: #000; position: relative; font-size: 18px; line-height: 24px; }



		.ads-bar.webdev li:before { content: ""; position: absolute; left: 0px; top: 10px; width: 5px; height: 5px; border-radius: 50%; -webkit-border-radius: 50%; background: #000; }



		



		/* logos-bar */



		.logos-bar { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: right bottom; }



		.logos-bar .content { position: absolute; left: 130px; bottom: 60px; max-width: 685px; overflow: hidden; }



		.logos-bar h1 { padding: 0 0 7px 0; color: #F84A01; font-size: 101px; line-height: 101px; }



		.logos-bar p { padding: 0px 0px 35px 0px; font-size: 25px; line-height: 30px; letter-spacing: -0.01em; font-family: 'coconregular'; color: #FFF; }



		.logos-bar a.viewportfolio { padding-left: 66px; color: #FFF; line-height: 41px; float: left; text-decoration: none; background: url('images/portfolio-icon.png') left no-repeat; }



		



		#centercontent { padding: 155px 15px 25px; overflow: hidden; max-width: 1830px; margin: 0 auto; }



		



			/* left-bar */



			.left-bar { float: left; width: 26.16%; margin-right: 2.1%; }



			.left-bar img { border: #000 solid 3px; border-radius: 10px; -webkit-border-radius: 10px; }



			.left-bar.formobile { display: none; }



			



			/* news-bar */



			.news-bar { padding: 40px 45px 24px 40px; float: left; width: 53.61%; border: #bfbfbf solid 2px; }



			.news-bar h1 { padding-bottom: 10px; color: #F84A01; font-size: 49px; }



			.news-bar .righimg { float: right; width: 52%; margin: 40px 0px 0px 20px; }



			.news-bar .righimg img { max-width: 100%; height: auto; }



			.news-bar h2 { padding-bottom: 20px; font-size: 33px; color: #0064A2; font-family: 'Open Sans', sans-serif; font-weight: 400; }



			.news-bar .righimg ul { list-style: none; overflow: hidden; }



			.news-bar .righimg li { padding-top: 20px; overflow: hidden; }



			.news-bar .righimg li img.wborder { border: #acacac solid 1px; }



			.news-bar p { padding-bottom: 30px; color: #808080; font-size: 18px; line-height: 26px; }



			.news-bar h3 { padding-bottom: 20px; color: #F84A01; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 21px; }

			.news-bar a, .news-bar a:hover, .news-bar a:visited, .news-bar a:focus { color: #007abf; text-decoration: none; }



			



			/* right-bar */



			.right-bar { float: right; width: 16.16%; }



			.right-bar h4 { padding-bottom: 10px; text-decoration: underline; font-size: 18px; color: #F84A01; font-family: 'Open Sans', sans-serif; font-weight: 600; cursor: pointer; }



			.right-bar ul { padding-bottom: 30px; list-style: none; overflow: hidden; display: none; }



			.right-bar li { line-height: 26px; }



			.right-bar li a { color: #808080; text-decoration: none; font-size: 18px; font-family: 'Open Sans', sans-serif; font-weight: 600; }



			.right-bar li a:hover { color: #0064A2; }



			.right-bar { }



			.right-bar .activelist h4 { padding-bottom: 20px; text-decoration: none; cursor: text; font-size: 33px; color: #0064A2; font-family: 'Open Sans', sans-serif; font-weight: 400; }



			.right-bar .activelist ul { display: block; }



		



	/* footer-part */



	#footer-part { }







.alignright { float: right; margin: 0px 0px 0px 20px; }



.alignleft { float: left; margin: 0px 20px 0px 0px; }