/* -----------------------------------------------------
	Responsive Styles
----------------------------------------------------- */
@media screen and (max-width: 1499px) {

header .navbar-nav { padding-right: 0; }
header .call { padding: 0 15px 0; }

}

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

header .navbar-nav li { padding-right: 20px; }

}

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

header .navbar-nav li { padding-right: 13px; }
header .btn-violet { padding: 14px 15px 13px; }
header .call { padding: 0 10px 0; font-size: 16px; top: 5px; }
header .logo { max-width: 270px; width: 100%; }

/*======= CASE-STUDY ==========*/
.case-study .case-bachan figure { padding-left: 50px; }

}

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

h1 { font-size: 65px; }
h2 { font-size: 37px; }
#nav { text-align: center; padding: 0 0 15px; float: none; }
header .logo { margin: 0 auto; display: block; }
header .call { padding: 0 30px 0; }
header .navbar-nav li { padding-right: 20px; }
header.affix #nav { padding: 0 0 10px; }
header.affix .logo { max-width: 210px; }
header.affix .btn-violet { padding: 10px 15px; }
.custom-website.market .container h2 { font-size: 45px; }
.talk h3 { font-size: 28px; line-height: 30px; }
.interested h3 { font-size: 24px; }
.interested h5 { font-size: 20px; }
form .checkbox { display: block; padding-left: 0; }
.blog-block h3 { font-size: 31px; }
.blog-block { padding: 40px 15px; }

/*======= REAL-ESTATE-WEBSIT-DESIGN ==========*/
.real-estate .real .text-block { width: 50%; }
.real-estate .real .img-block { width: 50%; }
.real-estate .custom-website:nth-child(2) figure { margin-right: 0; }

/*======= CASE-STUDY ==========*/
.case-study .case-bachan::after { bottom: 16px; }
.case-study .case-bachan .case-bg { bottom: 16px; }
.case-study .case-bachan figure { padding-left: 0; }
.case-study .challenge-bg figure { padding: 0 15px; }
.case-study .challenge-bg::after { bottom: 40px; }
.case-study .challenge-bg .challenge-bg-img { bottom: 40px; }
.case-study .result strong { font-size: 80px }
.case-study .result .img-result { min-height: 650px; }

/* ===== ABOUT ====== */
.about .project ul li:nth-child(2) { padding: 0 100px; }
.about .project ul li strong { font-size: 57px; }

/* ===== CONTACT-US ====== */
.contact-us aside { padding: 60px 25px; }	
	
}

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

