/* ============================================================

Site Name: RobertoAlanis.com
Version: 3.0
Description: Personal Homepage and Portfolio of Roberto Alanís 
Web:    http://robertoalanis.com

============================================================ */

/* @group reset */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strong,sub,sup,tt,var,b,u,i,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:none;}*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.no-animation{-webkit-transition-property:none;-moz-transition-property:none;-o-transition-property:none;transition-property:none;}.left{float:left;}.right{float:right;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch;-webkit-font-smoothing: antialiased;}html,body{width:100%;height:100%;}body{position:relative;font-family: Helvetica, Arial, 'Liberation Sans', sans-serif;}figure{position:relative;}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;}a img{border:0;}figure img,object,embed,video{max-width:100%;}a{text-decoration:none;color:inherit;}a:hover,a:active,a:focus{outline:none;}::-moz-focus-inner{border:0}ul,ol{list-style:none;}select,input,textarea,button{font:99% sans-serif;}input,select{vertical-align:middle;}::-webkit-input-placeholder{color:inherit;font-size:inherit;}::-moz-placeholder{color:inherit;font-size:inherit;}textarea{overflow:auto;vertical-align:middle;resize:vertical;}input[type=radio]{vertical-align:text-bottom;}input[type=checkbox]{vertical-align:bottom;}label{cursor:pointer;}button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{padding:0;*width:13px;*height:13px;}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box;}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;}button,input{line-height:normal;}legend{white-space:normal;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}q{quotes:none;}q:before,q:after{content:"";content:none;}small{font-size:85%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}table{border-collapse:collapse;border-spacing:0;}td{vertical-align:top;}button,input,select,textarea{margin:0;}img::selection{background:transparent;}img::-moz-selection{background:transparent;}

/* Clearfix */
.group:before, .group:after, .container:before, .container:after {content:""; display:table;}
.group:after, .container:after {clear:both;}
.group, .container {zoom:1;}

/* @end */

/* @group main */

header, .domloaded *, .domloaded *:after, .domloaded *:before{
	transition:all .25s ease-in-out;
}

img[data-src]{
	opacity: 0;
	transition-duration: 1.25s;
}

