@charset "UTF-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: 'Hind', sans-serif;
	}

.clear {
	clear:both;
	}

html {
  scroll-behavior: smooth;
}

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

body {
	padding:0px;
	}

#logo img {
	height:45px;
	padding-top:5px;
	padding-left:10px;	
	}

.navbar-fixed-top {
	background-color:#fff;
	}
	
.navbar-fixed-top .navbar-toggle {
	background:#fff;
	border:none;
	border-radius:0;
	}
	
.navbar-fixed-top .navbar-toggle .icon-bar {
	background:rgba(224,199,161,1);
	}
	
.navbar-fixed-top .navbar-nav li a {
	color:#666;
	font-weight:300;
	font-size:12px;
	}

.navbar-fixed-top .navbar-nav li > a:focus {
	background:none;
	}	
	
.navbar-fixed-top .navbar-nav li a:hover {
	background:none;
	text-decoration:underline;
	}	
	
.navbar-fixed-top .navbar-nav li #name {
	color:#8cd0f2;
	cursor:default;
	font-weight:700;
	}		
.navbar-fixed-top .navbar-nav li #name:hover {		
	background:none;
	text-decoration:none;
}
	
.navbar-fixed-top .navbar-nav li .header-icons {
	color:#ccc;
	font-size:14px;
    position:relative;
	}	

.navbar-fixed-top .navbar-nav li .header-icons .tooltiptext {
 visibility: hidden;
  width: 120px;
	color:#8cd0f2;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
    font-size:9px;
    font-weight:700;
font-family: 'Hind', sans-serif;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  width: 120px;
  bottom: 70%;
  left: 50%; 
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
	.navbar-fixed-top .navbar-nav li .header-icons i:hover .tooltiptext {
          visibility: visible;

}

.navbar-fixed-top .navbar-nav li .header-icons:hover {	 
background:none;
cursor:default;
	}
	
.navbar-fixed-top .navbar-nav li .header-icons i:hover {	 
	cursor:pointer;
	color:#8cd0f2;
	-webkit-transition: all .2s ease-in-out;
	 -moz-transition: all .2s ease-in-out;
 	 -o-transition: all .2s ease-in-out;
 	 transition: all .2s ease-in-out;
	}	
.navbar-fixed-top .navbar-nav li #envelope {
	margin-left:50px;
	margin-right:-10px;
	}	
	
/* ---------CONTAINER -------------*/	


video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
    padding:50px;
}

.viewport-header {
  position: relative;
  height: 100vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  font-family: 'Syncopate', sans-serif;
  color: #4a3a27;
  text-transform: uppercase;
  letter-spacing: 3vw;
  line-height: 1.2;
  font-size: 3vw;
  text-align: center;
  span {
    display: block;
    font-size: 10vw;
    letter-spacing: -1.3vw;
  }
}

#scroll-down i{
	width:50px;
	height:50px;
	border:solid 1px #fff;
	border-radius:50%;
	color:#fff;
	font-size:35px;
	cursor:pointer;
	padding-top:7px;
	position:absolute;
    bottom:100px;
 	left:50%;
    margin-left:-25px;
	}	

#scroll-down i:hover {
	background:rgba(255,255,255,.3);
	-webkit-transition: all .4s ease-in-out;
	 -moz-transition: all .4s ease-in-out;
 	 -o-transition: all .4s ease-in-out;
 	 transition: all .4s ease-in-out;
	}

/* ---------HEADLINE -------------*/	
#headline {
	max-width:650px;
	margin:0 auto;
	}

.viewport-header #name {
    width:100%;
    max-width:640px;
    margin:0 20px;
    
}

.viewport-header #name img {
    width:100%;
    padding:0 20px;
}

.viewport-header h2 {
	font-weight:700;
	font-size:21px;
	margin:35px 20px;
	color:#fff;
    text-align:left;
	}
	
.viewport-header h2 img {
	width:100%;
	opacity:1;
	}	

/* ---------PORTFOLIO-------------*/	

