/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@font-face {
    font-family: superClarendon;
    src: url(../fonts/superclarendon_regular.ttf);
}

@font-face {
    font-family: newRepublic;
    src: url(../fonts/sf_new_republic.ttf);
}

@font-face {
    font-family: avenirNext;
    src: url(../fonts/avenir_next_ltpro_regular.otf);
}

h2 {
    font-family: superClarendon;
    color: #063453;
}

p {
    font-family: avenirNext;
    color: #063453;
}
.img-body {
    heigth: 400px;
    width: 500px;
}

.use-case p, .col-principal p {
    text-align : justify;	
    text-justify : auto;
    line-height: 2.3;
}

@media (min-width:1200px){
    .col-principal h2 {
        border-bottom: 1px solid #063453;
        border-top: 1px solid #063453;
        height: 80px;
        line-height: 80px;
        text-align: center;
        margin-top: -1px;
    }
}

@media (max-width:1199px){
    .col-principal h2 {
        border-bottom: 1px solid #063453;
        border-top: 1px solid #063453;
        height: 80px;
        line-height: 80px;
        text-align: center;
        margin-top: -1px;
        font-size: 24px;
    }
}


.col-principal {
    padding-left: 50px;
    padding-right: 50px;
}

.btn-container {
    border-bottom: 1px solid #063453;  
    padding-bottom: 15px;
}

#clientes {
    color: #f16222;
    min-width: 140px;
}

#intro {
    padding-top: 0px;
}

.intro-banner {
    background-color:rgba(255,255,255,0.6);
    min-height:  230px;
    line-height: 230px;
}

.intro-banner > p {
    font-family: superClarendon;
    font-size: 40px;
    color: #063453;
    text-align: center;
    opacity: 1;
}

.carousel-inner > .item > .row {
    height: 110px
}

.margins {
    max-width: 90%;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.use-case-left {
    margin-right: 25px;
}

.use-case-right {
    margin-left: 25px;
}

#web-screenshots {
    background: url("../img/background1.png");
    height: 564px;
}
           
#overlay-web {
    padding-top: 150px;
}

.break-flow > .row > .content > .col-sm-3 > p {
    font-size: 20px;
    color: white;
}

#break-service {
    background: url("../img/background2.png");
    height: 375px;
    border-top-style: solid;
    border-top-color: #f16222;
}

.break-flow > .row > .col-sm-4 > p {
    font-size: 20px;
    color: #063453;
}

#hardware {
    padding-top: 50px;
}

#hardware > p {
    padding-top: 30px;
}

.web-screenshot {
    height: 300px;
    border: 6px solid #93bed3;
    border-radius: 2px;
}

#manifesto {
    padding-top: 0px;
}

#equipo {
    height: 250px;
}

.contact-services {
    background: linear-gradient(#9ab4be, #6b8699); /* Standard syntax */
}

#use-cases {
    background-image: url(../img/circulos.png), linear-gradient(#9ab4be, #6b8699);
}

#footer {
    background: linear-gradient(#6b8699, #678396); /* Standard syntax */
    height: 120px;
    margin-top : -41px;
    overflow: hidden;
}

#footer-main {
    height: 120px;
    margin-top : -41px;
    overflow: hidden;
}

#footer  p, #footer-main p {
    color: white;
    font-family: superClarendon;
    line-height: 120px;
}

.circle {
    border: 3px solid #95afba;
    border-radius: 50%;
    height: 500px;
    float: none;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}

.img-circle {
    background-color: white;
    min-width: 80%;
}

.container-fluid { 
    overflow:hidden; 
    height:auto; 
    padding-bottom:37px; 
}

/*Uses default navbar styles when collapsed */
@media (min-width:768px){
    .navbar-default {
        height: 120px;
        background-image: linear-gradient(to bottom, white 0, white 0);
        border-color: white;
        opacity: 0.8;
        margin-top: -50px;
    }


    .navbar-default .navbar-nav li a {
        line-height: 118px;
        height: 118px;
        min-width: 136px;
        padding-top: 0;
        color: #063453;
        text-align: center;
        font-family: newRepublic;
        font-size: 20px;
    }

    .navbar-default .navbar-nav>.active>a {
        background: url("../img/selected.png");
        color: #93bed3;
        box-shadow: none;  
    }

    .navbar-brand img {
        max-height: 90px;
        margin-top: 0px;
    }
}

/*---MOVIL----*/
@media (max-width:768px){
    ul{
        padding:3% 0PX;
        margin-top:0px !important;  
    }
    li{
        margin-top:0px;
    }
    h2{
        font-size:18px;
    }
    .intro-banner > p { 
        font-size:25px;}
    .nav{ 
        padding:5% 0; 
        text-align:center;
    }
    .col-principal{
        margin:5% 0px;
    }

    .col-md-4{ 
        float:left;
    }

    .intro-banner {
        background-color:rgba(255,255,255,0.6);
        min-height:  230px;
        font-size:16px;
        margin:0 !important;
    }
}