@media only screen and (max-width: 1400px) {
.masonry {max-width: 840px; margin: 0 auto;}
}
@media only screen and (max-width: 1024px) { .main-navigation {width: 90%;}
.main-navigation li {margin: 0 20px;}
.ecrivez-nous {display: none;} .fixed-title {left: 92%;} #home_projets .projet {width: 100%;height: 370px; min-height: calc(100vw - 80px); float: none;margin: 0 auto;} {} #home_clients .home_clients_liste {max-width: 100%; width: 100%; float: none;font-size: 30px;font-weight: 600;}
#home_clients .button {display: none;}
#home_clients .mobile {text-align: center;}
#home_clients .button.mobile {display: inline-block; text-decoration: none;border: 1px solid #ff7d5a;background: none;cursor: pointer;padding: 8px 20px;margin: 35px 0 0 0;outline: none;position: relative;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;border-radius: 25px;overflow: hidden;color: #ff7d5a;z-index: 1;}
#home_clients .home_clients_logos {max-width: 100%;float: none;}
#home_clients .home_clients_logos .activite {font-size: 26px;}
.home_clients_logos img {margin: 0 auto; display: block;}
.home_clients_points .point {margin: 0 8px}
.home_clients_points {text-align: center;} #social .fixed-title {left: 92%;}
#reseaux h3 {margin: 25px auto 0px; max-width: 210px;} .ecrivez-nous {margin-top: 0px;}
.ecrivez-nous a {color: #000;text-decoration: none;font-size: 49px;}
.ecrivez-nous .fixed-title {top: 20px;left: 92%;} .page-template-page-projets #main .inner {padding: 0 40px;}
.page-template-page-projets .projet {width: 100%;float: left;min-height: calc(100vw - 80px);} .single-projet .bloc_projets-similaires {padding: 0 5%;} .page-template-page-actualites .alm-masonry {margin: 0;}
.masonry {margin: 0 auto; margin-bottom: -85px; max-width: 830px;}
.masonry .actu h3 {margin: 0 0 7px;} .page-template-page-agence .bandeau .btn-spotify {position: relative; margin: 40px auto 20px; top: auto; bottom: -135px; right: auto;}
.page-template-page-agence .bandeau {padding: 0 0 260px;}
.page-template-page-agence .nom {font-size: 20px;} .page-template-page-clients .site-main .inner {padding-bottom: 0px;}
.page-template-page-clients .acc3 {width: 46%;} .contact_bloc {font-size: 26px; max-width: 480px; margin-bottom: 30px;}
.contact_bloc a.twitter, .contact_bloc a.facebook, .contact_bloc a.linkedin, .contact_bloc a.youtube {font-size: 19px;margin: 0 20px 0 0;}
.contact_bloc .bloc-images img {float: none!important;width: 100%!important;height: auto!important;}
.single-projet .bandeau .share_single {top: auto; right: auto;  margin: 15px auto 0; position: relative;}
#spotify .links br {display: none;}
#spotify .links {clear: both;  padding-top: 30px; max-width: 100%; }
.spotify_header .site-title a {background: url(//4aout.fr/wp-content/themes/quatreaout/fond_logo.png) center no-repeat; background-size: 70px; height: 86px; left: 50%; margin-left: -35px; width: 70px; z-index: 10; top: 8px;}
#logo_spotify {margin-top: 35px; zoom: 0.8;}
#footer .btn-spotify {position: absolute; margin: 0;}
}
@media only screen and (max-width: 940px) {
.masonry .actu {width: 360px;}
.masonry {max-width: 750px;}
}
@media only screen and (max-width: 800px) {
.fixed-outer {display:none;}
.bandeau h1 {padding: 20px 0;font-size: 32px;}
#content {padding-top: 76px;}
footer.site-footer h2 { margin: 0 0 20px 0;} nav.main-navigation {width: 50px;float: right;}
.menu-toggle,
.main-navigation.toggled ul {width: 100%}
.main-navigation .menu-menu-principal-container {width: 100vw;
height: 100vh;
position: fixed;
top: 0;
background-color: #fff2da;
text-align: center;
left: 0;
padding-top: 125px;
opacity: 0;
transition: all ease .5s;
visibility: hidden;
}
.main-navigation.toggled .menu-menu-principal-container {
opacity: 1;
visibility: visible;
}
.main-navigation.toggled li {display: block;margin: 15px 0 0;}
.main-navigation.toggled li a {display: block;font-size: 30px!important;
padding: 10px;}
nav#site-navigation {
padding: 26px 0;
}
header#masthead {background: #ffffffeb; height: 76px;}
.site-title {margin: 0 auto;}
.site-title a {background: url(//4aout.fr/wp-content/themes/quatreaout/images/logo-4aout-fond-m.svg) center no-repeat; background-size: 88px; height: 76px; left: 50%; margin-left: -44px; width: 88px; z-index: 10}
p.site-title:before,
p.site-title:after {content: none;}
.inner.fond_logo {display: none;}
.site-branding {float: none; margin: 0 auto;}
.menu-toggle,
.main-navigation.toggled ul {display: block;}
.main-navigation .menu-toggle {float: right;background: transparent url(//4aout.fr/wp-content/themes/quatreaout/images/menu.svg) center no-repeat;background-size: 26px;text-indent: -9999em;border: none;outline: none; position: relative; z-index: 20;}
.main-navigation.toggled .menu-toggle {background: transparent url(//4aout.fr/wp-content/themes/quatreaout/images/cross.svg) center no-repeat;background-size: 22px;}
.main-navigation ul {display: none;float: left}
.menu-menu-principal-container {width: 100%;float: left;background-color: #fff2da;text-align: center;} .fixed-title {left: 91%;} #home_projets .projet {width: 100%; min-height: calc(100vw - 80px);}
.projet .titrage {left: 20px; width: calc(100% - 40px);} #home_clients .home_clients_liste {font-size: 20px;}
#home_clients .home_clients_logos .activite {font-size: 16px;} .page-template-page-agence .bandeau {margin-bottom: 50px;}
.page-template-page-agence .bandeau .inner {padding: 0 10%}
.page-template-page-agence .inner.grid .group {width: 100%; float: none;}
.page-template-page-agence .nom {padding: 20px 45px 20px 15px; font-size: 19px;} .missions.items-1 li.missions.items {width: 100%;font-size: 18px;}
.missions.items-2 li.missions.items {width: 100%;font-size: 18px;}
.missions.items-3 li.missions.items {width: 100%;font-size: 18px;}
.single-projet .bloc_projets-similaires a { } .page-template-page-actualites .masonry .actu { width: 100%;}
.page-template-page-actualites .actu.normal.item h3 {line-height: 25px} .bloc_articles-similaires .article-similaire {width: 100%;float: none; padding: 20px 30px 20px 30px; min-height: 0}
.article-similaire { min-height: 360px; padding: 20px 30px 20px 30px;}
.bloc_articles-similaires .article-similaire.item-2 {border-left: 1px solid #000;border-top: none;}
h1.article {line-height: 48px;}
.article-similaire-lien {margin-bottom: 30px; margin-top: 10px} .page-template-page-recrutement .acc2 {width: 100%;margin: 0 4px -1px;}
.page-template-page-recrutement .acc2 .nom {font-size: 14px;}
.page-template-page-recrutement .acc2 .pole {font-size: 16px;margin-bottom: 10px;}
.page-template-page-recrutement .acc2 .poste {font-size: 30px;}
.page-template-page-recrutement .acc2 .button {font-size: 14px;}
.marquee div span {opacity: 0;}
.marquee span.invisible {opacity: 1!important}
.marquee:before {content: none;}
#home_actus .owl-dots {text-align: center; margin-top: 30px}
#home_actus button.owl-dot {
width: 10px;
height: 10px;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
margin: 0 9px;
outline: none;
}
#home_actus button.owl-dot.active {background-color: #000}
.anim_wrapper {display: none!important;}
header#masthead.anim {opacity: 1!important; background-color: #ffffffeb!important;}
.page-template-page-contact .bloc-images img {width: 100%!important; height: auto;}
.single-projet .bloc_projets-similaires a {width: 100%;float: none;margin-left: 0; margin-top: -1px;}
.page-template-page-clients .acc3 {border-top: none;}
.nice-select .list {top: 40px; right: -30px; left: auto;}
}
@media only screen and (max-width: 782px) {
.admin-bar header#masthead {top: 46px;}
th .table-projet {display: none}
#old_projects tr.table-head th {display: block;}
.table-annee {width: 45%;float: left;}
.table-client {width: 45%; float: right; text-align: right;}
.table-projet {width: 100%;clear: both; padding-top: 0}
#old_projects tr td a {display: block;}
}
@media only screen and (max-width: 667px) {
.bandeau h1 {font-size: 26px;}
.bandeau .client_projet {font-size: 22px;} #social {width: 100%; margin: 60px auto 20px;}
#newsletter, #reseaux {width: 100%;float: none;max-height: 900px; margin-left: 0; margin-top: -1px; padding: 40px; min-height: 0}
#newsletter {padding-top: 39px;}
#newsletter h3 {font-size: 21px;  margin-bottom: 25px;}
#newsletter .single {width: 280px;height: initial;margin: 0 auto;}
#reseaux h3 {font-size: 21px;margin: 0px auto 20px;}
#reseaux a {width: 60px;height: 60px;font-size: 15px;border-radius: 50%;line-height: 60px;margin: 15px 20px;}
#reseaux .icons {max-width: 100%; margin: 0 auto 0; }
a#top {display: none;}
.contact_bloc .button {margin: 15px 40px 0px 0;}
.marquee span {font-size: 14px; line-height: 17px; letter-spacing: .5px}
#home_projets .marquee span {font-size: 14px; line-height: 17px;letter-spacing: .5px}
footer.site-footer .right {position: relative; margin-top: 15px}
.page-template-page-agence .bandeau p {font-size: 23px;}
#ecriveznous #ecrivez_left {
width: 100vw;
float: none;
background: #fff2da;
min-height: calc(50vh - 76px);
font-size: 20px;
}
#ecriveznous .inner_left {
width: 100%;
max-width: 500px;
float: right;
min-height: calc(50vh - 76px);
}
#ecriveznous #ecrivez_right {
width: 100vw;
float: none;
min-height: 50vh;
height: 50vh;
font-size: 20px;
}
#ecriveznous .inner_right {
width: 100%;
max-width: 100%;
float: none;
min-height: 50vh;
padding: 30px;
}
#submissions {bottom: 30px; font-size: 20px; line-height: 1.3; padding: 0 15px; max-width: 100%;}
#ecriveznous .inner_left #submissions {max-width: 100%;}
#ecriveznous .caldera-grid .form-control {font-size: 20px;}
.nice-select .list {
top: 40px;
right: auto;
left: -80px;
}
span.step {margin-top: 15px;}
span.step#step3_bis {margin-top: 0;}
#ecriveznous .caldera-grid .form-group textarea.form-control {width: 100%;}
}
@media only screen and (max-width: 620px) { .page-template-page-clients .acc3 {width: 43%;}
#home_actus {padding: 75px 0 60px;}
#home_actus .actu {
width: 100%;
margin: 0 auto;
position: relative;
}
#reseaux a {margin: 15px 10px;}
#spotify .links a.tip, #spotify .links span.tip {margin: 10px 20px}
#logo_spotify {float: none; margin: 30px auto 0}
#spotify p.site-title {height: 90px;}
}
@media only screen and (max-width: 470px) { .main-navigation .menu-menu-principal-container {padding-top: 65px;}
footer.site-footer .share_bottom a {margin-right: 5px;}
footer.site-footer .right, footer.site-footer .right a {position: static;margin-top: 20px;}
footer.site-footer span {float: left;margin-top: 8px;} .fixed-title {position: absolute;top: 220px;left: 80%;}  {} #home_clients .home_clients_liste {max-width: 300px;float: none;font-size: 19px;font-weight: 600;}
#home_clients .home_clients_liste .button {display: none;}
#home_clients .button.mobile {display: inline-block;padding: 8px;font-size: 14px;text-decoration: none;border: 1px solid #ff7d5a;background: none;cursor: pointer;padding: 8px 20px;margin: 15px 30px;outline: none;position: relative;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;border-radius: 25px;overflow: hidden;color: #ff7d5a;z-index: 1;} .ecrivez-nous {margin-top: 0px;}
.ecrivez-nous a {color: #000;text-decoration: none;font-size: 49px;} .masonry .item {width: 100%;} .single-projet .bandeau .share_single {top: 70%;right:4%;} .page-template-page-agence .bandeau h1 {font-size: 34px;}
.page-template-page-agence .bandeau p {font-size: 19px;}
.page-template-page-agence .inner.grid .group {width: 100%;float: none;}
.page-template-page-agence .nom {font-size: 18px;} .page-template-page-clients .site-main .inner {padding-bottom: 0px;}
.page-template-page-clients .site-main .inner h1 {font-size: 32px;}
.page-template-page-clients .acc3 {width: 44%;} .page-template-page-recrutement .acc2 {width: 100%;}
#reseaux a {margin: 15px 30px;}
.projet-similaire .titrage {bottom: 15px; left: 15px; width: calc(100% - 30px);}
.single-projet .projet-similaire .titrage h3 {font-size: 16px}
.projet-similaire {height: 370px; position: relative; background-position: center;}
.bloc_projets-similaires a {padding: 15px;}
#footer .btn-spotify {top: -50px; zoom: .7; right: 20px;}
}
@media only screen and (max-width: 410px) {
#newsletter .single {width: auto;}
#newsletter #fld_5694939_1-wrap.form-group input {width: 100%!important;} .single-projet .bandeau .share_single {top: 90%;right: 40%;} .page-template-page-clients .site-main .inner {padding-bottom: 0px;}
.page-template-page-clients .site-main .inner h1 {font-size: 32px;}
.page-template-page-clients .acc3 {width: 94%;} .contact_bloc {font-size: 26px;}
.contact_bloc a.twitter, .contact_bloc a.facebook, .contact_bloc a.linkedin, .contact_bloc a.youtube {font-size: 19px;margin: 0 5px;}
.contact_bloc .bloc-images img {float: none!important;width: 100%!important;height: auto!important;}
}.am_ajax_post_grid_wrap {
box-sizing: border-box;
}
.asr-filter-div .asr_texonomy {
display: inline-flex;
cursor: pointer;
background: transparent;
padding: 5px 10px;
margin: 0 2px 2px 0;
border: 1px solid rgba(0, 0, 0, 0.1);
align-content: center;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 40px;
}
.asr-filter-div ul {
list-style: none;
margin: 0;
padding: 0;
}
.gm-taxonomy-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.gm-taxonomy-filter input[type="checkbox"],
.gm-taxonomy-filter input[type="radio"]{
display: none;
}
.asr_texonomy:hover {
background: rgba(0, 0, 0, 0.05);
}
.gm-taxonomy-item input:checked + label {
background: rgba(0, 0, 0, 0.1);
}
.asr-ajax-container {
position: relative;
}
.asr-ajax-container .asr-loader {
display: none;
} .asr-filter-div {
margin-bottom: 30px;
}
.am_grid_col {
padding: 0 15px;
}
.am_post_grid {
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
} .asr-loader {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
z-index: 9;
height: 100%;
background: rgba(255, 255, 255, 0.7);
}
.lds-dual-ring {
display: inline-block;
width: 80px;
height: 80px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
border: 1px solid #333;
border-color: #333 transparent #333 transparent;
-webkit-animation: lds-dual-ring 1.2s linear infinite;
animation: lds-dual-ring 1.2s linear infinite;
}
@-webkit-keyframes lds-dual-ring {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes lds-dual-ring {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
} .am_single_grid {
box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.2);
height: 100%;
display: block;
}
.am_thumb {
height: 200px;
overflow: hidden;
}
.am_thumb img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
height: 100%;
width: 100%;
margin: 0 !important;
border-radius: 0;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
.am_grid_col .am_single_grid .am_cont a {
text-decoration: none;
}
.am_cont {
padding: 20px;
}
.am_single_grid:hover .am_thumb img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.am__col-3 .am_grid_col {
margin-bottom: 30px;
}
.am__col-3 .am_grid_col {
-ms-flex: 0 0 33.333333%;
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}  @media only screen and (max-width: 767px) {
.am__col-3 .am_grid_col {
-ms-flex: 0 0 100%;
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}  .am_posts_navigation_init {
margin: 30px 0;
text-align: center;
}
.am_posts_navigation_init .page-numbers {
min-width: 30px;
display: inline-flex;
height: 30px;
text-align: center;
border: 1px solid #c6c6c6;
padding: 4px 4px;
text-decoration: none;
align-items: center;
justify-content: center;
}
.am_posts_navigation_init .page-numbers.current, .am_posts_navigation_init .page-numbers:hover {
background: #f0f0f0;
}
.am_posts_navigation{
text-align: center;
margin-bottom: 30px;
}  .am-post-grid-load-more {
position: relative;
}
.am-post-grid-load-more.loading:after {
content:"";
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
width: 25px;
height: 25px;
animation: spin 1s ease-in-out infinite;
position:absolute;
left: 0;
right: 0;
margin: 0 auto;
z-index: 9;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} .am_has_animation .am_grid_col{
display: none;
} .gm-admin-notice {
font-family: monospace;
font-size: 14px;
border: 1px solid #ffbf05;
width: 100%;
border-style: dashed;
padding: 5px 10px;
}
.am__readmore, .gm_read_more {
white-space: nowrap;
cursor: pointer;
}
.am__title a {
color: inherit;
} .gm-taxonomy::-webkit-scrollbar {
width: 1px;
height: 1px;
} .gm-taxonomy::-webkit-scrollbar-thumb {
background-color: transparent;
} .gm-taxonomy::-webkit-scrollbar-track {
background-color: #f0f0f0;
} .gm-taxonomy::-webkit-scrollbar-corner {
background-color: transparent;
} .gm-taxonomy::-webkit-resizer {
background-color: transparent;
}
.gm-term {
white-space: nowrap;
display: inline-block;
}
.gm-comments-link svg {
width: 18px;
height: 18px;
margin-right: 4px;
vertical-align: middle;
}
.gm-title-tooltip [title] {
position: relative;
}
.gm-title-tooltip [title]:hover:before{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
background: #444;
border-radius: 3px;
color: #fff;
content: attr(title);
font-size: 11px;
padding: 4px 10px;
position: absolute;
white-space: nowrap;
bottom: 110%;
left: 50%;
transform: translateX(-50%);
}
.infinite_scroll.am-post-grid-load-more {
text-indent: -9999px;
overflow: hidden;
position: relative;
background-color: transparent !important;
border: 0 !important;
}
.infinite_scroll.am-post-grid-load-more.loading:after{
border-top-color: #000;
}