html{-webkit-tap-highlight-color: #cfd2e6;}

::-moz-selection{background: #cfd2e6; color:#292b33; text-shadow: none;}
::selection {background: #cfd2e6; color:#292b33; text-shadow: none;}

body{
	background: #e6e9ef;
	font-family: "FreightSansProBook", 'FreightSans Pro', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
	font-weight: 300;
	line-height: 1.3125;
	color: #525566;
	letter-spacing: .02em;
	font-size: 16px;
	opacity: 0;
}

.domloaded body{
	opacity: 1;
	transition:opacity 1.25s ease-in-out;
}

body:after
{
	display: none;
	content: 'mobile';
}

h1, h2, h3, h4, h5, h6{
	color: #3c3e4d;
	font-family: 'Gotham_Family', 'Gotham', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
	text-transform: uppercase;
}

h2, h3, h5, h6{
	font-weight: 500;
}

h1{
	clear: both;
	text-align: center;
	line-height: 1;
	font-size: 28px;
	position: relative;
	letter-spacing: .03em;
	font-weight: 400;
	margin-bottom: 35px;
}

h2{
	font-size: 16px;
	clear: both;
}

h3{
	font-size: 13px;
}

h2,h3,h5{
	margin-bottom: 42px;
	text-align: center;
}

header h2{
	margin-bottom: 0;
}

h4{
	font-size: 11px;
	font-weight: 500;
}

.container{
	width: 90%;
	max-width: 910px;
	margin: 0 auto;
}

[role=main]{
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
	max-width: 910px;
	background: #F5F6FC;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

section{
	margin-bottom: 42px;
}

section > .container{
	max-width: 620px;
}

p + p{
	margin-top: 21px;
}

/* @end */

/* @group header */

header{
	margin-bottom: 35px;
	padding-top: 10px;
	padding-bottom: 21px;
	background: #fff;
	box-shadow: 0px 1px 1px -1px rgba(0,0,0,.3);
}

	.standalone header{
		padding-top: 21px;
	}

.logo{
	display: block;
	text-align: center;
	padding: 11px 0 10px;
}

.logo img{
	max-width: 51px;
}

/* @group nav */

nav{
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-family: 'Gotham_Family', 'Gotham', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
	overflow: hidden;
}

nav li{
	display:inline-block;
	float:none;
	font-size: 0;
}

nav a{font-size: 11px;
	display:block;
	padding: 14px 10px;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px #cfd2e6;
}

nav a:hover, nav a:focus{
	background: #e9ebf7;
	color:#292b33;
	box-shadow: inset 0 0 0 1px #e9ebf7;
}

/* @end */

h1 em{
	font-weight: 500;
	font-style: normal;
}

h1 span{
	color: #7a8099;
	font-family: 'Adelle_Regular', 'Adelle', Georgia, Times, "Times New Roman", serif;
	font-size: 10px;
	font-style: italic;
	font-weight: normal;
	text-transform: none;
	position: absolute;
	bottom: -14px;
	margin-left: -75px;
	letter-spacing: .05em;
	white-space: nowrap;
}

/* @end */

/* @group slider */

.slider {
    width: 100%;
    opacity: 0;
}

.slider-container {
    position: absolute;
    width: 100%;
    left: 0;
    overflow: hidden;
}

.iosSlider {
    width: 100%;
    height: 0;
}

.iosSlider .slides {
    width: 100%;
    height: 100%;
}

.slides li {
    width: 100%;
    max-width: 910px;
}

.slider *{transition:opacity .8s ease-in-out;}

/* @group slider captions */

.slides figcaption, .slides figcaption *{transition:all .4s ease-in-out;}

.slides figcaption{
	background: rgba(0,0,0,.5);
	position: absolute;
	left: 16px;
	bottom: 21px;
	height: 42px;
	color: #fff;
	opacity: 0;
	transform:scale(0);
}

.slides figcaption a{
	display: block;
	padding: 6px 10px;
}

.slides .title, .slides .tag{opacity: 0;}

.slides .title {
	font-family: 'Gotham_Family', 'Gotham', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .03em;
	transform:translateX(-200px);
}

.slides .tag {
	transform:translateX(200px);
}

.selected figcaption{
	transition-delay:.4s;
	opacity: 1;
	transform:scale(1);
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
}

.selected, .visible{opacity: 1!important;}

.slides .selected .title, .slides .selected .tag{
	transition-duration:.6s;
	transition-delay:.6s;
	transform:translateX(0);
	opacity: 1;
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */	
}

.slides .selected .tag{transition-delay:.7s;}

.slides .tag, .freebies .tag{
	color: rgba(255, 255, 255, .75);
}

/* @end */

/* @group slider-nav */

.navigation{
	position: relative;
	margin: 0 auto;
	width: 100;
	max-width: 910px;
	height: 100%;
	bottom: 0;
	pointer-events: none;
}

	.no-ie .navigation{
		z-index: 1;
	}
	
	.-o- .navigation{
		z-index: auto!important;
	}

.navigation *{
	pointer-events: all;
}

.prev, .next{
	width: 16px;
	height: 42px;
	background: rgba(0,0,0,.5);
	z-index: 9999;
	position: absolute;
	bottom: 21px;
	color: #fff;
	cursor: pointer;
	background-size: 12px 16px;
	background-position: center center;
	background-repeat: no-repeat;
	transition:all .2s ease-in-out;
}

.prev{
	background-image: url('../images/prev.png');
	left: 0;
	}

.next{
	right: 0;
	background-image: url('../images/next.png');
}

.prev:hover, .next:hover{background-color: rgba(0,0,0,.6);}

/* @end */

/* @end */

/* @group greeting */

.rotate-word{
	position: relative;
	font-size: 20px;
	font-family: 'Gotham_Family', 'Gotham', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
	font-weight: 500;
}
.rotate-word span{
	overflow: hidden;
	color:#d75e02;
	white-space: nowrap;
	background: #F5F6FC;
}

.rotate-word span:nth-child(1) {  
	opacity: 1;
}

.rotate-word span:nth-child(2) {  
	animation-delay: 3s; 
	color:#a5bd00;
}
.rotate-word span:nth-child(3) {  
	animation-delay: 6s; 
	color:#00b0c7;
}
.rotate-word span:nth-child(4) {  
	animation-delay: 9s; 
	color:#dd4849;
}

@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; transform: translateY(-16px); }
	5% { opacity: 1; transform: translateY(0px);}
    27% { opacity: 1; transform: translateY(0px); }
	30% { opacity: 0; transform: translateY(16px); }
	60% { opacity: 0; }
    100% { opacity: 0; }
}

/* @end */

/* @group work */

.work li{
	float: left;
	width: 50%;
	margin-bottom: 21px;
	line-height: 1;
	overflow: hidden;
	position: relative;
	box-shadow: 0 5px 4px -6px rgba(0,0,0,0);
	border-radius: 1px;
}

.work li a{
	width: 100.2%;
	display: block;
}

.work li img{
	display: block;
}

.work li h4 > img{
	display: inline-block;
	margin-top: -5px;
}

  
.work figcaption{
	padding: 9px 5px;
	line-height: 1;
	max-height: 64px;
}

.tag, .about figcaption{
	color: #7a8099;
	font-family: 'Adelle_Regular', 'Adelle', Georgia, Times, "Times New Roman", serif;
	font-size: 11px;
	font-style: italic;
	white-space: nowrap;
}

h2 .tag{
	display: block;
	text-transform: none;
}

.work li:hover{
	box-shadow: 0 4px 6px -4px rgba(0,0,0,.8);
}

.work li:hover figcaption{
	background: #fff;
}

@keyframes rainbow {
  100% {transform: translateX(-50%);}
}

.work li:after {
	content: "";
	display: block;
	width: 200%;
	height: 2px;
	bottom: 0;
	clear: both;
	background: linear-gradient(90deg, #1AD6FD,	#1D62F0 10%, #C644FC 20%, #5856D6 30%, #EF4DB6 40%, #1AD6FD 50%, #1D62F0 60%, #C644FC 70%, #5856D6 80%, #EF4DB6 90%, #1AD6FD);
	animation: rainbow 4s linear infinite;
	animation-play-state:paused;
	opacity: 0;
}

.work li:hover:after{
	animation-play-state:running;
	opacity: 1;
}

/* @end */

/* @group about */

.about figcaption{
	text-align: center;
	margin: 8px 0;
}

.definition{
	text-align: center;
}

.definition *{
	white-space: nowrap;
}

.definicion .container{
	display:inline;
	float:none;
}

.avatar{
	max-width: 150px;
	margin: 0 auto 21px;
}

.avatar img{
	border-radius: 3px;
	box-shadow: 0 0 0 1px #cfd2e6;
}

dl{
	counter-reset: definition;
	text-align: left;
}

dfn{
	font-style: normal;
	font-family: 'Adelle_Sans';
	font-weight: 600;
}

dd+dd{
	padding-left: 20px;
	margin-top: 13px;
}

dd+dd:before{
	counter-increment: definition;
	content: counter(definition)'.';
	float: left;
	margin-left: -20px;
	clear: both;
	color: #7a8099;
}

rt, rp{
	display: inline;
	font-family: Arial, sans-serif;
	color: #7a8099;
	font-size: 100%;
	font-weight: 100;
}

ruby br{
	display: none;
}

/* @group skills */

.notaskill{
	text-align: center;
	font-size: 12px;
	display: block;
}

.notaskill em{
	font-family: "Adelle_Regular", sans-serif;
}

.gauges li, .tools li{
    position:relative;
    float: left;
    text-align: center;
    margin-bottom: 21px;
}

.gauges li{
	width: 50%;
}


.tools li{
	width: 25%;
}

.gauges span{
    display: block;
    width: 2px;
    height: 35px;
    position: absolute;
    left:49.2%;
    top:15%;
    background-color: #525566;
    border-radius: 10px / 100px 100px 5px 5px;
    transform: rotate(-144deg);
    transform-origin: bottom center;
}

.gauges, .gauges figcaption, .tools figcaption{
	font-weight: 400;
	font-family: 'Gotham_Family', 'Gotham', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
	font-style: normal;
}

.ps span{
	animation: Reset 1s 0s 1, StartEngine 1s 1s 1, Parking 2s 2s 1, AcceleratePs 1.88s 4s 1 cubic-bezier(0.645, 0.045, 0.355, 1.000), TopSpeedPs .2s 5.88s infinite linear alternate;
}

.retouch span{
	animation: Reset 1s 0s 1, StartEngine 1s 1s 1, Parking 2s 2s 1, AccelerateCSS 2s 4s 1 cubic-bezier(0.645, 0.045, 0.355, 1.000), TopSpeedCSS .2s 6s infinite linear alternate;
}

.wp span{
	animation: Reset 1s 0s 1, StartEngine 1s 1s 1, Parking 2s 2s 1, TopSpeedWP 1.25s 4s infinite cubic-bezier(0.895, 0.030, 0.685, 0.220) alternate;
}

.jscript span{
	animation: Reset 1s 0s 1, StartEngine 1s 1s 1, Parking 2s 2s 1, TopSpeedJS 1.05s 4s infinite cubic-bezier(0.895, 0.030, 0.685, 0.220) alternate;
}

.html span{
	animation: Reset 1s 0s 1, StartEngine 1s 1s 1, Parking 2s 2s 1, AccelerateHTML 1.8s 4s 1 cubic-bezier(0.645, 0.045, 0.355, 1.000), TopSpeedHTML .2s 5.8s infinite linear alternate;
}

.css span{
	animation: Reset 1s 0s 1, StartEngine 1s 1s 1, Parking 2s 2s 1, AccelerateCSS 2s 4s 1 cubic-bezier(0.645, 0.045, 0.355, 1.000), TopSpeedCSS .2s 6s infinite linear alternate;
}

@keyframes Reset{
    0%, 100%{
        transform: rotate(-144deg);
    }
}

@keyframes StartEngine{
    to{
        transform: rotate(-120deg);
    }
}

@keyframes Parking{
    0%, 100%{
        transform: rotate(-120deg);
    }
}

@keyframes AcceleratePs{
    0%{
        transform: rotate(-120deg);
    }
    
    70%{
         transform: rotate(103deg);
    } 
    80%{
         transform: rotate(97deg);
    } 
    
    100%{
         transform: rotate(100deg);
    } 
}

@keyframes AccelerateRetouch{
    0%{
        transform: rotate(-120deg);
    }
    
    70%{
         transform: rotate(78deg);
    } 
    80%{
         transform: rotate(72deg);
    } 
    
    100%{
         transform: rotate(75deg);
    } 
}

@keyframes AccelerateHTML{
    0%{
        transform: rotate(-120deg);
    }
    
    70%{
         transform: rotate(93deg);
    } 
    80%{
         transform: rotate(87deg);
    } 
    
    100%{
         transform: rotate(90deg);
    } 
}


@keyframes AccelerateCSS{
    0%{
        transform: rotate(-120deg);
    }
    
    70%{
         transform: rotate(120deg);
    } 
    80%{
         transform: rotate(114deg);
    } 
    
    100%{
         transform: rotate(117deg);
    } 
}

@keyframes TopSpeedPs {
  0%, 100% {
    transform: rotate(100deg);
  }

   50% {
    transform: rotate(106deg);
  }
}

@keyframes TopSpeedRetouch {
  0%, 100% {
    transform: rotate(75deg);
  }

   50% {
    transform: rotate(81deg);
  }
}

@keyframes TopSpeedWP {
    0%{
        transform: rotate(-120deg);
    }
    
    70%{
         transform: rotate(30deg);
    } 
    100%{
         transform: rotate(27deg);
    } 
}

@keyframes TopSpeedJS {
    0%{
        transform: rotate(-120deg);
    }
    
    70%{
         transform: rotate(3deg);
    } 
    100%{
         transform: rotate(0deg);
    } 
}

@keyframes TopSpeedHTML {
  0%, 100% {
    transform: rotate(90deg);
  }

   50% {
    transform: rotate(96deg);
  }
}

@keyframes TopSpeedCSS {
  0%, 100% {
    transform: rotate(117deg);
  }

   50% {
    transform: rotate(123deg);
  }
}

/* @end */

.colophon p{
	width: 90%;
	max-width: 340px;
	margin: 0 auto;
	text-align: center;
}

.colophon a {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 50%);
    background-position: 0 17px;
    background-repeat: repeat-x;
    background-size: 2px 2px;
    text-decoration: none;
}

/* @end */

/* @group detail */

.intro-detail{
	position: relative;
	text-align: center;
	margin-bottom: 21px;
	overflow: hidden;
}

.intro-detail img{
	min-width: 380px;
	position: relative;
	left: 100%;
	margin-left: -200%;
}

.work-detail, .work-detail figure{
	margin-bottom: 21px;
}

.work-detail figcaption{
	text-align: left;
	font-size: 14px;
	color: #7a8099;
	font-family: 'Adelle_Regular', 'Adelle', Georgia, Times, "Times New Roman", serif;
	font-size: 11px;
	font-style: italic;
	white-space: nowrap;
}

.project-info{
	margin: 0 auto 105px;
	max-width: 620px;
	width: 90%;
	text-align: left;
	font-size: 16px;
}

.project-info p{
	letter-spacing: .03em;
}

.project-info ul{
	margin-bottom: 21px;
}

.project-info ul span{
	font-family: 'Adelle_Regular';
	font-size: 14px;
	font-style: italic;
}

.-o- .notaskill em, .-o- figcaption, .-o- .project-info ul span, .-o- h1 span, .-o- .tag, .-o- .about figcaption{
	font-style: normal;
}

.project-info a, input[type=submit], .success, .error, .warning{
	display: block;
	text-align: center;
	padding: 14px 20px;
	font-family: 'Gotham_Family', 'Gotham', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
	text-transform: uppercase;
	font-weight: 500;
	border-radius: 1px;
	letter-spacing: .2em;
	box-shadow: inset 0 0 0 1px #cfd2e6;
	border-radius: 3px;
	font-size: 14px;
	color: inherit;
}

.project-info a{
	margin: 21px 0;
}

.project-info a:hover, .project-info a:focus, input:not([disabled])[type=submit]:hover, input:not([disabled])[type=submit]:focus{
	background: #e9ebf7;
	color:#292b33;
	box-shadow: inset 0 0 0 1px #e9ebf7;
}

#actions > a{
	display: block;
	position: relative;
}

#actions figcaption{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-style: normal;
	font-weight: 400;
	background: #fff;
	box-shadow: 0px 1px 2px -1px rgba(0,0,0,.3);
	line-height: 21px;
}

