@import 
url('https://fonts.googleapis.com/css?family=Alegreya:400,500,700|Dancing+Script|Neuton');

body {
    font-family: "alegreya";
    text-align: center;
    padding:0;
    margin:0 auto;
   
  
}

                                /*---==background==---*/


div.background{
   background: #000000;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 59%, rgba(0, 0, 0, 1) 100%), url(business-962315_1920.jpg) no-repeat;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.0)), color-stop(30%, rgba(0, 0, 0, 0)) , color-stop(59%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(0, 0, 0, 1))), url(business-962315_1920.jpg) no-repeat;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 59%, rgba(0, 0, 0, 1) 100%), url(business-962315_1920.jpg) no-repeat;
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 59%, rgba(0, 0, 0, 1) 100%), url(business-962315_1920.jpg) no-repeat;
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 59%, rgba(0, 0, 0, 1) 100%), url(business-962315_1920.jpg) no-repeat;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 59%, rgba(0, 0, 0, 1) 100%), url(business-962315_1920.jpg) no-repeat;
    background-size:cover;
    background-position:top;
    max-height: 1300px

}

                                /*---==typography==---*/
body{
    font-size: 0.7rem;
    color:#fffcf9;
    background-color: #333;
    text-shadow: 1px 1px 4px  black;
}
                /*banner*/
h1{
    font-size:1rem;
}
.banner h1{
    font-size:1rem;
    color:#fffcf9;
}

                /*continut*/
.content h2{
    font-size: 0.9rem;
    color:#fffcf9;
    font-weight: 500;
}

.content p{
     color:#fffcf9;
    
}

.cnstr h2{
    font-size: 0.9rem;
    color:#fffcf9;
    font-weight: 500;
}

.cnstr h1{
    font-size:1rem;
    color:#fffcf9;
}
                /*servicii*/

h2.serv{
    font-size: 1rem;
    font-weight: 500;
}

a.button{
    font-size: 0.9rem;
    font-weight: 500;
}
               
                /*footer*/

footer h1{
    font-size: 1rem;
    font-weight: 500;
}

footer li{
    font-weight: 400;
}

footer{
    font-weight: 500;
}

                                /*---==Banner==---*/

header.banner{
    margin:0;
    padding:0;
}

.banner img{
    width: 5rem;
    margin:auto;
    padding-top:1rem;
    padding-bottom:0.5rem
    
}

.banner h1{
    margin:0rem;
    padding:0;

}


                                /*---==nav bar==---*/

header.navi{
    position: relative;
    padding-top:1rem;
    left:0;
    right:0;
}

ul.nav {
    margin:0;
    padding:0;
    list-style-type: none;
    overflow:hidden;
    background-color: rgba(0,0,0,.75);
    text-align: center;
}

.navi li {
    display: inline-block;
    margin:0px;
}

li a, .dropbtn {
    display: inline-block;
    color: #efefef;
    text-align: center;
    padding: 0.2rem;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    color:#fff;
}

.dropdown-content a:hover{
    color: #333
}
li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #d8d8d7;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    text-shadow: 1px 1px 4px  white;
}