#portfolio {
	padding:0 25px 70px 25px;
    max-width:1100px;
    border-radius:50px;
	clear:both;
    background-color:rgba(255,255,255,1);
    position:relative;
	}
	
#portfolio h2 {
	margin:50px 0 25px 0;
	padding:0;
	font-weight:700;
	font-size:50px;
	text-align:center;
	color:#555;
	}
			
#portfolio h4 {
	text-align:center;
	font-size:18px;
	font-weight:300;
	color:#999;
	margin-bottom:100px;
	line-height:150%;
	}
	
#portfolio h4 span {
	color:rgba(74,160,171,.8);
	}		
			
/*-------------HEX----------------*/

.hex {
    overflow: hidden;
    visibility: hidden;
   -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);    
    cursor: pointer;
	 width: 200px;
    height: 230px;
	float:left;
	margin-left:10px;
	margin-top:-48px;
    }
	
.images1{
    overflow: hidden;
    width: 100%;
    height: 100%;
   -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);   
    }
	
.images2{
    width: 100%;
    height: 100%;
    background-position: 50%;
    visibility: visible;
	background:#999;
  -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);		
	background-size:80%;
	background-repeat:no-repeat;
	background-position:center;
	overflow:hidden;		
    }
	
.images2:hover > .portHover  {
	background-color:rgba(74,160,171,.8);
		color:rgba(255,255,255,1);
	-webkit-transition: all .2s ease-in-out;
	 -moz-transition: all .2s ease-in-out;
 	 -o-transition: all .2s ease-in-out;
 	 transition: all .2s ease-in-out;
    }
	
.images2 .portHover {
	font-size:30px;
	width:100%;
	height:100%;
	margin:0 auto;
	color:rgba(255,255,255,.0);
	text-align:center;
	background-color:rgba(74,160,171,0);
	padding-top:95px;
	}	
	
.breaker, breaker-short {
	clear:both;
	}
	
.breaker-short {
	margin-left:115px;
	}		
	
.port-container {
	margin:0 auto;
	max-width:840px;
	}		

/* ------- MODAL ---------*/

.portfolio-modal .modal-content {
	border-radius:0;
	padding:50px;
	}

.portfolio-modal .close{
	margin:-40px -35px 0 0;
    color:#8cd0f2;
    opacity:1;
	}
	
.portfolio-modal h6 {
	padding:10px 20px;
	font-size:15px;
	color:#fff;
	font-weight:600;
	border-radius:25px;
	margin:50px auto 0 auto;
	width:100px;
	text-align:center;
	cursor:pointer;
    background:#8cd0f2;
    border:solid 1px #8cd0f2;
	}
	
.portfolio-modal h6:hover {
	background-color:#fff;
    color:#62CDD6;
	}	

.portfolio-modal h3 {
	margin:0;
	font-size:35px;
	color:#777;
	margin-bottom:10px;
	font-weight:700;
    text-align:center;
	}
	
.portfolio-modal h3 span { 
	font-family: 'Lobster Two', cursive;
	color:#8cd0f2;
	font-size:22px;
	}	
	
.portfolio-modal p {
	font-size:18px;
	font-weight:300;
	line-height:150%;
	color:#888;
	margin-bottom:10px;
	}	
	
.portfolio-modal .modal-contentBox {
	background:#FBFBFB;
	padding:50px;
	margin-top:50px;
	}
	
.modal-img-container {
	width:100%;
	max-width:600px;
	margin:0 auto;
	}
	
.modal-img-container img {
	width:100%;
	}	
	
/*-----ABOUT-----*/	

#about {
	clear:both;
	padding:0;
	padding-bottom:100px;
	margin:30px 0 0 0;
	width:100%;
    position:relative
	}
		
#about img {
    width:100%;
    max-width:250px;
    margin-top:50px;
    float:right;
}

#about h2 {
	margin:50px 0 25px 0;
	padding:0;
	font-weight:700;
	font-size:50px;
	text-align:left;
	color:#fff;
	}
			