#actions figcaption{
	padding: 9px 6px;
	white-space: normal;
}

.price, .price span {
	content: "";
	background-image: url("https://d3ui957tjb5bqd.cloudfront.net/images/embed/product.png");
	background-position: 0 0;
	background-repeat: no-repeat;
    display: inline-block;
    line-height: 13px;
    height: 22px;
    padding: 0 0 0 8px;
}

.price{
	float: right;
}

.price span{
	width: 30px;
    background-position: 0 -22px;
    background-repeat: repeat-x;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 1px 0 0 #E8E9E6;
    color: #fff;
    display: inline-block;
    text-align: center;
    font-size: 11px;
    font-weight: 200;
    height: 20px;
    padding: 3px 7px 0 3px;
    text-shadow: 0 -1px 1px #758A48;
}

/* @end */

/* @group contact */

.contact-form{
	width: 90%;
	max-width: 620px;
	margin: 0 auto 105px;
	letter-spacing: .03em;
}

.contact-form p:last-of-type{
	margin-bottom: 21px;
	font-size: 14px;
	font-style: italic;
}

.twitter, .behance{
	color: #00b0c7;
}

.dribbble{
	color:#d44f83;
}

.cm{
	color:#a5bd00;
}

.ig {
	color:#ff7915;
}

.contact-form fieldset{
	position: relative;
	margin-bottom: 21px;
	width: 100%;
}

