@charset "utf-8";
/* CSS Document */


* {
    box-sizing: border-box;
}        


body {
            font-family: "roboto", Arial, sans-serif;
            line-height: 1.6;
            margin: 0px;
			background-color: #FAFAF0;
        }





.color-yellow { color: #FFC300;
				font-family: "Bebas Neue", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
				
				}
.color-rust { color: #FF5733;
				font-family: "Bebas Neue", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
				}
.color-teal { color: #01796F;
				font-family: "Bebas Neue", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
				}


        h1 { font-size: 3.125em;
				font-weight:  200;
				font-family: "Montserrat", sans-serif;
				    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); }

        #logo { font-size: 2.5em;
			font-family: "Bebas Neue", sans-serif;
			font-weight: 700;}


        h2 { font-size: 2em;
				font-weight:  600;
				font-family: "Montserrat", sans-serif;}


        h3 { font-size: 1.75em;
				font-weight:  600;
				font-family: "Playfair Display", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
				color: #333333;
					}


        h4 { font-size: 1.5em; 
				font-family: "roboto", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";}


        a {
            color: #FFC300;
			font-family: "Roboto", sans-serif;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
      
        input, textarea {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        ul {
            list-style-type: disc;
            margin: 10px 0 20px 20px;
        }
        p {
            margin: 15px 0;
				font-family: "Roboto", sans-serif;
        }
        .color-box {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin: 10px;
        }
        .logo {
            margin-bottom: 20px;
			font-family: "Bebas Neue", sans-serif;
        }
.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
	margin-bottom: 100px;
 
}

		.color-yellow { color: #FFC300;
				font-family: "Bebas Neue", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
				
				}
		.color-rust { color: #FF5733;
				font-family: "Bebas Neue", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
				}
		.color-cream { color: #FAFAF0;
				font-family: "Bebas Neue", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
				}





                                 /*------------------Form Section-------------------*/

.centered-form {
    max-width: 500px; 
    margin: 0 auto; 
    padding: 20px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    border-radius: 8px; 
    background-color: #fff;
	outline: 1px solid #333333;
	
}

#form {
    background-color: #FFC300;
    padding: 20px; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    max-width: 400px; 
    width: 100%;
}		


#form h2 {
    color: #333333;
	text-align: center;
	margin-top: 0;
    margin-bottom: 0;
	font-size: 2.5em;
	font-weight: 300;
}

#form {
    background-color: #FFC300;
    padding: 0; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
	border-radius: 15px;
    max-width: 1200px; 
    width: 80%;
    margin: 0 auto; 
    height: 450px;
}		




#form p {
    color: #333333;
    margin-bottom: 30px; 
}


.form-group {
	
    width: 100%; 
    max-width: 400px; 
    margin-bottom: 20px; 
}


input[type="email"] {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 2px; 
    box-sizing: border-box;
	text-align: center;
	outline: 1px solid #333333;
}


form .button {
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	outline: 1px solid #333333;
}
form .button:hover {
    background-color: #ffffff; 
    color: #EE7C31; 
}

.button {
		text-transform: uppercase;
		background-color:  #FF5733;
		color: #FAFAF0; 
		font-size: 17px;
		font-weight: 700px;
		padding:  12px 20px;
		border: none;
		display:  table;
		margin-top:  20px;
		
}

.button.value-button {
		font-size:  45px;
		font-weight: 700;
		padding: 15px;
		display:  table;
		margin-top:  45px;
}


#social img {
    width: 50px; 
    height: auto; 
}
#social {
    margin-right: 20px; 
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

#social li {
    margin: 0 10px; 
}


#sample-button-section .button {
    background-color: #FF5733; 
    color: #FAFAF0; 
}

#sample-button-section .button:hover {
    background-color: #FAFAF0; 
    color: #FF5733; 
}
.form.centered-form {
		margin-botom:  50px;
}

                   /*---------END FORM------------------*/

/*--------------- Header Section--------*/

header {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    padding: 0 20px; 
    background-color: #01796F;
    height: auto;
}

#desktop-logo {
    margin: 0;
    flex-grow: 0; 
    order: -1; 
}




#desktop-logo img {
  height: 80px; 
  padding: 0px 0px 0px 70px;
}
h1  {
		color:  #FAFAF0;
}
.valueprop h1 span {
    display: block;
    text-align: left; 
    margin: 0; 
    line-height: 1.2; 
}

