@import url('https://fonts.googleapis.com/css?family=Rubik:400,400i,700|Trirong:400,400i,700');


body,html{width:100%;height:100%}

body{font-family: 'Rubik', sans-serif;
		font-weight: 400;
		line-height: 1.5em;
		font-size:1.25rem;}

hr{max-width:50px;border-width:3px;border-color:red}


hr.pu{max-width:50px;border-width:3px;border-color:red;text-align:left;}


hr.light{border-color:red}


h1,h2,h3,h4,h5,h6
{

font-family: 'Trirong', serif;
	
		
		font-weight: 700;
	
		


}

strong, b {font-weight:700}

.bg-primary{background-color:white!important}
.bg-dark{background-color:#212529!important}
.text-faded{color:black}
section{padding:4rem 0}
.section-heading{margin-top:0}::-moz-selection{color:#fff;background:#212529;text-shadow:none}::selection{color:#fff;background:#212529;text-shadow:none}
img::selection{color:#fff;background:0 0}img::-moz-selection{color:#fff;background:0 0}



#about a {color:#000;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;text-decoration:underline;}
#about a:hover {color:#000;background-color:yellow; text-decoration:none}




 #contact a {color:white;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;text-decoration:underline;}
 #contact a:hover {color:white;background-color:red; text-decoration:none}



#services a {color:#000;background-color:yellow;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;text-decoration:underline;}
#services a:hover {color:#fff;background-color:red; text-decoration:none}




#mainNav a{color:#000;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;}
#mainNav a:hover{color:#ccc;}



#mainNav{
	font-family: 'Trirong', serif;
	border-bottom:1px solid rgba(33,37,41,.1);background-color:#fff;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}

#mainNav .navbar-brand{font-family: 'Rubik', sans-serif;font-weight:400;text-transform:uppercase;color:red;font-size:18px;}

#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{color:red}
#mainNav .navbar-nav>li.nav-item>a.nav-link,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus{font-size:.9rem;font-weight:700;text-transform:uppercase;color:#212529}
#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:hover{color:#ccc}
#mainNav .navbar-nav>li.nav-item>a.nav-link.active,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active{color:red!important;background-color:transparent}
#mainNav .navbar-nav>li.nav-item>a.nav-link.active:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active:hover{background-color:transparent}


.tri {display:none;}
		

@media (min-width:992px){
	#mainNav{border-color:transparent;background-color:transparent}#mainNav .navbar-brand{color:rgba(255,255,255,.7)}
	#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{color:#fff}
	#mainNav .navbar-nav>li.nav-item>a.nav-link{padding:.5rem 1rem}
	#mainNav .navbar-nav>li.nav-item>a.nav-link,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus{color:rgba(255,255,255,.7)}
	#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:hover{color:#fff}
	#mainNav.navbar-shrink{border-bottom:1px solid rgba(33,37,41,.1);background-color:#fff}
	
	#mainNav.navbar-shrink .navbar-brand{color:red}
	#mainNav.navbar-shrink .navbar-brand:focus,#mainNav.navbar-shrink .navbar-brand:hover{color:red}
	#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link,#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus{color:#212529}
	#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:hover{color:#f05f40}
	}
	
	
	header.masthead{height:70vh;padding-top:10rem;padding-bottom:calc(10rem - 56px);background-image:url(../img/header.jpg);
	background-position:center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;
	background-size:cover}
	
	header.masthead hr{margin-top:30px;margin-bottom:30px}
	header.masthead h1{font-size:2rem}header.masthead p{font-weight:300}
	
	
	#about h4 {font-size:1.5rem;padding-top:35px}
	
	
	#services h3 {padding-left:10px;padding-top:20px;font-size:1.25rem;line-height:1.75rem}
    #literatur h3 {padding-left:10px;padding-top:20px; font-size:1.25rem;line-height:1.75rem}
	
	
	@media (min-width:768px) {
		
		body{
		line-height: 1.5em;
		font-size:1.5rem;}
		
		#about h4 {font-size:1.75rem}
		
		
#services h3 {padding-left:10%;padding-top:30px;font-size:1.75rem;line-height:2.5rem}
#literatur h3 {padding-left:10%;padding-top:30px; font-size:1.75rem;line-height:2.5rem}
	
		
		
		
		
		
		.tri {display:block;position:absolute;bottom:10px;left:0;width:100%;text-align:center}
		.tri a {font-size:3rem;color:red;text-align:center;padding:10px;}
		
		header.masthead {height:100vh;min-height:650px;}
	}
	
	@media (min-width:992px){
		
		header.masthead{
		
	padding-top:0;padding-bottom:0}
	
	header.masthead h1{font-size:3rem}
	}
	@media (min-width:1200px){header.masthead h1{font-size:4rem}
	}
	.service-box{max-width:400px}
	.portfolio-box{position:relative;display:block;max-width:650px;margin:0 auto}
	
	.portfolio-box .portfolio-box-caption{position:absolute;bottom:0;display:block;width:100%;height:100%;text-align:center;opacity:0;
	color:#fff;background:rgba(255,255,255,.9);-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}
	
	.portfolio-box .portfolio-box-caption .portfolio-box-caption-content{position:absolute;top:50%;width:100%;transform:translateY(-50%);text-align:center}
	.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
	.portfolio-box .portfolio-box-caption .portfolio-box-caption-content 
	.project-name{padding:0 15px;color:black}
	.portfolio-box .portfolio-box-caption .portfolio-box-caption-content 
	.project-category{font-size:26px}
	.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{font-size:18px}
	.portfolio-box:hover .portfolio-box-caption{opacity:1}.portfolio-box:focus{outline:0}
	
	@media (min-width:768px){
		
		.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category{font-size:22px}
		.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{font-size:22px}
		}
		
		.text-primary{color:red!important}.btn{font-weight:700;text-transform:uppercase;border:none;border-radius:300px;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}
		.btn-xl{padding:1rem 2rem}.btn-primary{background-color:#f05f40;border-color:#f05f40}
		.btn-primary:active,.btn-primary:focus,.btn-primary:hover{color:#fff;background-color:#ee4b28!important}
		.btn-primary:active,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(240,95,64,.5)!important}
		
		
		.start {height:100vh;text-align:center}
		
		#portfolio img {padding:5px;}
		
		#contact {background-image:url(../img/bg.jpg);background-size:cover;}
		
		#contact {color:white;}
		
		
		
		.navbar-light .navbar-toggler {
    
    border-color: white;
}