/* ---------- Home Page ---------- */
/* ----- Menu ----*/
nav{
    width: 100%;
    height: 60px;
    background-color: rgb(255, 255, 255);
}

nav ul{
    float: left;
}

nav ul li{
    float: left;
    list-style: none;
    position: relative;
}

nav ul li a{
    display: block;
    font-family: Roboto;
    color: rgb(255, 145, 0);
    font-size: 18px;
    padding: 0px 14px;
    text-decoration: none;
}

nav ul li ul{
    display: none;
    position: absolute;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    border-radius: 0px 0px 10px 10px;
}

nav ul li:hover ul{
    display: block;
}

nav ul li ul li {
    width: 170px;
    border-radius: 4px;
}

nav ul li ul li a{
    padding: 14px 14px;
}

nav ul li ul li a:hover{
    background-color: rgb(248, 206, 162);
}

body{
    background-color: rgb(244, 244, 244);
}
/* --- Orange Titles --- */
.home_title{
    display: inline-block;
}
.home_sub_title{
    font-weight: bold;
    color: rgb(255, 145, 0);
    display: inline-block;
    position: relative;
    left: 50px;
    font-size: 20px;
}
.home_sub_pages{
    display: inline-block;
    font-weight: bold;
    color: rgb(255, 145, 0);
    position: relative;
    left: 70px;
    bottom: 40px;
    font-size: 20px;
}
/* --- small logo next to title --- */
.cloudflare_logo_icon{
    display: inline-block;
    position: relative;
    left: 70px;
    width: 60px;
}
/* --- small logo next to title --- */
.cf_logo_home{
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    top: 15px;
    margin-left: 5px;
}
/* Home page first text chunk*/
.intro_cf_pages_text{
    position: relative;
    left: 15%;
    top: 20px;
    font-size: 18px;
}

/* --- First Image on Home page --- */
.cfpages_main_img{
    width: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    display: inline-block;
    position: relative;
    left: 10%;
    top: 70px;
}

/* --- Cloudflare Network title --- */
.cf_network_supporting_pages{
    font-weight: bold;
    color: rgb(255, 145, 0);
    display: inline-block;
    position: relative;
    top: 150px;
    right: 100px ;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
}
.cf_network_supporting_pages_text{
    text-align: center;
    font-weight: 100;
    color: rgb(0, 0, 0);
    display: inline-block;
    position: relative;
    top: 220px;
    right: 200px;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
}

/* --- Cloudflare Network Stats Image --- */
.cf_network_stats_img{
    text-align: center;
    width: 50%;
    height: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    display: inline-block;
    position: relative;
    left: 10%;
    right: 20%;
    top: 250px;
    margin-bottom: 500px;
}
/* ---------- Images Page ---------- */
.home_sub_images{
    display: inline-block;
    font-weight: bold;
    color: rgb(255, 145, 0);
    position: relative;
    left: 65px;
    bottom: 40px;
    font-size: 20px;
}

.intro_cf_images_text{
    position: relative;
    left: 15%;
    top: 20px;
    font-size: 18px;
}

.how_to_upload_images_title{
    font-weight: bold;
    color: rgb(255, 145, 0);
    display: inline-block;
    position: relative;
    left: 10%;
    top: 50px;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
}

.images_upload_title{
    font-weight: bold;
    color: rgb(255, 145, 0);
    display: inline-block;
    position: relative;
    left: 10%;
    top: 50px;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
}

/* --- image dashboard upload --- */
.images_dashboard_upload{
    position: relative;
    left: 15%;
    top: 40px;
    font-size: 18px;
}

.images_dashboard_upload_image_1{
    width: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    display: inline-block;
    position: relative;
    left: 25%;
    top: 70px;
}

/* --- image director creator upload --- */
.direct_creator_upload_title{
    font-weight: bold;
    color: rgb(255, 145, 0);
    display: inline-block;
    position: relative;
    left: 10%;
    top: 150px;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
}

.direct_creator_upload_text{
    position: relative;
    left: 15%;
    top: 150px;
    font-size: 18px;
}

.images_direct_creator_upload_image_1{
    width: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    display: inline-block;
    position: relative;
    left: 25%;
    top: 200px;
}

