/* BANNER */
#articles #slider { width: 100%; display: block; height: 300px; position: relative; z-index: 9997; top: 100px;  }
#articles #slider .slide { height: 300px; width: 100%; position: absolute; z-index: 0; top: 0; left: 0; bottom: 0; right: 0; }
#articles #slider .mask_slider { height: 300px; width: 100%; position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.3) }
#articles #slider .centered { z-index: 1; position: relative; padding-top: 110px;}
#articles #slider h1 { width: auto; float: left; color: #fff; font-size: 50px; line-height: 50px; font-weight: 300; font-family: Oswald  }
#articles #slider h1:after {
    transition: all ease-in-out .2s;
    background: #fff;
    content: "";
    display: block;
    height: 3px;
    width: 70px;
    margin-left: 0px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    #articles #slider { width: 100%; display: block; height: 200px; position: relative; z-index: 9997; top: 100px;  }
    #articles #slider .slide { height: 200px; width: 100%; position: absolute; z-index: 0; top: 0; left: 0; bottom: 0; right: 0; }
    #articles #slider .mask_slider { height: 200px; width: 100%; position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.3) }
    #articles #slider .centered { z-index: 1; position: relative; padding-top: 60px; width: calc(100% - 20px); margin-left: 20px}
    #articles #slider h1 { width: auto; float: left; color: #fff; font-size: 40px; line-height: 40px; font-weight: 300; font-family: Oswald  }
}


/* HOME FIRST */ 
#articles #corps { width: 100%; background-image:url('../img/bg-product.jpg'); background-position: top center;  clear:both; float: left; position: relative }
#articles .content { width:1200px; display: table; margin: auto; }   

@media (max-width: 768px) {
    #articles .content { margin:auto; width:calc(100% - 40px); margin-left:20px; }
}

/* articles */ 
.article { float:left; background:#fff; width:calc(50% - 40px); margin-right:30px; position: relative; border:5px solid #ece9e5; }
.article .label { position:absolute;  background:#efefef; color:#444; font-size:14px; font-weight:bold; padding:5px 10px; left:15px; top:15px;  }
.article .article_img { float:left; width:100%; }
.article .article_title { font-family: Oswald; text-align:center; color:#000; font-size:20px; line-height:24px; font-weight:bold; padding-left:20px; padding-right:20px; }
.article .article_subtitle { float: left; text-align:left; color:#333; font-size:16px; padding-left:20px; padding-right:20px; height:75px; }
.article .article_link { display:inline-table; float:left; width:100%; background:#b21959; color:#fff; font-family: 'Roboto', sans-serif; font-weight:500; line-height:50px; font-size:24px; transition:all 0.2s ease; text-transform:uppercase; text-align:center  }
.article .article_link:hover { background:#000; }

@media (max-width: 1024px) {
    .article .article_title { height:80px; }
}

@media (max-width: 900px) {
    .article .article_subtitle { font-size:16px; padding-left:20px; padding-right:20px; height:125px; }    
}

@media (max-width: 767px) {
    .article { float:left; background:#fff; width:calc(100% - 0px); margin-right:0px; position:relative; margin-bottom:30px; }
    .article .article_title { height:auto; }
    .article .article_subtitle { font-size:16px; padding-left:20px; padding-right:20px; height:auto; }    
}



/* article */
#slider_article { clear:both; float:left; width:100%; position:absolute; top:0px; z-index:100; height: 400px }
#slider_article .slide { float:left; background-image:url("https://media.istockphoto.com/photos/girl-in-headphones-listening-to-music-in-the-city-at-sunset-picture-id958364166?s=2048x2048"); background-position:50% 50%; height: 400px; background-size:cover; width:100%; }
#slider_article .mask_slider { background: rgba(0,0,0,0.50); height: 400px; width:100%; }

#slider_article h1 { font-family: 'Roboto Slab', sans-serif; font-size:30px; color:#fff; font-weight:600; text-align:center; line-height:38px; letter-spacing:2px; text-shadow: 1px 1px 0px #000; }

#article_body h2 { font-family: 'Roboto Slab', sans-serif; font-size: 24px; margin-bottom: 20px; }
#article_body p { margin-bottom: 15px; font-family: 'Vollkorn', sans-serif; font-size: 18px; line-height: 30px; }
#article_body a { color:#62b1ff;  }
#article_body a:hover { text-decoration: underline;  }
#article_body .container { width: 948px;}
#article_body iframe { width: 1048px; height: 590px; margin-left: -50px;}
#article_body .img_left { float: left; margin-right: 25px; margin-left: -50px; }
#article_body .img_right { float: right; margin-left: 25px; margin-right: -50px; }

@media (max-width: 767px) {
    #article_body p { margin-bottom: 10px; font-family: 'Vollkorn', sans-serif; font-size: 18px; line-height: 26px; }
    #article_body iframe { width: 100%; height: 200px; margin-left: 0px;}
    #article_body .container { width: calc(100% - 40px); margin-left: 20px; }
    #article_body .img_left { float: left; margin-right: 0px; margin-left: 0px; width: 100%; margin-bottom: 20px; }
    #article_body .img_right { float: left; margin-right: 0px; margin-left: 0px; width: 100%; margin-bottom: 20px; }

}