.valueprop h1 span {
    display: block; 
    margin: 0; 
}


.clear {
		clear: both;
}







.nav-collapse {
    display: flex;
    justify-content: flex-end; 
    align-items: center; 
    gap: 10px; 
    margin-left: auto; 
}

nav.nav-collapse ul {
    padding: 0;
    margin: 0;
    display: flex;
    list-style: none;
}

nav.nav-collapse li {
    margin: 0 100px 0px 0px; 
    padding: 0; 
    font-size: 1.5em;
}

nav.nav-collapse a {
    color: #FAFAF0;
    text-decoration: none;
    font-size: .75em;
    padding: 10px 15px; 
}

nav.nav-collapse a:hover {
    text-decoration: underline;
}
/* ------------Banner------------- */


#banner  {
		
		margin-top:  22px;
		margin-left:  1%;
		margin-right: 1%;
		margin-bottom: 75px;
		background-color:  none;
		background-image:url("edited_images/banner.jpg");
		opacity: 2.0;
	    border-radius: 15px; 
    	overflow: hidden;
		height:  80vh;
		background-size:  cover;
		background-position:center;
		position: relative;
		
		
}
.valueprop	{
		max-width:  100%;
		width:  90%;
		position: absolute;
		
		margin: 0 auto;
		left: 6%; 
		top: 50%;
		transform: translateY(-50%)
				
}
.no-uppercase {
		text-transform: none;
}



#category-banner {
		
		margin-top:  22px;
		margin-left:  1%;
		margin-right: 1%;
		margin-bottom: 75px;
		background-color:  none;
		background-image:url("edited_images/categories.jpg");
		opacity: 2.0;
	    border-radius: 15px; 
    	overflow: hidden;
		height:  40vh;
		background-size:  cover;
		background-position:center;
		position: relative;
		
		
}
#trends-banner {
		
		margin-top:  22px;
		margin-left:  1%;
		margin-right: 1%;
		margin-bottom: 75px;
		background-color:  none;
		background-image:url("edited_images/cinematography-trends.jpg");
		opacity: 2.0;
	    border-radius: 15px; 
    	overflow: hidden;
		height:  40vh;
		background-size:  cover;
		background-position:center;
		position: relative;
		
		
}
#historical-banner {
		
		margin-top:  22px;
		margin-left:  1%;
		margin-right: 1%;
		margin-bottom: 75px;
		background-color:  none;
		background-image:url("edited_images/historical-color-usage.jpg");
		opacity: 2.0;
	    border-radius: 15px; 
    	overflow: hidden;
		height:  40vh;
		background-size:  cover;
		background-position:center;
		position: relative;
		
		
}
#analysis-banner {
		
		margin-top:  22px;
		margin-left:  1%;
		margin-right: 1%;
		margin-bottom: 75px;
		background-color:  none;
		background-image:url("edited_images/film-analysis.jpg");
		opacity: 2.0;
	    border-radius: 15px; 
    	overflow: hidden;
		height:  40vh;
		background-size:  cover;
		background-position:center;
		position: relative;
		
		
}
.category-valueprop {
    position: absolute; 
    max-width: 100%; 
    width: 100%; 
    text-align: center; 
    transform: translateY(-50%); 
    top: 50%; 
}

.trends-valueprop {
    position: absolute; 
    max-width: 100%; 
    width: 100%; 
    text-align: center; 
    transform: translateY(-50%); 
    top: 50%; 
}

.historical-valueprop {
    position: absolute; 
    max-width: 100%; 
    width: 100%; 
    text-align: center; 
    transform: translateY(-50%); 
    top: 50%; 
}
.analysis-valueprop {
    position: absolute; 
    max-width: 100%; 
    width: 100%; 
    text-align: center; 
    transform: translateY(-50%); 
    top: 50%; 
}











                /*--------------------Main Body--------------------*/

.container {
    display: flex;
}

.main-content {
    width: 100%;
    padding: 10px;
}



.posts {
    display: flex;
    flex-wrap: wrap;
}

.post {
    width: 48%; 
    margin: 1%; 
}

.post img {
    width: 100%;
    height: auto;
	border-radius: 10px;
}

.post-meta {
    display: flex;
    justify-content: space-between;
	
	
}

.post a img {
    transition: transform 0.3s ease; 
}


.post a:hover img {
    transform: scale(1.05); 
}
.date  {
			
	
}
.lasso {
		padding: 15px;
}

