/*
Theme Name: H-Code Child
Theme URI: http://wpdemos.themezaa.com/h-code
Author: Themezaa
Author URI: http://www.themezaa.com
Description: Child theme for H-Code theme
License: Themeforest Split Licence
License URI: http://themeforest.net/licenses 
Template: h-code
Version: 1.1
Text Domain: h-code-child
*/

/* General */
@font-face {
  font-family: "Sansation";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/Sansation_Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Amarillo";
  font-style: normal;
  src: url("fonts/Amarillo.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "AmalfiCoast";
  font-style: normal;
  src: url("fonts/Amalfi_Coast.ttf") format("truetype");
  font-display: swap;
}

.navbar .hcode-header-logo > .logo-dark > .logo, .navbar .hcode-header-logo > .logo-light > .logo {
    max-width: 250px;
}
.logoRoboto {
    font-family: 'Roboto';
    font-weight: lighter;
    font-size: 40px;
}
.logoSansation {
    font-family: 'Sansation', sans-serif;
    font-weight: 500;
    font-size: 46px;
}
.caligraphy {
    font-family: 'Amarillo', sans-serif;
    font-weight: lighter;
    font-size: 40px;
}

h2 {
    margin: 10px 0px 20px 0px;
}

h3 {
    margin: 10px 0px 15px 0px;
}

section {
    padding: 70px 0px;
}

form p {
    margin: 0 0 10px;
}

form select {
    text-transform: uppercase;
}

#menu-top-menu .menu-item, #menu-footer-menu .menu-item {
    font-family: 'Sansation', Roboto, sans-serif;
}