fieldset.submit{
	margin-bottom: 21px!important;
}

input:not([type=submit]), textarea{
	padding: 5px 10px;
	font-family: inherit;
	font-size: inherit;
	border: none;
	border-radius: 4px;
	border: 1px solid #cfd2e6;
	width: 100%;
	position: relative;
	z-index: 2;
	box-shadow: inset 0px 1px 3px rgba(152, 156, 178, 0);
}

input:not([type=submit]){
	height: 35px;
}

 label{
	padding-left: 10px;
	margin-bottom: 5px;
}

.contact-form label{
	cursor: pointer;
	display: block;
	font-family: 'Gotham_Family', 'Gotham', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 500;
	color:#3c3e4d;
	letter-spacing: .1em;
	z-index: 1;
}

label:first-letter{
	font-size: 12px;
}

textarea{
	resize: none;
	padding-top: 10px;
}

input:not([type=submit]):focus, textarea:focus{
	box-shadow: inset 0px 1px 3px rgba(152, 156, 178, .6);
}

::-webkit-input-placeholder{
	opacity: .5;
	font-size: 13px;
	font-family: sans-serif;
	vertical-align: baseline;
	line-height: 21px;
}

::-moz-placeholder{
	opacity: .5;
	font-size: 13px;
	font-family: sans-serif;
	line-height: 23px;
}