.read-time  {
			
	
	
}
.title a{
		font-family: "playfair display", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
		color: #333333;
		line-height: 1.5;
}

.category {
	
		
}
.category a {
		font-family: "roboto", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		color:  #333333; 
		text-decoration: underline;
	
}		
.title a:hover {
    color: #FF5733;
	 text-decoration: none;
}

.main-content{
	padding-bottom: 50px;
}
                          /*-------------------END  -Main Body--------------------*/




                                  /*--------------------Sidebar--------------------*/

.sidebar {
		    width: 20%;
   			padding: 20px;
			background-color: #FF5733;
			border-radius: 15px;
			color:  #FAFAF0;
			margin-top: 20px;
			margin-right: 20px;
}


.sidebar h3 {
			color:  #FAFAF0;
			font-family: "roboto", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif"
			
}
.about-author {
    display: flex;
    flex-direction: column; 
    align-items: flex-start;   
    justify-content: center; 
}


.about-author p {
			padding: 0 25px;
}
.about-author h3 {
			padding: 25px;
			margin: 0px;
			
			
			
}
.about-us p {
			padding: 0 25px;
}
.about-us h3 {
			padding: 0 25px;
}
.author-portrait {
    margin: 0 auto; 
}
.author-portrait img {
	display: block;
	margin: auto;
    width: 100%;      
    height: auto;     
    max-width: 200px; 
    padding-top: 50px; 
}
.contact h3 {
			padding: 0 25px;
}
.contact p {
			padding: 0 25px;
}
.sidebar{
	margin-bottom: 50px;
}
                                /*--------------------END   Sidebar--------------------*/


                          /*-------------------START Article--------------------*/
.article-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;     
            
    padding: 40px 0 0 0;           
    text-align: center;
	
}

#featured-image2 {
    width: 100%;
    max-width: 900px; 
    height: 73vh; 
    background-image: url("edited_images/makeup.jpg");
    opacity: 1.0;
    border-radius: 15px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    position: relative;
    margin: 0;
   
}
#featured-image {
    width: 100%;
    max-width: 900px; 
    height: 73vh; 
    background-image: url("edited_images/brother2.jpg");
    opacity: 1.0;
    border-radius: 15px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    position: relative;
    margin: 0;
   
}

.featured-lasso {
		 width: 100%;
    	max-width: 900px; 
		
}

.article-wrapper h1 {
    font-size: 3em;
    font-weight: 250;
    font-family: "Playfair Display", serif;
    color: #333333;
    text-align: center;
    max-width: 900px;  
    margin: 0px 0 55px 0;
	text-shadow: none;
}


.article-meta {
    display: flex;
    align-items: center;  
    justify-content: center; 
    gap: 20px;  
    margin-top: 10px; 
    width: 100%; 
}


.article-meta .date {
    font-size: 1.1em;
    color: #333333;
    font-family: "Roboto", sans-serif;
    flex-grow: 1; 
	text-align: left;
}


#article-social {
    display: flex;
    gap: 15px;  
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: center; 
    width: auto;  
}


#article-social li {
    display: inline-block;
}

#article-social img {
    width: 25px;
    height: auto;
    transition: transform 0.3s ease; 
}

#article-social img:hover {
    transform: scale(1.1); 
}


.article-meta .category {
    font-size: 1.1em;
    color: #333333; 
    font-weight: 200;
    font-family: "Roboto", sans-serif;
    text-align: right; 
}

.article-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 20px;
    background-color: none;
    border-radius: 0px;
   
    overflow: hidden;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}


.article-container h2 {
    font-size: 2.25em;
    font-weight: 300;
    font-family: "Roboto", sans-serif;
    color: #333333; 
    text-align: left;
	max-width:  650px;
	width:100%;
	
}


.article-container p {
    font-size: 1.125em;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    color: #333333;
    text-align: left;
    max-width: 650px; 
}


.article-container img {
    width: 100%;
    height: auto;
    max-width: 650px; 
    border-radius: 15px;
	display: block;
	text-align: center;
}


.youtube-embed {
    position: relative;
    width: 100%;             
    max-width: 650px;
	height:  100%;
	max-height: 366px;
	
    margin: 20px 0;           
    border-radius: 15px;       
    overflow: hidden;          

}


.youtube-embed iframe {
    width: 100%;               
    max-width: 650px;
	
	height: 366px;
    border: none;              
    border-radius: 15px;       
    transition: transform 0.3s ease;  
}


