@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700i');

* {
 box-sizing: border-box;
}
body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: white;
}

.fredoka-font {
	font-family: "Fredoka", sans-serif;
	font-size: 60px;
	font-weight: 600;      /* <weight>: Use a value from 300 to 700 */
	font-style: normal;
	display: block;
	margin-bottom: 10px;
	margin-left: 10px;
	font-variation-settings:"wdth" 100;
  }

p {
	line-height: 24px
}

.row:before,
.row:after {
    content: "";
    display: table;
	clear: both;
}

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px;
}

.row>div {
	padding-right: 20px;	
}

h1 {
	font-weight: 300;
	font-size: 35px;
	padding: 20px 0 20px 0;
}


/*---Styles for columns---*/
[class*="col-"] {
	float: left;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.col-offset-1 {margin-left: 8.33%;}
.col-offset-2 {margin-left: 16.66%;}
.col-offset-3 {margin-left: 25%;}
.col-offset-4 {margin-left: 33.33%;}
.col-offset-5 {margin-left: 41.66%;}
.col-offset-6 {margin-left: 50%;}
.col-offset-7 {margin-left: 58.33%;}
.col-offset-8 {margin-left: 66.66%;}
.col-offset-9 {margin-left: 75%;}
.col-offset-10 {margin-left: 83.33%;}
.col-offset-11 {margin-left: 91.66%;}

/*Styles for section: header*/
header {
	background: url("photo/background_main.jpg");
	height: 100vh;
	background-size: cover;
	background-position: bottom;
}

.headline {
    display: flex; /* flexbox container */
    align-items: center; /* aligns logo to center */
    gap: 10px; /* adds space between logo and text */
}

.logo {
	height: auto;
	width: 120px;
}

.text {
	width: 100%;
    font-weight: bold;
	font-size: 45px;
    font-family: Merriweather;
    font-weight: 700;
    font-style: italic;
}

.slogan h1, .safety>div h1 {
	font-size: 60px;	
}

/*Styles for section: start*/
.drone {
	position: relative;	
}

.drone img {
	position: absolute;
	height: 800px;
	bottom: -100%;
	right: -15%;
}

.start h1, .details h1 {
	color: #222626;
}

.start p, .details p {
	color: #959595;
}

/*Styles for section: gallery*/
.gallery .fa {
	padding-left: 5px;	
}
.gallery>.row>div h1 {
	font-size: 30px;
	padding-bottom: 20px;
}

.gallery>.row>div {
	height: 350px;
	padding-left: 20px;
}

.gallery>.row>div p:nth-child(3),
.safety>.row>div p:nth-child(3) {
	font-weight: bold;
	padding-top: 30px;
	transition: 0.3s;
}

.gallery>.row>div p:nth-child(2),
.safety>.row>div p:nth-child(2) {
	font-size: 13px;
}

.gal1 {
	background-color: #f5989d;	
}

.gal2 {
	background-color: #615f7d;	
}

.gal3 {
	background-image: url("photo/gal3.jpg");
	background-size: cover;
}

.gal4 {
	background-color: #bd8cbf;	
}

.gal5 {
	background-image: url("photo/gal5.jpg");
	background-size: cover;
}

.gal6 {
	background-color: #82ca9c;	
}

.gal7 {
	background-image: url("photo/gal7.jpg");
	background-size: cover;
}

/*Styles for section: details*/
.details h3 {
	color: #67676d	
}

/*Styles for section: safety*/
.safety {
	background-image: url("photo/safety.jpg");
	background-size: cover;
	height: 100vh;
	color: rgb(65, 64, 64);
}
.safety>div {
	padding-top: 10%;
}

/*Styles for section: footer*/
footer {
	background-color: #264f81;
	font-size: 13px;
}

a:link {
	color: white;
}

a:visited {
	color: black;
}

footer>.row>div {
	padding-right: 50px;	
}

footer>.row>div:nth-child(2) p {
	color: #57697f;	
}


/*Media queries*/
@media (max-width: 767px) {
	
	.col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
    
	/*General styles*/
	p,
	footer h4 {
		font-size: 20px !important;	
	}
	.container {
		padding: 30px 30px;
	}
	.row>div {
		padding-right: 0px;	
	}
	
	/*Styles for sections*/
	.drone img {
		height: 325px;
		right: -10%;
		bottom: +80%;
	}
	.slogan h1, .safety>div h1 {
		font-size: 40px;	
	}
	.start h1, .gallery>.row>div h1 {
		font-size: 25px;	
	}
	.details h3 {
		color: #67676d;
		font-size: 20px;
	}
	footer>.row>div {
		padding-right: 0px;	
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.drone img {
		height: 400px;
		right: -5%;
		bottom: 0;
	}	
	
	.col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.drone img {
		height: 600px;
		right: -5%;
		bottom: 0;
	}
	.gallery>.row>div h1 {
		font-size: 25px;	
	}
}