.green-blue-gradient {
    background: #3598DB;
    background: -webkit-linear-gradient(to right, #3598DB 0%, #2dcc70 100%);
    background: -moz-linear-gradient(to right, #3598DB 0%, #2dcc70 100%);
    background: linear-gradient(to right, #3598DB 0%, #2dcc70 100%);
}

.green-blue-gradient-txt, .green-blue-gradient-title h1, .green-blue-gradient-title h2, .green-blue-gradient-title h3 {
    background: #3598DB;
    background: -webkit-linear-gradient(to right, #3598DB 0%, #2dcc70 100%);
    background: -moz-linear-gradient(to right, #3598DB 0%, #2dcc70 100%);
    background: linear-gradient(to right, #3598DB 0%, #2dcc70 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.green-purple-gradient {
    background: #9455AD;
    background: -webkit-linear-gradient(to right, #9455AD 0%, #1BBC9B 100%);
    background: -moz-linear-gradient(to right, #9455AD 0%, #1BBC9B 100%);
    background: linear-gradient(to right, #9455AD 0%, #1BBC9B 100%);
}

.green-purple-gradient-txt, .green-purple-gradient-title h1, .green-purple-gradient-title h2, .green-purple-gradient-title h3 {
    background: #9455AD;
    background: -webkit-linear-gradient(to right, #9455AD 0%, #1BBC9B 100%);
    background: -moz-linear-gradient(to right, #9455AD 0%, #1BBC9B 100%);
    background: linear-gradient(to right, #9455AD 0%, #1BBC9B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.grey-blue-gradient {
    background: #34495E;
    background: -webkit-linear-gradient(to right, #34495E 0%, #7E8C8D 41%, #BEC3C7 82%);
    background: -moz-linear-gradient(to right, #34495E 0%, #7E8C8D 41%, #BEC3C7 82%);
    background: linear-gradient(to right, #34495E 0%, #7E8C8D 41%, #BEC3C7 82%);
}

.grey-blue-gradient-txt, .grey-blue-gradient-title h1, .grey-blue-gradient-title h2, .grey-blue-gradient-title h3 {
    background: #34495E;
    background: -webkit-linear-gradient(to right, #34495E 0%, #7E8C8D 41%, #BEC3C7 82%);
    background: -moz-linear-gradient(to right, #34495E 0%, #7E8C8D 41%, #BEC3C7 82%);
    background: linear-gradient(to right, #34495E 0%, #7E8C8D 41%, #BEC3C7 82%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.purple-red-gradient {
    background: #9455AD;
    background: -webkit-linear-gradient(to right, #9455AD 0%, #E84C3D 77%);
    background: -moz-linear-gradient(to right, #9455AD 0%, #E84C3D 77%);
    background: linear-gradient(to right, #9455AD 0%, #E84C3D 77%);
}

.purple-red-gradient-txt, .purple-red-gradient-title h1, .purple-red-gradient-title h2, .purple-red-gradient-title h3, .not-found-title {
    background: #9455AD;
    background: -webkit-linear-gradient(to right, #9455AD 0%, #E84C3D 77%);
    background: -moz-linear-gradient(to right, #9455AD 0%, #E84C3D 77%);
    background: linear-gradient(to right, #9455AD 0%, #E84C3D 77%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.button {
    margin: 5px !important;
	border-radius: 4px !important;
}

.pricing-box.best-price {
    border: 1px solid #34495e;
}

.pricing-box.bg-black {
    background: #34495e;
}

.pricing-box.best-price .pricing-price {
    color: #fff;
}

.costs-first-content {
    padding: 15px !important;
}

.costs-highlight {
    background: #42576c;
    margin: 15px 0px 30px 0px !important;
    padding: 10px !important;
}

.button-scroll-small {
    height: auto;
    width: auto;
    padding: 2px 8px !important;
    background-color: #2d3e50;
    line-height: 18px;
    font-weight: 100;
    font-size: 14px !important;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 2px;
    position: absolute;
    bottom: 30px;
    z-index: 500;
}

.button-scroll-small i {
    color: #ffffff;
    margin: 0 auto;
}

.button-scroll-small:hover {
    opacity: 0.5;
}

.highlight-button {
    border: 2px solid #252525;
	color: #252525;
}

.highlight-button:hover {
    background-color: #252525;
    border: 2px solid #252525;
	color: #ffffff;
}

.highlight-button-dark {
	background-color: #252525;
    border: 2px solid #252525;
	color: #ffffff;
}

.highlight-button-dark:hover {
    background-color: transparent;
    border: 2px solid #252525;
	color: #252525;
}

.caligraphy.side-subtitle, .caligraphy.side-subtitle > div {
    color: #bec3c7;
    font-size: 14px;
    position: relative;
    top: 15px;
}

.signature {
    font-size: 24px;
    color: #bec3c7;
}

.image-circled-block {
    display: inherit !important;
    width: 250px !important;
    height: 250px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0 auto;
    border: 1px solid #bec3c7;
}

.image-circled-block img {
    width: 200px;
    height: 100%;
    margin-top: 18px;
}

/* Header */
.navbar.nav-black .navbar-nav > li > a, .navbar.nav-black > .nav-header-container .search-cart-header .top-cart > a, .navbar.nav-black > .nav-header-container .search-cart-header #top-search > a {
    color: #34495e;
}

.breadcrumb {
    text-align: right;
}

.page-title-section .container .row div:nth-child(1) {
    /*width: auto;*/
}

.page-title-section .container .row div:nth-child(2) {
    float: right;
}

.page-title h1 {
    letter-spacing: 2px;
    font-weight: 400;
    text-transform: initial;
}

.breadcrumb ul li {
    letter-spacing: 2px;
    text-transform: initial;
}

/* Menu */
@media (max-width: 991px) {
	.navbar > .nav-header-container .accordion-menu .navbar-collapse {
		max-height: 640px;
		height: 640px;
	}
}

/* Home */
#slider {
    background: linear-gradient(140deg, #44bc9b, #297fb8, #9a59b5);
    background-size: 400% 400%;
    
    -webkit-animation: movingBackground 15s ease infinite;
    -moz-animation: movingBackground 15s ease infinite;
    -o-animation: movingBackground 15s ease infinite;
    animation: movingBackground 15s ease infinite;
}
@-webkit-keyframes movingBackground {
    0%{background-position:0% 17%}
    50%{background-position:100% 84%}
    100%{background-position:0% 17%}
}
@-moz-keyframes movingBackground {
    0%{background-position:0% 17%}
    50%{background-position:100% 84%}
    100%{background-position:0% 17%}
}
@-o-keyframes movingBackground {
    0%{background-position:0% 17%}
    50%{background-position:100% 84%}
    100%{background-position:0% 17%}
}
@keyframes movingBackground {
    0%{background-position:0% 17%}
    50%{background-position:100% 84%}
    100%{background-position:0% 17%}
}
#slider div {
    color: #fff;
    font-size: 24px;
}
#slider #typingCursor {
    padding: 15px;
    font-size: 31px;
    font-weight: lighter;
    line-height: 1.4;
}
#slider #typingCursor a {
    color: #fff;
    border-bottom: 1px solid #fff;
}
#slider #typingCursor a:hover {
    text-decoration: none;
}
#slider #typingCursor span {
    border-bottom: 1px solid #fff;
}
#slider #typingIdentity {
    padding: 30px;
    font-size: 28px;
    font-weight: 300;
    line-height: 1.4;
}
#slider #typingIdentity span {
    border-bottom: 1px solid #fff;
}
.skill {
    margin: 0px 10px 0px 10px;
	display: inline-flex;
}
.skill::after {
    content: "/";
    margin: 0px 10px 0px 30px;
}
.skill:last-child::after {
    display: none;
}
#concept {
    background-position: 4% 100% !important;
}
#reviews {
    padding: 0px;
}

/* About */
#about-tabs-block {
    background-position: 15% 100% !important;
}
#about-header-block .about-year>span, #about-header-block .about-year>div {
    background: #3598DB;
    background: -webkit-linear-gradient(to right, #3598DB 0%, #2dcc70 100%);
    background: -moz-linear-gradient(to right, #3598DB 0%, #2dcc70 100%);
    background: linear-gradient(to right, #3598DB 0%, #2dcc70 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#about-header-block .about-year>span, #about-header-block .about-year>div {
    background: #3598DB;
    background: -webkit-linear-gradient(to right, #3598DB 0%, #2dcc70 100%);
    background: -moz-linear-gradient(to right, #3598DB 0%, #2dcc70 100%);
    background: linear-gradient(to right, #3598DB 0%, #2dcc70 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#about-header-block .about-year span {
    letter-spacing: 0px;
}

/* Prestations */

.info_association p, .info_association p>i {
    color: #fff;
}

.info_association p {
    padding: 5px;
    color: #fff;
}

/* Partenaires */
.partner-small {
	width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-small img {
    width: auto;
    max-height: 60px;
    align-items: center;
    vertical-align: middle;
}

.partner-big {
	width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-big img {
    width: auto;
    max-height: 100px;
    align-items: center;
    vertical-align: middle;
}

.partner-small .client-text, .partner-big .client-text {
	padding: 25px;
	height: 100%;
}


/* Contact */

#contact-details .btn-extra-large {
    padding: 5px 0px !important;
}
#acceptance-checkbox {
    padding: 5px;
}
#acceptance-checkbox .wpcf7-form-control .wpcf7-list-item {
    margin: 0 auto;
}
.wpcf7-form-control .wpcf7-list-item {
    margin: 0 10px 0 10px;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
    float: left;
    margin: 0 auto;
}
.wpcf7 .ajax-loader {
    top: 10px;
    right: 10px;
}

/* Footer */
.footer-top i.footer-wrapper-small-icon.black-text {
    font-weight: 600;
}
.footer-top .fa-whatsapp {
    font-weight: 100 !important;
}
.hcode-footer-middle .trustpilot-widget, .hcode-footer-middle .trustpilot-widget iframe {
    float: left;
    width: 75%;
}

/* 404 */
.not-found-title {
	font-size: 52px;
}

/* Responsive */
@media only screen and (max-width: 1199px) {
    #concept {
        background-image: unset !important;
    }
	#about-tabs-block {
        background-image: unset !important;
    }
}

@media only screen and (max-width: 980px) {
	.hcode-footer-middle .trustpilot-widget, .hcode-footer-middle .trustpilot-widget iframe {
		width: 100%;
		margin: 0px 0px 10px 0px;
	}
	.xs-img-full {
		width: auto !important;
	}
}
	
@media only screen and (max-width: 480px) {
	.section-title, h3.section-title {
		font-size: 22px !important;
	}
	.skill {
    	margin: 0px 0px 0px 0px;
	}
	.skill::after {
		margin: 0px 10px 0px 10px;
	}
}