@charset "UTF-8";
@font-face {
  font-family: "minicons-webalys";
  src:url("../fonts/demoicons/minicons-webalys.eot");
  src:url("../fonts/demoicons/minicons-webalys.eot?#iefix") format("embedded-opentype"),
    url("../fonts/demoicons/minicons-webalys.ttf") format("truetype"),
    url("../fonts/demoicons/minicons-webalys.svg#minicons-webalys") format("svg"),
    url("../fonts/demoicons/minicons-webalys.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontAwesome';
  src:url('../fonts/demoicons/FontAwesome.eot');
  src:url('../fonts/demoicons/FontAwesome.eot?#iefix') format('embedded-opentype'),
    url('../fonts/demoicons/FontAwesome.woff') format('woff'),
    url('../fonts/demoicons/FontAwesome.ttf') format('truetype'),
    url('../fonts/demoicons/FontAwesome.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
font-family: 'QuicksandLight';
src: url('../fonts/quicksand/Quicksand-Light.eot');
src: url('../fonts/quicksand/Quicksand-Light.eot?#iefix') format('embedded-opentype'),
     url('../fonts/quicksand/Quicksand-Light.woff') format('woff'),
     url('../fonts/quicksand/Quicksand-Light.ttf') format('truetype'),
     url('../fonts/quicksand/Quicksand-Light.svg#Quicksand-Light') format('svg');
     /*url('../fonts/Quicksand_Light.otf');*/
font-weight: lighter;
font-style: normal;
}

@font-face {
font-family: 'Quicksand';
src: url('../fonts/quicksand/Quicksand_Regular.eot');
src: url('../fonts/quicksand/Quicksand_Regular.eot?#iefix') format('embedded-opentype'),
     url('../fonts/quicksand/Quicksand_Regular.woff') format('woff'),
     url('../fonts/quicksand/Quicksand_Regular.ttf') format('truetype'),
     url('../fonts/quicksand/Quicksand_Regular.svg#Quicksand_Regular') format('svg');
     /*url('../fonts/Quicksand_Regular.otf');*/
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Quicksand';
src: url('../fonts/quicksand/Quicksand_Bold.eot');
src: url('../fonts/quicksand/Quicksand_Bold.eot?#iefix') format('embedded-opentype'),
     url('../fonts/quicksand/Quicksand_Bold.woff') format('woff'),
     url('../fonts/quicksand/Quicksand_Bold.ttf') format('truetype'),
     url('../fonts/quicksand/Quicksand_Bold.svg#Quicksand_Bold') format('svg');
     /*url('../fonts/Quicksand_Bold.otf');*/
font-weight: bold;
font-style: normal;
}


*{
	margin: 0;
	padding: 0;
}

body{
	font-family: 'Quicksand', sans-serif;
	font-weight: normal;
	font-size: 20px;
	background: #3fa9f5;
	color: #ffffff;
}

h1{
	font-weight: 700;
}

h2{
	font-weight: 700;
}

a{
	text-decoration: none;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

/*
########     ###    ########  ########       ##   
##     ##   ## ##   ##     ##    ##        ####   
##     ##  ##   ##  ##     ##    ##          ##   
########  ##     ## ########     ##          ##   
##        ######### ##   ##      ##          ##   
##        ##     ## ##    ##     ##          ##   
##        ##     ## ##     ##    ##        ###### 
*/

/* ================= INTRO VIDEO ================= */

#header_home{
	display: none;
}

.intro_vid_cont{
    display: block;
    position: relative;
    z-index: 101;
    margin: 0 auto;
}

.vid_cont{
    width: 900px;
    height: 506px;
	background-color: #b1e7ff;
	margin: 100px auto 0;
    border-radius: 50px;
    overflow: hidden;
}

.skip_vid{
	font-size: 15px;
    cursor: pointer;
    text-align: center;
    background: #BF00FF;
    width: 150px;
    margin: 20px auto 0;
    border-radius: 50px;
    padding: 10px 0;
}

.skip_vid:hover{
    background: #9100C2;
}

.preparat{
	display: block;
    background-color: #343543;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

/* ================= HOME ================= */

#container_home{
	width: 100%;
	background: url("../images/toronto_home.png") center bottom no-repeat #b1e7ff;
	position: relative;
	overflow: hidden;
}

#header_home{
	width: 600px;
	margin: 0 auto;
	text-align: center;
	color: #29abe2;
	position: relative;
}

.sea_wave{
	height: 50px;
	width: 100%;
	background: #3fa9f5;
	position: absolute;
	top:490px;
	z-index: 10;
}

.me_blink{
	margin: 20px 0;
}

#container_home h1{
	font-size: 60px;
	text-transform: uppercase;
	font-weight: lighter;
	font-family: 'QuicksandLight';
}

#container_home h2{
	font-size: 24px;
}

#languages_home{
	position: relative;
	width: 100%;
}

.english_home{
	position: absolute;
	left: 0;
	top:60px;
}

.french_home{
	position: absolute;
	right: 0;
	top:60px;
}

.jerry_boat{
	padding-top: 50px;
}

.button_language{
	display: inline-block;
	vertical-align: top;
}

/* ========================= Clouds ========================= */

.cloud{
	opacity: 0.8;
	position: absolute;
   -moz-animation: cloudDrift linear infinite;
   -webkit-animation: cloudDrift linear infinite;
   -o-animation: cloudDrift linear infinite;
   animation: cloudDrift linear infinite;
}

.first_cloud {
   top: 40px;
   left: -140px;
   -moz-animation-duration: 40s;
   -webkit-animation-duration: 40s;
   -o-animation-duration: 40s;
   animation-duration: 40s;
}

.second_cloud {
   top: 80px;
   left: -110px;
   -moz-animation-duration: 30s;
   -webkit-animation-duration: 30s;
   -o-animation-duration: 30s;
   animation-duration: 30s;
}

.third_cloud {
   top: 10px;
   left: -80px;
   -moz-animation-duration: 50s;
   -webkit-animation-duration: 50s;
   -o-animation-duration: 50s;
   animation-duration: 50s;
}


@-moz-keyframes cloudDrift {
   from { -moz-transform: translateX(0px); }
   to { -moz-transform: translateX(2000px); }
}

@-webkit-keyframes cloudDrift {
   from { -webkit-transform: translateX(0px); }
   to { -webkit-transform: translateX(2000px); }
} 

@-o-keyframes cloudDrift {
   from { -o-transform: translateX(0px); }
   to { -o-transform: translateX(2000px); }
}

@keyframes cloudDrift {
   from { transform: translateX(0px); }
   to { transform: translateX(2000px); }
}

/* ================= SEAGULL ================= */

.seagull_stand{
	position: absolute;
	top:105px;
	left:0px;
	z-index: 5;
	-webkit-animation: seagull_stand 2s linear 0s 1 normal;
	-moz-animation: seagull_stand 2s linear 0s 1 normal;
	-o-animation: seagull_stand 2s linear 0s 1 normal;
	-ms-animation: seagull_stand 2s linear 0s 1 normal;
	animation: seagull_stand 2s linear 0s 1 normal;
}

@-webkit-keyframes seagull_stand {
	0% {
		opacity: 0;
	}
	97.9% {
		opacity: 0;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes seagull_stand {
	0% {
		opacity: 0;
	}
	97.9% {
		opacity: 0;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-o-keyframes seagull_stand {
	0% {
		opacity: 0;
	}
	97.9% {
		opacity: 0;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-ms-keyframes seagull_stand {
	0% {
		opacity: 0;
	}
	97.9% {
		opacity: 0;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes seagull_stand {
	0% {
		opacity: 0;
	}
	97.9% {
		opacity: 0;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

.seagull
{
	position: absolute;
	top: -100px;
	left: -88px;
	z-index: 1;
	width: 60px;
	height: 72px;
	margin: 0;
	-webkit-animation: birdFlying 2s linear 0s 1 normal;
	-moz-animation: birdFlying 2s linear 0s 1 normal;
	-o-animation: birdFlying 2s linear 0s 1 normal;
	-ms-animation: birdFlying 2s linear 0s 1 normal;
	animation: birdFlying 2s linear 0s 1 normal;
}

@-webkit-keyframes birdFlying {
	0% {
		opacity: 1;
		-webkit-transform: translate(0px, 0px) rotate(0deg);
	}
	97.9% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(280px, 450px) rotate(0deg);
	}
}

@-moz-keyframes birdFlying {
	0% {
		opacity: 1;
		-moz-transform: translate(0px, 0px) rotate(0deg);
	}
	97.9% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-moz-transform: translate(280px, 450px) rotate(0deg);
	}
}

@-o-keyframes birdFlying {
	0% {
		opacity: 1;
		-o-transform: translate(0px, 0px) rotate(0deg);
	}
	97.9% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-o-transform: translate(280px, 450px) rotate(0deg);
	}
}

@-ms-keyframes birdFlying {
	0% {
		opacity: 1;
		-ms-transform: translate(0px, 0px) rotate(0deg);
	}
	97.9% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-ms-transform: translate(280px, 450px) rotate(0deg);
	}
}

@keyframes birdFlying {
	0% {
		opacity: 1;
		transform: translate(0px, 0px) rotate(0deg);
	}
	97.9% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(280px, 450px) rotate(0deg);
	}
}

.birdflapping 
{
	position: absolute;
	top: 5px;
	left: 5px;
	width: 60px;
	height: 62px;
	background: url('../images/seagull1.png') top center;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	-webkit-animation: birdFlapping 0.25s steps(2) infinite;
	-moz-animation: birdFlapping 0.25s steps(2) infinite;
	-o-animation: birdFlapping 0.25s steps(2) infinite;
	-ms-animation: birdFlapping 0.25s steps(2) infinite;
	animation: birdFlapping 0.25s steps(2) infinite;
}

@-webkit-keyframes birdFlapping {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -124px;
	}
}

@-moz-keyframes birdFlapping {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -124px;
	}
}

@-o-keyframes birdFlapping {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -124px;
	}
}

@-ms-keyframes birdFlapping {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -124px;
	}
}

@keyframes birdFlapping {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -124px;
	}
}

/* ================= CHARACTER ================= */

.jerry_home{
	display: inline-block;
	vertical-align: top;
}

.character_home{
	position: relative;
}

.eyes_home{
	position: absolute;
	right: 82px;
	top:42px;
	z-index: 3;
}

.body_home{
	position: absolute;
	z-index: 2;
}

.hand_home{
	position: absolute;
	right: 14px;
	top:67px;
	z-index: 1;
   /* Firefox */
   -moz-animation: hand_home 1s infinite;
   /* WebKit - Chrome and Safari */
   -webkit-animation: hand_home 1s infinite;
   /* Opera */
   -o-animation: hand_home 1s infinite;
   /* general syntax */
   animation: hand_home 1s infinite;
}

@-webkit-keyframes hand_home {
    50%  {-webkit-transform: rotate(15deg);}
    }
@keyframes hand_home {
    50%  {transform: rotate(15deg);}
    }

.button_language a{
	display: block;
	position: relative;
	width: 130px;
	height: 130px;
	background: #9ddcf8;
	border-radius: 50%;
	overflow: hidden;
}

.button_language p{
	font-weight: 700;
	color: #ffffff;
	position: absolute;
	top:60px;
	/* soft animation*/
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.button_language.english p{
	right:-85px;
}

.button_language.french p{
	left:-85px;
}

.button_language img{
	width: 130px;
	height: 130px;
	position: absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	top:0px;
	/* soft animation*/
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.button_language a:hover{
	background:#29abe2;
}

.button_language a:hover img{
	top: 70px;
}

.button_language a:hover p{
	opacity: 1;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
}

/* ================= FOOTER HOME ================= */

#footer_home{
	margin: 0 auto;
	text-align: center;
	font-size: 12px;
	overflow: hidden;
	padding-top: 64px;
}

#footer_home p{
	margin-top:15px;
}

.footer_firm{
	margin-top: 46px;
}

.footer_firm a{
	width: 103px;
	height: 41px;
	display: inline-block;
}

.footer_firm a:hover{
	opacity: 0.5;
}

.footer_firm img{
	width: 100%;
	max-width:100%;
}

/*
########     ###    ########  ########     #######  
##     ##   ## ##   ##     ##    ##       ##     ## 
##     ##  ##   ##  ##     ##    ##              ## 
########  ##     ## ########     ##        #######  
##        ######### ##   ##      ##       ##        
##        ##     ## ##    ##     ##       ##        
##        ##     ## ##     ##    ##       ######### 
*/

/* ================= INNER ================= */

body.inner_body{
	background: #b1e7ff;
}

/* ================= MAIN MENU ================= */

.main_menu{
	position: relative;
	width: 100%;
}

.respo_menu_right,
.respo_menu_left{
	display: none!important;
}

.main_menu_in{
	width: 1024px;
	margin: 0 auto;
	color: #29abe2;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 200;
	margin-top: 10px;
}

.button_language_inner,
.button_menu_inner{
	display: inline-block;
}

.button_language_inner{
	float: left;
}

.button_menu_inner{
	text-align: right;
	float: right;
}

.button_menu{
	display: inline-block;
	vertical-align: top;
}

.button_menu a{
	display: block;
	position: relative;
	width: 45px;
	height: 45px;
	background: #9ddcf8;
	border-radius: 50%;
	overflow: hidden;
}

.button_menu p{
	font-weight: 700;
	color: #ffffff;
	position: absolute;
	top:15px;
	right:-85px;
	font-size: 12px;
	text-align: center;
	/* soft animation*/
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.button_menu img{
	width: 45px;
	height: 45px;
	position: absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	top:0px;
	/* soft animation*/
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.button_menu a:hover p{
	opacity: 1;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
}

.button_menu a:hover{
	background:#29abe2;
}

.button_menu a:hover img{
	top: 20px;
}

/* ================= INNER SECTIONS ================= */

#home, #about, #education, #skills, #experience, #portfolio, #hobbies, #contact{
	height: 760px;
	width: 100%;
	position: relative;
	overflow: hidden;
}

#contact{
	height: 740px;
	z-index: 100;
}

#main_jerry{
	position: relative;
	margin: 0 auto;
}


#main_jerry_in{
	color: #29abe2;
	position: fixed;
	z-index: 99;
	width: 664px;
	margin: 0 auto;
	height: 298px;
	right: 0;
	left: 0;
	top: 272px;
    pointer-events: none;
}

.jerry_final{
	position: absolute;
	right: 0;
	width: 145px;
	height: 298px;
}

.eyes_main{
	position: absolute;
	right: 40px;
	top:43px;
	z-index: 3;
	width: 31px!important;
	height: 9px;
}

.jerry_final img{
	width: 100%;
	max-width: auto;
}

/* ================= TEXT ================= */

.main_text{
	padding-top: 30px;
	width: 85%;
	margin: 0 auto;
	position: absolute;
	right: 0;
	z-index: 8;
}

.main_text h1{
	font-size: 100px;
	font-weight: lighter;
	font-family: 'QuicksandLight';
	color: #00aeef;
	text-transform: lowercase;
}

.main_text h2{
	font-size: 24px;
	color: #00ace4;
	margin-bottom: 5px;
}

.main_text h2 span{
	color: #4ec9f5;
	padding-left: 100px;
}

.main_text h1.skills{
	color: #ff931e!important;
}

.main_text h2.skills{
	color: #ff931e!important;
}

.main_text p{
	font-size: 18px;
	color: #00b3d6;
}

.main_text p span{
	color: #0071bc;
}