h1 { font-size: 60px; line-height: 60px; }
.adv { width: 50%; padding: 0 20px 15px; }
header #nav { text-align: center; }
header .navbar-nav{ display: block;padding: 70px 0 20px;text-align: left;max-width: 400px;margin: 0 auto; text-align: left; }
header .navbar-nav li { padding: 0 !important; float: none;border-bottom: 1px solid #e42431;  }
header .navbar-nav li a{ color: #fff; font-size: 18px;letter-spacing: 1px; display: block; padding: 15px; }
header .call { display: none; }
header .call.hide { display: inline-block !important; float: right; padding: 25px 60px 0 0; font-size: 30px; }
header .logo { display: inline-block; text-align: left; }
header.affix .call.hide { padding: 18px 60px 0 0; }
header.affix .mobile-toggle { top: 25px; }
.banner h3 strong { margin: 0; }
.banner .item { min-height: 750px }
.custom-website .container-fluid { display: block; }
.custom-website aside { width: 100%; padding: 0; }
.custom-website figure { max-width: 500px; width: 100%; margin: 0 auto 25px; }
.custom-website .content { margin: 0 auto; text-align: center; }
.custom-website .content.in { padding: 0; }
.custom-website ul { text-align: left; }
.talk { margin-top: 20px; }
.blog-block { width: 50%; margin-bottom: 15px; }
.custom-website.real aside { width: 100% !important; }
.interested { padding: 40px 0 20px; text-align: center; }
footer .mail { max-width: 380px; width: 100%; }
.our-work .item { display: block; }
.our-work .img-block { min-height: 0; background-color: #f0f2f7; background-size: 0; }
.our-work .img-block figure { padding: 0 15px; }
.our-work .img-block figure img { display: block !important; height: 100%; }
.our-work h3 { font-size: 31px; }
.our-work { display: block; }
.our-work aside { width: 100%; }
.our-work .text-block { float: none; margin: 0 auto; }
.our-work .content { padding: 25px 0 35px; }
.custom-website.market .container h2 { font-size: 40px; }
	
    header .navbar-nav .sub-menu { position: relative; }
    header .navbar-nav { overflow-y: scroll; height: 80vh; }
    
/*======= INNER-BANNER ==========*/
.inner-banner h1 { font-size: 45px; }

/*======= CASE-STUDY ==========*/
.case-study .case-bachan::after { bottom: 13px; }
.case-study .case-bachan .case-bg { bottom: 13px; }
.case-study .result strong { font-size: 60px; line-height: 60px; }
.case-study .result h3 { font-size: 35px; }
.case-study .result .img-result { min-height: 550px; }

/*======= REAL-ESTATE-WEBSIT-DESIGN ==========*/
.real-estate .real aside { width: 100% !important; } 
.real-estate .custom-website:first-child .content { float: none; }
.real-estate .custom-website:nth-child(2) figure { text-align: center; margin: 0 auto; } 

/*======= ECOMMERCE ==========*/
.ecommerce .custom-website:nth-child(2) aside { padding: 20px 0 10px; }
.ecommerce .custom-website:nth-child(3) aside { padding: 30px 0 0; }
.ecommerce .custom-website figure { margin: 0 auto; }
.ecommerce .custom-website:nth-child(4) aside { padding: 15px 0; }
.ecommerce .custom-website:nth-child(5) .content { padding-top: 20px; }
.ecommerce .custom-website:nth-child(5) .img-block { background-size: 0; height: auto; width: 100%; }
.ecommerce .custom-website:nth-child(5) figure img { display: block; }
.ecommerce .custom-website:nth-child(2) .content { float: none; }

/*======= SEARCH ENGINE OPTIMIZATION ==========*/
.search-engine .custom-website figure { padding: 0 !important; }
.search-engine .custom-website .content { padding: 0 !important; }

/* ===== BLOG-PAGE ====== */ 

/* ===== BLOG-DETAILS ====== */
.blog-details figure { margin-bottom: 30px; }
.blog-details .full { padding: 0 20px 15px; }
.blog-details h3 { font-size: 27px; }
.blog-details .pre p { font-size: 20px; padding-top: 10px; }

/* ===== OUR-WORK ====== */
.work .work-text { margin: 0 0 27px 0px; }
.work h5 { font-size: 21px; }
.work ul li { font-size: 14px; }
.work figure img { min-height: 350px; }

/* ===== MARKETING ====== */
.marketing .market .row { display: block; }
.marketing .market aside { display: block; }
.marketing .market figure { max-width: 600px; width: 100%; margin: 0 auto 20px; }
.marketing .market-block { display: block; }
.marketing .market-block aside { width: 100% !important; }
.marketing .market-block .text-block { max-width: 100%; padding: 30px 15px 40px; }
.marketing .market { padding: 40px 0; }
.marketing .market-block .img-block { background: none !important; min-height: inherit; }
.marketing .market-block .img-block figure { padding: 0 15px; }
.marketing .market-block .img-block .hide { display: block !important; width: 100%; }	

/* ===== ABOUT ====== */
.about .project ul li strong { font-size: 52px; }
.about .project ul li:nth-child(2) { padding: 0 10px; }
.about .project ul li { font-size: 20px; }

/* ===== CONTACT-US ====== */
.contact-us .reach-us { width: 45%; }
.contact-us .information { width: 55%; }
.contact-us form .form-group:nth-child(odd) { padding-right: 15px; } 
.contact-us form .form-group:nth-child(even) { padding-left: 15px; }
.contact-us .checkbox-block { float: none; width: 100%; margin-bottom: 10px; }
.contact-us form .form-group:nth-child(2) label { left: 20px; }	
	
}

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

section { padding: 40px 0; }
h1 { font-size: 50px; }
h2 { font-size: 32px; line-height: 37px; }
h3 { font-size: 25px; line-height: 30px; }
h4 { font-size: 23px; line-height: 28px; }
h5 { font-size: 20px; }
p { font-size: 16px; }
.blog-details p, .blog-details ul li {  font-size: 16px; font-weight: 400; }    
section ul li { font-size: 16px; margin-bottom: 5px; }
section ul li:after { font-size: 16px; }
form .form-group { margin-bottom: 20px; }
form .form-group .form-control { font-size: 14px; }
form .form-group.area .form-control { height: 80px; padding-top: 10px; }
form .btn { padding: 10px 25px; }
.talk { padding: 30px 20px }
.btn { font-size: 16px; padding: 10px 30px; }
.banner .item { min-height: 650px; }
.banner .btn.btn-white { padding: 10px 25px; }
.banner .btn { padding: 10px 25px; }
.banner h3 strong { display: inline; }
.magic-happen .btn { margin-top: 0; padding: 10px 40px; }
.magic-happen { padding: 40px 0; }
.custom-website { padding: 40px 0; }
.custom-website p { margin-bottom: 20px; }
.custom-website .btn { padding: 10px 30px; }
.advertising h2 { margin-bottom: 20px; }
.advertising { padding: 40px 0; }
.why-us .btn { padding: 10px 35px; margin-top: 15px; }
.why-us { padding: 40px 0; }
form .form-group.area label { top: 9px; }
.ecomm li { float: none; width: 100%; border: 0; }
.ecomm h5 { margin: 0; font-size: 18px;  }
.blog-block { width: 100%; max-width: 500px; margin: 0 auto; float: none; padding: 10px 0; border: 0; }
.blog-block h3 { font-size: 26px; line-height: 30px; }
.our-work { padding: 0; }
.our-work .btn-violet { margin-top: 0; padding: 10px 30px; }
.our-expertise h4 { font-size: 22px; }
.custom-website.market .container h2 { font-size: 35px; }
	
/*======= INNER-BANNER ==========*/
.inner-banner h1 { font-size: 40px; }
.inner-banner { min-height: 300px; }

/*======= CASE-STUDY ==========*/
.case-study .case-bachan::after { bottom: 10px; }
.case-study .case-bachan .case-bg { bottom: 10px; } 
.case-study .challenge-bg::after { bottom: 30px; }
.case-study .challenge-bg .challenge-bg-img { bottom: 30px; }
.case-study .approach-bg .approach-bg-color { bottom: 9px; }
.case-study .challenge { padding: 40px 0; }
.case-study .approach-bg::after { bottom: 9px; }
.case-study .result strong { font-size: 50px; }
.case-study .result p { font-size: 18px; line-height: 24px; }
.case-study .result { padding-top: 40px; }
.case-study .result h3 { font-size: 30px; }
.case-study .result ul { margin: 0 auto 30px; }
.case-study .testimonial { padding-top: 40px; }
.testimonial h2 { margin-bottom: 15px; }
.case-study .spread { margin-top: 30px; }
.case-study .spread ul li a .social-circle li a { font-size: 14px; width: 35px; height: 35px; line-height: 35px; }
.case-study p { line-height: 26px; }
.case-study { padding: 50px 0 5px; }
.case-study .result .img-result { min-height: 450px; }

/*======= REAL-ESTATE-WEBSIT-DESIGN ==========*/
.real-estate .real .btn { padding: 10px 15px; margin: 5px 0; }
.real-estate .real .btn.btn-violet { margin-right: 5px; }
.real-estate .custom-website.real { padding: 40px 0; }
.custom-website h2 { margin-bottom: 15px; }

/*======= ECOMMERCE ==========*/
.ecommerce .custom-website.real { padding: 40px 0; }
.ecommerce .platform { padding: 40px 0; }
.interested h5 { font-size: 17px; line-height: 25px; }
.custom-website.real .btn { font-size: 14px; padding: 10px 25px; }
.custom-website.real .text-block h2 { margin-bottom: 15px; }

/* ===== BLOG-PAGE ====== */
.blog-page { padding: 40px 0 10px; }
.blog-page .masonry { column-gap: 25px; }
.grid { margin-bottom: 25px; }
.grid h5 { font-size: 18px; }
.grid .read { font-size: 16px; padding: 2px 5px 0px; }
.blog-page .btn { padding: 10px 25px; }

/* ===== BLOG-DETAILS ====== */
.blog-details .pre { padding: 25px 15px; }
.blog-details strong { margin-bottom: 15px; }
.blog-details p { margin-bottom: 15px; }
.blog-details { padding: 40px 0 0; }
.blog-details .social-icons li a { font-size: 16px; line-height: 35px; width: 35px; height: 35px; }
.blog-details .social-icons li { padding: 0 3px; }
.blog-details .pre p { padding-top: 5px; }
.blog-details .nav-links { margin-top: -35px; }
    .blog-details h2{ font-size: 28px; }
    .blog-details h3{ font-size: 24px; }
/* ===== OUR-WORK ====== */
.our-work-page { padding: 40px 0 0; }
.work { margin: 15px 1.2%; }
.work .work-text { padding: 15px 5px 0 10px; }
.work h5 { font-size: 18px; line-height: 22px; }
.work ul li { padding: 0 15px 0 0; }
.work ul li::after { right: 5px; }

/* ===== WEB-DESING ====== */
.web-desing .custom-website .container-fluid { padding: 0 15px; } 	

/* ===== ABOUT ====== */
.about p { margin-bottom: 15px; }
.about .project ul li { display: block; text-align: center; padding: 0 0 15px !important; line-height: 40px; }
.about .project ul li strong { font-size: 47px; }
.about .project { margin-top: 30px; padding: 30px 0; }

/* ===== CONTACT-US ====== */
.contact-us .max { display: block; }
.contact-us aside { display: block; width: 100% !important; padding: 30px 25px; }
.contact-us .reach-us h2 { margin-bottom: 20px; }
.contact-us .contact-info li p strong { font-size: 20px; margin-bottom: 0px; }
.contact-us .contact-info li { padding: 0 0 20px; }
.contact-us .information h2 { margin-bottom: 15px; }
.contact-us form .form-group { margin: 10px 0 15px; }
.contact-us .information p { margin-bottom: 15px; }
.contact-us .wpcf7-list-item label { font-size: 14px; }
/* 
.contact-us .wpcf7-list-item label::before { padding: 8px 10px; margin-right: 10px; }
.contact-us .wpcf7-list-item label::after { left: 4px; top: -1px; }
*/	
.contact-us .wpcf7-list-item { margin-bottom: 5px; }
.contact-us .contact-info li figure { width: 40px; margin-top: 5px; }
.contact-us .contact-info li p { padding-left: 55px; }
.contact-us form .btn { padding: 10px 25px; margin-top: 15px; }
.contact-page .reach-us { padding: 40px 25px 70px; background-size:cover; }
.contact-page { padding: 45px 0; }
.contact-popup .modal-dialog { margin:0; }	
.masonry .grid figure, .masonry .grid .con, .masonry .grid { display: block;  width: 100%; }
.masonry .grid figure img {  min-height: auto;  object-fit: fill;}
    .blog-details .sidebar { margin: 0; }  
    .blog-details h2 {    font-size: 24px;    line-height: 30px; }
    .blog-details h3, .blog-details h1 { font-size: 22px;  line-height: 30px; }
    
    
    
}

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

h1 { font-size: 45px; letter-spacing: 1px; }
h3 { font-size: 22px; }
header .logo { max-width: 230px; width: 100%; }
header .call.hide { padding: 20px 60px 0 0; }
header.affix .mobile-toggle { top: 25px !important; }
.mobile-toggle { top: 28px !important; }
.banner .item { min-height: 600px; }
.banner h1 { margin-bottom: 10px; }
.banner h3 { margin-bottom: 20px; line-height: 25px; }
.magic-happen h2 { margin-bottom: 15px; }
.magic-happen p { margin-bottom: 20px; }
.why-us ul li { float: none; width: 100%; }
footer .mail { padding: 9px 6px 8px; }
footer .connect .address { float: none; text-align: center; margin-bottom: 15px; }
footer .con-with { float: none; text-align: center; }
footer .con-with p { text-align: center; }
.blog-block h3 { font-size: 21px; }
	
/*======= INNER-BANNER ==========*/
.inner-banner h1 { font-size: 35px; line-height: 40px; }

/*======= CASE-STUDY ==========*/
.case-study .case-bachan::after { bottom: 8px; }
.case-study .case-bachan .case-bg { bottom: 8px; } 
.case-study .challenge-bg::after { bottom: 18px; }
.case-study .challenge-bg .challenge-bg-img { bottom: 20px; }
.case-study .approach-bg::after { bottom: 6px; }
.case-study .result ul li { width: 100%; float: none; padding: 0; }
.case-study .result strong { font-size: 40px; }
.case-study .result h3 { margin-bottom: 15px; }
.testimonial strong { font-size: 18px; line-height: 28px; }
.case-study .result .img-result { min-height: 400px; }

/* ===== BLOG-PAGE ====== */
.blog-page .masonry { columns: 1; }
.grid { max-width: 500px; width: 100%; margin: 0 auto 25px; display: block; }

/* ===== BLOG-DETAILS ====== */
.blog-details h5 { font-size: 18px; margin-bottom: 15px; }
.blog-details h3 { font-size: 22px; line-height: 30px; }
.blog-details .pre p { float: none !important; padding: 0; }
.blog-details .social-icons { margin: 10px 0; }
.blog-details .full { padding: 0 10px 15px; }
.blog-details .nav-links { margin-top: 0; }
.blog-details .nav-previous { float: none; margin-bottom: 10px; }

/* ===== OUR-WORK ====== */
.work { width: 100%; max-width: 400px; float: none; margin: 0 auto 20px; }

/* ===== ABOUT ====== */
.about .project ul li strong { font-size: 42px; }	
	
.blog-details .full { padding: 0 0px 15px; }
}

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

