/*
Theme Name: Droneracer
Theme URI: http://test.quotex.eu
Author: Damien Rousset
Description: Theme lie au site de Anjou drone Racer
Version: 1.0
*/

/********************************
RESET CSS
**********************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    line-height: 1;
    color: #676767;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/************************
MENU
*************************/

.top-menu{
    padding-top: 1em;
}

.menu-frontpage h1 a{
    color: white;


}

 h1 a{
    color: #81c784;
    font-family: 'Permanent Marker', cursive;
    font-size: 30px;
    text-decoration: none;
    padding-left: 1em;
}

h1 a:hover{
    color: #81c784;
    text-decoration: none;
}

.sub-menu .menu-item:hover a {
    color: white !important;
}

.menu-frontpage{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    z-index: 3;
    position: absolute;
    width: 100%;
    padding-top: 1em;
}


.inside-top-menu{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.logo-top-menu{
    color: rgba(0,0,0,.9);
    display: inline-block;
    padding-top: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

.logo-top-menu .custom-logo{
    width: 139px;
    height: auto;
    padding-top: 1em;
}


.button-menu{
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: none;
}

.menu-icon{
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background-size: 100% 100%;
}
.icon-white{
    background-image: url('https://damienrousset.eu/wp-content/uploads/2020/02/menublanc.png');
}
.icon-green{
    background-image: url('https://damienrousset.eu/wp-content/uploads/2020/02/menuvert.png');
}
#header-menu {
    display: none;
    text-align: center;
    height: 100vh;
    padding-top: 8em;
    width: 100%;
    background-color: #81c784;

}

.menu-item {
    padding-top: 1em;
    padding-bottom: 1em;
}

.menu-item a {
    text-decoration: none;
    font-family: 'Share Tech Mono', monospace;
    color: black;

}
.menu-frontpage .menu-item a {
    text-decoration: none;
    font-family: 'Share Tech Mono', monospace;
    color: white;

}
.menu-item-has-children {
    padding-bottom: 0.5em;
    text-decoration: none;
}

.sub-menu {
    display: none;
    position: absolute;
    background-color: #bdbdbd;
    margin-top: 1em;

}

.menu-item-has-children:hover .sub-menu {
    display: block;
}

.sub-menu .menu-item {
    display: block;
}

.sub-menu .menu-item a{
    color: white !important;
}


@media(max-width:991.98px){
    .inside-top-menu{
        padding-left: 0;
        padding-right: 0;
    }
}

@media(min-width:768px){
    .inside-top-menu{
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

@media(min-width:1200px){

    h1 a{
        font-size: 2em;

    }

    .inside-top-menu{
        max-width: 1140px;
        text-align: center;
    }
    .logo-top-menu{
        width: 100%;
    }
    .button-menu{
        display: none;

    }

    #header-menu{
        display: inherit !important;
        flex-direction: row;
        justify-content: center;
        height: auto;
        background-color: transparent;
        padding-top: 0;
        width: auto;

    }
    .menu-item{
        padding-bottom: 0;
    }
    .menu-item a{
        display: block;
        padding: 0.1rem 0.7rem;
        font-family: 'Share Tech Mono', monospace;
        font-size: 18px;
        color: black;


    }

    .menu-frontpage .menu-item a{
        display: block;
        padding: 0.1rem 0.7rem;
        font-family: 'Share Tech Mono', monospace;
        font-size: 18px;
        color: white;

    }
    .menu-frontpage .menu-item a:hover{
        color: #81c784;

    }

    .shop-cart{
        margin-top: -0.5em;
    }

    .menu-item:hover{
        border-bottom: solid #81c784 3px;

    }
}


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

MAIN

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

body{
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
}
.bg-yellow{
    background-color: #81c784 ;
}
.category-title{
    padding-top: 2em;
    padding-bottom: 2em;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

.category-title{
    border-bottom: solid #81c784 3px;
    padding-bottom: 0;
    width: fit-content;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    margin-bottom: 3em;
    width: -moz-fit-content;
}

h3{
    font-size: 20px;
    padding-bottom: 1em;
}

.elementor-widget-heading .elementor-heading-title{
    color:#676767 !important;
}

p{
    padding-bottom: 0.5em;
}

.elementor-widget-button .elementor-button {
    border-color: black;
    border-radius: 0;
    background-color: #81c784;
    border-style: solid;
    border-width: 2px;
    font-family: 'Roboto', sans-serif;
    color: WHITE;
}

@media(min-width:768px){
    .category-title{
        font-size: 26px;
    }
}


/*******************************************
block-one
*********************************************/
.block-one{
    text-align: center;

}


.block-one h2{
    font-family: 'Share Tech Mono', monospace;
    text-align: center;
    font-size: 25px;
    padding-top: 42vh;
    padding-bottom: 2em;
    color: white;

}

.block-one video{
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  height: 100vh;
}

.block-one .hurrytimer-headline{
    display: none;
}

.block-one .hurrytimer-cdt{

    padding-bottom: 2em;
}

.block-one .hurrytimer-timer-digit.hurrytimer-cdt__time,
.block-one .hurrytimer-timer-label.hurrytimer-cdt__label,
.block-one .hurrytimer-cdt__sep.hurrytimer-timer-sep{
    color: white;
}
.block-one .content-text {
    position: absolute;
    height: 84vh;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    height: 100vh;
    z-index: 2;
  }

.block-one .wp-block-button__link{

    border-color: black;
    border-radius: 0;
    background-color:white ;
    border-style: solid;
    border-width: 2px;
    font-family: 'Roboto', sans-serif;
    color: black !important;
}

@media(min-width:1200px){
    .block-one h2{
        font-size: 33px;
    }
}


/*************************************************
Carousel
***************************************************/

.carousel{
    position: relative;
    height: 400px;
}

#carrousel-articles {
    display: flex;
    height: 400px;
    overflow: hidden;
    position: absolute;
    width: 100%;
}

.carousel-inner {
    height: 400px;
    background-position-y: center;
    background-size: cover;
}

.image-carousel {
    height: 400px;
    background-position-y: center;
    background-size: cover;
}

.carousel-item img{
    object-fit: cover;
    object-position: center;
}



/*********************************************
Block-2
**********************************************/
.block-two{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 2em;
}

p a{
    color: inherit;
    text-decoration: underline;
}

.block-two-container{
    width: 100%;
}
.block-two-content .attachment-post-thumbnail{
    width: 100%;
    height: auto;
    padding-top: 1em;
    padding-bottom: 1em;
}

@media(min-width:768px){
    .block-two{
        max-width: 720px;
    }
    .block-two-content iframe{
        height: 33em;
        width: 100%;
    }
}

@media(min-width:1200px){
    .block-two{
        max-width: 1140px;
    }

    .block-two-content .wp-block-embed__wrapper iframe {
        width: 100% !important;
    }



    .block-two-content .attachment-post-thumbnail{
        height: auto;
        object-fit: cover;
        width: 60%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .block-six-text{

        padding-left: 1em;
        padding-right: 1em;
        padding-top: 2em;
    }
}


/***********************************************
Block-3
***********************************************/
.block-three{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}
.block-three-content{


    background-size: contain;
    background-repeat: no-repeat;
}

.block-three .wp-block-button{
    text-align: center;
}
.block-three .wp-block-button__link{

    border-color: black;
    border-radius: 0;
    background-color:#81c784  ;
    border-style: solid;
    border-width: 2px;
    font-family: 'Roboto', sans-serif;
    color: blawhiteck;
}
@media(min-width:768px){
    .block-three{
        padding-bottom: 2em;

    }
    .block-three-content{
        height: 20em;

    }
}

@media(min-width:1200px){




}
/********************************************
Block-race
*********************************************/
.block-race {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media(min-width:768px){
    .block-race{
        display: flex;
        max-width: 720px;
        justify-content: space-around;
    }
}

@media(min-width:1200px){
    .block-race{
        max-width: 1140px;
    }
}
/***********************************************
Block-4
***********************************************/
.block-four-content{
    height: 15em;
   margin-bottom: 2em;
   background-size: cover;
}


.block-four-content .index-article-title,
.block-five-content .index-article-title{
    padding-top: 3em;
    font-size: 25px;
    color: white;
}

.block-three .wp-block-button,
.block-four .wp-block-button,
.block-five .wp-block-button{
    padding-top: 5em;
    text-align: center;
}
.block-four .wp-block-button__link{

    border-color: black;
    border-radius: 0;
    background-color:#81c784  ;
    border-style: solid;
    border-width: 2px;
    font-family: 'Roboto', sans-serif;
    color: WHITE;
}
@media(min-width:768px){
    .block-four{
        margin-right: 0;
        margin-left: 0;
        width: 50%;
        padding-right: 2em;
    }
    .block-four-content{
        background-size: cover;

    }
}
@media(min-width:1200px){
    .block-four-content{
      height: 20em;
    }
    .block-three .wp-block-button,
    .block-four .wp-block-button,
    .block-five .wp-block-button{
    padding-top: 8em;
    text-align: center;
}
}
/***********************************************
Block-5
***********************************************/
.block-five-content{
    height: 15em;
    background-size: cover;
    background-repeat: no-repeat;    margin-bottom: 2em;
}
.block-five .wp-block-button{
    text-align: center;
}
.block-five .wp-block-button__link{

    border-color: black;
    border-radius: 0;
    background-color:#81c784  ;
    border-style: solid;
    border-width: 2px;
    font-family: 'Roboto', sans-serif;
    color: white;
}
@media(min-width:768px){
    .block-five{
        margin-right: 0;
        margin-left: 0;
        width: 50%;
    }
    .block-five-content{
        background-size: cover;

    }
}
@media(min-width:1200px){
    .block-five-content{
      background-size: cover;
      height: 20em;
    }

}
/***********************************************
Block-6
***********************************************/
.block-six{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
.block-six img{
    width: 50%;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}
@media(min-width:768px){
    .block-six{
        max-width: 720px;
    }
    .block-six-content{
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }

    .block-six-content .wp-block-image{
        width: 30%;
    }
}

@media(min-width:1200px){
    .block-six{
        max-width: 1140px;
    }
}
/**********************
FOOTER
***********************/
.block-footer {
    padding-top: 2em;
    padding-bottom: 1em;
    background-color:#81c784 ;
    text-align: center;
}
.block-footer .custom-logo{
    width: 8em;
    height: auto;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
.menu-footer{
    display: none;
}
#menu-header-menu {
    padding-inline-start: 0 !important;
    margin-block-end: auto;
}

.logo-footer {
    width: 171px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


.social {
    text-align: center;
    margin-bottom: 1em;
    margin-top: 1em;
}

.social-footer {
    width: 2em;
    margin-left: 0.5em;
    margin-right: 0.5em;
}


.block-footer .menu {
    text-align: center;
}

.block-footer .menu a {
    color: white !important;
}
.span-title-site{
    text-align: center;
}
.span-title-site a{
    color: white;
    font-size: 30px;
    font-family: 'Permanent Marker', cursive;
    text-align: center;
    text-decoration: none;

}
/*******************************
Page
********************************/
.container-page{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.main-page{
    min-height: 100vh;
}

.page-content{
    padding-bottom: 5em;
}

.page-content .attachment-post-thumbnail{
    width: 100%;
    height: 20em;
    object-fit: cover;
}
@media(min-width:768px){
    .container-page{
        max-width: 720px;
    }
}
@media(min-width:1200px){
    .container-page{
        max-width: 1140px;
    }
}

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

CONTACT

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

.wpcf7{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2em;
}

.wpcf7-form label {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

label {
    width: 100%;
}

.wpcf7-submit {

    border-style: none;
    padding-right: 1em;
    padding-left: 1em;
    margin-left: auto;
    margin-right: auto;
    display: block;

    padding: 0.8em 1em;
}

.wpcf7-submit{

    border-color: black;
    border-radius: 0;
    background-color:#81c784 ;
    border-style: solid;
    border-width: 2px;
    font-family: 'Roboto', sans-serif;
    color: black;
}

.wpcf7-text,
.wpcf7-textarea {

    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 100%;
    font-size: 16px;
    margin: 0 0 8px 0;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transition: border .3s, -webkit-box-shadow .3s;
    transition: border .3s, -webkit-box-shadow .3s;
    transition: box-shadow .3s, border .3s;
    transition: box-shadow .3s, border .3s, -webkit-box-shadow .3s;
}

.wpcf7-text:active,
.wpcf7-textare:active {
    border-bottom: 1px solid green;
}

div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
    border: 2px solid #f8d7da !important;
    background-color: #f8d7da;
    border-radius: 4px;
}

div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing,
.wpcf7-not-valid-tip {
    color: #721c24 !important;
}


label br {
    display: none;
}

@media(min-width:768px) {
    label {
        width: 80%;
    }
}

@media(min-width:1280px) {
    label {
        width: 90%;
    }

    .map {
        height: 13em;
    }

    .wpcf7-submit{
        margin-top: 2em;
        width: 30%;
    }

    .map{
        padding-bottom: 1em;
    }
}
/**********************************************
NEWS
**********************************************/
.block-news-content{
  width: 100%;
  padding-bottom: 2em;
}
.block-news-content .attachment-post-thumbnail{
    width: 100%;
    object-fit: cover;
    height: 193px;
}

.index-article-title{
    text-align: center;
}

.index-article-title a{
    color: black;
}

@media(min-width:768px){
    .parent-blog{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .block-news-content{
        flex: 0 0 50%;
        max-width: 45%;
    }
}

@media(min-width:1200px){

    .block-news-content{
        flex: 0 0 50%;
        max-width: 30%;
    }
}

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

Page CV

************************************/
.parent-cv{
    padding-top: 45px;
}
.header-company .wp-block-image img{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    display: block;


}
.info-company h2{
    font-size: 26px;
}
.info-company h3{
    padding-bottom: 8px;
    text-align: center;
}
.info-company h4{
    padding-bottom: 4px;
    font-size: 14px;
    color: rgba(0,0,0,0.5);
    text-align: center;
}
.block-cv-content{

    margin-bottom: 90px;

}

.header-company .info-company{
    color: black;
    width: 65%;

}


.mission{
    margin-top: 30px;
}
.mission p{
    color: rgba(0,0,0,0.5);

}

@media(min-width:768px){

    .header-company .wp-block-image img{
        margin-top: 10%;

    }

    .parent-cv{
        padding-top: 80px;
    }

    .task{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

    }

    .info-company h3, .info-company h4{
        text-align: left;
    }
    .header-company {
        width: 25%;
    }

    .block-cv-content{
        display: flex;
        flex-wrap: wrap;

    }

    .info-company{
        padding-left: 1em;
    }
    .mission p{
        color: rgba(0,0,0,0.5);
        margin-bottom: 0;

    }

}
/***********************************

Page Réalisations

************************************/
.wp-block-embed__wrapper iframe {
    width: 100%;
}

@media(min-width:1200px){
    .task{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .task .wp-block-image{
        width: 45%;
    }

    .task .block-site{
        width: 45%;
        padding-bottom: 3em;
    }
    .task .block-site .wp-block-image{
        width: 100%;
    }

    .wp-block-embed__wrapper iframe {
        width: 500px;
    }


}


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

Hobbies

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

.block-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}



/**********************************
skils
**********************************/



.block-skils-content{
    height: 15em;
    margin-bottom: 2em;
}

.block-skils-inside{
    height: 100%;
    width: 100%;
    background-size: cover;
}

.block-skils-inside .wp-block-button{
    padding-top: 5em;
    text-align: center;
}

.block-skils-inside .wp-block-button__link {
    border-color: black;
    border-radius: 0;
    background-color: #81c784;
    border-style: solid;
    border-width: 2px;
    font-family: 'Roboto', sans-serif;
    color: WHITE;
}

@media(min-width:768px){

    .block-skils{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .block-skils-content{
        width: 45%;
    }

}

@media(min-width:1200px){

    .block-skils-content{
        height: 20em;

    }
    .block-skils-content{
        width: 30%;
    }
    .block-skils-inside .wp-block-button{
        padding-top: 7em;
    }
}

/**************************************
Page skils
**************************************/
.page-skils-content{
    margin-top: 2em;
}

.page-skils-image{
    margin-top: 1em;
}

h3.title-skils {
    color: white;
    text-align: center;
    background-color: #81c784;
    padding-top: 1em;
}

@media(min-width:768px){
    .page-skils-content{
        display: flex;
    }

    .page-skils-inside{
        width: 60%;
        padding-left: 1em;
        padding-right: 1em;
    }
    .page-skils-image{
        width: 40%;
    }
    .page-skils-content:nth-child(3n) {
        flex-direction: row-reverse;
    }
}

@media(min-width:1200px){

    .page-skils-inside{
        width: 80%;
    }
    .page-skils-image{
        width: 20%;
    }

}