*{
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
color: #000;
font-family: 'Oakes Grotesk', Helvetica, Arial, sans-serif;
}

HTML, BODY{

}

P{
margin: 0 0 30px 0;
}

INPUT:focus::placeholder, TEXTAREA:focus::placeholder {
color: transparent;
}

.large{
font-size: 24px;
line-height: 40px;
font-weight: bold;
}

.med{
font-size: 20px;
line-height: 29px;
font-weight: 500;
}

.reg{
font-size: 16px;
line-height: 24px;
font-weight: normal !important;
}


.small{
font-size: 12px;
line-height: 24px;
}



.container{
font-size: 0;
margin: 0 auto;
width: 1450px;
position: relative;
}

#header{
background-color: #FFD7E6;
}

#hdgif{
display: block;
}

#hdgifmob {
display: none;
}

#hdgifmob2 {
display: none;
position: absolute;
top: 0;
left: 0;
}

#block1{
background-color: #DC462D;
padding: 150px 0px;
}


#onama{
background-color: #00A850;
padding: 200px 0px 100px 0px;
}

#block3{
background-color: #FFD25A;
padding: 70px 0;
}

#projekti{
background-color: #FFD7E6;
padding: 250px 0;
}

#kontakt{
background-color: #FFD25A;
padding: 200px 0;
}

#footer{
background-color: #00B4F0;
padding: 45px 0px;
}

.fixed{
position: fixed;
top: 0;
width: 100%;
}

#menu{
z-index: 2000;
}


#mobmenu{
display: none;
}

#dskmenu H1{
display: inline-block;
width: 30%;
min-height: 90px;
vertical-align: middle;
}

.menu1{
background: url(../img/LOGO1.svg) no-repeat center center;
}

.menu2{
background: url(../img/LOGO2.svg) no-repeat center center;
}

.menu3{
background: url(../img/LOGO3.svg) no-repeat center center;
}

.menu4{
background: url(../img/LOGO4.svg) no-repeat center center;
}



.mback1{
background-color: #DC462D;
}

.mback2{
background-color: #00A850;
}

.mback3{
background-color: #FFD7E6;
}

.mback4{
background-color: #FFD25A;
}

.mback1 #dskmenu A:HOVER{
color: #FFD25A;
}

.mback2 #dskmenu A:HOVER{
color: #8C3CFF;
}

.mback3 #dskmenu A:HOVER{
color: #00A850;
}

.mback4  A:HOVER{
color: #00B4F0;
}


#dskmenu UL{
display: inline-block;
width: 70%;
list-style: none;
font-size: 16px;
line-height: 90px;
color: #000;
text-align: right;
vertical-align: middle;
min-height: 90px;
}

#dskmenu UL LI{
display: inline;
padding: 0 50px 0 0;
}

#dskmenu UL LI A{
color: #000;
text-decoration: none;
font-weight: bold;
}

#mobmenu H1{
min-height: 45px;
}

.mob1{
background: url(../img/mobmenu1.png) no-repeat center center;
}

.mob2{
background: url(../img/mobmenu2.png) no-repeat center center;
}

.mob3{
background: url(../img/mobmenu3.png) no-repeat center center;
}

.mob4{
background: url(../img/mobmenu4.png) no-repeat center center;
}

.left{
display: inline-block;
width: 45%;
vertical-align: middle;
padding: 0px 50px 0px 70px;
}

.right{
display: inline-block;
width: 55%;
vertical-align: middle;
text-align: right;
padding:  0px 70px;
}

#probut{
display: block;
width: 184px;
height: 60px;
font-size: 16px;
line-height: 60px;
font-weight: bold;
text-decoration: none;
margin: 40px 0 0 0;
background: #FFD25A;
text-align: center;
border-radius: 30px;
}

#probut:HOVER{
color: #FFF;
background: #000;
}



#mopis{
display: inline-block;
width: 25%;
vertical-align: top;
padding: 0px 50px 0px 70px;
}

