body {

}


.navbar {
    background-color:gold !important;
}


.colorit {
background-color:white !important;
color:black;
}


h1 {
	text-align:center;
	text-transform: uppercase;
	font-family: 'Racing Sans One', cursive;
	text-shadow: 1px 1px purple;

}

h4,h2{
	font-family: 'Racing Sans One', cursive;
	text-transform: uppercase;	
	text-shadow: 1px 1px purple;

}

#accessibility{
	
	background-color:none important;
}


#defineSection, #airPlane, #willitwork{
	background-color:gold;
	/* background-color:transparent; */
}

#slogans1{
	background-color:purple;
	
}



p {
	
	font-style: italic;
  	font-family: 'Open Sans',  sans-serif; 
	font-weight:normal; 
	font-weight:600;
		/* scroll-behavior: smooth; */

}

#slogans1{
/* background-color:gold;  */
display:block; 
height:75vh; 
display:flex;
align-items:center;
justify-content:center; 
background-size: 70%;
background-position: center;

background-attachment: fixed;
background-image:url(crypto.svg); 
background-repeat: no-repeat;

	
}



#masthead{
background-color:gold; 
display:flex; 
align-items: center;
  justify-content: center;
height:75vh; 
display:flex;
align-items:center;
justify-content:center; 
background-size: 70%;
background-position: center;
background-attachment: fixed;
background-image:url(crypto.svg); 
background-repeat: no-repeat;
}
div.title {
  margin: 0 }

#airPlane{
background-color:gold; 
display:block; 
height:50vh; 
display:flex;
align-items:center;
justify-content:center; 
background-position: center;
background-attachment: fixed;
background-image: url(newWorld.svg), url(blob.svg); 
background-repeat: no-repeat;
background-size: 60%;
padding-top:5em;
}


#services{
/* background-color:gold;  */
display:block; 
/* height:50vh;  */
/* display:flex; */
align-items:center;
justify-content:center; 
background-position: center;
background-attachment: fixed;
/* background-image:url(blob.svg);  */
background-repeat: no-repeat;
background-size: 60%;
padding-top:5em;
	
}

/* #develop{
			
display:block; 
height:50vh; 
display:flex;
align-items:center;
justify-content:center; 
background-attachment: fixed;
background-image:url(laptop.svg); 
background-repeat: no-repeat;
background-size: 100%;

} */


#containerSection{
	
/* background-color:gold;  */
display:block; 
height:100vh; 
display:flex;
align-items:center;
justify-content:center; 
background-size: cover;
background-attachment: fixed;
background-image:url(container.svg); 
background-repeat: no-repeat;
background-size: cover;	

	
	
	
}







#shippingContainers{
background-color:gold; 
display:block; 
height:100vh; 
display:flex;
align-items:center;
justify-content:center; 
background-size: cover;
background-attachment: fixed;
background-image:url(container.svg); 
background-repeat: no-repeat;
background-size: cover;	

	
	
	
}

#susu{
	
	background-color:gold; 
display:block; 
height:100vh; 
display:flex;
align-items:center;
justify-content:center; 
background-size: cover;
background-attachment: fixed;
background-image:url(susu.svg); 
background-repeat: no-repeat;
background-size: cover;	

	
	
	
}


#designSection{
//background-color:gold; 
display:block; 
height:50vh; 
display:flex;
align-items:center;
justify-content:center; 
//background-attachment: fixed;
//background-image:url(heart.svg),url(circleSquare.svg); 
background-repeat: no-repeat;
background-size: contain;
font-weight:bold;
	
}



.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#information {padding:0em; margin:1em; font-size:16px; text-align:center; color:purple}


#bigbox {
background-color:transparent;  width:70%; margin-left:15%; margin-right:15%;
-webkit-column-count:3; /* Chrome, Safari, Opera */
-moz-column-count:3; /* Firefox */
column-count:3;
margin:0px;
Padding:0px;
}



/* FFBD3E gold, FF7311 darkorange , red 780024, purple 40002B, black 000000, 780024 */
 
xul
{
list-style-type:none;
margin-left:25%;
margin-top:0;
margin-bottom:0;
padding:0;
overflow:hidden;
}
xli
{
float:left;
font-size:32px;
text-align:center;
padding:1em;
}


xa#irwineEmail{
display:block;
width:250px;
background-color:transparent;
cursor:pointer;
color:white;
}

xa:hover {text-decoration:none;}

xa.turn:hover
{
opacity:0.5;
transform:rotate(47deg);
-ms-transform:rotate(47deg); /* IE 9 */
-webkit-transform:rotate(47deg); /* Opera, Chrome, and Safari */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

#footer {
width:100%;
height:100px;
background:white;
left:0px;
bottom:0px;
}

div#dunklogo {margin-left:25%; margin-right:25%; width:50%; position:relative; top:33%;}

