/** MOBILE PHONE **/
@media only screen and (max-width: 468px) {

    /** HEADER **/
    .header-menu-view ul li i { margin-left: 0px !important; font-size:20px;  }

    /** FULL CAROUSEL **/
    .full-carousel .swiper-slide-content { padding:0px 20px; }
    .full-carousel .swiper-slide-content p { font-size:13px; }
    .full-carousel .swiper-slide-content h1 { font-size:40px !important; }

    /** SMALL CAROUSEL **/
    .small-carousel .swiper-slide-image { height: 200px; }
    .small-carousel .swiper-slide:hover .swiper-slide-image { height:200px; }

    /** HOVER CAROUSEL **/

    .hover-carousel .swiper-slide a { position:absolute; width:100%; height:100%; }

    /** COVER CAROUSEL **/
    .cover-carousel .swiper-slide { height:100%; }
    .cover-carousel .swiper-slide-image { height:100%; }
    .cover-carousel .swiper-slide-content { padding:0px 40px; }
    .cover-carousel .swiper-slide:hover .swiper-slide-image { height:100%; }

    .cover-carousel .swiper-slide-content p { font-size:18px; }
    .cover-carousel .swiper-slide-content h1 { font-size:80px; }


    /** SWIPER NUMBER **/
    .swiper-number ul li:nth-child(1) { font-size:14px; font-weight: 700; height:50px; line-height: 50px; margin-right:20px;  }
    .swiper-number ul li:nth-child(2) span { position:relative; display:block; width:20px; height:1px; background-color: #FFFFFF; border:0px; padding:0px; margin:0px; opacity:.8; margin-left:10px; margin-right:10px; }
    .swiper-number ul li:nth-child(3) { position:relative; display:block; width:50px; height:50px;  border-radius:50%; margin:0px 20px 0px 20px; border:solid 2px #FFFFFF; color:#FFFFFF; }
    .swiper-number ul li:nth-child(3):hover { border:solid 2px #FFFFFF; background-color: #FFFFFF; cursor: pointer; }
    .swiper-number ul li:nth-child(3):hover i { color:#000000; }
    .swiper-number ul li:nth-child(4) { position:relative; display:block; width:50px; height:50px;  border-radius:50%; border:solid 2px #FFFFFF; }
    .swiper-number ul li:nth-child(4):hover { border:solid 2px #FFFFFF; background-color: #FFFFFF; cursor:pointer; }
    .swiper-number ul li:nth-child(4):hover i { color:#000000; }
    .swiper-number ul li i { position:absolute; top:50%; left:50%; color:#FFFFFF; transform: translate(-50%, -50%); }
}


@media only screen and (max-width: 600px) {
    
    /** GENERAL **/
    .main-content { padding:0px 20px; }

    .slider-container { padding:0px 0px 0px 0px; }

    .space150 { height:75px; }
    .space100 { height:50px; }
    .space50 { height:25px; }
    .space80 { height:40px; }
    .space30 { height:20px; }

    /** HEADER **/
    header { padding:0px 20px; height:70px; }
    
    .header-logo img { width:38px; height:22px; }

    .header-menu-icon { display:block; }
    .header-menu-view { position:fixed; width:100%; height:100%; background-color:#000000; top:0px; left:0px; right:0px; bottom:0px; z-index:10006; display:none; opacity:0; }

    .header-menu-view.open { display:block; opacity:1; }

    .header-menu-view > ul { position:absolute; list-style: none; top:50%; left:50%; transform: translate(-50%, -50%); padding:0px; margin:0px; }
    .header-menu-view > ul > li { position:relative; display:block; font-size:24px; padding:10px 0px; }

    .header-menu-view ul li ul { position:relative; padding:10px 0px; left:0px; }
    .header-menu-view ul li ul li { padding:0px 15px; }

    /** PAGE TOP **/
    .page-caption { padding:120px 20px 0px 20px; }
    .page-inner p { font-size:14px; margin-bottom:10px; }
    .page-inner h1 { font-size:40px; margin-bottom:10px; }


    /** PAGE TOP IMAGE **/
    .top-image-content { padding:0px 20px; }
    .top-image-content h1 { font-size:40px; } 

    .top-content-scroll { font-size:12px; }

    /** SUB HEAD **/
    .sub-head { padding:0px 0px 20px 0px; }

    /** PAGE SERVICES **/
    .services-item { margin-bottom:20px; }
    .services-item-wrapper { padding:30px 20px; }
    .services-item-icon h4 { font-size:18px; }

    /** PAGE TEAM **/
    .team-detail-wrapper { padding:0px 0px; }
    .team-image img { -webkit-filter: grayscale(0%);  filter: grayscale(0%); opacity:1; }
    .team-detail { bottom:20px; padding:0px 20px; }

    /** PAGE PROJECTS **/
    .projects-item { margin-bottom:20px; }
    .projects-item:hover .projects-title { padding-left:50px; }

    .projects-title h2 { font-size:34px; }
    .projects-title span { left:20px;  }

    .projects-image { opacity:.5; }
    .projects-title { padding-left:50px; }

    /** PAGE CONTENT **/
    .content-date,
    .content-client,
    .content-service,
    .content-more { text-align: left; }

    .content-column { color:#FFFFFF; margin-top:20px;  }
    .content-column:first-child { margin-top:20px; }

    /** PAGE CONTACT **/
    .form-line { margin-bottom:20px; }
    .form-line input[type="submit"] { margin-top:0px; }

    .page-form .form-line:last-child { margin-bottom:0px; }

    /** FULL CAROUSEL **/
    .full-carousel .swiper-slide-content { padding:0px 20px; }
    .full-carousel .swiper-slide-content p { font-size:13px; }
    .full-carousel .swiper-slide-content h1 { font-size:54px; }

    /** HOVER CAROUSEL **/
    .hover-carousel .swiper-slide { height:100%; }
    .hover-carousel .swiper-slide-image { height:100%; }
    .hover-carousel .swiper-slide-content { padding:0px 20px; }

    .hover-carousel .swiper-slide-content p { font-size:14px !important; }
    .hover-carousel .swiper-slide-content h1 { font-size:50px !important; }

    /** COVER CAROUSEL **/
    .cover-carousel .swiper-slide { height:100%; }
    .cover-carousel .swiper-slide-image { height:100%; }
    .cover-carousel .swiper-slide-content { padding:0px 20px; }
    .cover-carousel .swiper-slide:hover .swiper-slide-image { height:100%; }


    /** FOOTER **/
    footer.showcase { padding:0px 20px; }
    
    .showcase .footer .swiper-social { display:none; }

}


/** TABLET **/
@media only screen and (min-width:600px) and (max-width: 768px) {
    
    /** GENERAL **/
    .main-content { padding:0px 40px; }

    .slider-container { padding:0px 0px 0px 0px !important; }

    .space150 { height:75px; }
    .space100 { height:50px; }
    .space50 { height:25px; }
    .space80 { height:40px; }
    .space30 { height:20px; }

    /** HEADER **/
    header { padding:0px 40px; height:100px; }
    
    .header-logo img { width:48px; height:28px; }

    .header-menu-icon { display:block; }
    .header-menu-view { position:fixed; width:100%; height:100%; background-color:#000000; top:0px; left:0px; right:0px; bottom:0px; z-index:10006; display:none; opacity:0; }

    .header-menu-view.open { display:block; opacity:1; }

    .header-menu-view > ul { position:absolute; list-style: none; top:50%; left:50%; transform: translate(-50%, -50%); padding:0px; margin:0px; }
    .header-menu-view > ul > li { position:relative; display:block; font-size:24px; padding:10px 0px; }

    .header-menu-view ul li ul { position:relative; padding:10px 0px; left:0px; }
    .header-menu-view ul li ul li { padding:0px 15px; }

    /** PAGE TOP **/
    .page-caption { padding:120px 40px 0px 40px; }
    .page-inner p { font-size:14px; margin-bottom:10px; }
    .page-inner h1 { font-size:60px; margin-bottom:10px; }


    /** PAGE TOP IMAGE **/
    .top-image-content { padding:0px 40px; }
    .top-image-content h1 { font-size:80px; } 
    .top-image-content p { font-size:18px; }

    .top-content-scroll { font-size:16px; }

    /** SUB HEAD **/
    .sub-head { padding:0px 0px 20px 0px; }

    /** PAGE SERVICES **/
    .services-item { margin-bottom:20px; }
    .services-item-wrapper { padding:30px 20px; }
    .services-item-icon h4 { font-size:18px; }

    /** PAGE TEAM **/
    .team-detail-wrapper { padding:0px 0px; }
    .team-image img { -webkit-filter: grayscale(0%);  filter: grayscale(0%); opacity:1; }
    .team-detail { bottom:20px; padding:0px 20px; }

    /** PAGE PROJECTS **/
    .projects-item { margin-bottom:20px; }
    .projects-item:hover .projects-title { padding-left:50px; }

    .projects-title h2 { font-size:34px; }
    .projects-title span { left:20px;  }

    .projects-image { opacity:.5; }
    .projects-title { padding-left:50px; }

    /** PAGE CONTENT **/
    .content-date,
    .content-client,
    .content-service,
    .content-more { text-align: left; }

    .content-column { color:#FFFFFF; margin-top:20px;  }
    .content-column:first-child { margin-top:20px; }

    /** PAGE CONTACT **/
    .form-line { margin-bottom:20px; }
    .form-line input[type="submit"] { margin-top:0px; }

    .page-form .form-line:last-child { margin-bottom:0px; }

    /** FULL CAROUSEL **/
    .full-carousel .swiper-slide-content { padding:0px 40px; }
    .full-carousel .swiper-slide-content p { font-size:16px; }
    .full-carousel .swiper-slide-content h1 { font-size:80px; }

    /** SMALL CAROUSEL **/
    .small-carousel .swiper-slide-content { padding:0px 25px;}
    .small-carousel .swiper-slide-content p { font-size:14px; }
    .small-carousel .swiper-slide-content h1 { font-size:54px; }
    .small-carousel .swiper-slide:hover .swiper-slide-image { height:320px; }

    /** HOVER CAROUSEL **/
    .hover-carousel .swiper-slide { height:100%; }
    .hover-carousel .swiper-slide-image { height:100%; }
    .hover-carousel .swiper-slide-content { padding:0px 40px; }

    .hover-carousel .swiper-slide-content p { font-size:18px; }
    .hover-carousel .swiper-slide-content h1 { font-size:80px; }

    .hover-carousel .swiper-slide a { position:absolute; width:100%; height:100%; }

    /** COVER CAROUSEL **/
    .cover-carousel .swiper-slide { height:100%; }
    .cover-carousel .swiper-slide-image { height:100%; }
    .cover-carousel .swiper-slide-content { padding:0px 40px; }
    .cover-carousel .swiper-slide:hover .swiper-slide-image { height:100%; }

    .cover-carousel .swiper-slide-content p { font-size:18px; }
    .cover-carousel .swiper-slide-content h1 { font-size:80px; }


    /** FOOTER **/
    footer.showcase { padding:0px 40px; }
    
    .showcase .footer .swiper-social { display:none; }

}

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

    /** GENERAL **/
    .slider-container { padding:0px 50px 0px 50px; }

    /** HEADER **/
    header { padding:0px 50px; height:100px; }

}

@media only screen and (min-width: 1200px) {

    .header-menu-view { display:block !important; opacity:1 !important; }
}