#mlista{
display: none;
width: 75%;
column-count: 3;
font-size: 16px;
line-height: 24px;
font-weight: 500;
vertical-align: top;
}

#mlista LI{
padding: 0 120px 30px 0;
}

#dlista{
display: inline-block;
width: 75%;
vertical-align: top;
}

#dlista UL{
display: inline-block;
width: 33%;
font-size: 16px;
line-height: 24px;
font-weight: 500;
vertical-align: top;
}

#dlista LI{
padding: 0 170px 30px 0;
}

#conform{
width: 520px;
padding: 0 0 0 70px;
}

#conform INPUT[type='text'], #conform INPUT[type='email']{
display: block;
width: 100%;
margin: 30px 0;
border: 1px solid #000;
background: transparent;
height: 45px;
padding: 0 20px;
font-size: 16px;
line-height: 45px;
border-radius: 0px;
}

#conform TEXTAREA{
display: block;
width: 100%;
margin: 20px 0;
border: 1px solid #000;
background: transparent;
height: 120px;
padding: 10px 20px;
font-size: 16px;
line-height: 24px;
border-radius: 0px;
}

#conform TEXTAREA::placeholder , #conform INPUT[type='text']::placeholder , #conform INPUT[type='email']::placeholder {
color: #363636;
}




#csubmit:enabled{
display: block;
width: 184px !important;
height: 60px;
font-size: 16px;
line-height: 60px;
font-weight: bold;
text-decoration: none;
margin: 40px 0 0 0;
background: #000;
color: #FFF;
text-align: center;
border: 1px solid #000;
border-radius: 30px;
}

#csubmit:disabled{
display: block;
width: 184px !important;
height: 60px;
font-size: 16px;
line-height: 60px;
font-weight: bold;
text-decoration: none;
margin: 40px 0 0 0;
background: #FFD25A;
color: #000;
text-align: center;
border: 1px solid #000;
border-radius: 30px;
}



#ltop{
position: absolute;
display: block;
text-decoration: none;
width: 50px;
text-align: center;
font-weight: bold;
font-size: 12px;
padding: 50px 0 0 0;
bottom: -150px;
right: 0px;
background: url(../img/top.png) no-repeat center top;
}

#footer IMG{
display: block;
margin: 30px 0 30px 70px;
}

#footer H3{
font-size: 12px;
line-height: 20px;
font-weight: bold;
margin: 0 0 35px 0;
padding: 0 0 0 70px;
}


#f1{
display: inline-block;
width: 50%;
vertical-align: top;
font-size: 12px;
line-height: 20px;
padding: 0 130px 0 70px;
}

#f2{
display: inline-block;
width: 35%;
vertical-align: top;
font-size: 12px;
line-height: 20px;
padding: 0 20px 0 0;
}

#f3{
display: inline-block;
width: 15%;
vertical-align: top;
font-size: 12px;
line-height: 20px;
font-weight: bold;
text-align: right;
}

#f3 A{
text-decoration: none;
}

#f3 A:HOVER{
color: #FFD25A;
}


.projektr{
display: inline-block;
width: 50%;
min-height: 740px;
position: relative;
}

.projektl{
display: inline-block;
width: 50%;
min-height: 740px;
position: relative;
}

.proleft{
display: inline-block;
width:358px;
padding: 0 70px 0 0;
vertical-align: top;
}

.proright{
display: inline-block;
width:470px;
padding: 0 70px 0 0;
vertical-align: top;
}

.prev{
display: block;
position: absolute;
bottom: -48px;
right: 25px;
display: block;
width:25px;
height: 20px;
vertical-align: top;
background: url(../img/prev.png) center left no-repeat;
cursor: pointer;
}

.next{
display: block;
position: absolute;
bottom: -48px;
right: 0px;
width:25px;
height: 20px;
vertical-align: top;
background: url(../img/next.png) center right no-repeat;
cursor: pointer;
}

