/************************************************************************
 * INIT *****************************************************************
 ************************************************************************/
:root{
    --primary:          #3F699B;
    --secondary:        #000000;
    --text:             #373737;
    --text-light:       #DDDDDD;
    --menu:             #F9F9F9;
    --bg-color:         #FFFFFF;

    --trans:            all 250ms ease-in-out;
}



/*General*/
@font-face {
    font-family: OpenSans;
    src: url(../fonts/OpenSans-Regular.ttf);
    font-weight: 400;
}
@font-face {
    font-family: OpenSans-SB;
    src: url(../fonts/OpenSans-SemiBold.ttf);
    font-weight: 600;
}
@font-face {
    font-family: Barlow;
    src: url(../fonts/BarlowCondensed-Bold.ttf);
    font-weight: 700;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

html{scroll-behavior: smooth;}
body{
    margin: 0;
    padding: 0;
    position: relative;
    font-family: OpenSans, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: var(--text);
    width: 100%;
    min-height: 100vh;
    position: relative;
    background-color: var(--bg-color);
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../images/bg-header.jpg');
}

a,
a:hover,
a:focus,
a:visited
{text-decoration: none;transition: var(--trans);}

/*Custom Scroll*/
.scrolly{overflow-y:auto;word-wrap:break-word;}
.scrolly::-webkit-scrollbar {width: 12px;height: 10px;}
.scrolly::-webkit-scrollbar:vertical {background-color:var(--bg-color);}
.scrolly::-webkit-scrollbar-track:vertical {background-color:var(--bg-color);}
.scrolly::-webkit-scrollbar-thumb {height:10px;max-height:10px;}
.scrolly::-webkit-scrollbar-thumb:vertical {background-color:var(--primary);}
.scrolly::-webkit-scrollbar-thumb:active {background-color:var(--secondary);}

:focus {outline: -webkit-focus-ring-color auto 0px;outline-width: 0px;}

/* FORM */
::-webkit-input-placeholder {color: var(--primary);}
     :-ms-input-placeholder {color: var(--primary);}
              ::placeholder {color: var(--primary);}

input,
textarea,
select{display: block;padding:0px 0px;background: transparent;border:0;}

input:focus,
textarea:focus{border-bottom:1px solid var(--secondary);}


h1,h2,h3,h4,h5,h6,p,label{margin-top:0;margin-bottom: 0;}

.container-fluid{}
.container{width:100%;max-width: 1200px;}

.container-fluid,
.container{margin:0 auto;}

.col-12{width: 100%;}
.col-9{width: 75%;}
.col-6{width:50%;}
.col-3{width:25%;}

.align-center{display: flex;align-items: center;}
.flex-start{display: flex;justify-content: flex-start;}
.flex-center{display: flex;justify-content: center;}
.flex-end{display: flex;justify-content: flex-end;}

.text-center{text-align: center;}
.uppercase{text-transform: uppercase;}


/* HEADER */
header{width:100%;float:left;height: 50vh;max-height:555px;position: relative;}
nav{padding: 50px 80px;width:100%;position: relative;display: flex;justify-content: space-between;flex-wrap:wrap;}
nav .nav-item + .nav-item{margin-left: 45px;}
nav .nav-item__icon{margin-right: 5px;}
nav a{color: var(--menu);opacity: .7;}
nav a:hover{opacity: 1;}

header #logo{width: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

/* MAIN */
main{width: 100%;float: left;position: relative;}
#sites_wrapper{width: 100%;float: left;position: relative;margin-top: -10vh;display: flex;justify-content: space-between;flex-wrap: wrap;}
.card-site{width: 33.334%;max-width: 360px;position: relative;float: left;margin: 0px 15px;padding: 60px 45px;background-color: var(--bg-color);border-radius: 10px;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;transition: var(--trans);}
/*.card-site{background: linear-gradient(180deg, #FFFFFF, #FFFFFF, #FFFFFF00);}*/
.card-site:hover{transform: translateY(-20px);box-shadow: 0px 0px 10px rgba(0,0,0,0.1);}
/*.card-site:hover{background: linear-gradient(180deg, #FFFFFF, #FFFFFF, #FFFFFFFF);}*/
.card-site__logo{width: 100%;height: auto; object-fit: contain;margin-bottom: 20px;}
.card-site__title{width: 100%;font-family: 'Barlow', Helvetica, Arial, sans-serif;font-size: 24px;color: var(--primary);margin-bottom: 15px;}
.card-site__description{width: 100%;line-height: 1.43;}
.card-site__btn{margin-top: 20px;padding: 13px 28px;font-family: OpenSans-SB, Helvetica, Arial, sans-serif;color: var(--primary);border: 1px solid var(--primary);border-radius: 5px;transition: var(--trans);}
.card-site__btn:hover{background-color: var(--primary);color: #FFFFFF;}

#sites_description{width: 100%;float: left;padding: 60px 30px 100px 30px;}
#sites_description p{max-width: 660px;}

/* FOOTER */
footer{width: 100%;float: left;position: relative;padding: 50px 100px;background-color: var(--primary);}
.footer__wrapper{width: 100%;position: relative;float: left;display: flex;align-items: center;justify-content: space-between;}
.footer__wrapper span,
.footer__wrapper p,
.footer__wrapper a{font-size: 12px;color: var(--text-light);transition: var(--trans);}
.footer__wrapper a:hover{color: #FFF;}
.footer__wrapper .icon-social{width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;background: transparent;border-radius: 100%;}
.footer__wrapper .icon-social:hover{ background: #FFFFFF22; }
.footer__wrapper .icon-social + .icon-social{margin-left: 5px;}
.footer__wrapper span + span{margin-left: 15px;}

/*
*
* MEDIA QUERY
*
*/
@media(max-width:767px){
    /* GENERAL */
    .col-xs-12{width: 100% !important;}
    body{background-size: auto;}

    /* HEADER */
    header{height: auto;min-height: 300px;}
    header #logo{transform: translate(-50%,0);}
    nav{padding: 50px 20px;}
    nav > div{justify-content: center !important;}
    nav > div + div{margin-top: 10px;}
    nav .nav-item + .nav-item{margin-left: 20px;}

    /* MAIN */
    #sites_wrapper{margin-top: 0;justify-content: center;}
    #sites_wrapper .card-site + .card-site{margin-top: 20px;}
    .card-site{width:100%;}
    .card-site:hover{transform: translateY(0px);}
    .card-site__logo{min-height: 100px;}
    #sites_description{padding: 50px 20px;}

    /* FOOTER */
    footer{padding: 50px 20px;}
    .footer__wrapper{flex-wrap: wrap;}
    .footer__wrapper > div{justify-content: center !important;}
    .footer__wrapper > div + div{margin-top: 10px;}
}

@media(min-width:768px) and (max-width: 1140px){
    /* GENERAL */
    body{background-size: cover;}

    /* MAIN */
    #sites_wrapper{margin-top: 0;justify-content: center;}
    #sites_wrapper .card-site{margin-top: 0px;}
    #sites_wrapper .card-site{width:46%;max-width: unset;margin-bottom: 20px;}
    #sites_wrapper .card-site:hover{transform: translateY(0px);}
}