.main_text p.uni{
	color: #0071bc;
	font-weight: 700;
	font-size: 30px;
	text-transform: uppercase;
}

.main_text p.uni span{
	font-weight: lighter;
	font-family: 'QuicksandLight';
	color: #00aeef;
}

.main_text p.uni_text{
	color: #0071bc;
	font-size: 12px;
	width: 66%;
}

.main_text p.uni_text span{
	font-weight: 700;
}


.main_text p.uni_years{
	margin: 4px 0 5px 0;
}

.main_text p.uni_years span.duration{
	font-weight: bold;
	text-transform: uppercase;
	color: #0071bc;
	margin: 0 8px;
}

.main_text p.uni_years span.country_uni{
	font-size: 14px;
	color: #00b3d6;
	font-weight: 300;
}
span.country_uni img.mx_uni{
	width: 25px;
	height: 16px;
	margin-right: 10px;
	margin-left: 20px;
}

p.uni_desc{
	width: 66%;
	margin-top: 9px;
}

span.line2,span.line3{
	color: #ffffff!important;
	display: block;
	margin-top: 10px;
}

p.skill{
	color: #ffffff;
}

p.skillmore{
	margin-top: 15px;
	color: #ffffff;
}

ul.skill_list{
	color: #f1be21;
}

ul.skill_list li{
	margin-top: 15px;
	font-size: 18px;
	list-style-position: inside;
}

/* ================= JERRY ================= */

.jerry_main_body{
  background-size: cover;
  width: 153px;
  height: 298px;
  margin: 0 auto;
  display: block;
}

.jerry_body{
  background: url(../svg/jerry_2019.svg) no-repeat center top;
  background-size: cover;
  width: 153px;
  height: 298px;
  margin: 0 auto;
  display: block;
  position: relative;
  z-index: 2;
}

.ojos_container{
  position: absolute;
  width: 100px;
  height: 60px;
  left: 55px;
  z-index: 5;
}

.ojos_container-in{
  position: relative;
  width: 100px;
  height: 60px;
}

.ojo_left{
  display: block;
  position: absolute;
  bottom: 7px;
  left: 37px;
  width: 9px;
  height: 9px;
  background-color: #000000;
  border-radius: 50%;
  -webkit-animation: ojo_cerrado_c 2s linear infinite; /* Chrome, Safari, Opera */
  -moz-animation: ojo_cerrado_c 2s linear infinite; /* Mozilla */
  -o-animation: ojo_cerrado_c 2s linear infinite; /* Opera */
  -ms-animation: ojo_cerrado_c 2s linear infinite; /* Mozilla */
  animation: ojo_cerrado_c 2s linear infinite; /* Rest */
}

.ojo_right{
  display: block;
  position: absolute;
  bottom: 7px;
  right: 34px;
  width: 9px;
  height: 9px;
  background-color: #000000;
  border-radius: 50%;
  -webkit-animation: ojo_cerrado_c 2s linear infinite; /* Chrome, Safari, Opera */
  -moz-animation: ojo_cerrado_c 2s linear infinite; /* Mozilla */
  -o-animation: ojo_cerrado_c 2s linear infinite; /* Opera */
  -ms-animation: ojo_cerrado_c 2s linear infinite; /* Mozilla */
  animation: ojo_cerrado_c 2s linear infinite; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes ojo_cerrado_c{
    0%,40%,60%, 100% { height: 9px;}
    50% { height: 2px;}
}

/* Mozilla */
@-moz-keyframes ojo_cerrado_c{
    0%,40%,60%, 100% { height: 9px;}
    50% { height: 2px;}
}

/* Opera */
@-o-keyframes ojo_cerrado_c{
    0%,40%,60%, 100% { height: 9px;}
    50% { height: 2px;}
}

/* Explorer */
@-ms-keyframes ojo_cerrado_c{
    0%,40%,60%, 100% { height: 9px;}
    50% { height: 2px;}
}

/* Else */
@keyframes ojo_cerrado_c{
    0%,40%,60%, 100% { height: 9px;}
    50% { height: 2px;}
}

.jerry_arm_right{
  	background: url(../svg/jerry_2019_hand.svg) no-repeat center top;
  	background-size: cover;
    width: 83px;
    height: 37px;
    position: absolute;
    bottom: 160px;
    z-index: 1;
    left: 10px;
	-webkit-animation: aleft 2s infinite;
	-moz-animation: aleft 2s infinite;
	-o-animation: aleft 2s infinite;
	-ms-animation: aleft 2s infinite;
	animation: aleft 2s infinite;
}

@-webkit-keyframes aleft{
  0%, 100% {
     -webkit-transform: rotate(20deg);-webkit-transform-origin: bottom right;
  }
  50% {
     -webkit-transform: rotate(0deg);-webkit-transform-origin: bottom right;
  }
}

@-moz-keyframes aleft{
  0%, 100% {
     -moz-transform: rotate(20deg);-moz-transform-origin: bottom right;
  }
  50% {
     -moz-transform: rotate(0deg);-moz-transform-origin: bottom right;
  }
}

@-o-keyframes aleft{
  0%, 100% {
     -o-transform: rotate(20deg);-o-transform-origin: bottom right;
  }
  50% {
     -o-transform: rotate(0deg);-o-transform-origin: bottom right;
  }
}

@-ms-keyframes aleft{
  0%, 100% {
     -ms-transform: rotate(20deg);-ms-transform-origin: bottom right;
  }
  50% {
     -ms-transform: rotate(0deg);-ms-transform-origin: bottom right;
  }
}

@keyframes aleft{
  0%, 100% {
    transform: rotate(20deg);transform-origin: bottom right;
  }
  50% {
    transform: rotate(0deg);transform-origin: bottom right;
  }
}


/* ================= HOME ================= */

.home_in{
	background: url("../images/home/toronto.png") no-repeat bottom left;
	width: 1024px;
	height: 760px;
	margin: 0 auto;
	position: relative;
}

.home_in img{
	width: 100%;
	max-width: auto;
}

.home_in.about_back{
	background: none;
}

.jerry_espo{
	display: none;
}

.lake{
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: #3fa9f5;
	height: 100px;
	z-index: 10;
}

.lake_wave{
	height: 35px;
	bottom:68px;
	z-index: 10;
    width: 100%;
    position: absolute;

}

.l_w_home{
	height: 35px;
	z-index: 10;
    width: 100%;
    position: absolute;
    bottom: -40px;
}

.lw2{
	z-index: 0;
}

.lake_in {
    position: relative;
    width: 100%;
}

.officer{
	width: 267px;
	height: 279px;
	position: absolute;
	z-index: 5;
	bottom: 191px;
	right: 427px;
}

.land{
	position: absolute;
	z-index: 5;
	bottom: 83px;
	width: 861px;
	margin: 0 auto;
	right: 0;
	left: 0;
}

.boat{
	position: absolute;
	bottom: 83px;
	right: 0;
	z-index: 2;
}

.seagul_right{
	width: 67px;
	height: 64px;
	position: absolute;
	bottom: 190px;
	left:150px;
	z-index: 6;
}

.seagul_left{
	width: 67px;
	height: 64px;
	position: absolute;
	bottom: 220px;
	right: 262px;
}

.seagull_main{
	position: absolute;
	top: -100px;
	left: -88px;
	z-index: 1;
	width: 60px;
	height: 72px;
	margin: 0;
	-webkit-animation: birdFlyingmain 2s linear 0s 1 normal;
	-moz-animation: birdFlyingmain 2s linear 0s 1 normal;
	-o-animation: birdFlyingmain 2s linear 0s 1 normal;
	-ms-animation: birdFlyingmain 2s linear 0s 1 normal;
	animation: birdFlyingmain 2s linear 0s 1 normal;
}

@-webkit-keyframes birdFlyingmain {
	0% {
		opacity: 1;
		-webkit-transform: translate(0px, 0px) rotate(0deg);
	}
	97.9% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(280px, 600px) rotate(0deg);
	}
}

@-moz-keyframes birdFlyingmain {
	0% {
		opacity: 1;
		-moz-transform: translate(0px, 0px) rotate(0deg);
	}
	97.9% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-moz-transform: translate(280px, 600px) rotate(0deg);
	}
}

@-o-keyframes birdFlyingmain {
	0% {
		opacity: 1;
		-o-transform: translate(0px, 0px) rotate(0deg);
	}
	97.9% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-o-transform: translate(280px, 600px) rotate(0deg);
	}
}

@-ms-keyframes birdFlyingmain {
	0% {
		opacity: 1;
		-ms-transform: translate(0px, 0px) rotate(0deg);
	}
	97.9% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-ms-transform: translate(280px, 600px) rotate(0deg);
	}
}

@keyframes birdFlyingmain {
	0% {
		opacity: 1;
		transform: translate(0px, 0px) rotate(0deg);
	}
	97.9% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(280px, 600px) rotate(0deg);
	}
}

.seagull_stand_main{
	position: absolute;
	bottom:190px;
	left:190px;
	z-index: 5;
	width: 67px;
	height: 64px;
	-webkit-animation: seagull_stand_main 2s linear 0s 1 normal;
	-moz-animation: seagull_stand_main 2s linear 0s 1 normal;
	-o-animation: seagull_stand_main 2s linear 0s 1 normal;
	-ms-animation: seagull_stand_main 2s linear 0s 1 normal;
	animation: seagull_stand_main 2s linear 0s 1 normal;
}

@-webkit-keyframes seagull_stand_main {
	0% {
		opacity: 0;
	}
	97.9% {
		opacity: 0;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes seagull_stand_main {
	0% {
		opacity: 0;
	}
	97.9% {
		opacity: 0;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-o-keyframes seagull_stand_main {
	0% {
		opacity: 0;
	}
	97.9% {
		opacity: 0;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-ms-keyframes seagull_stand_main {
	0% {
		opacity: 0;
	}
	97.9% {
		opacity: 0;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes seagull_stand_main {
	0% {
		opacity: 0;
	}
	97.9% {
		opacity: 0;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

.bag_one{
	width: 103px;
	height: 62px;
	position: absolute;
	bottom: 191px;
	right: 107px;
	z-index:6;
}

.flag_one{
	position: absolute;
	top: 296px;
	right:336px;
}

.flag_three{
	position: absolute;
	top: 344px;
	left:619px;
}

.flag_four{
	position: absolute;
	top: 408px;
	left:619px;
}

.flag_five{
	position: absolute;
	top: 344px;
	left:467px;
}

.flag_six{
	position: absolute;
	top: 408px;
	left:467px;
}

.flag_seven{
	position: absolute;
	top: 344px;
	left:313px;
}

.flag_eight{
	position: absolute;
	top: 344px;
	left:154px;
}

.canada_flag{
	background: url('../images/home/flag_large.png') top center;
}

.spain_flag{
	background: url('../images/about/spain.png') top center;
}

.cantabria_flag{
	background: url('../images/about/cantabria.png') top center;
}

.uk_flag{
	background: url('../images/about/uk.png') top center;
}

.scotland_flag{
	background: url('../images/about/scotland.png') top center;
}

.mexico_flag{
	background: url('../images/about/mexico.png') top center;
}

.china_flag{
	background: url('../images/about/china.png') top center;
}

.waving_large{
	width: 92px;
	height: 64px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	-webkit-animation: waving_flag 1s steps(2) infinite;
	-moz-animation: waving_flag 1s steps(2) infinite;
	-o-animation: waving_flag 1s steps(2) infinite;
	-ms-animation: waving_flag 1s steps(2) infinite;
	animation: waving_flag 1s steps(2) infinite;
}

@-webkit-keyframes waving_flag {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -126px;
	}
}

@-moz-keyframes waving_flag {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -126px;
	}
}

@-o-keyframes waving_flag {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -126px;
	}
}

@-ms-keyframes waving_flag {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -126px;
	}
}

@keyframes waving_flag {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -126px;
	}
}

.flag_two{
	position: absolute;
	top: 422px;
	right:436px;
}

.canada_lilflag{
	background: url('../images/home/flag_lil.png') top center;
}

.waving_lil{
	width: 34px;
	height: 23px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	-webkit-animation: waving_lilflag 1s steps(2) infinite;
	-moz-animation: waving_lilflag 1s steps(2) infinite;
	-o-animation: waving_lilflag 1s steps(2) infinite;
	-ms-animation: waving_lilflag 1s steps(2) infinite;
	animation: waving_lilflag 1s steps(2) infinite;
}

@-webkit-keyframes waving_lilflag {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -48px;
	}
}

@-moz-keyframes waving_lilflag {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -48px;
	}
}

@-o-keyframes waving_lilflag {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -48px;
	}
}

@-ms-keyframes waving_lilflag {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -48px;
	}
}

@keyframes waving_lilflag {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 0px -48px;
	}
}


/* ================= ABOUT ================= */

.about_in{
	background: url("../images/home/toronto.png") no-repeat bottom left;
	width: 1024px;
	height: 760px;
	margin: 0 auto;
	position: relative;
}

.about_in img{
	width: 100%;
	max-width: auto;
}

.grandpa_one{
	background: url(../svg/grandpa.svg) no-repeat center top;
	background-size: cover;
	width: 65px;
	height: 224px;
	margin: 0 auto;
	display: block;
	position: absolute;
	z-index: 5;
	bottom: 190px;
	left:520px;
}

.grandma_one{
	background: url(../svg/grandma.svg) no-repeat center top;
	background-size: cover;
	width: 78px;
	height: 196px;
	margin: 0 auto;
	display: block;
	position: absolute;
	z-index: 5;
	bottom: 190px;
	left:363px;
}

.grandma_two{
	background: url(../svg/grandma2.svg) no-repeat center top;
	background-size: cover;
	width: 118px;
	height: 193px;
	margin: 0 auto;
	display: block;
	position: absolute;
	z-index: 5;
	bottom: 190px;
	left:205px;
}

.grandpa_two{
	background: url(../svg/grandpa2.svg) no-repeat center top;
	background-size: cover;
	width: 67px;
	height: 209px;
	margin: 0 auto;
	display: block;
	position: absolute;
	z-index: 5;
	bottom: 191px;
	left:52px;
}

.land_main{
	position: absolute;
	z-index: 9;
	bottom: 0px;
	width: 980px;
	margin: 0 auto;
	right: 0;
	left: 0;
	height: 191px;
	overflow: hidden;
}

.land_main img{
	width: 100%;
	max-width: auto;
}

.briks{
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: #700e0f;
	height: 30px;
	z-index: 10;
}

.pole {
    background-color: #231f20;
    width: 7px;
    height: 238px;
    position: absolute;
    bottom: 191px;
    z-index: 3;
    left: 147px;
}

.pole_two{
    left: 306px;
}

.pole_three{
    left: 449px;	
}

.flag{
  display: block;
  width: 72px;
  height: 50px;
  position: absolute;
  bottom: 195px;
  z-index: 4;
}

.flag_in{
  width: 72px;
  height: 50px;
  position: absolute;
  margin: 0 auto;
  right:0px;
  -webkit-animation: flag_waving .3s steps(2) infinite;
  -moz-animation: flag_waving .3s steps(2) infinite;
  -o-animation: flag_waving .3s steps(2) infinite;
  -ms-animation: flag_waving .3s steps(2) infinite;
  animation: flag_waving .3s steps(2) infinite;
}

/* Chrome, Safari */
@-webkit-keyframes flag_waving {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -100px;
  }
}

/* Mozilla */
@-moz-keyframes flag_waving {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -100px;
  }
}

