/*
File:			custom.css
Description:	Custom styles for Your Theme

HOW TO USE THIS FILE:

Override any class you want and it will change default styling to suit your needs.

For example, if you wish to change the default text blog title to grey, you would add the 
following declarations to this file:

	#header .blog-title a{ background:#cccccc }     <--- This makes blog title background grey

*/

@media screen and (max-width: 980px) {
    #header { padding: 1%; }
    #top_nav { display: none; }
    #banner { padding: 0; width: 100%; overflow: hidden; }
    #banner .productrays { top: 0px; background: transparent; padding: 0; left: 25px; }
    .header-in { width: 100%; float: none; z-index: 999; }
    #header #logo-spot { width: 100%; }
    #logo-spot h1.logo { width: 100%; text-align: right; padding: 0; }
    #banner .product_desc { width: 63%; position: relative; padding-left: 34%; padding-right: 0; top: 90px; z-index: 999; }
    .container_12, .container_16 { width: 100%; }
    #banner .buttonbar p { margin-top: 3px; width: 100%; text-align: center; }
    #banner .action_button { margin-top: 0px; float: none; display: inline-block; margin-left: -65px; }
    #wrapper { padding: 0; width: 100%; margin: 0; }
    .container_12 .grid_4 { width: 100%; margin: 0 0 25px; }
    .feature_box.grid_4.aleft > div { display: inline-block; vertical-align: top; }
    .imgbox { width: 15%; text-align: center; }
    .feature_box_content { width: 80%; }
}

@media screen and (max-width: 930px) {
    #content-blog { float: none; width: 96%; padding: 1% 2%; margin: 0; display: block; }
    #sidebar-blog { border-left: none; width: 40%; padding: 1% 20%; margin: auto; text-align: center; }
    #sidebar-blog > .widget { padding: 0; margin: 0; width: 100%; min-width: 280px; text-align: center; }
    #sidebar-blog > .widget .textwidget img { margin: 10px auto; float: none; }
    #sidebar-blog .widget li { width: 96%; }
}

@media screen and (max-width: 860px) {
    #header { background: #101417; }
    #banner h2 span { font-size: 2rem !important; }
    #banner .product_desc { width: 55%; padding-left: 40%; top: 60px;}
    #banner .product_desc > p > span { font-size: 18px !important; }
    #footer { padding: 10px 0 0; }
    #footer .aleft { width: 100%; text-align: center; color: white; }
    #footer .designby { padding: 0; float: none; }
    #footer .designby a { color: #e4e4e4; }
    .category #footer .designby a, .category #footer .aleft, .page #footer .designby a, .page #footer .aleft { color: black; }
}

@media screen and (max-width: 730px) {
    #banner .product_desc { width: 50%; padding-left: 47%; padding-top: 10%; }
    #banner .product_desc > p > span { font-size: 12px !important; }
    #banner .product_desc > p > span > span { font-size: 14px !important; }
}

@media screen and (max-width: 640px) {
    #banner .product_desc { width: 100%; padding-left: 0%; top: 65px; }
    #banner .productrays { left: 0px; top: 75px; position: relative; text-align: center; width: 100%; }
    .productrays img { float: none; }
    .imgbox img { width: 100%; height: auto; }
    #content-in { float: none; width: 96%; margin: 0; padding: 0 2%; display: block; }
    #content-in .posts .entry img { width: 100%; max-width: 300px; float: none; padding: 0 !important; display: block; margin: auto; }
}

@media screen and (max-width: 480px) {
    #header { overflow: hidden; background: #f5f5f5 url(skins/2-black/headerbg.jpg) repeat-x top; }
    #banner .product_desc { top: 40px; }
    #banner .productrays { top: 103px; }
    #sidebar-blog { width: 96%; padding: 2%; }
    #content-in .entry > div > div { width: 100%; margin-left: 0 !important; }
    #cformsform, #content-in .entry > div > div > form { width: 100%; }
    #cformsform input, #cformsform textarea { width: 100%; }
    #content-in .entry > div > div > form input, #content-in .entry > div > div > form textarea { width: 100%; }
    #cformsform span.reqtxt, #cformsform span.emailreqtxt { width: 100%; }
    .feature_box .imgbox { float: none; margin: auto; width: 35%; display: block !important; }
}

@media screen and (max-width: 440px) {
    #header #logo-spot { top: 10px; }
    #banner h2, #banner p { padding: 0 15px; }
    #banner .buttonbar p { margin-left: 0px; height: 40px; padding: 0; overflow: hidden; margin-bottom: 5px; }
    #banner .buttonbar p a { padding: 0; display: inline-block; margin: 0; float: none; text-align: center; }
    #banner .buttonbar p a img { margin: 0 !Important; }
    #banner .action_button { width: 100%; margin-left: 0px; text-align: center; background-image: none;     width: 70%; }
    #banner .action_button a { font-size: 16px; float: none; background-image: none; background-color: #ffca15; border-radius: 7px; border: #d77f00 solid 1px; transition: 700ms; }
    #banner .action_button a:hover { background-color: #ffa100; }
    .imgbox { width: 96%; }
    .imgbox img { width: auto; max-width: 100%; }
    .feature_box_content { width: 100%; margin-top: 10px; }
    #logo-spot img { max-width: 90px; }
}

@media screen and (max-width: 375px) {
    #banner .action_button { width: 76%; }
}

@media screen and (max-width: 320px) {
    #banner .action_button { width: 89%; }
}