﻿/*****************************************************************
    Responsive
*****************************************************************/

/*****************************************************************
    Tablet
*****************************************************************/
@media (max-width: 1024px) {
    .row { margin: 0 !important; }
    body .wrapper { width: 95%; }
    .small-wrapper { width: 95%; }
    .med-extra-wrapper { width: 98%; }
    .extra-wrapper { width: 99%; }
    body .zcmsdoor.visible-door { display: none; }
    .section-content h2 { font-size: 26px; }
    .section-content.neg-top { margin-top: -202px; }
    .section-content.top { margin-top: 206px; }
    .section-content.marg-top { margin-top: 267px; }
    .section-content h6 { font-size: 16px; }

    #Header { font-size: 14px; height: 145px;}
        #Header .wrapper { width: 80%; }
        #Header .col-md-6 { width: 50%; display: inline-block; float: left; padding:0; }
            #Header .col-md-6 ul { float:none; text-align:center !important; width:100% !important; margin:auto !important;}
        #Header .col-md-4 { width: 35%; display: inline-block; float: left; padding:0;}
            #Header .col-md-4 ul { float:none; text-align:center !important; width:100% !important; margin:auto !important; }
        #Header .col-md-2 { width: 15%; display: inline-block; float: left; padding:0;}

        #Header .menu { height: 80px; }
            #Header .menu .logo { background: url('/Content/app/images/sprites.png') -868px -148px; width: 132px; height: 138px; left: -22px; top: -25px; }
            #Header .menu ul { padding-left: 0 !important;  width: 75%; text-align: center; margin: auto;  }
            #Header .menu li { padding: 35px 10px; }
                #Header .menu ul li::after { top: 0; margin-left: 10px;}

    #Banner .flex-control-nav { display: none; }
    #Banner .flex-direction-nav a { }

    #HomeIndex img { max-width: 100%; }
    #HomeIndex .box-text img{ max-width: 100%;}
    #HomeIndex .image img{max-width: 100%;}

    .routes .time { font-size: 32px; }
    .routes .info .info-content { vertical-align: top; }

    #HomeContent .section-about { height: 535px; }
    #RoadmapsIndex .section-circuit { height: 535px; }
    #RoadmapsDetail .section-road { height: 535px; }
    #PartnersIndex .section-partners { height: 535px; }
    #PartnersDetail .section-detail { height: 535px; }
    #HomeContacts .section-contacts { height: 535px; }
    #HomeContacts .tablet-contact { text-align: center; margin-bottom:20px; }
    #HomeContacts .social { text-align: left; }

    #RoadmapsIndex img { max-width: 100%; }
    #RoadmapsIndex .route .link { width: 100%; font-size: 15px; }
    #RoadmapsIndex .route .time { font-size: 19px; }
    #RoadmapsIndex .route { width: 33.33333% !important; float: left; display: inline-block; }
    #RoadmapsIndex .black-line { background: url('/Content/app/images/sprites.png') -205px -190px; width: 224px; height: 8px; display: block; }
    #RoadmapsIndex .med-blue-line { background: url('/Content/app/images/sprites.png') -202px -203px; width: 227px; height: 8px; display: block; }
    #RoadmapsIndex .route .info .info-content .price { font-size: 13px; }
    #RoadmapsIndex .route .info .info-content { width: auto; }
    #RoadmapsIndex .options .col-md-4 { width: 33.33333%; display: inline-block; float: left; }

    #RoadmapsDetail img { max-width: 100%; }
    #RoadmapsDetail .col-md-6 { width: 50%; display: inline-block; float: left; }
    #PartnersDetail .image img { max-width: 100%; }


    #PartnersIndex img { max-width: 100%; }
    #PartnersIndex .col-md-3 { width: 25%; display: inline-block; float: left; padding: 0 !important; }

    #Footer .circle.bggreen { margin-top: 0; }
    #Footer .small-wrapper { width: 85%; }
    #Footer .wrapper { width: 100%; }
    #Footer .footer-top { padding: 20px 0 0 0; }
    #Footer .section-brown ul { padding-left: 0; width: 100%; text-align: center; margin: auto; }
        #Footer .footer-top .col-md-5 { width: 40%; display: inline-block; float: left; }
        #Footer .footer-top .col-md-2 { width: 20%; display: inline-block; float: left; }
    #Footer .footer-center .col-md-5 { width: 40%; display: inline-block; float: left; }
    #Footer .footer-center .col-md-2 { width: 2%; display: inline-block; float: right; }
    #Footer .footer-center .icon-coop, .icon-logotipo { margin-right: 8px; }
    #Footer .footer-center .address { margin-right: 0; }
    #Footer .line { display: none; }


    #HomeContent img { max-width: 100%; }
}