h1 { font-size: 40px; line-height: 40px; }
h2 { font-size: 30px; }
header .call.hide { font-size: 25px; padding: 25px 45px 0 0; }
.adv { width: 100%; float: none; max-width: 350px; margin: 0 auto; padding: 0 0 10px; }
.adv figure { margin-bottom: 10px; width: 130px; }
header .navbar-nav li a { font-size: 16px; padding: 10px 15px; }
header.affix .logo { max-width: 180px; padding: 8px 0; }
header.affix .call.hide { padding: 13px 50px 0 0; }
header.affix .mobile-toggle { top: 17px !important; }
.banner .item { min-height: 550px; }
.banner a { margin: 5px 5px; }
.talk h3 { font-size: 23px; }
.talk { padding: 30px 15px; }
form .form-group { width: 100%; float: none; padding: 0 !important; }
form .form-group:nth-child(2n) label { left: 0; }
form .form-group .form-control { padding: 0 10px 0 20px; }
footer .mail figure { padding-right: 10px; }
.custom-website.market .container h2 { font-size: 30px; }
	
/*======= INNER-BANNER ==========*/
.inner-banner h1 { font-size: 30px; }

/*======= CASE-STUDY ==========*/
.case-study .case-bachan::after { bottom: 6px; }
.case-study .case-bachan .case-bg { bottom: 6px; }
.case-study .challenge-bg::after { bottom: 13px; }
.case-study .challenge-bg .challenge-bg-img { bottom: 15px; }
.case-study .challenge-bg figure { padding: 0 10px; }
.case-study .result strong { font-size: 30px; line-height: 30px; }
.case-study .spread p { display: block; margin: 0; }
.case-study .spread ul { display: block; }
.case-study .result .img-result { min-height: 350px; }

