@charset "utf-8";
/* CSS Document */

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

[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.1 Top Bar
	3.2 Header Content
	3.3 Logo
4. Menu
5. Home
6. Boxes
7. About
8. Departments
9. Services
10. CTA
11. Footer



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

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

/*********************************
2. Body and some general stuff
*********************************/

*
{
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 500;
	background: #FFFFFF;
	color: #696969;
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul
{
	list-style: none;
	margin-bottom: 0px;
}
p
{
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	line-height: 2;
	font-weight: 500;
	color: #696969;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p:last-of-type
{
	margin-bottom: 0;
}
a
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
a:hover
{
	color: #bccd2f !important;
}
::selection
{
	color: #669933;
}
p::selection
{
	
}
h1{font-size: 68px;}
h2{font-size: 40px;}
h3{font-size: 24px;}
h4{font-size: 18px;}
h5{font-size: 14px;}
h1, h2, h3, h4, h5, h6
{
	font-family: 'Roboto', sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
h1::selection, 
h2::selection, 
h3::selection, 
h4::selection, 
h5::selection, 
h6::selection
{
	
}
.form-control
{
	color: #db5246;
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}
.clear
{
	clear: both;
}
.clearfix::before, .clearfix::after
{
	content: "";
	display: table;
}
.clearfix::after
{
	clear: both;
}
.clearfix
{
	zoom: 1;
}
.float_left
{
	float: left;
}
.float_right
{
	float: right;
}
.trans_200
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.trans_300
{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.trans_400
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.trans_500
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
}
.prlx_parent
{
	overflow: hidden;
}
.prlx
{
	height: 130% !important;
}
.parallax-window
{
    min-height: 400px;
    background: transparent;
}
.nopadding
{
	padding: 0px !important;
}
.button
{
	display: inline-block;
	height: 51px;
	background: #0e7574;
}
.button::after
{
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: #bccd2f;
	content: '';
	z-index: 0;
	-webkit-transition: all 400ms cubic-bezier(.33,.68,.59,.99);
	-moz-transition: all 400ms cubic-bezier(.33,.68,.59,.99);
	-ms-transition: all 400ms cubic-bezier(.33,.68,.59,.99);
	-o-transition: all 400ms cubic-bezier(.33,.68,.59,.99);
	transition: all 400ms cubic-bezier(.33,.68,.59,.99);
}
.button a
{
	display: block;
	position: relative;
	line-height: 51px;
	font-size: 14px;
	font-weight: 900;
	color: #FFFFFF;
	padding-left: 39px;
	padding-right: 45px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	z-index: 10;
}
.button:hover::after
{
	height: 100%;
}
.button:hover a
{
	color: #FFFFFF !important;
}

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


/***************************************************/
.section_title
{
	padding-top: 17px;
}
.section_title h2
{
	font-size: 30px;
	font-weight: 500;
	color: #232323;
}
.section_title::before
{
	display: block;
	position: absolute;
	left: 1px;
	top: 0;
	width: 54px;
	height: 3px;
	background: #bccd2f;
	content: '';
}
.section_title_light h2
{
	color: #FFFFFF;
}


.list 
{
	padding-left: 30px;
	margin-top:10px; 
	list-style-image:url('../images/list.png');
	line-height:20px;
	
}


/*********************************
3. Header
*********************************/

.header
{
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #FFFFFF;
	z-index: 100;
}
.header.scrolled
{
	top: -48px;
}

/*********************************
3.1 Top Bar
*********************************/

.top_bar
{
	width: 100%;
	background: #0e7574;
}
.top_bar_content
{
	width: 100%;
	height: 48px;
	padding-left: 300px;
}
.top_bar_item
{
	margin-left: 60px;
}
.top_bar_item a
{
	font-size: 14px;
	color: #FFFFFF;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.top_bar_item:first-child
{
	margin-left: 37px;
}
.emergencies
{
	height: 100%;
	background: #ff0030;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	padding-left: 38px;
	padding-right: 38px;
}

/*********************************
3.2 Header Content
*********************************/

.header_container
{
	width: 100%;
	background: #fefefe;
}
.header_content
{
	width: 100%;
	height: 55px;
}
.header.scrolled .header_content
{
	height: 50px;
}

.main_nav ul li.active a
{
	color: #bccd2f;
	padding-bottom :5px; 
	border-bottom:5px solid #bccd2f; 
}

.main_nav ul li
{
	display: inline-block;
}
.main_nav ul li:not(:first-child)
{
	margin-left: 32px;
}
.main_nav ul li a
{
	font-size: 16px;
	font-weight: 500;
	color: #0e7574;
}
.main_nav ul li a:active
{
	color: #bccd2f;
	padding-bottom :5px; 
	border-bottom:5px solid ; 
}

.main_nav ul li a:hover
{
	color: #bccd2f;
	padding-bottom :5px; 
	border-bottom:5px solid ; 
}

/* Dropdown Menu */
.main_nav li .dropdown {
	background: #fff;
	width: 150px;
	position: absolute;
	top: 100%;
	z-index: 999;
	-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 3px 5px #3333334d;
	transform-origin: 0 0 0;
	transform: scaleY(0.2);
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	opacity: 0;
	visibility: hidden;
	top: 58px;
	
}
.main_nav li:hover .dropdown{
	opacity:1;
	visibility:visible;
	transform:translateY(0px);
}
.main_nav li .dropdown li{
	float:none;
	margin:0;
	border:none;
	border-bottom:none;
}
.main_nav li .dropdown li:last-child{
	border:none;
}
.main_nav li .dropdown li a {
	padding: 12px 12px;
	color:#0e7574;
	display: block;
	font-weight: 400;
	border-bottom:none;
	text-transform: capitalize;
	background: transparent;
	-webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	transition:all 0.2s ease;
}
.main_nav li .dropdown li a:before{
	display:block;
}

.main_nav li .dropdown li a:hover {
	color:#0e7574;
	
	
}
.main_nav li .dropdown li a:hover{
	border: none;
	margin-left:4px;
}

.hamburger
{
	display: none;
	cursor: pointer;
}
.hamburger i
{
	font-size: 24px;
	color: #272727;
}

/*********************************
3.3 Logo
*********************************/

.logo_container_outer
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.logo_container
{
	position: absolute;
	top: 0;
	left: 15px;
	width: 300px;
	height: 120px;
	background: #FFFFFF;
	box-shadow: 0px 10px 19px rgba(0,0,0,0.09);
	z-index: 10;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.header.scrolled .logo_container
{
	top: 48px;
	height: 120px;
}
.logo_container a
{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.logo_content
{
	width: 100%;
	height: 100%;
	padding-left: 36px;
}
.logo_line
{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: #bccd2f;
}
.logo
{
	margin-top: 27px;
}
.logo span
{
	color: #bccd2f;
}
.logo_container a .logo:hover
{
	color: #283290;
}
.logo_text
{
	font-size: 30px;
	font-weight: 500;
	color: #283290;
	line-height: 0.75;
}
.logo_box
{
	display: inline-block;
	width: 23px;
	height: 23px;
	background: #bccd2f;
	color: #FFFFFF;
	font-size: 24px;
	line-height: 23px;
	text-align: center;
	-webkit-transform: translateY(-2px);
	-moz-transform: translateY(-2px);
	-ms-transform: translateY(-2px);
	-o-transform: translateY(-2px);
	transform: translateY(-2px);
	margin-left: 1px;
}
.logo_sub
{
	font-size: 14px;
	font-weight: 400;
	color: #8f8e8e;
	padding-left: 3px;
	margin-top: 2px;
}
/*********************************
4. Menu
*********************************/

.menu_container
{
	position: fixed;
	top: 0;
	right: -50vw;
	width: 50vw;
	height: 100vh;
	background: #FFFFFF;
	z-index: 101;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	visibility: hidden;
	opacity: 0;
}
.menu_container.active
{
	visibility: visible;
	opacity: 1;
	right: 0;
}
.menu
{
	position: absolute;
	top:150px;
	left: 0;
	padding-left: 15%;
}
.menu_inner
{
	width: 100%;
	height: 100%;
}
.menu_list
{
	-webkit-transform: translateY(1.5rem);
	-moz-transform: translateY(1.5rem);
	-ms-transform: translateY(1.5rem);
	-o-transform: translateY(1.5rem);
	transform: translateY(1.5rem);
	-webkit-transition: all 1000ms 400ms ease;
	-moz-transition: all 1000ms 400ms ease;
	-ms-transition: all 1000ms 400ms ease;
	-o-transition: all 1000ms 400ms ease;
	transition: all 1000ms 400ms ease;
	opacity: 0;
}
.menu_container.active .menu_list
{
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
}
.menu_item
{
	margin-bottom: 5px;
}

.menu_item a
{
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #272727;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_item a:hover
{
	color: #ffb606;
}
.menu_close_container
{
	position: absolute;
	top: 86px;
	right: 79px;
	width: 21px;
	height: 21px;
	cursor: pointer;
	z-index: 10;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.menu_close
{
	top: 9px;
	width: 21px;
	height: 3px;
	background: #3a3a3a;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close::after
{
	display: block;
	position: absolute;
	top: -9px;
	left: 9px;
	content: '';
	width: 3px;
	height: 21px;
	background: #3a3a3a;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close_container:hover .menu_close,
.menu_close_container:hover .menu_close::after
{
	background: #bccd2f;
}
.menu_extra
{
	position: absolute;
	left: 0;
	bottom: 0;
	padding-left: 15%;
	padding-bottom: 25px;
}
.menu_appointment a
{
	font-size: 13px;
	color: #272727;
}

.menu_appointment a:visited
{
	font-size: 13px;
	color: #272727;
}

.menu_emergencies
{
	font-size: 13px;
	color: #272727;
}
.menu_emergencies a 
{
	font-size: 13px;
	color: #272727;
}
.menu_inner_sub
{ 
list-style: none; 
padding-left: 20px;
font-size: 24px;
}

/*********************************
5. Home
*********************************/

.home
{
	width: 100%;
	height: 473px;
}
.home_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.home_container
{
	position: absolute;
	left: 0;
	bottom: 118px;
	width: 100%;
}
.home_title
{
	font-size: 30px;
	font-weight: 900;
	color: #FFFFFF;
}
.home_title span
{
	color: #bccd2f;
}
.breadcrumbs
{
	margin-top: -2px;
}
.breadcrumbs ul li
{
	display: inline-block;
	position: relative;
}
.breadcrumbs ul li:not(:last-child)::after
{
	display: inline-block;
	position: relative;
	content: '/';
	margin-left: 7px;
	margin-right: 2px;
}
.breadcrumbs ul li,
.breadcrumbs ul li a
{
	font-size: 14px;
	font-weight: 500;
	color: #FFFFFF;
}

/*********************************
6. Contact
*********************************/

.contact
{
	width: 100%;
	background: #FFFFFF;
	padding-top: 95px;
	padding-bottom: 95px;
}
.contact_text
{
	margin-top: 34px;
	padding-right: 90px;
}
.contact_about_list
{
	margin-top: 48px;
}
.contact_about_list li:not(:last-child)
{
	margin-bottom: 9px;
}
.contact_about_icon
{
	display: inline-block;
	width: 31px;
	height: 31px;
	background: #bccd2f;
	text-align: center;
	vertical-align: middle;
}
.contact_about_icon img
{
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.contact_about_list li span
{
	font-size: 14px;
	font-weight: 400;
	color: #696969;
	padding-left: 10px;
}
.contact_form_container
{
	width: 100%;
}
.contact_form
{
	display: block;
	position: relative;
	width: 100%;
}
.contact_input
{
	position: relative;
	width: 100%;
	height: 44px;
	border: none;
	outline: none;
	background: #e9edf3;
	padding-left: 25px;
}
.contact_form > div:not(:last-child)
{
	margin-bottom: 28px;
}
.input_container::after
{
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	content: '';
	background: #bccd2f;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.input_container:hover::after
{
	visibility: visible;
	opacity: 1;
}
.contact_input::-webkit-input-placeholder
{
	font-size: 12px !important;
	font-weight: 400 !important;
	font-style: italic;
	color: #696969 !important;
}
.contact_input:-moz-placeholder
{
	font-size: 12px !important;
	font-weight: 400 !important;
	font-style: italic;
	color: #696969 !important;
}
.contact_input::-moz-placeholder
{
	font-size: 12px !important;
	font-weight: 400 !important;
	font-style: italic;
	color: #696969 !important;
} 
.contact_input:-ms-input-placeholder
{ 
	font-size: 12px !important;
	font-weight: 400 !important;
	font-style: italic;
	color: #696969 !important;
}
.contact_input::input-placeholder
{
	font-size: 12px !important;
	font-weight: 400 !important;
	font-style: italic;
	color: #696969 !important;
}
.contact_text_area
{
	height: 160px;
	padding-top: 13px;
}
.contact_button
{
	display: inline-block;
	position: relative;
	border: none;
	outline: none;
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0.05em;
	cursor: pointer;
	margin-top: 8px;
	padding:11px;
	background-color: #097474;
	border-bottom: 2px #bccd2f solid; 
	width:100px; 
}

.contact_button:hover
{
	
	background-color: #bccd2f;
	
}

.map_row
{
	margin-top: 70px;
}
.contact_map
{
	width: 100%;
}
.map
{
	width: 100%;
	background-color:#efefef;
    display: flex;
    justify-content: center;
}
.google_map
{
	width: 100%;
	justify-content: center;
}
.map_container
{
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
    justify-content: center;
}
#map
{
	width: 100%;
	height: calc(100% + 30px);
}


/*********************************
7. Footer
*********************************/
.footer
{
	width: 100%;
}
.footer_container
{
	width: 100%;
	background: #0d6868;
	padding-bottom: 77px;
}
.footer_logo_container
{
	width: 100%;
	height: 157px;
	background: #FFFFFF;
}
.footer_logo_container::after
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: #bccd2f;
	content: '';
}
.footer_logo_container a
{
	display: block;
	width: 100%;
	height: 100%;
}
.footer_logo_container .logo_content
{
	display: inline-block;
	padding-left: 0;
	width: auto;
	height: auto;
}
.footer_logo_container .logo
{
	margin-top: 10px;
}
.footer_about_text
{
	margin-top: 36px;
}
.footer_about_text p
{
	color: #e5e5e5;
}
.footer_about_list
{
	margin-top: 32px;
}
.footer_about_list li:not(:last-child)
{
	margin-bottom: 9px;
}
.footer_about_icon
{
	display: inline-block;
	width: 31px;
	height: 31px;
	background: #bccd2f;
	text-align: center;
	vertical-align: middle;
}
.footer_about_icon img
{
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.footer_about_list li span
{
	font-size: 14px;
	font-weight: 500;
	color: #d7d7d7;
	padding-left: 10px;
	color:#ffffff;
}
.footer_about_list li span:hover
{
	font-size: 14px;
	font-weight: 500;
	color: #d7d7d7;
	padding-left: 10px;
	color:#ffffff;
	text-decoration:underline;
}

.footer_column
{
	padding-top: 138px;
}
.footer_title
{
	font-size: 18px;
	font-weight: 500;
	color: #FFFFFF;
}
.footer_links ul
{
	-webkit-columns: 2;
	-moz-columns: 2;
	columns: 2;
	margin-top: 35px;
}
.footer_links ul li:not(:last-child)
{
	margin-bottom: 20px;
}
.footer_links ul li a
{
	font-size: 14px;
	font-weight: 500;
	color:#b2b2b2;
}
.footer_links ul li a:hover
{
	font-size: 14px;
	font-weight: 500;
	color:#ff6600;
	padding-left:4px; 
	text-decoration:underline; 
}

.footer_news ul
{
	margin-top: 35px;
}
.footer_news_title a
{
	font-size: 15px;
	font-weight: 500;
	color: #b2b2b2;
}
.footer_news_date
{
	font-size: 14px;
	font-weight: 500;
	color: #bccd2f;
	margin-top: 7px;
}
.footer_news ul li:not(:last-child)
{
	margin-bottom: 38px;
}
.copyright
{
	width: 100%;
	background: #033d40;
}
.copyright_content
{
	width: 100%;
	height: 62px;
}
.cr
{
	font-size: 14px;
	font-weight: 500;
	color: #97979c;
}
.footer_social ul
{
	margin-right: -5px;
}
.footer_social ul li
{
	display: inline-block;
}
.footer_social ul li:not(:last-child)
{
	margin-right: 19px;
}
.footer_social ul li a i
{
	color: #0e7574;
	padding: 5px;
	font-size: 14px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.footer_social ul li a i:hover
{
	color: #FFFFFF;
}

.pin
  width 30px
  height 30px
  border-radius 50% 50% 50% 0
  background #89849b
  position absolute
  transform rotate(-45deg)
  left 50%
  top 50%
  margin -20px 0 0 -20px
  animation-name bounce
  animation-fill-mode both
  animation-duration 1s
  &:after
    content ''
    width 14px
    height 14px
    margin 8px 0 0 8px
    background #2F2F2F
    position absolute
    border-radius 50%
    
.pulse
  background rgba(0,0,0,0.2)
  border-radius 50%
  height 14px
  width 14px
  position absolute
  left 50%
  top 50%
  margin 11px 0px 0px -12px
  transform rotateX(55deg)
  z-index -2
  &:after
    content ""
    border-radius 50%
    height 40px
    width 40px
    position absolute
    margin -13px 0 0 -13px
    animation pulsate 1s ease-out
    animation-iteration-count infinite
    opacity 0.0
    box-shadow 0 0 1px 2px #89849b
    animation-delay 1.1s

@keyframes pulsate
  0%
    transform scale(0.1, 0.1)
    opacity 0.0
  50%
    opacity 1.0
  100%
    transform scale(1.2, 1.2)
    opacity 0

@keyframes bounce
  0%
    opacity 0
    transform translateY(-2000px) rotate(-45deg)
  60%
    opacity 1
    transform translateY(30px) rotate(-45deg)
  80%
    transform translateY(-10px) rotate(-45deg)
  100%
    transform translateY(0) rotate(-45deg)