/* ALL HEADER CSS - NAVBAR AND JUMBOTRON */
*{
	font-family: 'Montserrat', sans-serif;
}
html,body{
	height: 90%;
}
nav.bg-dark {
    background-color: #000000!important;
}
div.jumbotron{
	border-radius: 0;
	background-image: url('images/cloud-background.jpg');
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.jumboTronDiv{
	margin-top: 7%;
}
div.jumbotron h1{
	text-align: center;
	color: black;
	text-shadow: 2px 2px 2px grey;
	font-size: 550%;
}
p.lead{
	text-align: center;
	font-style: italic;
	color: black;
	text-shadow: 2px 2px 2px grey;
}
#list-item-social{
    font-size:90%;
    padding:0;
    margin: 0 0 2 0;
}
#list-item{
    margin:2% 0%;   
}

p#paragraph{
	animation-name: spin;
	animation-duration: 3s;
	animation-delay: 2;
	animation-timing-function: linear;
}
@keyframes spin{
	0% {opacity:0;left:0px; bottom:0px;transform: rotateY(20deg)}
    25%{transform: rotateY(90deg)}
    50% {left:1000px; top:0px;transform: rotateY(180deg); }
    75%{transform: rotateY(270deg)}
    100%{opacity:1;left:0px; top:0px;transform: rotateY(360deg);}
}
nav.nav a{
	color: white;
}

/* SOCIAL MEDIA ICONS ON HOME PAGE */
div#social-media-icons{
	position: relative;
	bottom: 10%;
}
div#social-media-icons a{
	margin: 0 8px;
	font-size:25px;
	animation-name: icons-spin;
	animation-duration: 3s;
	animation-delay:3s;
	animation-iteration-count: 3;
}
@keyframes icons-spin{
	0%{left:0px; bottom:0px;transform: rotateY(20deg)}
    25%{transform: rotateY(90deg)}
    50%{left:1000px; top:0px;transform: rotateY(180deg);transform: rotateX(180deg) }
    75%{transform: rotateY(270deg)}
    100%{left:0px; top:0px;transform: rotateY(360deg);transform: rotateX(360deg)}
}
.fa {
  padding: 25px;
  font-size: 25px;
  width: 70px;
  height: 70px;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  display: none;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook{
	background: #3B5998;
  	color: white;
  	box-shadow:3px 3px 3px grey;
}
.fa-linkedin{
 	background: #007bb5;
  	color: white;
  	box-shadow:3px 3px 3px grey;
}
.fa-github{
  	background: #211F1F;
  	color: white;
    box-shadow:3px 3px 3px grey;
}


/* CLOUD WEB DESIGNS HEADING ANIMATION */
/* CLOUD */
#letter-C{
	animation-name: letters;
	animation-duration: 1s;
	animation-timing-function: linear;
}
#letter-l{
	animation-name: letters;
	animation-duration: 1s;
	animation-timing-function: linear;
}
#letter-o{
	animation-name: letters;
	animation-duration: 1s;
	animation-timing-function: linear;
}
#letter-u{
	animation-name: letters;
	animation-duration: 1s;
	animation-timing-function: linear;
}
#letter-d{
	animation-name: letters;
	animation-duration: 1s;
	animation-timing-function: linear;
}
/* Web */
#letter-W{
	animation-name: letters;
	animation-duration: 2s;
	animation-timing-function: linear;
}
#letter-e{
	animation-name: letters;
	animation-duration: 2s;
	animation-timing-function: linear;
}
#letter-b{
	animation-name: letters;
	animation-duration: 2s;
	animation-timing-function: linear;
}
/* DESIGNS*/
#letter-D{
	animation-name: letters;
	animation-duration: 3s;
	animation-timing-function: linear;
}
#letter--e{
	animation-name: letters;
	animation-duration: 3s;
	animation-timing-function: linear;
}
#letter-s{
	animation-name: letters;
	animation-duration: 3s;
	animation-timing-function: linear;
}
#letter-i{
	animation-name: letters;
	animation-duration: 3s;
	animation-timing-function: linear;
}
#letter-g{
	animation-name: letters;
	animation-duration: 3s;
	animation-timing-function: linear;
}
#letter-n{
	animation-name: letters;
	animation-duration: 3s;
	animation-timing-function: linear;
}
#letter-s{
	animation-name: letters;
	animation-duration: 3s;
	animation-timing-function: linear;
}
@keyframes letters{
	0%{opacity:0;text-shadow: 2px 2px 2px grey;}
	50%{text-shadow: -2px -3px 2px blue;color:#BCB8B8;}
	100%{opacity:1;text-shadow: 2px 2px 2px grey;}
}

/* BODY/JUMBOTRON STYLE ABOUT SECTION */
.aboutDiv{
	font-size: 130%;
	color: black;
	margin-top: 7%;
	padding: 0 15%;
	text-align: center;
}


/* BODY/JUMBOTRON STYLE SERVICES SECTION */
.servicesDiv p{
	
	margin-bottom:0;
	padding: 0 5%;
	color: black;
	text-align: center;
	font-size: 120%;
}
.servicesDiv ul{
	margin-bottom: 5%;
	list-style-type: none;
	text-align: center;
	font-size: 140%;
	color:black;
}
div#cards-1{
	animation-name: fade-in;
	animation-duration: 1s;
	animation-timing-function: linear;
}
div#cards-2{
	animation-name: fade-in;
	animation-duration: 1.5s;
	animation-timing-function: linear;
}
div#cards-3{
	animation-name: fade-in;
	animation-duration: 2s;
	animation-timing-function: linear;
}
div#cards-4{
	animation-name: fade-in;
	animation-duration: 2.5s;
	animation-timing-function: linear;
}
@keyframes fade-in{
	from{opacity: 0;transform:rotateX(0deg);}
	to{opacity: 1;transform:rotateX(360deg);}
}

/* BODY/JUMBOTRON STYLE CLIENTS SECTION */
div.card{
	text-align: center;
	animation-name: cardSpinner;
	animation-duration: 1s;
	animation-timing-function: linear;
}
@keyframes cardSpinner{
	0% {opacity:0;transform: rotateY(20deg)}
    25%{transform: rotateY(90deg)}
    50% {transform: rotateY(180deg); }
    75%{transform: rotateY(270deg)}
    100%{opacity:1;transform: rotateY(360deg);}
}
div.card a{
	text-decoration: none;
	color: black;
}

/* BODY/JUMBOTRON STYLE CONTACT SECTION */
button.btn{
	margin-top: 20px;
}

form{
	background:white;
}

/* ALL MY OWN CUSTOM MEDIA QUERIES */
@media (max-width: 576px) { 
	div.jumbotron h1{
		text-align: center;
		color: black;
		text-shadow: 2px 2px 2px grey;
		font-size: 275%;
	}
}


@media (max-width: 768px) {
	div.jumbotron h1{
		text-align: center;
		color: black;
		text-shadow: 2px 2px 2px grey;
		font-size: 375%;
	} 
}


@media (max-width: 992px) {
	
}


@media (min-width: 1200px) {  }