.youtube-embed iframe:hover {
    transform: scale(1.05);     
}









				/*--------------------End Article--------------------*/


				/*-------------------Start Category landing--------------------*/

.category-landing {
    display: flex;
    flex-direction: column;
    gap: 100px; 
    margin: 20px; 
}

.container {
    display: flex;
    justify-content: center;
}

.image-box {
    position: relative;
     
    max-width: 1200px; 
    height: 450px; 
    border-radius: 15px; 
    overflow: hidden;
    text-align: center;
    
    
    
}

.image-box img {
  max-width: 100%;
  height: 450px;
	object-fit: cover;
}

.post-wrapper img {
    width: auto;
	max-width: 570px;
    height: auto;  

    object-fit: cover; 
}
.title h2 {
    width: 100%;
	max-width: 570px;
    height: auto;  

    object-fit: cover; 
}

.image-box h2 {
    font-family: 'Montserrat', sans-serif;  
    font-weight: 200;  
    color: #FAFAF0;  
    letter-spacing: 2px; 
    text-align: center; 
    position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
     
    
    margin: 0;
    font-size: 2.75em;  
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);  
}

.image-box h2 a {
			color:  #FAFAF0;
}

.image-box h2 a:hover {
    color: #FF5733;
	text-decoration: none;
}

.image-box a img {
    transition: transform 0.3s ease; 
}


.image-box a:hover img {
    transform: scale(1.05); 
}
				/*-------------------End Category landing--------------------*/

				/*-------------------Start Category pages--------------------*/



.category-content {
    display: grid;
	grid-template-columns: repeat(2, 1fr); 
    grid-gap: 20px; 
    margin-bottom: 40px;
}
.post-wrapper {
    width: 100%; 
    margin-bottom: 20px; 
}




.content-wrapper {
    max-width: 1200px; 
    margin: 0 auto;    
    padding: 0 20px;   
}

.category-post {
    width: 100%; 
    margin: 1%; 
}

.category-post img {
    width: 100%;
    height: auto;
	border-radius: 10px;
}

	.category-post-meta {
    display: flex;
    justify-content: space-between;
	padding:  0 0 100px 0;
}

.category-post a img {
    transition: transform 0.3s ease; 
}


.category-post a:hover img {
    transform: scale(1.05); 
}
/*-------------------End Category pages--------------------*/

.subscribe-wrapper {
    width: 96%;
    max-width: 1092px; 
    margin: 0 auto; 
    padding: 0 20px; 
    box-sizing: border-box; 
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
	text-align: center;
}
.subscribe-wrapper ul {
    width: 100%; 
    text-align: left; 
    padding-left: 0; 
    margin: 0; 
}
.subscribe-wrapper p {
	text-align: left;
}

li {
    margin-bottom: 10px; 
}



.subscribe-wrapper h1 {
    font-size: 3em;
    font-weight: 250;
    font-family: "Playfair Display", serif;
    color: #333333;
    text-align: center;
    max-width: 900px;  
    margin: 55px 0 55px 0;
	text-shadow: none;
}


/*--------------------Begin About Us--------------------*/
.about-section {
    display: flex;                  
    align-items: center;            
    justify-content: center;        
    text-align: left;               
    gap: 20px;                      
    padding: 20px;                  
}

.about-image {
    max-width: 100%;                
    height: auto;                  
    object-fit: contain;           
}

.about-text {
    max-width: 600px;               
}

        .about-text h1 {
    font-size: 3em;
    font-weight: 250;
    font-family: "Playfair Display", serif;
    color: #333333;
    text-align: center;
    max-width: 900px;  
    margin: 55px 0 55px 0;
	text-shadow: none;
}
       












/*--------------------End About Us--------------------*/
                             /*--------------------Footer--------------------*/





#divsocial {
     
    display: flex;
    justify-content: center; 
}

#social {
    display: flex;
    list-style: none; 
    padding: 0; 
    margin: 0; 
	
}

#social li {
    margin: 0 20px; 
}

#social a {
    display: inline-block; 
    transition: transform 0.3s ease; 
}

#social img {
    width: 30px; 
    height: auto; 
	
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px; 
    background-color: #E0E0E0;
    width: 100%;
    margin: 0;
}



#legal {
    margin-top: 20px;
    background-color: #E0E0E0;
    width: 100%;
    text-align: left;
    padding-left: 50px; 
}

