/* fonts */

@font-face {
    font-family: Montserrat;
	font-style: normal;
    src: 
    url('/fonts/Montserrat/Montserrat-Regular.ttf'),
    url('/fonts/Montserrat/Montserrat-Light.ttf'),
	url('/fonts/Montserrat/Montserrat-Bold.ttf');
}

    /*Reset*/
    h1, h2, h3, h4, p {
        margin: 0 auto;
    }

    .debug {
        width: 100%;
        background-color: red;
    }

    /* DOM */
    body {
        margin: 0 auto;
        font-family: "Montserrat", "Open Sans", sans-serif;
    }

/* nav */
nav.logo {
    width: 100%;
    height: 30px;
    background-color: #172C3C;
    color: #000000;
    box-shadow: 0 4px 4px #f56e28; /* rgba(0, 0, 0, 0.2);*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 30px;
    justify-content: space-between;

    /* align-content: center; */
}

nav.logo .with-button a:nth-child(1) {
    display: inline-block;
    background-color: #fefefe;
    width: 30px;
    height: 30px;
    position: absolute;
    transition: .2s;
    padding-left: 5px;
}

nav.logo .with-button a:nth-child(1):hover {
    background-color: #c7c7c7;
}

nav.logo .with-button a:nth-child(1) img {
    width: 51%;
    vertical-align: middle;
    
}

nav.logo .with-button a:nth-child(2) {
    margin-left: 30px;

}

nav.logo img {
    width: 60px;
    padding: 5px;
    vertical-align: middle;
}
/* 68px Canvia */

/* container */
section.container {
    /* width: 100%; */
    height: calc(100vh - 32px);
    background-image: url('/img/background.jpg');
    background-position: bottom center;
    background-repeat: no-repeat;
	background-size: cover;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 100%;
    grid-template-rows: 90px 320px;
    margin-top: 2px;
    background-color: #f2f1ef;
}

section .title {
    color:white;
    font-size: 12px;

    text-transform: uppercase;
    z-index: 1;
    letter-spacing: 5px;
}

/* content */
section .content {
    width: 320px;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 180px 180px;
    align-items: center;
}

.content .block {
    width: 100%;
    height: 180px;
    color: #343230;
    display: grid;
    grid-template-columns: 120px 200px;
    grid-template-rows: 40x 100px 40px;
    align-items: center;
    grid-template-areas: 
        "img title"
        "img text"
        "img button"; 
}

.content .unlocking {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 15px 15px 0 0;
    z-index: 1;
}

.content .password {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0 0 15px 15px;
}

.bg {
    width: 100%;
    height: 250px;
    max-height: 250px;
    background-color: rgba(47, 160, 224, 0.27);
    position: absolute;
    top: 31px; 
    left: 0;
}

.block .content_img {
    grid-area: img;
    width: 120px;
    text-align: center;
}

.block .content_img img{
    width: 60%;
}

.block .content_title {
    grid-area: title;
    width: 175px;
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    align-self: flex-end;
    letter-spacing: 2px;
    color: #343230;
}

.block .content_text {
    grid-area: text;
    align-self: center;
    width: 180px;
    font-size: 12px;
}

.block .content_text p:nth-child(2) {
    font-size: 8px;
    margin-top: 2px;
}

.block .content_btn {
    grid-area: button;
    align-self: flex-start;
}

.btn {
    width: 140px;
    background-color: #172C3C;
    color: #fefefe;
    font-size: 12px;
    text-decoration: none;
    text-align: center;
    height: 20px;
    display: inline-block;
    border-radius: 12px;
    transition: .2s;
}

.btn:hover {
    background-color: #005293;
}