input[type=submit]{
	width: 100%;
	border: none;
	background: none;
}

input[type=submit][disabled]{
	color:#adb3cc;
}

/* @group alerts */

.success, .error, .warning{
	color: #fff;
	letter-spacing: .05em;
	font-size: 12px;
}

.success{
	background:#1abc9c;
	box-shadow: inset 0 0 0 1px #16a085;
}

.warning{
	background-color: #f7edbf;
	color: #595335;
	box-shadow: inset 0 0 0 1px #c8a817;
}

.error{
	background: #ff5757;
	box-shadow: inset 0 0 0 1px #c0392b;
}

/* @end */

/* @end */

/* @group footer */

footer{
	font-family: 'Gotham_Family', 'Gotham', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 500;
	background: #fff;
	padding: 21px 0;
	position:relative;
	box-shadow: 0px -1px 1px -1px rgba(0,0,0,.3);
}

footer span{
		display: inline-block;
}

footer a:hover span{
	transform:translateY(-5px);
	font-size: 8px;
}

/* @end */

/* @group mediaqueries */

@media only screen and (min-width: 480px) {

	h1{
		line-height: 1.15;
	}

	.definition{
		text-align: center;
	}
	
	.definicion .container{
		display:inline;
		float:none;
	}
	
	.avatar, dl{
		display:inline-block;
		padding: 0 1%;
		vertical-align: top;
	}
	
	.avatar{
		max-width: 180px;
	}
		
	dl{
		font-size: 14px;
	}
	
	dd+dd
	{
		margin-top: 6px;
	}

}