/* Opera */
@-o-keyframes flag_waving {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -100px;
  }
}

/* Explorer */
@-ms-keyframes flag_waving {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -100px;
  }
}

/* Else */
@keyframes flag_waving {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -100px;
  }
}

.flag_uk{
  background: url(../svg/uk.svg) repeat-x center top;
}

.flag_mexico{
  background: url(../svg/mexico.svg) repeat-x center top;
}

.flag_china{
  background: url(../svg/china.svg) repeat-x center top;
}

.flag_canada{
  background: url(../svg/canada.svg) repeat-x center top;
}

.flag_ontario{
  background: url(../svg/ontario.svg) repeat-x center top;
}

.flag_toronto{
  background: url(../svg/toronto.svg) repeat-x center top;
}

.flag_uno {
    left: 450px;
    bottom: 374px;
    z-index: 2;
}

.flag_dos {
    left: 313px;
    bottom: 374px;
    z-index: 2;
}

.flag_tres {
    left: 154px;
    bottom: 374px;
    z-index: 2;
}

.flag_cuatro {
    left: 597px;
    bottom: 411px;
    z-index: 2;
}

.pole_cuatro{
     left: 590px;
     height: 280px;
}

.flag_cinco {
    left: 287px;
    bottom: 411px;
    z-index: 2;
}

.pole_cinco{
     left: 280px;
     height: 280px;
}

.flag_seis {
    left: 688px;
    bottom: 411px;
    z-index: 2;
}

.pole_seis{
     left: 681px;
     height: 280px;
}

.jerry_shade{
	background: url(../svg/shade.svg) no-repeat center top;
	background-size: 100% auto;
	display: block;
	width: 95px;
	height: 293px;
	position: absolute;
	bottom: 187px;
	right: 171px;
	z-index: 8;
}

.family_tree{
	background: url(../svg/family_tree.svg) no-repeat center top;
	background-size: cover;
	width: 605px;
	height: 306px;
	margin: 0 auto;
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 190px;
	left:415px;
}

.roots {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
	background: url(../svg/roots.svg) repeat-x center top;
    height: 104px;
    z-index: 2;
}

/* ================= EDUCATION ================= */

#main_jerry_in{
	color: #29abe2;
	position: fixed;
	z-index: 99;
	width: 664px;
	margin: 0 auto;
	height: 298px;
	right: 0;
	left: 0;
	top: 272px;
    pointer-events: none;
}

.education_in{
	width: 1024px;
	height: 760px;
	margin: 0 auto;
	position: relative;
}

.education_in img{
	width: 100%;
	max-width: auto;
}

.grass{
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: #009245;
	height: 30px;
	z-index: 10;
}

.uvm{
	width: 552px;
	height: 202px;
	position: absolute;
	bottom: 165px;
	left: 75px;
	z-index:6;
}

.diploma{
	position: absolute;
	width: 159px;
	height: 298px;
	bottom: 193px;
	right: 158px;
	z-index:101;
}

.diploma_back{
	position: absolute;
	width: 47px;
	height: 33px;
	bottom: 356px;
	right: 195px;
	z-index:6;
}

.external_link {
	position: absolute;
	right: 114px;
	top:198px;
	z-index: 7;
}

.responsive_button_web{
	display: none!important;
}

.external_link a{
	display: block;
	position: relative;
	width: 64px;
	height: 64px;
	background: #7adcf9;
	border-radius: 50%;
	overflow: hidden;
}

.external_link p{
	font-weight: 700;
	color: #ffffff;
	position: absolute;
	text-align: center;
	top:25px;
	/* soft animation*/
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.external_link p{
	right:-85px;
}

.external_link img{
	width: 64px;
	height: 64px;
	position: absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	top:0px;
	/* soft animation*/
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.external_link a:hover{
	background:#662d91;
}

.external_link a:hover img{
	top: 35px;
}

.external_link a:hover p{
	opacity: 1;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
}

.arbustos {
    display: block;
    position: absolute;
    bottom: 29px;
    width: 100%;
	background: url(../svg/arbustos.svg) repeat-x center top;
    height: 41px;
    z-index: 2;
}

.arboles {
    display: block;
    position: absolute;
    bottom: 29px;
    width: 100%;
	background: url(../svg/arboles.svg) repeat-x center top;
    height: 133px;
    z-index: 1;
}


/* ================= SKILLS ================= */

#skills{
	background: #42210b;
}

.skills_in{
	width: 1024px;
	height: 760px;
	margin: 0 auto;
	position: relative;
}

.skills_in img{
	width: 100%;
	max-width: auto;
}

.seat{
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: url("../images/skills/seat.png") repeat-x bottom center;
	height: 99px;
	z-index: 10;
}

.hat{
	width: 58px;
	height: 37px;
	position: absolute;
	bottom: 191px;
	right: 310px;
	z-index:6;
}

.rabbit{
	width: 58px;
	height: 37px;
	position: absolute;
	bottom: 242px;
	right: 320px;
	z-index:5;
	-webkit-animation: r_head 3s linear infinite;
	-moz-animation: r_head 3s linear infinite;
	-o-animation: r_head 3s linear infinite;
	-ms-animation: r_head 3s linear infinite;
	animation: r_head 3s linear infinite;
}

@-webkit-keyframes r_head {
	0% {
		 -webkit-transform: rotate(10deg);-webkit-transform-origin: bottom right;
	}
	50% {
		 -webkit-transform: rotate(-10deg);-webkit-transform-origin: bottom right;
	}
	100% {
		 -webkit-transform: rotate(10deg);-webkit-transform-origin: bottom right;
	}
}

@-moz-keyframes r_head {
	0% {
		 -moz-transform: rotate(10deg);-moz-transform-origin: bottom right;
	}
	50% {
		 -moz-transform: rotate(-10deg);-moz-transform-origin: bottom right;
	}
	100% {
		 -moz-transform: rotate(10deg);-moz-transform-origin: bottom right;
	}
}

@-o-keyframes r_head {
	0% {
		 -o-transform: rotate(10deg);-o-transform-origin: bottom right;
	}
	50% {
		 -o-transform: rotate(-10deg);-o-transform-origin: bottom right;
	}
	100% {
		 -o-transform: rotate(10deg);-o-transform-origin: bottom right;
	}
}

@-ms-keyframes r_head {
	0% {
		 -ms-transform: rotate(10deg);-ms-transform-origin: bottom right;
	}
	50% {
		 -ms-transform: rotate(-10deg);-ms-transform-origin: bottom right;
	}
	100% {
		 -ms-transform: rotate(10deg);-ms-transform-origin: bottom right;
	}
}

@keyframes r_head {
	0% {
		 transform: rotate(10deg);transform-origin: bottom right;
	}
	50% {
		 transform: rotate(-10deg);transform-origin: bottom right;
	}
	100% {
		 transform: rotate(10deg);transform-origin: bottom right;
	}
}

.wand{
	width: 20px;
	height: 69px;
	position: absolute;
	bottom: 337px;
	right: 320px;
	z-index:6;
	-webkit-animation: r_head 2s linear infinite;
	-moz-animation: r_head 2s linear infinite;
	-o-animation: r_head 2s linear infinite;
	-ms-animation: r_head 2s linear infinite;
	animation: r_head 2s linear infinite;
}

@-webkit-keyframes r_head {
	0% {
		 -webkit-transform: rotate(-10deg);-webkit-transform-origin: bottom right;
	}
	50% {
		 -webkit-transform: rotate(10deg);-webkit-transform-origin: bottom right;
	}
	100% {
		 -webkit-transform: rotate(-10deg);-webkit-transform-origin: bottom right;
	}
}

@-moz-keyframes r_head {
	0% {
		 -moz-transform: rotate(10deg);-moz-transform-origin: bottom right;
	}
	50% {
		 -moz-transform: rotate(-10deg);-moz-transform-origin: bottom right;
	}
	100% {
		 -moz-transform: rotate(10deg);-moz-transform-origin: bottom right;
	}
}

@-o-keyframes r_head {
	0% {
		 -o-transform: rotate(10deg);-o-transform-origin: bottom right;
	}
	50% {
		 -o-transform: rotate(-10deg);-o-transform-origin: bottom right;
	}
	100% {
		 -o-transform: rotate(10deg);-o-transform-origin: bottom right;
	}
}

@-ms-keyframes r_head {
	0% {
		 -ms-transform: rotate(10deg);-ms-transform-origin: bottom right;
	}
	50% {
		 -ms-transform: rotate(-10deg);-ms-transform-origin: bottom right;
	}
	100% {
		 -ms-transform: rotate(10deg);-ms-transform-origin: bottom right;
	}
}

@keyframes r_head {
	0% {
		 transform: rotate(10deg);transform-origin: bottom right;
	}
	50% {
		 transform: rotate(-10deg);transform-origin: bottom right;
	}
	100% {
		 transform: rotate(10deg);transform-origin: bottom right;
	}
}

.ballon{
	width: 62px;
	height: 144px;
	position: absolute;
}

.b_one{
	bottom: 250px;
	left: 70px;
	z-index:6;
	-webkit-animation: bone 3s linear infinite;
	-moz-animation: bone 3s linear infinite;
	-o-animation: bone 3s linear infinite;
	-ms-animation: bone 3s linear infinite;
	animation: bone 3s linear infinite;
}

@-webkit-keyframes bone {
	0% {
		bottom: 250px; 
	}
	50% {
		bottom:220px;
	}
	100% {
		bottom:250px;
	}
}

@-moz-keyframes bone {
	0% {
		bottom: 250px; 
	}
	50% {
		bottom:220px;
	}
	100% {
		bottom:250px;
	}
}

@-o-keyframes bone {
	0% {
		bottom: 250px; 
	}
	50% {
		bottom:220px;
	}
	100% {
		bottom:250px;
	}
}

@-ms-keyframes bone {
	0% {
		bottom: 250px; 
	}
	50% {
		bottom:220px;
	}
	100% {
		bottom:250px;
	}
}

@keyframes bone {
	0% {
		bottom: 250px; 
	}
	50% {
		bottom:220px;
	}
	100% {
		bottom:250px;
	}
}


.b_two{
	bottom: 218px;
	left: 121px;
	z-index:7;
	-webkit-animation: btwo 4s linear infinite;
	-moz-animation: btwo 4s linear infinite;
	-o-animation: btwo 4s linear infinite;
	-ms-animation: btwo 4s linear infinite;
	animation: btwo 4s linear infinite;
}

@-webkit-keyframes btwo {
	0% {
		bottom: 218px; 
	}
	50% {
		bottom:258px;
	}
	100% {
		bottom:218px;
	}
}

@-moz-keyframes btwo {
	0% {
		bottom: 218px; 
	}
	50% {
		bottom:258px;
	}
	100% {
		bottom:218px;
	}
}

@-o-keyframes  btwo {
	0% {
		bottom: 218px; 
	}
	50% {
		bottom:258px;
	}
	100% {
		bottom:218px;
	}
}

@-ms-keyframes btwo {
	0% {
		bottom: 218px; 
	}
	50% {
		bottom:258px;
	}
	100% {
		bottom:218px;
	}
}

@keyframes btwo {
	0% {
		bottom: 218px; 
	}
	50% {
		bottom:258px;
	}
	100% {
		bottom:218px;
	}
}

.b_three{
	bottom: 269px;
	left: 162px;
	z-index:6;
	-webkit-animation: bthree 4s linear infinite;
	-moz-animation: bthree 4s linear infinite;
	-o-animation: bthree 4s linear infinite;
	-ms-animation: bthree 4s linear infinite;
	animation: bthree 4s linear infinite;
}

@-webkit-keyframes bthree {
	0% {
		bottom: 269px; 
	}
	50% {
		bottom:229px;
	}
	100% {
		bottom:269px;
	}
}

@-moz-keyframes bthree {
	0% {
		bottom: 269px; 
	}
	50% {
		bottom:229px;
	}
	100% {
		bottom:269px;
	}
}

@-o-keyframes bthree {
	0% {
		bottom: 269px; 
	}
	50% {
		bottom:229px;
	}
	100% {
		bottom:269px;
	}
}

@-ms-keyframes  bthree {
	0% {
		bottom: 269px; 
	}
	50% {
		bottom:229px;
	}
	100% {
		bottom:269px;
	}
}

@keyframes bthree {
	0% {
		bottom: 269px; 
	}
	50% {
		bottom:229px;
	}
	100% {
		bottom:269px;
	}
}

.b_four{
	bottom: 217px;
	left: 208px;
	z-index:7;
	-webkit-animation: bfour 3s linear infinite;
	-moz-animation: bfour 3s linear infinite;
	-o-animation: bfour 3s linear infinite;
	-ms-animation: bfour 3s linear infinite;
	animation: bfour 3s linear infinite;
}

@-webkit-keyframes bfour {
	0% {
		bottom: 208px; 
	}
	50% {
		bottom:238px;
	}
	100% {
		bottom:208px;
	}
}

@-moz-keyframes bfour {
	0% {
		bottom: 208px; 
	}
	50% {
		bottom:238px;
	}
	100% {
		bottom:208px;
	}
}

@-o-keyframes bfour {
	0% {
		bottom: 208px; 
	}
	50% {
		bottom:238px;
	}
	100% {
		bottom:208px;
	}
}

@-ms-keyframes bfour {
	0% {
		bottom: 208px; 
	}
	50% {
		bottom:238px;
	}
	100% {
		bottom:208px;
	}
}

@keyframes bfour {
	0% {
		bottom: 208px; 
	}
	50% {
		bottom:238px;
	}
	100% {
		bottom:208px;
	}
}

.b_five{
	bottom: 258px;
	left: 247px;
	z-index:6;
	-webkit-animation: bfive 3s linear infinite;
	-moz-animation: bfive 3s linear infinite;
	-o-animation: bfive 3s linear infinite;
	-ms-animation: bfive 3s linear infinite;
	animation: bfive 3s linear infinite;
}

@-webkit-keyframes bfive {
	0% {
		bottom: 258px; 
	}
	50% {
		bottom:218px;
	}
	100% {
		bottom:258px;
	}
}

@-moz-keyframes bfive {
	0% {
		bottom: 258px; 
	}
	50% {
		bottom:218px;
	}
	100% {
		bottom:258px;
	}
}

@-o-keyframes bfive {
	0% {
		bottom: 258px; 
	}
	50% {
		bottom:218px;
	}
	100% {
		bottom:258px;
	}
}

@-ms-keyframes bfive {
	0% {
		bottom: 258px; 
	}
	50% {
		bottom:218px;
	}
	100% {
		bottom:258px;
	}
}

@keyframes bfive {
	0% {
		bottom: 258px; 
	}
	50% {
		bottom:218px;
	}
	100% {
		bottom:258px;
	}
}

.b_six{
	bottom: 204px;
	left: 296px;
	z-index:7;
	-webkit-animation: bsix 4s linear infinite;
	-moz-animation: bsix 4s linear infinite;
	-o-animation: bsix 4s linear infinite;
	-ms-animation: bsix 4s linear infinite;
	animation: bsix 4s linear infinite;
}

@-webkit-keyframes bsix {
	0% {
		bottom: 204px; 
	}
	50% {
		bottom:254px;
	}
	100% {
		bottom:204px;
	}
}

@-moz-keyframes bsix {
	0% {
		bottom: 204px; 
	}
	50% {
		bottom:254px;
	}
	100% {
		bottom:204px;
	}
}

@-o-keyframes bsix {
	0% {
		bottom: 204px; 
	}
	50% {
		bottom:254px;
	}
	100% {
		bottom:204px;
	}
}

@-ms-keyframes bsix {
	0% {
		bottom: 204px; 
	}
	50% {
		bottom:254px;
	}
	100% {
		bottom:204px;
	}
}

@keyframes bsix {
	0% {
		bottom: 204px; 
	}
	50% {
		bottom:254px;
	}
	100% {
		bottom:204px;
	}
}

.b_seven{
	bottom: 247px;
	left: 341px;
	z-index:6;
	-webkit-animation: bseven 4s linear infinite;
	-moz-animation: bseven 4s linear infinite;
	-o-animation: bseven 4s linear infinite;
	-ms-animation: bseven 4s linear infinite;
	animation: bseven 4s linear infinite;
}

@-webkit-keyframes bseven {
	0% {
		bottom: 247px; 
	}
	50% {
		bottom:207px;
	}
	100% {
		bottom:247px;
	}
}

@-moz-keyframes bseven {
	0% {
		bottom: 247px; 
	}
	50% {
		bottom:207px;
	}
	100% {
		bottom:247px;
	}
}

@-o-keyframes bseven {
	0% {
		bottom: 247px; 
	}
	50% {
		bottom:207px;
	}
	100% {
		bottom:247px;
	}
}

@-ms-keyframes bseven {
	0% {
		bottom: 247px; 
	}
	50% {
		bottom:207px;
	}
	100% {
		bottom:247px;
	}
}

@keyframes bseven {
	0% {
		bottom: 247px; 
	}
	50% {
		bottom:207px;
	}
	100% {
		bottom:247px;
	}
}

.b_eight{
	bottom: 214px;
	left: 388px;
	z-index:7;
	-webkit-animation: beight 5s linear infinite;
	-moz-animation: beight 5s linear infinite;
	-o-animation: beight 5s linear infinite;
	-ms-animation: beight 5s linear infinite;
	animation: beight 5s linear infinite;
}

@-webkit-keyframes beight {
	0% {
		bottom: 214px; 
	}
	50% {
		bottom:264px;
	}
	100% {
		bottom:214px;
	}
}

@-moz-keyframes beight {
	0% {
		bottom: 214px; 
	}
	50% {
		bottom:264px;
	}
	100% {
		bottom:214px;
	}
}

@-o-keyframes beight {
	0% {
		bottom: 214px; 
	}
	50% {
		bottom:264px;
	}
	100% {
		bottom:214px;
	}
}

@-ms-keyframes beight {
	0% {
		bottom: 214px; 
	}
	50% {
		bottom:264px;
	}
	100% {
		bottom:214px;
	}
}

@keyframes beight {
	0% {
		bottom: 214px; 
	}
	50% {
		bottom:264px;
	}
	100% {
		bottom:214px;
	}
}

.b_nine{
	bottom: 273px;
	left: 431px;
	z-index:6;
	-webkit-animation: bnine 5s linear infinite;
	-moz-animation: bnine 5s linear infinite;
	-o-animation: bnine 5s linear infinite;
	-ms-animation: bnine 5s linear infinite;
	animation: bnine 5s linear infinite;
}

@-webkit-keyframes bnine {
	0% {
		bottom: 273px; 
	}
	50% {
		bottom:203px;
	}
	100% {
		bottom:273px;
	}
}

@-moz-keyframes bnine {
	0% {
		bottom: 273px; 
	}
	50% {
		bottom:203px;
	}
	100% {
		bottom:273px;
	}
}

@-o-keyframes bnine {
	0% {
		bottom: 273px; 
	}
	50% {
		bottom:203px;
	}
	100% {
		bottom:273px;
	}
}

@-ms-keyframes bnine {
	0% {
		bottom: 273px; 
	}
	50% {
		bottom:203px;
	}
	100% {
		bottom:273px;
	}
}

@keyframes bnine {
	0% {
		bottom: 273px; 
	}
	50% {
		bottom:203px;
	}
	100% {
		bottom:273px;
	}
}

.b_ten{
	bottom: 250px;
	left: 480px;
	z-index:7;
	-webkit-animation: bten 4s linear infinite;
	-moz-animation: bten 4s linear infinite;
	-o-animation: bten 4s linear infinite;
	-ms-animation: bten 4s linear infinite;
	animation: bten 4s linear infinite;
}

@-webkit-keyframes bten {
	0% {
		bottom: 250px; 
	}
	50% {
		bottom:200px;
	}
	100% {
		bottom:250px;
	}
}

@-moz-keyframes bten {
	0% {
		bottom: 250px; 
	}
	50% {
		bottom:200px;
	}
	100% {
		bottom:250px;
	}
}

@-o-keyframes bten {
	0% {
		bottom: 250px; 
	}
	50% {
		bottom:200px;
	}
	100% {
		bottom:250px;
	}
}

@-ms-keyframes bten {
	0% {
		bottom: 250px; 
	}
	50% {
		bottom:200px;
	}
	100% {
		bottom:250px;
	}
}

@keyframes bten {
	0% {
		bottom: 250px; 
	}
	50% {
		bottom:200px;
	}
	100% {
		bottom:250px;
	}
}

.b_eleven{
	bottom: 200px;
	left: 530px;
	z-index:6;
	-webkit-animation: beleven 5s linear infinite;
	-moz-animation: beleven 5s linear infinite;
	-o-animation: beleven 5s linear infinite;
	-ms-animation: beleven 5s linear infinite;
	animation: beleven 5s linear infinite;
}

@-webkit-keyframes beleven {
	0% {
		bottom: 200px; 
	}
	50% {
		bottom:275px;
	}
	100% {
		bottom:200px;
	}
}

@-moz-keyframes beleven {
	0% {
		bottom: 200px; 
	}
	50% {
		bottom:275px;
	}
	100% {
		bottom:200px;
	}
}

@-o-keyframes beleven {
	0% {
		bottom: 200px; 
	}
	50% {
		bottom:275px;
	}
	100% {
		bottom:200px;
	}
}

@-ms-keyframes beleven {
	0% {
		bottom: 200px; 
	}
	50% {
		bottom:275px;
	}
	100% {
		bottom:200px;
	}
}

@keyframes beleven {
	0% {
		bottom: 200px; 
	}
	50% {
		bottom:275px;
	}
	100% {
		bottom:200px;
	}
}



/* ================= EXPERIENCE ================= */

#experience{
	background-color:#e6e6e6 ;
}