.none {
    display: none;
}


    footer {
        width: 100%;
        height: auto;
        background-color: #172C3C;
        color: #fefefe;
    }

    footer .message-pop {
        width: 100%;
        height: 22px;
        background-color: #f56e28;
        color: #fefefe;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    footer .service {
        width: 100%;
        height: 80px;
        display: grid;
        grid-template-columns: 180px 120px;
        grid-template-rows: auto;
        justify-content: center;
        align-content: center;
        grid-gap: 5px;
        grid-template-areas: 
            "home ."
            "phone ."
            "mail develop"
    }

    footer .home {
        grid-area: home;
    }

    footer .phone {
        grid-area: phone;
    }

    footer .mail {
        grid-area: mail;
    }

    footer .develop {
        grid-area: develop;
    }

    footer .item {
        font-size: 8px;
    }

    footer .item a {
        text-decoration: none;
        color: #fefefe;
    }

    footer .item img {
        width: 10px;
        vertical-align: middle;
        padding-right: 5px;
    }

    /*Aler*/
    .w3-animate-fading{-webkit-animation:fading 10s infinite;animation:fading 10s infinite}
    @-webkit-keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
    @keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
    .w3-animate-opacity{-webkit-animation:opac 0.8s;animation:opac 0.8s}
    @-webkit-keyframes opac{from{opacity:0} to{opacity:1}}
    @keyframes opac{from{opacity:0} to{opacity:1}}
    .w3-animate-top{position:relative;-webkit-animation:animatetop 0.4s;animation:animatetop 0.4s}
    @-webkit-keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
    @keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
    .w3-animate-left{position:relative;-webkit-animation:animateleft 0.4s;animation:animateleft 0.4s}
    @-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
    @keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
    .w3-animate-right{position:relative;-webkit-animation:animateright 0.4s;animation:animateright 0.4s}
    @-webkit-keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
    @keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
    .w3-animate-bottom{position:relative;-webkit-animation:animatebottom 0.4s;animation:animatebottom 0.4s}
    @-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}}
    @keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
    .alert {
        padding: 10px;
        background-color: #f44336;
        color: white;
        font-size: 12px;
        transition: opacity 0.6s;
    }
    .msgView {
        padding: 10px;
        background-color: yellow;
        color: black;
        font-size: 12px;
        transition: opacity 0.6s;
    }

    .closebtn {
        margin-left: 15px;
        color: white;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
    }

    .closebtn:hover {
        color: black;
    }

/* Responsive Breackpoint */
@media (min-width: 479px) { 
    /* container 
    section.container {
        padding-bottom: 47px;
    }*/
}

@media (min-width: 600px) {
    /* nav */
    nav.logo {
        height: 47px;
    }

    nav.logo img {
        width: 100px;
        padding: 10px;
    }
    /* 80px Canvia */
    nav.logo .with-button a:nth-child(1) {
        width: 47px;
        height: 47px;
    }
    
    nav.logo .with-button a:nth-child(1) img {
        width: 50%;
    }
    
    nav.logo .with-button a:nth-child(2) {
        margin-left: 50px;
    }   
	
    /* container */
    section.container {
        min-height: 500px;
        height: calc(100vh - 49px);
        padding-bottom: 0;
    }

    section .title {
        font-size: 16px;
    }

    /*Content*/
    section .content {
        width: 400px;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 200px 200px;
    }

    .content .block {
        height: 200px;
        margin-top: 80px;
        grid-template-columns: 165px 225px;
    }

    .bg {
        height: 290px;
        max-height: 290px;
        top: 48px; 
    }

    .block .content_img {
        width: 175px;
    }
    
    .block .content_img img{
        width: 50%;
    }
    
    .block .content_title {
        width: auto;
        font-size: 12px;
    }
    
    .block .content_text {
        width: 220px;
        font-size: 12px;
    }
    
    .block .content_text p:nth-child(2) {
        font-size: 10px;
        margin-top: 5px;
    }
}

@media (min-width: 900px) {

    /* container */
    section.container {
        height: calc(100vh - 151px);
        background-position: top center;
        background-size: cover;
        grid-template-rows: 100px 280px;
    }    
    
    section .title h1 {
        font-size: 32px;
    }

    /*Content*/
    section .content {
        width: 800px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .content .block {
        height: 380px;
        grid-template-columns: auto;
        grid-template-rows: 135px 70px 100px 100px;
        justify-items: center;
        grid-template-areas: 
            "img"
            "title"
            "text"
            "button"; 
    }
    
    .bg {
        display: none;
    }

    .content .unlocking {
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 15px 0 0 15px;
        z-index: 1;
    }
    
    .content .password {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 0 15px 15px 0;
    }

    .block .content_img {
        width: auto;
        align-self: flex-end;
    }
    
    .block .content_img img{
        width: 80%;
    }  
    
    .block .content_title h1 {
        font-size: 20px;
        text-align: center;
    }

    .block .content_text {
        width: 340px;
        font-size: 14px;
    }    
    
    .block .content_text p:nth-child(2) {
        font-size: 10px;
    }

    .btn {
        width: 200px;
        font-size: 14px;
    }

    .none {
        display: block;
    }
    
    footer .service {
        height: 80px;
        grid-template-columns: repeat(3, 300px);
        grid-template-rows: 30px 20px;
        grid-template-areas: 
            "home phone mail"
            ". develop ."
    }

    footer .item {
        font-size: 12px;
        justify-self: center;
    }
    
	footer .develop {
        font-size: 11px;
    }
	
	footer .service .develop img {
        width: 60px;
    }
	
    footer .item img {
        width: 20px;
    }
}