div#next1 {width:64px; height:64px; margin:1em; font-size:12pt;}
div#next2 {width:64px; height:64px; margin:1em; font-size:12pt;}
div#next3 {width:64px; height:64px; margin:1em; font-size:12pt;}

xform {padding:1em; margin:1em;}
xinput#email {width:250px; padding:1em;}
xinput#subject {width:250px; padding:1em;}
xinput#message {width:250px; padding:1em;}


.black_overlay{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }
.white_content {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 16px;
        border: 16px solid darkorange;
        background-color: white;
        z-index:1002;
        overflow: auto;
    }
	
#next1, #next2, #next3 {
	width:60px; 
	height:60px;
	padding:1em;
	-webkit-border-radius: 90px;
	-moz-border-radius: 90px;
	border-radius: 90px;
	font-size:32px;}
	
@media screen and (max-width: 1000px) {

    #content { width: 100% }

}

@media screen and (max-width: 800px) {

#bigbox {
-webkit-column-count:2; /* Chrome, Safari, Opera */
-moz-column-count:2; /* Firefox */
column-count:2;
margin:0px;
Padding:0px;
}

}

@media screen and (max-width: 600px) {

    #bigbox {
-webkit-column-count:1; /* Chrome, Safari, Opera */
-moz-column-count:1; /* Firefox */
column-count:1;
margin:0px;
Padding:0px;
}



div#dunklogo {display:none;}

}


#navigationsection {min-height:250px;}
#navigationsection ul {position:relative; top:50%;}
#intromovie1, #intromovie2 {display:none;}

img.turn:hover{
opacity:0.5;
transform:rotate(47deg);
-ms-transform:rotate(47deg); /* IE 9 */
-webkit-transform:rotate(47deg); /* Opera, Chrome, and Safari */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

/*
 The animate class is apart of the element and the ng-enter class
 is attached to the element once the enter animation event is triggered
*/
.reveal-animation.ng-enter {
 -webkit-transition: 1s linear all; /* Safari/Chrome */
 transition: 1s linear all; /* All other modern browsers and IE10+ */

 /* The animation preparation code */
 opacity: 0;
}

/*
 Keep in mind that you want to combine both CSS
 classes together to avoid any CSS-specificity
 conflicts
*/
.reveal-animation.ng-enter.ng-enter-active {
 /* The animation code itself */
 opacity: 1;
}


@-webkit-keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: -1920px 0; }
}
.xclouds { 
    width: 100%; 
    background-image: url(newCity2020.svg);
    background-position: 0px 0px;
    background-repeat: repeat-x;

    animation: animatedBackground 15s linear infinite;
    -ms-animation: animatedBackground 15s linear infinite;
    -moz-animation: animatedBackground 15s linear infinite;
    -webkit-animation: animatedBackground 15s linear infinite;
}


.truck { 
    width: 100%; 
    background-image: url(truck.svg);
    background-position: 0px 0px;
    background-repeat: repeat-x;

    animation: animatedBackground 70s linear infinite;
    -ms-animation: animatedBackground 70s linear infinite;
    -moz-animation: animatedBackground 70s linear infinite;
    -webkit-animation: animatedBackground 70s linear infinite;
	-webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */
    animation-direction: reverse;
	height:600px;
	position:relative;
	bottom:150pt;
}

.plane { 
    width: 100%; 
    background-image: url(duncPlane.svg);
    background-position: 0px 0px;
    background-repeat: repeat-x;

    animation: animatedBackground 70s linear infinite;
    -ms-animation: animatedBackground 70s linear infinite;
    -moz-animation: animatedBackground 70s linear infinite;
    -webkit-animation: animatedBackground 70s linear infinite;
	-webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */
    animation-direction: reverse;
	height:640px;
	position:relative;
	bottom:150pt; 
}


.navigationBut { float:left; width:200px; background-color:gold; color:purple; text-decoration:none; height:76px; !important; line-height:45px; text-align:center;}


.flexbox-container {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;

	align-items: center;
}




.login-container {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh; 
  background-attachment: fixed;

  background-image: url(crypto.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.typewriter span {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

.svg-1:hover path {
  d: path("M8,2 L2,8");
}
.svg-2:hover path {
  d: path("M2,2 L5,8 L8,2");
}
.svg-3:hover path {
  d: path("M2,2 Q2,8 8,8");
}
.svg-4:hover path {
  d: path("M2,5 C2,2 8,2 8,5");
}
.svg-5:hover path {
  d: path("M3,3 L8,3 L2,5 L8,5 L3,7 L7,7");
}
.svg-6:hover path {
  d: path("M2,5 A 5 25 -15 0 1 8 8");
}
.svg-7:hover path {
  d: path("M2,5 S2,14 4,5 S7,8 8,4")
}
.svg-8:hover path {
  d: path("M5,2 Q 8,5 5,8")
}
.svg-9:hover path {
  d: path("M2,2 Q8,2 5,5 T8,8")
}




svg polyline,
svg line,
svg path {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: 0.2s;
}