#pro1{
vertical-align: top;
padding: 0 110px 0 70px;
margin: 0 0 120px 0;
}

.proswipe1{
width: 408px;
height: 575px;
overflow: hidden;
margin: 0 0 30px 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#pro2{
vertical-align: top;
padding: 0 0 0 20px;
margin: 0 0 120px 0;
}

.proswipe2{
width: 520px;
height: 408px;
overflow: hidden;
margin: 167px 0 30px 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#pro3{
vertical-align: top;
padding: 0 110px 0 70px;
}

.proswipe3{
width: 520px;
height: 408px;
overflow: hidden;
margin: 0px 0 30px 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#pro4{
vertical-align: top;
padding: 0 0 0 132px;
}

.proswipe4{
width: 408px;
height: 575px;
overflow: hidden;
margin: 0 0 30px 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#pro5{
vertical-align: top;
padding: 0 110px 0 70px;
}

.proswipe5{
width: 408px;
height: 575px;
overflow: hidden;
margin: 0 0 30px 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#pro6{
vertical-align: top;
padding: 0 0 0 20px;
}

.proswipe6{
width: 520px;
height: 408px;
overflow: hidden;
margin: 167px 0 30px 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#pro7{
vertical-align: top;
padding: 0 110px 0 70px;
}

.proswipe7{
width: 520px;
height: 408px;
overflow: hidden;
margin: 167px 0 30px 0; 
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#pro8{
vertical-align: top;
padding: 0 0 0 132px;
}

.proswipe8{
width: 408px;
height: 575px;
overflow: hidden;
margin: 0 0 30px 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#pro9{
vertical-align: top;
padding: 0 110px 0 70px;
}

.proswipe9{
width: 408px;
height: 575px;
overflow: hidden;
margin: 0 0 30px 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#pro10{
vertical-align: top;
padding: 0 0 0 20px;
}

.proswipe10{
width: 520px;
height: 408px;
overflow: hidden;
margin: 167px 0 30px 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#pro11{
vertical-align: top;
padding: 0 110px 0 70px;
}

.proswipe11{
width: 520px;
height: 408px;
overflow: hidden;
margin: 0px 0 30px 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#pro12{
vertical-align: top;
padding: 0 0 0 132px;
}

.proswipe12{
width: 408px;
height: 575px;
overflow: hidden;
margin: 0 0 30px 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#pro13{
vertical-align: top;
padding: 0 110px 0 70px;
}

.proswipe13{
width: 408px;
height: 575px;
overflow: hidden;
margin: 0 0 30px 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

#pro14{
vertical-align: top;
padding: 0 0 0 20px;
}

.proswipe14{
width: 520px;
height: 408px;
overflow: hidden;
margin: 167px 0 30px 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

.swiper{
max-height: 480px;
overflow: hidden;
z-index: 20;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

.swiper .swiper-slide img {
    width: auto;
    max-height: 480px;
}

#mobh2{
display: none;
font-size: 16px;
line-height: 24px;
font-weight: bold;
margin: 0 0 30px 0;
}

#deskh2{
display: block;
position: absolute;
top: 0;
left: 20px;
font-size: 24px;
line-height: 40px;
font-weight: bold;
}

#moblinks{
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 0px;
z-index: 5000;
list-style: none;
font-size: 16px;
font-weight: bold;
padding: 85px 0 0 0px;
background-size: 130px;
overflow: hidden;
}

#mclose{
position: absolute;
background: url(../img/close.png) no-repeat center center;
width: 24px;
height: 24px;
cursor: pointer;
top: 13px;
right: 13px;
}


#overlay{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #000;
display: none;
z-index: 500;
opacity: 0.4;
}

#mobmenu H1{
cursor: pointer;
}

.ml1{
background: #DC462D url(../img/LOGO1.svg) no-repeat 15px 15px;
}

#moblinks LI{
display: block;
width: 100%;
padding: 10px 15px;
}

