/* alt us bosluk mesafesi */
html, body {
        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;
      }
     /* Arka plan resmi */
/* този фон къде го искаш ?? */


body {
    
        background-image: url(images/backgroundimage.jpg);
	    /*background-size: cover;
        background-repeat: no-repeat;
        background-position: center;

        background-color: #0095b7;

        box-sizing: border-box; */
      }

#headline {
        padding: 0.8em;
        font-family: Roboto, helvetica, arial, sans-serif;
        background-color: white;
/*        background-image: url(images/backgroundimage.jpg);*/
        background-size: cover;
      }
	  
      /*headline stilleri */
      #headline h1 {
        font-weight: 200;
        font-size: 40px;
        line-height: 1em;
        margin-bottom: 0;
		color: red;
      }
        
      #headline h2 {
        font-weight: 300;
        font-size: 30px;
		margin-top: 20px;
        margin-top: 5px;
        text-align: center;
      }

      #headline div img {
        width: 100%
      }  

     
      #sectiona, #sectionb,#sectionc, #section1, #section2, #section3 {
        box-sizing: border-box;
        padding: 20px;
      }

      #sectiona h2, #sectionb h2,#sectionc h2, #section1 h2, #section2 h2, #section3 h2  {
        margin-top: 0;
        font-size: 24px
      } 
	  /*sectiona stilleri */
	   #sectiona {
        background-color: white;
        font-family: Roboto, sans-serif;
        font-weight: 100;
        font-size: 18px;
      }

      #sectiona h2 {
        font-weight: 300;
        text-align: center;
        margin-bottom: 0px;
        margin-top: 20px;
      }

      #sectiona h2 + p {
        text-align: center;
      }

      #sectiona div {
        text-align: center;
      }

      #sectiona div img {
        width: 100%
      }
	  /*sectionb stilleri */
	   #sectionb {
        background-color: #e9e9e9;
        font-family: Roboto, sans-serif;
        font-weight: 100;
        font-size: 18px;
      }

      #sectionb h2 {
        font-weight: 300;
        text-align: center;
        margin-bottom: 0px;
        margin-top: 20px;
      }

      #sectionb h2 + p {
        text-align: center;
      }

      #sectionb div {
        text-align: center;
      }

      #sectionb div img {
        width: 100%
      }
	  
	   /*sectionc stilleri */
	   #sectionc {
        background-color: white;
        font-family: Roboto, sans-serif;
        font-weight: 100;
        font-size: 18px;
      }

      #sectionc h2 {
        font-weight: 300;
        text-align: center;
        margin-bottom: 0px;
        margin-top: 20px;
      }

      #sectionc h2 + p {
        text-align: center;
      }

      #sectionc div {
        text-align: center;
      }

      #sectionc div img {
        width: 100%
      }
	  
       /*section1 stilleri */
      #section1 {
        background-color: #f5f5f5;
        font-family: Roboto, sans-serif;
        font-weight: 100;
        font-size: 18px;
      }

      #section1 h2 {
        font-weight: 300;
        text-align: center;
        margin-bottom: 0px;
        margin-top: 20px;
      }

      #section1 h2 + p {
        text-align: center;
      }

      #section1 div {
        text-align: center;
      }

      #section1 div img {
        width: 100%
      }
       /*section2 stilleri */
      #section2 {
        background-color: #e9e9e9;
        font-family: Roboto, sans-serif;
        font-weight: 100;
        font-size: 18px;
      }

      #section2 h2 {
        font-weight: 300;
        text-align: center;
        margin-bottom: 0px;
        margin-top: 20px;
      }

      #section2 h2 + p {
        text-align: center;
      }

      #section2 div {
        text-align: center;
      }

      #section2 div img {
        width: 100%
      }
	  
      /*section3 stilleri */
      #section3 {
        background-color: #f5f5f5;
        font-family: Roboto, sans-serif;
        font-weight: 100;
        text-align: center;
        margin: auto;
      }

      #section3 h2 {
        font-weight: 300;
        text-align: center;
        margin-bottom: 0px;
        margin-top: 20px;
      }

      #section3 h2 + p {
        text-align: center;
      }
	  
	  #section3 div {
        text-align: center;
      }
	  
	   #section3 div img {
        width: 100%
      }
      
      /*footer stilleri */
      footer {
        font-family: Roboto, sans-serif;
        font-weight: 300;
        text-align: center;
        background-color: hsl(8, 70%, 54%);
        color: white;
        padding-bottom: 20px;
        padding-top: 20px;
      }

      
      /*600px altina dusunce olacak goruntu */
      
@media screen and (max-width: 600px) {
        
          #headline div img {
            width: 95%;
            margin: 2%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
		  
		  #sectiona div img {
            width: 95%;
            margin: 2%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
		  
		  #sectionb div img {
            width: 95%;
            margin: 2%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
		  
		  #sectionc div img {
            width: 47%;
            margin: 1%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
		  
		  #section1 div img {
            width: 95%;
            margin: 2%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
		  
		  #section2 div img {
            width: 95%;
            margin: 2%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
		  
		  #section3 div img {
            width: 95%;
            margin: 2%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
       

       
      }
	  
      /*600px ustune cikinca olacak goruntu */
@media screen and (min-width: 600px) {
          #headline {
            padding: 20px 5%;
          }
          
          .container {
            margin: auto;
            max-width: 800px;
          }

          

          #headline br {
            clear: both;
          }
           
          
          #headline, #sectiona, #sectionb,#sectionc, #section1, #section2, #section3 {
            box-sizing: border-box;
            padding: 10px 20% 80px 20%;
          }
          
          #headline h2, #sectiona h2, #sectionb h2,#sectionc h2, #section1 h2, #section2 h2, #section3 h2  {
            margin-top: 0;
            font-size: 60px
          }
          
          
          

          #section1 br {
            clear: both;
          }
          /*standart gorunumde resim boyutu */
		  
		  #headline div img {
            width: 30%;
            margin: 1%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
		  
		  #sectiona div img {
            width: 30%;
            margin: 1%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
		  
		  #sectionb div img {
            width: 30%;
            margin: 1%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
		  
		  #sectionc div img {
            width: 22%;
            margin: 1%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
		  
		  #section1 div img {
            width: 30%;
            margin: 1%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
		  
          #section2 div img {
            width: 30%;
            margin: 1%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
		  
		  #section3 div img {
            width: 30%;
            margin: 1%;
            box-sizing: border-box;
            border-radius: 5% 5%;
            box-shadow: black 0px 0px 5px;
          }
		  }