/* BANNER */
#article #slider { width: 100%; display: block; height: 300px; position: relative; z-index: 9997; top: 100px;  }
#article #slider .slide { height: 300px; width: 100%; position: absolute; z-index: 0; top: 0; left: 0; bottom: 0; right: 0; }
#article #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) }
#article #slider .centered { z-index: 1; position: relative; padding-top: 110px;}
#article #slider h1 { width: auto; float: left; color: #fff; font-size: 50px; line-height: 50px; font-weight: 300; font-family: Oswald  }
#article #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) {
    #article #slider { width: 100%; display: block; height: 200px; position: relative; z-index: 9997; top: 100px;  }
    #article #slider .slide { height: 200px; width: 100%; position: absolute; z-index: 0; top: 0; left: 0; bottom: 0; right: 0; }
    #article #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) }
    #article #slider .centered { z-index: 1; position: relative; padding-top: 60px; width: calc(100% - 20px); margin-left: 20px}
    #article #slider h1 { width: auto; float: left; color: #fff; font-size: 40px; line-height: 40px; font-weight: 300; font-family: Oswald  }
}



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

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

#article .btn__container { float: right; }
#article .social_img { float: left; margin: 5px; width: 30px; cursor: pointer; opacity: 0.9 }
#article .social_img:hover { opacity: 1 }

#article .content h2 { clear: both; font-size: 24px; font-family: Oswald; font-weight: 500; color:#000; letter-spacing: 1px; line-height: 24px; margin-bottom: 20px; text-transform: uppercase}
#article .content h3 { clear: both; font-size: 24px; font-family: Oswald; font-weight: 500; color:#b21959; letter-spacing: 1px; line-height: 24px; margin-bottom: 20px; text-transform: uppercase}
#article .content h3:after {
    transition: all ease-in-out .2s;
    background: #b21959;
    content: "";
    display: block;
    height: 3px;
    width: 70px;
    margin-left: 0px;
    margin-top: 10px;
}
#article .content h4 { clear: both; font-size: 24px; font-family: Galada, cursive; font-weight: 400; color:#000; line-height: 24px; margin-bottom: 20px;}
#article .content p { margin-bottom: 15px; font-family: 'Vollkorn', sans-serif; font-size: 18px; line-height: 30px; clear: both; float: left; width: 100%; }
#article .content a { color:#b21959;  }
#article .content a:hover { text-decoration: underline;  }
#article .content .container { width: 948px;} 
#article .content iframe { width: 800px; height: 500px; margin-left: 0px;}
#article .content .img_left { float: left; margin-right: 25px; margin-left: -50px; }
#article .content .img_right { float: right; margin-left: 25px; margin-right: -50px; }
#article .content .img_full { float: left; margin: 0px; width: 100%; }
#article .content .img_centered { display: table; margin: auto; }
#article .content .half_left { float: left; margin-right: 5px; }
#article .content .half_right { float: right; margin-left: 5px; }

#article .success_comment { padding: 12px 25px 11px; width: calc(100% - 52px); font-size: 16px; color: #3c763d; border: 1px solid rgba(0,0,0,.2); font-weight: 300; letter-spacing: 1px; background: #dff0d8; margin-bottom: 20px; display:none }
#article .form_comment { width: calc(100% - 40px); padding: 20px; background: #fff; }
#article .input { padding: 12px 25px 11px; width: calc(100% - 52px); font-size: 16px; font-family: 'Vollkorn', sans-serif; font-weight: 300; border: 1px solid rgba(0,0,0,.2); -webkit-appearance: none; border-radius: 0;}
#article .inputtext { padding: 12px 25px 11px; width: calc(100% - 52px); height: 100px; font-size: 16px; font-family: 'Vollkorn', sans-serif; font-weight: 300; border: 1px solid rgba(0,0,0,.2); -webkit-appearance: none; border-radius: 0;}
#article .button { display:block; float: left; line-height: 50px; font-size: 18px; width: 100%; text-align: center; color: #fff; font-weight: 300; letter-spacing: 1px; background: #000; transition: .3s all; cursor: pointer}
#article .button:hover { background: #b21959; color:#fff }

#article .comment { width: calc(100% - 40px); padding: 20px; background: #fff; font-family: 'Vollkorn', sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; }
#article .comment strong { color:#b21959  }
#article .comment .date { float: right;  font-family: 'Vollkorn', sans-serif; font-weight: 400; font-size: 13px; color: #666; }

@media (max-width: 767px) {
    #article .content p { margin-bottom: 10px; font-family: 'Vollkorn', sans-serif; font-size: 18px; line-height: 26px; width: 100%; }
    #article .content iframe { width: 100%; height: 200px; margin-left: 0px;}
    #article .content .container { width: calc(100% - 40px); margin-left: 20px; }
    #article .content img { width: 100%; height: auto}
    #article .social_img { width: 30px !important;}
    #article .content .img_left { float: left; margin-right: 0px; margin-left: 0px; width: 100%; margin-bottom: 20px; }
    #article .content .img_full { float: left; margin-right: 0px; margin-left: 0px; width: 100%; margin-bottom: 20px; }
    #article .content .img_right { float: left; margin-right: 0px; margin-left: 0px; width: 100%; margin-bottom: 20px; }
    #article .content .img_centered { display: table; margin: auto; }
    #article .content .half_left { margin-right: 0px; margin-bottom: 10px; }
    #article .content .half_right { margin-left: 0px; }

}