/**
 * Basic CSS Media Query Template
 * TODO: I should probably use Sass...
 * Author: Damien Drouat (damiendrouat@me.com)
 * ------------------------------------------
 *  Responsive Grid Media Queries - 1280, 1024, 768, 480
 *   1280-1024   - desktop (default grid)
 *   1024-768    - tablet landscape
 *   768-480     - tablet 
 *   480-less    - phone landscape & smaller
 * --------------------------------------------
 */


.dotnav-left {
    left: 10px;
    top: 22%;
    margin-top: 0;
    height: 100px;
    z-index: 2;
    position: fixed;
}
.dotnav {
    padding: 0;
    list-style: none;
    font-size: 0.001px;
}
.dotnav > li {
    display: inline-block;
    font-size: 1rem;
    vertical-align: top;
    transition: width .4s ease-in-out;
}
.dotnav-vertical > li {
    display: block;
    margin-right:10px;
    margin-bottom: -10%;
}
.dotnav-vertical > li:nth-child(n+2) {
    margin-left: 0;
    margin-top: 10px;
}
.awesome-tooltip {
    margin-left:0;
}
.dot-nav-dotte:before{
    content: "  ";
    transform: rotate(45deg);
}
.bg_nav{
    background: linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.2) 60%,transparent);
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width:15%;
}
.logo_site img{
    max-width: 230px;
}
.logo_site{
    position: fixed;
    top: 35px;
    left: 5px;
    z-index: 2;
}
.socialsharewidget{
    position: fixed;
    top: 60px;
    right: 10px;
    z-index: 3;
}
.socialsharewidget .appearsocialshare img{
    width: 70px;
    -webkit-filter: grayscale(0) blur(0px);
    filter: grayscale(0) blur(0px);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor:pointer;
}
.socialsharewidget .appearsocialshare img:hover{
    -webkit-transform: rotate(360deg); /* rotation de l'image */
    transform: rotate(360deg);
}
.appearsocialshare-elements{
    display: none;
}
.appearsocialshare-elements.show{
    display: flex !important;
}
.appearsocialshare-elements ul li{
    list-style: none;
}
.appearsocialshare-elements ul li img{
    width:40px;
}

.td-post-content, .td-main-content-wrap{
    padding-bottom: 0;
}

@media all and (min-width: 1024px) and (max-width: 1280px) {
}

@media all and (min-width: 768px) and (max-width: 1024px) {

    .socialsharewidget .appearsocialshare img{
        width: 30px;
    }

}

@media all and (min-width: 480px) and (max-width: 768px) {

    .socialsharewidget{
        top:10px;
    }
    .socialsharewidget .appearsocialshare img{
        width: 30px;
    }
}

@media all and (max-width: 480px) {

    .logo_site{
        top:10px;
    }

    .logo_site img{
        width:60%;
    }

    .socialsharewidget{
         top:10px;
    }
    .socialsharewidget .appearsocialshare img{
        width: 30px;
    }

    .dotnav-vertical > li:nth-child(n+2){
        margin-top:2px;
    }

    .dot-nav-dotte{
        padding-top: 7px !important;
        padding-bottom: 0px !important;
    }

    .dotnav > li > a{
        height: 10px;
        width:10px;
    }
}

/* Portrait */
@media screen and (orientation: portrait) {
    /* Portrait styles here */
}

/* Landscape */
@media screen and (orientation: landscape) {
    /* Landscape styles here */
}

/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
}

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation: landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation: portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation: landscape) {
}