.dropdown-content a:hover {background-color: #fffcf9}

.dropdown:hover .dropdown-content {
    display: block;
}

li .active {
    color:#fffcf9;
}


                                /*---==Continut==---*/




div.content{
    
    margin: auto;
    left:0;
    right:0;
    position:relative;
    max-width: 90vw;
    
}

div.conti{
    position:relative;
    height:100vh;
    display:grid;
    align-content: center;
    
    
}

.content p{
    margin:auto;
    max-width: 1000px;

}

.constructie {
    height:100vh;
    display: grid;
    align-content: center;
    
}



                                /*---==Servicii oferite==---*/
.servcase{
    max-width: 1000px;
    margin:auto
}

.servicii{
    
    margin:0;
    left:0px;
    right:0px;
    
}

.servi img{
    
    
    margin:0;
    padding:0;
    vertical-align: top;
    width:100%


}
 .servi{
    padding:0;
    margin:0;
    position: relative; 
    display: inline-block;
    
    
}

a.button{
    text-decoration: none;
    color: #d8d8d7;
    font-weight: 600;
        
}

a.button:hover {
    color: #fffcf9;
    font-weight: 600;
    
}

figcaption.serviciu-oferit{
    padding: 0.5rem
}
/*---==curs==---*/

div.curs{
    padding:0;
    margin:auto;
   

}

                                /*---==Servicii==---*/

.wrapper{
    display:grid;
    grid-template-areas: 
        "cnt " 
        "continut "
        "lista-st ";
    max-width: 750px;
    margin:auto;
    padding:2rem 0rem 4rem 0rem ;
    width:90vw;
    grid-gap: 20px;   
}



.cnt{
    grid-area: "cnt";
    text-align-last: center;
    
}
.continut{
    grid-area: "continut";
    text-align:justify;
    padding:1rem 0rem 1rem 0rem
    
    
}

.lista-st{
    grid-area:"lista-st";
    text-align:left;
    margin:auto;
    
}

.lista-dr{
    grid-area:"lista-st";
    text-align: left;
    margin:auto;
    
}

.wrapper ul{
    padding:0.3rem;
    margin:1rem

}


                                /*---==Footer==---*/

footer{
    background-color: #080505;
    margin-top:-0.7rem

}

footer h1{
    margin:0;
    padding-top:1rem;
    padding-bottom:1rem
}

ul.footer{
    list-style-type: none;
    padding:0rem;
    margin:0rem
}

.footer a{
    color: #d8d8d7
}

.footer a:hover {
    color: #fffcf9;
    background-color: #333
}

.footer li a{
    margin:0;
    padding:0;
}
                                /*---==gps==---*/

iframe.harta{
    vertical-align: bottom;
    padding-top: 1rem;
}




                               
    
    @media only screen and (min-width: 375px) {
        /*---==typography==---*/
body{
    font-size: 0.9rem;
   
}
    
h1{
    font-size:1.2rem;
}
                /*banner*/

.banner h1{
    font-size:1.2rem;
    
}

                /*continut*/
.content h2{
    font-size: 1.1rem;
     
}
        
.cnstr h2{
    font-size: 1.1rem;
    font-weight: 500;
}

.cnstr h1{
    font-size:1.2rem;
}


    

                /*nav*/
        
.nav li{
    padding: 0.2rem;;
}
        
                /*servicii*/

h2.serv{
    font-size: 1.2rem;
}

a.button{
    font-size: 1.1rem;
}
               
                /*footer*/

footer h1{
    font-size: 1.2rem
}
}





@media only screen and (min-width: 568px) {
        /*---==typography==---*/
body{
    font-size: 1rem;
    
}
    
h1{
    font-size:1.3rem;
}
                /*banner*/

.banner h1{
    font-size:1.3rem;
    padding-bottom: 0.5rem
}
    
.banner img{
    width:7rem;
    margin:0;
    padding-top:1.5rem;
    padding-bottom:1rem
    
}

                /*continut*/
.content h2{
    font-size: 1.2rem;
     
}
    
.cnstr h2{
    font-size: 1.2rem;
    font-weight: 500;
}

.cnstr h1{
    font-size:1.3rem;
}


                /*nav*/
        
.nav li{
    padding: 0.3rem;
    padding-left:1em;
    padding-right:1em
}
        
                /*servicii*/

h2.serv{
    font-size: 1.3rem;
}

a.button{
    font-size: 1.2rem;
}
               
                /*footer*/

footer h1{
    font-size: 1.3rem
}
} 






@media only screen and (min-width: 700px) {
    .servi {
        width:49.3%;
        float:left;
        margin: 0px auto;
        overflow: hidden;
        position:relative;
        padding-left: 0.3466%;
        padding-right: 0.3466%
    }
    
    .banner img{
    width:8rem;
    margin:0;
    padding-top:2rem;
    padding-bottom:1.rem
    
}
    
    .nav li{
    padding: 0.3rem;
    padding-left:2em;
    padding-right:2em
}
    
    .cnt{
    grid-column:1/3
    
}
.continut{
   grid-column:1/3
    
    
}
    
}
    




@media only screen and (min-width: 900px){
     .nav li{
    padding: 0.3rem;
    padding-left:3em;
    padding-right:3em
}
    
}