.experience_in{
	width: 1024px;
	height: 760px;
	margin: 0 auto;
	position: relative;
}

.experience_in img{
	width: 100%;
	max-width: auto;
}

.respo_h2{
	display: none;
}

.normal_h2{
	display: block;
}

.pavement{
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: #a7b5bc;
	height: 30px;
	z-index: 10;
}

.pavement_main{
	position: absolute;
	bottom: 0px;
	width: 763px;
	right: 0;
	height: 191px;
	overflow: hidden;
}

.pavement_main img{
	width: 100%;
	max-width: auto;
}

.card{
	position: absolute;
	z-index: 102;
	bottom: 349px;
	width: 28px;
	height: 21px;
	right: 229px;
}

.work_desk{
	position: absolute;
	z-index: 5;
	bottom: 191px;
	width: 225px;
	height: 213px;
	right: 23px;
}

.work_chair{
	position: absolute;
	z-index: 101;
	width: 124px;
	height: 173px;
	right: 72px;
	bottom: 191px;
}

.work_bag{
	width: 103px;
	height: 62px;
	position: absolute;
	bottom: 191px;
	right: 0px;
	z-index:101;
}

.work_map{
	width: 447px;
	height: 548px;
	position: absolute;
	bottom: 57px;
	left: 80px;
	z-index:3;
}

.work_link{
	position: absolute;
	z-index: 6;
}

.work_one{
	bottom:179px;
	left: 350px;
}

.work_two{
	bottom:147px;
	left: 335px;
}

.work_three{
	bottom:143px;
	left: 364px;
}

.work_four{
	bottom:373px;
	left: 429px;
}

.work_five{
	bottom: 316px;
    left: 318px;
}

.work_six{
	bottom: 324px;
    left: 278px;
}

.work_seven{
	bottom:275px;
	left: 254px;
}

.work_eight{
	bottom: 309px;
    left: 242px;
}

.work_nine{
    bottom: 283px;
    left: 225px;
}

.work_ten{
    bottom: 352px;
    left: 383px;
}

.dots{
	position: absolute;
	top: 202px;
	left: 650px;
	z-index:5;
}

.dot_in span{
	display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    text-align: left;
    float: right;
    margin-right: 4px;
    margin-top: 3px;
    color: #00ffff;
    font-size: 15px;
    text-indent: 4px;
	line-height: 1;
}

.dot_in p{
	font-size: 19px;
	font-weight: bold;
	margin: 11px 0;
	color: #009cff;
    background-color: #00ffff;
    border-radius: 30px;
    width: 62px;
    text-align: center;
    cursor: pointer;
}

.dot_in p.activo{
	background-color: #ff00ff;
	color: #9e005d;
}

.dot_in p.activo span{
	color: #ff00ff;
}

.dot_in p:hover{
	background-color: #00FF00;
	color: #009C00;
}

.dot_in p:hover span{
	color: #00FF00;
}

.web_link.exp1 a:hover{
	background:#0071bc;
}

.web_link.exp2 a:hover{
	background:#39b54a;
}

.web_link.exp3 a:hover{
	background:#c1272d;
}

.web_link.exp4 a:hover{
	background:#ff931e;
}

.web_link.exp5 a:hover{
	background:#808080;
}

.web_link.exp6 a:hover{
	background: #b3b3b3;
}

.web_link.exp7 a:hover{
	background: #88a39a;
}

.work_dot{
	display: block;
	width: 10px;
	height: 10px;
	background: #ffffff;
	border-radius: 50%;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-ms-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	text-align: center;
}

.work_dot:hover{
	-webkit-transform:scale(2, 2);
	-moz-transform:scale(2, 2);
	-o-transform:scale(2, 2);
	-ms-transform:scale(2, 2);
	transform:scale(2, 2);
	cursor: pointer;
}

.btn_active{
	background: #ffffff;
	position: absolute;
	left:392px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	z-index: 8;
}

.color_one{
	background: #0071bc;
	top: 258px;
}

.color_two{
	background: #39b54a;
	top: 225px;
}

.color_three{
	background: #c1272d;
	top: 126px;
}

.color_four{
	background: #ff931e;
	top: 192px;
}

.color_five{
	background: #808080;
	top: 159px;
}

.color_six{
	background: #b3b3b3;
	top: 94px;
}

.color_seven{
	background: #88a39a;
	top: 60px;
}

.description{
	position: absolute;
	z-index: 201;
	bottom: 87px;
	width: 347px;
	height: 474px;
	left: 259px;
	background: #00ace4;
	border-radius: 25px;
	padding: 15px;
	display: none;
}