/* ===== OUR-WORK ====== */
.work figure img { min-height: 300px; }

/* ===== ABOUT ====== */
.about .project ul li strong { font-size: 37px; }

/* ===== CONTACT-US ====== */
.contact-us aside { padding: 20px 15px; }
.contact-us .contact-info li p strong { font-size: 18px; }
.contact-us form .form-group:nth-child(2) label { left: 0; }	
.contact-page .reach-us { padding: 30px 15px 50px; }
.contact-page .reach-us p { font-size: 14px;  letter-spacing: 0.5px; }	
	
}

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

header .logo { max-width: 200px; }
	
/*======= CASE-STUDY ==========*/
.case-study .result .img-result { min-height: 300px; }

}

/* -----------------------------------------------------
    Navifgation Responsive Styles
----------------------------------------------------- */
@media screen and (max-width: 991px) {
    header nav#nav.is-active {
        opacity: 1;
        visibility: visible;
    }

    header nav#nav {
        position: fixed;
        top:0;
        left:0;
        margin-top:0;
        z-index:990;
        opacity:0.0;
        visibility: hidden;
        height:100%;
        width:100%;
        background-color: rgb(0,0,0,0.95);
        transition:all 0.35s ease-in-out;
    }
    
    .navbar-nav{
        padding:150px 0;
        text-align:center;
    }
    
    /* Cross icon */
    .mobile-toggle {
        position: absolute;
        top: 31px;
        right:15px;
        z-index:999;
        display: inline-block;
        cursor: pointer;
        transition-property: opacity, filter;
        transition-duration: 0.25s;
        transition-timing-function: linear;
        background-color: transparent;
        border: 0;
        margin: 0;
        overflow: visible;
        padding: 0;
        width: 30px;
        height: 28px;
        float:right;
    }
    
    .mobile-toggle:hover {
        opacity: 0.7;
    }

    .mobile-toggle:focus {
        outline:0;
    }

    .mobile-toggle-box {
        width: 34px;
        height: 28px;
        display: inline-block;
        position: relative;
    }

    .mobile-toggle-inner {
        display: block;
        top: 50%;
        margin-top: -2px;
    }
    
    .mobile-toggle-inner,
    .mobile-toggle-inner::before,
    .mobile-toggle-inner::after {
        width: 28px;
        height: 3px;
        background-color: #e42431;
        border-radius: 4px;
        position: absolute;
        transition-property: transform;
        transition-duration: 0.15s;
        transition-timing-function: ease;
    }
    
    .is-active .mobile-toggle-inner,
    .is-active .mobile-toggle-inner::before,
    .is-active .mobile-toggle-inner::after {
        background-color: #fff;
    }

    .mobile-toggle-inner::before,
    .mobile-toggle-inner::after {
        content: "";
        display: block;
    }
    
    .mobile-toggle-inner::before {
        top: -9px;
    }
    
    .mobile-toggle-inner::after {
        bottom: -9px;
    }

    .mobile-toggle--squeeze .mobile-toggle-inner {
        -webkit-transition-duration: 0.075s;
        -ms-transition-duration: 0.075s;
        transition-duration: 0.075s;
        -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -ms-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    
    .mobile-toggle--squeeze .mobile-toggle-inner::before {
        -webkit-transition: top 0.075s 0.12s ease,
        opacity 0.075s ease;
        -ms-transition: top 0.075s 0.12s ease,
        opacity 0.075s ease;
        transition: top 0.075s 0.12s ease,
        opacity 0.075s ease;
    }
    
    .mobile-toggle--squeeze .mobile-toggle-inner::after {
        -webkit-transition: bottom 0.075s 0.12s ease,
        transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -ms-transition: bottom 0.075s 0.12s ease,
        transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
        transition: bottom 0.075s 0.12s ease,
        transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .mobile-toggle--squeeze.is-active .mobile-toggle-inner {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-transition-delay: 0.12s;
      -ms-transition-delay: 0.12s;
      transition-delay: 0.12s;
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -ms-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    
    .mobile-toggle--squeeze.is-active .mobile-toggle-inner::before {
        top: 0;
        opacity: 0;
        transition: top 0.075s ease, opacity 0.075s 0.12s ease;
    }
    
    .mobile-toggle--squeeze.is-active .mobile-toggle-inner::after {
        bottom: 0;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transition: bottom 0.075s ease,
        transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
        -ms-transition: bottom 0.075s ease,
        transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: bottom 0.075s ease,
        transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

}