@media only screen and (min-width: 600px) {

	header{
		padding-top: 21px;
		margin: 0 auto 42px;
	}
	
	
	.logo{
		float: left;
	}
	
	.logo img{
		display: block;
	}
	
	nav{
		float: right;
	}
	
	nav a{
		padding: 14px 15px;
	}
	
	h1{
		font-size: 34px;
	}
	
	h2{
		font-size: 21px;
	}
	
	h3{
		font-size: 16px;
	}
	  
	h1 span{
		bottom: -18px;
	}
	
	.slides figcaption{
		left: 30px;
		bottom: 42px;
		height: 84px;
	}
	
	.slides figcaption a{
		padding: 21px 40px;
	}
	
	.slides .title {
		font-size: 16px;
	}
	
	.prev, .next{
		width: 30px;
		height: 84px;
		bottom: 42px;
	}
	
	.indicators{
		width: 50%;
		height: 21px;
		z-index: 10;
		position: relative;
		margin: 0 auto;
		top: 94%;
		text-align: center;
	}
	
	.indicators div{
			width: 10px;
			height: 10px;
			display: inline-block;
			background: url('../images/indicator.png') center center no-repeat;
			background-size: 10px;
			margin: 3px 5px;
			opacity: .3;
	}
	
	.about-image br{
		display: none;
	}
	
	.avatar{
		max-width: 200px;
	}
	
	
	dl{
		font-size: 16px;
	}

}

	@media only screen and (min-width: 620px) {
	
		.work li{
			float: left;
			width: 25%;
			margin-bottom: 42px;
		}
		
		h4{
			letter-spacing: .1em;
		}
	
	}

	@media only screen and (max-width: 719px) {
	
		.work h4 span{
			display: none;
		}
	
	}
	
	@media only screen and (max-width: 767px){
	
		.rotate-word span{
			display: block;
		}
	
	}

@media only screen and (min-width: 768px) {

	body:after
	{
		content: 'tablet';
	}
	
	h1{
		font-size: 54px;
	}
	
	h2{
		font-size: 34px;
	}
	
	h3{
		font-size: 21px;
	}
	
	section{
		margin-bottom: 63px;
	}	
	
	.rotate-word span{
		position: absolute;
		opacity: 0;
		animation: rotateWord 12s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite 0s;
	}
	
	dd+dd{
	margin-top: 21px;
	}
	
	.gauges li{
		width: 33.3%;
		width: calc(100%/3);
	}
	
	.landscape .gauges li{
		width: 16.6%;
		width: calc(100%/6);
	}
	
	.contact-form fieldset{
		margin-bottom: 42px;
	}
 
}

	@media only screen and (min-width: 780px) {
	
	   body:after
		{
			content: 'widescreen';
		}
		
		.gauges li{
			width: 16.6%;
			width: calc(100%/6);
		}
		
		header, h1, h2{
			margin-bottom: 84px;
		}
	}

@media only screen and (min-width: 910px) {
	.slides li{
   		opacity: .3;
   }
   
	header{
		width: 100%;
	}
	
	.work figcaption{
		padding: 18px 10px;
	}
}


/* @end */

@media print {*{background:transparent !important;color:black !important;box-shadow:none !important;text-shadow:none !important;filter:none !important;-ms-filter:none !important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}abbr[title]:after{content:" (" attr(title) ")";}.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}pre,blockquote{border:1px solid #999;page-break-inside:avoid;}thead{display:table-header-group;}tr,img{page-break-inside:avoid;}img{max-width:100% !important;}@page{margin:0.5cm;}p,h2,h3{orphans:3;widows:3;}h2,h3{page-break-after:avoid;}}