#legal ul {
    list-style: none; 
    padding: 0;
    margin: 0;
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
}

#legal li {
    margin: 0px 45px; 
	
}

#legal a {
    text-decoration: underline;
    color: #01796F;
	
}
#legal p {
    
    color: #01796F; 
}


#form, #footernav, #legal {
    margin: 40px 0; 
    padding: 00px; 
}
#shareButton {
  all: unset; 
  display: inline-block; 
  cursor: pointer; 
}

#shareButton:hover {
    cursor: pointer; 
}
                                     /*--------------------END  Footer--------------------*/

                             /*--------------------(max-width: 660px)--------------------*/



@media screen and (max-width: 1120px) {
    .subscribe-wrapper {
        margin: 2%; 
    }
}
@media screen and (max-width: 930px) {
    .container {
        flex-direction: column; 
    }

    .main-content {
        width: 100%; 
    }

    .sidebar {
        width: 98%; 
        margin-top: 20px; 
		margin-left: 1%;
		margin-right: 1%;
    }

    .post {
        width: 100%; 
        margin: 5px 0; 
    }

    footer {
        flex-direction: column; 
        align-items: center;
        text-align: center;
    }

    #legal, #divsocial {
        margin: 10px 0; 
        width: 100%; 
        text-align: center; 
    }

    #social {
        flex-wrap: wrap; 
    }

    #social li {
        margin: 0 10px; 
    }
	

	header {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    padding: 0 0px; 
    background-color: #01796F;
    height: auto;
}
	
	.post-meta {
    display: flex;
    justify-content: space-between;
	padding:  0 0 75px 0;
}
	  .about-section {
    flex-direction: column; 
    text-align: left; 
  }

  .about-image {
    max-width: 80%; 
    margin-bottom: 0px; 
	  margin-top: 50px;
  }
 .about-image {
    max-width: 80%; 
    margin-bottom: 20px; 
  }
  .about-text {
    max-width: 100%; 
  }
	.about-text h1 {
			margin-top: 0px;
	}
		
		
	}



@media screen and (max-width:930px){
 a.nav-toggle{
text-decoration: none;
float: right;
   width:50px; height:50px;
   text-align:center;
   line-height:50px;
   vertical-align:middle;
 }
      nav.nav-collapse ul {
        flex-direction: column; 
        align-items: stretch; 
    }

    nav.nav-collapse li {
        margin: 0;
		 
    }
	nav.nav-collapse a {
		
		       
            color: #FAFAF0;
			font-family: "Roboto", sans-serif;
            text-decoration: none;
        }
	
	
	a.nav-toggle:before{
    content: url("edited_images/toggle.svg");
     
    
    
  }
  .nav-toggle.active::before {
  font-size: 24px;
  content:"^";
}
     nav.nav-collapse a {
        width: 100%; 
        text-align: center; 
        
        margin-bottom: 5px; 
    }
  nav.nav-collapse a:hover{
    text-decoration:none;
    background:#55A2DB;
    color:#FF5733;
  }
	
}

@media (max-width: 630px) {
    .main-content {
        padding: 20px;
    }
    .category-content {
        grid-template-columns: 1fr; 
    }
	 .about-text p {
        text-align: left;
    }
}
@media (max-width: 767px) {
    .trends-valueprop h1 {
        font-size: 2rem; 
        margin: 10px 0; 
        padding: 0 10px; 
    }
	.historical-valueprop h1 {
        font-size: 2rem; 
        margin: 10px 0; 
        padding: 0 10px; 
    }
	.analysis-valueprop h1 {
        font-size: 2rem; 
        margin: 10px 0; 
        padding: 0 10px; 
    }
	.image-box h2 {
        font-size: 2rem; 
        margin: 10px 0; 
        padding: 0 10px; 
    }
}


@media (max-width: 480px) {
   .trends-valueprop  h1 {
        font-size: 1.5rem; 
        margin: 10px 0; 
        padding: 0 5px; 
    }
	.historical_valueprop h1 {
        font-size: 1.5rem; 
        margin: 10px 0; 
        padding: 0 5px; 
    }
		.analysis_valueprop h1 {
        font-size: 1.5rem; 
        margin: 10px 0; 
        padding: 0 5px; 
    }
			.image-box h2 {
        font-size: 1.5rem; 
        margin: 10px 0; 
        padding: 0 5px; 
    }
}

@media (max-width: 767px) {
	
	#desktop-logo img {
				padding: 0px;
	}
	}