@font-face {
	font-family: 'Novecento';
	src: url('Novecentosanswide-Medium.otf');
	src: url('font/Novecentosanswide-Medium.eot?#iefix') format('embedded-opentype'),
		url('font/Novecentosanswide-Medium.svg#novecento_widenormal') format('svg'),
		url('font/Novecentosanswide-Medium.woff') format('woff'),
		url('font/Novecentosanswide-Medium.ttf') format('truetype');		
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Novecento';
	src: url('../font/novecentowide-demibold-webfont.eot');
	src: url('../font/novecentowide-demibold-webfont.eot?#iefix') format('embedded-opentype'),
		url('../font/novecentowide-demibold-webfont.svg#novecento_widedemibold') format('svg'),
		url('../font/novecentowide-demibold-webfont.woff') format('woff'),
		url('../font/novecentowide-demibold-webfont.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'proxima';
	src: url('../font/proximanova-light-webfont.eot');
	src: url('../font/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
		url('../font/proximanova-light-webfont.woff') format('woff'),
		url('../font/proximanova-light-webfont.ttf') format('truetype'),
		url('../font/proximanova-light-webfont.svg#proxima_novalight') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'proxima';
	src: url('../font/proximanova-bold-webfont.eot');
	src: url('../font/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
		url('../font/proximanova-bold-webfont.woff') format('woff'),
		url('../font/proximanova-bold-webfont.ttf') format('truetype'),
		url('../font/proximanova-bold-webfont.svg#proxima_novabold') format('svg');
	font-weight: bold;
	font-style: normal;
}

body, html {height: 100%; margin:0; padding:0; font-size:100%; -webkit-overflow-scrolling: touch;}
body{color:#000; background:#202020; -webkit-overflow-scroll: touch;-webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering:optimizeLegibility; -webkit-backface-visibility: hidden}
::selection { background: rgba(253,110,110,.3); color:#fff }
::-moz-selection {background: rgba(253,110,110,.3); color:#fff}
h1{color:#fff; font-family:'Novecento', sans-serif; font-size:53px; margin:0; line-height:60px; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering:optimizeLegibility;}
h2{font:bold 27px 'proxima', sans-serif;margin:0;color:#666}
h2 span{display:block;color:#FFFFFF;font:100 18px/30px 'proxima', sans-serif;margin-top:10px;max-width:400px}
h3{font:bold 37px 'Novecento', sans-serif; margin:0; color:#fff}
h3 span.bullet{font:bold 22px 'Novecento', sans-serif; margin:0; color:#000}
h5{font:18px 'Open Sans', sans-serif; margin:0}
p, div, li{font-family: Proxima, Arial, Helvetica, sans-serif;color:#FFFFFF;font-size:13px;margin:0;line-height:24px;font-weight:400;-webkit-font-smoothing: antialiased;font-smoothing: antialiased;text-rendering:optimizeLegibility;}
p b{font-weight:700}
p{font-size: 15px; color:#000}
a{text-decoration:none;outline:none;color:#FFFFFF}
a:hover{color:#EC6262}
.fleft{float:left}
.fright{float:right}
.clear{clear:both}
*, *:before, *:after{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a img{border:0}
#frame .nomr{margin-right: 0}
#frame{position:absolute; width:100%;top:0; left:0; overflow:hidden; z-index:222}
hr{	border: 0; margin: 50px 0;  height: 1px}
body *{-webkit-backface-visibility: hidden}


.wrap{width:1024px; margin:0 auto; overflow:hidden; margin-bottom:25px;}
.wrap_nav{width:1024px; margin:0 auto; overflow:hidden; margin-bottom:7px;}
body .buap {margin:39px 0 0;padding:21px 25px;width:300px;}
body .buto{padding:13px 25px; cursor:pointer;text-align:center; border-radius:4px;text-shadow:1px 1px 0px rgba(0, 0, 0, .1);font:bold 16px "Novecento"; text-transform:uppercase;color:#fff; letter-spacing:1px;background-color:#EC6262;display:inline-block; border:1px solid #EC6262;}
body .buto:hover{background-color:#202020; color:#fff; text-shadow:none; border-color:#202020}
body .buto:active{box-shadow:inset 1px 3px 1px rgba(0,0,0,.05);text-shadow:none;}


.preloader {
  background-color:#EC6262;
  color:#FFFFFF;
  height:100%;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:9999999;
}
.signal {
  -webkit-animation:pulsate 1s ease-out infinite;
  -webkit-animation-play-state:initial;
  border:3px solid #FFFFFF;
  border-radius:30px;
  height:30px;
  left:50%;
  margin:-15px 0 0 -15px;
  opacity:0;
  position:absolute;
  top:50%;
  width:30px;
}
.preloader-content {
  font-size:24px;
  font-weight:400;
  height:200px;
  left:50%;
  margin:-100px 0 0 -100px;
  position:absolute;
  text-align:center;
  top:50%;
  width:200px;
}


/* #Lists
================================================== */

ul { list-style: none outside; }
ol { list-style: decimal; }


ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 0px; font-size: 90%;  }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }

li p { line-height: 21px; }
	
	

/* SCROLLBAR */
::-webkit-scrollbar {width: 5px;background:#202020;height: 5px;opacity: 0;}
::-webkit-scrollbar-thumb { background: #EC6262;}
::-webkit-scrollbar-thumb:hover {background: #EC6262;}

 /* #Base 960 Grid
================================================== */
.wrap p { color:#444;font-family: 'Novecento',sans-serif;font-size: 15px;font-weight: 400;text-align:justify;}
.columns,.two.columns { float: left;display: inline;}
.row { margin-bottom: 20px; }

/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }

/* Base Grid */
.one.columns { width: 220px;text-align: center;margin-left: 15px;}
.two.columns {width: 460px;}

 
#spinner {position:fixed;z-index:10;top:0;left:0;width:100%;height:100%;background:#000;}
#spinner:after {position:absolute;content:'';display:block;top:50%;left:50%;width:50px;height:43px;margin-top:-21px;margin-left:-25px;background-image:url("i/loader-anim.gif");}

.dotted-bar2 {background: url(i/dotted-bg.png) repeat;width: 100%;height: 44px;position: relative;z-index: 300;text-align: center;}.dotted-bar2 a, .dotted-bar3 a {display: inline-block;}.top {background: url(i/top.png) no-repeat;width: 223px;height: 34px;top: 6px;position: relative;margin: auto;display: inline-block;}.top:hover {background-position: 0 -34px;}.top-bar {background: #fcd996;width: 100%;height: 2px;position: fixed;z-index: 200;}


/* Menus */
.logo{margin:31px 0 0}
.menu{margin:0 auto; overflow:hidden; width:100%; padding:0; background:none; box-shadow:none}
.menu .fright{margin:0; text-align:right;color:#000}
.menu a{margin:0; font:bold 13px/85px 'Novecento', sans-serif; color:#fff; cursor:pointer; letter-spacing:1px}
.menu a:hover{box-shadow:0 -1px 0 #fff}


#menua{ top:0; right:0; position:fixed; z-index:400; padding:0;box-shadow:0 1px 2px rgba(0,0,0,.1); background-color:rgba(255,255,255,1)}
#menua.f{margin-top:0; opacity:1}
#menua .fright a{margin:0; color:#202020; line-height:71px;  float:none}
#menua a:hover{color:#666 !important;}
#menua .logo{font:bold 20px/13px novecento;color:#000;margin:23px 0 0;width:100px;height:36px;display:block;background:transparent url(i/s-logos.png) no-repeat 0 1px}
#menua .logo:hover{background-position:0 -30px;}
#menua .logo:before {content: ''; background: url(../i/home.png) no-repeat;width: 23px; display: block;height: 19px;margin:42px 0 0 -30px;position: absolute;opacity:0;-webkit-transition: all 0.15s ease-in-out;-moz-transition: all 0.15s ease-in-out;-ms-transition: all 0.15s ease-in-out;-o-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;}
#menua .logo:hover:before{opacity: 1;margin:-2px 0 0 -30px}
.menu .current{color:#fff;}
#menua .fright .current{color:#EC6262}




#menuf{margin-top:-75px; top:0; right:0; position:fixed; z-index:400; padding:0;box-shadow:0 1px 2px rgba(0,0,0,.1); background-color:rgba(255,255,255,1)}
#menuf.f{margin-top:0; opacity:1}
#menuf .fright a{margin:0; color:#202020; line-height:71px; display:inline-block; float:none}
#menuf a:hover{color:#666 !important;}
#menuf .logo{font:bold 20px/13px novecento;color:#000;margin:23px 0 0;width:100px;height:36px;display:block;background:transparent url(i/s-logos.png) no-repeat 0 1px}
#menuf .logo:hover{background-position:0 -30px;}
#menuf .logo:before {content: ''; background: url(../i/home.png) no-repeat;width: 23px; display: block;height: 19px;margin:42px 0 0 -30px;position: absolute;opacity:0;-webkit-transition: all 0.15s ease-in-out;-moz-transition: all 0.15s ease-in-out;-ms-transition: all 0.15s ease-in-out;-o-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;}
#menuf .logo:hover:before{opacity: 1;margin:-2px 0 0 -30px}
.menu .current{color:#fff;}
#menuf .fright .current{color:#EC6262}
#menur{position:fixed;top:0;right:0;background-color:rgba(0,0,0,.9); z-index:555; width: 240px; padding:0}
.burguer{width:60px;height:60px;display: block;background:rgba(0,0,0,.9) url(i/hamburger2.gif) no-repeat center;display: none;position: absolute;margin-left:-60px;top: 0; left:0; cursor: pointer; -webkit-transform: rotate(90deg);-moz-transform:rotate(90deg);transform:rotate(90deg); z-index:555
}
#menur a{display: block;color:#eee;font:15px/60px 'Novecento', sans-serif;padding:0 0 0 20px;border-bottom:1px solid rgba(255,255,255.6);letter-spacing:1px}
#menur a:hover{color: #fff;background: #555}
#menur.ocult{right:-240px}
#menur.ocult .burguer{-webkit-transform: rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg); background-color:rgba(0,0,0,0);}

.wellcome{opacity:0}

/* Apartats */
.ap{margin:0 auto;padding:50px 50p 50px;overflow:hidden;background:rgba(255,255,255,.95);position:relative;}
.ap.alternate{background:rgba(0,0,0,.8); }
.ap.alternate p, .ap.alternate h2, .ap.alternate h2 span{color:#666666; }
.ap h2{margin:50px auto 40px;text-align:left;}
.ap h3{margin:0px auto 30px;}

/* Hello*/
#hello{margin:0 auto; position:relative}
#badge{position:fixed; top:25%; left:50%; margin:0 0 0 -408px;text-align:center}
#hello h1{color:#f1f1f1;font-family: 'Novecento', sans-serif;font-size:58px;margin: 0;line-height: 20px;letter-spacing:normal;padding: 15px 0;}
#hello .buto{color:#fff; border-color:#fff; background-color:transparent; margin:20px auto 0}
#hello .buto:hover{background-color:rgb(85, 94, 106); color:#fff; text-shadow:none; border-color:rgb(85, 94, 106)}


/* Intro */
#intro{padding:50px; border:none;background:rgba(255,255,255,.95)}
#intro h1{margin: 0 0 2px;font-size:27px;font-family:"Novecento", sans-serif;text-align: justify;color:#000;border-bottom: 1px solid #dedede;display: inline;padding-bottom: 8px;font-weight: 500;letter-spacing:3px;}
#intro h1 b{color:#202020;font-weight: 900;}
#background{background-repeat:no-repeat; background-position:right center; width:100%; height:100%; position:fixed; background-size:cover; z-index:111}

/* Home */
#home{padding:0; text-align:left; height:1000px; background:transparent}
.pattern{background:rgba(0,0,0,.1) url(i/cf-bg.png) repeat;height:100%;width:100%}

#frame span.small {font-family: "Pacifico", sans-serif;font-size: 70px;font-weight: lighter;line-height: normal;text-align: center;}
#frame span.brand {font-family: 'Novecento', sans-serif;font-size:24px;font-weight: 500;line-height: 20px;text-transform: uppercase; margin-top:10px;
text-align:justify;}
#frame span.intro_line {width: 125px;border-bottom: 1px solid #fff;display: inline-block;margin-bottom:20px;}
#frame span.cursive {font-family: 'Marck Script', cursive;font-size: 12px;text-transform: none;position:relative;Bottom:15px;margin: 0 10px 0 10px;}




/* PORTFOLIO*/

#portfolio{padding-bottom:80px; }
#portfolio .miniraya{margin:10px 0;width:100px;height:2px;background-color:#FCD996; display:block}
.demo{margin:0 50px 50px 0; background-position:center; background-repeat:no-repeat; width:485px; height:300px; box-shadow:0 3px 10px rgba(0, 0, 0, 0.06); background-size:cover; position:relative; } 
.demo a{display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center; text-decoration:none; overflow:hidden; position:absolute} 
.demo a:hover{background-color:#FCD996}
.demo a:hover span{opacity:1; -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); transform:translateY(100px)}
.demo span{font:bold 25px 'Novecento', sans-serif; color:#FFF; opacity:0; display:block; -webkit-transform:translateY(200px); -ms-transform:translateY(200px); transform:translateY(200px); text-align:center; margin:0 auto; padding-top:40px; background:url(i/style/eye-1.png) no-repeat center 0}
.browser{height:20px;  }
.browser:after{display:block; background:url(i/boletes.png) no-repeat 0 center; position:absolute; margin:7px 0 0 8px; width:24px; height:6px; content:''}
.browser.nobolas:after{display:none}
#portfolio .browser{width:485px}




/*about*/
#about{background: rgba(255,255,255,.95); padding-bottom:69px;}
#about .miniraya{margin:10px 0;width:140px;height:2px;background-color:#FCD996; display:block}
#leftsol p{margin-top:15px;}
#about .btn {margin:29px 0 29px 5px;font:bold 15px 'Novecento', sans-serif;}

#visor{width: 681px;height:668px;position: absolute;left: 0;top:170px;overflow: hidden;background: transparent url(i/mac-corner.png) no-repeat 0 top;}
#visor:after{content:''; display:block; width:653px; height:518px; background: url(i/reflex.png) no-repeat 0 0; position:absolute; margin:-66px 0 0 0}
#visor img{position:absolute; top:50px; left:0px; opacity:0}
#visor img.a{opacity:1}
#visor .browser{ width:623px; margin-top:32px; background-color:#444}
#visor .browser:after{right:85px}
#tipos{width:43%; margin-top:25px}
#tipos p{font-family: 'Novecento', sans-serif;}
#tipos h3{font-family: 'Novecento', sans-serif;}

.tipo{text-align: left;margin-bottom:26px;padding-bottom: 38px;cursor: pointer;margin-top:20px;}
.tipo h3.active, .tipo:hover h3.active{color:#EC6262; background: url(../i/check.png) no-repeat 10px 8px}
.tipo:hover h3{color:#000;background: url(../i/checkg.png) no-repeat 10px 8px}
.tipo h3{margin:7px 0 0px; font:20px 'Novecento', sans-serif; padding-left:3px; color:#666; background-position:0 8px}
.tipo p { padding-left: 5px; margin-top: 10px; line-height: 24px}



/* Services */
#services .miniraya{margin:10px 0;width:135px;height:2px;background-color:#FCD996; display:block}
.service{float: left;padding:0 20px 30px 55px;margin: 0 20px 30px 0;width:32%;background-position:0 0;background-repeat: no-repeat;text-align:left}
.service p{color:#333; text-align:left;}
.service h3{margin-bottom:4px;padding-bottom: 4px;color:#202020;font:bold 23px'Novecento', sans-serif;}
.s4{background-image:url(i/32/leaf.png)}
.s5{background-image:url(i/32/settings.png)}
.s6{background-image:url(i//32/thumbup.png)}
#services h2, #services h2 span, #services h3{color:#666666}
#services p{color:#666666;font-size:15px;line-height: 28px}



/* Contact */
#contact{padding-bottom:70px}
#contact h2{color:#FFFFFF;}
#contact h3{color:#FFFFFF;text-transform: uppercase;}


#contact p{color:#FFFFFF;}
#contact .miniraya{margin:10px 0;width:130px;height:2px;background-color:#FCD996; display:block}
#contact hr{display: none}

/* #COL1 */ 
.three.columns {float: left;width: 640px;font: 15px 'Novecento', sans-serif; margin-top:20px;}

/* #Formulaire */
  		
.form{overflow:hidden;}
.formTitle{color: #FFFFFF;font-size:1.2em;line-height: 1.2em;font-weight: 500;font-family:'Novecento', sans-serif;text-transform:uppercase;}
.form .short_alpha{float: left;width: 300px;margin-bottom: 30px;}
.form .short{float: left;width: 300px;margin-left:18px;}
.form .long{float: left;width: 620px;}
.form {margin-bottom: 25px;}
.formTitle{margin-bottom:5px}
.inputArea{width: 280px;padding: 13px 0 15px 15px;display: block;background:inherit;font-size: 1.4em;color:#666;border:1px solid #FFF;padding:10px 5px;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);}
.inputArea:focus{color: #fff;}
.inputSelect{height: 49px;width: 300px;padding: 13px 15px;display: block;font-size: 1.4em;color:#666;border:1px solid #FFF;padding:10px 5px;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);}
.inputSelect:focus{color: #fff;}
.inputSelect option{display: block;padding-bottom: 7px;padding-left: 10px;}
.inputLongArea{padding: 13px 0 15px 15px;width: 600px;display: block;font-size: 1.4em;color:#666;border:1px solid #FFF;padding:10px 5px;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);}
.inputLongArea:focus{color:#8e0303;}
.msgArea{padding: 13px 0 15px 15px;width: 600px;height: 270px;display: block;font-size: 1.5em;letter-spacing: .01em;font: 24px 'Novecento', sans-serif;background:inherit;color:#666;border:1px solid #FFF;padding:10px 5px;	-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);	-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);}
.msgArea:focus{color: #fff;}
.submitInquiryBtn{opacity:1;float: left;width: 600px;height: 50px;display: block;background:#EC6262 url(i/style/light_lines.png) repeat;color:#eee;line-height:1;text-align:center;text-shadow:0 1px 1px #555;font-size:17px;cursor: pointer;margin-top:35px;color:#FFF;border:1px solid #FFF;padding:10px 5px;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.4);box-shadow:inset 0 1px 3px rgba(0,0,0,0.4); }
.submitInquiryBtn:hover{opacity:0.7;}



/* #COL3 */

.five.columns  {float: left;margin-left: 50px;}	
.five.columns .formTitle{font: 25px 'Novecento', sans-serif;}
.five.columns p {margin-top:15px;font: 15px 'Novecento', sans-serif;margin-left: 5px;margin-top: 25px;text-align:justify;}
.contact-skills1 {background-attachment: scroll;background-clip: border-box;background-color: transparent;background-image: url("i/mail.png");background-origin: padding-box;background-position: 0 0px;background-repeat: no-repeat;background-size: auto auto;height: 32px;margin-top: 20px;width: 290px;margin-left: 5px;}
.contact-skills3 {background-attachment: scroll;background-clip: border-box;background-color: transparent;background-image: url("i/phone.png");background-origin: padding-box;background-position: 0 0;background-repeat: no-repeat;background-size: auto auto;height: 32px;width: 290px;margin-left: 5px;}
.contact-skills4 {background-attachment: scroll;background-clip: border-box;background-color: transparent;background-image: url("i/icon-vCard.png");background-origin: padding-box;background-position: 0 0;background-repeat: no-repeat;background-size: auto auto;height: 32px;margin-top: 10px;margin-left: 5px;}
.contact-skills1 p {text-indent:3em;position:relative;top:6px;width: 235px;}
.contact-skills3 p {text-indent: 3em;position:relative;top:6px;width: 235px;}
.contact-skills4 p  {text-indent:3em;position:relative;top:6px;width: 235px;}
.contact-skills4 p a {text-decoration:none;color:#fff;	}
.contact-skills4 p a:hover {text-decoration:none;color:#EC6262;}
span.bullet {background-color: #FCD996;display: inline-block;height: 12px;margin-right: 6px;width: 5px;}
span.bullet2 {background-color: #FCD996;display: inline-block;height: 19px;margin-right: 6px;width: 5px;}


/* Footer */
#footer{color:#fff;width: 100%; }
.copy{background-color:rgba(0,0,0,.4);padding:5px 0;}
.copy p{color:#fff;font:100 10pt/20px 'Novecento', sans-serif;text-align:center;margin-top:20px;}


/* #Social media */
					
.social {margin-top:60px; width:300px;}
.social ul{margin-top:40px;padding: 0px; }
.social ul li {display: inline; margin: 0 8px 0 8px; }
.facebook {background: url(i/icn-facebook.png) no-repeat 0 0;width: 50px;height: 51px;display: inline-block;}
.twitter {background: url(i/icn-twitter.png) no-repeat 0 0;width: 50px;height: 51px;display: inline-block;}
.gplus {background: url(i/icn-gplus.png) no-repeat 0 0;width: 50px;height: 51px;display: inline-block;}
.linkedin {background: url(i/icn-linkedin.png) no-repeat 0 0;width: 51px;height: 51px;display: inline-block;}
.sprite {-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;transition-duration: 0.2s;-webkit-transition-property: background-position;-moz-transition-property: background-position;-o-transition-property: background-position;transition-property: background-position;}
.sprite:hover {background-position: 0 -51px;}







/* Animations */
.ani{-webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out}
.ani-cubic{-webkit-transition:all .5s cubic-bezier(1,0,0,1); -moz-transition:all .5s cubic-bezier(1,0,0,1); -o-transition:all .5s cubic-bezier(1,0,0,1); -ms-transition:all .5s cubic-bezier(1,0,0,1); transition:all .5s cubic-bezier(1,0,0,1)}

html .delay1{-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s}
html .delay2{-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}
html .delay3{-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}
html .delay4{-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}
html .delay5{-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s}
html .delay6{-webkit-animation-delay:.6s;-moz-animation-delay:.6s;animation-delay:.6s}
html .delay7{-webkit-animation-delay:.7s;-moz-animation-delay:.7s;animation-delay:.7s}
html .delay8{-webkit-animation-delay:.8s;-moz-animation-delay:.8s;animation-delay:.8s}

.enter{opacity:0; animation: enter .5s forwards; -webkit-animation: enter .5s forwards; -moz-animation: enter .5s forwards; }
@keyframes enter { 0%{ opacity:0; } 100%{ opacity:1} }
@-moz-keyframes enter { 0%{ opacity:0; } 100%{  opacity:1} }
@-webkit-keyframes enter { 0%{ opacity:0; } 100%{ opacity:1} }

.dawn{opacity:0; animation: dawn .3s forwards; -webkit-animation: dawn .3s forwards; -moz-animation: dawn .3s forwards; }
@keyframes dawn { 0%{ opacity:0; transform:scale(1.05)} 100%{ opacity:1; transform:scale(1)}}
@-moz-keyframes dawn { 0%{ opacity:0; -moz-transform:scale(1.05)} 100%{  opacity:1; -moz-transform:scale(1)}}
@-webkit-keyframes dawn { 0%{ opacity:0; -webkit-transform:scale(1.05)} 100%{ opacity:1;-webkit-transform:scale(1) }}

.floating{animation: floating 1.5s infinite; -webkit-animation: floating 1.5s infinite; -moz-animation: floating 1.5s infinite}
@keyframes floating { 0% {opacity:1; transform: translateY(0%);} 50% {opacity:1;transform: translateY(40%);} 100% {opacity:1;transform: translateY(0%);}}
@-webkit-keyframes floating { 0% {opacity:1;-webkit-transform: translateY(0%);} 50% {opacity:1;-webkit-transform: translateY(40%);}	100% {opacity:1;-webkit-transform: translateY(0%);}}
@-moz-keyframes floating { 0% {opacity:1;-moz-transform: translateY(0%);} 50% {opacity:1;-moz-transform: translateY(40%);} 100% {opacity:1;-moz-transform: translateY(0%);}}






/* Media Queries */




/* iPads (landscape) ----------- */
@media only screen 
and (max-width : 1124px) {
	.wellcome{opacity:1}
	.container{width:100%}
	.wrap{width:100% !important;padding:0 50px!important}
	.ap h2{margin:0 0 50px}	
	
    .burguer{display: block}
    #menuf, #home .menu{display:none}
	#hello{padding-left:50px; padding-right:50px}
	.menu .wrap{width:100% !important; padding:0 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	#intro .fleft{float:none; width:100%; text-align:center}
	#intro .fright{float:none; margin:40px auto 0}
	
	#tipos{float:none; width:100% !important}
	#visor{display:none}
	#about{height:auto}
	#leftsol{float:none}

	#portfolio .browser{width:429px}
	 #about .btn {display:none!important;} 
	 .og-grid li img{width:295px; }
	   
	.service{width:30%;margin: 0 34px 30px 0}
	
	.copy .wrap{padding:0 50px}
}

/* iPads (portrait) ----------- */
@media only screen 
and (max-width : 1024px)
and (orientation:portrait) {
	.container .wrap{padding:0 50px!important}
	.ap{padding:50px 0 !important}
	
	#hello h1{font-size:55px}
	#hello h2{font-size:18px}
	
	#visor{display:none}
	.service, .service.nomr{width: 34%; margin: 0 20px 0 !important}
	
	#portfolio .browser{margin:0 0 0 20px; width:310px}
	.og-grid li {margin: 0px 0px 0 0px!important;}	
}

@media only screen 
and (max-width : 900px) {
	#hello p{font-size:40px; line-height:40px}
	#intro h1{font-size:20px;line-height: 50px;}
	#home .menu .fright{display:none}
	#home .logo{float:none}
	#home .menu{text-align:center; position:relative !important}
	
	#visor{display:none}
	
	#portfolio .browser{margin:0; width:100%}
	#portfolio .fleft {float:none !important}
	#about .btn {display:none!important;}
	.service, .service.nomr{width:100% !important; margin:0 0 50px !important; height:auto }
	
	.form dl.short { float: none;margin-left: 0px;width:100%;}
	.form dl.long  {width:100%;}
	.container .four.columns {display: none;}
	.container .five.columns{ margin-left: 0;margin-top: 55px;}
	.inputArea {width:360px!important;}
	.form dl.short_alpha {float: none;}
	.msgArea{width: 360px!important;}
	ul.item-nav {display:none;}
	.submitInquiryBtn {width:360px!important; height:auto;margin-bottom: 10px;}
			
	#footer p{float:none !important; background:none}
	
}


/* iPads (portrait) ----------- */
 @media only screen and (min-width: 960px) and (max-width: 1024px) {
	.container .wrap{padding:0 50px}
	.ap{padding:50px 0 !important}
		
	.wrap h2{margin-top:40px;}
	#hello h1{font-size:55px}
	#hello h2{font-size:18px}
	#hello p{font-size:40px; line-height:40px;}
	#intro h1{font-size:27px;line-height: 50px;text-align: justify!important;}
	#intro .wrap{ width:980px;margin-left:0px;}
	#intro{padding:20px 0 20px 0px; text-align:justify;}
	
	#home .menu .fright{display:none!important;}
	#home .logo{float:none!important;}
	#home .menu{text-align:center; position:relative !important;}
	
	#visor{display:none}
	.tipo h3 {padding-left:0px;}
	.tipo p {padding-left:0px;}
	#about .btn {display:none!important;}
	
	#portfolio .browser{margin:0 0 0 20px; width:415px}
	.og-grid li {margin: 0px 0px 0 0px!important;}
	
	.service, .service.nomr{width:306px !important; margin:0 0 20px !important; padding:0 20px 30px 50px; }
	
	.container .five.columns					{ margin-top: 0; margin-left: 50px;}
	.container .three.columns {float:left !important;width:500px;}
	.form dl.short { float: none;margin-left: 0px;width:100%;}
	.form dl.long  {}
	.inputArea {width:500px!important;}
	.form dl.short_alpha {float: none;}
	.msgArea{width: 500px!important;}
	ul.item-nav {display:none;}
	.submitInquiryBtn {width:500px!important; height:auto;margin-bottom: 10px;}
	.container .five.columns {width:240px !important;margin-top:30px !important;}		
	
	#footer p{ margin-bottom:25px;}		
	}





/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
	.container .wrap{padding:0 50px;}
	.wrap h2{margin-top:40px;}
	#hello p{font-size:40px; line-height:40px}
	#intro h1{font-size:20px;line-height: 50px;}
	#intro .wrap{ width:700px;margin-left:0px;}
	#intro{padding:20px 0 20px 0px; text-align:justify;}
	
	#home .menu .fright{display:none!important;}
	#home .logo{float:none!important;}
	#home .menu{text-align:center; position:relative !important}
	
	#visor{display:none}
	#about .btn {display:none;}
	
	#portfolio .miniraya {width:100px;}
	#portfolio .browser{margin:0; width:100%}
	
	#portfolio .fleft {float:none !important}
	
	.service, .service.nomr{width:210px !important; margin: 0 0 10px 10px !important; height:auto;padding:0 20px 30px 40px; }
	
	.tipo h3 {padding-left:0px;}
	.tipo p {padding-left:0px;}
	
	.one-third {display:none;}
	.section-title h1.title p { font-size:21px!important; text-align:inherit!important;}
	.two-third img {width: 670px!important;}
	.two-third  {width: 100%!important;margin-top:30px;}
	.container .five.columns {margin-left:40px!important;}
	.container .three.columns {float:left !important;width:320px;}
	#contact .miniraya {width:130px;}
	.form dl.short { float: none;margin-left: 0px;width:100%;}
	.form dl.long  {width:100%;}
	.container .four.columns {display: none;}
	.container .five.columns{ margin-left: 0;margin-top: 30px;}
	.inputArea {width:320px!important;}
	.form dl.short_alpha {float: none;}
	.msgArea{width: 320px!important;}
	ul.item-nav {display:none;}
	.submitInquiryBtn {width:320px!important; height:auto;margin-bottom: 10px;}		
	#footer p{ margin-bottom:25px;}	
	.og-grid li {margin: 10px 14px 0 14px!important;}	
}

 @media only screen and (min-width: 799px) and (max-width : 800px) {
	
	#intro{padding:20px 0 20px 0px; text-align:justify;}
	.container .two.columns {width:320px;}
	.container .six.columns {width:320px!important; margin-top:0px;}
	.container .six.columns #skills{width:320px; }
	#visor{display:none}
	
	.one-third {display:none;}
	.section-title h1.title p { font-size:21px!important; text-align:inherit!important;}
	.two-third img {width: 700px!important;}
	.two-third  {width: 100%!important;margin-top:30px;}
	.service, .service.nomr{width:221px !important; }
	.og-expander h3 { font-size: 32px; }
	.og-expander p { font-size: 13px; }
	.og-expander a { font-size: 12px; }
	.og-grid li {margin: 10px 22px 0 23px!important;}
	}
	


 @media only screen and (min-width: 481px) and (max-width : 767px) {
 	#intro{padding:10px 0 10px 0px; text-align:justify;}
	#frame span.small {font-size:60px;}
	#frame span.brand {font-size:21px;}
	#frame span.intro_line { width:105px;}
	#frame span.cursive {font-size:12px;}
	#visor{display:none}
	#about .btn {display:none;}
	.container .wrap{padding:0 30px;}
	.wrap h2{margin-top:40px;}
	.one-third {display:none;}
	.section-title h1.title p { font-size:21px!important; text-align:inherit!important;}
	.two-third img {width: 420px;margin:0 auto!important;}
	.two-third  {width: 100%!important;margin-top:30px;}
	.tipo h3 {padding-left:0px!important;}
	.tipo p {padding-left:0px!important;}
	.submitInquiryBtn {width:570px!important; height:auto;margin-bottom: 10px;}
	.inputArea {width:250px!important;}
	.form dl.short_alpha {float: none;}
	.msgArea{width: 570px!important;}
	
	.og-grid li {margin: 50px 0px 0 45px!important;}
	.og-grid li img{width:360px; }
	
	}

/* Smartphones (portrait and landscap) ----------- */
@media only screen and (min-width : 479px) and (max-width : 480px) {
	#hello p{font-size:30px; line-height:34px}
	#intro h1{font-size:15px; line-height:40px;}
	#frame span.small {font-size:50px;}
	#frame span.brand {font-size:19px;}
	#frame span.intro_line { width:95px;}
	#frame span.cursive {font-size:12px;}
	
	.container .wrap{padding:0 30px}
	.ap h2{font-size:15pt}
	.ap h2 span{font-size:10pt}
	#about .miniraya {width:105px;}
	#portfolio .miniraya {width:75px;}
	#services .miniraya {width:100px;}
	#contact .miniraya {width:95px;}
	
	
	#visor{display:none}
	.tipo h3 {padding-left:0px!important;}
	.tipo p {padding-left:0px!important;}
	#about .btn {display:none!important;}
	
	.og-grid {padding: none!important;}
	.og-grid li {margin: 0px 0px 0 70px!important;}
	.og-grid li img{width:270px; }
	.og-fullimg { display: none!important; }
	.og-details { float: none; width: 100%!important; }
	
	
	.one-third {display:none;}
	.section-title h1.title p { font-size:21px!important; text-align:inherit!important;}
	.two-third img {width: 270px!important;margin:0 auto!important;}
	.two-third  {width: 100%!important;margin-top:30px;}
	

	.container .four.columns {display: none;}
	.container .five.columns{ margin-left: 0;margin-top: 55px;}
	.form dl.short { float: none;margin-left: 0px;width:100%;}
	.form dl.long  {width:100%;}
	.inputArea {width:270px!important;}
	.form dl.short_alpha {float: none;}
	.msgArea{width: 270px!important;}
	 ul.item-nav {display:none;}
	.submitInquiryBtn {width:270px!important; height:auto;margin-bottom: 10px;}	
}

/* Smartphones (portrait and landscape) ----------- */
@media screen and (max-width : 400px) {
	#hello p{font-size:30px; line-height:34px}
	#intro h1{font-size:15px; line-height:40px;}
	#frame span.small {font-size:50px;}
	#frame span.brand {font-size:19px;}
	#frame span.intro_line { width:95px;}
	#frame span.cursive {font-size:12px;}
	
	.container .wrap{padding:0 30px}
	.ap h2{font-size:15pt}
	.ap h2 span{font-size:10pt}
	#about .miniraya {width:105px;}
	#portfolio .miniraya {width:75px;}
	#services .miniraya {width:100px;}
	#contact .miniraya {width:95px;}
	
	
	#visor{display:none}
	.tipo h3 {padding-left:0px!important;}
	.tipo p {padding-left:0px!important;}
	#about .btn {display:none;}
	.og-grid {padding: none!important;}



	.og-grid li {margin: 10px 0px 0 0px;}
	.og-grid li img{width:230px!important; }
	.og-fullimg { display: none!important; }
	.og-details { float: none; width: 100%!important; }
	
	.one-third {display:none;}
	.section-title h1.title p { font-size:21px!important; text-align:inherit!important;}
	.two-third img {width: 270px!important;margin:0 auto!important;}
	.two-third  {width: 100%!important;margin-top:30px;}
	

	.container .four.columns {display: none;}
	.container .five.columns{ margin-left: 0;margin-top: 55px;}
	.form dl.short { float: none;margin-left: 0px;width:100%;}
	.form dl.long  {width:100%;}
	.inputArea {width:270px!important;}
	.form dl.short_alpha {float: none;}
	.msgArea{width: 270px!important;}
	 ul.item-nav {display:none;}
	.submitInquiryBtn {width:270px!important; height:auto;margin-bottom: 10px;}
	
	
	
}