.close_btn{
	background: #7adcf9;
	position: absolute;
	bottom: 470px;
	left:388px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	z-index: 8;
	text-align: center;
	font-size: 25px;
	font-weight: 300;
	cursor: pointer;
	text-indent: 3px;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-ms-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.close_btn:hover{
	background: #c1272d;
}

.description_in h1{
	font-size: 28px;
	font-weight: lighter;
	font-family: 'QuicksandLight';
	text-transform: uppercase;
	margin-bottom: 5px;
}

.description_in h2{
	color: #93d3ef;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 2px;
}

.country_flag{
	font-size: 14px;
	color: #ffffff;
	font-weight: 300;
}

img.mxflag{
	width: 30px;
	height: 16px;
	margin-right: 6px;
}

.first_block, .duration_one,.second_block, .duration_two{
	display: inline-block;
}

.first_block{
	width: 57%;
}

.duration_one,.duration_two{
	width: 30%;
	margin:5px 10px 5px 0;
}

.second_block p{
	color: #0071bc;
	font-size: 17px;
	text-transform: uppercase;
	text-align: right;
	font-weight: bold;
}

.title_inner{
	font-weight: 700;
	color: #0071bc;
}

.desc_inner{
	font-size: 14px;
}

.description_in h3{
	color: #0071bc;
	border-top:3px solid #31b7e5;
	padding: 2px 0;
}

.main_desc{
	font-size: 15px;
	line-height: 20px;
	margin-bottom: 7px;
}

.web_link {
	position: absolute;
	right: 160px;
	bottom:20px;
	z-index: 7;
}

.web_link a{
	display: block;
	position: relative;
	width: 64px;
	height: 64px;
	background: #7adcf9;
	border-radius: 50%;
	overflow: hidden;
}

.web_link p{
	font-weight: 700;
	color: #ffffff;
	position: absolute;
	text-align: center;
	top:25px;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-ms-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.web_link p{
	right:-85px;
}

.web_link img{
	width: 64px;
	height: 64px;
	position: absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	top:0px;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.web_link a:hover{
	background:#93278f;
}

.web_link a:hover img{
	top: 35px;
}

.web_link a:hover p{
	opacity: 1;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
}

.ventana{
  background: url("../svg/ventana.svg") no-repeat center top;
  background-size: cover;
  display: block;
  width: 174px;
  height: 234px;
  position: absolute;
  top: 176px;
  right: 125px;
  z-index: 5;
}

/* ================= PORTFOLIO ================= */

#portfolio{
	background-color: #BAE5EF;
}

.portfolio_in{
	width: 1024px;
	height: 760px;
	margin: 0 auto;
	position: relative;
}

.portfolio_in img{
	width: 100%;
	max-width: auto;
}

.pavement.pav_port{
	background-color: #5F6973;
}

.bag_port{
	width: 103px;
	height: 62px;
	position: absolute;
	bottom:191px;
	right:271px;
	z-index: 99;
}

.port_desk{
	width: 175px;
	height: 208px;
	position: absolute;
	bottom:191px;
	right:31px;
	z-index: 5;
}

.laptop{
	width: 78px;
	height: 25px;
	position: absolute;
	bottom:281px;
	right:110px;
	z-index: 7;
}

.laptop_home{
	width: 78px;
	height: 25px;
	position: absolute;
	bottom:290px;
	right:564px;
	z-index: 7;
}

.shelfa{
  background: url("../svg/shelf.svg") no-repeat center top;
  background-size: cover;
  display: block;
  width: 227px;
  height: 88px;
  position: absolute;
  top: 176px;
  right: 125px;
  z-index: 5;
}

.light_home{
	width: 70px;
	height: 46px;
	position: absolute;
	bottom:293px;
	right:564px;
	z-index: 6;
	-webkit-animation: lap_light 3s linear infinite;
	-moz-animation: lap_light 3s linear infinite;
	-o-animation: lap_light 3s linear infinite;
	-ms-animation: lap_light 3s linear infinite;
	animation: lap_light 3s linear infinite;
}

.light{
	width: 70px;
	height: 46px;
	position: absolute;
	bottom:286px;
	right:113px;
	z-index: 6;
	-webkit-animation: lap_light 3s linear infinite;
	-moz-animation: lap_light 3s linear infinite;
	-o-animation: lap_light 3s linear infinite;
	-ms-animation: lap_light 3s linear infinite;
	animation: lap_light 3s linear infinite;
}

@-webkit-keyframes lap_light {
	0% {
		 opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-moz-keyframes lap_light {
	0% {
		 opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-o-keyframes lap_light {
	0% {
		 opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-ms-keyframes lap_light {
	0% {
		 opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes lap_light {
	0% {
		 opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}


/* ================= HOBBIES ================= */

.hobbies_in{
	width: 1024px;
	height: 760px;
	margin: 0 auto;
	position: relative;
	background: url("../images/hobbies/mountains.png") no-repeat bottom left;
}

.hobbies_in img{
	width: 100%;
	max-width: auto;
}

.mountains{
	background: url(../svg/mountains.svg) repeat-x center top;
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 394px;
	z-index: 1;
}

.river{
  z-index: 2;
  width: 100%;
  height: 202px;
  position: absolute;
  bottom: 0px;
}

.river_in{
  position: relative;
  width: 100%;
  height: 202px;
}

.river-top{
  z-index: 10;
  width: 100%;
  height: 202px;
  position: absolute;
  bottom: 0px;
}

.line_h1{
  bottom: -70px;
  z-index: 9;
}

.line_h2{
  bottom: -42px;
  z-index: 8;
}

.line_h3{
  bottom: -42px;
  z-index: 7;
}

.water_1{
  background: url(../svg/water_1.svg) repeat-x left bottom;
  width: 100%;
  height: 111px;
  position: absolute;
  left: 0px; 
}

.water_2{
  background: url(../svg/water_2.svg) repeat-x left bottom;
  width: 100%;
  height: 111px;
  position: absolute;
  left: 0px; 
}

.floating,
.floating_2{
  animation: floating 1.5s infinite;
  -webkit-animation: floating 1.5s infinite;
  -o-animation: floating 1.5s infinite;
  -moz-animation: floating 1.5s infinite;
  -ms-animation: floating 1.5s infinite;
}

.floating_2{
  animation-duration: 2s; 
  -webkit-animation-duration: 2s;
  -o-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
}

/* Chrome, Safari */
@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);  
  }
  50% {
    -webkit-transform: translateY(8%);  
  } 
  100% {
    -webkit-transform: translateY(0%);
  }     
}

/* Mozilla */
@-moz-keyframes floating {
  0% {
    -moz-transform: translateY(0%);  
  }
  50% {
    -moz-transform: translateY(8%);  
  } 
  100% {
    -moz-transform: translateY(0%);
  }     
}

/* Opera */
@-o-keyframes floating {
  0% {
    -o-transform: translateY(0%);  
  }
  50% {
    -o-transform: translateY(8%);  
  } 
  100% {
    -o-transform: translateY(0%);
  }     
}

/* Explorer */
@-ms-keyframes floating {
  0% {
    -ms-transform: translateY(0%);  
  }
  50% {
    -ms-transform: translateY(8%);  
  } 
  100% {
    -ms-transform: translateY(0%);
  }     
}

/* Else */
@keyframes floating {
  0% {
    transform: translateY(0%);  
  }
  50% {
    transform: translateY(8%);  
  } 
  100% {
    transform: translateY(0%);
  }     
}

.grass{
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: #584d43;
	height: 30px;
	z-index: 10;
}

.land_right{
	position: absolute;
	z-index: 6;
	width: 472px;
	height: 259px;
	bottom: 183px;
	right: 22px;
}

.land_left{
	position: absolute;
	z-index: 6;
	width: 414px;
	height: 249px;
	bottom: 190px;
	left: 41px;
}

.tree{
	position: absolute;
	z-index: 8;
	width: 236px;
	height: 357px;
	bottom: 188px;
	left: 27px;
}

.log{
	position: absolute;
	z-index: 13;
	width: 115px;
	height: 53px;
	bottom: 178px;
	right: 417px;
}

.fall{
	position: absolute;
	z-index: 12;
	width: 115px;
	height: 191px;
	bottom: 0px;
	right: 419px;
	background: #3fa9f5;
}

.mounty{
	position: absolute;
	z-index: 8;
	width: 75px;
	height: 211px;
	bottom: 190px;
	left: 405px;
}

.raccon{
	position: absolute;
	z-index: 9;
	width: 107px;
	height: 49px;
	bottom: 190px;
	right: 617px;
}

.raccon_head{
	position: absolute;
	z-index: 10;
	width: 45px;
	height: 38px;
	bottom: 210px;
	right: 607px;
}

.bear{
	position: absolute;
	z-index: 5;
	width: 95px;
	height: 74px;
	bottom: 190px;
	right: 725px;
}

.bear_head{
	position: absolute;
	z-index: 6;
	width: 45px;
	height: 40px;
	bottom: 211px;
	right: 731px;
}

.beaver{
	position: absolute;
	z-index: 8;
	width: 102px;
	height: 44px;
	bottom: 190px;
	right: 304px;
}

.beaver_head{
	position: absolute;
	z-index: 9;
	width: 34px;
	height: 24px;
	bottom: 222px;
	right: 304px;
	-webkit-animation: b_head 3s linear infinite;
	-moz-animation: b_head 3s linear infinite;
	-o-animation: b_head 3s linear infinite;
	-ms-animation: b_head 3s linear infinite;
	animation: b_head 3s linear infinite;
}

@-webkit-keyframes b_head {
	0% {
		 -webkit-transform: rotate(10deg);-webkit-transform-origin: bottom left;
	}
	50% {
		 -webkit-transform: rotate(-10deg);-webkit-transform-origin: bottom left;
	}
	100% {
		 -webkit-transform: rotate(10deg);-webkit-transform-origin: bottom left;
	}
}

@-moz-keyframes b_head {
	0% {
		 -webkit-transform: rotate(10deg);-webkit-transform-origin: bottom left;
	}
	50% {
		 -webkit-transform: rotate(-10deg);-webkit-transform-origin: bottom left;
	}
	100% {
		 -webkit-transform: rotate(10deg);-webkit-transform-origin: bottom left;
	}
}

@-o-keyframes b_head {
	0% {
		 -webkit-transform: rotate(10deg);-webkit-transform-origin: bottom left;
	}
	50% {
		 -webkit-transform: rotate(-10deg);-webkit-transform-origin: bottom left;
	}
	100% {
		 -webkit-transform: rotate(10deg);-webkit-transform-origin: bottom left;
	}
}

@-ms-keyframes b_head {
	0% {
		 -webkit-transform: rotate(10deg);-webkit-transform-origin: bottom left;
	}
	50% {
		 -webkit-transform: rotate(-10deg);-webkit-transform-origin: bottom left;
	}
	100% {
		 -webkit-transform: rotate(10deg);-webkit-transform-origin: bottom left;
	}
}

@keyframes b_head {
	0% {
		 -webkit-transform: rotate(10deg);-webkit-transform-origin: bottom left;
	}
	50% {
		 -webkit-transform: rotate(-10deg);-webkit-transform-origin: bottom left;
	}
	100% {
		 -webkit-transform: rotate(10deg);-webkit-transform-origin: bottom left;
	}
}



.deer{
	position: absolute;
	z-index: 5;
	width: 77px;
	height: 98px;
	bottom: 190px;
	right: 370px;
}

.deer_head{
	position: absolute;
	z-index: 6;
	width: 67px;
	height: 85px;
	bottom: 252px;
	right: 332px;
	-webkit-animation: d_head 3s linear infinite;
	-moz-animation: d_head 3s linear infinite;
	-o-animation: d_head 3s linear infinite;
	-ms-animation: d_head 3s linear infinite;
	animation: d_head 3s linear infinite;
}

@-webkit-keyframes d_head {
	0% {
		 -webkit-transform: rotate(50deg);-webkit-transform-origin: bottom left;
		 bottom: 260px;
	}
	50% {
		 -webkit-transform: rotate(0deg);-webkit-transform-origin: bottom left;
		 bottom: 252px;
	}
	100% {
		 -webkit-transform: rotate(50deg);-webkit-transform-origin: bottom left;
		 bottom: 260px;
	}
}

@-moz-keyframes d_head {
	0% {
		 -webkit-transform: rotate(50deg);-webkit-transform-origin: bottom left;
		 bottom: 260px;
	}
	50% {
		 -webkit-transform: rotate(0deg);-webkit-transform-origin: bottom left;
		 bottom: 252px;
	}
	100% {
		 -webkit-transform: rotate(50deg);-webkit-transform-origin: bottom left;
		 bottom: 260px;
	}
}

@-o-keyframes d_head {
	0% {
		 -webkit-transform: rotate(50deg);-webkit-transform-origin: bottom left;
		 bottom: 260px;
	}
	50% {
		 -webkit-transform: rotate(0deg);-webkit-transform-origin: bottom left;
		 bottom: 252px;
	}
	100% {
		 -webkit-transform: rotate(50deg);-webkit-transform-origin: bottom left;
		 bottom: 260px;
	}
}

@-ms-keyframes d_head {
	0% {
		 -webkit-transform: rotate(50deg);-webkit-transform-origin: bottom left;
		 bottom: 260px;
	}
	50% {
		 -webkit-transform: rotate(0deg);-webkit-transform-origin: bottom left;
		 bottom: 252px;
	}
	100% {
		 -webkit-transform: rotate(50deg);-webkit-transform-origin: bottom left;
		 bottom: 260px;
	}
}

@keyframes d_head {
	0% {
		 -webkit-transform: rotate(50deg);-webkit-transform-origin: bottom left;
		 bottom: 260px;
	}
	50% {
		 -webkit-transform: rotate(0deg);-webkit-transform-origin: bottom left;
		 bottom: 252px;
	}
	100% {
		 -webkit-transform: rotate(50deg);-webkit-transform-origin: bottom left;
		 bottom: 260px;
	}
}

.moose{
	position: absolute;
	z-index: 5;
	width: 136px;
	height: 135px;
	bottom: 181px;
	right: 79px;
}

.moose_block{
	position: absolute;
	z-index: 5;
	width: 77px;
	height: 35px;
	bottom: 235px;
	right: 83px;
}

.water{
	position: absolute;
	z-index: 13;
	width: 3px;
	height: 62px;
}

.w_one{
	bottom: 125px;
	right: 446px;
	-webkit-animation: wone 2s linear infinite;
	-moz-animation: wone 2s linear infinite;
	-o-animation: wone 2s linear infinite;
	-ms-animation: wone 2s linear infinite;
	animation: wone 2s linear infinite;
}

@-webkit-keyframes wone {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@-moz-keyframes wone {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@-o-keyframes wone {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@-ms-keyframes wone {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@keyframes wone {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

.w_two{
	bottom: 80px;
	right: 471px;
	margin-bottom: 20px;
	-webkit-animation: wtwo 2.5s linear infinite;
	-moz-animation: wtwo 2.5s linear infinite;
	-o-animation: wtwo 2.5s linear infinite;
	-ms-animation: wtwo 2.5s linear infinite;
	animation: wtwo 2.5s linear infinite;
}

@-webkit-keyframes wtwo {
	0% {
		bottom: 110px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@-moz-keyframes wtwo {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@-o-keyframes wtwo {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@-ms-keyframes wtwo {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@keyframes wtwo {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

.w_three{
	bottom: 125px;
	right: 496px;
	margin-top: 20px;
	-webkit-animation: wthree 2.2s linear infinite;
	-moz-animation: wthree 2.2s linear infinite;
	-o-animation: wthree 2.2s linear infinite;
	-ms-animation: wthree 2.2s linear infinite;
	animation: wthree 2.2s linear infinite;
}

@-webkit-keyframes wthree {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@-moz-keyframes wthree {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@-o-keyframes wthree {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@-ms-keyframes wthree {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@keyframes wthree {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

.w_four{
	bottom: 125px;
	right: 522px;
	-webkit-animation: wfour 1.5s linear infinite;
	-moz-animation: wfour 1.5s linear infinite;
	-o-animation: wfour 1.5s linear infinite;
	-ms-animation: wfour 1.5s linear infinite;
	animation: wfour 1.5s linear infinite;
}

@-webkit-keyframes wfour {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@-moz-keyframes wfour {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@-o-keyframes wfour {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@-ms-keyframes wfour {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

@keyframes wfour {
	0% {
		bottom: 125px;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		bottom:30px; opacity: 0;
	}
}

.travel_bag{
	position: absolute;
	z-index: 7;
	width: 124px;
	height: 236px;
	bottom: 308px;
	right: 123px;
}

.front_travel_bag{
	position: absolute;
	z-index: 99;
	width: 64px;
	height: 51px;
	bottom: 342px;
	right: 187px;
}

.binoculars{
	position: absolute;
	z-index: 99;
	width: 44px;
	height: 64px;
	bottom: 250px;
	right: 162px;
}

/* ================= CONTACT ================= */

.contact_in{
	width: 1024px;
	height: 760px;
	margin: 0 auto;
	position: relative;
	background: #b1e7ff;
}


.back_city{
	background: url(../svg/city.svg) no-repeat center top;
	background-size: cover;
	width: 833px;
	height: 522px;
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 155px;
	opacity: 0.3;
}


.pavement_final{
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: #4d4d4d;
	height: 121px;
	z-index: 10;
}

.lil_pavement{
	height: 35px;
	width: 100%;
	background: #808080;
	position: absolute;
	bottom:100px;
	z-index: 10;
}

.lamp{
	width: 131px;
	height: 373px;
	position: absolute;
	bottom:153px;
	left:0px;
	z-index: 5;
}

.zip{
	width: 105px;
	height: 151px;
	position: absolute;
	bottom:155px;
	left:348px;
	z-index: 5;
}

.trash{
	width: 139px;
	height: 163px;
	position: absolute;
	bottom:153px;
	left:198px;
	z-index: 5;
}

.under{
	width: 232px;
	height: 324px;
	position: absolute;
	bottom:153px;
	right:8px;
	z-index: 5;
}

.water_yellow{
	width: 48px;
	height: 88px;
	position: absolute;
	bottom:154px;
	right:400px;
	z-index: 5;
}

.bag_tor{
	width: 103px;
	height: 62px;
	position: absolute;
	bottom:155px;
	right:144px;
	z-index: 6;
}

.car1{
	width: 222px;
	height: 85px;
	position: absolute;
	bottom:154px;
	right:144px;
	z-index: 4;
   -moz-animation: stcar 18s linear infinite;
   -webkit-animation: stcar 18s linear infinite;
   -o-animation: stcar 18s linear infinite;
   animation: stcar 18s linear infinite;
}

.car2{
	width: 222px;
	height: 85px;
	position: absolute;
	bottom:154px;
	right:144px;
	z-index: 4;
   -moz-animation: stcar 23s linear infinite;
   -webkit-animation: stcar 23s linear infinite;
   -o-animation: stcar 23s linear infinite;
   animation: stcar 23s linear infinite;
}

.taxi{
	width: 222px;
	height: 97px;
	position: absolute;
	bottom:154px;
	right:144px;
	z-index: 4;
   -moz-animation: stcar 15s linear infinite;
   -webkit-animation: stcar 15s linear infinite;
   -o-animation: stcar 15s linear infinite;
   animation: stcar 15s linear infinite;
}

.scar{
	width: 678px;
	height: 205px;
	position: absolute;
	bottom:154px;
	right:144px;
	z-index: 4;
   -moz-animation: stcar 26s linear infinite;
   -webkit-animation: stcar 26s linear infinite;
   -o-animation: stcar 26s linear infinite;
   animation: stcar 26s linear infinite;
}

@-webkit-keyframes stcar {
	0% {
		right: -1500px; opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		right:1500px; opacity: 0;
	}
}

@-moz-keyframes stcar {
	0% {
		right: -1500px; opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		right:1500px; opacity: 0;
	}
}

@-o-keyframes stcar {
	0% {
		right: -1500px; opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		right:1500px; opacity: 0;
	}
}

@-ms-keyframes stcar {
	0% {
		right: -1500px; opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		right:1500px; opacity: 0;
	}
}

@keyframes stcar {
	0% {
		right: -1500px; opacity: 0;
	}
	15%{
		opacity: 1;
	}

	90%{
		opacity: 1;
	}

	100% {
		right:1500px; opacity: 0;
	}
}

.jerry_icon{
	width: 65px;
	height: 65px;
	position: absolute;
	bottom:20px;
	right:0px;
	left: 0;
	z-index: 99;
	margin: 0 auto;
}

.footer_main{
	width: 100%;
	height: 80px;
	position: absolute;
	bottom:43px;
	left: 100px;
	z-index: 99;
}

.footer_main p{
	font-size: 10px;
}

.contact_details{
	display: block;
}

.social_media{
	width: 100%;
	height: 200px;
	position: absolute;
	top:235px;
	right:0px;
	left: 0;
	z-index: 99;
	margin: 0 auto;
	text-align: center;
}

.social_link {
	display: inline-block;
	margin: 0 auto;
	text-align: center;
	margin: 0 10px;
}

.social_link a{
	display: block;
	position: relative;
	width: 100px;
	height: 100px;
	background: #7adcf9;
	border-radius: 50%;
	overflow: hidden;
	font-size: 15px;
}

.social_link p{
	font-weight: 700;
	color: #ffffff;
	position: absolute;
	text-align: center;
	top:25px;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-ms-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.social_link p{
	right:-100px;
}

.social_link.phone p{
	font-size: 12px;
}

.social_link img{
	width: 100px;
	height: 100px;
	position: absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	top:0px;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.social_link.phone a:hover{
	background:#93278f;
}

.social_link.phone span{
	display: none;
}

.social_link.mail a:hover{
	background:#f15a24;
}

.social_link.facebook a:hover{
	background:#fbb03b;
}

.social_link.twitter a:hover{
	background:#39b54a;
}

.social_link.linkedin a:hover{
	background:#c1272d;
}

.social_link.graphics a:hover{
	background:#ff931e;
}

.social_link.web a:hover{
	background:#662d91;
}

.social_link a:hover img{
	top: 35px;
}

.social_link a:hover p{
	opacity: 1;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
}

.ttc_ticket{
	display: block;
	margin: 0 auto;
	height: 120px;
	width: 205px;
	margin-top: 35px;
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari 3-8 */
    -oz-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

/* ================= FINAL FOOTER ================= */

#final_footer{
	height: 300px;
	width: 100%;
	position: relative;
	overflow: hidden;
	background: #4d4d4d;
}

.final_footer_in{
	width: 1024px;
	height: 300px;
	margin: 0 auto;
	position: relative;
}

.contact_in img{
	width: 100%;
	max-width: auto;
}

.pavement2{
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: #808080;
	height: 209px;
	z-index: 10;
}

.new_phone{
	display: block;
	position: absolute;
	bottom: 0;
	right:0;
	width: 125px;
	height: 300px;
	z-index: 15;
}

.floatin_gem{
    -webkit-animation: floating 1.5s infinite ease-in-out;
    -moz-animation: floating 1.5s infinite ease-in-out;
    -o-animation: floating 1.5s infinite ease-in-out;
    -ms-animation: floating 1.5s infinite ease-in-out;
    animation: floating 1.5s infinite ease-in-out;
}

/* Chrome, Safari */
@-webkit-keyframes floating {
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 15px);}
    to {-moz-transform: translate(0, -0px);} 
}

.container_coin {
    position: relative;
    z-index: 1;
}

.shine{
  background: url(../travel/svg/star.svg) no-repeat center center;
  display: block;
  width: 27px;
  height: 27px;
}

.shining_1{
  -webkit-animation: shine 2s infinite linear; /* Chrome, Safari, Opera */
  -moz-animation: shine 2s infinite linear; /* Mozilla */
  -o-animation: shine 2s infinite linear; /* Opera */
  -ms-animation: shine 2s infinite linear; /* Mozilla */
  animation: shine 2s infinite linear; /* Rest */
}

.shining_2{
  -webkit-animation: shine 2s infinite linear; /* Chrome, Safari, Opera */
  -moz-animation: shine 2s infinite linear; /* Mozilla */
  -o-animation: shine 2s infinite linear; /* Opera */
  -ms-animation: shine 2s infinite linear; /* Mozilla */
  animation: shine 2s infinite linear; /* Rest */
}

.shining_3{
  -webkit-animation: shine 2.5s infinite linear; /* Chrome, Safari, Opera */
  -moz-animation: shine 2.5s infinite linear; /* Mozilla */
  -o-animation: shine 2.5s infinite linear; /* Opera */
  -ms-animation: shine 2.5s infinite linear; /* Mozilla */
  animation: shine 2.5s infinite linear; /* Rest */
}

.shining_4{
  -webkit-animation: shine 2.3s infinite linear; /* Chrome, Safari, Opera */
  -moz-animation: shine 2.3s infinite linear; /* Mozilla */
  -o-animation: shine 2.3s infinite linear; /* Opera */
  -ms-animation: shine 2.3s infinite linear; /* Mozilla */
  animation: shine 2.3s infinite linear; /* Rest */
}

.shine_1{
  position: absolute;
  top: 16px;
  left: -13px;
  z-index: 1;
}

.shine_2{
  position: absolute;
  top: 79px;
  right: 91px;
  z-index: 1;
}

.shine_3{
  position: absolute;
  top: 107px;
  left: 13px;
  z-index: 1;
}

.shine_4{
  position: absolute;
  top: -12px;
  left: 165px;
  z-index: 1;
}


/* Chrome, Safari */
@-webkit-keyframes shine {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Mozilla */
@-moz-keyframes shine {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Opera */
@-o-keyframes shine {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Explorer */
@-ms-keyframes shine {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Else */
@keyframes shine {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.ttc_ticket:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@-moz-keyframes shake {
  10%, 90% {
    -moz-transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    -moz-transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    -moz-transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    -moz-transform: translate3d(4px, 0, 0);
  }
}

@-o-keyframes shake {
  10%, 90% {
    -o-transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    -o-transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    -o-transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    -o-transform: translate3d(4px, 0, 0);
  }
}

@-ms-keyframes shake {
  10%, 90% {
    -ms-transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    -ms-transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    -ms-transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    -ms-transform: translate3d(4px, 0, 0);
  }
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}


/*
########     ###    ########  ########     #######  
##     ##   ## ##   ##     ##    ##       ##     ## 
##     ##  ##   ##  ##     ##    ##              ## 
########  ##     ## ########     ##        #######  
##        ######### ##   ##      ##              ## 
##        ##     ## ##    ##     ##       ##     ## 
##        ##     ## ##     ##    ##        #######  
*/

/* ================= HEADER 3 ================= */

body.third_body{
	background: #ffffff;
}

#third_home{
	width: 100%;
	overflow: hidden;
}

.third_home_in{
	width: 1024px;
	height: auto;
	margin: 0 auto;
}

.third_home_in img{
	width: 100%;
	max-width: auto;
}

.third_head{
	width: 100%;
	height: 436px;
	position: relative;
}

/* ================= GRAPHICS ================= */

.pav3{
	display: block;
	position: absolute;
	width: 372px;
	height: 28px;
	bottom: 0;
	right: 0;
	z-index: 5;
}

.bag3{
	display: block;
	position: absolute;
	width: 103px;
	height: 62px;
	bottom: 28px;
	right: 36px;
	z-index: 5;
}

.desk3{
	display: block;
	position: absolute;
	width: 253px;
	height: 274px;
	bottom: 28px;
	right: 60px;
	z-index: 6;
}

.jerry3{
	display: block;
	position: absolute;
	width: 141px;
	height: 296px;
	bottom: 26px;
	right: 180px;
	z-index: 5;
}

.pointer3{
	display: block;
	position: absolute;
	width: 107px;
	height: 70px;
	bottom: 210px;
	right: 344px;
	z-index: 5;
}

.block3{
	display: block;
	position: absolute;
	width: 222px;
	height: 12px;
	bottom: 254px;
	right: 509px;
	z-index: 5;
}

.block4{
	display: block;
	position: absolute;
	width: 222px;
	height: 12px;
	bottom: 345px;
	right: 397px;
	z-index: 5;
}

.spk3{
	display: block;
	position: absolute;
	width: 22px;
	height: 39px;
	bottom: 264px;
	right: 521px;
	z-index: 6;
}

.spk4{
	display: block;
	position: absolute;
	width: 22px;
	height: 39px;
	bottom: 355px;
	right: 579px;
	z-index: 6;
}

.pencil3{
	display: block;
	position: absolute;
	width: 19px;
	height: 53px;
	bottom: 262px;
	right: 557px;
	z-index: 6;
}

.box3{
	display: block;
	position: absolute;
	width: 53px;
	height: 31px;
	bottom: 264px;
	right: 590px;
	z-index: 6;
}

.flag3{
	display: block;
	position: absolute;
	width: 27px;
	height: 52px;
	bottom: 262px;
	right: 657px;
	z-index: 6;
}

.clock3{
	display: block;
	position: absolute;
	width: 21px;
	height: 21px;
	bottom: 264px;
	right: 698px;
	z-index: 6;
}

.mark3{
	display: block;
	position: absolute;
	width: 39px;
	height: 48px;
	bottom: 354px;
	right: 412px;
	z-index: 6;
}

.book3{
	display: block;
	position: absolute;
	width: 36px;
	height: 28px;
	bottom: 355px;
	right: 467px;
	z-index: 6;
}

.book4{
	display: block;
	position: absolute;
	width: 49px;
	height: 37px;
	bottom: 355px;
	right: 514px;
	z-index: 6;
}

.third_text{
	width: 100%;
}

.thirdtxt_1{
	font-size: 148px;
	color: #f7931e;
	font-weight: bold;
	text-transform: lowercase;
	display: block;
	position: absolute;
	bottom: 96px;
	left: 0px;
	z-index: 6;
}

.thirdtxt_2{
	font-size: 122px;
	color: #84d2e2;
	font-weight: bold;
	text-transform: lowercase;
	display: block;
	position: absolute;
	bottom: 0px;
	left: 79px;
	z-index: 6;
}

.text_fr{
	bottom: 12px;
	left: 22px;
}

.third_desc{
	color: #94a1a8;
	font-size: 20px;
	font-weight: bold;
	padding: 50px 0 0 0;
	width: 90%;
	margin: 0 auto;
}

/* ================= WEB ================= */

.pav4{
	background: #bdccd4;
	display: block;
	position: absolute;
	width: 706px;
	height: 28px;
	bottom: 0px;
	right: 0px;
	left: 0px;
	margin:0 auto;
	z-index: 5;
}

.bag5{
	display: block;
	position: absolute;
	width: 103px;
	height: 62px;
	bottom: 28px;
	right: 185px;
	z-index: 5;
}

.desk4{
	display: block;
	position: absolute;
	width: 471px;
	height: 94px;
	bottom: 28px;
	right: 288px;
	margin: 0 auto;
	z-index: 6;
}

.jerry4{
	display: block;
	position: absolute;
	width: 93px;
	height: 233px;
	bottom: 25px;
	right: 750px;
	z-index: 4;
}

.laptop4{
	display: block;
	position: absolute;
	width: 141px;
	height: 84px;
	bottom: 121px;
	right: 582px;
	z-index: 5;
}

.mac4{
	display: block;
	position: absolute;
	width: 155px;
	height: 136px;
	bottom: 121px;
	right: 416px;
	z-index: 5;
}

.ruler4{
	display: block;
	position: absolute;
	width: 20px;
	height: 93px;
	bottom: 118px;
	right: 383px;
	z-index: 5;
}

.mobile4{
	display: block;
	position: absolute;
	width: 41px;
	height: 58px;
	bottom: 118px;
	right: 329px;
	z-index: 5;
}

.magic4{
	display: block;
	position: absolute;
	width: 100%;
	height: 288px;
	bottom: 0px;
	right: 0px;
	left: 0px;
	margin:0 auto;
	z-index: 100;
}

.brocha{
	height: 57px;
	width: 50px;
	top: 0px;
	padding: 0;
	position: absolute;
	z-index: 12;
	left:600px;
	display: block;
}

.lapiz{
	height: 71px;
	width: 58px;
	top: 0px;
	padding: 0;
	position: absolute;
	z-index: 12;
	left:600px;
	display: block;
}

.pinza{
	height: 55px;
	width: 60px;
	top: 50px;
	padding: 0;
	position: absolute;
	z-index: 12;
	left:450px;
	display: block;
}

.gotero{
	height: 36px;
	width: 45px;
	top: 0px;
	padding: 0;
	position: absolute;
	z-index: 12;
	left:350px;
	display: block;
}

.arrow{
	height: 76px;
	width: 80px;
	top: 0px;
	padding: 0;
	position: absolute;
	z-index: 12;
	left:450px;
	display: block;
}

.sissors{
	height: 73px;
	width: 65px;
	top: 0px;
	padding: 0;
	position: absolute;
	z-index: 12;
	left:250px;
	display: block;
}

p.third_title{
	font-size: 148px;
	text-align: center;
}

.third_title{
	font-size: 148px;
	color: #662d91;
	text-transform: lowercase;
	text-align: center;
	font-weight: 700;
	margin-top: 30px;
}

.third_title span{
	color: #6c8dc6;
}

.web_prog{
	display: block;
	font-size: 38px;
	text-transform: lowercase;
	font-weight: lighter;
	font-family: 'QuicksandLight';
	padding: 10px 30px;
	color: #6c8dc6;
}

.web_prog.des_pro{
	color: #5bb4c8;
}

.quoties{
	color: #8983be;
}

/* ========= WEB PROJECTS ========= */

.web_separator_one,
.web_separator_two,
.web_separator_three,
.web_separator_four,
.web_separator_five{
	display: block;
	height: 65px;
}

.main_container_p{
	position: relative;
	min-height: 557px;
	width: 100%;
}

.web_project_cover{
	width: 100%;
	height: 557px;
	background: #662d91;
	display: block;
	position: relative;
	overflow: hidden;
}

.web_project_cover.two_pw{
	background: #ff931e;
}

.web_project_cover.three_pw{
	background: #c1272d;
}

.web_project .one_pw:hover .web_description,
.web_project .two_pw:hover .web_description,
.web_project .three_pw:hover .web_description{
	bottom: 0;
}

.web_description{
	position: absolute;
	bottom: -91px;
	z-index: 10;
	background-color: rgba(41, 171, 226, 0.9);
	background: rgba(41, 171, 226, 0.9);
	color: rgba(41, 171, 226, 0.9);
	color: #ffffff;
	width: 100%;
	height: 155px;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.web_description h1{
	display: inline-block;
	font-size: 40px;
	font-weight: lighter;
	font-family: 'QuicksandLight';
	text-transform: uppercase;
	padding: 20px;
	padding-bottom: 5px;
	padding-top: 10px;
}

h1.web_year{
	float: right;
}

.web_description p{
	clear: both;
	padding-left: 20px;
	margin-bottom: 15px;
	font-size: 14px;
	padding-right: 30px;
}

.web_description h2{
	padding-left: 20px;
	font-size: 18px;
	text-transform: uppercase;
}

.web_project_cover img{
	position: absolute;
	z-index: 9;
}

.rotating-item {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.web_button{
	position: absolute;
	right: 240px;
	top: 197px;
	display: block;
	z-index: 100;
	width: 82px;
	height: 82px;
	border-radius: 50%;
	background:#29abe2;
	color: #ffffff;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	display: none;
}

.button_big_lap{
	top: 221px;
}

.button_phone{
	top: 263px;
	right: 337px;
}

.web_button:hover{
	background: #0072bf;
}

.web_button .web_button_text{
	margin-top: 25px;
}

img.cover_web{
	width: 482px;
	height: 422px;
	margin: 0 auto;
	left: 0;
	right: 0;
	top:34px;
	z-index: 9;
}

img.big_cover_lap{
	width: 568px;
	height: 336px;
	margin: 0 auto;
	left: 0;
	right: 0;
	top:66px;
	z-index: 9;
}

img.cover_phone{
	width: 289px;
	height: 416px;
	margin: 0 auto;
	left: 0;
	right: 0;
	top:33px;
	z-index: 9;
}

.web_project_details{
	margin: 0 auto;
	width: 100%;
	text-align: center;
	display: block;
	height: auto;
	position: relative;
	z-index: 9;
	display: none
}

.project_details_pics {
	display: block;
	width: 850px;
	height: auto;
	clear: both;
	margin: 0 auto;
	text-align: center;
}

.project_details_pics img{
	width: 100%;
	height: 463px;
	vertical-align: middle;
}

.close_web_button{
	display: inline-block;
	position: relative;
	width: 82px;
	height: 82px;
	background: #7adcf9;
	border-radius: 50%;
	color: #ffffff;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
	margin-top: 30px;
	margin-bottom: 30px;
	margin-right: 20px;
	overflow: hidden;
}

.close_web_button p{
	padding-top: 25px;
	color: #ffffff;
	position: absolute;
	text-align: center;
	right:-85px;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.close_web_button img{
	width:82px;
	height: 82px;
	position: absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	top:0px;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.close_web_button:hover{
	background:#662d91;
}

.close_web_button.closeit:hover{
	background: #c1272d;
}

.close_web_button:hover img{
	top: 35px;
}

.close_web_button:hover p{
	opacity: 1;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
}

.button_main_web .close_web_button:hover{
	background:#0071bc;
}

.button_main_web{
	position: absolute;
	top: 59px;
	right: 224px;
	z-index: 11;
}

.button_main_web{
	position: absolute;
	top: 75px;
	right: 224px;
	z-index: 11;
}

.button_main_mac{
	top: 116px;
}

.button_main_mobile{
	right: 320px;
	top: 98px;
}

.lookmore_button{
	display: block;
	margin: 10px auto 30px auto;
	width: 82px;
	height: 82px;
	background: #7adcf9;
	border-radius: 50%;
	text-align: center;
}

.lookmore_button img{
	width:82px;
	height: 82px;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
}

.old_projects{
	width: 100%;
	height: auto;
}

.pro_box{
	display: inline-block;
	width: 308px;
	height: 314px;
	position: relative;
	overflow: hidden;
	margin-top: 50px;
}

.box_one{
	background: #662d91;
}

.pro_box:hover .description_box{
	bottom: 0;
}

.description_box{
	position: absolute;
	bottom: -56px;
	width: 100%;
	height: 104px;
	background: #00aaf7;
	z-index: 5;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.description_box h1{
	font-size: 23px;
	color: #ffffff;
	font-weight: lighter;
	font-family: 'QuicksandLight';
	text-transform: uppercase;
	padding:10px;
	margin-top:0px;
	padding-right: 0;
}

.description_box p{
	font-size: 13px;
	color: #ffffff;
	padding:0 10px;
	text-transform: uppercase;
	font-weight: bold;
}

.box_web_button{
	display: block;
	position: relative;
	width: 82px;
	height: 82px;
	background: #00aaf7;
	border-radius: 50%;
	color: #ffffff;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
	overflow: hidden;
	top: 63px;
	left: 0;
	right: 0;
	margin: 0 auto;
	opacity: 0;
	z-index: 12;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.lil_year{
	font-size: 21px!important;
	margin-top: 0px;
}

.lil_year span{
	font-family: 'QuicksandLight';
	font-weight: lighter;
	font-size: 15px;
}

.box_two{
	background: #c1272d;
}

.box_three{
	background: #ff931e;
}

.middle_box{
	margin:0 43px;
}

.pro_box:hover .box_web_button{
	opacity: 1;
	top: 73px;
}

.box_web_button p{
	padding-top: 25px;
	color: #ffffff;
	position: absolute;
	text-align: center;
	right:-85px;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.box_web_button img{
	width:82px;
	height: 82px;
	position: absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	top:0px;
	-webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	-o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.box_web_button:hover{
	background:#0071bc;
}

.box_web_button:hover img{
	top: 35px;
}

.box_web_button:hover p{
	opacity: 1;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
}

img.box_lap{
	width: 290px;
	height: 172px;
	margin: 0 auto;
	left: 0;
	right: 0;
	top:38px;
	position: absolute;
	z-index: 5;
}

img.light_lap{
	width: 74px;
	height: 127px;
	right: 47px;
	top:50px;
	position: absolute;
	z-index: 11;
}

img.light_mac{
	width: 139px;
	height: 248px;
	right: 293px;
	top:58px;
	position: absolute;
	z-index: 11;
}

img.big_light_lap{
	width: 145px;
	height: 249px;
	right: 303px;
	top:89px;
	position: absolute;
	z-index: 11;
}

img.light_phone{
	width: 145px;
	height: 334px;
	right: 394px;
	top:70px;
	position: absolute;
	z-index: 11;
}

img.pro_cover{
	width: 441px;
	height: 247px;
	right: 0;
	left: 0;
	margin:0 auto;
	top:58px;
	position: absolute;
	z-index: 10;
}

img.pro_lap_cover{
	width: 421px;
	height: 248px;
	right: 303px;
	top:89px;
	position: absolute;
	z-index: 10;
}

img.pro_phone_cover{
	width: 238px;
	height: 333px;
	right: 393px;
	top:70px;
	position: absolute;
	z-index: 10;
}

img.lil_lap_cover{
	width: 215px;
	height: 127px;
	right: 47px;
	top:50px;
	position: absolute;
	z-index: 10;
}

.offline_ribbon{
	width: 153px!important;
	height: 115px;
	right: -38px;
	top:-34px;
	position: absolute;
	z-index: 11;
}

.offline_ribbon.franc{
	top:-27px;
	right: -28px;
	z-index: 12;
}

/* ========= GRAPHIC PROJECTS ========= */

.graphic_container{
	margin-top: 50px;
}

.caja_total:hover .description_box{
	bottom: 0;
}

.caja_total .description_box{
	height: 83px;
	bottom: -100px;
	background-color: rgba(0, 0, 0, 0.65);
	background: rgba(0, 0, 0, 0.65);
	color: rgba(0, 0, 0, 0.65);
	color: #ffffff;
}

.caja_roja{
	background: #f2f5f6;
}

.caja_morada{
	background: #f2f5f6;
}

.caja_naranja{
	background: #f2f5f6;
}

.caja_total{
	position: relative;
	overflow: hidden;
	display: block;
}

.normal_pic{
	display: block;
}

.respo_pic{
	display: none;
}

.caja_uno{
	height: 600px;
	width: 742px;
	float: left;
	border: 1px solid #f2f5f6;
}

.caja_dos{
	float: right;
	border: 1px solid #f2f5f6;
}

.caja_dos_top,
.caja_dos_bottom{
	width: 255px;
	height: 285px;
	border: 1px solid #f2f5f6;
}

.caja_dos_top{
	margin-bottom: 30px;
}

.caja_tres{
	height: 398px;
	width: 100%;
	border: 1px solid #f2f5f6;
}

.group_caja{
	margin-top: 30px;
}

.caja_cuatro,
.caja_cinco{
	height: 398px;
	width: 498px;
	border: 1px solid #f2f5f6;
}

.caja_cuatro{
	float: left;
}

.caja_cinco{
	float: right;
}

.caja_seis,
.caja_siete,
.caja_ocho{
	display: inline-block;
	height: 359px;
	width: 320px;
}

.caja_siete{
	margin: 0 25px;
	border: 1px solid #f2f5f6;
}

.caja_nueve{
	width: 670px;
	height: 398px;
	float: left;
	border: 1px solid #f2f5f6;
}

.caja_diez{
	width: 322px;
	height: 398px;
	float: right;
	border: 1px solid #f2f5f6;
}

.caja_uno.bizarro_right,
.caja_nueve.bizarro_right{
	float: right;
}

.caja_dos.bizarro_left,
.caja_diez.bizarro_left{
	float: left;
}

.group_caja video{
	width: 600px;
	height:350px;
	margin: 0 auto;
    display: block;
}

.caja_video{
	text-align: center;
	color: #000000;
}

.caja_video p{
	margin-top: 10px;
}

.third_home_in .micro img {
    max-width: auto;
    height: 100%;
    width: auto;
    margin: 0 auto;
}


/* ================= FOOTER ================= */

.third_footer{
	width: 100%;
	height: 416px;
	position: relative;
}

.city3{
	display: block;
	position: absolute;
	width: 419px;
	height: 125px;
	bottom: 192px;
	right: 315px;
	z-index: 5;
}

.bag4{
	display: block;
	position: absolute;
	width: 103px;
	height: 62px;
	bottom: 192px;
	right: 400px;
	z-index: 6;
}

.footer_firm_third a{
	width: 103px;
	height: 41px;
	display: inline-block;
}

.footer_firm_third a:hover{
	opacity: 0.5;
}

.footer_firm_third img{
	width: 100%;
	max-width:100%;
}

.jerry_icon_third{
	width: 65px;
	height: 65px;
	position: absolute;
	bottom:67px;
	right: 497px;	
	z-index: 5;
}



.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}




@media screen and (max-width: 1024px) {

/* ================= PART 2 ================= */

/* ======== MAIN JERRY ======== */

	.jerry_shade,
	#main_jerry,
	.ventana{
		display: none;
	}

/* ======== MAIN MENU ======== */

	.main_menu_in{
		width: 95%;
	}

/* ======== HOME ======== */

	.home_in{
		width: 100%;
	}

	.seagul_left{
		bottom: 189px;
	}

/* ======== EDUCATION ======== */

	.education_in{
		width: 100%;
	}

	.diploma_back,
	.diploma,
	.normal_button_web{
		display: none;
	}

	.responsive_button_web{
		display: block!important;
		margin: 0 auto;
		position: static;
		text-align: center;
		width: 64px;
	}

	.main_text p.uni_text,
	p.uni_desc{
		width: 100%;
	}

/* ======== SKILLS ======== */

	.skills_in{
		width: 100%;
	}

	.wand{
		display: none;
	}

/* ======== WORK ======== */

	.card,
	.work_chair,
	.work_desk,
	#experience .pavement_main,
	#experience .work_bag{
		display: none;
	}

	.experience_in{
		width: 100%;
	}

/* ======== PORTFOLIO ======== */

	#portfolio,
	.portfolio_in{
		width: 100%;
	}

/* ======== HOBBIES ======== */

	.hobbies_in{
		width: 100%;
	}

	.binoculars,
	.travel_bag,
	.front_travel_bag{
		display: none;
	}

/* ======== CONTACT ======== */

	#contact,
	.contact_in{
		width: 100%;
		height: 800px;
	}

	.scar,
	.taxi,
	.car2,
	.car1,
	.water_yellow,
	.under,
	.trash,
	.zip,
	.lamp,
	.bag_tor{
		bottom: 124px;
	}

	.fran_cont .social_media{
		top: 250px;
	}

	.back_city{
		bottom: 124px;
	}

/* ================= PART 3 ================= */

/* ======== GRAPHICS ======== */

	.third_home_in{
		width: 100%;
	}

	.thirdtxt_1{
		font-size: 120px;
	}

	.thirdtxt_2{
		left: 10px;
	}

	.caja_seis, 
	.caja_siete, 
	.caja_ocho{
		width: 31%;
		height:auto;
	}

	.caja_siete{
		margin: 0 2%;
	}

	.caja_tres{
		width: 100%;
		height: auto;
	}

	.caja_cuatro, 
	.caja_cinco{
		width: 48%;
	}


	.caja_nueve{
		height: auto;
		width: 63%;
	}

	.caja_diez{
		width: 33%;
		height: auto;
	}

	.third_home_in .micro{
		background-color: #3f71b6;
	}

	.third_home_in .micro img{
		height: auto;
		width: 100%;
	}

/* ======== WEB ======== */

	.head_web .pav4{
		width: 95%;
	}

	p.third_title{
		font-size: 100px;
	}

	.third_desc.fran_text{
		padding-top: 30px;
	}

	.web_description{
		bottom: 0;
		background-color: rgba(41, 171, 226, 1);
		background: rgba(41, 171, 226, 1);
		color: rgba(41, 171, 226, 1);
		color: #ffffff;
	}

	.web_project_cover{
		height: 400px;
		width: 90%;
		margin: 0 auto;
	}

	.web_description h1{
		font-size: 25px;
		padding: 10px 5px;
	}

	.web_description{
		height: auto;
	}

	.web_description p{
		font-size: 13px;
		margin-bottom: 10px;
		padding-left: 5px;
		padding-right: 0;
	}

	.web_description h2{
		padding-left: 5px;
		margin-bottom: 5px;
	}

	.web_separator_one, 
	.web_separator_two, 
	.web_separator_three, 
	.web_separator_four, 
	.web_separator_five{
		height: 30px;
	}

	.button_main_web{
		right: 0;
		left: 0;
		margin: 0 auto;
		text-align: center;
	}

	.button_main_mac{
		top: 0;
	}

	img.light_mac,
	img.light_lap,
	img.box_lap{
		display: none;
	}

	.old_projects{
		width: 90%;
		margin: 0 auto;
	}

	.middle_box{
		margin: 0 4%;
	}

	.old_projects .description_box{
		bottom: 0;
		height: 137px;
	}

	.pro_box{
		width: 30%;
	}

	img.lil_lap_cover{
		right: 0;
		left: 0;
		margin:0 auto;
		top: 20px;
	}

	.box_web_button,
	.pro_box:hover .box_web_button{
		opacity: 1;
		top: 116px;
	}

	.old_projects .description_box p{
		padding-right: 0;
		font-size: 13px;
	}

}


@media screen and (max-width: 900px) {

/* ================= PART 3 ================= */

/* ======== FOOTER ======== */

	.third_footer .footer_main{
		bottom: 0;
		right: 0;
		left: 0;
		margin: 0 auto;
		text-align: center;
	}

	.jerry_icon_third{
		bottom: 100px;
		right: 0;
		left: 0;
		margin: 0 auto;
	}

	.city3{
		margin: 0 auto;
		right: 0;
		left: 0;
	}

	.bag4{
		right: 30%;
	}

	.shelfa,
	#portfolio .bag_port,
	.trash,
	.zip,
	.water_yellow{
		display: none;
	}

	.social_link{
		margin-top: 30px;
	}


}

@media screen and (max-width: 850px) {

/* ======== HOBBIES ======== */
	.bear,
	.bear_head,
	.tree,
	.raccon,
	.raccon_head{
		display: none;
	}

	.land_left{
		z-index: 4;
	}

/* ================= PART 3 ================= */

/* ======== GRAPHICS ======== */

	.description_box h1{
		font-size: 15px;
	}

	.description_box p{
		font-size: 10px;
	}

/* ======== WEB ======== */

	.jerry4{
		right: 10%;
	}

	.old_projects .lil_year span{
		display: block;
	}

}

@media screen and (max-width: 780px) {

/* ======== EDUCATION ======== */

	.main_text h2 span{
		padding-left: 0;
	}

	.uvm{
		bottom: 143px;
		width: 484px;
	}

/* ======== SKILLS ======== */

	.rabbit,
	.hat,
	#skills .bag_one{
		display: none;
	}

/* ======== CONTACTO ======== */

	#contact .jerry_icon{
		right: 0;
	}

/* ================= PART 3 ================= */

/* ======== GRAPHICS ======== */

	.book4,
	.book3,
	.mark3,
	.clock3,
	.flag3,
	.box3,
	.pencil3,
	.spk3,
	.spk4,
	.block4,
	.block3,
	.pointer3{
		display: none;
	}

	.third_head{
		height: 561px;
	}

	.thirdtxt_1{
		position: static;
		margin-top: 50px;
		text-align: center;
	}

	.thirdtxt_2{
		position: static;
		text-align: center;
	}

	.pav4{
		width: 100%;
	}

	.caja_total .description_box{
		bottom: 0;
	}

/* ======== WEB ======== */

	.third_head.head_web{
		height: 430px;
	}

	.web_description h1{
		padding:10px 0 5px 5px;
	}

	h1.web_year{
		display: block;
		float: none;
		padding: 0 0 5px 5px;
	}

}

@media screen and (max-width: 700px) {

/* ======== SKILLS ======== */

	.ballon{
		display: none;
	}

	.rabbit,
	.hat,
	#skills .bag_one{
		display: block;
	}

/* ======== WORK ======== */

	#experience,
	.experience_in{
		height: auto;
	}

	.work_map,
	.work_dot,
	.dots,
	.normal_h2,
	.btn_active,
	.close_btn,
	.work_bag,
	#experience .pavement_main{
		display: none;
	}

	.respo_h2{
		display: block;
	}

	#experience .main_text{
		position: static;
		padding-left: 10%;
	}

	.description{
		display: block;
		width: 80%;
		z-index: 0;
		height: auto;
		position: static;
		margin:0 auto 20px auto;
	}

	.web_link{
		position: static;
		text-align: center;
		width: 64px;
		margin: 0 auto;
	}

	#experience .pavement{
		position: static;
	}

/* ======== CONTACT ======== */

	.jerry_icon{
		left: 300px;
	}

	.group_caja video{
		width: 100%;
		height: auto;
	}

}


@media screen and (max-width: 670px) {

/* ================= PART 1 ================= */



	#header_home{
		width: 100%;
	}

	#container_home h1{
		font-size: 51px;
	}

	#languages_home{
		margin-top: 30px;
	}

	.english_home,
	.french_home{
		position: static;
	}

	.english_home{
		margin-right: 30px;
	}

	#header_home .birdflapping{
		display: none;
	}

	.seagull_stand{
		display: none;
	}

	.sea_wave{
		top: 653px;
	}

/* ================= PART 2 ================= */

/* ======== HOME ======== */

	.bag_one{
		right: 0;
	}

	.main_text h1{
		font-size: 85px;
	}

	.officer,
	.laptop_home,
	.light_home,
	.flag_cuatro,
	.pole_cuatro,
	.flag_seis,
	.pole_seis,
	.family_tree,
	.roots,
	.arbustos,
	.arboles,
	.uvm,
	#portfolio .port_desk,
	#portfolio .laptop,
	#portfolio .light,
	#portfolio .pavement_main{
		display: none;
	}


/* ======== EDUCATION ======== */

	.main_text h2 span{
		padding-left: 0;
		display: block;
		padding-left: 0;
		padding-right: 30px;
		text-align: right;
	}

	.uvm{
		bottom: 143px;
		width: 484px;
	}

/* ======== HOBBIES ======== */

	.under,
	.bag_tor,
	.water_yellow,
	.lamp{
		display: none;
	}

	#contact .social_link{
		margin: 0px;
	}

	#contact .social_media{
		top: 267px;
	}

/* ================= PART 3 ================= */

/* ======== WEB ======== */

	p.third_title{
		font-size: 70px;
	}

	.middle_box{
		margin: 0 2%;
	}

}


@media screen and (max-width: 586px) {

/* ======== EDUCATION ======== */

	.uvm{
		display: none;
	}

/* ======== CONTACT ======== */

	.fran_cont .social_media{
		top: 320px!important;
	}

	.fran_cont .zip,
	.fran_cont .trash{
		display: none;
	}

/* ================= PART 3 ================= */

/* ======== GRAPHICS ======== */

	.thirdtxt_1,
	.thirdtxt_2{
		font-size: 100px;
	}

	#education .land_main{
		z-index: 7;
	}

	#contact .main_text,
	#contact .social_media{
		position: static;
	}

	.back_city{
		z-index: 0;
	}


}

@media screen and (max-width: 477px) {

/* ================= HOME ================= */

	#container_home h2{
		font-size: 20px;
	}

/* ================= PART 1 ================= */


	#header_home .button_language a{
		background:#9ddcf8;
	}

	#header_home .button_language a img{
		top: 0px;
		height: 96px;
		width: auto;
	}

	#header_home .button_language a p{
		opacity: 1;
		left:0;
		right:0;
		margin-left:auto;
		margin-right:auto;
		top: 85px;
	}


/* ================= PART 2 ================= */

/* ======== MAIN TEXT ======== */

	.main_text h1{
		font-size: 74px;
		margin: 10px 0;
	}

/* ================= PART 2 ================= */

/* ======== MAIN MENU ======== */

	#main_menu{
		display: none;
	}

	.respo_menu_right,
	.respo_menu_left{
		display: block!important;
	}

	.respo_menu_right{
		position: fixed;
		right: 0;
		top: 10px;
		width: 50px;
		z-index: 300;
	}

	.respo_menu_left{
		position: fixed;
		left: 0;
		top: 10px;
		width: 50px;
		z-index: 300;
	}

	.button_menu{
		display: block;
		margin-bottom:3px;
	}

	.button_menu a p{
		opacity: 1;
		left:0;
		right:0;
		margin-left:auto;
		margin-right:auto;
	}

	.button_menu a{
		background:#29abe2;
	}

	.button_menu a img{
		display: none
	}

/* ======== HOME ======== */

	#home, .home_in{
		height: auto;
	}

	.jerry_espo{
		display: block;
		margin: 0 auto;
		text-align: center;
		height: 300px;
		width: 189px;
	}

	.main_text{
		width: 69%;
		position: static;
		padding-top: 0;
	}

	.boat,
	.officer,
	.flag_one,
	.flag_two,
	.laptop_home,
	.light_home,
	.seagul_left,
	#home .bag_one,
	.seagul_right,
	.seagull_stand_main,
	.seagull_main,
	.lake_wave{
		display: none;
	}

	#home .land{
		position: static;
		background: #b3b3b3;
	}

	#home .lake{
		position: static;
	}

/* ======== ABOUT ======== */
	
	#about{
		height: auto;
	}

	.grandpa_one,
	.grandpa_two,
	.grandma_one,
	.grandma_two,
	.flag_three,
	.flag_four,
	.flag_five,
	.flag_six,
	.flag_seven,
	.flag_eight,
	#about .bag_one{
		display: none;
	}

	#about .land_main{
	background: #911d20;
	position: static;
	}

	#about .main_text.fran_esp h1{
		font-size: 48px;
	}

/* ======== EDUCATION ======== */

	#education .bag_one{
		display: none;
	}

	#education,
	.education_in{
		height: auto;
	}

	#education .main_text{
		margin-bottom: 50px;
	}

	#education .land_main{
		position: static;
		margin-left: 50px; 
	}

	#education .main_text h1{
		font-size: 44px;
	}

	.external_link a{
		background:#662d91;
	}

	.external_link a img{
		display: none;
	}

	.external_link a p{
		opacity: 1;
		left:0;
		right:0;
		margin-left:auto;
		margin-right:auto;
		top:20px;
	}

	.responsive_button_web{
		margin-top: 20px;
	}

/* ======== SKILLS ======== */

	.rabbit,
	.hat,
	#skills .bag_one{
		display: none;
	}

	#skills .main_text.fran_esp h1{
		font-size: 48px;
	}

	#skills,
	.skills_in{
		height: auto;
	}

	#skills .land_main{
		position: static;
		margin-left: 50px;
	}

/* ======== WORK ======== */

	#experience .main_text h1{
		font-size: 37px;
	}

	.description{
		width: 57%;
	}

	.description_in h1{
		font-size: 25px;
		margin-bottom: 10px;
	}

	#education .main_text h1{
		font-size: 38px;
	}

	.duration_one, .duration_two{
		width: 40%;
	}

	.first_block{
		margin: 10px 0 20px;
		width: 100%;
	}

	.fran_esp p.country_flag{
		font-size: 12px;
	}

	.fran_esp .description_in h1{
		font-size: 23px;
	}

	.web_link a img{
		display: none;
	}

	.web_link a p{
		opacity: 1;
		left:0;
		right:0;
		margin-left:auto;
		margin-right:auto;
		top:20px;
	}

	.web_link.exp1 a{
	background:#ed1e79;
	}

	.web_link.exp2 a{
		background:#39b54a;
	}

	.web_link.exp3 a{
		background:#c1272d;
	}

	.web_link.exp4 a{
		background:#ff931e;
	}

	.web_link.exp5 a{
		background:#662d91;
	}

	#experience .pavement{
		height: 100px;
	}

/* ======== PORTFOLIO ======== */

	#portfolio .main_text{
		width: 68%;
		margin-left: 50px;
	}

	#portfolio .main_text h1{
		font-size: 52px;
	}

	#portfolio .social_link{
		margin: 0 3px;
	}

	#portfolio .bag_port{
		display: none;
	}

	#portfolio .social_link img{
		display: none;
	}

	#portfolio .social_link p{
		top: 40px;
	}

