/****************************************************************************
( 1024 X 768)
****************************************************************************/
@media only screen and (min-width: 959px) and (max-width: 1024px)
{
    .logo { display: inline-block; margin: 0px 13px; }
    nav ul li  { float: left; margin: 0px 24px; }

    .about-wrap {margin-bottom: 70px; }
    .about figure {width: 300px; height: 267px; margin-bottom: 30px;}
    .about > div {width: 300px;margin-left: 20px; margin-bottom: 30px;}

    .progress-bar { margin-bottom: 22px; width: 300px;}
    .progress-bar { width:300px; }

    .our-team {width: 884px; margin:0 auto;}
    .blog {width: 884px; margin:0 auto;}
    .our-team > div { margin-bottom: 30px; }
    .work_detail > div { width: 850px; margin: 0 auto; }
    .header_two {height: 634px;}

    .our-services { width: 400px;margin-right: 0px; margin-bottom: 30px; }
    .our-services ul li { padding-left: 15px; }
    .services-list { width: 753px; margin: 0 auto; }
    .header_three h2 {margin: 70px 0px 0px 0px;  width: 691px}

    .our-team > div { margin-bottom: 30px; }

    our-services { width: 400px;margin-right: 0px; margin-bottom: 30px; }
    .services-list { width: 753px; margin: 0 auto; }
    .header_three h2 {margin: 70px 0px 0px 0px;  width: 691px}

    .work_item { width: 700px; margin: 0px auto 0px;}
    .work_item .element {width: 267px; margin: 0px 25px 50px;}

    .blog article { width: 300px; margin:0px 10px 38px;}

    .blog article figure { width: 300px; height: 195px; }
    .blog article figure a { width: 300px; height: 200px;}
    .blog article figure .overlay {width: 290px; height: 170px;}
    .blog article div { text-align: left; padding:0px 15px 30px; }


    .single {text-align: center;background: #292d33; position: relative; display: none; }
    .single h3 { color: #ffffff; margin-bottom: 3px; }


    .single article {padding: 66px 0px; width: 570px; margin: 0 auto;}

    .single article figure { width: 570px; height: 410px;}
    .single article figure a { width: 570px; height: 200px; display: block; }

    .comments { width: 730px; margin: 0 auto 20px;}
    .comments li .commernt-detail { width: 593px;float: left; }
    .children li .commernt-detail { width: 470px;}

    .contact-wrap .map {display: inline-block; margin-right: 0px}
    #map_canvas {width: 350px; height: 500px;}

    .contact_form { width: 350px; display: inline-block; }
    .contact_form input[type="text"] {width: 350px; }
    .contact_form textarea {width: 350px;  }

    footer h2 {  display: inline-block; margin-top: 70px; margin-bottom: 40px; color: #ffffff;}
    footer .social_icon a {  margin: 0px 0px 40px 50px;   }

    .comment-form { width: 570px; }
    .comment-form input[type="text"] {width: 184px; }
    .comment-form textarea {width: 548px;  }

    #timeline {margin-left: 20px;width: 290px;}
    #issues {height: 287px;}
    #issues li {width: 290px;height: 236px;}
    #issues li img {width: 100%;}
    #scrrol-bg { width: 288px;}
    .scrrol_btn { width: 290px;}
    #dates li {margin: 0px 18px;}
    #dates {width: 283px !important;}

}
/****************************************************************************
(800 X 600) + (768 X 1024)
****************************************************************************/
@media only screen and (min-width: 768px) and (max-width: 959px)
{
    h1 {font-size: 50px;}
    div#hidden_menu header, header {  height: 123px;line-height: 138px; background: rgba(0,0,0,0.8);}
    nav ul {display:inline-block;}
    .logo { display: inline-block; margin: 5px 0px 0px; }
    .logo a img { vertical-align: middle; }
    .responsive-nav {display: none; }
    nav ul li {margin: 0px 13px;}


    #slidecaption a { width: 400px !important; height: 350px !important; display: inline-block; margin-left: -200px; margin-top: -175px;}
    ul#slide-list {margin-left: -150px; width: 300px !important;}
    #slidecaption { margin-top: 7% !important;}

    .about-wrap {margin-bottom: 70px; }
    .about figure {width: 570px; height: 300px; margin-bottom: 30px;}
    .about > div {width: 570px;margin-left: 0px; margin-bottom: 30px;}

    .progress-bar { margin-bottom: 22px; width: 570px;}
    .progress-bar { width: 570px; }

    .our-team {width: 600px; margin:0 auto;}
    .blog {width: 700px; margin:0 auto;}
    .our-team > div { margin-bottom: 30px; }

    .header_two {height: 634px;}

    .our-services { width: 400px;margin-right: 0px; margin-bottom: 30px; }
    .our-services ul li { padding-left: 15px; }
    .services-list { width: 753px; margin: 0 auto; }
    .header_three h2 {margin: 70px 0px 0px 0px;  width: 691px}

    .work_item { width: 570px; margin: 0px auto 0px;}
    .work_item .element {width: 267px; margin: 0px 5px 50px;}
    .work_detail > div { width: 750px; margin: 0 auto; }
    .blog article { width: 300px; margin:0px 10px 38px;}

    .blog article figure { width: 300px; height: 195px; }
    .blog article figure a { width: 300px; height: 200px;}
    .blog article figure .overlay {width: 274px; height: 170px;}
    .blog article div { text-align: left; padding:0px 15px 30px; }


    .single {text-align: center;background: #292d33; position: relative; display: none; }
    .single h3 { color: #ffffff; margin-bottom: 3px; }


    .single article {padding: 66px 0px; width: 570px; margin: 0 auto;}

    .single article figure { width: 570px; height: 410px;}
    .single article figure a { width: 570px; height: 200px; display: block; }

    .comments { width: 730px; margin: 0 auto 20px;}
    .comments li .commernt-detail { width: 593px;float: left; }
    .children li .commernt-detail { width: 470px;}

    .contact-wrap .map {display: inline-block; margin-right: 0px}
    #map_canvas {width: 350px; height: 500px;}

    .contact_form { width: 350px; display: inline-block; }
    .contact_form input[type="text"] {width: 350px; }
    .contact_form textarea {width: 350px;  }

    footer h2 {  display: inline-block; margin-top: 70px; margin-bottom: 40px; color: #ffffff;}
    footer .social_icon a {  margin: 0px 0px 40px 20px;   }

    .comment-form { width: 570px; }
    .comment-form input[type="text"] {width: 184px; }
    .comment-form textarea {width: 548px;  }


    #timeline {margin-left: 20px;width: 290px;}
    #issues {height: 287px;}
    #issues li {width: 290px;height: 236px;}
    #issues li img {width: 100%;}
    #scrrol-bg { width: 288px;}
    .scrrol_btn { width: 290px;}
    #dates li {margin: 0px 18px;}
    #dates {width: 283px !important;}
}


/****************************************************************************
(768)
****************************************************************************/
@media only screen and ( max-width: 768px )
{

    h1 {font-size: 50px;}
    div#hidden_menu header, header {  height: 123px;line-height: 138px;  background: rgba(0,0,0,0.8);}
    nav ul {display:inline-block;}
    .logo { display: inline-block; margin: 5px 0px 0px; }
    .logo a img { vertical-align: middle; }
    .responsive-nav {display: none; }
    nav ul li {margin: 0px 13px;}

    #slidecaption a {width: 400px !important; height: 350px !important; display: inline-block; margin-left: -200px; margin-top: -175px;}
    ul#slide-list {margin-left: -150px; width: 300px !important;}
    #slidecaption { margin-top: 25% !important;}

    .about-wrap {margin-bottom: 70px; }
    .about figure {width: 570px; height: 300px; margin-bottom: 30px;}
    .about > div {width: 570px;margin-left: 0px; margin-bottom: 30px;}

    .progress-bar { margin-bottom: 22px; width: 570px;}
    .progress-bar { width: 570px; }

    .our-team {width: 600px; margin:0 auto;}
    .blog {width: 700px; margin:0 auto;}
    .our-team > div { margin-bottom: 30px; }

    .header_two {height: 634px;}

    .our-services { width: 400px;margin-right: 0px; margin-bottom: 30px; }
    .our-services ul li { padding-left: 15px; }
    .services-list { width: 753px; margin: 0 auto; }
    .header_three h2 {margin: 70px 0px 0px 0px;  width: 691px}

    .work_item { width: 570px; margin: 0px auto 0px;}
    .work_item .element {width: 267px; margin: 0px 5px 50px;}
    .work_detail > div { width: 750px; margin: 0 auto; }

    .blog article { width: 300px; margin:0px 10px 38px;}

    .blog article figure { width: 300px; height: 195px; }
    .blog article figure a { width: 300px; height: 200px;}
    .blog article figure .overlay {width: 274px; height: 170px;}
    .blog article div { text-align: left; padding:0px 15px 30px; }


    .single {text-align: center;background: #292d33; position: relative; display: none; }
    .single h3 { color: #ffffff; margin-bottom: 3px; }


    .single article {padding: 66px 0px; width: 570px; margin: 0 auto;}

    .single article figure { width: 570px; height: 410px;}
    .single article figure a { width: 570px; height: 200px; display: block; }

    .comments { width: 730px; margin: 0 auto 20px;}
    .comments li .commernt-detail { width: 593px;float: left; }
    .children li .commernt-detail { width: 470px;}

    .contact-wrap .map {display: inline-block; margin-right: 0px}
    #map_canvas {width: 350px; height: 500px;}

    .contact_form { width: 350px; display: inline-block; }
    .contact_form input[type="text"] {width: 350px; }
    .contact_form textarea {width: 350px;  }

    footer h2 {  display: inline-block; margin-top: 70px; margin-bottom: 40px; color: #ffffff;}
    footer .social_icon a {  margin: 0px 0px 40px 20px;   }

    .comment-form { width: 570px; }
    .comment-form input[type="text"] {width: 184px; }
    .comment-form textarea {width: 548px;  }


    #timeline {margin-left: 20px;width: 290px;}
    #issues {height: 287px;}
    #issues li {width: 290px;height: 236px;}
    #issues li img {width: 100%;}
    #scrrol-bg { width: 288px;}
    .scrrol_btn { width: 290px;}
    #dates li {margin: 0px 18px;}
    #dates {width: 283px !important;}


}


/****************************************************************************
(600 X 800)
****************************************************************************/
@media only screen and (min-width: 481px) and (max-width: 767px)
{
    h1 {font-size: 50px;}
    div#hidden_menu header, header{  height: 123px;line-height: 57px; background: rgba(0,0,0,0.8);}
    nav ul {display: none;}
    .logo { display: inline-block; margin: 5px 0px 0px; }
    .logo a img { vertical-align: middle; }
    .responsive-nav {display: block; }

    #slidecaption a { width: 350px !important; height: 300px !important; display: inline-block; margin-left: -175px; margin-top: -150px;}
    ul#slide-list {margin-left: -150px; width: 300px !important;}
    #slidecaption { margin-top: 25% !important;}

    .about-wrap {margin-bottom: 70px; }
    .about figure {width: 570px; height: 300px; margin-bottom: 30px;}
    .about > div {width: 570px;margin-left: 0px; margin-bottom: 30px;}

    .progress-bar { margin-bottom: 22px; width: 570px;}
    .progress-bar { width: 570px; }


    .our-team figure {width: 540px; height: 300px;}
    .our-team figure .overlay .social-icon{line-height: 300px;}
    .our-team figure a {width: 540px; height: 300px;}
    .our-team figure img { width: 100%; height: 100%; }

    .our-team {width: 570px; margin:0 auto;}
    .blog {width: 570px; margin:0 auto;}
    .our-team div {width: 540px; margin-right:0px; text-align: left; display: inline-block; }
    .our-team > div { margin-bottom: 30px; }

    .header_two {height: 834px;}
    .header_two h2 { margin: 100px 20px; color: #ffffff; }
    .header_two  .header-slider { width: 100%; height: 527px;}

    .header_two .header-btn {margin-left: -150px; width: 300px;}

    .our-services { width: 570px;margin-right: 0px; margin-bottom: 30px; }
    .our-services ul li { padding-left: 15px; }

    .services-list { width: 570px; margin: 0 auto; }
    .services-list > div { width: 550px;margin-left: 10px;  margin-bottom: 70px;}
    .services-list > div div { width: 450px; float: right;  }


    .header_three h2 {margin: 70px 0px 0px 0px;  width: 280px}


    .work-wrap { text-align: center; margin-bottom: 50px; }
    .work-wrap h2 {  display: inline-block; margin-bottom: 52px;  }

    .portfolio-nav li { margin-left: 6px }
    .portfolio-nav li a {  padding: 5px 8px;}

    .work_item { width: 570px; margin: 0px auto 0px;}
    .work_item .element {width: 267px; margin: 0px 5px 50px;}

    .work_detail figure { width: 570px; margin: 0 auto 20px; float: none;}
    .work_detail .detail { width: 90%; float: none; margin: 0 auto 20px; }
    .work_detail > div { width: 580px; margin: 0 auto; }
    .close {position: absolute; right: 15px; top: 20px;}

    .header_four .blog-slider .slides div { width: 570px;margin: 80px auto; }

    .header_four .header-nav {margin-left: -150px; width: 300px;}


    .blog article { width: 270px; margin:0px auto 38px;}

    .blog article figure { width: 270px; height: 195px; }
    .blog article figure a { width: 270px; height: 200px;}
    .blog article figure .overlay {width: 250px; height: 170px;}
    .blog article div { text-align: left; padding:0px 5px 30px; }


    .single {text-align: center;background: #292d33; position: relative; display: none; }
    .single h3 { color: #ffffff; margin-bottom: 3px; }


    .single article {padding: 66px 0px; width: 570px; margin: 0 auto;}

    .single article figure { width: 570px; height: 410px;}
    .single article figure a { width: 570px; height: 200px; display: block; }

    .comments { width: 570px; margin: 0 auto 20px;}
    .comments li .commernt-detail { width: 400px;float: left; }
    .children { padding-left: 0px; margin-left: 0px; background:none; }
    .children li .commernt-detail { width: 400px;}

    .header_five .contact-header { width: 570px;margin: 0px auto; }

    .contact-wrap .map {display: inline-block; margin-right: 0px}
    #map_canvas {width: 554px; height: 304px;}

    .contact_form { width: 570px; display: inline-block; }
    .contact_form input[type="text"] {width: 530px; }
    .contact_form textarea {width: 530px;  }

    .comment-form { width: 570px; }
    .comment-form input[type="text"] {width: 184px; }
    .comment-form textarea {width: 548px;  }

    footer h2 {  display: inline-block; margin-top: 100px; margin-bottom: 60px; color: #ffffff;}
    footer .social_icon a {  margin: 0px 0px 40px 20px;   }

}


/****************************************************************************
{320 X 480} + (480 X 320)
****************************************************************************/
@media only screen and (max-width: 480px)
{
    h1 {font-size: 50px;}
    div#hidden_menu header, header {  height: 127px;line-height: 60px; background: rgba(0,0,0,0.8);}
    nav ul {display: none;}
    .logo { display: inline-block; margin: 5px 0px 5px; }
    .logo a img { vertical-align: middle; }
    .responsive-nav {display: block; }

    #slidecaption a { width: 150px !important; height: 150px !important; display: inline-block; margin-left: -75px; margin-top: -75px;}
    ul#slide-list {margin-left: -150px; width: 300px !important;}
    #slidecaption { height: 370px !important;;margin-top: 0px !important; }

    .about-wrap {margin-bottom: 70px; }

    .about figure {width: 290px; height: 200px; margin-bottom: 30px;}
    .about > div {width: 290px;margin-left: 0px; margin-bottom: 30px;}

    .progress-bar { margin-bottom: 22px; width: 290px;}
    .progress-bar { width: 290px; }
    .our-team figure {width: 259px;}

    .our-team {width: 290px; margin:0 auto;}
    .blog {width: 290px; margin:0 auto;}
    .our-team div {width: 259px; margin-right:0px; text-align: left; display: inline-block; }
    .our-team > div { margin-bottom: 30px; }

    .header_two {display: none !important;}
    .header_two h2 { margin: 100px 20px; color: #ffffff; }
    .header_two  .header-slider { width: 100%; height: 527px;}

    .header_two .header-btn {margin-left: -150px; width: 300px;}

    .our-services { width: 290px;margin-right: 0px; margin-bottom: 30px; }
    .our-services ul li { padding-left: 15px; }

    .services-list { width: 290px; margin: 0 auto; }
    .services-list > div { width: 270px;margin-left: 10px;  margin-bottom: 70px;}
    .services-list > div div { width: 200px; float: right;  }


    .header_three h2 {margin: 70px 0px 0px 0px;  width: 280px}


    .work-wrap { text-align: center; margin-bottom: 50px; }
    .work-wrap h2 {  display: inline-block; margin-bottom: 52px;  }

    .portfolio-nav li { margin-left: 6px }
    .portfolio-nav li a {  padding: 5px 8px;}

    .work_item { width: 290px; margin: 0px auto 0px;}
    .work_item .element {width: 268px; margin: 0px 5px 50px;}

    .work_detail figure { width: 290px; margin: 0 auto 20px; float: none;}
    .work_detail .detail { width: 100%; float: none; margin: 0 auto 20px; }
    .work_detail > div { width: 100%; margin: 0 auto; }
    .close {position: absolute; right: 15px; top: 20px;}

    .header_four .blog-slider .slides div { width: 290px;margin: 80px auto; }

    .header_four .header-nav {margin-left: -150px; width: 300px;}


    .blog article { width: 290px; margin:0px auto 38px;}

    .blog article figure { width: 290px; height: 220px; }
    .blog article figure a { width: 290px; height: 220px;}
    .blog article figure .overlay {width: 281px; height: 189px;}
    .blog article div { text-align: left; padding:0px 5px 30px; }


    .single {text-align: center;background: #292d33; position: relative; display: none; }
    .single h3 { color: #ffffff; margin-bottom: 3px; }


    .single article {padding: 66px 0px; width: 290px; margin: 0 auto;}

    .single article figure { width: 290px; height: 410px;}
    .single article figure a { width: 2900px; height: 200px; display: block; }

    .comments { width: 290px; margin: 0 auto 20px;}

    .comments li .commernt-detail { width: 146px;float: left; }

    .children { padding-left: 0px; margin-left: 0px; background:none; }
    .children li .commernt-detail { width: 146px;}

    .header_five  .contact-header { width: 290px;margin: 0px auto; }

    .contact-wrap .map {display: inline-block; margin-right: 0px}
    #map_canvas {width: 290px; height: 304px;}
    .map .overlay { display: none; }

    .contact_form { width: 290px; display: inline-block; }
    .contact_form input[type="text"] {width: 270px; }
    .contact_form textarea {width: 270px;  }

    .comment-form { width: 290px; }
    .comment-form input[type="text"] {width: 270px; }
    .comment-form textarea {width: 270px;  }

    footer h2 {  display: inline-block; margin-top: 70px; margin-bottom: 40px; color: #ffffff;}
    footer .social_icon a {  margin: 0px 0px 40px 20px;   }

    #timeline {margin-left: 0px;width: 290px;margin: 20px auto;}
    #issues {height: 246px;}
    #issues li {width: 290px;height: 236px;}
    #issues li img {width: 100%;}
    #scrrol-bg { width: 288px;}
    .scrrol_btn { width: 290px;}
    #dates li {margin: 0px 18px;}
    #dates {width: 283px !important;}


}