/*
File:		layout.css (letmehave)
Auth:		Valentin Zaraf
*/

html{scroll-behavior: smooth;}
a[name]::before{
    content:'';
    display:block;
    height:60px;
    margin:-60px 0 0 0;
}

/* colorscheme */
.color_white{color:#fff;}
a.color_white{color:#fff !important;}
.bg_white{background:#fff;}
.color_green,a.color_green{color:#1caf9a;}
.bg_green{background:#1caf9a;}
.color_blue,a.color_blue{color:#17a2b8;}
.bg_blue{background:#17a2b8;}
.color_dark_blue,a.color_dark_blue{color:#07434d;}
.bg_dark_blue{background:#07434d;}
.color_light_bluejardin,a.color_light_bluejardin{color:#93e3d8;}
.bg_light_bluejardin{background:#93e3d8;}
.color_red,a.color_red{color:#f93d66;}
.bg_red{background:#f93d66;}

/* buttons */
.button{color:#fff;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;}
.button.red{background:#c40073;color:#fff;}
.button.blue{background:#17a2b8;}
.button:hover{background:#07434d;-webkit-transition:background 0.3s -webkit-linear 0s;transition:background 0.3s linear 0s;}
.button.red:hover{background:#f93d66;-webkit-transition:background 0.3s -webkit-linear 0s;transition:background 0.3s linear 0s;color:#fff;}

/* h1-h6 */
h6{font:16px/18px 'Roboto';font-weight:300;display:block;}
h5{font:18px/20px 'Roboto';font-weight:300;display:block;}
h4{font:20px/22px 'Roboto';font-weight:300;display:block;}
h3{font:24px/26px 'Roboto';font-weight:300;display:block;}
h2{font:28px/30px 'Roboto';font-weight:300;display:block;}
h1{font:32px/34px 'Roboto';font-weight:300;display:block;}

/* body */
.body{background:#17a2b8 url(bg.png) center top repeat-y;background-size:contain;}

/* header */
.header{width:100%;height:60px;position:fixed;z-index:9997;top:0;background:#fff;}
.logo{display:inline;padding-left:15px;font:32px/60px 'Roboto';font-weight:200;text-decoration:none;color:#000;}
.logo span{font-weight:300;}

/* nav */
.nav_trigger{float:right;line-height:60px;color:#000;cursor:pointer;}
.nav_link i{font-size:18px;padding-right:10px;}
.nav_link{font-size:20px;line-height:60px;padding:0 20px;font-family:'Roboto';font-weight:300;text-align:left;text-decoration:none;color:#000;}

/* main */
.main{padding-top:60px;}

/* homepage */
.one .inner{color:#fff;text-align:center;}
.two{background:#fff;text-align:center;text-size}
.two a{color:#f93d66;}
.two a:hover{color:#111;}
.three{color:#fff;background:url(shadow1.png) top center no-repeat;background-size:contain;}
.testimonial{margin:0 20px;background:rgba(0,0,0,0.15);padding:20px;position:relative;font-size:18px;line-height:23px;text-align:center;margin-bottom:20px;transition: all 0.1s ease-in-out;}

/* footer */
.footer{width:100%;background:rgba(7,67,77,0.55);color:#f8f8f8;text-align:center;font-size:14px;line-height:20px;}
.footer_link{font-size:14px;line-height:20px;text-decoration:none;color:#f8f8f8;}
.footer_small,.footer_small a{font-size:11px;line-height:21px;color:#e0e0e0;text-decoration:none;}

/* pages */
.bluejardin{background:#1caf9a;
background:linear-gradient(15deg, #1caf9a 0%, #93e3d8 50%, #17a2b8 100%);
background:-o-linear-gradient(15deg, #1caf9a 0%, #93e3d8 50%, #17a2b8 100%);
background:-ms-linear-gradient(15deg, #1caf9a 0%, #93e3d8 50%, #17a2b8 100%);
background:-moz-linear-gradient(15deg, #1caf9a 0%, #93e3d8 50%, #17a2b8 100%);
background:-khtml-linear-gradient(15deg, #1caf9a 0%, #93e3d8 50%, #17a2b8 100%);
background:-webkit-linear-gradient(15deg, #1caf9a 0%, #93e3d8 50%, #17a2b8 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1caf9a',endColorstr='#17a2b8',GradientType=1);}
.bluejardin .inner{color:#fff;text-align:center;}

/* boxes & cards */
.login_box{padding:30px;max-width:400px;margin:0 auto; margin-bottom:300px;background:#fff;color:#222;}

/* templates */
.template_row{padding:15px;background:rgba(255,255,255,0.3);}
.template_row:hover{background:rgba(255,255,255,0.8);-webkit-transition:background 0.3s -webkit-linear 0s;transition:background 0.3s linear 0s;}
.template_thumb{line-height:1px;}
.template_text a{color:#333;text-decoration:none;}
.template_name{color:#333;font-weight:400;line-height:34px;border-left:1px solid rgba(0,0,0,0.3);}
.template_number{font-weight:500;}
.template_row:hover .template_name{border-left:4px solid #f93d66;color:#f93d66;border-left:4px solid #333;-webkit-transition:all 0.3s -webkit-linear 0s;transition:all 0.3s linear 0s;}
.template_figcaption{margin:20px 0;line-height:20px;}
.color_sq{display:inline-block;width:20px;line-height:20px;height:20px;margin:1px;}

.service{margin:20px;padding:20px;color:#333;}
.service h2,.contact h2{font-size:36px;font-weight:bold;text-align:center;margin-bottom:20px;}
.service ul{font-size:24px;line-height:28px;font-weight:300;}
.contact{padding:40px;color:#333;}

.two h3{font-size:36px;font-weight:bold;text-align:center;margin-bottom:20px;}
.two h5{font-size:24px;font-weight:400;}
.two h6{font-size:18px;line-height:24px;font-weight:500;}
.two .price{line-height:20px;}

.price_after{margin:10px 50% 40px 0px;border-bottom:1px solid #333;}
.price_section del{color:#b00;}

/* desktop */
@media (min-width: 1200px){
.burger{display:none !important;}
.nav_link{display:inline-block;border-left:1px solid rgba(0,0,0,0.1);}
.nav_link:hover{background:rgba(24,163,184,0.1);}
.one .inner{padding:160px 0;}
.one h5{font-size:60px;line-height:60px;font-weight:300;}
.one h1{font-size:9vw;line-height:100%;font-weight:900;padding:25px 0 !important;}
.two .inner{padding:80px;}
.two h4{font-size:30px;line-height:36px;font-weight:300;padding-bottom:20px;}
.three .inner{padding:80px 0 60px 0;}
.testimonial:hover{margin:0 5px;background:rgba(0,0,0,0.2);padding:20px 35px;}
.footer{padding:60px 0;}
.bluejardin .inner{padding:60px 0;}

.page{padding:60px 0;}
.page_spec{font-size:40px;line-height:40px;font-weight:300;}
.page_title{font-size:80px;line-height:80px;font-weight:900;}
.page_subtitle{font-size:50px;line-height:50px;font-weight:300;}
.page_header{padding-bottom:60px;}

.template_row{margin:10px 0;}
.template_text{margin:0 20px;}
.template_text p,.template_details{font-size:14px;line-height:20px;}
.template_name{padding-left:10px;margin:10px 0;}
.template_details{padding:20px;}
}
/* tablet */
@media (min-width:900px) and (max-width:1199px){
.nav_trigger{font-size:36px;width:60px;text-align:center;background:#17a2b8;}
.nav{display:none;position:fixed;top:60px;right:0;background:#17a2b8;}
.nav_link{display:block;border-top:1px solid rgba(255,255,255,0.3);}
.nav_link:hover{background:rgba(7,67,77,0.2);}
.nav_trigger:hover .nav{display:block !important;}
.one .inner{padding:120px 10px;}
.one h5{font-size:50px;line-height:50px;font-weight:300;}
.one h1{font-size:9vw;line-height:100%;font-weight:900;padding:20px;}
.two .inner{padding:70px 5px;}
.two h4{font-size:40px;line-height:40px;font-weight:300;padding-bottom:25px;}
.three .inner{padding:60px 0 40px 0;}
.footer{padding:50px 0;}
.bluejardin .inner{padding:40px 0;}

.page{padding:20px 10px;}
.page_spec{font-size:30px;line-height:30px;font-weight:300;}
.page_title{font-size:70px;line-height:70px;font-weight:900;}
.page_subtitle{font-size:40px;line-height:40px;font-weight:300;}
.page_header{padding-bottom:20px;}

.template_row{margin:20px 10px;}
.template_text{margin:0 10px;}
.template_text p,.template_details{font-size:16px;line-height:22px;}
.template_name{padding-left:10px;margin:20px 0 10px;}
}
/* mobile */
@media (max-width: 899px){
.nav_trigger{font-size:36px;width:60px;text-align:center;background:#17a2b8;}
.nav{display:none;position:fixed;top:60px;right:0;background:#17a2b8;}
.nav_link{display:block;border-top:1px solid rgba(255,255,255,0.3);}
.nav_link:hover{background:rgba(7,67,77,0.2);}
.nav_trigger:hover .nav{display:block !important;}
.one .inner{padding:80px 20px;}
.one h5{font-size:30px;line-height:30px;font-weight:300;}
.one h1{font-size:9vw;font-weight:800;padding:15px 0;}
.two .inner{padding:60px 10px;}
.two h4{font-size:30px;line-height:30px;font-weight:300;padding-bottom:20px;}
.three .inner{padding:40px 0 20px 0;}
.footer{padding:40px 0;}
.bluejardin .inner{padding:20px 0;}

.page{padding:20px;}
.page_spec{font-size:26px;line-height:26px;font-weight:300;}
.page_title{font-size:60px;line-height:60px;font-weight:900;}
.page_subtitle{font-size:30px;line-height:30px;font-weight:300;}
.page_header{padding-bottom:20px;}

.template_row{margin:15px 0;}	
.template_text{margin:0 10px;}
.template_text p,.template_details{font-size:18px;line-height:24px;font-weight:100;}
.template_name{padding-left:10px;margin:20px 0 10px;}
}