/* ======== HOBBIES ======== */

	#hobbies,
	.hobbies_in{
		height: auto;
	}

	.mounty,
	.beaver,
	.beaver_head,
	.deer,
	.deer_head,
	.water,
	.log,
	.land_right,
	.land_left,
	.moose,
	.moose_block{
		display: none;
	}

	#hobbies .main_text h1{
		font-size: 56px;
	}

	#hobbies .land_main{
		position: static;
		margin-left: 30px;
	}

	.jerry_icon{
		right: 10px;
	}

/* ======== CONTACT ======== */

	#contact, .contact_in{
		height: auto;
	}

	.jerry_icon{
		right: 0;
		left: 0;
		margin: 0 auto;
		bottom: 70px;
	}

	.footer_firm{
		padding-top: 0;
	}

	.footer_main{
		width: 72%;
		right: 0;
		left: 0;
		margin: 0 auto;
		text-align: center;
		bottom: 10px;
		height: auto;
	}

	.footer_firm a{
		width: 70px;
	}

	.fran_cont .social_media{
		top: 338px!important;
		width: 95%;
	}

	#contact .social_media{
		display: block;
		position: static;
		width: 69%;
		height: auto;
		padding-bottom: 300px;
	}

	.social_link.phone a{
		background:#93278f;
	}

	.social_link.phone span{
		display: block;
	}

	.social_link.phone a p{
		top:20px;
	}

	.social_link.mail a{
		background:#f15a24;
	}

	.social_link.facebook a{
		background:#fbb03b;
	}

	.social_link.twitter a{
		background:#39b54a;
	}

	.social_link.linkedin a{
		background:#c1272d;
	}

	.social_link.graphics a{
		background:#ff931e;
	}

	.social_link.web a{
		background:#662d91;
	}

	.social_link a img{
		display: none;
	}

	.social_link a p{
		opacity: 1;
		left:0;
		right:0;
		margin-left:auto;
		margin-right:auto;
		top: 40px;
	}

	.zip{
		display: none;
	}