/* --- image url upload --- */
.url_upload{
    font-weight: bold;
    color: rgb(255, 145, 0);
    display: inline-block;
    position: relative;
    left: 10%;
    top: 250px;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
}

.url_upload_text{
    position: relative;
    left: 15%;
    top: 250px;
    font-size: 18px;
}

.url_upload_image_1{
    width: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    display: inline-block;
    position: relative;
    left: 25%;
    top: 300px;
}

/* --- how to transform images on Cloudflare --- */
.how_to_transform_images{
    font-weight: bold;
    color: rgb(255, 145, 0);
    display: inline-block;
    position: relative;
    left: 10%;
    top: 360px;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
}

.variant_explanation_text{
    position: relative;
    left: 15%;
    top: 350px;
    font-size: 18px;
}

.normal_variant_text{
    position: relative;
    left: 15%;
    top: 350px;
    font-size: 18px;
}

.normal_variant_text_2{
    position: relative;
    left: 15%;
    top: 380px;
    font-size: 18px;
}

.normal_variant_text_3{
    position: relative;
    left: 15%;
    top: 380px;
    font-size: 18px;
}

.normal_variant_text_4{
    position: relative;
    left: 15%;
    top: 380px;
    font-size: 18px;
}

.normal_variant_text_5{
    position: relative;
    left: 15%;
    top: 380px;
    font-size: 18px;
}

.variant_word_style{
    font-size: 18px;
    color: rgb(98, 146, 243);
}

/* --- normal variant example --- */
.normal_variant_image_1{
    width: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    display: inline-block;
    position: relative;
    left: 25%;
    top: 360px;
}

.normal_variant_image_2{
    width: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    display: inline-block;
    position: relative;
    left: 25%;
    top: 380px;
}

.normal_variant_image_3{
    width: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    display: inline-block;
    position: relative;
    left: 25%;
    top: 380px;
}

.normal_variant_image_5{
    width: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    display: inline-block;
    position: relative;
    left: 25%;
    top: 380px;
}

.normal_variant_image_6{
    width: 45%;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    display: inline-block;
    position: relative;
    left: 25%;
    top: 380px;
}

/* --- Flexible Variants --- */
.flexible_variants{

    font-weight: bold;
    color: rgb(255, 145, 0);
    display: inline-block;
    position: relative;
    left: 10%;
    top: 400px;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;

}

.flexible_variant_explanation{
    position: relative;
    left: 15%;
    top: 380px;
    font-size: 18px;
}

.flexible_variant_explanation_2{
    position: relative;
    left: 15%;
    top: 380px;
    font-size: 18px;
}

.flexible_variant_explanation_3{
    position: relative;
    left: 15%;
    top: 380px;
    font-size: 18px;
    padding-bottom: 100px;
}

.flexible_variant_image_1{
    width: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    display: inline-block;
    position: relative;
    left: 25%;
    top: 380px;
}

/* --- Flexible Variant example --- */

.flexible_variant_code{
    position: relative;
    left: 15%;
    top: 380px;
    font-size: 18px;
}

/* ---------- Stream Page ---------- */
.home_sub_stream{
    display: inline-block;
    font-weight: bold;
    color: rgb(255, 145, 0);
    position: relative;
    left: 65px;
    bottom: 40px;
    font-size: 20px;
}

/* --- Logo on Stream Page --- */
.cf_logo_stream{
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    top: 15px;
    margin-left: 5px;
}
.cloudflare_logo_icon_stream{
    display: inline-block;
    position: relative;
    left: 70px;
    width: 60px;
}

/* --- video on demand --- */
.video_on_demand_title{
    font-weight: bold;
    color: rgb(255, 145, 0);
    display: inline-block;
    position: relative;
    top: 70px;
    left: 15%;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
}

.demo_video_1{
    left: 30%;
    top: 120px;
}

.demo_video_2{
    left: 15%;
    bottom: 500px;
}

/* --- live video --- */
.live_video_title{
    font-weight: bold;
    color: rgb(255, 145, 0);
    display: inline-block;
    position: relative;
    left: 15%;
    bottom: 300px;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
}

.demo_live_video_1{
    left: 15%;
    bottom: 1800px;
}