#about h4 {
	text-align:left;
	font-size:18px;
	font-weight:300;
	color:#fff;
	margin:0 0 50px 0;
	line-height:150%;
	}	
	
#about h4 a {
	text-decoration:underline;
	color:#EACFA6;
	}
	
#about h4 a:hover {
	text-decoration:none;
	color:#4aa0ab;
	}		

#legs img {
	width:100%;
	}
	
.circle {
	width:60px;
	height:60px;
	margin:0 auto;
	}
	
.circle h5 {
	text-align:center;
	}
	
.circle img {
	height:50px;
	}	
	
#about h3 {
	color:#fff;
	font-weight:400;
	font-size:13px;
	text-align:center;
	margin:0;
	margin-top:-5px;
	margin-bottom:25px;
	}	
	
#circle-top {
	text-align:left;
	padding:10px;
	}	
	


	
@media (max-width:900px) {
.breaker, breaker-short {
	clear:none;
	}
	
.breaker-short {
	margin-left:10px;
	}	
		
.port-container {
	max-width:630px;
	margin:0 auto;
	}
	
.breaker-2 {
	clear:both;
	}
	
.breaker-short-2 {
	clear:both;
	margin-left:115px;
	}				
}

				
	
@media (max-width:768px) {
    
    video {
    padding:10px;
}
	
#logo h4 {
	display:inherit;
	}
	

	
#container, #portfolio {
	padding:0px;	
    border-radius:0;
		}
    
    #headline {
   width:100%;
    margin:0;    
    }  
    
    #headline #name {
        display:block;
    width:100%; 
    margin:0;    
    }
    
    #headline h2 {
    margin-left:0;
        font-size:18px;
        
    }
		
#container {
	display:scroll;
	}		
	
#container #innerContainer {
	display:scroll;
	background-attachment:scroll;
	}	
	
.portfolio-modal .modal-contentBox {
	padding:15px;
	}
	
#about {
padding:0 20px 50px;	
	}
	
.navbar-fixed-top .navbar-nav li #envelope {
	margin-left:0px;		
}

}
@media (max-width:630px) {
.port-container {
	max-width:420px;
	margin:0 auto;
	}
		
.breaker-2 {
	clear:none;
	}
	
.breaker-short-2 {
	clear:none;
	margin-left:10px;
	}				

.breaker-3 {
	clear:both;
	}
	
.breaker-short-3 {
	clear:both;
	margin-left:115px;
	}
    
.portfolio-modal .close{
	margin:-15px -15px 0 0;
    color:#62CDD6;
    opacity:1;
	}    
}

@media (max-width:420px) {
.port-container {
	width:100%;
	margin:0 auto;
	}
		
.breaker-3 {
	clear:none;
	}
	
.breaker-short-3 {
	clear:none;
	margin-left:10px;
	}				

.hex {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
	 width: 100%;
	float:none;
	margin-left:0px;
	margin-top:0px;
	margin-bottom:5px;
    }
	
.images1{
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
    }
	
	
.images2{
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);	
    }
	
.images2:hover > .portHover  {
	background-color:rgba(74,160,171,.8);
		color:rgba(255,255,255,1);
	-webkit-transition: all .2s ease-in-out;
	 -moz-transition: all .2s ease-in-out;
 	 -o-transition: all .2s ease-in-out;
 	 transition: all .2s ease-in-out;
    }
	
.images2 .portHover {
	font-size:30px;
	width:50px;
	height:50px;
	margin:0 auto;
	color:rgba(255,255,255,1);
	text-align:center;
	background-color:rgba(74,160,171,.7);
	padding-top:5px;
	margin-top:50px;
	position:absolute;
	bottom:10px;
	right:10px;
	}
	
#portfolio h4 {
	margin-bottom:35px;
	}	
.portfolio-modal .modal-content {
	border-radius:0;
	padding:25px;
	}	
    
#about img {
    width:100%;
    max-width:250px;
    margin-top:50px;
    float:none;
    margin:50px auto;
    display:block;
}
    

}