/* ======== FOOTER FINAL ======== */

	#final_footer,
	.final_footer_in{
		height: 100px;
	}

	.pavement2{
		height: 0;
	}

/* ================= PART 3 ================= */

/* ======== GRAPHICS ======== */

	.thirdtxt_1,
	.thirdtxt_2{
		font-size: 50px;
	}

	.third_head{
		height: 440px;
	}

	.third_desc{
		width: 68%;
	}

	.web_prog{
		padding: 0;
		font-size: 30px;
	}

	.group_caja{
		width: 69%;
		margin: 0 auto;
	}

	.caja_seis, 
	.caja_siete, 
	.caja_ocho{
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}

	.caja_siete{
		margin: 0 0 10px 0;
	}

	.caja_tres{
		height: auto;
		margin-bottom: 15px;
	}

	.caja_tres img{
		width: auto;
		height: auto;
		width: 100%;
	}

	.normal_pic{
		display: none;
	}

	.respo_pic{
		display: block;
	}

	.caja_cuatro, 
	.caja_cinco{
		width: 100%;
		height: auto;
		float: none;
		margin-bottom: 15px;
	}

	.caja_nueve,
	.caja_diez{
		width: 100%;
		margin-bottom: 15px;
	}

/* ======== WEB ======== */

	p.third_title{
		font-size: 50px;
	}

	p.third_title span{
		display: block;
	}

	#third_home .mobile4,
	#third_home .ruler4,
	#third_home .mac4,
	#third_home .laptop4,
	#third_home .desk4,
	#third_home .bag5,
	#third_home .magic4,
	img.cover_web{
		display: none;
	}

	.jerry4{
		margin: 0 auto;
		right: 0;
		left: 0;
	}

	.third_head.head_web{
		height: 273px;
	}

	.head_web .pav4{
		width: 50%;
	}

	.web_project_cover{
		width: 69%;
	}

	img.pro_cover{
		top: 0;
		width: 100%;
		height: auto;
	}

	.web_description{
		background-color: rgba(41, 171, 226, 1);
		background: rgba(41, 171, 226, 1);
		color: rgba(41, 171, 226, 1);
		color: #ffffff;
	}

