@font-face {
	font-family: "dosislight";
	src: url('../fonts/dosis-light-webfont.woff2') format('woff2'),
		 url('../fonts/dosis-light-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "dosisregular";
	src: url('../fonts/dosis-regular-webfont.woff2') format('woff2'),
		 url('../fonts/dosis-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "open_sanslight";
	src: url('../fonts/opensans-light-webfont.woff2') format('woff2'),
		 url('../fonts/opensans-light-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "open_sansregular";
	src: url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
		 url('../fonts/opensans-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* start reset style */
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	outline: none;
}
html {
	font-size: 15px;
}
body{
	margin: 0;
	position: relative;
	color: #777;
	font-family: "open_sanslight", "sans-serif";
	line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
a{
	color: inherit;
	text-decoration: none;
}
a:hover, a:active{
	text-decoration: none;
}
ul{
	list-style: none;
}
img {
	max-width: 100%;
}
button {
	outline: none;
	border: none;
	cursor: pointer;
}
/* end reset style */ 

.container {
    max-width: 1200px;
    padding: 0 15px;
    margin: 0 auto;
    
}

.container-fluid {
    padding: 0 15px;
    overflow: hidden;
}

.row {
    margin: 0 -15px;
}

.row::after {
    content: "";
    display: block;
    clear: both;
}

.col {
    position: relative;
    float: left;
    padding: 0 15px;
}

.col-1 {
    width: 8.333333333%;

}

.col-2 {
    width: 16.666666667%;
    
}

.col-3 {
    width: 25%;
    
}

.col-4 {
    width: 33.333333333%;
    
}

.col-5 {
    width: 41.666666667%;
    
}

.col-6 {
    width: 50%;
    
}

.col-7 {
    width: 58.777777777%;
    
}

.col-8 {
    width: 66.666666667%;
    
}

.col-9 {
    width: 75%;
    
}

.col-10 {
    width: 83.333333333%;
    
}

.col-11 {
    width: 91.666666667%;
    
}

.col-12 {
    width: 100%;
    
}

@media (max-width: 1200px) {
    .col-lg-1 {
        width: 8.333333333%;
    
    }
    
    .col-lg-2 {
        width: 16.666666667%;
        
    }
    
    .col-lg-3 {
        width: 25%;
        
    }
    
    .col-lg-4 {
        width: 33.333333333%;
        
    }
    
    .col-lg-5 {
        width: 41.666666667%;
        
    }
    
    .col-lg-6 {
        width: 50%;
        
    }
    
    .col-lg-7 {
        width: 58.777777777%;
        
    }
    
    .col-lg-8 {
        width: 66.666666667%;
        
    }
    
    .col-lg-9 {
        width: 75%;
        
    }
    
    .col-lg-10 {
        width: 83.333333333%;
        
    }
    
    .col-lg-11 {
        width: 91.666666667%;
        
    }
    
    .col-lg-12 {
        width: 100%;
        
    }

}

@media (max-width: 991px) {
    .col-md-1 {
        width: 8.333333333%;
    
    }
    
    .col-md-2 {
        width: 16.666666667%;
        
    }
    
    .col-md-3 {
        width: 25%;
        
    }
    
    .col-md-4 {
        width: 33.333333333%;
        
    }
    
    .col-md-5 {
        width: 41.666666667%;
        
    }
    
    .col-md-6 {
        width: 50%;
        
    }
    
    .col-md-7 {
        width: 58.777777777%;
        
    }
    
    .col-md-8 {
        width: 66.666666667%;
        
    }
    
    .col-md-9 {
        width: 75%;
        
    }
    
    .col-md-10 {
        width: 83.333333333%;
        
    }
    
    .col-md-11 {
        width: 91.666666667%;
        
    }
    
    .col-md-12 {
        width: 100%;
        
    }
    /* ------------------ */
    .col-md-null-3 {
        margin-left: 25%;
    }

}

@media (max-width: 767px) {
    .col-sm-1 {
        width: 8.333333333%;
    
    }
    
    .col-sm-2 {
        width: 16.666666667%;
        
    }
    
    .col-sm-3 {
        width: 25%;
        
    }
    
    .col-sm-4 {
        width: 33.333333333%;
        
    }
    
    .col-sm-5 {
        width: 41.666666667%;
        
    }
    
    .col-sm-6 {
        width: 50%;
        
    }
    
    .col-sm-7 {
        width: 58.777777777%;
        
    }
    
    .col-sm-8 {
        width: 66.666666667%;
        
    }
    
    .col-sm-9 {
        width: 75%;
        
    }
    
    .col-sm-10 {
        width: 83.333333333%;
        
    }
    
    .col-sm-11 {
        width: 91.666666667%;
        
    }
    
    .col-sm-12 {
        width: 100%;
        
    }
    /* ------------------ */
    .col-sm-null-3 {
        margin-left: 25%;
    }

}

@media (max-width: 576px) {
    .col-xs-1 {
        width: 8.333333333%;
    
    }
    
    .col-xs-2 {
        width: 16.666666667%;
        
    }
    
    .col-xs-3 {
        width: 25%;
        
    }
    
    .col-xs-4 {
        width: 33.333333333%;
        
    }
    
    .col-xs-5 {
        width: 41.666666667%;
        
    }
    
    .col-xs-6 {
        width: 50%;
        
    }
    
    .col-xs-7 {
        width: 58.777777777%;
        
    }
    
    .col-xs-8 {
        width: 66.666666667%;
        
    }
    
    .col-xs-9 {
        width: 75%;
        
    }
    
    .col-xs-10 {
        width: 83.333333333%;
        
    }
    
    .col-xs-11 {
        width: 91.666666667%;
        
    }
    
    .col-xs-12 {
        width: 100%;
        
    }
    /* ------------------ */
    .col-xs-null-0 {
        margin-left: 0;
    }

}
/* default style start */

blockquote p {
    margin-bottom: 32px;
    font-size: 24px;
    line-height: 38px;
    font-family: "open_sanslight", "sans-serif";
}

.title {
    font-family: "dosisregular";
    color: #111111;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 9px;
}

.title-white {
    color: #ffffff;

}

p {
    font-size: 15px;
    font-weight: 300;
    line-height: 26px;
}

.text-center {
    text-align: center;
}

.dosis-regular {
    font-family: "dosisregular", "sans-serif";

}

.bg-black {
    background-color: #111111;
}

.btn {
    display: inline-block;
    border-radius: 2px;
    font-family: "open_sansregular", "sans-serif";
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;    
}

.btn.btn-default {
    background-color: #cfcfcf;
    color: #111111;
    padding: 12px 40px;
    letter-spacing: 2.8px;
    text-transform: uppercase;

}

.btn.btn-large {
    padding: 13px 40px;

}

.btn.btn-small {
    padding: 8px 15px;
    letter-spacing: 2.2px; 

} 


.btn.btn-grey {
    background-color: #cfcfcf;
    font-size: 11px;

}

.btn.btn-black {
    background-color: #111111;
    color: #ffffff;

}

.default-section {
    padding: 140px 0;
}

@media (max-width: 991px) {
    .default-section {
        padding: 80px 0;
    }
}

.text-bottom {
    display: block;
    font-family: "open_sansregular", "sans-serif";
    font-size: 11px;
    font-weight: 400;
    line-height: 26px;
    padding-top: 8px;
}

@media (max-width: 576px) {
    .text-bottom {      
        display: block;
        margin-top: 10px;
    }
    
}


/* default style end */

/* main section start */
.main-bg {
    background: url(../img/bg.png) no-repeat center / cover;
    width: 99vw;
    height: 100vh;
    background-position: 0 -100px;
    position: relative;
    text-align: center;
    overflow: hidden;    
}

@media (max-width: 1200px) {
    .main-bg {
        background-position: 0 0;
    }
}

.header {
    height: 75px;
    padding: 33px 0;
	
}

.logo {
    display: inline-block;
    margin-left: 33px 0;
    float: left;

}

.nav .nav-list {
    float: right;
}



.nav .nav-list li {
    display: inline;
    opacity: 0.75;
    color: #ffffff;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3.3px;
}

.nav .nav-list li + li {
    margin-left: 30px;
}

.nav .nav-list li a:hover {
    color: #444444;
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 370px;
}

.content .content-text {
    margin-top: 300px;
   
}

.content .content-title {
    color: #fefefe;
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 51.01px;
    margin-bottom: 100px;

}

@media (max-width: 1200px) {
    .content .content-title {
        letter-spacing: 20px;
    }
    

}

@media (max-width: 991px) {
    .content .content-title {
        letter-spacing: 20px;
    }

}

@media (max-width: 767px) {
    .content .content-title {
        letter-spacing: 20px;
    }

}

@media (max-width: 576px) {
    .content .content-title {
        letter-spacing: 5px;
    }

}

.content .content-subtitle {
    display: block;
    margin: 100px 181px;
    font-family: "open_sanslight", "sans-serif";
    color: #fefefe;
    font-size: 19px;
    font-weight: 300;
    opacity: 0.68;
}

@media (max-width: 1200px) {
    .content .content-subtitle {
        margin: 100px 10px;
    }
    

}

@media (max-width: 991px) {
    .content .content-subtitle {
        margin: 100px 10px;
    }

}

@media (max-width: 767px) {
    .content .content-subtitle {
        margin: 100px 10px;
    }

}

.content-btn {
    display: inline-block;
    
}

@media (max-width: 576px) {

.main-bg .header .menu-btn {
    display: block;
    height: 40px;
    width: 50px;
    float: right;    

}

.main-bg .header .menu-btn .bar {
    display: block;
    height: 1px;
    width: 30px;
    margin: 2px 2px;
    background: #f8f8f8;
    float: right;

}

.main-bg .header .menu-btn .bar + .bar {
    margin-top: 10px;
}

.header .nav {
    display: block;
    width: 100%;
    float: right;
    padding: 0 10px;
    


}
.nav .nav-list {
    float: right;
    width: 50px;
    margin-top: 10px;
    max-height: 0;
    transition: max-height 0.3s ease-out;   
    
}
.nav .nav-list.active {
    max-height: 300px;

}


.nav .nav-list li {
    float: right;
    display: block;
    padding-bottom: 20px;
    
}

.nav .nav-list li a:hover {
    color: #282828;
} 



}

/* main section end */

/* about studio start */

.about-studio {
    border: 1px solid rgba(19, 19, 19, 0.08);  

}

.text-lg {
    font-size: 24px;
    font-weight: 300;
    line-height: 38px;
    margin-bottom: 32px;
}

.author {
    font-size: 11px;
    font-weight: 400;
    line-height: 38px;
    text-transform: uppercase;
    letter-spacing: 2.2px;
}

.about-studio .title {
    margin-bottom: 75px;
}

.about-studio .row + .row {
    margin-top: 108px;

}

@media screen and (max-width: 576px){
    .about-studio .row + .row {
        margin-top: 35px;
    
    }

}

.about-studio .team-item-photo {
    height: 450px;
    position: relative;
    line-height: 25px;
    perspective: 2000px;
}

.about-studio .team-item-info {
    padding-top: 30px;
    line-height: 25px;

}

.about-studio .container-for-flip {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    transition: all 0.8s ease;
    height: 100%;

}

.about-studio .container-for-flip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-studio .team-item-photo:hover .team-item-front {
    transform: rotateY(180deg);

}

.about-studio .team-item-skills {
    padding: 40px;
    background-color: #131313;
    height: 450px;
    transform: rotateY(180deg);
}

@media screen and (max-width:991px) {
    .about-studio .team-item-skills {
        padding: 20px;
    }
    .about-studio .row p {
        margin-bottom: 15px;
    }

}

.about-studio .team-item-photo:hover .team-item-skills {
    transform: rotateY(360deg);
}


.about-studio .team-item-name {
    display: block;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 6px;
    
}

.about-studio .team-item-role {
    display: block;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 4.8px;

}

.team-item-skills .title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 5.4px;
    margin-bottom: 20px;


}

.label {
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    margin-bottom: 30px;
    color: #ffffff;
}


.skill-wrapper > span {
    font-family: "open_sansregular", "sans-serif";
    color: #ffffff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 2.2px;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.15);
    position: relative;
    margin-bottom: 10px;
}

.progress {
    height: 10px;
    background: rgba(255, 255, 255, 0.75);
    position: absolute;
    top: 0;
    left: 0;

}

@media screen and (max-width: 767px) {
    .about-studio .team-item {
        margin-bottom: 25px;
    }

}


/* about studio end */

/* services start */



.services-tabs {
    margin-top: 120px;
}

@media screen and (max-width: 576px) {
    .services-tabs {
        margin-top: 60px;
    }

}


.services-tabs ul {
    padding-bottom: 78px;

}

.services-tabs ul::after {
    content: "";
    display: block;
    clear: both;
}

.services-tabs ul li {
    float: left;
    width: 20%;
    text-align: center;
    
}

.services-tabs ul a span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 5.6px;
    color: #888888;
}

@media screen and (max-width: 991px) {
    .services-tabs ul a span {
        font-size: 12px;
    }

}

@media screen and (max-width: 576px) {
    .services-tabs ul a span {
        font-size: 12px;
        letter-spacing: 2px;
    }

}

.services-tabs ul a span:last-child {
    font-family: "dosislight", "sans-serif";
    margin-top: 35px;

}

.services-tabs .ui-tabs-active a span {
    color: #111111;
}

.services-tabs ul a .services-tabs-icon {
    font-size: 48px;
}

@media screen and (max-width: 991px) {
    .services-tabs ul a .services-tabs-icon {
        font-size: 36px;
    }

}

@media screen and (max-width: 991px) {
    .services p {
        margin-bottom: 15px;
    }

}

/* services end */


/* lets talk start */

.lets-talk {
    height: 443px;
}

@media screen and (max-width: 576px) {
    .lets-talk {
        height: 380px;
    }

}


.lets-talk .lets-talk-wrapper {
    margin-top: 140px;

}
@media screen and (max-width: 1200px) {
    .lets-talk .lets-talk-wrapper {
        margin-top: 80px;    
    }

}


.lets-talk .title {
    letter-spacing: 2.8px;
    margin-bottom: 27px;

}

.lets-talk .btn {
    margin-top: 40px;
}

.lets-talk-img {
    position: absolute;
    top: -32px;
    left: 0;
    right: -34px;

}

/* lets talk end */

/* portfolio start */

.portfolio {
    margin-top: 140px;

}

@media (max-width: 991px) {
    .portfolio {
        margin-top: 80px;
    
    }

}


.title-description {
    margin: 80px 350px;
    padding: 0 200px;
}

@media (max-width: 1200px) {
    .title-description {
        margin: 40px 10px 0;
        padding: 0 0px;
    }

}


.portfolio-tabs ul {
    padding: 50px 200px;
}

@media (max-width: 991px) {
    .portfolio-tabs ul {
        padding: 50px 100px;
    }

}


.portfolio-tabs ul li {
    float: left;
    width: 25%;
    text-align: center;
}

.portfolio-tabs ul li a span {
    display: block;
    color: #888888;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 5.2px;

}
.portfolio-tabs .ui-tabs-active a span {
    color: #111111;
}

.portfolio-tabs .row .col-4 a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
} 

@media screen and (max-width: 576px) {
    .portfolio-tabs ul li a span {
        letter-spacing: 2px;
    }
    
} 


.portfolio-tabs .row .col-4 a:hover img {
    filter: none;
}    
/* portfolio end */

/* like-our-works start */
.like-our-works {
    height: 220px;
}

.like-our-works .container-inner {
    padding: 70px 0;
}

.like-our-works .title {
    margin-bottom: 24px;
}

/* like-our-works end */


/* why-choose-us start */


.choose-container {
    margin-top: 90px;
}

.choose-icon {
    display: block;
    color: #111111;
    font-size: 48px;
    margin-bottom: 35px;


}

.choose-title {
    display: block;
    color: #111111;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 5.6px;
    margin-bottom: 35px;
}

/* why-choose-us end */

/* what people say start */


.what-people-say .owl-carousel .owl-item img {
    width: 32px;
    height: 32px;
    margin: 0 auto;
}

.what-people-say .owl-carousel {
    position: relative;
    
}

/* owl nav start */

.what-people-say .owl-nav {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;    
}
.what-people-say .owl-nav .owl-prev,
.what-people-say .owl-nav .owl-next {
    width: 70px;
    height: 70px;
    background-color: #ffffff !important;
    position: absolute;
    top: 0;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 2px;
}

.what-people-say .owl-nav .owl-prev span,
.what-people-say .owl-nav .owl-next span {
    display: block;
    transform: rotate(-45deg);
}


.what-people-say .owl-nav .owl-prev {
    left: -35px;
    text-align: right;
}

.what-people-say .owl-nav .owl-prev span {
    padding-right: 10px;
}

.what-people-say .owl-nav .owl-next {
    right: -35px;
    text-align: left;
}
.what-people-say .owl-nav .owl-next span {
    padding-left: 10px;
}

@media screen and (max-width: 576px) {
    .what-people-say .owl-nav .owl-next {
        right: -45px;
    }    

    .what-people-say .owl-nav .owl-prev {
        left: -45px;
    }        

}


/* owl nav end  */

/* owl nav dots start */

.what-people-say .owl-dots {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 30px;
    left: 0;
  
}

.what-people-say .owl-dot {
    width: 7px;
    height: 7px;
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
    opacity: 0.8;
    border-radius: 50%;
    margin-right: 6px;
}

.what-people-say .owl-dot:last-child {
    margin-right: 0;
}

.what-people-say .owl-dot.active {
    border: 1px solid #ffffff;
    background-color: transparent !important;
    opacity: 0.8;
}

/* owl nav dots end */
.what-people-say .owl-carousel .item {
    height: 483px;
    position: relative;
    
}

@media screen and (max-width: 576px) {
    .what-people-say .owl-carousel .item {
        height: 430px;
                
    }

}

.what-people-say .owl-carousel .item-inner {
    width: 100%;
    padding: 0 50px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.carousel-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 300;
    line-height: 26px;
    text-transform: uppercase;
    letter-spacing: 5.4px;
    margin-top: 24px;
    margin-bottom: 42px;
}
.item-inner .sub-title {
    color: #ffffff;
    font-family: "open_sanslight", "sans-serif";
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    max-width: 765px;
    margin: 0 auto;
    opacity: 0.75;
}

.item-inner .author {
    margin-top: 25px;
}

/* what people say end */

/* latest news start */
.latest-news .title::after {
    content: "";
    display: block;
    clear: both;
}

.latest-news .row {
    margin-top: 80px;
}

.latest-news .news-img {
    height: 200px;
    overflow: hidden;
}


.latest-news .news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}

.latest-news .news-img a:hover img {
    filter: none;    
}

.latest-news .title span {
    float: left;   

}

.latest-news .title a {
    float: right;
    color: #999999;
    font-family: "dosisregular", "sans-serif";
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 4.4px;
}

.news-info {
    padding-top: 30px;

}

.news-info .news-title {
    color: #777777;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 16px;
    height: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

.news-info .news-author {
    color: #999999;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 4.4px;
    margin-bottom: 25px;
}

.news-info .news-description {
    color: #777777;
    font-family: "open_sanslight", "sans-serif";
    font-size: 15px;
    font-weight: 300;
    line-height: 26px;
    margin-bottom: 25px;
    height: 78px;
    overflow: hidden;

}

@media screen and (max-width: 991px) {
    .latest-news {
        margin-bottom: -35px;
    }
    .latest-news .news-item {
        margin-bottom: 35px;
    }

}
/* latest news end */

/* stay informed start */

.stay-informed {
    height: 265px;
    padding: 80px 0;
    background-color: #f8f8f8;
}

.stay-informed-form {
    margin-top: 20px;
}

.stay-informed input {
    width: 293px;
    height: 36px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    padding: 0 14px;
    font-family: "open_sansregular", "sans-serif";    
    letter-spacing: 2.4px;    
}

.stay-informed input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #777777;
    text-transform: uppercase;
}
.stay-informed input::-moz-placeholder { /* Firefox 19+ */
    color: #777777;
    text-transform: uppercase;
}
.stay-informed input:-ms-input-placeholder { /* IE 10+ */
    color: #777777;
    text-transform: uppercase;
}
.stay-informed input:-moz-placeholder { /* Firefox 18- */
    color: #777777;
    text-transform: uppercase;
} 

.stay-informed form {
    -webkit-appearance: none;
}

.stay-informed button {
    width: 128px;
    height: 36px;
    padding: 0 20px !important; 
    
}

/* stay informed end */

/* contacts start */
.contacts-inner {
    max-width: 750px;
    margin: 0 auto;
    margin-top: 140px;
    margin-bottom: 150px;
}

@media screen and (max-width: 767px) {
    .contacts-inner {
    margin-top: 80px;
    }

}

@media screen and (max-width: 991px) {
    .contacts-inner {
    margin-top: 80px;
    }

}

.contacts .title {
    margin-bottom: 100px;
}

.contacts .icon {
    float: left;
    width: 26px;
    height: 26px;
    transform: rotate(45deg);
    border-radius: 2px;
    background: #111111;
    margin-right: 18px;
    text-align: center;
    line-height: 26px;
    
}

@media screen and (max-width: 576px) {
    .contacts .icon {
    margin-bottom: 40px;    
    }

}

.contacts .icon .fa {
    color: #ffffff;
    font-size: 14px;
    line-height: 20px;       
}

.contacts .icon .fa-phone {     
    transform: rotate(-45deg);            
}

.contacts .icon .fa-envelope-o {
    transform: rotate(-45deg);    
}

.contacts .icon .fa-map-marker {
    transform: rotate(-45deg);
}

.contacts .info {
    float: left;
}
.contacts .info .info-title {
    display: block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.contacts .info .phone {
    font-family: "open_sanslight", "sans-serif";
    font-size: 15px;
    font-weight: 300;
}

.contacts .form {
    margin-top: 80px;

}

@media screen and (max-width: 576px) {
    .contacts .form {
        margin-top: 40px;
    
    }

}

.contacts .form .left,
.contacts .form .right {
    float: left; 
    width: 50%;
    padding: 0 5px;
}

@media screen and (max-width: 576px) {
    .contacts .form .left,
    .contacts .form .right {
        width: 100%; 
    }

}

.contacts .form .left input,
.contacts .form .right textarea {
    display: block;
    width: 100%;
    height: 36px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    margin-bottom: 10px;
    padding: 0 14px;
    font-family: "open_sansregular", "sans-serif";    
    letter-spacing: 2.4px;
}

.contacts .form .right textarea {
    height: 82px;
    padding: 9px 14px;
    resize: none;
}

.contacts .form .left input::-webkit-input-placeholder,
.contacts .form .right textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #777777;
    text-transform: uppercase;
}
.contacts .form .left input::-moz-placeholder,
.contacts .form .right textarea::-moz-placeholder { /* Firefox 19+ */
    color: #777777;
    text-transform: uppercase;
}
.contacts .form .left input:-ms-input-placeholder,
.contacts .form .right textarea:-ms-input-placeholder { /* IE 10+ */
    color: #777777;
    text-transform: uppercase;
}
.contacts .form .left input:-moz-placeholder,
.contacts .form .right textarea:-moz-placeholder { /* Firefox 18- */
    color: #777777;
    text-transform: uppercase;
} 

.contacts .form .right button {
    float: right;
    width: 182px;
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
    -webkit-appearance: none;    
}

.contacts .row .form .right-wrapper {
    display: none;
}

@media screen and (max-width: 576px) {
    .contacts .row .form .left span {
        display: none; 
    }

    .contacts .row .form .right-wrapper {
        width: 50%;
        display: inline-block;
        padding-top: 0px;
        margin-top: 0px;
        
    }

    
    .contacts .form .right button {
        width: 50%;
    }

   
}

/* contacts end */

/* map start */

.map-container {
    position:relative;
    width: 100%;
    height: 410px;    
    
}

@media screen and (max-width: 576px) {
    .map-container {
        height: 350px; 
    }

}
.map-container .map .map-front {
    width: 100%;
    height: 100%;
    background-color: #1d1d1d;
    padding: 167px 0;
    position: absolute;
    left:0;
    top: 0;
    opacity: 1;
    transition: ease 1s;    
} 

@media screen and (max-width: 576px) {
    .map-container  {
        height: 350px; 
    }
    .map-container .map .map-responsive iframe {
        height: 350px;
    }

    .map-container .map .map-front {
        padding: 127px 0;
    }  

}

.map-container .map .map-front .icon {
    display: inline-block;    
    width: 26px;
    height: 26px;
    transform: rotate(45deg);
    border-radius: 2px;
    background: #ffffff;
    margin-right: 18px;
    text-align: center;
    line-height: 26px;
    margin-bottom: 28px;

}



.map-container .map .map-front .icon .fa-map-marker {
    color: #1d1d1d;
    font-size: 14px;
    line-height: 20px;
    transform: rotate(-45deg); 
}



.map-container .map .map-front:hover{
    opacity: 0;                
}



/* map end */


/* footer start */
.footer {
    height: 430px;
    background-color: #f8f8f8;
    padding-top: 140px;    
}

@media screen and (max-width: 767px) {
    .footer {
        padding-top: 80px;
        height: 430px; 
    }

}

@media screen and (max-width: 991px) {
    .footer {
        padding-top: 80px; 
    }

}

@media screen and (max-width: 576px) {
    .footer {
        height: 330px; 
    }

}


.footer .container .title {
    font-size: 12px;
    
}

.footer .footer-logo {
    margin-bottom: 24px;
}



.footer .social-list .footer-icon:last-child {
    margin-bottom: 110px;
}

@media screen and (max-width: 767px) {
    .footer .social-list .footer-icon:last-child {
        margin-bottom: 50px; 
    }

}

@media screen and (max-width: 991px) {
    .footer .social-list .footer-icon:last-child {
        margin-bottom: 50px;
    }

}

.footer .social-list .footer-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    transform: rotate(45deg);
    border: 2px solid rgba(0, 0, 0, 0.931);
    border-radius: 5px;
    background: #f8f8f8;
    color: #282828;
    margin-right: 18px;
    text-align: center;
    line-height: 22px;
}

.footer .social-list .footer-icon .fa {
    transform: rotate(-45deg);

}
/* footer end */