#moblinks LI A{
text-decoration: none;
}

.sep{
border-bottom: 1px solid #000;
padding-bottom: 20px;
margin-bottom: 10px;
}

#success{
display: none;
margin: 30px;
}






@media (max-width: 1500px) {
.container{
width: 100%;
}
}





@media (max-width: 800px) {

IMG{
max-width: 100%;
}

.container{
max-width: 375px;
}

#dskmenu{
display: none;
}

#mobmenu{
display: block;
}

.left{
display: block;
width: 100%;
padding: 0 20px;
}

.right{
display:block;
width: 100%;
padding: 0 20px;
}

.large{
font-size: 16px;
line-height: 29px;
font-weight: bold;
}

.med{
font-size: 14px;
line-height: 24px;
font-weight: 500;
}

#probut{
display: block;
width: 164px;
height: 45px;
font-size: 14px;
line-height: 45px;
font-weight: bold;
text-decoration: none;
margin: 40px 0;
background: #FFD25A;
text-align: center;
border-radius: 25px;
}


#block1{
padding: 100px 0px 50px 0px;
}

#onama{
padding: 120px 0px 50px 0px;
}

#block3{
padding: 70px 0 30px 0;
}

#projekti{
padding: 150px 0 50px 0;
}

#kontakt{
padding: 100px 0 150px 0;
}

#footer{
padding: 45px 0;
}

#mopis{
display: block;
width: 100%;
vertical-align: top;
padding: 0px 20px;
}

#mlista{
display: block;
width: 100%;
column-count: 1;
font-size: 14px;
line-height: 24px;
padding: 0px 20px;
}

#dlista{
display: none;
}

#conform{
width: 100%;
padding: 0 20px;
}

#conform INPUT[type='text'], #conform INPUT[type='email']{
font-size: 14px;
}

#conform TEXTAREA{
font-size: 14px;
}


#csubmit:enabled{
width: 164px !important;
height: 45px;
font-size: 14px;
line-height: 45px;

}

#csubmit:disabled{
width: 164px !important;
height: 45px;
font-size: 14px;
line-height: 45px;
}

#ltop{
bottom: -100px;
right: 20px;
}



#footer H3{
font-size: 12px;
line-height: 20px;
font-weight: bold;
margin: 0 0 35px 0;
padding: 0;
}


#f1{
display: block;
width: 100%;
padding: 0;
}

#f2{
display: block;
width: 100%;
padding: 0;
}

#f3{
display: block;
width: 100%;
text-align: left;
}


.projektr{
display: block;
width: 100%;
min-height: 200px;
position: relative;

}

.projektl{
display: block;
width: 100%;
min-height: 200px;
position: relative;

}

.proleft{
display: inline-block;
width:285px;


}

.proright{
display: inline-block;
width:285px;


}
#pro1, #pro2, #pro3, #pro4, #pro5, #pro6, #pro7, #pro8, #pro9, #pro10, #pro11, #pro12, #pro13, #pro14{
padding: 0 20px;
margin: 0 0 40px 0;
}

.proswipe1, .proswipe2, .proswipe3, .proswipe4, .proswipe5, .proswipe6, .proswipe7, .proswipe8, .proswipe9, .proswipe10, .proswipe11, .proswipe12, .proswipe13, .proswipe14{
width: 100%;
height: auto;
margin: 0 0 20px 0;
}

VIDEO{
max-width: 100%;
}

#hdgif{
display: none;
padding: 0 20px;
}

#hdgifmob {
display: block;
padding: 0 20px;
}

#hdgifmob2 {
display: block;
padding: 0 20px;
}

#onama IMG{
    padding: 120px 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

#mobh2{
display: block;
padding: 0 20px;
}

#deskh2{
display: none;
}

#footer{
padding: 45px 20px;
}

#footer IMG{
margin: 30px 0;
}

}

@media (max-width: 400px) {

.container{
width: 100%;
padding: 0 20px;

}

}