/*****************************************************************
    Medium Devices
*****************************************************************/
@media (max-width: 768px) {
    .med-wrapper { width: 100%; }
    .section-content.neg-top { margin-top: -213px; }
    .section-content.top { margin-top: 115px; }
    .section-content.marg-top { margin-top: 144px; }
    .section-content h1 { font-family: 'LeituraDisplay-Swashes'; font-size: 46px; }
    .section-content h3 { font-size: 37px; }


    .routes .info .info-content .price { font-size: 18px; }
    .routes .info .info-content .icons { right: 0; }
    .routes h2 { font-size: 42px; }
    .routes .back { position: absolute; top: 1400px;  }


        #Banner .flex-direction-nav { display: none; }

    #Mobile { display: block; background-color: #452C28; padding-bottom: 15px; position: fixed;  margin-top: 15px; width: 100%; }
        #Mobile .fa-bars { font-size: 34px; color: #86C2EB; cursor: pointer; margin-left: 0; margin-top: 15px; }
        #Mobile .nav-bar { display: none; margin-bottom: -16px; }
        #Mobile .show-nav { list-style: none; position: relative; display: inline-table; padding: 0; width: 100%;  padding-top: 25px;}
        #Mobile ul li { padding: 5px 0; padding-left: 10px; }
            #Mobile ul li a { color: #86C2EB; }
                #Mobile ul li a:hover { color: #e4dcc7; }
        #Mobile .icon-logotipo { position: absolute; z-index: 1; right: 0; top: 10px; }
        #Mobile .logo { background: url('../images/sprites.png') -774px -163px; width: 88px; height: 89px; display: block; position: absolute; top: -10px; right: 0; left: 0; margin: auto; }


    #HomeContent .section-about { height: 324px !important; }
    #RoadmapsIndex .section-circuit { height: 370px; }
    #RoadmapsIndex .route { width: 50% !important; float: left; display: inline-block; }
        #RoadmapsIndex .route .time { right: -17px; }
    #RoadmapsIndex .options .col-md-4 { width: 50%; display: inline-block; float: left; }


    #RoadmapsDetail .section-road { height: 400px; }
    #RoadmapsDetail .col-md-6 { width: 100%; }
    #RoadmapsDetail .image-map { margin-bottom: 20px; margin-top:20px; }


    #PartnersIndex .section-partners { height: 400px; }

    #PartnersDetail .section-detail { height: 400px; }


    #HomeContacts .section-contacts { height: 350px; }
    #HomeContacts .tablet-contact { text-align: center; margin-bottom:20px; }
    #HomeContacts .logo { background: url('/Content/app/images/sprites.png') -868px -148px; width: 132px; height: 138px; }
    #HomeContacts .social { margin-top: 0; text-align: left; }

    #Header .language { top: -60px; right: 130px; }
        #Header .language .active { color: antiquewhite !important; }
    #Header .menu { display: none; }
    #Footer .section-brown ul { padding-left: 0; width: 100%; margin: auto;}
        #Footer .section-brown ul li { padding: 23px 5px; }
            #Footer .section-brown ul li a { font-size: 14px; }

#Footer .footer-top { display: none; }
    #Footer .footer-center .col-md-5 { width: 100%; text-align:center; padding:0; margin:10px 0; }
    #Footer .footer-center .address { text-align: left;  margin-top:0; float:none; display: inline-block;}
    #Footer .circle.bggreen { margin-top: -136px; }
    #Footer .footer-center .icon-coop, .icon-logotipo { float: none !important; }

    #Footer .right { margin-right: 0; }
    #Footer .footer-center { padding: 0; }
    #Footer .footer-bottom .copyright { padding-left: 5px; }
    #Footer .footer-bottom .icon-agencia { margin-right: 5px; }
    #Footer .footer-center .icon-coop, .icon-logotipo { float: left; }


    .icon.icon-line { background: url('/Content/app/images/sprites.png') -700px -163px; width: 63px; height: 6px; }
}

/*****************************************************************
    Smartphones
*****************************************************************/
@media (max-width: 500px) {
    .section-content .white-line { margin-top: 10px; margin-bottom: 10px; background: url('/Content/app/images/sprites.png') -202px -220px; width:227px; height:9px;}
    .blue-line { background: url('/Content/app/images/sprites.png') -202px -203px; width: 227px; height: 8px;}
    .section-content h2 { font-size: 22px; }
    .section-content h6 { font-size: 14px; }
    .section-content.neg-top { margin-top: -196px; }

    .routes.orange .time { top: 180px; }
    .routes .extra-black-line { background: url('/Content/app/images/sprites.png') -205px -190px; width: 224px; height: 8px; display: block; }

    #RoadmapsIndex .route { width: 100% !important; }
        #RoadmapsIndex .route .time { right: -17px; }
    #RoadmapsIndex .options .col-md-4 { width: 100%; }
    #RoadmapsIndex .route .info .info-content.left { padding-left: 10px; }

    #HomeIndex img {  max-width: none;  width: 660px !important; }


	#HomeContent .content-box h4{font-size: 22px;}


    #PartnersIndex .col-md-3 { width: 50%; display: inline-block; float: left; }

    #PartnersDetail .blue-line { background: url('/Content/app/images/sprites.png') -202px -203px; width: 227px; height: 8px; display: block; }

    #HomeContacts .blue-line { background: url('/Content/app/images/sprites.png') -202px -203px; width: 227px; height: 8px; display: block; }
	#HomeContacts .social .dress{margin-left: 5px;}

    #Footer .small-wrapper { width: 100%; }
    #Footer .section-brown ul li { padding: 7px 5px;  }
    #Footer .section-brown ul { text-align: center; }
    #Footer .footer-center .address { text-align: left; float: left; margin-top:10px;  margin-left:5px;}
    #Footer .footer-center .icon-coop, .icon-logotipo { float: none; }
    #Footer .circle.bggreen { margin-top: -103px; }

    #Footer .icon.icon-projects { background: url('/Content/app/images/sprites.png') -287px -101px; width: 253px; height: 30px; }
    
}