/* ======== WEB ======== */

	.old_projects{
		width: 69%;
		margin: 0 auto;
	}

	.pro_box{
		width: 100%;
		margin-top: 10px;
	}

	.middle_box{
		margin:0;
		margin-top: 10px;
	}

	.old_projects .description_box h1{
		font-size: 20px;
	}

	.old_projects .description_box p{
		font-size: 12px;
		padding-right: 5px;
	}

	.old_projects .lil_year span{
		display: inline-block;
	}

	img.lil_lap_cover{
		top: 0;
		width: 100%;
		height: auto;
		z-index: 0;
	}

	.button_main_web.button_main_mac{
		top: 40px;
	}

	.lil_year{
		font-size: 15px!important;
	}

	.old_projects .lil_year span{
		font-size: 12px;
	}

	.close_web_button img{
		display: none;
	}

	.close_web_button p{
		opacity: 1;
		left:0;
		right:0;
		margin-left:auto;
		margin-right:auto;
		top: 7px;
	}

	.button_main_web .close_web_button{
		background:#0071bc;
	}

	.box_web_button{
		background:#0071bc;
	}

	.box_web_button,
	.pro_box:hover .box_web_button{
		opacity: 1;
		top: 89px;
	}

	.box_web_button img{
		display: none;
	}

	.box_web_button p{
		opacity: 1;
		left:0;
		right:0;
		margin-left:auto;
		margin-right:auto;
		top: 7px;
	}

	.mountains,
	.fall,
	.flag,
	.pole{
		display: none;
	}

	.second_block{
		display: block;
	}

	.second_block p{
		text-align: center;
	}


}

@media screen and (max-width: 295px) {

/* ================= PART 1 ================= */
	.sea_wave{
		top: 808px;
	}

}